@langgraph-js/ui 3.1.2 → 4.0.1

package/src/chat/components/FileListContext.tsx

@@ -0,0 +1,157 @@
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { TmpFilesClient } from "../FileUpload";
+import type { SupportedFileType } from "./FileList";
+
+interface UploadedFile {
+    file: File;
+    url: string;
+    type: SupportedFileType;
+}
+
+interface MediaUrl {
+    type: "image_url" | "video_url" | "audio_url" | "file_url";
+    image_url?: { url: string };
+    video_url?: { url: string };
+    audio_url?: { url: string };
+    file_url?: { url: string };
+    fileType: SupportedFileType;
+}
+
+interface FileListContextType {
+    uploadedFiles: UploadedFile[];
+    mediaUrls: MediaUrl[];
+    isFileTextMode: {
+        image: boolean;
+        video: boolean;
+        audio: boolean;
+        other: boolean;
+    };
+    setIsFileTextMode: React.Dispatch<
+        React.SetStateAction<{
+            image: boolean;
+            video: boolean;
+            audio: boolean;
+            other: boolean;
+        }>
+    >;
+    handleFileUploaded: (url: string, fileType: SupportedFileType) => void;
+    handleFileRemoved: (url: string, fileType: SupportedFileType) => void;
+    handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    removeFile: (index: number) => void;
+    MAX_FILES: number;
+}
+
+const FileListContext = createContext<FileListContextType | undefined>(undefined);
+
+export const useFileList = () => {
+    const context = useContext(FileListContext);
+    if (!context) {
+        throw new Error("useFileList must be used within a FileListProvider");
+    }
+    return context;
+};
+
+interface FileListProviderProps {
+    children: React.ReactNode;
+}
+
+export const FileListProvider: React.FC<FileListProviderProps> = ({ children }) => {
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+    const [mediaUrls, setMediaUrls] = useState<MediaUrl[]>([]);
+    const [isFileTextMode, setIsFileTextMode] = useState({
+        image: false,
+        video: false,
+        audio: false,
+        other: true,
+    });
+    const MAX_FILES = 3;
+    const client = new TmpFilesClient();
+
+    const handleFileUploaded = useCallback((url: string, fileType: SupportedFileType) => {
+        // 上传时始终保存原始文件信息，在发送时根据文本模式决定格式
+        if (fileType === "image") {
+            setMediaUrls((prev) => [...prev, { type: "image_url", image_url: { url }, fileType }]);
+        } else if (fileType === "video") {
+            setMediaUrls((prev) => [...prev, { type: "video_url", video_url: { url }, fileType }]);
+        } else if (fileType === "audio") {
+            setMediaUrls((prev) => [...prev, { type: "audio_url", audio_url: { url }, fileType }]);
+        } else if (fileType === "other") {
+            setMediaUrls((prev) => [...prev, { type: "file_url", file_url: { url }, fileType }]);
+        }
+    }, []);
+
+    const handleFileRemoved = useCallback((url: string, fileType: SupportedFileType) => {
+        // 删除时移除对应的媒体文件信息
+        setMediaUrls((prev) =>
+            prev.filter((media) => {
+                const mediaUrl = media.image_url?.url || media.video_url?.url || media.audio_url?.url || media.file_url?.url;
+                return mediaUrl !== url;
+            })
+        );
+    }, []);
+
+    const handleFileChange = useCallback(
+        async (event: React.ChangeEvent<HTMLInputElement>) => {
+            const selectedFiles = Array.from(event.target.files || []);
+            const mediaFiles = selectedFiles;
+
+            // 检查是否超过最大数量限制
+            if (uploadedFiles.length + mediaFiles.length > MAX_FILES) {
+                alert(`最多只能上传${MAX_FILES}个文件`);
+                event.target.value = "";
+                return;
+            }
+
+            for (const file of mediaFiles) {
+                try {
+                    const result = await client.upload(file);
+                    if (result.data?.url) {
+                        const fileType = getFileType(file);
+                        if (fileType) {
+                            const uploadedFile = { file, url: result.data.url, type: fileType };
+                            setUploadedFiles((prev) => [...prev, uploadedFile]);
+                            handleFileUploaded(result.data.url, fileType);
+                        }
+                    }
+                } catch (error) {
+                    console.error("Upload failed:", error);
+                }
+            }
+
+            event.target.value = "";
+        },
+        [uploadedFiles.length, handleFileUploaded]
+    );
+
+    const removeFile = useCallback(
+        (index: number) => {
+            const fileToRemove = uploadedFiles[index];
+            if (fileToRemove) {
+                setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
+                handleFileRemoved(fileToRemove.url, fileToRemove.type);
+            }
+        },
+        [uploadedFiles, handleFileRemoved]
+    );
+
+    const value: FileListContextType = {
+        uploadedFiles,
+        mediaUrls,
+        isFileTextMode,
+        setIsFileTextMode,
+        handleFileUploaded,
+        handleFileRemoved,
+        handleFileChange,
+        removeFile,
+        MAX_FILES,
+    };
+
+    return <FileListContext.Provider value={value}>{children}</FileListContext.Provider>;
+};
+
+const getFileType = (file: File): SupportedFileType => {
+    if (file.type.startsWith("image/")) return "image";
+    if (file.type === "video/mp4") return "video";
+    if (file.type.startsWith("audio/")) return "audio";
+    return "other";
+};

package/src/chat/components/HistoryList.tsx

@@ -10,7 +10,7 @@ interface HistoryListProps {
 const HistoryList: React.FC<HistoryListProps> = ({ onClose }) => {
     const { historyList, currentChatId, refreshHistoryList, createNewChat, deleteHistoryChat, toHistoryChat } = useChat();
     return (
-        <section className="bg-white h-full flex flex-col rounded-2xl shadow-lg shadow-gray-200">
+        <section className="bg-white h-full flex flex-col ">
             <div className="px-5 flex justify-between items-center py-6">
                 <div className="flex items-center gap-3">
                     <h3 className="m-0 text-base font-semibold text-gray-700">历史记录</h3>

package/src/chat/components/MessageAI.tsx

@@ -10,7 +10,7 @@ interface MessageAIProps {
 
 const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
     return (
-        <div className="flex flex-col w-[80%] bg-white rounded-2xl px-5 py-4">
+        <div className="flex flex-col w-[80%] bg-white rounded-2xl px-5 py-4 border border-gray-200">
             <div className="text-xs font-medium text-gray-500 mb-3">{message.name}</div>
             <div className="markdown-body max-w-none">
                 <Response>{getMessageContent(message.content)}</Response>

package/src/chat/components/UploadButton.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { PlusIcon, UploadCloudIcon } from "lucide-react";
+import { useFileList } from "./FileListContext";
+
+const UploadButton: React.FC = () => {
+    const { uploadedFiles, handleFileChange, MAX_FILES } = useFileList();
+
+    return (
+        <>
+            {uploadedFiles.length < MAX_FILES && (
+                <label className={`inline-flex items-center justify-center text-gray-700 bg-white rounded-xl cursor-pointer transition-colors hover:bg-gray-200 w-8 h-8`}>
+                    <PlusIcon size={20} />
+                    <input type="file" accept="*" multiple onChange={handleFileChange} className="hidden" />
+                </label>
+            )}
+        </>
+    );
+};
+
+export default UploadButton;

package/src/chat/components/UsageMetadata.tsx

@@ -1,3 +1,6 @@
+import { useMonitor } from "@/monitor";
+import { useChat } from "@langgraph-js/sdk/react";
+
 interface UsageMetadataProps {
     usage_metadata: Partial<{
         input_tokens: number;
@@ -21,6 +24,8 @@ const formatTokens = (tokens: number) => {
 export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time, response_metadata, id, tool_call_id }) => {
     const speed = spend_time ? ((usage_metadata.output_tokens || 0) * 1000) / (spend_time || 1) : 0;
     spend_time = spend_time && !isNaN(spend_time) ? spend_time : 0;
+    const { currentChatId } = useChat();
+    const { openMonitorWithChat } = useMonitor();
     return (
         <div className="flex items-center justify-between text-xs text-gray-400 mt-3">
             <div className="flex items-center gap-3">
@@ -31,7 +36,11 @@ export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, sp
             <div className="flex items-center gap-2">
                 {response_metadata?.model_name && <span className="text-gray-500">{response_metadata.model_name}</span>}
                 {tool_call_id && <span className="text-gray-400">Tool: {tool_call_id}</span>}
-                {id && <span className="text-gray-400">ID: {id}</span>}
+                {id && (
+                    <span className="text-gray-400" onClick={() => openMonitorWithChat(currentChatId!, id)}>
+                        ID: {id}
+                    </span>
+                )}
             </div>
         </div>
     );

package/src/index.ts

@@ -1,3 +1,2 @@
 import "./index.css";
-import "@andypf/json-viewer/dist/iife/index.js";
 export { default as Chat } from "./chat/Chat";

package/src/monitor/index.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+// Context 类型定义
+interface MonitorContextValue {
+    isOpen: boolean;
+    url: string;
+    openMonitor: (url: string) => void;
+    closeModal: () => void;
+    openMonitorWithChat: (thread_id: string, trace_id?: string) => void;
+}
+
+// 创建 Context
+const MonitorContext = createContext<MonitorContextValue | undefined>(undefined);
+
+// Modal Provider 组件
+export const MonitorProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [url, setUrl] = useState("");
+
+    const openModal = (newUrl: string) => {
+        setUrl(newUrl);
+
+        setIsOpen(true);
+    };
+
+    const closeModal = () => {
+        setIsOpen(false);
+        setUrl("");
+    };
+
+    const openMonitorWithChat = (thread_id: string, trace_id?: string) => {
+        const url = new URL("/api/open-smith/ui/index.html", window.location.origin);
+        const qs = new URLSearchParams();
+        qs.set("thread_id", thread_id);
+        if (trace_id) {
+            qs.set("trace_id", trace_id);
+        }
+        url.hash = "/?" + qs.toString();
+        openModal(url.toString());
+    };
+
+    return <MonitorContext.Provider value={{ isOpen, url, openMonitor: openModal, closeModal, openMonitorWithChat }}>{children}</MonitorContext.Provider>;
+};
+
+// Hook 用于在组件中使用 modal
+export const useMonitor = () => {
+    const context = useContext(MonitorContext);
+    if (context === undefined) {
+        throw new Error("useModal must be used within a ModalProvider");
+    }
+    return context;
+};
+
+// Modal 组件
+export const Monitor: React.FC = () => {
+    const { isOpen, url, closeModal } = useMonitor();
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg shadow-xl max-w-7xl w-full mx-4 max-h-[90vh] h-full flex flex-col border border-gray-200 relative">
+                <button onClick={closeModal} className="text-gray-400 hover:text-gray-600 text-2xl leading-none absolute top-2 right-2 z-50 cursor-pointer">
+                    ×
+                </button>
+                <div className="flex-1 p-4 min-h-0">{url && <iframe src={url} className="w-full h-full border rounded" title="Monitor" sandbox="allow-scripts allow-same-origin" />}</div>
+            </div>
+        </div>
+    );
+};

package/src/settings/ConsoleSettings.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect, useCallback, ChangeEvent } from "react";
+import { toast } from "sonner";
+
+interface ConsoleSettingsData {}
+
+const initialConsoleSettings: ConsoleSettingsData = {};
+
+const ConsoleSettings: React.FC = () => {
+    const [formData, setFormData] = useState<ConsoleSettingsData>(() => {
+        try {
+            const storedSettings = localStorage.getItem("consoleSettings");
+            return storedSettings ? JSON.parse(storedSettings) : initialConsoleSettings;
+        } catch (error) {
+            console.error("Error reading console settings from localStorage:", error);
+            return initialConsoleSettings;
+        }
+    });
+
+    useEffect(() => {
+        try {
+            localStorage.setItem("consoleSettings", JSON.stringify(formData));
+        } catch (error) {
+            console.error("Error writing console settings to localStorage:", error);
+        }
+    }, [formData]);
+
+    return (
+        <form className="space-y-6">
+            <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
+                <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">控制台说明</h4>
+                <p className="text-sm text-blue-800 dark:text-blue-200 leading-relaxed">
+                    控制台用于监控应用程序的运行状态。我们的控制台提供一个兼容 LangChain 的数据上报接口，您可以通过下面的配置来启用控制台输出。
+                </p>
+            </div>
+            <ol>
+                <li>请在 LangGraph 或者 LangChain 项目中使用以下环境变量来启用控制台输出：</li>
+                <li>
+                    LANGSMITH_TRACING=true
+                    <br />
+                    LANGSMITH_ENDPOINT= {new URL("/api/open-smith", window.location.origin).toString()}
+                </li>
+                <li>然后可以在主面板的 控制台 按钮中查看控制台输出。</li>
+            </ol>
+        </form>
+    );
+};
+
+export default ConsoleSettings;

package/src/settings/LoginSettings.tsx

@@ -16,11 +16,14 @@ interface LoginSettingsData {
 const initialLoginSettings: LoginSettingsData = {
     headers: [{ key: "authorization", value: "" }],
     withCredentials: false,
-    apiUrl: "",
-    defaultAgent: "assistant",
+    apiUrl: "/api-langgraph",
+    defaultAgent: "agent",
 };
 
+const apiUrlShortcuts = ["/api/langgraph", "http://localhost:8123", "http://localhost:3000", "http://localhost:8000", "http://localhost:5000"];
+
 const LoginSettings: React.FC = () => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const [formData, setFormData] = useState<LoginSettingsData>(() => {
         try {
             const storedHeaders = localStorage.getItem("code");
@@ -62,6 +65,21 @@ const LoginSettings: React.FC = () => {
         }
     }, [formData]);
 
+    // 点击外部关闭下拉菜单
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as Element;
+            if (isDropdownOpen && !target.closest(".api-url-dropdown")) {
+                setIsDropdownOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isDropdownOpen]);
+
     const addHeader = useCallback(() => {
         setFormData((prevData) => ({
             ...prevData,
@@ -100,6 +118,14 @@ const LoginSettings: React.FC = () => {
         }));
     }, []);
 
+    const handleApiUrlShortcutSelect = useCallback((url: string) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            apiUrl: url,
+        }));
+        setIsDropdownOpen(false);
+    }, []);
+
     const handleSave = () => {
         // 保存逻辑已经通过 useEffect 处理了，这里可以添加其他保存后的操作，例如提示用户保存成功
         toast.success("配置已保存！重启程序");
@@ -129,15 +155,42 @@ const LoginSettings: React.FC = () => {
                 <label htmlFor="api-url" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     API URL
                 </label>
-                <input
-                    type="text"
-                    id="apiUrl"
-                    name="apiUrl"
-                    value={formData.apiUrl}
-                    onChange={handleInputChange}
-                    placeholder="例如: http://localhost:8123"
-                    className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                />
+                <div className="relative api-url-dropdown">
+                    <div className="flex">
+                        <input
+                            type="text"
+                            id="apiUrl"
+                            name="apiUrl"
+                            value={formData.apiUrl}
+                            onChange={handleInputChange}
+                            placeholder="例如: http://localhost:8123"
+                            className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                            className="px-3 py-3 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-lg bg-gray-50 dark:bg-gray-600 hover:bg-gray-100 dark:hover:bg-gray-500 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        >
+                            <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </button>
+                    </div>
+                    {isDropdownOpen && (
+                        <div className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg">
+                            {apiUrlShortcuts.map((url, index) => (
+                                <button
+                                    key={index}
+                                    type="button"
+                                    onClick={() => handleApiUrlShortcutSelect(url)}
+                                    className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors first:rounded-t-lg last:rounded-b-lg text-gray-900 dark:text-white"
+                                >
+                                    {url}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                </div>
             </div>
 
             <div>

package/src/settings/SettingPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, ReactNode } from "react";
 import LoginSettings from "./LoginSettings"; // 导入新的 LoginSettings 组件
+import ConsoleSettings from "./ConsoleSettings"; // 导入控制台设置组件
 
 interface SettingPanelProps {
     isOpen: boolean;
@@ -16,16 +17,16 @@ export interface SettingTab {
 const SettingPanel: React.FC<SettingPanelProps> = ({ isOpen, onClose, tabs: externalTabs }) => {
     // 内部默认的 tabs
     const defaultTabs: SettingTab[] = [
-        {
-            id: "general",
-            title: "通用",
-            component: <div className="text-gray-500 dark:text-gray-400">通用设置内容将在此显示</div>,
-        },
         {
             id: "server-login",
             title: "服务器",
             component: <LoginSettings />,
         },
+        {
+            id: "console",
+            title: "控制台",
+            component: <ConsoleSettings />,
+        },
         // 更多设置页面将在这里添加
     ];
 

package/vite.config.ts

@@ -1,12 +1,50 @@
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig, Plugin } from "vite";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 import tailwindcss from "@tailwindcss/vite";
+import { Readable } from "stream";
+const OpenSmithPlugin = () =>
+    ({
+        name: "open-smith",
+        configureServer(server) {
+            server.middlewares.use("/api/open-smith", async (req, res, next) => {
+                const { app } = await import("@langgraph-js/open-smith/dist/app.js");
+                try {
+                    const body = Readable.toWeb(req);
+                    // Build a compatible Request for Fetch API
+                    const url = `http://localhost${req.url}`;
+                    const fetchRequest = new Request(url, {
+                        method: req.method,
+                        headers: req.headers as any,
+                        body: req.method && !["GET", "HEAD"].includes(req.method.toUpperCase()) && body ? body : undefined,
+                        ...(req.method && !["GET", "HEAD"].includes(req.method.toUpperCase()) && body ? { duplex: "half" as const } : {}),
+                    });
+
+                    // Proxy the request to app.basePath handler
+                    const response = await app.basePath("/api/open-smith").fetch(fetchRequest);
+
+                    // Set status and headers
+                    res.statusCode = response.status;
+                    // @ts-ignore
+                    for (const [key, value] of response.headers.entries()) {
+                        res.setHeader(key, value);
+                    }
+
+                    // Send the response body
+                    const arrayBuffer = await response.arrayBuffer();
+                    res.end(Buffer.from(arrayBuffer));
+                } catch (error) {
+                    console.log(error);
+                }
+            });
+        },
+    }) as Plugin;
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
     const isHttps = mode === "https";
     return {
-        plugins: [react(), tailwindcss(), isHttps ? basicSsl() : undefined],
+        plugins: [react(), tailwindcss(), isHttps ? basicSsl() : undefined, process.env.NODE_ENV === "development" && OpenSmithPlugin()],
         resolve: {
             alias: {
                 "@langgraph-js/sdk": new URL("../langgraph-client/src", import.meta.url).pathname,
@@ -17,6 +55,13 @@ export default defineConfig(({ mode }) => {
             exclude: ["@langgraph-js/ui", "@langgraph-js/sdk"],
         },
         server: {
+            proxy: {
+                "/api/langgraph": {
+                    target: "http://localhost:8123",
+                    changeOrigin: true,
+                    rewrite: (path) => path.replace(/^\/api\/langgraph/, ""),
+                },
+            },
             // headers: {
             //     "Cross-Origin-Opener-Policy": "same-origin",
             //     "Cross-Origin-Embedder-Policy": "require-corp",

package/dist/assets/channel-CbJkpW4g.js

@@ -1 +0,0 @@
-import{U as a,C as n}from"./mermaid.core-DboFnVDg.js";const t=(r,o)=>a.lang.round(n.parse(r)[o]);export{t as c};

package/dist/assets/classDiagram-2ON5EDUG--F4r2fzQ.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-DiGvJtfO.js";import{_ as i}from"./mermaid.core-DboFnVDg.js";import"./index-EdVqpCiz.js";import"./chunk-FMBD7UC4-KfYlm8ba.js";import"./chunk-55IACEB6-CVyjVz79.js";import"./chunk-QN33PNHL-Bwbc5Dxk.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/assets/classDiagram-v2-WZHVMYZB--F4r2fzQ.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-DiGvJtfO.js";import{_ as i}from"./mermaid.core-DboFnVDg.js";import"./index-EdVqpCiz.js";import"./chunk-FMBD7UC4-KfYlm8ba.js";import"./chunk-55IACEB6-CVyjVz79.js";import"./chunk-QN33PNHL-Bwbc5Dxk.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/assets/clone-CxJednSn.js

@@ -1 +0,0 @@
-import{b as r}from"./index-EdVqpCiz.js";var e=4;function a(o){return r(o,e)}export{a as c};