@langgraph-js/ui 2.1.3 → 2.2.1

package/src/chat/components/FileList.tsx

@@ -1,34 +1,54 @@
 import React, { useState, useCallback } from "react";
 import { TmpFilesClient } from "../FileUpload";
+import { File, UploadCloudIcon } from "lucide-react";
+
+export type SupportedFileType = "image" | "video" | "audio" | "other";
+
+const getFileType = (file: File): SupportedFileType => {
+    if (file.type.startsWith("image/")) return "image";
+    if (file.type === "video/mp4") return "video";
+    if (file.type.startsWith("audio/")) return "audio";
+    return "other";
+};
+
+interface UploadedFile {
+    file: File;
+    url: string;
+    type: SupportedFileType;
+}
 
 interface FileListProps {
-    onFileUploaded: (url: string) => void;
+    onFileUploaded: (url: string, type: SupportedFileType) => void;
+    onFileRemoved: (url: string, type: SupportedFileType) => void;
 }
 
-const FileList: React.FC<FileListProps> = ({ onFileUploaded }) => {
-    const [files, setFiles] = useState<File[]>([]);
+const FileList: React.FC<FileListProps> = ({ onFileUploaded, onFileRemoved }) => {
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
     const client = new TmpFilesClient();
     const MAX_FILES = 3;
 
     const handleFileChange = useCallback(
         async (event: React.ChangeEvent<HTMLInputElement>) => {
             const selectedFiles = Array.from(event.target.files || []);
-            const imageFiles = selectedFiles.filter((file) => file.type.startsWith("image/"));
+            const mediaFiles = selectedFiles;
 
             // 检查是否超过最大数量限制
-            if (files.length + imageFiles.length > MAX_FILES) {
-                alert(`最多只能上传${MAX_FILES}张图片`);
+            if (uploadedFiles.length + mediaFiles.length > MAX_FILES) {
+                alert(`最多只能上传${MAX_FILES}个文件`);
                 event.target.value = "";
                 return;
             }
 
-            setFiles((prev) => [...prev, ...imageFiles]);
-
-            for (const file of imageFiles) {
+            for (const file of mediaFiles) {
                 try {
                     const result = await client.upload(file);
                     if (result.data?.url) {
-                        onFileUploaded(result.data.url);
+                        const fileType = getFileType(file);
+                        if (fileType) {
+                            const uploadedFile = { file, url: result.data.url, type: fileType };
+                            setUploadedFiles((prev) => [...prev, uploadedFile]);
+                            onFileUploaded(result.data.url, fileType);
+                        }
                     }
                 } catch (error) {
                     console.error("Upload failed:", error);
@@ -37,38 +57,62 @@ const FileList: React.FC<FileListProps> = ({ onFileUploaded }) => {
 
             event.target.value = "";
         },
-        [onFileUploaded, files.length]
+        [onFileUploaded, uploadedFiles.length]
     );
 
-    const removeFile = useCallback((index: number) => {
-        setFiles((prev) => prev.filter((_, i) => i !== index));
-    }, []);
+    const removeFile = useCallback(
+        (index: number) => {
+            const fileToRemove = uploadedFiles[index];
+            if (fileToRemove) {
+                setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
+                onFileRemoved(fileToRemove.url, fileToRemove.type);
+            }
+        },
+        [uploadedFiles, onFileRemoved]
+    );
 
     return (
-        <div className="flex gap-2 rounded-lg flex-1">
-            {files.length < MAX_FILES && (
+        <div className="flex gap-2 flex-1">
+            {uploadedFiles.length < MAX_FILES && (
                 <label
-                    className={`inline-flex items-center justify-center w-20 h-20 text-gray-500 bg-gray-100 rounded-lg cursor-pointer transition-all duration-200 hover:bg-gray-200 ${files.length === 0 ? "w-8 h-8" : ""}`}
+                    className={`inline-flex items-center justify-center text-gray-700 bg-white border border-gray-200 rounded-xl cursor-pointer transition-colors hover:bg-gray-100 hover:border-gray-300 ${uploadedFiles.length === 0 ? "w-10 h-10" : "w-20 h-20"}`}
                 >
-                    <svg viewBox="0 0 24 24" width={files.length === 0 ? "20" : "32"} height={files.length === 0 ? "20" : "32"} fill="currentColor">
-                        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
-                        <path d="M20 4h-3.17l-1.24-1.35A1.99 1.99 0 0 0 14.12 2H9.88c-.56 0-1.1.24-1.48.65L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" />
-                    </svg>
-                    <input type="file" accept="image/*" multiple onChange={handleFileChange} className="hidden" />
+                    <UploadCloudIcon size={uploadedFiles.length === 0 ? 20 : 32} />
+                    <input type="file" accept="*" multiple onChange={handleFileChange} className="hidden" />
                 </label>
             )}
             <div className="flex flex-wrap gap-2">
-                {files.map((file, index) => (
-                    <div key={index} className="relative w-20 h-20 rounded-lg overflow-hidden">
-                        <img src={URL.createObjectURL(file)} alt={file.name} className="w-full h-full object-cover border border-gray-200" />
-                        <button
-                            className="absolute top-0.5 right-0.5 w-5 h-5 bg-black/50 text-white rounded-full flex items-center justify-center text-base leading-none hover:bg-black/70 transition-colors"
-                            onClick={() => removeFile(index)}
-                        >
-                            ×
-                        </button>
-                    </div>
-                ))}
+                {uploadedFiles.map((uploadedFile, index) => {
+                    const { file, type: fileType, url } = uploadedFile;
+
+                    return (
+                        <div key={index} className="relative w-20 h-20 rounded-xl overflow-hidden border border-gray-200">
+                            {fileType === "image" ? (
+                                <img src={URL.createObjectURL(file)} alt={file.name} className="w-full h-full object-cover" />
+                            ) : fileType === "video" ? (
+                                <video src={URL.createObjectURL(file)} className="w-full h-full object-cover" />
+                            ) : fileType === "audio" ? (
+                                <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+                                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" className="text-gray-500">
+                                        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+                                    </svg>
+                                </div>
+                            ) : fileType === "other" ? (
+                                <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+                                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" className="text-gray-500">
+                                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+                                    </svg>
+                                </div>
+                            ) : null}
+                            <button
+                                className="absolute top-1 right-1 w-5 h-5 bg-red-500/90 text-white rounded-full flex items-center justify-center text-sm leading-none hover:bg-red-600 transition-colors backdrop-blur-sm"
+                                onClick={() => removeFile(index)}
+                            >
+                                ×
+                            </button>
+                        </div>
+                    );
+                })}
             </div>
         </div>
     );

package/src/chat/components/HistoryList.tsx

@@ -1,85 +1,81 @@
 import React from "react";
 import { useChat } from "../context/ChatContext";
-import { getHistoryContent } from "@langgraph-js/sdk";
+import { formatTime, getHistoryContent } from "@langgraph-js/sdk";
 import { RefreshCw, X, RotateCcw, Trash2 } from "lucide-react";
 
 interface HistoryListProps {
     onClose: () => void;
-    formatTime: (date: Date) => string;
 }
 
-const HistoryList: React.FC<HistoryListProps> = ({ onClose, formatTime }) => {
+const HistoryList: React.FC<HistoryListProps> = ({ onClose }) => {
     const { historyList, currentChatId, refreshHistoryList, createNewChat, deleteHistoryChat, toHistoryChat } = useChat();
     return (
-        <div className=" bg-white rounded-lg shadow-md h-full flex flex-col border-r">
-            <div className="p-4 border-b border-gray-200 flex justify-between items-center h-16">
+        <section className="bg-white h-full flex flex-col rounded-2xl shadow-lg shadow-gray-200">
+            <div className="px-5 flex justify-between items-center py-6">
                 <div className="flex items-center gap-3">
-                    <h3 className="m-0 text-lg text-gray-800">历史记录</h3>
-                    <button
-                        className="p-1.5 text-base rounded bg-blue-100 hover:bg-blue-200 transition-all duration-200 flex items-center justify-center hover:scale-110 group"
-                        onClick={refreshHistoryList}
-                        title="刷新列表"
-                    >
-                        <RefreshCw className="w-4 h-4 text-blue-600 group-hover:text-blue-700 group-hover:rotate-180 transition-all duration-300" />
-                    </button>
+                    <h3 className="m-0 text-base font-semibold text-gray-700">历史记录</h3>
                 </div>
-                <button
-                    className="p-1.5 text-base rounded bg-red-100 hover:bg-red-200 transition-all duration-200 flex items-center justify-center hover:scale-110 group"
-                    onClick={onClose}
-                    title="关闭"
-                >
-                    <X className="w-4 h-4 text-red-600 group-hover:text-red-700" />
+                <button className="p-2 rounded-lg bg-gray-100 hover:bg-gray-300 transition-colors flex items-center justify-center group" onClick={refreshHistoryList} title="刷新列表">
+                    <RefreshCw className="w-4 h-4 text-gray-600 group-hover:rotate-180 transition-transform duration-300" />
+                </button>
+                <button className="p-2 rounded-lg bg-gray-100 hover:bg-gray-300 transition-colors flex items-center justify-center group" onClick={onClose} title="关闭">
+                    <X className="w-4 h-4 text-red-500" />
                 </button>
             </div>
-            <div className="flex-1 overflow-y-auto p-4">
+            <div className="flex-1 overflow-y-auto px-4 py-2">
                 <div
-                    className="flex flex-col gap-3 cursor-pointer"
+                    className="cursor-pointer mb-3"
                     onClick={() => {
                         createNewChat();
                     }}
                 >
-                    <div className="flex justify-between items-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors duration-200">
-                        <div className="text-sm text-gray-800 truncate">New Chat</div>
+                    <div className="flex justify-between items-center px-4 py-3 rounded-xl bg-blue-50/80 hover:bg-blue-200/80 transition-colors">
+                        <div className="text-sm text-gray-700 font-medium truncate">New Chat</div>
                     </div>
                 </div>
                 {historyList.length === 0 ? (
-                    <div className="text-center text-gray-500 py-8">暂无历史记录</div>
+                    <div className="text-center text-gray-400 py-10 text-sm">暂无历史记录</div>
                 ) : (
-                    <div className="flex flex-col gap-3 mt-3">
+                    <div className="flex flex-col gap-2">
                         {historyList
                             .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
                             .map((thread) => (
                                 <div
-                                    className={`flex justify-between items-center p-3 rounded-lg transition-colors duration-200 ${
-                                        thread.thread_id === currentChatId ? "bg-blue-50 border border-blue-200" : "bg-gray-50 hover:bg-gray-100"
+                                    className={`flex justify-between items-center px-4 py-3 rounded-xl transition-colors ${
+                                        thread.thread_id === currentChatId ? "bg-blue-50/80" : "bg-gray-50/60 hover:bg-gray-200/80"
                                     }`}
                                     key={thread.thread_id}
                                 >
-                                    <div className="flex-1 min-w-0 mr-2">
-                                        <div className="text-sm text-gray-800 mb-1 truncate max-w-[180px]">{getHistoryContent(thread)}</div>
-                                        <div className="flex gap-3 text-xs text-gray-500">
+                                    <div
+                                        className="flex-1 min-w-0 mr-2"
+                                        onClick={() => {
+                                            toHistoryChat(thread);
+                                        }}
+                                    >
+                                        <div className="text-sm text-gray-700 mb-1 truncate max-w-[180px]">{getHistoryContent(thread)}</div>
+                                        <div className="flex gap-3 text-xs text-gray-400">
                                             <span className="truncate max-w-[100px]">{formatTime(new Date(thread.created_at))}</span>
                                             <span className="truncate max-w-[60px]">{thread.status}</span>
                                         </div>
                                     </div>
-                                    <div className="flex gap-2 shrink-0">
+                                    <div className="flex gap-1.5 shrink-0">
                                         <button
-                                            className="p-1.5 text-base rounded bg-green-100 hover:bg-green-200 transition-all duration-200 flex items-center justify-center hover:scale-110 group"
+                                            className="p-2 rounded-lg bg-white/60 hover:bg-gray-200 transition-colors flex items-center justify-center group"
                                             onClick={() => {
                                                 toHistoryChat(thread);
                                             }}
                                             title="恢复对话"
                                         >
-                                            <RotateCcw className="w-4 h-4 text-green-600 group-hover:text-green-700 group-hover:-rotate-180 transition-all duration-300" />
+                                            <RotateCcw className="w-3.5 h-3.5 text-gray-600 group-hover:-rotate-180 transition-transform duration-300" />
                                         </button>
                                         <button
-                                            className="p-1.5 text-base rounded bg-red-100 hover:bg-red-200 transition-all duration-200 flex items-center justify-center hover:scale-110 group"
+                                            className="p-2 rounded-lg bg-white/60 hover:bg-gray-200 transition-colors flex items-center justify-center group"
                                             onClick={async () => {
                                                 await deleteHistoryChat(thread);
                                             }}
                                             title="删除对话"
                                         >
-                                            <Trash2 className="w-4 h-4 text-red-600 group-hover:text-red-700" />
+                                            <Trash2 className="w-3.5 h-3.5 text-red-500" />
                                         </button>
                                     </div>
                                 </div>
@@ -87,7 +83,7 @@ const HistoryList: React.FC<HistoryListProps> = ({ onClose, formatTime }) => {
                     </div>
                 )}
             </div>
-        </div>
+        </section>
     );
 };
 

package/src/chat/components/JsonEditorPopup.tsx

@@ -10,12 +10,14 @@ interface JsonEditorPopupProps {
     initialJson: object;
     onClose: () => void;
     onSave: (jsonData: object) => void;
+    title: string;
+    description: string;
 }
 
 const LOCAL_STORAGE_KEY = "json-editor-presets";
 const ACTIVE_TAB_STORAGE_KEY = "json-editor-active-tab";
 
-const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson, onClose, onSave }) => {
+const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson, onClose, onSave, title, description }) => {
     const [presets, setPresets] = useState<JsonPreset[]>([]);
     const [activeTab, setActiveTab] = useState(0);
     const [jsonString, setJsonString] = useState("");
@@ -125,18 +127,19 @@ const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson,
     };
 
     return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-            <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 flex flex-col" style={{ height: "80vh" }}>
-                <div className="p-6 border-b border-gray-200">
-                    <h2 className="text-xl font-semibold text-gray-900">编辑 Extra Parameters</h2>
+        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50">
+            <div className="bg-white rounded-2xl w-full max-w-2xl mx-4 flex flex-col overflow-hidden" style={{ height: "80vh" }}>
+                <div className="px-6 py-5 bg-white/80 backdrop-blur-sm">
+                    <h2 className="text-lg font-semibold text-gray-800">{title}</h2>
                 </div>
-                <div className="flex-grow p-6 overflow-y-auto">
-                    <div className="flex items-center border-b border-gray-200 mb-4">
+                <div className="px-6 py-4 text-sm text-gray-500">{description}</div>
+                <nav className="flex-grow px-6 py-4 overflow-y-auto">
+                    <div className="flex items-center mb-4 gap-2">
                         {presets.map((preset, index) => (
                             <div
                                 key={index}
-                                className={`flex items-center px-4 py-2 border-b-2 cursor-pointer text-sm font-medium ${
-                                    activeTab === index ? "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                                className={`flex items-center px-4 py-2 rounded-xl cursor-pointer text-sm font-medium transition-colors ${
+                                    activeTab === index ? "bg-blue-50 text-blue-600" : "bg-gray-50 text-gray-600 hover:bg-gray-100"
                                 }`}
                                 onDoubleClick={() => {
                                     setEditingTab(index);
@@ -162,13 +165,13 @@ const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson,
                                         e.stopPropagation();
                                         handleDeleteTab(index);
                                     }}
-                                    className="ml-2 text-gray-400 hover:text-gray-600 w-4 h-4 flex items-center justify-center"
+                                    className="ml-2 text-gray-400 hover:text-gray-600 w-4 h-4 flex items-center justify-center transition-colors"
                                 >
                                     &times;
                                 </button>
                             </div>
                         ))}
-                        <button onClick={handleAddTab} className="ml-2 px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
+                        <button onClick={handleAddTab} className="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
                             +
                         </button>
                     </div>
@@ -179,21 +182,15 @@ const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson,
                             setJsonString(e.target.value);
                             setError(null); // Clear error on edit
                         }}
-                        className="w-full h-full p-3 border border-gray-300 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="w-full h-full px-4 py-3 bg-gray-50 rounded-xl font-mono text-sm focus:outline-none focus:bg-gray-100 transition-colors"
                     />
                     {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
-                </div>
-                <div className="flex justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50 rounded-b-lg">
-                    <button
-                        onClick={onClose}
-                        className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                    >
+                </nav>
+                <div className="flex justify-end gap-3 px-6 py-5 bg-gray-50/50">
+                    <button onClick={onClose} className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white rounded-xl hover:bg-gray-100 focus:outline-none transition-colors">
                         取消
                     </button>
-                    <button
-                        onClick={handleSave}
-                        className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                    >
+                    <button onClick={handleSave} className="px-5 py-2.5 text-sm font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 focus:outline-none transition-colors">
                         保存并使用
                     </button>
                 </div>

package/src/chat/components/MessageAI.tsx

@@ -11,14 +11,12 @@ interface MessageAIProps {
 
 const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
     return (
-        <div className="flex flex-col w-[80%] bg-white rounded-lg shadow-sm border border-gray-200">
-            <div className="flex flex-col p-4">
-                <div className="text-sm font-medium text-gray-700 mb-2">{message.name}</div>
-                <div className="markdown-body max-w-none">
-                    <Markdown remarkPlugins={[remarkGfm]}>{getMessageContent(message.content)}</Markdown>
-                </div>
-                <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata || {}} spend_time={message.spend_time} id={message.id} />
+        <div className="flex flex-col w-[80%] bg-white rounded-2xl px-5 py-4">
+            <div className="text-xs font-medium text-gray-500 mb-3">{message.name}</div>
+            <div className="markdown-body max-w-none">
+                <Markdown remarkPlugins={[remarkGfm]}>{getMessageContent(message.content)}</Markdown>
             </div>
+            <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata || {}} spend_time={message.spend_time} id={message.id} />
         </div>
     );
 };

package/src/chat/components/MessageBox.tsx

@@ -4,6 +4,7 @@ import MessageAI from "./MessageAI";
 import MessageTool from "./MessageTool";
 import { formatTokens, getMessageContent, LangGraphClient, RenderMessage } from "@langgraph-js/sdk";
 import { JSONViewer } from "./JSONViewer";
+import { useChat } from "../context/ChatContext";
 
 interface MessageState {
     showDetail: boolean;
@@ -22,6 +23,7 @@ export const MessagesBox = ({
     toggleToolCollapse: (id: string) => void;
     client: LangGraphClient;
 }) => {
+    const chat = useChat();
     // 使用 Map 来管理每个消息的状态
     const [messageStates, setMessageStates] = useState<Map<string, MessageState>>(new Map());
     const messageRefs = useRef<Map<string, HTMLDivElement | null>>(new Map());
@@ -109,7 +111,7 @@ export const MessagesBox = ({
     }, [messageStates, handleCloseContextMenu]);
 
     return (
-        <div className="flex flex-col gap-4 w-full">
+        <div className="flex flex-col gap-5 w-full">
             {renderMessages.map((message, index) => {
                 const messageId = message.unique_id || `message-${index}`;
                 const messageState = messageStates.get(messageId) || {
@@ -145,16 +147,34 @@ export const MessagesBox = ({
                         {messageState.showDetail && <JSONViewer data={message} />}
                         {messageState.showContextMenu && (
                             <div
-                                className="fixed bg-white border border-gray-200 rounded shadow-lg z-50 py-1 min-w-[150px]"
+                                className="fixed bg-white/95 backdrop-blur-sm rounded-xl z-50 py-2 min-w-[150px] overflow-hidden"
                                 style={{ left: messageState.contextMenuPosition.x, top: messageState.contextMenuPosition.y }}
                                 onClick={(e) => e.stopPropagation()}
                             >
-                                <button className="w-full bg-white px-3 py-2 text-left hover:bg-gray-50 text-sm" onClick={() => handleCopyMessage(messageId, message.content)}>
+                                <button
+                                    className="w-full bg-transparent px-4 py-2.5 text-left hover:bg-gray-100/80 text-sm text-gray-700 transition-colors"
+                                    onClick={() => handleCopyMessage(messageId, message.content)}
+                                >
                                     复制消息内容
                                 </button>
-                                <button className="w-full bg-white px-3 py-2 text-left hover:bg-gray-50 text-sm" onClick={() => handleToggleDetail(messageId)}>
+                                <button
+                                    className="w-full bg-transparent px-4 py-2.5 text-left hover:bg-gray-100/80 text-sm text-gray-700 transition-colors"
+                                    onClick={() => handleToggleDetail(messageId)}
+                                >
                                     {messageState.showDetail ? "隐藏详情" : "显示详情"}
                                 </button>
+                                <button
+                                    className="w-full bg-transparent px-4 py-2.5 text-left hover:bg-gray-100/80 text-sm text-gray-700 transition-colors"
+                                    onClick={() => chat.revertChatTo(messageId)}
+                                >
+                                    回滚到消息
+                                </button>
+                                <button
+                                    className="w-full bg-transparent px-4 py-2.5 text-left hover:bg-gray-100/80 text-sm text-gray-700 transition-colors"
+                                    onClick={() => chat.revertChatTo(messageId, true)}
+                                >
+                                    重发消息
+                                </button>
                             </div>
                         )}
                     </div>

package/src/chat/components/MessageHuman.tsx

@@ -4,6 +4,50 @@ interface MessageHumanProps {
     content: string | any[];
 }
 
+// 解析文本内容中的文件标签，只有完全匹配时才返回解析结果
+const parseFileTags = (text: string): any[] => {
+    // 检查文本是否完全由文件标签组成（去除空白字符后）
+    const trimmedText = text.trim();
+
+    // 如果文本完全匹配单个文件标签格式
+    const singleMatch = trimmedText.match(/^<file type="([^"]+)" url="([^"]+)"><\/file>$/);
+    if (singleMatch) {
+        const [, fileType, url] = singleMatch;
+        if (fileType === "image") {
+            return [
+                {
+                    type: "image_url",
+                    image_url: { url },
+                },
+            ];
+        } else if (fileType === "video") {
+            return [
+                {
+                    type: "video_url",
+                    video_url: { url },
+                },
+            ];
+        } else if (fileType === "audio") {
+            return [
+                {
+                    type: "audio_url",
+                    audio_url: { url },
+                },
+            ];
+        } else if (fileType === "other") {
+            return [
+                {
+                    type: "file_url",
+                    file_url: { url },
+                },
+            ];
+        }
+    }
+
+    // 如果不完全匹配，返回空数组
+    return [];
+};
+
 const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
     const renderContent = () => {
         if (typeof content === "string") {
@@ -11,36 +55,69 @@ const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
         }
 
         if (Array.isArray(content)) {
-            return content.map((item, index) => {
-                switch (item.type) {
-                    case "text":
-                        return (
-                            <div key={index} className="text-white">
-                                {item.text}
-                            </div>
-                        );
-                    case "image_url":
-                        return (
-                            <div key={index} className="mt-2">
-                                <img src={item.image_url.url} alt="用户上传的图片" className="max-w-[200px] rounded" />
-                            </div>
-                        );
-                    case "audio":
-                        return (
-                            <div key={index} className="mt-2">
-                                <audio controls src={item.audio_url} className="w-full">
-                                    您的浏览器不支持音频播放
-                                </audio>
-                            </div>
-                        );
-                    default:
-                        return (
-                            <div key={index} className="text-white whitespace-pre-wrap">
-                                {JSON.stringify(item)}
-                            </div>
-                        );
-                }
-            });
+            return content
+                .flatMap((item) => {
+                    if (item.type === "text" && typeof item.text === "string") {
+                        // 检查文本是否包含文件标签
+                        const parsedParts = parseFileTags(item.text);
+                        if (parsedParts.length > 0) {
+                            return parsedParts;
+                        } else {
+                            return [item];
+                        }
+                    } else {
+                        return [item];
+                    }
+                })
+                .map((item, index) => {
+                    switch (item.type) {
+                        case "text":
+                            return (
+                                <div key={index} className="text-white whitespace-pre-wrap">
+                                    {item.text}
+                                </div>
+                            );
+                        case "image_url":
+                            return (
+                                <div key={index} className="mt-2">
+                                    <img src={item.image_url.url} alt={item.image_url.url} className="max-w-[200px] rounded" />
+                                </div>
+                            );
+                        case "video_url":
+                            return (
+                                <div key={index} className="mt-2">
+                                    <video controls src={item.video_url.url} className="max-w-[200px] rounded">
+                                        您的浏览器不支持视频播放
+                                    </video>
+                                </div>
+                            );
+                        case "audio_url":
+                            return (
+                                <div key={index} className="mt-2">
+                                    <audio controls src={item.audio_url.url} className="w-full">
+                                        您的浏览器不支持音频播放
+                                    </audio>
+                                </div>
+                            );
+                        case "file_url":
+                            return (
+                                <div key={index} className="mt-2 p-2 bg-gray-100 rounded flex items-center gap-2">
+                                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" className="text-gray-500">
+                                        <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+                                    </svg>
+                                    <a href={item.file_url.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 underline text-sm">
+                                        下载文件
+                                    </a>
+                                </div>
+                            );
+                        default:
+                            return (
+                                <div key={index} className="text-white whitespace-pre-wrap">
+                                    {JSON.stringify(item)}
+                                </div>
+                            );
+                    }
+                });
         }
 
         return <div className="text-white whitespace-pre-wrap">{JSON.stringify(content)}</div>;
@@ -48,9 +125,7 @@ const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
 
     return (
         <div className="flex flex-row w-full justify-end">
-            <div className="flex flex-col w-fit bg-blue-500 rounded-lg text-white border border-blue-100">
-                <div className="flex flex-col p-4 ">{renderContent()}</div>
-            </div>
+            <div className="flex flex-col w-fit bg-blue-500/90 rounded-2xl text-white px-4 py-3 max-w-[80%]">{renderContent()}</div>
         </div>
     );
 };