@langgraph-js/ui 1.2.0 → 1.2.1

package/src/chat/context/ChatContext.tsx

@@ -1,29 +1,31 @@
-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) => {
+            if (store.showHistory) {
+                store.refreshHistoryList();
+            }
+        });
+    }, []);
+
+    return <ChatContext.Provider value={store}>{children}</ChatContext.Provider>;
+};

package/src/chat/context/ExtraParamsContext.tsx

@@ -1,42 +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;
+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,25 @@
-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(
+    localStorage.getItem("agent_name") || "",
+    {
+        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";

package/src/login/Login.css

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