@langgraph-js/ui 1.5.0 → 1.7.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,205 @@
-import React, { useState, useEffect } from 'react';
-import './JsonEditorPopup.css';
+import React, { useState, useEffect } from "react";
+
+interface JsonPreset {
+    name: string;
+    data: object;
+}
 
 interface JsonEditorPopupProps {
-  isOpen: boolean;
-  initialJson: object;
-  onClose: () => void;
-  onSave: (jsonData: object) => void;
+    isOpen: boolean;
+    initialJson: object;
+    onClose: () => void;
+    onSave: (jsonData: object) => void;
 }
 
+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 [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]);
-
-  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);
+    const [presets, setPresets] = useState<JsonPreset[]>([]);
+    const [activeTab, setActiveTab] = useState(0);
+    const [jsonString, setJsonString] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [editingTab, setEditingTab] = useState<number | null>(null);
+    const [editingName, setEditingName] = useState("");
+
+    useEffect(() => {
+        if (isOpen) {
+            let storedData: JsonPreset[] = [];
+            try {
+                const item = localStorage.getItem(LOCAL_STORAGE_KEY);
+                storedData = item ? JSON.parse(item) : [];
+            } catch (e) {
+                console.error("Failed to parse presets from localStorage", e);
+                storedData = [];
+            }
+
+            if (storedData.length === 0) {
+                storedData = [{ name: "Default", data: initialJson }];
+            }
+            setPresets(storedData);
+
+            let activeTabIndex = 0;
+            try {
+                const storedIndex = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
+                if (storedIndex) {
+                    const parsedIndex = parseInt(storedIndex, 10);
+                    if (parsedIndex >= 0 && parsedIndex < storedData.length) {
+                        activeTabIndex = parsedIndex;
+                    }
+                }
+            } catch (e) {
+                console.error("Failed to parse active tab from localStorage", e);
+            }
+            setActiveTab(activeTabIndex);
+            setError(null);
+        }
+    }, [isOpen, initialJson]);
+
+    useEffect(() => {
+        if (isOpen && presets.length > 0 && presets[activeTab]) {
+            setJsonString(JSON.stringify(presets[activeTab].data, null, 2));
+            setError(null);
+        }
+    }, [activeTab, presets, isOpen]);
+
+    useEffect(() => {
+        if (isOpen) {
+            localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, activeTab.toString());
+        }
+    }, [activeTab, isOpen]);
+
+    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 updatePresetsInStorage = (newPresets: JsonPreset[]) => {
+        setPresets(newPresets);
+        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newPresets));
+    };
+
+    const handleAddTab = () => {
+        const newPreset: JsonPreset = { name: `Preset ${presets.length + 1}`, data: {} };
+        const newPresets = [...presets, newPreset];
+        updatePresetsInStorage(newPresets);
+        setActiveTab(newPresets.length - 1);
+    };
+
+    const handleDeleteTab = (indexToDelete: number) => {
+        let newPresets = presets.filter((_, index) => index !== indexToDelete);
+        if (newPresets.length === 0) {
+            newPresets = [{ name: "Default", data: initialJson }];
+        }
+        updatePresetsInStorage(newPresets);
+        if (activeTab >= indexToDelete && activeTab > 0) {
+            setActiveTab(activeTab - 1);
+        } else if (activeTab >= newPresets.length) {
+            setActiveTab(newPresets.length - 1);
+        }
+    };
+
+    const handleSave = () => {
+        try {
+            const parsedJson = JSON.parse(jsonString);
+            const updatedPresets = presets.map((preset, index) => {
+                if (index === activeTab) {
+                    return { ...preset, data: parsedJson };
+                }
+                return preset;
+            });
+            updatePresetsInStorage(updatedPresets);
+            onSave(parsedJson);
+            onClose();
+        } catch (e) {
+            setError("JSON 格式无效，请检查后重试。");
+            console.error("Invalid JSON format:", e);
+        }
+    };
+
+    const handleRename = (index: number) => {
+        if (editingName.trim() !== "") {
+            const newPresets = presets.map((p, i) => (i === index ? { ...p, name: editingName.trim() } : p));
+            updatePresetsInStorage(newPresets);
+            setEditingTab(null);
+        }
+    };
+
+    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>
+                <div className="flex-grow p-6 overflow-y-auto">
+                    <div className="flex items-center border-b border-gray-200 mb-4">
+                        {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"
+                                }`}
+                                onDoubleClick={() => {
+                                    setEditingTab(index);
+                                    setEditingName(preset.name);
+                                }}
+                                onClick={() => setActiveTab(index)}
+                            >
+                                {editingTab === index ? (
+                                    <input
+                                        type="text"
+                                        value={editingName}
+                                        onChange={(e) => setEditingName(e.target.value)}
+                                        onBlur={() => handleRename(index)}
+                                        onKeyDown={(e) => e.key === "Enter" && handleRename(index)}
+                                        className="text-sm p-0 border-none focus:ring-0 bg-transparent"
+                                        autoFocus
+                                    />
+                                ) : (
+                                    <span>{preset.name}</span>
+                                )}
+                                <button
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteTab(index);
+                                    }}
+                                    className="ml-2 text-gray-400 hover:text-gray-600 w-4 h-4 flex items-center justify-center"
+                                >
+                                    &times;
+                                </button>
+                            </div>
+                        ))}
+                        <button onClick={handleAddTab} className="ml-2 px-3 py-1 text-sm text-gray-500 hover:text-gray-700">
+                            +
+                        </button>
+                    </div>
+
+                    <textarea
+                        value={jsonString}
+                        onChange={(e) => {
+                            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"
+                    />
+                    {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"
+                    >
+                        取消
+                    </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>
-  );
+    );
 };
 
-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

@@ -16,24 +16,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) => (
+                <div key={message.unique_id}>
+                    {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} />
+                    )}
+                </div>
+            ))}
+        </div>
     );
 };