split components

2026-07-15 16:29:59 +08:00
parent 50eec83cdb
commit 0e8f437b25
4 changed files with 226 additions and 218 deletions
@@ -0,0 +1,43 @@
+import { Image as ImageIcon, X } from 'lucide-react';
+
+import type { EditorAgentAttachmentRef } from '@/packages/shared/src/contracts';
+import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
+
+function AttachmentChip({
+  attachment,
+  onRemove,
+}: {
+  attachment: EditorAgentAttachmentRef;
+  onRemove?: () => void;
+}) {
+  const label = attachment.label?.trim() || attachment.referenceId;
+  return (
+    <span className="group relative inline-flex max-w-full items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-600 shadow-sm">
+      <ImageIcon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      <span className="truncate">{label}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          className="-mr-1 inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-700"
+          aria-label={`移除附件 ${label}`}
+          onClick={onRemove}
+        >
+          <X className="h-3 w-3" aria-hidden="true" />
+        </button>
+      ) : null}
+      {attachment.thumbnailSrc || attachment.imageSrc ? (
+        <span className="pointer-events-none absolute bottom-[calc(100%+0.4rem)] left-0 hidden rounded-2xl border border-white bg-white p-1 shadow-xl group-hover:block">
+          <ResolvedAssetImage
+            src={attachment.thumbnailSrc ?? attachment.imageSrc}
+            objectKey={attachment.objectKey}
+            refreshKey={attachment.referenceId}
+            alt=""
+            className="h-24 w-24 rounded-xl object-cover"
+          />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export default AttachmentChip;
@@ -27,7 +27,6 @@ import { PlatformDangerConfirmDialog } from '@/src/components/common/PlatformDan
 import { UnifiedModal } from '@/src/components/common/UnifiedModal.tsx';
 import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
 import {
-  AttachmentChip,
  MessageBubble,
  ThinkingBubble,
 } from '@/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx';
@@ -45,6 +44,7 @@ import {
  type EditorAgentConversationClient,
  useEditorAgentConversation,
 } from './useEditorAgentConversation';
+import AttachmentChip from '@/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx';

 type AttachmentPickerTab = 'canvas' | 'library';

@@ -1,17 +1,8 @@
-import { Check, Image as ImageIcon, Loader2, Volume2, X } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import type {
-  EditorAgentAttachmentRef,
-  EditorAgentMessage,
-  EditorAgentToolCall,
-} from '@/packages/shared/src/contracts';
-import { getExternalGenerationJobStatus } from '@/src/services/external-generation';
+import type { EditorAgentMessage } from '@/packages/shared/src/contracts';
+import AttachmentChip from '@/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx';
 import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
 import { PendingToolCall } from '@/src/components/image-editor/EditorAgentConversation/PendingToolCall.tsx';
-import { editorAgentToolLabel } from '@/src/components/image-editor/EditorAgentConversation/toolCallPresentation.ts';
-import { ResolvedAssetAudio } from '@/src/components/ResolvedAssetAudio.tsx';
-import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
-import { ResolvedAssetVideo } from '@/src/components/ResolvedAssetVideo.tsx';
+import ToolCallView from '@/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx';

 function messageRoleLabel(role: EditorAgentMessage['role']) {
  if (role === 'user') {
@@ -20,211 +11,6 @@ function messageRoleLabel(role: EditorAgentMessage['role']) {
  return 'Agent';
 }

-export function AttachmentChip({
-  attachment,
-  onRemove,
-}: {
-  attachment: EditorAgentAttachmentRef;
-  onRemove?: () => void;
-}) {
-  const label = attachment.label?.trim() || attachment.referenceId;
-  return (
-    <span className="group relative inline-flex max-w-full items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-600 shadow-sm">
-      <ImageIcon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-      <span className="truncate">{label}</span>
-      {onRemove ? (
-        <button
-          type="button"
-          className="-mr-1 inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-700"
-          aria-label={`移除附件 ${label}`}
-          onClick={onRemove}
-        >
-          <X className="h-3 w-3" aria-hidden="true" />
-        </button>
-      ) : null}
-      {attachment.thumbnailSrc || attachment.imageSrc ? (
-        <span className="pointer-events-none absolute bottom-[calc(100%+0.4rem)] left-0 hidden rounded-2xl border border-white bg-white p-1 shadow-xl group-hover:block">
-          <ResolvedAssetImage
-            src={attachment.thumbnailSrc ?? attachment.imageSrc}
-            objectKey={attachment.objectKey}
-            refreshKey={attachment.referenceId}
-            alt=""
-            className="h-24 w-24 rounded-xl object-cover"
-          />
-        </span>
-      ) : null}
-    </span>
-  );
-}
-
-function ToolCallView({
-  toolCall,
-  onJobCompleted,
-}: {
-  toolCall: EditorAgentToolCall;
-  onJobCompleted?: () => void;
-}) {
-  const videos = toolCall.videos ?? [];
-  const audios = toolCall.audios ?? [];
-  const jobId = toolCall.externalJobId?.trim() || null;
-  const displaySourceKey = jobId ?? toolCall.status;
-  const initialDisplayStatus =
-    toolCall.status === 'completed'
-      ? 'completed'
-      : toolCall.status === 'failed'
-        ? 'failed'
-        : toolCall.status === 'cancelled'
-          ? 'cancelled'
-          : 'pending';
-  const [displayStatus, setDisplayStatus] = useState(initialDisplayStatus);
-  const [displayError, setDisplayError] = useState<string | null>(
-    toolCall.error ?? null,
-  );
-  const completionNotifiedRef = useRef(false);
-  const onJobCompletedRef = useRef(onJobCompleted);
-  useEffect(() => {
-    onJobCompletedRef.current = onJobCompleted;
-  }, [onJobCompleted]);
-  useEffect(() => {
-    if (toolCall.status !== 'not_completed' || !jobId) {
-      completionNotifiedRef.current = false;
-      return;
-    }
-    // Only a different job may reinitialize the local display state.
-    setDisplayStatus(initialDisplayStatus);
-    setDisplayError(toolCall.error ?? null);
-    completionNotifiedRef.current = false;
-    let disposed = false;
-    let timeoutId: ReturnType<typeof setTimeout> | undefined;
-    const poll = async () => {
-      try {
-        const response = await getExternalGenerationJobStatus(jobId);
-        if (disposed) return;
-        if (
-          response.job.status === 'completed' ||
-          response.job.status === 'failed'
-        ) {
-          setDisplayStatus(response.job.status);
-          setDisplayError(response.job.error ?? null);
-          if (
-            response.job.status === 'completed' &&
-            !completionNotifiedRef.current
-          ) {
-            completionNotifiedRef.current = true;
-            onJobCompletedRef.current?.();
-          }
-          return;
-        }
-        timeoutId = setTimeout(poll, 1500);
-      } catch {
-        if (!disposed) timeoutId = setTimeout(poll, 3000);
-      }
-    };
-    void poll();
-    return () => {
-      disposed = true;
-      if (timeoutId) clearTimeout(timeoutId);
-    };
-  }, [displaySourceKey]);
-  const isCancelled = displayStatus === 'cancelled';
-  const isCompleted = displayStatus === 'completed';
-  const isFailed = displayStatus === 'failed';
-  const isExecuting = Boolean(jobId) && displayStatus === 'pending';
-  const statusLabel = isCompleted
-    ? '已完成'
-    : isFailed
-      ? '失败'
-      : isCancelled
-        ? '已取消'
-        : '待确认';
-  return (
-    <div className="rounded-lg border border-slate-200 bg-white/80 p-2 text-xs text-slate-600">
-      <div className="flex items-center gap-2">
-        {isExecuting ? (
-          <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
-        ) : isCompleted ? (
-          <Check className="h-3.5 w-3.5" aria-hidden="true" />
-        ) : isCancelled || isFailed ? (
-          <X className="h-3.5 w-3.5" aria-hidden="true" />
-        ) : (
-          <ImageIcon className="h-3.5 w-3.5" aria-hidden="true" />
-        )}
-        <span>{editorAgentToolLabel(toolCall.toolName)}</span>
-        <span className="ml-auto text-slate-400">{statusLabel}</span>
-      </div>
-      {displayError ? (
-        <div className="mt-1 text-red-600">{displayError}</div>
-      ) : null}
-      {toolCall.images.length ? (
-        <div className="mt-2 grid grid-cols-3 gap-2">
-          {toolCall.images.map((image, index) => (
-            <div
-              key={`${toolCall.toolName}-${image.resourceId ?? index}`}
-              className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
-            >
-              <ResolvedAssetImage
-                src={image.thumbnailSrc ?? image.imageSrc}
-                objectKey={image.objectKey}
-                refreshKey={image.resourceId ?? toolCall.toolName}
-                alt=""
-                className="h-20 w-full object-cover"
-              />
-            </div>
-          ))}
-        </div>
-      ) : null}
-      {videos.length ? (
-        <div className="mt-2 grid grid-cols-1 gap-2">
-          {videos.map((video, index) => (
-            <div
-              key={`${toolCall.toolName}-${video.resourceId ?? video.objectKey ?? index}`}
-              className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
-            >
-              <ResolvedAssetVideo
-                src={video.videoSrc}
-                objectKey={video.objectKey}
-                refreshKey={
-                  video.resourceId ?? video.objectKey ?? toolCall.toolName
-                }
-                poster={video.thumbnailSrc ?? undefined}
-                controls
-                playsInline
-                preload="metadata"
-                className="max-h-56 w-full bg-black object-contain"
-              />
-            </div>
-          ))}
-        </div>
-      ) : null}
-      {audios.length ? (
-        <div className="mt-2 space-y-2">
-          {audios.map((audio, index) => (
-            <div
-              key={`${toolCall.toolName}-${audio.resourceId ?? audio.objectKey ?? index}`}
-              className="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 p-2"
-            >
-              <Volume2
-                className="h-4 w-4 shrink-0 text-slate-500"
-                aria-hidden="true"
-              />
-              <ResolvedAssetAudio
-                src={audio.audioSrc}
-                objectKey={audio.objectKey}
-                refreshKey={
-                  audio.resourceId ?? audio.objectKey ?? toolCall.toolName
-                }
-                controls
-                preload="metadata"
-                className="min-w-0 flex-1"
-              />
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
 export function ThinkingBubble() {
  return (
    <article className="flex justify-start" aria-label="Agent思考中">
@@ -0,0 +1,179 @@
+import { Check, Image as ImageIcon, Loader2, Volume2, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+import type { EditorAgentToolCall } from '@/packages/shared/src/contracts';
+import { editorAgentToolLabel } from '@/src/components/image-editor/EditorAgentConversation/toolCallPresentation.ts';
+import { ResolvedAssetAudio } from '@/src/components/ResolvedAssetAudio.tsx';
+import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
+import { ResolvedAssetVideo } from '@/src/components/ResolvedAssetVideo.tsx';
+import { getExternalGenerationJobStatus } from '@/src/services/external-generation';
+
+function ToolCallView({
+  toolCall,
+  onJobCompleted,
+}: {
+  toolCall: EditorAgentToolCall;
+  onJobCompleted?: () => void;
+}) {
+  const videos = toolCall.videos ?? [];
+  const audios = toolCall.audios ?? [];
+  const jobId = toolCall.externalJobId?.trim() || null;
+  const displaySourceKey = jobId ?? toolCall.status;
+  const initialDisplayStatus =
+    toolCall.status === 'completed'
+      ? 'completed'
+      : toolCall.status === 'failed'
+        ? 'failed'
+        : toolCall.status === 'cancelled'
+          ? 'cancelled'
+          : 'pending';
+  const [displayStatus, setDisplayStatus] = useState(initialDisplayStatus);
+  const [displayError, setDisplayError] = useState<string | null>(
+    toolCall.error ?? null,
+  );
+  const completionNotifiedRef = useRef(false);
+  const onJobCompletedRef = useRef(onJobCompleted);
+  useEffect(() => {
+    onJobCompletedRef.current = onJobCompleted;
+  }, [onJobCompleted]);
+  useEffect(() => {
+    if (toolCall.status !== 'not_completed' || !jobId) {
+      completionNotifiedRef.current = false;
+      return;
+    }
+    // Only a different job may reinitialize the local display state.
+    setDisplayStatus(initialDisplayStatus);
+    setDisplayError(toolCall.error ?? null);
+    completionNotifiedRef.current = false;
+    let disposed = false;
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+    const poll = async () => {
+      try {
+        const response = await getExternalGenerationJobStatus(jobId);
+        if (disposed) return;
+        if (
+          response.job.status === 'completed' ||
+          response.job.status === 'failed'
+        ) {
+          setDisplayStatus(response.job.status);
+          setDisplayError(response.job.error ?? null);
+          if (
+            response.job.status === 'completed' &&
+            !completionNotifiedRef.current
+          ) {
+            completionNotifiedRef.current = true;
+            onJobCompletedRef.current?.();
+          }
+          return;
+        }
+        timeoutId = setTimeout(poll, 1500);
+      } catch {
+        if (!disposed) timeoutId = setTimeout(poll, 3000);
+      }
+    };
+    void poll();
+    return () => {
+      disposed = true;
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [displaySourceKey]);
+  const isCancelled = displayStatus === 'cancelled';
+  const isCompleted = displayStatus === 'completed';
+  const isFailed = displayStatus === 'failed';
+  const isExecuting = Boolean(jobId) && displayStatus === 'pending';
+  const statusLabel = isCompleted
+    ? '已完成'
+    : isFailed
+      ? '失败'
+      : isCancelled
+        ? '已取消'
+        : '待确认';
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white/80 p-2 text-xs text-slate-600">
+      <div className="flex items-center gap-2">
+        {isExecuting ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+        ) : isCompleted ? (
+          <Check className="h-3.5 w-3.5" aria-hidden="true" />
+        ) : isCancelled || isFailed ? (
+          <X className="h-3.5 w-3.5" aria-hidden="true" />
+        ) : (
+          <ImageIcon className="h-3.5 w-3.5" aria-hidden="true" />
+        )}
+        <span>{editorAgentToolLabel(toolCall.toolName)}</span>
+        <span className="ml-auto text-slate-400">{statusLabel}</span>
+      </div>
+      {displayError ? (
+        <div className="mt-1 text-red-600">{displayError}</div>
+      ) : null}
+      {toolCall.images.length ? (
+        <div className="mt-2 grid grid-cols-3 gap-2">
+          {toolCall.images.map((image, index) => (
+            <div
+              key={`${toolCall.toolName}-${image.resourceId ?? index}`}
+              className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
+            >
+              <ResolvedAssetImage
+                src={image.thumbnailSrc ?? image.imageSrc}
+                objectKey={image.objectKey}
+                refreshKey={image.resourceId ?? toolCall.toolName}
+                alt=""
+                className="h-20 w-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {videos.length ? (
+        <div className="mt-2 grid grid-cols-1 gap-2">
+          {videos.map((video, index) => (
+            <div
+              key={`${toolCall.toolName}-${video.resourceId ?? video.objectKey ?? index}`}
+              className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
+            >
+              <ResolvedAssetVideo
+                src={video.videoSrc}
+                objectKey={video.objectKey}
+                refreshKey={
+                  video.resourceId ?? video.objectKey ?? toolCall.toolName
+                }
+                poster={video.thumbnailSrc ?? undefined}
+                controls
+                playsInline
+                preload="metadata"
+                className="max-h-56 w-full bg-black object-contain"
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {audios.length ? (
+        <div className="mt-2 space-y-2">
+          {audios.map((audio, index) => (
+            <div
+              key={`${toolCall.toolName}-${audio.resourceId ?? audio.objectKey ?? index}`}
+              className="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 p-2"
+            >
+              <Volume2
+                className="h-4 w-4 shrink-0 text-slate-500"
+                aria-hidden="true"
+              />
+              <ResolvedAssetAudio
+                src={audio.audioSrc}
+                objectKey={audio.objectKey}
+                refreshKey={
+                  audio.resourceId ?? audio.objectKey ?? toolCall.toolName
+                }
+                controls
+                preload="metadata"
+                className="min-w-0 flex-1"
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default ToolCallView;