@langgraph-js/ui 1.2.0 → 1.3.0

package/src/graph/index.tsx

@@ -0,0 +1,161 @@
+import { ReactFlow, Background, Controls, Node, Edge, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, Panel } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useCallback, useEffect } from "react";
+import { useChat } from "../chat/context/ChatContext";
+import Dagre from "@dagrejs/dagre";
+import { flattenGraph } from "./flattenGraph";
+import { AssistantGraph } from "@langgraph-js/sdk";
+import "./flow.css";
+const nodeTypes = {
+    group: ({ data }: { data: any }) => (
+        <div style={{ position: "absolute", bottom: "100%", left: 0 }}>
+            <span>{data.name}</span>
+        </div>
+    ),
+};
+
+const transformEdges = (edges: AssistantGraph["edges"], nodes: Node[]): Edge[] => {
+    const newEdges = edges.map((edge): Edge => {
+        const sourceNode = nodes.find((n) => n.id === edge.source.toString());
+        const targetNode = nodes.find((n) => n.id === edge.target.toString());
+        const sourceId = sourceNode?.id;
+        const targetId = targetNode?.id;
+        return {
+            id: `${sourceId}=${targetId}`,
+            source: sourceId!,
+            target: targetId!,
+            // type: edge.conditional ? "smoothstep" : "straight",
+            animated: edge.conditional,
+            label: edge.data,
+            style: {
+                stroke: edge.conditional ? "#2563eb" : "#64748b",
+            },
+        };
+    });
+    if (!newEdges.find((i) => i.target === "__end__")) {
+        const end = [...nodes].reverse().find((i) => i.id.endsWith(":__end__"));
+        if (end) {
+            newEdges.push({
+                id: `${end.id}=__end__`,
+                source: end.id,
+                target: "__end__",
+                type: "smoothstep",
+            });
+        }
+    }
+    return newEdges;
+};
+
+const LayoutFlow = () => {
+    const { fitView } = useReactFlow();
+    const { graphVisualize } = useChat();
+    const graphData = graphVisualize || { nodes: [], edges: [] };
+
+    const initialNodes = flattenGraph(graphData.nodes.map((node) => ({ ...node, type: "default" })));
+    const initialEdges = transformEdges(graphData.edges, initialNodes);
+
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    const onLayout = useCallback(
+        (direction: "TB" | "LR") => {
+            const layouted = getLayoutedElements(nodes, edges, { direction });
+            setNodes([...layouted.nodes]);
+            setEdges([...layouted.edges]);
+            fitView();
+        },
+        [nodes, edges]
+    );
+
+    useEffect(() => {
+        if (graphData.nodes.length > 0) {
+            const layouted = getLayoutedElements(initialNodes, initialEdges, { direction: "TB" });
+            setNodes([...layouted.nodes]);
+            setEdges([...layouted.edges]);
+            fitView();
+        }
+    }, [graphData]);
+
+    return (
+        <div style={{ width: "30%", height: "100%", position: "relative", overflow: "hidden" }}>
+            <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} fitView className="w-full h-full" nodeTypes={nodeTypes}>
+                <Background />
+                <Controls />
+                <Panel position="top-right">
+                    <button onClick={() => onLayout("TB")}>垂直布局</button>
+                    <button onClick={() => onLayout("LR")}>水平布局</button>
+                </Panel>
+            </ReactFlow>
+        </div>
+    );
+};
+
+const getLayoutedElements = (nodes: Node[], edges: Edge[], options: { direction: "TB" | "LR" }) => {
+    const g = new Dagre.graphlib.Graph({ compound: true, multigraph: true }).setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: options.direction, nodesep: 40, ranksep: 40, edgesep: 20 });
+
+    nodes.forEach((node) => {
+        if (node.type === "group") {
+            return;
+        }
+        g.setNode(node.id, {
+            ...node,
+            width: 128,
+            height: 20,
+        });
+    });
+    edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+
+    Dagre.layout(g);
+    const newNodes = nodes.map((node) => {
+        const position = g.node(node.id);
+        if (!position) return { ...node };
+        let x = 0;
+        let y = 0;
+
+        x = position.x + (position?.width ?? 0);
+        y = position.y + (position?.height ?? 0);
+
+        return {
+            ...node,
+            position: { x, y },
+            _p: position,
+            width: position.width,
+            height: position.height,
+        };
+    });
+
+    const children = new Map<string, Node[]>();
+    const padding = 15;
+    [...newNodes].reverse().forEach((node) => {
+        if (node.type === "group") {
+            const nodes = children.get(node.id!) || [];
+            const minX = Math.min(...nodes.map((i) => i.position.x));
+            const minY = Math.min(...nodes.map((i) => i.position.y));
+            const maxX = Math.max(...nodes.map((i) => i.position.x + (i.width ?? 0)));
+            const maxY = Math.max(...nodes.map((i) => i.position.y + (i.height ?? 0)));
+            node.position.x = minX - padding;
+            node.position.y = minY - padding;
+            node.width = maxX - minX + padding * 2;
+            node.height = maxY - minY + padding * 2;
+            nodes.forEach((i) => {
+                i.position.x = i.position.x - node.position.x;
+                i.position.y = i.position.y - node.position.y;
+            });
+        }
+        if (node.parentId) {
+            children.set(node.parentId!, [...(children.get(node.parentId!) ?? []), node]);
+        }
+    });
+    return {
+        nodes: newNodes,
+        edges,
+    };
+};
+
+export function Graph() {
+    return (
+        <ReactFlowProvider>
+            <LayoutFlow />
+        </ReactFlowProvider>
+    );
+}

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;
+}

package/src/login/Login.tsx

@@ -1,92 +1,92 @@
-import React, { useState } from "react";
-import "./Login.css";
-
-interface HeaderConfig {
-    key: string;
-    value: string;
-}
-
-const Login: React.FC = () => {
-    const [headers, setHeaders] = useState<HeaderConfig[]>([{ key: "authorization", value: "" }]);
-    const [withCredentials, setWithCredentials] = useState<boolean>(localStorage.getItem("withCredentials") === "true");
-    const [apiUrl, setApiUrl] = useState<string>(localStorage.getItem("apiUrl") || "");
-
-    const addHeader = () => {
-        setHeaders([...headers, { key: "", value: "" }]);
-    };
-
-    const removeHeader = (index: number) => {
-        setHeaders(headers.filter((_, i) => i !== index));
-    };
-
-    const updateHeader = (index: number, field: "key" | "value", value: string) => {
-        const newHeaders = [...headers];
-        newHeaders[index][field] = value;
-        setHeaders(newHeaders);
-    };
-
-    const handleLogin = () => {
-        const headerObject = Object.fromEntries(headers.map((k) => [k.key, k.value]));
-
-        localStorage.setItem("code", JSON.stringify(headerObject));
-        localStorage.setItem("withCredentials", JSON.stringify(withCredentials));
-        localStorage.setItem("apiUrl", apiUrl);
-        location.reload();
-    };
-
-    return (
-        <div className="login-container">
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    handleLogin();
-                }}
-            >
-                <h2>LangGraph UI</h2>
-                <p>登录，自定义请求头配置</p>
-
-                <div className="form-group api-url-group">
-                    <label htmlFor="api-url">API URL</label>
-                    <input type="text" id="api-url" value={apiUrl} onChange={(e) => setApiUrl(e.target.value)} placeholder="例如: http://localhost:8123" />
-                </div>
-
-                {headers.map((header, index) => (
-                    <div key={index} className="header-group">
-                        <div className="form-group">
-                            <input type="text" id={`header-key-${index}`} value={header.key} onChange={(e) => updateHeader(index, "key", e.target.value)} placeholder="例如: authorization" required />
-                        </div>
-                        <div className="form-group">
-                            <input
-                                type="text"
-                                id={`header-value-${index}`}
-                                value={header.value}
-                                onChange={(e) => updateHeader(index, "value", e.target.value)}
-                                placeholder="例如: Bearer token；无则填 1"
-                                required
-                            />
-                        </div>
-                        {index > 0 && (
-                            <button type="button" className="remove-header" onClick={() => removeHeader(index)}>
-                                删除
-                            </button>
-                        )}
-                    </div>
-                ))}
-                <div className="with-credentials-option">
-                    <label>
-                        <input type="checkbox" checked={withCredentials} onChange={(e) => setWithCredentials(e.target.checked)} />
-                        启用 withCredentials（跨域请求时发送 Cookie）
-                    </label>
-                </div>
-                <div className="button-group">
-                    <button type="button" onClick={addHeader}>
-                        添加请求头
-                    </button>
-                    <button type="submit">保存配置</button>
-                </div>
-            </form>
-        </div>
-    );
-};
-
-export default Login;
+import React, { useState } from "react";
+import "./Login.css";
+
+interface HeaderConfig {
+    key: string;
+    value: string;
+}
+
+const Login: React.FC = () => {
+    const [headers, setHeaders] = useState<HeaderConfig[]>([{ key: "authorization", value: "" }]);
+    const [withCredentials, setWithCredentials] = useState<boolean>(localStorage.getItem("withCredentials") === "true");
+    const [apiUrl, setApiUrl] = useState<string>(localStorage.getItem("apiUrl") || "");
+
+    const addHeader = () => {
+        setHeaders([...headers, { key: "", value: "" }]);
+    };
+
+    const removeHeader = (index: number) => {
+        setHeaders(headers.filter((_, i) => i !== index));
+    };
+
+    const updateHeader = (index: number, field: "key" | "value", value: string) => {
+        const newHeaders = [...headers];
+        newHeaders[index][field] = value;
+        setHeaders(newHeaders);
+    };
+
+    const handleLogin = () => {
+        const headerObject = Object.fromEntries(headers.map((k) => [k.key, k.value]));
+
+        localStorage.setItem("code", JSON.stringify(headerObject));
+        localStorage.setItem("withCredentials", JSON.stringify(withCredentials));
+        localStorage.setItem("apiUrl", apiUrl);
+        location.reload();
+    };
+
+    return (
+        <div className="login-container">
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleLogin();
+                }}
+            >
+                <h2>LangGraph UI</h2>
+                <p>登录，自定义请求头配置</p>
+
+                <div className="form-group api-url-group">
+                    <label htmlFor="api-url">API URL</label>
+                    <input type="text" id="api-url" value={apiUrl} onChange={(e) => setApiUrl(e.target.value)} placeholder="例如: http://localhost:8123" />
+                </div>
+
+                {headers.map((header, index) => (
+                    <div key={index} className="header-group">
+                        <div className="form-group">
+                            <input type="text" id={`header-key-${index}`} value={header.key} onChange={(e) => updateHeader(index, "key", e.target.value)} placeholder="例如: authorization" required />
+                        </div>
+                        <div className="form-group">
+                            <input
+                                type="text"
+                                id={`header-value-${index}`}
+                                value={header.value}
+                                onChange={(e) => updateHeader(index, "value", e.target.value)}
+                                placeholder="例如: Bearer token；无则填 1"
+                                required
+                            />
+                        </div>
+                        {index > 0 && (
+                            <button type="button" className="remove-header" onClick={() => removeHeader(index)}>
+                                删除
+                            </button>
+                        )}
+                    </div>
+                ))}
+                <div className="with-credentials-option">
+                    <label>
+                        <input type="checkbox" checked={withCredentials} onChange={(e) => setWithCredentials(e.target.checked)} />
+                        启用 withCredentials（跨域请求时发送 Cookie）
+                    </label>
+                </div>
+                <div className="button-group">
+                    <button type="button" onClick={addHeader}>
+                        添加请求头
+                    </button>
+                    <button type="submit">保存配置</button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default Login;

package/test/App.tsx

@@ -1,9 +1,9 @@
-import Chat from "../src/chat/Chat";
-import Login from "../src/login/Login";
-import { useState } from "react";
-function App() {
-    const [isLogin, setIsLogin] = useState(localStorage.getItem("code"));
-    return <>{isLogin ? <Chat /> : <Login></Login>}</>;
-}
-
-export default App;
+import Chat from "../src/chat/Chat";
+import Login from "../src/login/Login";
+import { useState } from "react";
+function App() {
+    const [isLogin, setIsLogin] = useState(localStorage.getItem("code"));
+    return <>{isLogin ? <Chat /> : <Login></Login>}</>;
+}
+
+export default App;

package/test/main.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

package/test/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,21 +1,21 @@
-{
-    "compilerOptions": {
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": false,
-        "skipLibCheck": true,
-        "esModuleInterop": false,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx"
-    },
-    "include": ["test", "test/**/*.tsx"],
-    "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": ["test", "test/**/*.tsx"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}