@langgraph-js/sdk 4.2.0 → 4.3.1

package/dist/History.js

@@ -191,7 +191,7 @@ export class History {
             throw new Error("Agent name is required. Please call init() first or provide agentName.");
         }
         const threads = await this.listRemoteSessions({
-            limit: options.limit || 100,
+            limit: options.limit || 10,
             sortBy: "updated_at",
             sortOrder: "desc",
         });

package/dist/react/ChatContext.js

@@ -51,14 +51,7 @@ export const ChatProvider = ({ children, defaultAgent = "", apiUrl = "http://loc
             return;
         }
         initializedRef.current = true;
-        unionStore
-            .initClient()
-            .then((res) => {
-            if (unionStore.showHistory) {
-                unionStore.refreshHistoryList();
-            }
-        })
-            .catch((err) => {
+        unionStore.initClient().catch((err) => {
             console.error(err);
             if (onInitErrorRef.current) {
                 onInitErrorRef.current(err, unionStore.currentAgent);

package/dist/solid/ChatContext.d.ts

@@ -0,0 +1,100 @@
+import { type JSX, Accessor } from "solid-js";
+import { ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
+import { PreinitializedWritableAtom, StoreValue } from "nanostores";
+export declare const useChat: () => UnionStoreSolid<{
+    data: {
+        artifacts: PreinitializedWritableAtom<import("../index.js").ComposedArtifact[]> & object;
+        currentArtifactId: PreinitializedWritableAtom<[string, string] | null> & object;
+        showArtifact: PreinitializedWritableAtom<boolean> & object;
+        client: PreinitializedWritableAtom<import("../LangGraphClient.js").LangGraphClient<unknown> | null> & object;
+        history: PreinitializedWritableAtom<import("../History.js").History | null> & object;
+        sessions: PreinitializedWritableAtom<import("../History.js").SessionInfo[]> & object;
+        renderMessages: PreinitializedWritableAtom<import("../LangGraphClient.js").RenderMessage[]> & object;
+        userInput: PreinitializedWritableAtom<string> & object;
+        loading: PreinitializedWritableAtom<boolean> & object;
+        inChatError: PreinitializedWritableAtom<string | null> & object;
+        currentAgent: PreinitializedWritableAtom<string> & object;
+        currentChatId: PreinitializedWritableAtom<string | null> & object;
+        currentNodeName: PreinitializedWritableAtom<string> & object;
+        interruptData: PreinitializedWritableAtom<import("../humanInTheLoop.js").InterruptData | null> & object;
+        isInterrupted: PreinitializedWritableAtom<boolean> & object;
+        tools: PreinitializedWritableAtom<import("../index.js").UnionTool<any, Object, any>[]> & object;
+        collapsedTools: PreinitializedWritableAtom<string[]> & object;
+        showGraph: PreinitializedWritableAtom<boolean> & object;
+        graphVisualize: PreinitializedWritableAtom<import("@langchain/langgraph-sdk").AssistantGraph | null> & object;
+        showHistory: PreinitializedWritableAtom<boolean> & object;
+        historyList: PreinitializedWritableAtom<import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>[]> & object;
+    };
+    mutations: {
+        setCurrentArtifactById: (id: string, tool_id: string) => void;
+        setShowArtifact: (show: boolean) => void;
+        initClient: () => Promise<import("../History.js").History>;
+        getClient: () => import("../LangGraphClient.js").LangGraphClient<unknown> | null;
+        getHistory: () => import("../History.js").History | null;
+        activateSession: (sessionId: string) => Promise<void>;
+        createNewSession: () => Promise<void>;
+        refreshSessionList: () => Promise<void>;
+        refreshHistoryList: () => Promise<void>;
+        sendMessage: (message?: import("@langchain/langgraph-sdk").Message[], extraData?: import("../LangGraphClient.js").SendMessageOptions, withoutCheck?: boolean, isResume?: boolean) => Promise<void>;
+        stopGeneration: () => void;
+        setUserInput: (input: string) => void;
+        revertChatTo(messageId: string, resend?: boolean, sendOptions?: import("../LangGraphClient.js").SendMessageOptions & import("../time-travel/index.js").RevertChatToOptions): Promise<void>;
+        refreshTools: () => Promise<void>;
+        setTools(new_tools: import("../index.js").UnionTool<any>[]): void;
+        toggleToolCollapse: (toolId: string) => void;
+        getToolUIRender: (tool_name: string) => ((message: import("../LangGraphClient.js").RenderMessage) => Object) | null;
+        isFELocking: () => boolean | undefined;
+        toggleHistoryVisible: () => void;
+        toggleGraphVisible(): void;
+        refreshGraph: () => Promise<void>;
+        setCurrentAgent(agent: string): Promise<import("../History.js").History>;
+        resumeFromInterrupt(data: any): Promise<void>;
+        addToHistory: (thread: import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>) => void;
+        createNewChat: () => Promise<void>;
+        toHistoryChat: (thread: import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>) => Promise<void>;
+        deleteHistoryChat(thread: import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>): Promise<void>;
+    };
+}>;
+interface ChatProviderProps {
+    children: JSX.Element;
+    defaultAgent?: string;
+    apiUrl?: string;
+    defaultHeaders?: Record<string, string>;
+    withCredentials?: boolean;
+    showHistory?: boolean;
+    showGraph?: boolean;
+    fallbackToAvailableAssistants?: boolean;
+    /** 初始化时是否自动激活最近的历史会话（默认 false，创建新会话） */
+    autoRestoreLastSession?: boolean;
+    onInitError?: (error: any, currentAgent: string) => void;
+    client?: ILangGraphClient;
+    legacyMode?: boolean;
+}
+/**
+ * @zh UnionStore 类型用于合并 store 的 data 和 mutations，使其可以直接访问。
+ * @en The UnionStore type is used to merge the data and mutations of a store, allowing direct access.
+ */
+export type UnionStoreSolid<T extends {
+    data: Record<string, PreinitializedWritableAtom<any>>;
+    mutations: Record<string, any>;
+}> = {
+    [k in keyof T["data"]]: Accessor<StoreValue<T["data"][k]>>;
+} & T["mutations"];
+/**
+ * @zh useUnionStore Hook 用于将 nanostores 的 store 结构转换为更易于在 UI 组件中使用的扁平结构。
+ * @en The useUnionStore Hook is used to transform the nanostores store structure into a flatter structure that is easier to use in UI components.
+ */
+export declare const useUnionStoreSolid: <T extends {
+    data: Record<string, any>;
+    mutations: Record<string, any>;
+}>(store: T, useStore: (store: PreinitializedWritableAtom<any>) => Accessor<any>) => UnionStoreSolid<T>;
+export declare const ChatProvider: (props: ChatProviderProps) => JSX.Element;
+export {};

package/dist/solid/ChatContext.js

@@ -0,0 +1,77 @@
+import { createContext, useContext, createMemo, onMount, createComponent } from "solid-js";
+import { createChatStore } from "../ui-store/index.js";
+import { useStore } from "@nanostores/solid";
+const ChatContext = createContext(undefined);
+export const useChat = () => {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+/**
+ * @zh useUnionStore Hook 用于将 nanostores 的 store 结构转换为更易于在 UI 组件中使用的扁平结构。
+ * @en The useUnionStore Hook is used to transform the nanostores store structure into a flatter structure that is easier to use in UI components.
+ */
+export const useUnionStoreSolid = (store, useStore) => {
+    const data = Object.fromEntries(Object.entries(store.data).map(([key, value]) => {
+        return [key, useStore(value)];
+    }));
+    return {
+        ...data,
+        ...store.mutations,
+    };
+};
+export const ChatProvider = (props) => {
+    // 使用 createMemo 稳定 defaultHeaders 的引用
+    const stableHeaders = createMemo(() => props.defaultHeaders || {});
+    // 使用 createMemo 创建 fetch 函数
+    const F = createMemo(() => props.withCredentials
+        ? (url, options) => {
+            options.credentials = "include";
+            return fetch(url, options);
+        }
+        : fetch);
+    const store = createMemo(() => {
+        const config = {
+            apiUrl: props.apiUrl || "http://localhost:8123",
+            defaultHeaders: stableHeaders(),
+            callerOptions: {
+                fetch: F(),
+                maxRetries: 1,
+            },
+            legacyMode: props.legacyMode || false,
+        };
+        /** @ts-ignore */
+        if (props.client)
+            config.client = props.client;
+        return createChatStore(props.defaultAgent || "", config, {
+            showHistory: props.showHistory || false,
+            showGraph: props.showGraph || false,
+            fallbackToAvailableAssistants: props.fallbackToAvailableAssistants || false,
+            autoRestoreLastSession: props.autoRestoreLastSession || false,
+        });
+    });
+    const unionStore = useUnionStoreSolid(store(), useStore);
+    // 初始化标志
+    let initialized = false;
+    onMount(() => {
+        if (initialized) {
+            return;
+        }
+        initialized = true;
+        unionStore.initClient().catch((err) => {
+            console.error(err);
+            if (props.onInitError) {
+                props.onInitError(err, unionStore.currentAgent());
+            }
+        });
+    });
+    // 使用 createComponent 创建 Provider 组件
+    return createComponent(ChatContext.Provider, {
+        value: unionStore,
+        get children() {
+            return props.children;
+        },
+    });
+};

package/dist/solid/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/dist/solid/index.js

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/dist/tool/createTool.d.ts

@@ -1,5 +1,4 @@
 import { z, ZodRawShape } from "zod";
-import { Action, Parameter } from "./copilotkit-actions.js";
 import { Message } from "@langchain/langgraph-sdk";
 import { ToolRenderData } from "./ToolUI.js";
 import { HumanInTheLoopDecision, InterruptResponse as HumanInTheLoopResponse } from "../humanInTheLoop.js";
@@ -33,16 +32,8 @@ export declare const createTool: <Args extends ZodRawShape>(tool: UnionTool<Args
  * create Type Safe Tool with zod and UI Render Feature
  */
 export declare const createUITool: <Args extends ZodRawShape, Child extends Object = {}>(tool: UnionTool<Args, Child>) => UnionTool<Args, Child>;
-/**
- * 提供一种兼容 copilotkit 的定义方式，简化定义形式
- * 来自 copilotkit 的 frontend action
- */
-export declare const createFETool: <const T extends Parameter[], Args extends ZodRawShape, Child extends Object = {}>(tool: Action<T> & {
-    allowAgent?: string[];
-    allowGraph?: string[];
-    render?: (tool: ToolRenderData<any, any>) => Child;
-    onlyRender?: boolean;
-}) => UnionTool<Args>;
+export declare const createRenderUITool: <Args extends ZodRawShape, Child extends Object = {}>(tool: UnionTool<Args, Child>) => UnionTool<Args, Child>;
+export declare const createInteractiveUITool: <Args extends ZodRawShape, Child extends Object = {}>(tool: UnionTool<Args, Child>) => UnionTool<Args, Child>;
 export declare const createJSONDefineTool: <Args extends ZodRawShape>(tool: UnionTool<Args>) => {
     name: string;
     description: string;
@@ -150,31 +141,3 @@ export declare const createJSONDefineTool: <Args extends ZodRawShape>(tool: Unio
         } | undefined;
     });
 };
-export declare const createMCPTool: <Args extends ZodRawShape>(tool: UnionTool<Args>) => (string | Args | ((args: z.infer<z.ZodObject<Args>>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-    isError?: undefined;
-} | {
-    content: HumanInTheLoopDecision | HumanInTheLoopResponse | {
-        type: "text";
-        text: string;
-    }[] | undefined;
-    isError?: undefined;
-} | {
-    content: {
-        type: string;
-        text: string;
-    }[];
-    isError: boolean;
-}>))[];
-/**
- * @deprecated Use createUITool instead
- */
-export declare const createToolUI: <const T extends Parameter[], Args extends ZodRawShape, Child extends Object = {}>(tool: Action<T> & {
-    allowAgent?: string[];
-    allowGraph?: string[];
-    render?: (tool: ToolRenderData<any, any>) => Child;
-    onlyRender?: boolean;
-}) => UnionTool<Args>;

package/dist/tool/createTool.js

@@ -1,6 +1,6 @@
-import { actionParametersToJsonSchema, convertJsonSchemaToZodRawShape } from "./utils.js";
 import { z } from "zod";
 import { zodToJsonSchema } from "zod-to-json-schema";
+import { ToolManager } from "../ToolManager.js";
 /** 用于格式校验 */
 export const createTool = (tool) => {
     return tool;
@@ -30,33 +30,28 @@ export const createUITool = (tool) => {
         execute,
     };
 };
-/**
- * 提供一种兼容 copilotkit 的定义方式，简化定义形式
- * 来自 copilotkit 的 frontend action
- */
-export const createFETool = (tool) => {
-    return {
-        render: tool.render,
-        onlyRender: tool.onlyRender,
-        name: tool.name,
-        description: tool.description || "",
-        parameters: convertJsonSchemaToZodRawShape(actionParametersToJsonSchema(tool.parameters || [])),
-        returnDirect: tool.returnDirect,
-        callbackMessage: tool.callbackMessage,
-        allowAgent: tool.allowAgent,
-        allowGraph: tool.allowGraph,
-        async execute(args, context) {
+export const createRenderUITool = createUITool;
+export const createInteractiveUITool = (tool) => {
+    const execute = tool.execute ||
+        (async (args, context) => {
             try {
                 const result = await tool.handler?.(args, context);
                 if (typeof result === "string") {
                     return [{ type: "text", text: result }];
                 }
+                else if (result.decisions) {
+                    return result;
+                }
                 return [{ type: "text", text: JSON.stringify(result) }];
             }
             catch (error) {
                 return [{ type: "text", text: `Error: ${error}` }];
             }
-        },
+        });
+    return {
+        ...tool,
+        handler: ToolManager.waitForUIDone,
+        execute,
     };
 };
 ///======= UnionTool 到 各种工具的辅助函数
@@ -67,28 +62,3 @@ export const createJSONDefineTool = (tool) => {
         parameters: tool.isPureParams ? tool.parameters : zodToJsonSchema(z.object(tool.parameters)),
     };
 };
-export const createMCPTool = (tool) => {
-    return [
-        tool.name,
-        tool.description,
-        tool.parameters,
-        async (args) => {
-            try {
-                const result = await tool.execute?.(args);
-                if (typeof result === "string") {
-                    return { content: [{ type: "text", text: result }] };
-                }
-                return {
-                    content: result,
-                };
-            }
-            catch (error) {
-                return { content: [{ type: "text", text: `Error: ${error}` }], isError: true };
-            }
-        },
-    ];
-};
-/**
- * @deprecated Use createUITool instead
- */
-export const createToolUI = createFETool;

package/dist/ui-store/createChatStore.js

@@ -100,12 +100,14 @@ export const createChatStore = (initClientName, config, context = {}) => {
         await historyManager.init(currentAgent.get(), { fallbackToAvailableAssistants: context.fallbackToAvailableAssistants });
         history.set(historyManager);
         // 同步远程会话列表
-        await refreshSessionList();
         // 根据配置决定初始化行为
-        const syncedSessions = sessions.get();
-        if (context.autoRestoreLastSession && syncedSessions.length > 0) {
-            // 自动激活最近的历史会话
-            await activateSession(syncedSessions[0].sessionId);
+        if (context.autoRestoreLastSession) {
+            await refreshSessionList();
+            if (sessions.get().length > 0) {
+                const syncedSessions = sessions.get();
+                // 自动激活最近的历史会话
+                await activateSession(syncedSessions[0].sessionId);
+            }
         }
         else {
             // 创建新会话
@@ -118,7 +120,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
         if (!historyManager)
             return;
         try {
-            const syncedSessions = await historyManager.syncFromRemote({ limit: 100 });
+            const syncedSessions = await historyManager.syncFromRemote({ limit: 10 });
             sessions.set(syncedSessions);
             historyList.set(syncedSessions.filter((s) => s.thread).map((s) => s.thread));
         }
@@ -199,6 +201,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
                 interruptData.set(null);
                 isInterrupted.set(false);
             }
+            updateUI(newClient);
         };
         newClient.on("start", onStart);
         newClient.on("thread", onThread);
@@ -274,6 +277,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
             return;
         inChatError.set(null);
         try {
+            loading.set(true);
             await c.sendMessage(message || userInput.get(), extraData);
         }
         catch (e) {

package/dist/vue/ChatContext.js

@@ -58,14 +58,7 @@ export const useChatProvider = (props) => {
     provide(ChatContextKey, unionStore);
     // 初始化客户端
     onMounted(() => {
-        unionStore
-            .initClient()
-            .then(() => {
-            if (unionStore.showHistory) {
-                unionStore.refreshHistoryList();
-            }
-        })
-            .catch((err) => {
+        unionStore.initClient().catch((err) => {
             console.error(err);
             if (props.onInitError) {
                 props.onInitError(err, unionStore.currentAgent.value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",
@@ -17,6 +17,10 @@
       "import": "./dist/vue/index.js",
       "types": "./dist/vue/index.d.ts"
     },
+    "./solid": {
+      "import": "./dist/solid/index.js",
+      "types": "./dist/solid/index.d.ts"
+    },
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
@@ -31,7 +35,8 @@
     "agents",
     "langchain",
     "react",
-    "vue"
+    "vue",
+    "solid-js"
   ],
   "author": "LangGraph Team",
   "license": "Apache-2.0",
@@ -56,8 +61,10 @@
   },
   "peerDependencies": {
     "@nanostores/react": "^1.0.0",
+    "@nanostores/solid": "^1.0.0",
     "@nanostores/vue": "^1.0.0",
     "react": "^19||^18",
+    "solid-js": "^1.0.0",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -67,6 +74,12 @@
     "@nanostores/vue": {
       "optional": true
     },
+    "@nanostores/solid": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },

package/src/History.ts

@@ -255,7 +255,7 @@ export class History {
         }
 
         const threads = await this.listRemoteSessions({
-            limit: options.limit || 100,
+            limit: options.limit || 10,
             sortBy: "updated_at",
             sortOrder: "desc",
         });

package/src/artifacts/README.md

@@ -0,0 +1,71 @@
+# ArtifactViewer 实现说明
+
+`ArtifactViewer` 组件主要负责与 `langgraph-js` SDK 的状态同步，并集成 `ai-artifacts` Web Component 来展示 AI 生成的内容。
+
+## 核心功能
+
+1.  **状态同步**: 监听 `useChat` hook 中的 `artifacts` 变化。
+2.  **沙箱渲染**: 使用 `<ai-artifacts>` Web Component 加载远程渲染引擎。
+3.  **交互反馈**: 通过 `eventCenter` 捕获沙箱内的 `sendBackToAI` 事件，支持 Human-in-the-loop 流程。
+
+## 核心实现步骤
+
+### 1. 同步 Artifacts 状态
+
+利用 `useEffect` 监听 SDK 的 `artifacts` 和 `loading` 状态。当数据更新且加载完成后，使用 `setArtifactStore` 将数据推送到 `ai-artifacts` 的全局存储中。
+
+```typescript
+useEffect(() => {
+    if (loading) return;
+    setArtifactStore({
+        artifacts: { default: artifacts as ArtifactType[] },
+    });
+}, [artifacts, loading]);
+```
+
+### 2. 集成渲染引擎 (Web Component)
+
+在 JSX 中使用 `ai-artifacts` 标签。需要提供 `src` (渲染引擎地址)、`store-id` (默认为 `default`) 以及当前选中的 `group-id` 和 `version-id`。
+
+```tsx
+<ai-artifacts src={artifactsUrl} store-id="default" group-id={currentArtifactId?.[0] || ""} version-id={currentArtifactId?.[1] || ""} className="w-full min-h-[400px]"></ai-artifacts>
+```
+
+### 3. 事件处理 (Human-in-the-loop)
+
+监听来自渲染沙箱的 `sendBackToAI` 事件。这通常发生在用户点击“修复”或“修改”按钮时，将相关的错误信息或修改建议传回给 AI。
+
+```typescript
+useEffect(() => {
+    const handleSendBackToAI = (data: any) => {
+        onSendBackToAI(data);
+    };
+    eventCenter.on("sendBackToAI", handleSendBackToAI);
+    return () => {
+        eventCenter.off("sendBackToAI", handleSendBackToAI);
+    };
+}, [onSendBackToAI]);
+```
+
+### 4. TypeScript 声明
+
+为了让 React 识别自定义的 Web Component 标签，需要添加类型声明：
+
+```typescript
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ai-artifacts": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                src?: string;
+                "store-id"?: string;
+                "group-id"?: string;
+                "version-id"?: string;
+            };
+        }
+    }
+}
+```
+
+## 配置项
+
+- `artifactsUrl`: 渲染沙箱的 URL 地址，建议通过 `localStorage` 或环境变量进行配置，以便灵活切换（例如：`https://langgraph-artifacts.netlify.app/`）。

package/src/react/ChatContext.ts

@@ -91,19 +91,12 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
         }
         initializedRef.current = true;
 
-        unionStore
-            .initClient()
-            .then((res) => {
-                if (unionStore.showHistory) {
-                    unionStore.refreshHistoryList();
-                }
-            })
-            .catch((err) => {
-                console.error(err);
-                if (onInitErrorRef.current) {
-                    onInitErrorRef.current(err, unionStore.currentAgent);
-                }
-            });
+        unionStore.initClient().catch((err) => {
+            console.error(err);
+            if (onInitErrorRef.current) {
+                onInitErrorRef.current(err, unionStore.currentAgent);
+            }
+        });
     }, [unionStore]);
 
     return createElement(ChatContext.Provider, { value: unionStore }, children);

package/src/solid/ChatContext.ts

@@ -0,0 +1,119 @@
+import { createContext, useContext, createMemo, onMount, type JSX, type Component, createComponent, Accessor } from "solid-js";
+import { createChatStore, UnionStore } from "../ui-store/index.js";
+import { useStore } from "@nanostores/solid";
+import { ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
+import { PreinitializedWritableAtom, StoreValue } from "nanostores";
+
+const ChatContext = createContext<UnionStoreSolid<ReturnType<typeof createChatStore>> | 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: JSX.Element;
+    defaultAgent?: string;
+    apiUrl?: string;
+    defaultHeaders?: Record<string, string>;
+    withCredentials?: boolean;
+    showHistory?: boolean;
+    showGraph?: boolean;
+    fallbackToAvailableAssistants?: boolean;
+    /** 初始化时是否自动激活最近的历史会话（默认 false，创建新会话） */
+    autoRestoreLastSession?: boolean;
+    onInitError?: (error: any, currentAgent: string) => void;
+    client?: ILangGraphClient;
+    legacyMode?: boolean;
+}
+/**
+ * @zh UnionStore 类型用于合并 store 的 data 和 mutations，使其可以直接访问。
+ * @en The UnionStore type is used to merge the data and mutations of a store, allowing direct access.
+ */
+export type UnionStoreSolid<T extends { data: Record<string, PreinitializedWritableAtom<any>>; mutations: Record<string, any> }> = {
+    [k in keyof T["data"]]: Accessor<StoreValue<T["data"][k]>>;
+} & T["mutations"];
+
+/**
+ * @zh useUnionStore Hook 用于将 nanostores 的 store 结构转换为更易于在 UI 组件中使用的扁平结构。
+ * @en The useUnionStore Hook is used to transform the nanostores store structure into a flatter structure that is easier to use in UI components.
+ */
+export const useUnionStoreSolid = <T extends { data: Record<string, any>; mutations: Record<string, any> }>(
+    store: T,
+    useStore: (store: PreinitializedWritableAtom<any>) => Accessor<any>
+): UnionStoreSolid<T> => {
+    const data: any = Object.fromEntries(
+        Object.entries(store.data as any).map(([key, value]) => {
+            return [key, useStore(value as any)];
+        })
+    );
+
+    return {
+        ...data,
+        ...store.mutations,
+    };
+};
+
+export const ChatProvider = (props: ChatProviderProps) => {
+    // 使用 createMemo 稳定 defaultHeaders 的引用
+    const stableHeaders = createMemo(() => props.defaultHeaders || {});
+
+    // 使用 createMemo 创建 fetch 函数
+    const F = createMemo(() =>
+        props.withCredentials
+            ? (url: string, options: RequestInit) => {
+                  options.credentials = "include";
+                  return fetch(url, options);
+              }
+            : fetch
+    );
+
+    const store = createMemo(() => {
+        const config = {
+            apiUrl: props.apiUrl || "http://localhost:8123",
+            defaultHeaders: stableHeaders(),
+            callerOptions: {
+                fetch: F(),
+                maxRetries: 1,
+            },
+            legacyMode: props.legacyMode || false,
+        };
+        /** @ts-ignore */
+        if (props.client) config.client = props.client;
+        return createChatStore(props.defaultAgent || "", config, {
+            showHistory: props.showHistory || false,
+            showGraph: props.showGraph || false,
+            fallbackToAvailableAssistants: props.fallbackToAvailableAssistants || false,
+            autoRestoreLastSession: props.autoRestoreLastSession || false,
+        });
+    });
+
+    const unionStore = useUnionStoreSolid(store(), useStore);
+
+    // 初始化标志
+    let initialized = false;
+
+    onMount(() => {
+        if (initialized) {
+            return;
+        }
+        initialized = true;
+        unionStore.initClient().catch((err) => {
+            console.error(err);
+            if (props.onInitError) {
+                props.onInitError(err, unionStore.currentAgent());
+            }
+        });
+    });
+
+    // 使用 createComponent 创建 Provider 组件
+    return createComponent(ChatContext.Provider, {
+        value: unionStore,
+        get children() {
+            return props.children;
+        },
+    });
+};

package/src/solid/index.ts

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/src/tool/createTool.ts

@@ -5,6 +5,7 @@ import { zodToJsonSchema } from "zod-to-json-schema";
 import { Message } from "@langchain/langgraph-sdk";
 import { ToolRenderData } from "./ToolUI.js";
 import { HumanInTheLoopDecision, InterruptResponse as HumanInTheLoopResponse } from "../humanInTheLoop.js";
+import { ToolManager } from "../ToolManager.js";
 
 export interface UnionTool<Args extends ZodRawShape, Child extends Object = Object, ResponseType = any> {
     name: string;
@@ -58,40 +59,27 @@ export const createUITool = <Args extends ZodRawShape, Child extends Object = {}
         execute,
     };
 };
-
-/**
- * 提供一种兼容 copilotkit 的定义方式，简化定义形式
- * 来自 copilotkit 的 frontend action
- */
-export const createFETool = <const T extends Parameter[], Args extends ZodRawShape, Child extends Object = {}>(
-    tool: Action<T> & {
-        allowAgent?: string[];
-        allowGraph?: string[];
-        render?: (tool: ToolRenderData<any, any>) => Child;
-        onlyRender?: boolean;
-    }
-): UnionTool<Args> => {
-    return {
-        render: tool.render,
-        onlyRender: tool.onlyRender,
-        name: tool.name,
-        description: tool.description || "",
-        parameters: convertJsonSchemaToZodRawShape(actionParametersToJsonSchema(tool.parameters || [])) as any,
-        returnDirect: tool.returnDirect,
-        callbackMessage: tool.callbackMessage,
-        allowAgent: tool.allowAgent,
-        allowGraph: tool.allowGraph,
-        async execute(args, context) {
+export const createRenderUITool = createUITool;
+export const createInteractiveUITool = <Args extends ZodRawShape, Child extends Object = {}>(tool: UnionTool<Args, Child>): UnionTool<Args, Child> => {
+    const execute =
+        tool.execute ||
+        (async (args, context) => {
             try {
-                const result = await tool.handler?.(args as any, context);
+                const result = await tool.handler?.(args, context);
                 if (typeof result === "string") {
                     return [{ type: "text", text: result }];
+                } else if (result.decisions) {
+                    return result;
                 }
                 return [{ type: "text", text: JSON.stringify(result) }];
             } catch (error) {
                 return [{ type: "text", text: `Error: ${error}` }];
             }
-        },
+        });
+    return {
+        ...tool,
+        handler: ToolManager.waitForUIDone,
+        execute,
     };
 };
 
@@ -103,29 +91,3 @@ export const createJSONDefineTool = <Args extends ZodRawShape>(tool: UnionTool<A
         parameters: tool.isPureParams ? tool.parameters : zodToJsonSchema(z.object(tool.parameters)),
     };
 };
-
-export const createMCPTool = <Args extends ZodRawShape>(tool: UnionTool<Args>) => {
-    return [
-        tool.name,
-        tool.description,
-        tool.parameters,
-        async (args: z.infer<z.ZodObject<Args>>) => {
-            try {
-                const result = await tool.execute?.(args);
-                if (typeof result === "string") {
-                    return { content: [{ type: "text", text: result }] };
-                }
-                return {
-                    content: result,
-                };
-            } catch (error) {
-                return { content: [{ type: "text", text: `Error: ${error}` }], isError: true };
-            }
-        },
-    ];
-};
-
-/**
- * @deprecated Use createUITool instead
- */
-export const createToolUI = createFETool;

package/src/ui-store/createChatStore.ts

@@ -134,13 +134,15 @@ export const createChatStore = (initClientName: string, config: Partial<LangGrap
         history.set(historyManager);
 
         // 同步远程会话列表
-        await refreshSessionList();
 
         // 根据配置决定初始化行为
-        const syncedSessions = sessions.get();
-        if (context.autoRestoreLastSession && syncedSessions.length > 0) {
-            // 自动激活最近的历史会话
-            await activateSession(syncedSessions[0].sessionId);
+        if (context.autoRestoreLastSession) {
+            await refreshSessionList();
+            if (sessions.get().length > 0) {
+                const syncedSessions = sessions.get();
+                // 自动激活最近的历史会话
+                await activateSession(syncedSessions[0].sessionId);
+            }
         } else {
             // 创建新会话
             await createNewSession();
@@ -154,7 +156,7 @@ export const createChatStore = (initClientName: string, config: Partial<LangGrap
         if (!historyManager) return;
 
         try {
-            const syncedSessions = await historyManager.syncFromRemote({ limit: 100 });
+            const syncedSessions = await historyManager.syncFromRemote({ limit: 10 });
             sessions.set(syncedSessions);
             historyList.set(syncedSessions.filter((s) => s.thread).map((s) => s.thread!));
         } catch (error) {
@@ -243,6 +245,7 @@ export const createChatStore = (initClientName: string, config: Partial<LangGrap
                 interruptData.set(null);
                 isInterrupted.set(false);
             }
+            updateUI(newClient);
         };
 
         newClient.on("start", onStart);
@@ -331,6 +334,7 @@ export const createChatStore = (initClientName: string, config: Partial<LangGrap
 
         inChatError.set(null);
         try {
+            loading.set(true);
             await c.sendMessage(message || userInput.get(), extraData);
         } catch (e) {
             const isThreadRunning = (e as Error).message.includes("422");

package/src/vue/ChatContext.ts

@@ -101,19 +101,12 @@ export const useChatProvider = (props: ChatProviderProps) => {
 
     // 初始化客户端
     onMounted(() => {
-        unionStore
-            .initClient()
-            .then(() => {
-                if (unionStore.showHistory) {
-                    unionStore.refreshHistoryList();
-                }
-            })
-            .catch((err) => {
-                console.error(err);
-                if (props.onInitError) {
-                    props.onInitError(err, unionStore.currentAgent.value);
-                }
-            });
+        unionStore.initClient().catch((err) => {
+            console.error(err);
+            if (props.onInitError) {
+                props.onInitError(err, unionStore.currentAgent.value);
+            }
+        });
     });
 
     return {