@langgraph-js/ui 1.0.0 → 1.2.0

package/src/chat/components/JsonEditorPopup.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import './JsonEditorPopup.css';
+
+interface JsonEditorPopupProps {
+  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);
+
+  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);
+    }
+  };
+
+  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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JsonEditorPopup; 

package/src/chat/components/MessageAI.tsx

@@ -1,20 +1,24 @@
-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;
+import React from "react";
+import { RenderMessage } from "@langgraph-js/sdk";
+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-text markdown-body">
+                    <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} />
+            </div>
+        </div>
+    );
+};
+
+export default MessageAI;

package/src/chat/components/MessageHuman.tsx

@@ -1,15 +1,55 @@
-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;
+import React from "react";
+interface MessageHumanProps {
+    content: string | any[];
+}
+
+const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
+    const renderContent = () => {
+        if (typeof content === "string") {
+            return <div className="message-text">{content}</div>;
+        }
+
+        if (Array.isArray(content)) {
+            return content.map((item, index) => {
+                switch (item.type) {
+                    case "text":
+                        return (
+                            <div key={index} className="message-text">
+                                {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>
+                        );
+                    case "audio":
+                        return (
+                            <div key={index} className="message-audio">
+                                <audio controls src={item.audio_url}>
+                                    您的浏览器不支持音频播放
+                                </audio>
+                            </div>
+                        );
+                    default:
+                        return (
+                            <div key={index} className="message-text">
+                                {JSON.stringify(item)}
+                            </div>
+                        );
+                }
+            });
+        }
+
+        return <div className="message-text">{JSON.stringify(content)}</div>;
+    };
+
+    return (
+        <div className="message human">
+            <div className="message-content">{renderContent()}</div>
+        </div>
+    );
+};
+
+export default MessageHuman;

package/src/chat/components/MessageTool.tsx

@@ -1,47 +1,46 @@
-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;
+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 }) => {
+    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>
+                        <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata || {}} spend_time={message.spend_time} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MessageTool;

package/src/chat/components/UsageMetadata.tsx

@@ -1,34 +1,40 @@
-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>
-    );
-};
+interface UsageMetadataProps {
+    usage_metadata: Partial<{
+        input_tokens: number;
+        output_tokens: number;
+        total_tokens: number;
+    }>;
+    response_metadata?:{
+        model_name?: string;
+    }
+    spend_time?: number;
+}
+
+export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time ,response_metadata}) => {
+    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>
+            <div>
+                {response_metadata?.model_name}
+            </div>
+            <span className="message-time">{spend_time ? `${(spend_time / 1000).toFixed(2)}s` : ""}</span>
+        </div>
+    );
+};

package/src/chat/context/ChatContext.tsx

@@ -1,29 +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>;
-};
+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/context/ExtraParamsContext.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+
+interface ExtraParamsContextType {
+  extraParams: object;
+  setExtraParams: (params: object) => void;
+}
+
+const ExtraParamsContext = createContext<ExtraParamsContextType | undefined>(undefined);
+
+export const ExtraParamsProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [extraParams, setExtraParamsState] = useState<object>(() => {
+    const savedParams = localStorage.getItem("extraParams");
+    try {
+      return savedParams ? JSON.parse(savedParams) : {};
+    } catch (e) {
+      console.error("Failed to parse extraParams from localStorage", e);
+      return {};
+    }
+  });
+
+  useEffect(() => {
+    localStorage.setItem("extraParams", JSON.stringify(extraParams));
+  }, [extraParams]);
+
+  const setExtraParams = (params: object) => {
+    setExtraParamsState(params);
+  };
+
+  return (
+    <ExtraParamsContext.Provider value={{ extraParams, setExtraParams }}>
+      {children}
+    </ExtraParamsContext.Provider>
+  );
+};
+
+export const useExtraParams = (): ExtraParamsContextType => {
+  const context = useContext(ExtraParamsContext);
+  if (context === undefined) {
+    throw new Error('useExtraParams must be used within an ExtraParamsProvider');
+  }
+  return context;
+}; 

package/src/chat/store/index.ts

@@ -1,24 +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([]);
-        },
-    }
-);
+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

@@ -1,33 +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,
-});
+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

@@ -1,16 +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;
-}
+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

@@ -1,27 +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;
+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

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