@langgraph-js/ui 1.0.0

package/src/chat/components/HistoryList.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import { useChat } from "../context/ChatContext";
+
+interface HistoryListProps {
+    onClose: () => void;
+    formatTime: (date: Date) => string;
+}
+
+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="刷新列表">
+                        🔁
+                    </button>
+                </div>
+                <button className="close-button" onClick={onClose} title="关闭">
+                    ❌
+                </button>
+            </div>
+            <div className="history-content">
+                <div
+                    className="history-items"
+                    onClick={() => {
+                        createNewChat();
+                    }}
+                >
+                    <div className="history-item">
+                        <div className="history-title"> New Chat</div>
+                    </div>
+                </div>
+                {historyList.length === 0 ? (
+                    <div className="empty-history">暂无历史记录</div>
+                ) : (
+                    <div className="history-items">
+                        {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">{thread?.values?.messages?.[0]?.content as string}</div>
+                                        <div className="history-meta">
+                                            <span className="history-time">{formatTime(new Date(thread.created_at))}</span>
+                                            <span className="history-status">{thread.status}</span>
+                                        </div>
+                                    </div>
+                                    <div className="history-actions">
+                                        <button
+                                            className="action-button"
+                                            onClick={() => {
+                                                toHistoryChat(thread);
+                                            }}
+                                            title="恢复对话"
+                                        >
+                                            ⏪
+                                        </button>
+                                        <button
+                                            className="action-button"
+                                            onClick={async () => {
+                                                await deleteHistoryChat(thread);
+                                            }}
+                                            title="删除对话"
+                                        >
+                                            ❌
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                    </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>
+    );
+};
+
+export default HistoryList;

package/src/chat/components/MessageAI.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { RenderMessage } from "@langgraph-js/sdk";
+import { UsageMetadata } from "./UsageMetadata";
+import { getMessageContent } from "@langgraph-js/sdk";
+interface MessageAIProps {
+    message: RenderMessage;
+}
+
+const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
+    return (
+        <div className="message ai">
+            <div className="message-content">
+                <div className="message-text">{getMessageContent(message.content)}</div>
+                {message.usage_metadata && <UsageMetadata usage_metadata={message.usage_metadata} spend_time={message.spend_time} />}
+            </div>
+        </div>
+    );
+};
+
+export default MessageAI;

package/src/chat/components/MessageHuman.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface MessageHumanProps {
+    content: any;
+}
+
+const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
+    return (
+        <div className="message human">
+            <div className="message-content">{typeof content === "string" ? content : JSON.stringify(content)}</div>
+        </div>
+    );
+};
+
+export default MessageHuman;

package/src/chat/components/MessageTool.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { LangGraphClient, RenderMessage, ToolMessage } from "@langgraph-js/sdk";
+import { UsageMetadata } from "./UsageMetadata";
+interface MessageToolProps {
+    message: ToolMessage & RenderMessage;
+    client: LangGraphClient;
+    getMessageContent: (content: any) => string;
+    formatTokens: (tokens: number) => string;
+    isCollapsed: boolean;
+    onToggleCollapse: () => void;
+}
+
+const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageContent, formatTokens, isCollapsed, onToggleCollapse }) => {
+    console.log(message)
+    return (
+        <div className="message tool">
+            {message.name === "ask_user" && !message.additional_kwargs?.done && (
+                <div>
+                    <div>询问 {message.tool_input}</div>
+                    <input
+                        type="text"
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                client.doneFEToolWaiting(message.id!, (e.target as any).value);
+                            }
+                        }}
+                    />
+                </div>
+            )}
+            <div className="tool-message">
+                <div className="tool-header" onClick={onToggleCollapse}>
+                    <div className="tool-title">{message.name}</div>
+                </div>
+
+                {!isCollapsed && (
+                    <div className="tool-content">
+                        <div className="tool-input">{message.tool_input}</div>
+                        <div className="tool-output">{getMessageContent(message.content)}</div>
+                        {message.usage_metadata && <UsageMetadata usage_metadata={message.usage_metadata} spend_time={message.spend_time} />}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MessageTool;

package/src/chat/components/UsageMetadata.tsx

@@ -0,0 +1,34 @@
+interface UsageMetadataProps {
+    usage_metadata: Partial<{
+        input_tokens: number;
+        output_tokens: number;
+        total_tokens: number;
+    }>;
+    spend_time?: number;
+}
+
+export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time }) => {
+    const formatTokens = (tokens: number) => {
+        return tokens.toString();
+    };
+
+    return (
+        <div className="message-meta">
+            <div className="token-info">
+                <span className="token-item">
+                    <span className="token-emoji">📥</span>
+                    {formatTokens(usage_metadata.input_tokens || 0)}
+                </span>
+                <span className="token-item">
+                    <span className="token-emoji">📤</span>
+                    {formatTokens(usage_metadata.output_tokens || 0)}
+                </span>
+                <span className="token-item">
+                    <span className="token-emoji">📊</span>
+                    {formatTokens(usage_metadata.total_tokens || 0)}
+                </span>
+            </div>
+            <span className="message-time">{spend_time ? `${(spend_time / 1000).toFixed(2)}s` : ""}</span>
+        </div>
+    );
+};

package/src/chat/context/ChatContext.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from "react";
+type ChatContextType = UnionStore<typeof globalChatStore>;
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+export const useChat = () => {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+
+interface ChatProviderProps {
+    children: ReactNode;
+}
+import { globalChatStore } from "../store";
+import { UnionStore, useUnionStore } from "@langgraph-js/sdk";
+import { useStore } from "@nanostores/react";
+export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
+    const store = useUnionStore(globalChatStore, useStore);
+    useEffect(() => {
+        store.initClient().then((res) => {
+            store.refreshHistoryList();
+        });
+    }, [store.currentAgent]);
+
+    return <ChatContext.Provider value={store}>{children}</ChatContext.Provider>;
+};

package/src/chat/store/index.ts

@@ -0,0 +1,24 @@
+import { createChatStore } from "@langgraph-js/sdk";
+const F =
+    localStorage.getItem("withCredentials") === "true"
+        ? (url: string, options: RequestInit) => {
+              options.credentials = "include";
+              return fetch(url, options);
+          }
+        : fetch;
+export const globalChatStore = createChatStore(
+    "agent",
+    {
+        apiUrl: localStorage.getItem("apiUrl") || "http://localhost:8123",
+        defaultHeaders: JSON.parse(localStorage.getItem("code") || "{}"),
+        callerOptions: {
+            // 携带 cookie 的写法
+            fetch: F,
+        },
+    },
+    {
+        onInit(client) {
+            client.tools.bindTools([]);
+        },
+    }
+);

package/src/chat/tools.ts

@@ -0,0 +1,33 @@
+import { createFETool, ToolManager } from "@langgraph-js/sdk";
+
+// 文件操作工具
+export const fileTool = createFETool({
+    name: "file_operation",
+    description: "执行文件操作，包括读取和写入",
+    parameters: [
+        {
+            name: "filePath",
+            type: "string",
+            description: "文件的完整路径",
+        },
+    ],
+    returnDirect: true,
+    callbackMessage: () => [{ type: "ai", content: "工作完成" }],
+    async handler(args) {
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        return [{ type: "text", text: "执行文件操作 " + args.filePath }];
+    },
+});
+
+export const askUserTool = createFETool({
+    name: "ask_user",
+    description: "询问用户",
+    parameters: [
+        {
+            name: "question",
+            type: "string",
+            description: "问题",
+        },
+    ],
+    handler: ToolManager.waitForUIDone,
+});

package/src/chat/types.ts

@@ -0,0 +1,16 @@
+export interface Message {
+    content: string;
+    role: string;
+    name?: string;
+    metadata?: {
+        graph_id?: string;
+    };
+    thread_id?: string;
+    usage_metadata?: {
+        input_tokens: number;
+        output_tokens: number;
+        total_tokens: number;
+    };
+    spend_time?: number;
+    tool_input?: string;
+}

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+function useLocalStorage<T>(key: string, initialValue: T) {
+    // 从 localStorage 获取初始值
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            console.error("Error reading from localStorage:", error);
+            return initialValue;
+        }
+    });
+
+    // 当值改变时，自动同步到 localStorage
+    useEffect(() => {
+        try {
+            window.localStorage.setItem(key, JSON.stringify(storedValue));
+        } catch (error) {
+            console.error("Error writing to localStorage:", error);
+        }
+    }, [key, storedValue]);
+
+    return [storedValue, setStoredValue] as const;
+}
+
+export default useLocalStorage;

package/src/index.ts

@@ -0,0 +1 @@
+export { default as Chat } from "./chat/Chat";

package/src/login/Login.css

@@ -0,0 +1,93 @@
+.login-container {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.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: 0.5rem;
+    color: #333;
+    font-weight: 500;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.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 rgba(0, 123, 255, 0.25);
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button[type="submit"] {
+    background-color: #007bff;
+    color: white;
+}
+
+button[type="submit"]:hover {
+    background-color: #0056b3;
+}
+
+button[type="button"] {
+    background-color: #6c757d;
+    color: white;
+}
+
+button[type="button"]:hover {
+    background-color: #5a6268;
+}
+
+.remove-header {
+    background-color: #dc3545;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+}
+
+.remove-header:hover {
+    background-color: #c82333;
+}
+
+p {
+    margin-bottom: 1.5rem;
+    color: #666;
+    text-align: center;
+}

package/src/login/Login.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import "./Login.css";
+
+interface HeaderConfig {
+    key: string;
+    value: string;
+}
+
+const Login: React.FC = () => {
+    const [headers, setHeaders] = useState<HeaderConfig[]>([{ key: "authorization", value: "" }]);
+    const [withCredentials, setWithCredentials] = useState<boolean>(localStorage.getItem("withCredentials") === "true");
+    const [apiUrl, setApiUrl] = useState<string>(localStorage.getItem("apiUrl") || "");
+
+    const addHeader = () => {
+        setHeaders([...headers, { key: "", value: "" }]);
+    };
+
+    const removeHeader = (index: number) => {
+        setHeaders(headers.filter((_, i) => i !== index));
+    };
+
+    const updateHeader = (index: number, field: "key" | "value", value: string) => {
+        const newHeaders = [...headers];
+        newHeaders[index][field] = value;
+        setHeaders(newHeaders);
+    };
+
+    const handleLogin = () => {
+        const headerObject = Object.fromEntries(headers.map((k) => [k.key, k.value]));
+
+        localStorage.setItem("code", JSON.stringify(headerObject));
+        localStorage.setItem("withCredentials", JSON.stringify(withCredentials));
+        localStorage.setItem("apiUrl", apiUrl);
+        location.reload();
+    };
+
+    return (
+        <div className="login-container">
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleLogin();
+                }}
+            >
+                <h2>LangGraph UI</h2>
+                <p>登录，自定义请求头配置</p>
+
+                <div className="form-group api-url-group">
+                    <label htmlFor="api-url">API URL</label>
+                    <input type="text" id="api-url" value={apiUrl} onChange={(e) => setApiUrl(e.target.value)} placeholder="例如: http://localhost:8123" />
+                </div>
+
+                {headers.map((header, index) => (
+                    <div key={index} className="header-group">
+                        <div className="form-group">
+                            <input type="text" id={`header-key-${index}`} value={header.key} onChange={(e) => updateHeader(index, "key", e.target.value)} placeholder="例如: authorization" required />
+                        </div>
+                        <div className="form-group">
+                            <input
+                                type="text"
+                                id={`header-value-${index}`}
+                                value={header.value}
+                                onChange={(e) => updateHeader(index, "value", e.target.value)}
+                                placeholder="例如: Bearer token；无则填 1"
+                                required
+                            />
+                        </div>
+                        {index > 0 && (
+                            <button type="button" className="remove-header" onClick={() => removeHeader(index)}>
+                                删除
+                            </button>
+                        )}
+                    </div>
+                ))}
+                <div className="with-credentials-option">
+                    <label>
+                        <input type="checkbox" checked={withCredentials} onChange={(e) => setWithCredentials(e.target.checked)} />
+                        启用 withCredentials（跨域请求时发送 Cookie）
+                    </label>
+                </div>
+                <div className="button-group">
+                    <button type="button" onClick={addHeader}>
+                        添加请求头
+                    </button>
+                    <button type="submit">保存配置</button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default Login;

package/test/App.tsx

@@ -0,0 +1,9 @@
+import Chat from "../src/chat/Chat";
+import Login from "../src/login/Login";
+import { useState } from "react";
+function App() {
+    const [isLogin, setIsLogin] = useState(localStorage.getItem("code"));
+    return <>{isLogin ? <Chat /> : <Login></Login>}</>;
+}
+
+export default App;

package/test/main.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

package/test/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": ["test", "test/**/*.tsx"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}