1

2026-04-16 15:45:00 +08:00
parent 6363267bca
commit 91b63675eb
43 changed files with 5652 additions and 853 deletions
--- a/src/components/custom-world-agent/CustomWorldAgentDraftDrawer.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentDraftDrawer.tsx
@@ -55,12 +55,12 @@ export function CustomWorldAgentDraftDrawer({
                </div>
              </div>
              <div className="mt-2 space-y-2">
-                {group.items.map((card) => {
+                {group.items.map((card, index) => {
                  const isActive = activeCardId === card.id;

                  return (
                    <button
-                      key={card.id}
+                      key={card.id || `${group.kind}-card-${index}`}
                      type="button"
                      onClick={() => onSelectCard(card.id)}
                      className={`w-full rounded-[1.2rem] border px-3 py-3 text-left transition ${
--- a/src/components/custom-world-agent/CustomWorldAgentLockBar.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentLockBar.tsx
@@ -7,15 +7,19 @@ function readLockedItems(lockState: Record<string, unknown> | null) {
    return [];
  }

-  return Object.entries(lockState)
+  return [...new Set(
+    Object.entries(lockState)
    .flatMap(([key, value]) =>
      Array.isArray(value)
-        ? value.map((item) => `${key}:${String(item)}`)
+        ? value
+            .map((item) => String(item).trim())
+            .filter(Boolean)
+            .map((item) => `${key}:${item}`)
        : typeof value === 'string' && value.trim()
          ? [`${key}:${value.trim()}`]
          : [],
    )
-    .slice(0, 8);
+  )].slice(0, 8);
 }

 export function CustomWorldAgentLockBar({
@@ -30,9 +34,9 @@ export function CustomWorldAgentLockBar({
      </div>
      {lockedItems.length > 0 ? (
        <div className="mt-3 flex flex-wrap gap-2">
-          {lockedItems.map((item) => (
+          {lockedItems.map((item, index) => (
            <span
-              key={item}
+              key={`locked-item-${index}-${item}`}
              className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[11px] text-amber-100"
            >
              {item}
--- a/src/components/custom-world-agent/CustomWorldAgentQuickActions.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentQuickActions.tsx
@@ -5,6 +5,7 @@ type CustomWorldAgentQuickActionsProps = {
  disabled: boolean;
  canDraftFoundation: boolean;
  showEntityActions?: boolean;
+  showSummaryAction?: boolean;
  onRequestSummary: () => void;
  onDraftFoundation: () => void;
  onGenerateCharacter?: () => void;
@@ -45,6 +46,7 @@ export function CustomWorldAgentQuickActions({
  disabled,
  canDraftFoundation,
  showEntityActions = false,
+  showSummaryAction = true,
  onRequestSummary,
  onDraftFoundation,
  onGenerateCharacter,
@@ -70,12 +72,14 @@ export function CustomWorldAgentQuickActions({
        快捷动作
      </div>
      <div className="mt-3 flex flex-col gap-2">
-        <QuickActionButton
-          label={summaryAction?.label ?? '总结当前设定'}
-          onClick={onRequestSummary}
-          disabled={disabled}
-          tone="sky"
-        />
+        {showSummaryAction ? (
+          <QuickActionButton
+            label={summaryAction?.label ?? '总结当前设定'}
+            onClick={onRequestSummary}
+            disabled={disabled}
+            tone="sky"
+          />
+        ) : null}
        {draftAction && canDraftFoundation ? (
          <QuickActionButton
            label={draftAction.label}
--- a/src/components/custom-world-agent/CustomWorldAgentThread.test.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentThread.test.tsx
@@ -0,0 +1,65 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { afterEach, expect, test, vi } from 'vitest';
+
+import { CustomWorldAgentThread } from './CustomWorldAgentThread';
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+test('filters empty recommended replies and avoids duplicate key warnings', () => {
+  const consoleErrorSpy = vi
+    .spyOn(console, 'error')
+    .mockImplementation(() => undefined);
+
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => {};
+  }
+
+  render(
+    <CustomWorldAgentThread
+      messages={[
+        {
+          id: '',
+          role: 'assistant',
+          kind: 'summary',
+          text: '先把世界骨架收出来。',
+          createdAt: '2026-04-16T10:00:00.000Z',
+          relatedOperationId: null,
+        },
+        {
+          id: '',
+          role: 'user',
+          kind: 'chat',
+          text: '继续。',
+          createdAt: '2026-04-16T10:01:00.000Z',
+          relatedOperationId: null,
+        },
+      ]}
+      recommendedReplies={[
+        '',
+        '继续补充冲突',
+        '继续补充冲突',
+        ' 先确定玩家身份 ',
+      ]}
+      onRecommendedReply={() => {}}
+    />,
+  );
+
+  expect(screen.getByRole('button', { name: '继续补充冲突' })).toBeTruthy();
+  expect(screen.getByRole('button', { name: '先确定玩家身份' })).toBeTruthy();
+  expect(screen.queryByRole('button', { name: /^\s*$/u })).toBeNull();
+  expect(screen.getAllByRole('button')).toHaveLength(2);
+
+  const duplicateKeyCalls = consoleErrorSpy.mock.calls.filter((call) =>
+    call.some(
+      (arg) =>
+        typeof arg === 'string' &&
+        arg.includes('Encountered two children with the same key'),
+    ),
+  );
+
+  expect(duplicateKeyCalls).toHaveLength(0);
+});
--- a/src/components/custom-world-agent/CustomWorldAgentThread.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentThread.tsx
@@ -26,9 +26,16 @@ export function CustomWorldAgentThread({
  onRecommendedReply,
 }: CustomWorldAgentThreadProps) {
  const bottomRef = useRef<HTMLDivElement | null>(null);
-  const lastAssistantMessageId = [...messages]
-    .reverse()
-    .find((message) => message.role === 'assistant')?.id;
+  const visibleRecommendedReplies = [
+    ...new Set(
+      recommendedReplies.map((reply) => reply.trim()).filter(Boolean),
+    ),
+  ].slice(0, 3);
+  const lastAssistantMessageIndex = messages.reduce(
+    (lastIndex, message, index) =>
+      message.role === 'assistant' ? index : lastIndex,
+    -1,
+  );

  useEffect(() => {
    bottomRef.current?.scrollIntoView({
@@ -45,13 +52,13 @@ export function CustomWorldAgentThread({
        </div>
      ) : (
        <div className="space-y-3">
-          {messages.map((message) => {
+          {messages.map((message, index) => {
            const isUser = message.role === 'user';
            const isSystem = message.role === 'system';

            return (
              <div
-                key={message.id}
+                key={message.id || `message-${index}`}
                className={`flex ${
                  isUser ? 'justify-end' : 'justify-start'
                }`}
@@ -70,12 +77,12 @@ export function CustomWorldAgentThread({
                    {formatMessageTime(message.createdAt)}
                  </div>
                  {!isUser &&
-                  message.id === lastAssistantMessageId &&
-                  recommendedReplies.length > 0 ? (
+                  index === lastAssistantMessageIndex &&
+                  visibleRecommendedReplies.length > 0 ? (
                    <div className="mt-3 flex flex-col gap-2">
-                      {recommendedReplies.slice(0, 3).map((reply) => (
+                      {visibleRecommendedReplies.map((reply, replyIndex) => (
                        <button
-                          key={reply}
+                          key={`recommended-reply-${replyIndex}-${reply}`}
                          type="button"
                          onClick={() => onRecommendedReply?.(reply)}
                          className="rounded-2xl border border-white/10 bg-white/5 px-3 py-2 text-left text-xs leading-5 text-zinc-200 transition hover:border-emerald-300/25 hover:text-white"
--- a/src/components/custom-world-agent/CustomWorldAgentWorkspace.interaction.test.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentWorkspace.interaction.test.tsx
@@ -212,7 +212,11 @@ const baseSession: CustomWorldAgentSessionSnapshot = {
      targetId: null,
    },
  ],
-  recommendedReplies: ['现在开始生成草稿', '先总结一下当前设定', '我还想再补充一点'],
+  recommendedReplies: [
+    '现在开始生成草稿',
+    '先总结一下当前设定',
+    '我还想再补充一点',
+  ],
  qualityFindings: [],
  assetCoverage: {
    roleAssets: [
@@ -268,6 +272,10 @@ test('workspace loads detail, saves edits, opens generate actions, and reflects
    );
  });

+  expect(screen.getByText('卡片详情')).toBeTruthy();
+  expect(screen.queryByPlaceholderText('输入消息')).toBeNull();
+  expect(screen.queryByText('当前底稿已经可以继续精修。')).toBeNull();
+
  await user.click(screen.getByRole('button', { name: '编辑设定' }));
  const summaryInput = screen.getByLabelText('摘要');
  await user.clear(summaryInput);
@@ -297,7 +305,9 @@ test('workspace loads detail, saves edits, opens generate actions, and reflects
    );
  });

-  const [generateCharacterButton] = screen.getAllByRole('button', { name: '新增角色' });
+  const [generateCharacterButton] = screen.getAllByRole('button', {
+    name: '新增角色',
+  });
  await user.click(generateCharacterButton!);
  expect(screen.getByRole('button', { name: '生成角色' })).toBeTruthy();
  await user.click(screen.getByRole('button', { name: '生成角色' }));
@@ -309,7 +319,9 @@ test('workspace loads detail, saves edits, opens generate actions, and reflects
    anchorCardIds: ['character-1'],
  });

-  const [generateLandmarkButton] = screen.getAllByRole('button', { name: '新增场景' });
+  const [generateLandmarkButton] = screen.getAllByRole('button', {
+    name: '新增场景',
+  });
  await user.click(generateLandmarkButton!);
  expect(screen.getByRole('button', { name: '生成场景' })).toBeTruthy();
  await user.click(screen.getByRole('button', { name: '生成场景' }));
--- a/src/components/custom-world-agent/CustomWorldAgentWorkspace.test.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentWorkspace.test.tsx
@@ -3,7 +3,7 @@ import { expect, test } from 'vitest';

 import { CustomWorldAgentWorkspace } from './CustomWorldAgentWorkspace';

-test('custom world agent workspace renders progress labels, action button and recommended replies', () => {
+test('custom world agent workspace renders draft workspace instead of chat after draft cards appear', () => {
  const html = renderToStaticMarkup(
    <CustomWorldAgentWorkspace
      session={{
@@ -87,10 +87,11 @@ test('custom world agent workspace renders progress labels, action button and re
    />,
  );

-  expect(html).toContain('首轮草稿会先确认这 6 项信息');
-  expect(html).toContain('世界核心');
-  expect(html).toContain('玩家开局');
-  expect(html).toContain('现在开始生成草稿');
-  expect(html).toContain('开始生成草稿');
-  expect(html).toContain('欢迎。当前底稿已经可以继续精修。');
+  expect(html).toContain('卡片详情');
+  expect(html).toContain('快捷动作');
+  expect(html).toContain('草稿抽屉');
+  expect(html).not.toContain('首轮草稿会先确认这 6 项信息');
+  expect(html).not.toContain('现在开始生成草稿');
+  expect(html).not.toContain('欢迎。当前底稿已经可以继续精修。');
+  expect(html).not.toContain('输入消息');
 });
--- a/src/components/custom-world-agent/CustomWorldAgentWorkspace.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentWorkspace.tsx
@@ -7,8 +7,8 @@ import type {
  CustomWorldDraftCardDetail,
  SendCustomWorldAgentMessageRequest,
 } from '../../../packages/shared/src/contracts/customWorldAgent';
-import { CustomWorldRoleAssetStudioModal } from '../CustomWorldRoleAssetStudioModal';
 import { getCustomWorldAgentCardDetail } from '../../services/aiService';
+import { CustomWorldRoleAssetStudioModal } from '../CustomWorldRoleAssetStudioModal';
 import { CustomWorldAgentComposer } from './CustomWorldAgentComposer';
 import { CustomWorldAgentDraftDetailPanel } from './CustomWorldAgentDraftDetailPanel';
 import { CustomWorldAgentDraftDrawer } from './CustomWorldAgentDraftDrawer';
@@ -149,7 +149,8 @@ function resolveRoleAssetTarget(
        : [],
      imageSrc: toText(role.imageSrc) || undefined,
      generatedVisualAssetId: toText(role.generatedVisualAssetId) || undefined,
-      generatedAnimationSetId: toText(role.generatedAnimationSetId) || undefined,
+      generatedAnimationSetId:
+        toText(role.generatedAnimationSetId) || undefined,
      animationMap: toRecord(role.animationMap) ?? undefined,
    } satisfies WorkspaceRoleAssetTarget,
    roleKind: playableRole ? ('playable' as const) : ('story' as const),
@@ -352,7 +353,8 @@ export function CustomWorldAgentWorkspace({
  }

  const isBusy =
-    activeOperation?.status === 'queued' || activeOperation?.status === 'running';
+    activeOperation?.status === 'queued' ||
+    activeOperation?.status === 'running';
  const canStartDraft =
    session.creatorIntentReadiness.isReady &&
    session.stage === 'foundation_review';
@@ -360,9 +362,10 @@ export function CustomWorldAgentWorkspace({
    !session.creatorIntentReadiness.isReady &&
    session.creatorIntentReadiness.completedKeys.includes('world_hook');
  const showDraftWorkspace =
-    (session.stage === 'object_refining' || session.stage === 'visual_refining') &&
-    session.draftCards.length > 0;
-  const selectedCard = session.draftCards.find((card) => card.id === selectedCardId) ?? null;
+    session.stage !== 'foundation_review' && session.draftCards.length > 0;
+  const showAgentConversation = !showDraftWorkspace;
+  const selectedCard =
+    session.draftCards.find((card) => card.id === selectedCardId) ?? null;
  const recommendedReplies = buildRecommendedReplies(session);
  const selectedRoleAssetContext = resolveRoleAssetTarget(
    session,
@@ -424,27 +427,30 @@ export function CustomWorldAgentWorkspace({

  return (
    <div className="mx-auto flex h-full min-h-0 w-full max-w-[1500px] flex-col gap-3">
-      <CustomWorldAgentHeader onBack={onBack} />
-      <CustomWorldAgentReadinessBar
-        completedKeys={session.creatorIntentReadiness.completedKeys}
-        isReady={canStartDraft}
-        busy={isBusy}
-        onStartDraft={() => {
-          onExecuteAction({
-            action: 'draft_foundation',
-          });
-        }}
-      />
+      {!showDraftWorkspace ? <CustomWorldAgentHeader onBack={onBack} /> : null}
+      {!showDraftWorkspace ? (
+        <CustomWorldAgentReadinessBar
+          completedKeys={session.creatorIntentReadiness.completedKeys}
+          isReady={canStartDraft}
+          busy={isBusy}
+          onStartDraft={() => {
+            onExecuteAction({
+              action: 'draft_foundation',
+            });
+          }}
+        />
+      ) : null}
      <CustomWorldAgentOperationBanner operation={activeOperation} />

      {showDraftWorkspace ? (
-        <div className="grid min-h-0 flex-1 gap-3 xl:grid-cols-[18rem_minmax(0,1fr)_24rem]">
+        <div className="grid min-h-0 flex-1 gap-3 xl:grid-cols-[20rem_minmax(0,1fr)]">
          <div className="flex min-h-0 flex-col gap-3 xl:overflow-hidden">
            <CustomWorldAgentQuickActions
              suggestedActions={session.suggestedActions}
              disabled={isBusy}
              canDraftFoundation={canStartDraft}
              showEntityActions
+              showSummaryAction={false}
              showRoleAssetAction={selectedCard?.kind === 'character'}
              onRequestSummary={submitSummaryRequest}
              onDraftFoundation={() => {
@@ -464,13 +470,11 @@ export function CustomWorldAgentWorkspace({
              onFocusSuggestedAction={(action) => {
                if (action?.targetId) {
                  setSelectedCardId(action.targetId);
-                  setDetailModalOpen(true);
                  return;
                }

                if (session.draftCards[0]) {
                  setSelectedCardId(session.draftCards[0].id);
-                  setDetailModalOpen(true);
                }
              }}
            />
@@ -480,13 +484,12 @@ export function CustomWorldAgentWorkspace({
                activeCardId={selectedCardId}
                onSelectCard={(cardId) => {
                  setSelectedCardId(cardId);
-                  setDetailModalOpen(true);
                }}
              />
            </div>
          </div>

-          <div className="hidden min-h-0 xl:block xl:overflow-y-auto">
+          <div className="min-h-0 xl:overflow-y-auto">
            <CustomWorldAgentDraftDetailPanel
              detail={detail}
              loading={detailLoading}
@@ -526,38 +529,25 @@ export function CustomWorldAgentWorkspace({
              }}
            />
          </div>
-
-          <div className="flex min-h-0 flex-col gap-3">
-            <div className="h-[18rem] min-h-[18rem] xl:min-h-0 xl:flex-1">
+        </div>
+      ) : (
+        <>
+          {showAgentConversation ? (
+            <>
              <CustomWorldAgentThread
                messages={session.messages}
                recommendedReplies={recommendedReplies}
                onRecommendedReply={handleRecommendedReply}
              />
-            </div>
-            <CustomWorldAgentComposer
-              disabled={isBusy}
-              onSubmit={onSubmitMessage}
-              onSummaryClick={submitSummaryRequest}
-              onAutoCompleteClick={() => setAutoCompleteConfirmOpen(true)}
-              showAutoComplete={showAutoCompleteButton}
-            />
-          </div>
-        </div>
-      ) : (
-        <>
-          <CustomWorldAgentThread
-            messages={session.messages}
-            recommendedReplies={recommendedReplies}
-            onRecommendedReply={handleRecommendedReply}
-          />
-          <CustomWorldAgentComposer
-            disabled={isBusy}
-            onSubmit={onSubmitMessage}
-            onSummaryClick={submitSummaryRequest}
-            onAutoCompleteClick={() => setAutoCompleteConfirmOpen(true)}
-            showAutoComplete={showAutoCompleteButton}
-          />
+              <CustomWorldAgentComposer
+                disabled={isBusy}
+                onSubmit={onSubmitMessage}
+                onSummaryClick={submitSummaryRequest}
+                onAutoCompleteClick={() => setAutoCompleteConfirmOpen(true)}
+                showAutoComplete={showAutoCompleteButton}
+              />
+            </>
+          ) : null}
        </>
      )}

@@ -671,13 +661,13 @@ export function CustomWorldAgentWorkspace({
          }
          visualPointCost={
            selectedRoleAssetContext.assetSummary?.status === 'missing'
-              ? selectedRoleAssetContext.assetSummary?.nextPointCost ?? 20
+              ? (selectedRoleAssetContext.assetSummary?.nextPointCost ?? 20)
              : 20
          }
          animationPointCost={
            selectedRoleAssetContext.assetSummary?.status === 'missing'
              ? 60
-              : selectedRoleAssetContext.assetSummary?.nextPointCost ?? 60
+              : (selectedRoleAssetContext.assetSummary?.nextPointCost ?? 60)
          }
          syncBusy={
            activeOperation?.type === 'sync_role_assets' &&