feat(frontend): 合并 message-list-item 并保留本地兼容

frontend/src/components/workspace/messages/message-list-item.tsx

@@ -1,26 +1,33 @@
 import type { Message } from "@langchain/langgraph-sdk";
-import { FileIcon } from "lucide-react";
+import { FileIcon, Loader2Icon } from "lucide-react";
 import { useParams } from "next/navigation";
-import { memo, useMemo, useState, type ImgHTMLAttributes } from "react";
+import { memo, useMemo, type ImgHTMLAttributes } from "react";
 import rehypeKatex from "rehype-katex";
 
+import { Loader } from "@/components/ai-elements/loader";
 import {
   Message as AIElementMessage,
   MessageContent as AIElementMessageContent,
   MessageResponse as AIElementMessageResponse,
   MessageToolbar,
 } from "@/components/ai-elements/message";
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from "@/components/ai-elements/reasoning";
+import { Task, TaskTrigger } from "@/components/ai-elements/task";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { resolveArtifactURL } from "@/core/artifacts/utils";
+import { useI18n } from "@/core/i18n/hooks";
 import {
   extractContentFromMessage,
   extractReasoningContentFromMessage,
   parseUploadedFiles,
-  type UploadedFile,
+  stripUploadedFilesTag,
+  type FileInMessage,
 } from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
-import { materializeSkillYaml } from "@/core/skills";
 import { humanMessagePlugins } from "@/core/streamdown";
 import { cn } from "@/lib/utils";
 
@@ -40,7 +47,7 @@ export function MessageListItem({
   const isHuman = message.type === "human";
   return (
     <AIElementMessage
-      className={cn("group/conversation-message relative w-full mb-1", className)}
+      className={cn("group/conversation-message relative w-full", className)}
       from={isHuman ? "user" : "assistant"}
     >
       <MessageContent
@@ -48,22 +55,24 @@ export function MessageListItem({
         message={message}
         isLoading={isLoading}
       />
-      <MessageToolbar
+      {!isLoading && (
-        className={cn(
+        <MessageToolbar
-          isHuman ? "-bottom-8 justify-end" : "-bottom-8",
+          className={cn(
-          "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
+            isHuman ? "-bottom-9 justify-end" : "-bottom-8",
-        )}
+            "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
-      >
+          )}
-        <div className="flex gap-1">
+        >
-          <CopyButton
+          <div className="flex gap-1">
-            clipboardData={
+            <CopyButton
-              extractContentFromMessage(message) ??
+              clipboardData={
-              extractReasoningContentFromMessage(message) ??
+                extractContentFromMessage(message) ??
-              ""
+                extractReasoningContentFromMessage(message) ??
-            }
+                ""
-          />
+              }
-        </div>
+            />
-      </MessageToolbar>
+          </div>
+        </MessageToolbar>
+      )}
     </AIElementMessage>
   );
 }
@@ -121,37 +130,67 @@ function MessageContent_({
 
   const rawContent = extractContentFromMessage(message);
   const reasoningContent = extractReasoningContentFromMessage(message);
-  const { contentToParse, uploadedFiles } = useMemo(() => {
+
-    if (!isLoading && reasoningContent && !rawContent) {
+  const files = useMemo(() => {
-      return {
+    const files = message.additional_kwargs?.files;
-        contentToParse: reasoningContent,
+    if (!Array.isArray(files) || files.length === 0) {
-        uploadedFiles: [] as UploadedFile[],
+      if (rawContent.includes("<uploaded_files>")) {
-      };
+        // If the content contains the <uploaded_files> tag, we return the parsed files from the content for backward compatibility.
+        return parseUploadedFiles(rawContent).files as FileInMessage[];
+      }
+      return null;
     }
-    if (isHuman && rawContent) {
+    return files as FileInMessage[];
-      const { files, cleanContent: contentWithoutFiles } =
+  }, [message.additional_kwargs?.files, rawContent]);
-        parseUploadedFiles(rawContent);
+
-      return { contentToParse: contentWithoutFiles, uploadedFiles: files };
+  const contentToDisplay = useMemo(() => {
+    if (isHuman) {
+      return rawContent ? stripUploadedFilesTag(rawContent) : "";
     }
-    return {
+    return rawContent ?? "";
-      contentToParse: rawContent ?? "",
+  }, [rawContent, isHuman]);
-      uploadedFiles: [] as UploadedFile[],
-    };
-  }, [isLoading, rawContent, reasoningContent, isHuman]);
 
   const filesList =
-    uploadedFiles.length > 0 && thread_id ? (
+    files && files.length > 0 && thread_id ? (
-      <UploadedFilesList files={uploadedFiles} threadId={thread_id} />
+      <RichFilesList files={files} threadId={thread_id} />
     ) : null;
 
+  // Uploading state: mock AI message shown while files upload
+  if (message.additional_kwargs?.element === "task") {
+    return (
+      <AIElementMessageContent className={className}>
+        <Task defaultOpen={false}>
+          <TaskTrigger title="">
+            <div className="text-muted-foreground flex w-full cursor-default items-center gap-2 text-sm select-none">
+              <Loader className="size-4" />
+              <span>{contentToDisplay}</span>
+            </div>
+          </TaskTrigger>
+        </Task>
+      </AIElementMessageContent>
+    );
+  }
+
+  // Reasoning-only AI message (no main response content yet)
+  if (!isHuman && reasoningContent && !rawContent) {
+    return (
+      <AIElementMessageContent className={className}>
+        <Reasoning isStreaming={isLoading}>
+          <ReasoningTrigger />
+          <ReasoningContent>{reasoningContent}</ReasoningContent>
+        </Reasoning>
+      </AIElementMessageContent>
+    );
+  }
+
   if (isHuman) {
-    const messageResponse = contentToParse ? (
+    const messageResponse = contentToDisplay ? (
       <AIElementMessageResponse
         remarkPlugins={humanMessagePlugins.remarkPlugins}
         rehypePlugins={humanMessagePlugins.rehypePlugins}
         components={components}
       >
-        {contentToParse}
+        {contentToDisplay}
       </AIElementMessageResponse>
     ) : null;
     return (
@@ -170,7 +209,7 @@ function MessageContent_({
     <AIElementMessageContent className={className}>
       {filesList}
       <MarkdownContent
-        content={contentToParse}
+        content={contentToDisplay}
         isLoading={isLoading}
         rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
         className="my-3"
@@ -223,28 +262,35 @@ function isImageFile(filename: string): boolean {
   return IMAGE_EXTENSIONS.includes(getFileExt(filename));
 }
 
-function isYamlFile(filename: string): boolean {
+/**
-  const ext = getFileExt(filename);
+ * Format bytes to human-readable size string
-  return ext === "yaml" || ext === "yml";
+ */
+function formatBytes(bytes: number | string): string {
+  const numericBytes = typeof bytes === "string" ? Number(bytes) : bytes;
+  if (!Number.isFinite(numericBytes)) return "—";
+  const safeBytes = Math.max(0, numericBytes);
+  if (safeBytes === 0) return "—";
+  const kb = safeBytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
 }
 
 /**
- * Uploaded files list component
+ * List of files from additional_kwargs.files (with optional upload status)
  */
-function UploadedFilesList({
+function RichFilesList({
   files,
   threadId,
 }: {
-  files: UploadedFile[];
+  files: FileInMessage[];
   threadId: string;
 }) {
   if (files.length === 0) return null;
-
   return (
     <div className="mb-2 flex flex-wrap justify-end gap-2">
       {files.map((file, index) => (
-        <UploadedFileCard
+        <RichFileCard
-          key={`${file.path}-${index}`}
+          key={`${file.filename}-${index}`}
           file={file}
           threadId={threadId}
         />
@@ -254,47 +300,49 @@ function UploadedFilesList({
 }
 
 /**
- * Single uploaded file card component
+ * Single file card that handles FileInMessage (supports uploading state)
  */
-function UploadedFileCard({
+function RichFileCard({
   file,
   threadId,
 }: {
-  file: UploadedFile;
+  file: FileInMessage;
   threadId: string;
 }) {
-  const [isMaterializing, setIsMaterializing] = useState(false);
+  const { t } = useI18n();
-  const [materializeMessage, setMaterializeMessage] = useState<string | null>(
+  const isUploading = file.status === "uploading";
-    null,
-  );
-
-  if (!threadId) return null;
-
   const isImage = isImageFile(file.filename);
-  const isYaml = isYamlFile(file.filename);
-  const fileUrl = resolveArtifactURL(file.path, threadId);
 
-  const handleMaterializeYaml = async () => {
+  if (isUploading) {
-    if (isMaterializing) return;
+    return (
-    setIsMaterializing(true);
+      <div className="bg-background border-border/40 flex max-w-50 min-w-30 flex-col gap-1 rounded-lg border p-3 opacity-60 shadow-sm">
-    setMaterializeMessage(null);
+        <div className="flex items-start gap-2">
-    try {
+          <Loader2Icon className="text-muted-foreground mt-0.5 size-4 shrink-0 animate-spin" />
-      const result = await materializeSkillYaml({
+          <span
-        thread_id: threadId,
+            className="text-foreground truncate text-sm font-medium"
-        path: file.path,
+            title={file.filename}
-        target_dir: "/mnt/user-data/uploads/skill",
+          >
-        clear_target: true,
+            {file.filename}
-      });
+          </span>
-      setMaterializeMessage(
+        </div>
-        `已创建 ${result.created_files} 个文件 / ${result.created_directories} 个目录`,
+        <div className="flex items-center justify-between gap-2">
-      );
+          <Badge
-    } catch (error) {
+            variant="secondary"
-      const message = error instanceof Error ? error.message : "解析失败";
+            className="rounded px-1.5 py-0.5 text-[10px] font-normal"
-      setMaterializeMessage(`失败: ${message}`);
+          >
-    } finally {
+            {getFileTypeLabel(file.filename)}
-      setIsMaterializing(false);
+          </Badge>
-    }
+          <span className="text-muted-foreground text-[10px]">
-  };
+            {t.uploads.uploading}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!file.path) return null;
+
+  const fileUrl = resolveArtifactURL(file.path, threadId);
 
   if (isImage) {
     return (
@@ -307,14 +355,14 @@ function UploadedFileCard({
         <img
           src={fileUrl}
           alt={file.filename}
-          className="h-32 w-auto max-w-[240px] object-cover transition-transform group-hover:scale-105"
+          className="h-32 w-auto max-w-60 object-cover transition-transform group-hover:scale-105"
         />
       </a>
     );
   }
 
   return (
-    <div className="bg-background border-border/40 flex max-w-[200px] min-w-[120px] flex-col gap-1 rounded-lg border p-3 shadow-sm">
+    <div className="bg-background border-border/40 flex max-w-50 min-w-30 flex-col gap-1 rounded-lg border p-3 shadow-sm">
       <div className="flex items-start gap-2">
         <FileIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
         <span
@@ -331,29 +379,10 @@ function UploadedFileCard({
         >
           {getFileTypeLabel(file.filename)}
         </Badge>
-        <span className="text-muted-foreground text-[10px]">{file.size}</span>
+        <span className="text-muted-foreground text-[10px]">
+          {formatBytes(file.size)}
+        </span>
       </div>
-      {/* 注释掉测试按钮，后续根据需求再决定是否保留 */}
-      {/* {isYaml && (
-        <div className="mt-1 flex flex-col gap-1">
-          <Button
-            size="sm"
-            variant="secondary"
-            className="h-7 text-xs"
-            onClick={() => {
-              void handleMaterializeYaml();
-            }}
-            disabled={isMaterializing}
-          >
-            {isMaterializing ? "解析中..." : "一键导入为 Skill 目录"}
-          </Button>
-          {materializeMessage && (
-            <span className="text-muted-foreground text-[10px] leading-tight">
-              {materializeMessage}
-            </span>
-          )}
-        </div>
-      )} */}
     </div>
   );
 }