@langgraph-js/ui 1.4.0 → 1.6.0

package/src/chat/components/HistoryList.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useChat } from "../context/ChatContext";
 import { getHistoryContent } from "@langgraph-js/sdk";
+import { RefreshCw, X, RotateCcw, Trash2 } from "lucide-react";
 
 interface HistoryListProps {
     onClose: () => void;
@@ -10,62 +11,75 @@ interface HistoryListProps {
 const HistoryList: React.FC<HistoryListProps> = ({ onClose, formatTime }) => {
     const { historyList, currentChatId, refreshHistoryList, createNewChat, deleteHistoryChat, toHistoryChat } = useChat();
     return (
-        <div className="history-list">
-            <div className="history-header">
-                <div className="header-left">
-                    <h3>历史记录</h3>
-                    <button className="refresh-button" onClick={refreshHistoryList} title="刷新列表">
-                        🔁
+        <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">
+                <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>
                 </div>
-                <button className="close-button" onClick={onClose} title="关闭">
-                    ❌
+                <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>
             </div>
-            <div className="history-content">
+            <div className="flex-1 overflow-y-auto p-4">
                 <div
-                    className="history-items"
+                    className="flex flex-col gap-3 cursor-pointer"
                     onClick={() => {
                         createNewChat();
                     }}
                 >
-                    <div className="history-item">
-                        <div className="history-title"> New Chat</div>
+                    <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>
                 </div>
                 {historyList.length === 0 ? (
-                    <div className="empty-history">暂无历史记录</div>
+                    <div className="text-center text-gray-500 py-8">暂无历史记录</div>
                 ) : (
-                    <div className="history-items">
+                    <div className="flex flex-col gap-3 mt-3">
                         {historyList
                             .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
                             .map((thread) => (
-                                <div className={`history-item ${thread.thread_id === currentChatId ? "active" : ""}`} key={thread.thread_id}>
-                                    <div className="history-info">
-                                        <div className="history-title">{getHistoryContent(thread)}</div>
-                                        <div className="history-meta">
-                                            <span className="history-time">{formatTime(new Date(thread.created_at))}</span>
-                                            <span className="history-status">{thread.status}</span>
+                                <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"
+                                    }`}
+                                    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">
+                                            <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="history-actions">
+                                    <div className="flex gap-2 shrink-0">
                                         <button
-                                            className="action-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"
                                             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" />
                                         </button>
                                         <button
-                                            className="action-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={async () => {
                                                 await deleteHistoryChat(thread);
                                             }}
                                             title="删除对话"
                                         >
-                                            ❌
+                                            <Trash2 className="w-4 h-4 text-red-600 group-hover:text-red-700" />
                                         </button>
                                     </div>
                                 </div>
@@ -73,118 +87,6 @@ const HistoryList: React.FC<HistoryListProps> = ({ onClose, formatTime }) => {
                     </div>
                 )}
             </div>
-            <style>{`
-                .history-list {
-                    background: #fff;
-                    border-radius: 8px;
-                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                }
-
-                .history-header {
-                    padding: 16px;
-                    border-bottom: 1px solid #eee;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-
-                .header-left {
-                    display: flex;
-                    align-items: center;
-                    gap: 12px;
-                }
-
-                .history-header h3 {
-                    margin: 0;
-                    font-size: 18px;
-                    color: #333;
-                }
-
-                .history-content {
-                    flex: 1;
-                    overflow-y: auto;
-                    padding: 16px;
-                }
-
-                .history-items {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 12px;
-                }
-
-                .history-item {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 12px;
-                    border-radius: 6px;
-                    background: #f8f9fa;
-                    transition: all 0.2s ease;
-                }
-
-                .history-item:hover {
-                    background: #f0f2f5;
-                }
-
-                .history-item.active {
-                    background: #e6f7ff;
-                    border: 1px solid #91d5ff;
-                }
-
-                .history-info {
-                    flex: 1;
-                    min-width: 0;
-                }
-
-                .history-title {
-                    font-size: 14px;
-                    color: #333;
-                    margin-bottom: 4px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-
-                .history-meta {
-                    display: flex;
-                    gap: 12px;
-                    color: #666;
-                    font-size: 12px;
-                }
-
-                .history-actions {
-                    display: flex;
-                    gap: 8px;
-                    margin-left: 12px;
-                }
-
-                .action-button, .close-button, .refresh-button {
-                    background: none;
-                    border: none;
-                    cursor: pointer;
-                    padding: 6px;
-                    font-size: 16px;
-                    border-radius: 4px;
-                    transition: all 0.2s ease;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                .action-button:hover, .close-button:hover, .refresh-button:hover {
-                    background: rgba(0, 0, 0, 0.05);
-                    transform: scale(1.1);
-                }
-
-                .empty-history {
-                    text-align: center;
-                    color: #999;
-                    padding: 32px 0;
-                }
-            `}</style>
         </div>
     );
 };

package/src/chat/components/JsonEditorPopup.tsx

@@ -1,57 +1,69 @@
-import React, { useState, useEffect } from 'react';
-import './JsonEditorPopup.css';
+import React, { useState, useEffect } from "react";
 
 interface JsonEditorPopupProps {
-  isOpen: boolean;
-  initialJson: object;
-  onClose: () => void;
-  onSave: (jsonData: object) => void;
+    isOpen: boolean;
+    initialJson: object;
+    onClose: () => void;
+    onSave: (jsonData: object) => void;
 }
 
 const JsonEditorPopup: React.FC<JsonEditorPopupProps> = ({ isOpen, initialJson, onClose, onSave }) => {
-  const [jsonString, setJsonString] = useState('');
-  const [error, setError] = useState<string | null>(null);
+    const [jsonString, setJsonString] = useState("");
+    const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    setJsonString(JSON.stringify(initialJson, null, 2));
-    setError(null); // Reset error when initialJson changes or popup opens
-  }, [initialJson, isOpen]);
+    useEffect(() => {
+        setJsonString(JSON.stringify(initialJson, null, 2));
+        setError(null); // Reset error when initialJson changes or popup opens
+    }, [initialJson, isOpen]);
 
-  if (!isOpen) {
-    return null;
-  }
-
-  const handleSave = () => {
-    try {
-      const parsedJson = JSON.parse(jsonString);
-      onSave(parsedJson);
-      onClose();
-    } catch (e) {
-      setError('JSON 格式无效，请检查后重试。');
-      console.error("Invalid JSON format:", e);
+    if (!isOpen) {
+        return null;
     }
-  };
 
-  return (
-    <div className="json-editor-popup-overlay">
-      <div className="json-editor-popup-content">
-        <h2>编辑 Extra Parameters</h2>
-        <textarea
-          value={jsonString}
-          onChange={(e) => {
-            setJsonString(e.target.value);
-            setError(null); // Clear error on edit
-          }}
-          rows={15}
-        />
-        {error && <p className="error-message">{error}</p>}
-        <div className="popup-actions">
-          <button onClick={onClose} className="cancel-button">取消</button>
-          <button onClick={handleSave} className="save-button">保存</button>
+    const handleSave = () => {
+        try {
+            const parsedJson = JSON.parse(jsonString);
+            onSave(parsedJson);
+            onClose();
+        } catch (e) {
+            setError("JSON 格式无效，请检查后重试。");
+            console.error("Invalid JSON format:", e);
+        }
+    };
+
+    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">
+                <div className="p-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">编辑 Extra Parameters</h2>
+                    <textarea
+                        value={jsonString}
+                        onChange={(e) => {
+                            setJsonString(e.target.value);
+                            setError(null); // Clear error on edit
+                        }}
+                        rows={15}
+                        className="w-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"
+                    />
+                    {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
+                    <div className="flex justify-end gap-3 mt-4">
+                        <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"
+                        >
+                            取消
+                        </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>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 };
 
-export default JsonEditorPopup; 
+export default JsonEditorPopup;

package/src/chat/components/JsonToMessage/JsonToMessage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { MessagesBox } from "../MessageBox";
-import "./JsonToMessage.css";
 import { RenderMessage } from "@langgraph-js/sdk";
+import { X } from "lucide-react";
 
 interface JsonToMessageProps {
     isOpen: boolean;
@@ -81,27 +81,33 @@ const JsonToMessage: React.FC<JsonToMessageProps> = ({ isOpen, onClose, initialJ
     }
 
     return (
-        <div className="json-to-message-overlay">
-            <div className="json-to-message-content">
-                <div className="json-to-message-header">
-                    <h2>JSON 消息预览</h2>
-                    <button onClick={onClose} className="close-button">
-                        ×
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg shadow-xl w-[90%] max-w-[1200px] h-[80vh] max-h-[800px] flex flex-col overflow-hidden">
+                <div className="flex justify-between items-center p-4 border-b border-gray-200">
+                    <h2 className="text-xl font-semibold text-gray-900">JSON 消息预览</h2>
+                    <button onClick={onClose} className="p-1.5 text-gray-500 hover:text-gray-900 transition-colors rounded-lg hover:bg-gray-100">
+                        <X className="w-5 h-5" />
                     </button>
                 </div>
 
-                <div className="json-to-message-body">
-                    <div className="json-editor-pane">
-                        <textarea value={jsonString} onChange={(e) => setJsonString(e.target.value)} rows={20} placeholder="输入JSON消息格式..." />
-                        {error && <p className="error-message">{error}</p>}
+                <div className="flex flex-1 overflow-hidden">
+                    <div className="flex-1 p-4 flex flex-col border-r border-gray-200">
+                        <textarea
+                            value={jsonString}
+                            onChange={(e) => setJsonString(e.target.value)}
+                            rows={20}
+                            placeholder="输入JSON消息格式..."
+                            className="flex-1 font-mono text-sm p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                        />
+                        {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
                     </div>
 
-                    <div className="message-preview-pane">
-                        <div className="preview-container chat-messages">
+                    <div className="flex-1 p-4 overflow-y-auto bg-gray-50">
+                        <div className="bg-white rounded-lg p-4 min-h-full">
                             {previewMessages?.length > 0 ? (
                                 <MessagesBox renderMessages={previewMessages} collapsedTools={[]} toggleToolCollapse={() => {}} client={null as any} />
                             ) : (
-                                <div className="no-preview">请输入有效的JSON以查看消息预览</div>
+                                <div className="flex items-center justify-center h-full text-gray-500 italic">请输入有效的JSON以查看消息预览</div>
                             )}
                         </div>
                     </div>

package/src/chat/components/JsonToMessage/JsonToMessageButton.tsx

@@ -1,27 +1,20 @@
 import React, { useState } from "react";
 import JsonToMessage from "./JsonToMessage";
+import { FileJson } from "lucide-react";
 
-interface JsonToMessageButtonProps {
-    buttonText?: string;
-    initialJson?: string | object;
-    className?: string;
-}
-
-const JsonToMessageButton: React.FC<JsonToMessageButtonProps> = ({ buttonText = "JSON 预览", initialJson, className = "" }) => {
+export const JsonToMessageButton: React.FC = () => {
     const [isOpen, setIsOpen] = useState(false);
 
-    const openModal = () => setIsOpen(true);
-    const closeModal = () => setIsOpen(false);
-
     return (
         <>
-            <button className={`history-button ${className}`} onClick={openModal}>
-                {buttonText}
+            <button
+                onClick={() => setIsOpen(true)}
+                className="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center gap-1.5"
+            >
+                <FileJson className="w-4 h-4" />
+                JSON 消息
             </button>
-
-            <JsonToMessage isOpen={isOpen} onClose={closeModal} initialJson={initialJson} />
+            <JsonToMessage isOpen={isOpen} onClose={() => setIsOpen(false)} />
         </>
     );
 };
-
-export default JsonToMessageButton;

package/src/chat/components/JsonToMessage/index.tsx

@@ -1,5 +1,5 @@
 import JsonToMessage from "./JsonToMessage";
-import JsonToMessageButton from "./JsonToMessageButton";
+import { JsonToMessageButton } from "./JsonToMessageButton";
 
 export { JsonToMessage, JsonToMessageButton };
 export default JsonToMessage;

package/src/chat/components/MessageAI.tsx

@@ -4,16 +4,17 @@ import { UsageMetadata } from "./UsageMetadata";
 import { getMessageContent } from "@langgraph-js/sdk";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+
 interface MessageAIProps {
     message: RenderMessage;
 }
 
 const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
     return (
-        <div className="message ai">
-            <div className="message-content">
-                <div className="message-title">{message.name}</div>
-                <div className="message-text markdown-body">
+        <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} />

package/src/chat/components/MessageBox.tsx

@@ -3,6 +3,7 @@ import MessageHuman from "./MessageHuman";
 import MessageAI from "./MessageAI";
 import MessageTool from "./MessageTool";
 import { formatTokens, getMessageContent, LangGraphClient, RenderMessage } from "@langgraph-js/sdk";
+import { motion } from "motion/react";
 
 export const MessagesBox = ({
     renderMessages,
@@ -16,24 +17,25 @@ export const MessagesBox = ({
     client: LangGraphClient;
 }) => {
     return (
-        <>
-            {renderMessages.map((message) =>
-                message.type === "human" ? (
-                    <MessageHuman content={message.content} key={message.unique_id} />
-                ) : message.type === "tool" ? (
-                    <MessageTool
-                        key={message.unique_id}
-                        message={message}
-                        client={client!}
-                        getMessageContent={getMessageContent}
-                        formatTokens={formatTokens}
-                        isCollapsed={collapsedTools.includes(message.id!)}
-                        onToggleCollapse={() => toggleToolCollapse(message.id!)}
-                    />
-                ) : (
-                    <MessageAI key={message.unique_id} message={message} />
-                )
-            )}
-        </>
+        <div className="flex flex-col gap-4 w-full">
+            {renderMessages.map((message, index) => (
+                <motion.div key={message.unique_id} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, delay: index * 0.1 }}>
+                    {message.type === "human" ? (
+                        <MessageHuman content={message.content} />
+                    ) : message.type === "tool" ? (
+                        <MessageTool
+                            message={message}
+                            client={client!}
+                            getMessageContent={getMessageContent}
+                            formatTokens={formatTokens}
+                            isCollapsed={collapsedTools.includes(message.id!)}
+                            onToggleCollapse={() => toggleToolCollapse(message.id!)}
+                        />
+                    ) : (
+                        <MessageAI message={message} />
+                    )}
+                </motion.div>
+            ))}
+        </div>
     );
 };

package/src/chat/components/MessageHuman.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 interface MessageHumanProps {
     content: string | any[];
 }
@@ -6,7 +7,7 @@ interface MessageHumanProps {
 const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
     const renderContent = () => {
         if (typeof content === "string") {
-            return <div className="message-text">{content}</div>;
+            return <div className="text-white whitespace-pre-wrap">{content}</div>;
         }
 
         if (Array.isArray(content)) {
@@ -14,27 +15,27 @@ const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
                 switch (item.type) {
                     case "text":
                         return (
-                            <div key={index} className="message-text">
+                            <div key={index} className="text-white">
                                 {item.text}
                             </div>
                         );
                     case "image_url":
                         return (
-                            <div key={index} className="message-image">
-                                <img src={item.image_url.url} alt="用户上传的图片" style={{ maxWidth: "200px", borderRadius: "4px" }} />
+                            <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="message-audio">
-                                <audio controls src={item.audio_url}>
+                            <div key={index} className="mt-2">
+                                <audio controls src={item.audio_url} className="w-full">
                                     您的浏览器不支持音频播放
                                 </audio>
                             </div>
                         );
                     default:
                         return (
-                            <div key={index} className="message-text">
+                            <div key={index} className="text-white whitespace-pre-wrap">
                                 {JSON.stringify(item)}
                             </div>
                         );
@@ -42,12 +43,14 @@ const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
             });
         }
 
-        return <div className="message-text">{JSON.stringify(content)}</div>;
+        return <div className="text-white whitespace-pre-wrap">{JSON.stringify(content)}</div>;
     };
 
     return (
-        <div className="message human">
-            <div className="message-content">{renderContent()}</div>
+        <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>
     );
 };