@langgraph-js/ui 1.1.0 → 1.2.0

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" }]
+}

package/tsconfig.node.json

@@ -1,9 +1,9 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true
-    },
-    "include": ["vite.config.ts"]
-}
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -1,17 +1,17 @@
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-import basicSsl from "@vitejs/plugin-basic-ssl";
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-    const isHttps = mode === "https";
-    return {
-        plugins: [react(), isHttps ? basicSsl() : undefined],
-        optimizeDeps: {
-            exclude: ["@langgraph-js/ui", "@langgraph-js/sdk"],
-        },
-        server: {
-            port: 1111,
-        },
-    };
-});
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    const isHttps = mode === "https";
+    return {
+        plugins: [react(), isHttps ? basicSsl() : undefined],
+        optimizeDeps: {
+            exclude: ["@langgraph-js/ui", "@langgraph-js/sdk"],
+        },
+        server: {
+            port: 1111,
+        },
+    };
+});

package/dist/assets/index-CBfok6qC.css

@@ -1 +0,0 @@
-@import"https://unpkg.com/github-markdown-css/github-markdown.css";.chat-container{display:flex;height:100vh;width:100%;position:relative}.chat-sidebar{background-color:#f5f5f5;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.history-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.history-header h3{margin:0;font-size:16px;color:#333}.close-button{background:none;border:none;font-size:20px;cursor:pointer;color:#666}.history-list{flex:none;width:280px;overflow-y:auto;border-right:1px solid #e0e0e0}.history-item{padding:12px;margin-bottom:8px;background-color:#fff;cursor:pointer;transition:background-color .2s}.history-item:hover{background-color:#e8e8e8}.history-item.active{background-color:#e3f2fd;border-left:3px solid #2196f3}.history-title{font-size:14px;color:#333;margin-bottom:4px}.history-time{font-size:12px;color:#666}.chat-main{overflow:hidden;flex:1;display:flex;flex-direction:column}.chat-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:.5rem}.history-button{padding:8px 16px;background-color:#f0f0f0;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:14px;color:#333}.history-button:hover{background-color:#e0e0e0}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.message{display:flex;max-width:80%}.message.human{margin-left:auto}.message.ai{margin-right:auto}.message-content{padding:.75rem 1rem;border-radius:8px;border:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.5rem;max-width:100%}.message-text{word-break:break-word;line-height:1.5}.message-image{margin:.5rem 0}.message-image img{max-width:100%;border-radius:4px;box-shadow:0 1px 3px #0000001a}.message-audio{margin:.5rem 0}.message-audio audio{width:100%;max-width:300px}.message-meta{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:#6b7280;margin-top:.25rem}.message-time{font-family:monospace}.token-info{display:flex;gap:.5rem;align-items:center}.token-item{display:flex;align-items:center;gap:.25rem;background-color:#fff;padding:.125rem .375rem;border-radius:4px;font-family:monospace}.token-emoji{font-size:.875rem}.message.human .message-content{background-color:#3b82f6;color:#fff;border-color:#3b82f6}.message.human .message-meta{color:#fffc}.message.ai .message-content{color:#1f2937}.message.tool{width:100%;max-width:100%}.tool-message{width:100%;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.tool-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background-color:#f9fafb;border-bottom:1px solid #e5e7eb;cursor:pointer}.tool-header:hover{background-color:#f3f4f6}.tool-title{font-weight:500;color:#374151}.tool-content{padding:1rem}.tool-input{background-color:#f9fafb;padding:.75rem;border-radius:4px;margin-bottom:.5rem;font-family:monospace;white-space:pre-wrap;word-break:break-all}.tool-output{background-color:#fff;padding:.75rem;border-radius:4px;font-family:monospace;border:1px solid #e5e7eb;margin-bottom:.5rem}.chat-input{border-top:1px solid #e5e7eb;padding:0 1rem 1rem;background-color:#fff}.chat-input-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.input-container{display:flex;gap:.5rem}.input-textarea{flex:1;padding:.75rem;border:1px solid #e5e7eb;border-radius:8px;resize:none;font-size:.875rem;line-height:1.25rem}.input-textarea:focus{outline:none;border-color:#3b82f6}.send-button{padding:.5rem 1rem;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s}.send-button:hover{background-color:#2563eb}.send-button:disabled{background-color:#93c5fd;cursor:not-allowed}.send-button.interrupt{background-color:#ef4444}.send-button.interrupt:hover{background-color:#dc2626}.collapsed .tool-content{display:none}.expand-icon{transition:transform .2s}.collapsed .expand-icon{transform:rotate(-90deg)}.loading-indicator{padding:12px 16px;margin:8px 0;background-color:#f5f5f5;border-radius:8px;color:#666;font-size:14px;text-align:center;animation:pulse 1.5s infinite;display:flex;align-items:center;justify-content:center;gap:12px}.interrupt-button{padding:4px 12px;background-color:#ef4444;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s}.interrupt-button:hover{background-color:#dc2626}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.error-message{padding:12px 16px;margin:8px 0;background-color:#fee2e2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px;text-align:center}.markdown-body p{text-align:left}.file-list{padding:.5rem;background-color:#f9fafb;border-radius:8px;margin-bottom:1rem}.file-list-header{margin-bottom:1rem}.file-upload-button{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background-color:#3b82f6;color:#fff;border-radius:6px;cursor:pointer;font-size:2rem;transition:background-color .2s}.file-upload-button:hover{background-color:#2563eb}.file-list-content{display:flex;flex-wrap:wrap;gap:.5rem}.file-item{position:relative;width:80px;height:80px;border-radius:6px;overflow:hidden}.file-preview{width:100%;height:100%;object-fit:cover}.file-info{padding:.75rem}.file-name{display:block;font-size:.875rem;color:#374151;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-actions{display:flex;gap:.5rem}.upload-button,.remove-button{flex:1;padding:.375rem .75rem;border:none;border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .2s}.upload-button{background-color:#3b82f6;color:#fff}.upload-button:hover{background-color:#2563eb}.remove-button{position:absolute;top:2px;right:2px;width:20px;height:20px;background-color:#00000080;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.remove-button:hover{background-color:#000000b3}.upload-button:disabled,.remove-button:disabled{opacity:.5;cursor:not-allowed}.login-container{max-width:600px;margin:2rem auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.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:.5rem;color:#333;font-weight:500}.form-group input{width:100%;padding:.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 #007bff40}.button-group{display:flex;gap:1rem;margin-top:1rem}button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}button[type=submit]{background-color:#007bff;color:#fff}button[type=submit]:hover{background-color:#0056b3}button[type=button]{background-color:#6c757d;color:#fff}button[type=button]:hover{background-color:#5a6268}.remove-header{background-color:#dc3545;color:#fff;padding:.25rem .5rem;font-size:.875rem}.remove-header:hover{background-color:#c82333}p{margin-bottom:1.5rem;color:#666;text-align:center}