@langgraph-js/ui 1.0.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,
+        },
+    };
+});