@langgraph-js/sdk 3.0.3 → 3.1.0

package/dist/LangGraphClient.js

@@ -100,6 +100,7 @@ export class LangGraphClient extends EventEmitter {
     async listThreads() {
         return this.threads.search({
             sortOrder: "desc",
+            sortBy: "updated_at",
         });
     }
     async deleteThread(threadId) {

package/dist/artifacts/index.d.ts

@@ -0,0 +1,29 @@
+import { PreinitializedWritableAtom } from "nanostores";
+export * from "./types.js";
+import { LangGraphClient, RenderMessage } from "../LangGraphClient.js";
+export interface ComposedArtifact {
+    id: string;
+    filename: string;
+    filetype: string;
+    versions: Artifact[];
+}
+export interface Artifact {
+    group_id: string;
+    id: string;
+    code: string;
+    filename: string;
+    filetype: string;
+    version: number;
+    is_done: boolean;
+}
+export declare const useArtifacts: (renderMessages: PreinitializedWritableAtom<RenderMessage[]>, client: PreinitializedWritableAtom<LangGraphClient<unknown> | null>) => {
+    data: {
+        artifacts: PreinitializedWritableAtom<ComposedArtifact[]> & object;
+        currentArtifactId: PreinitializedWritableAtom<[string, string] | null> & object;
+        showArtifact: PreinitializedWritableAtom<boolean> & object;
+    };
+    mutation: {
+        setCurrentArtifactById: (id: string, tool_id: string) => void;
+        setShowArtifact: (show: boolean) => void;
+    };
+};

package/dist/artifacts/index.js

@@ -0,0 +1,98 @@
+import { atom, effect } from "nanostores";
+export * from "./types.js";
+import { ToolRenderData } from "../tool/ToolUI.js";
+// 创建 artifacts computed store
+const extractArtifactsFromMessages = (renderMessages, client) => {
+    const files = new Map();
+    for (const message of renderMessages) {
+        if (message.type === "tool" && message.name === "create_artifacts") {
+            const tool = new ToolRenderData(message, client);
+            const command = tool.getInputRepaired();
+            if (!command.id)
+                continue;
+            command.tool_id = tool.message.id;
+            command.is_done = tool.state === "done";
+            files.set(command.id, [...(files.get(command.id) || []), command]);
+        }
+    }
+    const composedFiles = new Map();
+    // 遍历每个 ID 的命令序列，生成对应的 artifact 版本
+    for (const [id, commands] of files) {
+        const artifacts = [];
+        let currentContent = "";
+        let currentFilename = "";
+        let currentFiletype = "";
+        let version = 1;
+        // 按命令顺序处理每个操作
+        for (const command of commands) {
+            switch (command.command) {
+                case "create":
+                    // 创建新 artifact，直接使用 content
+                    currentContent = command.content;
+                    currentFilename = command.title || `artifact-${id}`;
+                    currentFiletype = command.type || command.language;
+                    break;
+                case "update":
+                    // 更新现有内容，使用 old_str 和 new_str 进行替换
+                    if (command.old_str && command.new_str) {
+                        currentContent = currentContent.replace(command.old_str, command.new_str);
+                    }
+                    else if (command.content) {
+                        // 如果没有 old_str/new_str，则直接使用 content 覆盖
+                        currentContent = command.content;
+                    }
+                    break;
+                case "rewrite":
+                    currentContent = command.content;
+                    break;
+            }
+            // 创建当前版本的 artifact
+            const artifact = {
+                group_id: id,
+                id: command.tool_id,
+                code: currentContent,
+                filename: currentFilename,
+                filetype: currentFiletype,
+                version: version,
+                is_done: command.is_done,
+            };
+            artifacts.push(artifact);
+            version++;
+        }
+        composedFiles.set(id, artifacts);
+    }
+    return [...composedFiles.values()].map((artifacts) => ({
+        id: artifacts[0].group_id,
+        filename: artifacts[artifacts.length - 1].filename,
+        filetype: artifacts[artifacts.length - 1].filetype,
+        versions: artifacts,
+    }));
+};
+export const useArtifacts = (renderMessages, client) => {
+    // 创建 artifacts store
+    const showArtifact = atom(false);
+    const currentArtifactId = atom(null);
+    const artifacts = atom([]);
+    effect([renderMessages, client], () => {
+        artifacts.set(extractArtifactsFromMessages(renderMessages.get(), client.get()));
+    });
+    const debouncedSetCurrentArtifactById = (id, tool_id) => {
+        const current = currentArtifactId.get();
+        if ((current === null || current === void 0 ? void 0 : current[0]) === id && (current === null || current === void 0 ? void 0 : current[1]) === tool_id) {
+            return;
+        }
+        showArtifact.set(true);
+        currentArtifactId.set([id, tool_id]);
+    };
+    return {
+        data: {
+            artifacts,
+            currentArtifactId,
+            showArtifact,
+        },
+        mutation: {
+            setCurrentArtifactById: debouncedSetCurrentArtifactById,
+            setShowArtifact: (show) => showArtifact.set(show),
+        },
+    };
+};

package/dist/artifacts/types.d.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+export declare const ArtifactCommandSchema: {
+    command: z.ZodEnum<["create", "update", "rewrite"]>;
+    id: z.ZodString;
+    title: z.ZodString;
+    type: z.ZodString;
+    language: z.ZodString;
+    content: z.ZodString;
+    old_str: z.ZodString;
+    new_str: z.ZodString;
+};
+export type ArtifactCommand = z.infer<z.ZodObject<typeof ArtifactCommandSchema>>;

package/dist/artifacts/types.js

@@ -0,0 +1,11 @@
+import { z } from "zod";
+export const ArtifactCommandSchema = {
+    command: z.enum(["create", "update", "rewrite"]).describe("The operation to perform: create new artifact, update existing, or rewrite"),
+    id: z.string().describe("Unique identifier for the artifact"),
+    title: z.string().describe("Human-readable title for the artifact"),
+    type: z.string().describe("MIME type of the artifact content (e.g., 'application/vnd.ant.react')"),
+    language: z.string().describe("Programming language or format of the content"),
+    content: z.string().describe("The actual content to be created or updated. Don't Reply These Code to User, User can see these code in artifacts."),
+    old_str: z.string().describe("The existing content to be replaced (for update operations)"),
+    new_str: z.string().describe("The new content to replace the old content (for update operations)"),
+};

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from "@langchain/langgraph-sdk";
 export * from "./ui-store/index.js";
 export * from "./ToolManager.js";
 export * from "./TestKit.js";
+export * from "./artifacts/index.js";

package/dist/index.js

@@ -5,3 +5,4 @@ export * from "@langchain/langgraph-sdk";
 export * from "./ui-store/index.js";
 export * from "./ToolManager.js";
 export * from "./TestKit.js";
+export * from "./artifacts/index.js";

package/dist/react/ChatContext.d.ts

@@ -2,6 +2,9 @@ import { ReactNode } from "react";
 import { UnionStore } from "../ui-store/index.js";
 export declare const useChat: () => UnionStore<{
     data: {
+        artifacts: import("nanostores").PreinitializedWritableAtom<import("../index.js").ComposedArtifact[]> & object;
+        currentArtifactId: import("nanostores").PreinitializedWritableAtom<[string, string] | null> & object;
+        showArtifact: import("nanostores").PreinitializedWritableAtom<boolean> & object;
         client: import("nanostores").PreinitializedWritableAtom<import("../LangGraphClient.js").LangGraphClient<unknown> | null> & object;
         renderMessages: import("nanostores").PreinitializedWritableAtom<import("../LangGraphClient.js").RenderMessage[]> & object;
         userInput: import("nanostores").PreinitializedWritableAtom<string> & object;
@@ -20,9 +23,12 @@ export declare const useChat: () => UnionStore<{
         tools: import("nanostores").PreinitializedWritableAtom<import("../index.js").UnionTool<any, Object, any>[]> & object;
     };
     mutations: {
+        setCurrentArtifactById: (id: string, tool_id: string) => void;
+        setShowArtifact: (show: boolean) => void;
         refreshTools: () => Promise<void>;
         setTools(new_tools: import("../index.js").UnionTool<any>[]): void;
         isFELocking(): boolean | undefined;
+        getClient(): import("../LangGraphClient.js").LangGraphClient<unknown> | null;
         initClient: () => Promise<import("../LangGraphClient.js").LangGraphClient<unknown>>;
         sendMessage: (message?: import("@langchain/langgraph-sdk").Message[], extraData?: import("../LangGraphClient.js").SendMessageOptions, withoutCheck?: boolean) => Promise<void>;
         stopGeneration: () => void;

package/dist/ui-store/createChatStore.d.ts

@@ -31,6 +31,9 @@ export declare const createChatStore: (initClientName: string, config: Partial<L
     onInit?: (client: LangGraphClient) => void;
 }) => {
     data: {
+        artifacts: import("nanostores").PreinitializedWritableAtom<import("../artifacts/index.js").ComposedArtifact[]> & object;
+        currentArtifactId: import("nanostores").PreinitializedWritableAtom<[string, string] | null> & object;
+        showArtifact: import("nanostores").PreinitializedWritableAtom<boolean> & object;
         client: import("nanostores").PreinitializedWritableAtom<LangGraphClient<unknown> | null> & object;
         renderMessages: import("nanostores").PreinitializedWritableAtom<RenderMessage[]> & object;
         userInput: import("nanostores").PreinitializedWritableAtom<string> & object;
@@ -49,9 +52,12 @@ export declare const createChatStore: (initClientName: string, config: Partial<L
         tools: import("nanostores").PreinitializedWritableAtom<UnionTool<any, Object, any>[]> & object;
     };
     mutations: {
+        setCurrentArtifactById: (id: string, tool_id: string) => void;
+        setShowArtifact: (show: boolean) => void;
         refreshTools: () => Promise<void>;
         setTools(new_tools: UnionTool<any>[]): void;
         isFELocking(): boolean | undefined;
+        getClient(): LangGraphClient<unknown> | null;
         initClient: () => Promise<LangGraphClient<unknown>>;
         sendMessage: (message?: Message[], extraData?: SendMessageOptions, withoutCheck?: boolean) => Promise<void>;
         stopGeneration: () => void;

package/dist/ui-store/createChatStore.js

@@ -3,6 +3,7 @@ import { LangGraphClient } from "../LangGraphClient.js";
 import { debounce } from "ts-debounce";
 import { ToolRenderData } from "../tool/ToolUI.js";
 import { createLangGraphServerClient } from "../client/LanggraphServer.js";
+import { useArtifacts } from "../artifacts/index.js";
 /**
  * @zh 格式化日期对象为时间字符串。
  * @en Formats a Date object into a time string.
@@ -238,6 +239,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
         const tool = (_a = toolsDefine.find((i) => i.name === tool_name)) === null || _a === void 0 ? void 0 : _a.render;
         return tool ? (message) => tool(new ToolRenderData(message, client.get())) : null;
     };
+    const artifactHook = useArtifacts(renderMessages, client);
     return {
         data: {
             client,
@@ -254,6 +256,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
             graphVisualize,
             currentNodeName,
             tools,
+            ...artifactHook.data,
         },
         mutations: {
             refreshTools,
@@ -265,6 +268,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
                 var _a;
                 return (_a = client.get()) === null || _a === void 0 ? void 0 : _a.isFELocking(renderMessages.get());
             },
+            getClient() {
+                return client.get();
+            },
             initClient,
             sendMessage,
             stopGeneration,
@@ -346,6 +352,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
                 await refreshHistoryList();
             },
             getToolUIRender,
+            ...artifactHook.mutation,
         },
     };
 };

package/dist/vue/ChatContext.d.ts

@@ -40,6 +40,9 @@ export interface ChatProviderProps {
 export declare const useChatProvider: (props: ChatProviderProps) => {
     unionStore: UnionStoreVue<{
         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;
             renderMessages: PreinitializedWritableAtom<import("../LangGraphClient.js").RenderMessage[]> & object;
             userInput: PreinitializedWritableAtom<string> & object;
@@ -58,9 +61,12 @@ export declare const useChatProvider: (props: ChatProviderProps) => {
             tools: PreinitializedWritableAtom<import("../index.js").UnionTool<any, Object, any>[]> & object;
         };
         mutations: {
+            setCurrentArtifactById: (id: string, tool_id: string) => void;
+            setShowArtifact: (show: boolean) => void;
             refreshTools: () => Promise<void>;
             setTools(new_tools: import("../index.js").UnionTool<any>[]): void;
             isFELocking(): boolean | undefined;
+            getClient(): import("../LangGraphClient.js").LangGraphClient<unknown> | null;
             initClient: () => Promise<import("../LangGraphClient.js").LangGraphClient<unknown>>;
             sendMessage: (message?: import("@langchain/langgraph-sdk").Message[], extraData?: import("../LangGraphClient.js").SendMessageOptions, withoutCheck?: boolean) => Promise<void>;
             stopGeneration: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",

package/src/LangGraphClient.ts

@@ -188,6 +188,7 @@ export class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGrap
     async listThreads() {
         return this.threads.search({
             sortOrder: "desc",
+            sortBy: "updated_at",
         });
     }
     async deleteThread(threadId: string) {

package/src/artifacts/index.ts

@@ -0,0 +1,129 @@
+import { atom, computed, effect, PreinitializedWritableAtom } from "nanostores";
+export * from "./types.js";
+import { ArtifactCommand } from "./types.js";
+import { ToolRenderData } from "../tool/ToolUI.js";
+import { LangGraphClient, RenderMessage } from "../LangGraphClient.js";
+
+export interface ComposedArtifact {
+    id: string;
+    filename: string;
+    filetype: string;
+    versions: Artifact[];
+}
+
+export interface Artifact {
+    group_id: string;
+    id: string;
+    code: string;
+    filename: string;
+    filetype: string;
+    version: number;
+    is_done: boolean;
+}
+
+// 创建 artifacts computed store
+const extractArtifactsFromMessages = (renderMessages: any[], client: any): ComposedArtifact[] => {
+    type MiddleArtifactCommand = ArtifactCommand & {
+        tool_id?: string;
+        is_done?: boolean;
+    };
+    const files = new Map<string, MiddleArtifactCommand[]>();
+    for (const message of renderMessages) {
+        if (message.type === "tool" && message.name === "create_artifacts") {
+            const tool = new ToolRenderData<ArtifactCommand, {}>(message, client!);
+            const command = tool.getInputRepaired() as MiddleArtifactCommand;
+            if (!command.id) continue;
+            command.tool_id = tool.message.id!;
+            command.is_done = tool.state === "done";
+            files.set(command.id, [...(files.get(command.id) || []), command]);
+        }
+    }
+    const composedFiles = new Map<string, Artifact[]>();
+
+    // 遍历每个 ID 的命令序列，生成对应的 artifact 版本
+    for (const [id, commands] of files) {
+        const artifacts: Artifact[] = [];
+        let currentContent = "";
+        let currentFilename = "";
+        let currentFiletype = "";
+        let version = 1;
+
+        // 按命令顺序处理每个操作
+        for (const command of commands) {
+            switch (command.command) {
+                case "create":
+                    // 创建新 artifact，直接使用 content
+                    currentContent = command.content;
+                    currentFilename = command.title || `artifact-${id}`;
+                    currentFiletype = command.type || command.language;
+                    break;
+
+                case "update":
+                    // 更新现有内容，使用 old_str 和 new_str 进行替换
+                    if (command.old_str && command.new_str) {
+                        currentContent = currentContent.replace(command.old_str, command.new_str);
+                    } else if (command.content) {
+                        // 如果没有 old_str/new_str，则直接使用 content 覆盖
+                        currentContent = command.content;
+                    }
+                    break;
+
+                case "rewrite":
+                    currentContent = command.content;
+                    break;
+            }
+
+            // 创建当前版本的 artifact
+            const artifact: Artifact = {
+                group_id: id,
+                id: command.tool_id!,
+                code: currentContent,
+                filename: currentFilename,
+                filetype: currentFiletype,
+                version: version,
+                is_done: command.is_done!,
+            };
+
+            artifacts.push(artifact);
+            version++;
+        }
+
+        composedFiles.set(id, artifacts);
+    }
+
+    return [...composedFiles.values()].map((artifacts) => ({
+        id: artifacts[0].group_id,
+        filename: artifacts[artifacts.length - 1].filename,
+        filetype: artifacts[artifacts.length - 1].filetype,
+        versions: artifacts,
+    }));
+};
+export const useArtifacts = (renderMessages: PreinitializedWritableAtom<RenderMessage[]>, client: PreinitializedWritableAtom<LangGraphClient<unknown> | null>) => {
+    // 创建 artifacts store
+    const showArtifact = atom<boolean>(false);
+    const currentArtifactId = atom<[string, string] | null>(null);
+    const artifacts = atom<ComposedArtifact[]>([]);
+
+    effect([renderMessages, client], () => {
+        artifacts.set(extractArtifactsFromMessages(renderMessages.get(), client.get()));
+    });
+    const debouncedSetCurrentArtifactById = (id: string, tool_id: string) => {
+        const current = currentArtifactId.get();
+        if (current?.[0] === id && current?.[1] === tool_id) {
+            return;
+        }
+        showArtifact.set(true);
+        currentArtifactId.set([id, tool_id]);
+    };
+    return {
+        data: {
+            artifacts,
+            currentArtifactId,
+            showArtifact,
+        },
+        mutation: {
+            setCurrentArtifactById: debouncedSetCurrentArtifactById,
+            setShowArtifact: (show: boolean) => showArtifact.set(show),
+        },
+    };
+};

package/src/artifacts/types.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+export const ArtifactCommandSchema = {
+    command: z.enum(["create", "update", "rewrite"]).describe("The operation to perform: create new artifact, update existing, or rewrite"),
+    id: z.string().describe("Unique identifier for the artifact"),
+    title: z.string().describe("Human-readable title for the artifact"),
+    type: z.string().describe("MIME type of the artifact content (e.g., 'application/vnd.ant.react')"),
+    language: z.string().describe("Programming language or format of the content"),
+    content: z.string().describe("The actual content to be created or updated. Don't Reply These Code to User, User can see these code in artifacts."),
+    old_str: z.string().describe("The existing content to be replaced (for update operations)"),
+    new_str: z.string().describe("The new content to replace the old content (for update operations)"),
+};
+export type ArtifactCommand = z.infer<z.ZodObject<typeof ArtifactCommandSchema>>;

package/src/index.ts

@@ -5,3 +5,4 @@ export * from "@langchain/langgraph-sdk";
 export * from "./ui-store/index.js";
 export * from "./ToolManager.js";
 export * from "./TestKit.js";
+export * from "./artifacts/index.js";

package/src/ui-store/createChatStore.ts

@@ -1,10 +1,11 @@
-import { atom, computed } from "nanostores";
+import { atom } from "nanostores";
 import { LangGraphClient, LangGraphClientConfig, RenderMessage, SendMessageOptions } from "../LangGraphClient.js";
-import { AssistantGraph, Client, Message, Thread } from "@langchain/langgraph-sdk";
+import { AssistantGraph, Message, Thread } from "@langchain/langgraph-sdk";
 import { debounce } from "ts-debounce";
 import { ToolRenderData } from "../tool/ToolUI.js";
 import { UnionTool } from "../tool/createTool.js";
 import { createLangGraphServerClient } from "../client/LanggraphServer.js";
+import { useArtifacts } from "../artifacts/index.js";
 
 /**
  * @zh 格式化日期对象为时间字符串。
@@ -245,6 +246,7 @@ export const createChatStore = (
         return tool ? (message: RenderMessage) => tool(new ToolRenderData(message, client.get()!)) : null;
     };
 
+    const artifactHook = useArtifacts(renderMessages, client);
     return {
         data: {
             client,
@@ -261,6 +263,7 @@ export const createChatStore = (
             graphVisualize,
             currentNodeName,
             tools,
+            ...artifactHook.data,
         },
         mutations: {
             refreshTools,
@@ -271,6 +274,9 @@ export const createChatStore = (
             isFELocking() {
                 return client.get()?.isFELocking(renderMessages.get());
             },
+            getClient() {
+                return client.get();
+            },
             initClient,
             sendMessage,
             stopGeneration,
@@ -351,6 +357,7 @@ export const createChatStore = (
                 await refreshHistoryList();
             },
             getToolUIRender,
+            ...artifactHook.mutation,
         },
     };
 };