@langgraph-js/ui 1.1.0 → 1.2.0

package/dist/assets/index-Du4LMUX2.css

@@ -0,0 +1 @@
+@import"https://unpkg.com/github-markdown-css/github-markdown.css";.chat-container{display:flex;height:100vh;width:100%;position:relative}.chat-sidebar{background-color:#f5f5f5;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.history-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.history-header h3{margin:0;font-size:16px;color:#333}.close-button{background:none;border:none;font-size:20px;cursor:pointer;color:#666}.history-list{flex:none;width:280px;overflow-y:auto;border-right:1px solid #e0e0e0}.history-item{padding:12px;margin-bottom:8px;background-color:#fff;cursor:pointer;transition:background-color .2s}.history-item:hover{background-color:#e8e8e8}.history-item.active{background-color:#e3f2fd;border-left:3px solid #2196f3}.history-title{font-size:14px;color:#333;margin-bottom:4px}.history-time{font-size:12px;color:#666}.chat-main{overflow:hidden;flex:1;display:flex;flex-direction:column}.chat-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:.5rem}.history-button{padding:8px 16px;background-color:#f0f0f0;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:14px;color:#333}.history-button:hover{background-color:#e0e0e0}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.message{display:flex;max-width:80%}.message.human{margin-left:auto}.message.ai{margin-right:auto}.message-content{padding:.75rem 1rem;border-radius:8px;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.5rem;max-width:100%}.message-text{word-break:break-word;line-height:1.5}.message-image{margin:.5rem 0}.message-image img{max-width:100%;border-radius:4px;box-shadow:0 1px 3px #0000001a}.message-audio{margin:.5rem 0}.message-audio audio{width:100%;max-width:300px}.message-meta{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:#6b7280;margin-top:.25rem}.message-time{font-family:monospace}.token-info{display:flex;gap:.5rem;align-items:center}.token-item{display:flex;align-items:center;gap:.25rem;background-color:#fff;padding:.125rem .375rem;border-radius:4px;font-family:monospace}.token-emoji{font-size:.875rem}.message.human .message-content{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.message.human .message-meta{color:#fffc}.message.ai .message-content{color:#1f2937}.message.tool{width:100%;max-width:100%}.tool-message{width:100%;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.tool-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:#f9fafb;border-bottom:1px solid #e5e7eb;cursor:pointer}.tool-header:hover{background-color:#f3f4f6}.tool-title{font-weight:500;color:#374151}.tool-content{padding:1rem}.tool-input{background-color:#f9fafb;padding:.75rem;border-radius:4px;margin-bottom:.5rem;font-family:monospace;white-space:pre-wrap;word-break:break-all}.tool-output{background-color:#fff;padding:.75rem;border-radius:4px;font-family:monospace;border:1px solid #e5e7eb;margin-bottom:.5rem}.chat-input{border-top:1px solid #e5e7eb;padding:.5rem 1rem 1rem;background-color:#fff}.chat-input-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.input-container{display:flex;gap:.5rem}.input-textarea{flex:1;padding:.75rem;border:1px solid #e5e7eb;border-radius:8px;resize:none;font-size:.875rem;line-height:1.25rem}.input-textarea:focus{outline:none;border-color:#3b82f6}.send-button{padding:.5rem 1rem;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.send-button:hover{background-color:#2563eb}.send-button:disabled{background-color:#93c5fd;cursor:not-allowed}.send-button.interrupt{background-color:#ef4444}.send-button.interrupt:hover{background-color:#dc2626}.collapsed .tool-content{display:none}.expand-icon{transition:transform .2s}.collapsed .expand-icon{transform:rotate(-90deg)}.loading-indicator{padding:12px 16px;margin:8px 0;background-color:#f5f5f5;border-radius:8px;color:#666;font-size:14px;text-align:center;animation:pulse 1.5s infinite;display:flex;align-items:center;justify-content:center;gap:12px}.interrupt-button{padding:4px 12px;background-color:#ef4444;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s}.interrupt-button:hover{background-color:#dc2626}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.error-message{padding:12px 16px;margin:8px 0;background-color:#fee2e2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px;text-align:center}.markdown-body p{text-align:left}.edit-params-button{padding:6px 12px;background-color:#f0f0f0;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:.8rem;color:#333;white-space:nowrap}.edit-params-button:hover{background-color:#e0e0e0}.file-list{display:flex;gap:.5rem;border-radius:8px;flex:1}.file-list-header{margin-bottom:1rem}.file-upload-button{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;color:#929292;background-color:#ebebeb;border-radius:6px;cursor:pointer;transition:all .2s}.file-upload-button svg{width:32px;height:32px}.file-upload-button.empty{width:32px;height:32px}.file-upload-button.empty svg{width:20px;height:20px}.file-list-content{display:flex;flex-wrap:wrap;gap:.5rem}.file-item{position:relative;width:80px;height:80px;border-radius:6px;overflow:hidden}.file-item img{border:1px solid #e5e7eb;overflow:hidden}.file-preview{width:100%;height:100%;object-fit:cover}.file-info{padding:.75rem}.file-name{display:block;font-size:.875rem;color:#374151;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-actions{display:flex;gap:.5rem}.upload-button,.remove-button{flex:1;padding:.375rem .75rem;border:none;border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .2s}.upload-button{color:#000}.upload-button:hover{background-color:#2563eb}.remove-button{position:absolute;top:2px;right:2px;width:20px;height:20px;background-color:#00000080;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.remove-button:hover{background-color:#000000b3}.upload-button:disabled,.remove-button:disabled{opacity:.5;cursor:not-allowed}.json-editor-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.json-editor-popup-content{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;width:80%;max-width:600px;display:flex;flex-direction:column}.json-editor-popup-content h2{margin-top:0;margin-bottom:15px;font-size:1.5rem;color:#333}.json-editor-popup-content textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:.9rem;resize:vertical;box-sizing:border-box}.json-editor-popup-content .error-message{color:red;font-size:.8rem;margin-top:5px;margin-bottom:10px}.popup-actions{display:flex;justify-content:flex-end;margin-top:15px;gap:10px}.popup-actions button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.popup-actions .save-button{background-color:#3b82f6;color:#fff}.popup-actions .save-button:hover{background-color:#2563eb}.popup-actions .cancel-button{background-color:#e5e7eb;color:#374151}.popup-actions .cancel-button:hover{background-color:#d1d5db}.login-container{max-width:600px;margin:2rem auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.header-group{display:flex;gap:1rem;align-items:flex-start;padding:1rem;background:#f8f9fa;border-radius:4px;position:relative}.form-group{flex:1}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.form-group input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.form-group input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.button-group{display:flex;gap:1rem;margin-top:1rem}button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}button[type=submit]{background-color:#007bff;color:#fff}button[type=submit]:hover{background-color:#0056b3}button[type=button]{background-color:#6c757d;color:#fff}button[type=button]:hover{background-color:#5a6268}.remove-header{background-color:#dc3545;color:#fff;padding:.25rem .5rem;font-size:.875rem}.remove-header:hover{background-color:#c82333}p{margin-bottom:1.5rem;color:#666;text-align:center}

package/dist/index.html

@@ -1,9 +1,9 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite App</title>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
         <style>
             body,
             #root,
@@ -13,11 +13,11 @@
                 width: 100%;
                 height: 100%;
             }
-        </style>
-      <script type="module" crossorigin src="/assets/index-CCaE6qp1.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-CBfok6qC.css">
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>
-</html>
+        </style>
+      <script type="module" crossorigin src="/assets/index-BHPbGlnP.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-Du4LMUX2.css">
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

package/index.html

@@ -1,22 +1,22 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite App</title>
-        <style>
-            body,
-            #root,
-            html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="./test/main.tsx"></script>
-    </body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+        <style>
+            body,
+            #root,
+            html {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./test/main.tsx"></script>
+    </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -12,20 +12,21 @@
   "main": "./dist/react/src/index.js",
   "type": "module",
   "dependencies": {
+    "@langgraph-js/langgraph-pg": "^1.1.2",
     "@nanostores/react": "^1.0.0",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "nanostores": "^1.0.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "vite": "^6.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "@langgraph-js/sdk": "1.1.6"
+    "vite": "^6.3.5",
+    "@langgraph-js/sdk": "1.1.7"
   },
   "devDependencies": {
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4"
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3"
   },
   "scripts": {
     "dev": "vite",

package/src/chat/Chat.tsx

@@ -1,150 +1,164 @@
-import React, { useState } from "react";
-import "./chat.css";
-import MessageHuman from "./components/MessageHuman";
-import MessageAI from "./components/MessageAI";
-import MessageTool from "./components/MessageTool";
-import HistoryList from "./components/HistoryList";
-import { ChatProvider, useChat } from "./context/ChatContext";
-import { UsageMetadata } from "./components/UsageMetadata";
-import { formatTime, formatTokens, getMessageContent, Message } from "@langgraph-js/sdk";
-import FileList from "./components/FileList";
-
-const ChatMessages: React.FC = () => {
-    const { renderMessages, loading, inChatError, client, collapsedTools, toggleToolCollapse } = useChat();
-
-    return (
-        <div className="chat-messages">
-            {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} />
-                )
-            )}
-            {loading && <div className="loading-indicator">正在思考中...</div>}
-            {inChatError && <div className="error-message">{inChatError}</div>}
-        </div>
-    );
-};
-
-const ChatInput: React.FC = () => {
-    const { userInput, setUserInput, loading, sendMessage, stopGeneration, currentAgent, setCurrentAgent, client } = useChat();
-    const [extraParams, setExtraParams] = useState({});
-    const [imageUrls, setImageUrls] = useState<string[]>([]);
-
-    const handleFileUploaded = (url: string) => {
-        setImageUrls((prev) => [...prev, url]);
-    };
-
-    const sendMultiModalMessage = () => {
-        const content: Message[] = [
-            {
-                type: "human",
-                content: [
-                    {
-                        type: "text",
-                        text: userInput,
-                    },
-                    ...imageUrls.map((url) => ({
-                        type: "image_url" as const,
-                        image_url: { url },
-                    })),
-                ],
-            },
-        ];
-
-        sendMessage(content, {
-            extraParams,
-        });
-
-        // 清空图片列表
-        setImageUrls([]);
-    };
-
-    const handleKeyPress = (event: React.KeyboardEvent) => {
-        if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            sendMultiModalMessage();
-        }
-    };
-
-    return (
-        <div className="chat-input">
-            <FileList onFileUploaded={handleFileUploaded} />
-            <div className="chat-input-header">
-                <select value={currentAgent} onChange={(e) => setCurrentAgent(e.target.value)}>
-                    {client?.availableAssistants.map((i) => {
-                        return <option value={i.graph_id}>{i.name}</option>;
-                    })}
-                </select>
-                <UsageMetadata usage_metadata={client?.tokenCounter || {}} />
-            </div>
-            <div className="input-container">
-                <textarea
-                    className="input-textarea"
-                    rows={2}
-                    value={userInput}
-                    onChange={(e) => setUserInput(e.target.value)}
-                    onKeyDown={handleKeyPress}
-                    placeholder="输入消息..."
-                    disabled={loading}
-                />
-                <button
-                    className={`send-button ${loading ? "interrupt" : ""}`}
-                    onClick={() => (loading ? stopGeneration() : sendMultiModalMessage())}
-                    disabled={!loading && !userInput.trim() && imageUrls.length === 0}
-                >
-                    {loading ? "中断" : "发送"}
-                </button>
-            </div>
-        </div>
-    );
-};
-
-const Chat: React.FC = () => {
-    const { showHistory, toggleHistoryVisible } = useChat();
-
-    return (
-        <div className="chat-container">
-            {showHistory && <HistoryList onClose={() => toggleHistoryVisible()} formatTime={formatTime} />}
-            <div className="chat-main">
-                <div className="chat-header">
-                    <button className="history-button" onClick={() => toggleHistoryVisible()}>
-                        历史记录
-                    </button>
-                    <button
-                        className="history-button"
-                        onClick={() => {
-                            localStorage.setItem("code", "");
-                            location.reload();
-                        }}
-                    >
-                        退出登陆
-                    </button>
-                </div>
-                <ChatMessages />
-                <ChatInput />
-            </div>
-        </div>
-    );
-};
-
-const ChatWrapper: React.FC = () => {
-    return (
-        <ChatProvider>
-            <Chat />
-        </ChatProvider>
-    );
-};
-
-export default ChatWrapper;
+import React, { useState, useEffect } from "react";
+import "./chat.css";
+import MessageHuman from "./components/MessageHuman";
+import MessageAI from "./components/MessageAI";
+import MessageTool from "./components/MessageTool";
+import HistoryList from "./components/HistoryList";
+import { ChatProvider, useChat } from "./context/ChatContext";
+import { ExtraParamsProvider, useExtraParams } from "./context/ExtraParamsContext";
+import { UsageMetadata } from "./components/UsageMetadata";
+import { formatTime, formatTokens, getMessageContent, Message } from "@langgraph-js/sdk";
+import FileList from "./components/FileList";
+import JsonEditorPopup from "./components/JsonEditorPopup";
+
+const ChatMessages: React.FC = () => {
+    const { renderMessages, loading, inChatError, client, collapsedTools, toggleToolCollapse } = useChat();
+
+    return (
+        <div className="chat-messages">
+            {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} />
+                )
+            )}
+            {loading && <div className="loading-indicator">正在思考中...</div>}
+            {inChatError && <div className="error-message">{inChatError}</div>}
+        </div>
+    );
+};
+
+const ChatInput: React.FC = () => {
+    const { userInput, setUserInput, loading, sendMessage, stopGeneration, currentAgent, setCurrentAgent, client } = useChat();
+    const { extraParams } = useExtraParams();
+    const [imageUrls, setImageUrls] = useState<string[]>([]);
+
+    const handleFileUploaded = (url: string) => {
+        setImageUrls((prev) => [...prev, url]);
+    };
+
+    const sendMultiModalMessage = () => {
+        const content: Message[] = [
+            {
+                type: "human",
+                content: [
+                    {
+                        type: "text",
+                        text: userInput,
+                    },
+                    ...imageUrls.map((url) => ({
+                        type: "image_url" as const,
+                        image_url: { url },
+                    })),
+                ],
+            },
+        ];
+
+        sendMessage(content, {
+            extraParams,
+        });
+
+        // 清空图片列表
+        setImageUrls([]);
+    };
+
+    const handleKeyPress = (event: React.KeyboardEvent) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            sendMultiModalMessage();
+        }
+    };
+
+    return (
+        <div className="chat-input">
+            <div className="chat-input-header">
+                <FileList onFileUploaded={handleFileUploaded} />
+                <UsageMetadata usage_metadata={client?.tokenCounter || {}} />
+                <select value={currentAgent} onChange={(e) => setCurrentAgent(e.target.value)}>
+                    {client?.availableAssistants.map((i) => {
+                        return (
+                            <option value={i.graph_id} key={i.graph_id}>
+                                {i.name}
+                            </option>
+                        );
+                    })}
+                </select>
+            </div>
+            <div className="input-container">
+                <textarea
+                    className="input-textarea"
+                    rows={2}
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    onKeyDown={handleKeyPress}
+                    placeholder="输入消息..."
+                    disabled={loading}
+                />
+                <button
+                    className={`send-button ${loading ? "interrupt" : ""}`}
+                    onClick={() => (loading ? stopGeneration() : sendMultiModalMessage())}
+                    disabled={!loading && !userInput.trim() && imageUrls.length === 0}
+                >
+                    {loading ? "中断" : "发送"}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const Chat: React.FC = () => {
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const { showHistory, toggleHistoryVisible } = useChat();
+    const { extraParams, setExtraParams } = useExtraParams();
+
+    return (
+        <div className="chat-container">
+            {showHistory && <HistoryList onClose={() => toggleHistoryVisible()} formatTime={formatTime} />}
+            <div className="chat-main">
+                <div className="chat-header">
+                    <button onClick={() => setIsPopupOpen(true)} className="edit-params-button">
+                        编辑参数
+                    </button>
+                    <button className="history-button" onClick={() => toggleHistoryVisible()}>
+                        历史记录
+                    </button>
+                    <button
+                        className="history-button"
+                        onClick={() => {
+                            localStorage.setItem("code", "");
+                            location.reload();
+                        }}
+                    >
+                        退出登陆
+                    </button>
+                </div>
+                <ChatMessages />
+                <ChatInput />
+                <JsonEditorPopup isOpen={isPopupOpen} initialJson={extraParams} onClose={() => setIsPopupOpen(false)} onSave={setExtraParams} />
+            </div>
+        </div>
+    );
+};
+
+const ChatWrapper: React.FC = () => {
+    return (
+        <ChatProvider>
+            <ExtraParamsProvider>
+                <Chat />
+            </ExtraParamsProvider>
+        </ChatProvider>
+    );
+};
+
+export default ChatWrapper;