@langgraph-js/ui 1.4.0 → 1.6.0

package/src/chat/components/MessageTool.tsx

@@ -1,6 +1,10 @@
-import React from "react";
+import React, { JSX, useState } from "react";
 import { LangGraphClient, RenderMessage, ToolMessage } from "@langgraph-js/sdk";
 import { UsageMetadata } from "./UsageMetadata";
+import { useChat } from "../context/ChatContext";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
 interface MessageToolProps {
     message: ToolMessage & RenderMessage;
     client: LangGraphClient;
@@ -11,40 +15,77 @@ interface MessageToolProps {
 }
 
 const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageContent, formatTokens, isCollapsed, onToggleCollapse }) => {
+    const { getToolUIRender } = useChat();
+    const render = getToolUIRender(message.name!);
     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.node_name} | {message.name}
+        <div className="flex flex-col w-full">
+            {render ? (
+                (render(message) as JSX.Element)
+            ) : (
+                <div className="flex flex-col w-full bg-white rounded-lg shadow-sm border border-gray-200">
+                    <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 transition-colors" onClick={onToggleCollapse}>
+                        <div className="text-sm font-medium text-gray-700" onClick={() => console.log(message)}>
+                            {message.node_name} | {message.name}
+                        </div>
                     </div>
+
+                    {!isCollapsed && (
+                        <div className="flex flex-col gap-4 p-4 border-t border-gray-100">
+                            <Previewer content={message.tool_input || ""} />
+                            <Previewer content={getMessageContent(message.content)} />
+                            <UsageMetadata
+                                response_metadata={message.response_metadata as any}
+                                usage_metadata={message.usage_metadata || {}}
+                                spend_time={message.spend_time}
+                                id={message.id}
+                                tool_call_id={message.tool_call_id}
+                            />
+                        </div>
+                    )}
                 </div>
+            )}
+        </div>
+    );
+};
+
+const Previewer = ({ content }: { content: string }) => {
+    const validJSON = () => {
+        try {
+            JSON.parse(content);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    };
+    const isJSON = content.startsWith("{") && content.endsWith("}") && validJSON();
+    const isMarkdown = content.includes("#") || content.includes("```") || content.includes("*");
+    const [jsonMode, setJsonMode] = useState(false);
+    const [markdownMode, setMarkdownMode] = useState(false);
+
+    return (
+        <div className={`flex flex-col`}>
+            <div className="flex gap-2 mb-2">
+                {isJSON && (
+                    <button onClick={() => setJsonMode(!jsonMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 transition-colors">
+                        json
+                    </button>
+                )}
+                {isMarkdown && (
+                    <button onClick={() => setMarkdownMode(!markdownMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 transition-colors">
+                        markdown
+                    </button>
+                )}
+            </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}
-                            id={message.id}
-                            tool_call_id={message.tool_call_id}
-                        />
+            <div className="flex flex-col max-h-[300px] overflow-auto border border-gray-200 rounded p-2 w-full text-xs font-mono whitespace-pre-wrap">
+                {jsonMode && isJSON ? (
+                    <pre className="whitespace-pre-wrap">{JSON.stringify(JSON.parse(content), null, 2)}</pre>
+                ) : markdownMode && isMarkdown ? (
+                    <div className="markdown-body">
+                        <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
                     </div>
+                ) : (
+                    <pre className="whitespace-pre-wrap">{content}</pre>
                 )}
             </div>
         </div>

package/src/chat/components/UsageMetadata.tsx

@@ -12,31 +12,50 @@ interface UsageMetadataProps {
     id?: string;
 }
 
+const formatTokens = (tokens: number) => {
+    return tokens.toString();
+};
 export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time, response_metadata, id, tool_call_id }) => {
-    const formatTokens = (tokens: number) => {
-        return tokens.toString();
-    };
-
+    const speed = spend_time ? ((usage_metadata.output_tokens || 0) * 1000) / (spend_time || 1) : 0;
     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 className="flex items-center justify-between text-xs text-gray-500 mt-2">
+            <div className="flex items-center gap-3">
+                <TokenPanel usage_metadata={usage_metadata} />
+                {spend_time && <span className="text-gray-500">{(spend_time / 1000).toFixed(2)}s</span>}
+                {speed && <span className="text-gray-500">{speed.toFixed(2)} TPS</span>}
             </div>
-            <div>{response_metadata?.model_name}</div>
-            <span className="message-time">{spend_time ? `${(spend_time / 1000).toFixed(2)}s` : ""}</span>
-            {tool_call_id && <span className="tool-call-id">Tool: {tool_call_id}</span>}
-            {id && <span className="message-id">ID: {id}</span>}
+            <div className="flex items-center gap-2">
+                {response_metadata?.model_name && <span className="text-gray-600">{response_metadata.model_name}</span>}
+                {tool_call_id && <span className="text-gray-500">Tool: {tool_call_id}</span>}
+                {id && <span className="text-gray-500">ID: {id}</span>}
+            </div>
+        </div>
+    );
+};
+
+export const TokenPanel = ({ usage_metadata }: any) => {
+    return (
+        <div className="flex items-center gap-1">
+            <span className="flex items-center gap-1 group relative">
+                <span>📊</span>
+                {formatTokens(usage_metadata.total_tokens || 0)}
+                <div className="hidden group-hover:block absolute bottom-full ml-2 bg-gray-100 p-2 rounded text-xs shadow border">
+                    <div className="flex flex-col gap-1">
+                        <div className="flex flex-col gap-1">
+                            <span className="flex items-center gap-1">
+                                <span>📥</span>
+                                {formatTokens(usage_metadata.input_tokens || 0)}
+                                <div> {JSON.stringify(usage_metadata.prompt_tokens_details)}</div>
+                            </span>
+                            <span className="flex items-center gap-1">
+                                <span>📤</span>
+                                {formatTokens(usage_metadata.output_tokens || 0)}
+                                <div> {JSON.stringify(usage_metadata.completion_tokens_details)}</div>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </span>
         </div>
     );
 };

package/src/chat/context/ChatContext.tsx

@@ -20,11 +20,20 @@ import { useStore } from "@nanostores/react";
 export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
     const store = useUnionStore(globalChatStore, useStore);
     useEffect(() => {
-        store.initClient().then((res) => {
-            if (store.showHistory) {
-                store.refreshHistoryList();
-            }
-        });
+        store
+            .initClient()
+            .then((res) => {
+                if (store.showHistory) {
+                    store.refreshHistoryList();
+                }
+                console.log(res);
+            })
+            .catch((err) => {
+                console.error(err);
+                const agentName = prompt("Failed to initialize chat client: " + store.currentAgent + "\n请输入 agent 名称");
+                localStorage.setItem("agent_name", agentName!);
+                location.reload();
+            });
     }, []);
 
     return <ChatContext.Provider value={store}>{children}</ChatContext.Provider>;

package/src/chat/store/index.ts

@@ -1,4 +1,8 @@
 import { createChatStore } from "@langgraph-js/sdk";
+import { ask_user_for_approve, update_plan, web_search_tool } from "../tools/index";
+import { FullTextSearchService, OpenAIVectorizer, VecDB, createMemoryTool } from "../../memory/index";
+import { create_artifacts } from "../tools/create_artifacts";
+
 const F =
     localStorage.getItem("withCredentials") === "true"
         ? (url: string, options: RequestInit) => {
@@ -18,7 +22,26 @@ export const setLocalConfig = (config: Partial<{ showHistory: boolean; showGraph
         localStorage.setItem(key, value.toString());
     });
 };
-import { askUserTool } from "../tools";
+
+// const vectorizer = new OpenAIVectorizer("text-embedding-3-small", {
+//     apiKey: import.meta.env.VITE_MEMORY_API_KEY,
+//     apiEndpoint: import.meta.env.VITE_MEMORY_API_ENDPOINT,
+// });
+// const db = new VecDB({
+//     vectorizer,
+//     dbName: "memory_db",
+//     dbVersion: 1,
+//     storeName: "memory",
+// });
+const db = new FullTextSearchService({
+    dbName: "memory_fulltext_db",
+    dbVersion: 1,
+    storeName: "memory",
+});
+db.initialize();
+console.log(db);
+export const memoryTool = createMemoryTool(db);
+
 export const globalChatStore = createChatStore(
     localStorage.getItem("agent_name") || "",
     {
@@ -32,7 +55,7 @@ export const globalChatStore = createChatStore(
     {
         ...getLocalConfig(),
         onInit(client) {
-            client.tools.bindTools([askUserTool]);
+            client.tools.bindTools([create_artifacts, web_search_tool, ask_user_for_approve, update_plan, memoryTool.manageMemory, memoryTool.searchMemory]);
         },
     }
 );

package/src/chat/tools/ask_user_for_approve.tsx

@@ -0,0 +1,80 @@
+import { ToolManager, ToolRenderData, createToolUI } from "@langgraph-js/sdk";
+import { useState } from "react";
+import { CheckCircle2, XCircle, Search } from "lucide-react";
+
+interface RenderResponse {
+    approved: boolean;
+    feedback: string | null;
+}
+
+export const ask_user_for_approve = createToolUI({
+    name: "ask_user_for_approve",
+    description: "Request user review and approval for plans or content, wait for user feedback before proceeding",
+    parameters: [
+        {
+            name: "title",
+            type: "string",
+            description: "Title or subject of the content to be reviewed",
+        },
+    ],
+    onlyRender: true,
+    handler: ToolManager.waitForUIDone,
+    render(tool: ToolRenderData<{ title: string }, RenderResponse>) {
+        const data = tool.getInputRepaired();
+        const [feedback, setFeedback] = useState(tool.getJSONOutputSafe()?.feedback || "");
+
+        const handleApprove = () => {
+            const result = {
+                approved: true,
+                feedback: feedback.trim() || null,
+            };
+            tool.response(result);
+        };
+
+        const handleReject = () => {
+            const result = {
+                approved: false,
+                feedback: feedback.trim() || "用户拒绝了请求",
+            };
+            tool.response(result);
+        };
+
+        return (
+            <div className="flex flex-col gap-3 p-4 bg-white rounded-lg border border-gray-200">
+                <div className="flex items-center gap-2 text-gray-700">
+                    <Search className="w-4 h-4 text-blue-500" />
+                    <span>请求审核批准</span>
+                    {data.title && <span className="text-sm text-gray-500 ml-2 truncate max-w-[200px]">{data.title}</span>}
+                </div>
+
+                <div className="flex gap-2">
+                    <textarea
+                        disabled={tool.state === "done"}
+                        className="flex-1 p-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                        placeholder="反馈意见（可选）"
+                        value={feedback}
+                        onChange={(e) => setFeedback(e.target.value)}
+                        rows={1}
+                    />
+
+                    <button
+                        disabled={tool.state === "done"}
+                        className="px-3 py-2 text-sm font-medium text-white bg-green-500 rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+                        onClick={handleApprove}
+                    >
+                        <CheckCircle2 className="w-4 h-4" />
+                        批准
+                    </button>
+                    <button
+                        disabled={tool.state === "done"}
+                        className="px-3 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+                        onClick={handleReject}
+                    >
+                        <XCircle className="w-4 h-4" />
+                        拒绝
+                    </button>
+                </div>
+            </div>
+        );
+    },
+});

package/src/chat/tools/create_artifacts.tsx

@@ -0,0 +1,50 @@
+import { createToolUI, ToolRenderData } from "@langgraph-js/sdk";
+import { FileIcon } from "lucide-react";
+import { useState } from "react";
+import { useArtifacts } from "../../artifacts/ArtifactsContext";
+
+interface ArtifactsInput {
+    filename: string;
+    filetype: string;
+    code: string;
+}
+
+interface ArtifactsResponse {
+    success: boolean;
+    message: string;
+    artifactsPath?: string;
+}
+
+export const create_artifacts = createToolUI({
+    name: "create_artifacts",
+    description: "创建并保存代码文件到 artifacts 目录",
+    parameters: [],
+    onlyRender: true,
+    render(tool: ToolRenderData<ArtifactsInput, ArtifactsResponse>) {
+        const data = tool.getInputRepaired();
+        const { setCurrentArtifactById, currentArtifact } = useArtifacts();
+
+        const toggleExpand = () => {
+            setCurrentArtifactById(tool.message.id!);
+        };
+
+        return (
+            <div className="p-4 space-y-4">
+                <div className="text-sm text-gray-500">
+                    创建文件: {data.filename}.{data.filetype}
+                </div>
+                <div className="border rounded-lg p-2 hover:bg-gray-50">
+                    <div className="flex items-center justify-between select-none cursor-pointer" onClick={toggleExpand}>
+                        <div className="flex items-center gap-2">
+                            <FileIcon className="w-4 h-4" />
+                            <span className="font-xs">{data.filename}</span>
+                        </div>
+                        <span className="text-gray-400">
+                            {data.filetype} {currentArtifact?.id === tool.message.id ? "▼" : "▶"}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+});

package/src/chat/tools/index.ts

@@ -0,0 +1,5 @@
+export { ask_user_for_approve } from "./ask_user_for_approve";
+export { update_plan } from "./update_plan";
+export { web_search_tool } from "./web_search_tool";
+// 在这里添加其他工具的导出
+// export { other_tool } from "./other_tool";

package/src/chat/tools/update_plan.tsx

@@ -0,0 +1,75 @@
+import { ToolManager, ToolRenderData, createToolUI } from "@langgraph-js/sdk";
+import { FileEdit, Globe, Brain } from "lucide-react";
+
+interface Step {
+    need_web_search: boolean;
+    title: string;
+    description: string;
+    step_type: "research" | "processing";
+    execution_res?: string;
+}
+
+interface Plan {
+    locale: string;
+    has_enough_context: boolean;
+    thought: string;
+    title?: string;
+    steps: Step[];
+}
+
+export const update_plan = createToolUI({
+    name: "update_plan",
+    description: "展示当前执行计划，等待用户确认",
+    parameters: [],
+    onlyRender: true,
+    render(tool: ToolRenderData<Plan, string>) {
+        const data = tool.getInputRepaired();
+        const plan = data || {
+            locale: "zh-CN",
+            has_enough_context: false,
+            thought: "",
+            steps: [],
+        };
+
+        return (
+            <div className="p-3 bg-white rounded-lg border border-gray-200">
+                <div className="flex items-center gap-1.5  text-gray-700 mb-2 font-bold">
+                    <FileEdit className="w-3.5 h-3.5 text-blue-500" />
+                    <span>执行计划</span>
+                </div>
+
+                <div className="space-y-2">
+                    {plan.title && (
+                        <div className="text-sm">
+                            <span className="text-gray-500">标题：</span>
+                            <span>{plan.title}</span>
+                        </div>
+                    )}
+
+                    {plan.thought && (
+                        <div className="text-sm">
+                            <span className="text-gray-500">思考：</span>
+                            <span className="whitespace-pre-wrap">{plan.thought}</span>
+                        </div>
+                    )}
+
+                    {plan.steps && plan.steps.length > 0 && (
+                        <div className="space-y-1.5">
+                            <div className="text-sm text-gray-500">步骤：</div>
+                            {plan.steps.map((step, index) => (
+                                <div key={index} className="pl-2 border-l-2 border-gray-200">
+                                    <div className="flex items-center gap-1.5 text-sm">
+                                        {step!.step_type === "research" ? <Globe className="w-3.5 h-3.5 text-blue-500" /> : <Brain className="w-3.5 h-3.5 text-purple-500" />}
+                                        <span className="font-medium">{step!.title}</span>
+                                        {step!.need_web_search && <span className="text-xs text-blue-500">[搜索]</span>}
+                                    </div>
+                                    <div className="text-sm text-gray-600 pl-5">{step!.description}</div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    },
+});

package/src/chat/tools/web_search_tool.tsx

@@ -0,0 +1,89 @@
+// 入参 {"query":"Gemini Diffusion vs other diffusion models advantages disadvantages unique features"}
+
+import { createToolUI, ToolRenderData } from "@langgraph-js/sdk";
+import { LinkIcon } from "lucide-react";
+import { useState } from "react";
+
+interface SearchResult {
+    title: string;
+    url: string;
+    description: string;
+    updateTime: string;
+    metadata: {
+        engines: string[];
+    };
+}
+
+interface RenderResponse {
+    engine: string;
+    results: SearchResult[];
+}
+
+interface SearchInput {
+    query: string;
+}
+
+export const web_search_tool = createToolUI({
+    name: "web_search",
+    description:
+        "A powerful web search tool that provides comprehensive, real-time results using search engine. Returns relevant web content with customizable parameters for result count, content type, and domain filtering. Ideal for gathering current information, news, and detailed web content analysis.",
+    parameters: [],
+    onlyRender: true,
+    render(tool: ToolRenderData<SearchInput, RenderResponse[]>) {
+        const data = tool.getInputRepaired();
+        const feedback = tool.getJSONOutputSafe()?.flatMap((i) => i.results) || [];
+        const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
+
+        const toggleExpand = (index: number) => {
+            const newExpanded = new Set(expandedItems);
+            if (newExpanded.has(index)) {
+                newExpanded.delete(index);
+            } else {
+                newExpanded.add(index);
+            }
+            setExpandedItems(newExpanded);
+        };
+
+        const openLink = (url: string) => {
+            window.open(url, "_blank", "noopener,noreferrer");
+        };
+
+        return (
+            <div className="p-4 space-y-4">
+                <div className="text-sm text-gray-500">
+                    Search Query: {data.query}；Get {feedback.length} results
+                </div>
+                <div className="space-y-3 max-h-[300px] overflow-y-auto">
+                    {feedback.map((result, index) => (
+                        <div key={index} className="border rounded-lg p-2 hover:bg-gray-50">
+                            <div className="flex items-center justify-between select-none cursor-pointer" onClick={() => toggleExpand(index)}>
+                                <span className="font-xs flex-1">{result.title}</span>
+                                <div
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        openLink(result.url);
+                                    }}
+                                    className="px-3 py-1 text-sm"
+                                >
+                                    <LinkIcon className="w-4 h-4" />
+                                </div>
+                                <span className="text-gray-400">{expandedItems.has(index) ? "▼" : "▶"}</span>
+                            </div>
+
+                            {expandedItems.has(index) && (
+                                <div className="mt-3 space-y-2">
+                                    <p className="text-sm text-gray-600">{result.description}</p>
+                                    <div className="flex items-center gap-2 text-xs text-gray-500">
+                                        <span>{new Date(result.updateTime).toLocaleDateString()}</span>
+                                        <span>•</span>
+                                        <span>{result.metadata.engines.join(", ")}</span>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    },
+});

package/src/graph/index.tsx

@@ -8,7 +8,7 @@ import { AssistantGraph } from "@langgraph-js/sdk";
 import "./flow.css";
 const nodeTypes = {
     group: ({ data }: { data: any }) => (
-        <div style={{ position: "absolute", bottom: "100%", left: 0 }}>
+        <div className="absolute bottom-full left-0">
             <span>{data.name}</span>
         </div>
     ),
@@ -24,7 +24,6 @@ const transformEdges = (edges: AssistantGraph["edges"], nodes: Node[]): Edge[] =
             id: `${sourceId}=${targetId}`,
             source: sourceId!,
             target: targetId!,
-            // type: edge.conditional ? "smoothstep" : "straight",
             animated: edge.conditional,
             label: edge.data,
             style: {
@@ -84,13 +83,17 @@ const LayoutFlow = () => {
         }
     }, [currentNodeName]);
     return (
-        <div style={{ width: "30%", height: "100%", position: "relative", overflow: "hidden" }}>
+        <div className="w-1/3 h-full relative overflow-hidden border-l">
             <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView className="w-full h-full" nodeTypes={nodeTypes}>
                 <Background />
                 <Controls />
-                <Panel position="top-right">
-                    <button onClick={() => onLayout("TB")}>垂直布局</button>
-                    <button onClick={() => onLayout("LR")}>水平布局</button>
+                <Panel position="top-right" className="flex gap-2">
+                    <button onClick={() => onLayout("TB")} className="px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+                        垂直布局
+                    </button>
+                    <button onClick={() => onLayout("LR")} className="px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+                        水平布局
+                    </button>
                 </Panel>
             </ReactFlow>
         </div>

package/src/index.ts

@@ -1 +1,2 @@
+import "virtual:uno.css";
 export { default as Chat } from "./chat/Chat";