@langgraph-js/ui 1.4.0 → 1.6.0

package/src/login/Login.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import "./Login.css";
 
 interface HeaderConfig {
     key: string;
@@ -35,56 +34,165 @@ const Login: React.FC = () => {
     };
 
     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 className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
+            <div className="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden">
+                <div className="grid md:grid-cols-2">
+                    {/* 左侧品牌区域 */}
+                    <div className="hidden md:block bg-gradient-to-br from-blue-600 to-blue-800 p-12 text-white">
+                        <div className="h-full flex flex-col justify-between">
+                            <div>
+                                <h1 className="text-4xl font-bold mb-6">LangGraph UI</h1>
+                                <p className="text-blue-100 text-lg leading-relaxed">专业的 LangGraph 可视化界面，让您的 AI 应用开发更加高效和直观。</p>
+                            </div>
+                            <div className="space-y-4">
+                                <div className="flex items-center space-x-3">
+                                    <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                    </div>
+                                    <span>直观的可视化界面</span>
+                                </div>
+                                <div className="flex items-center space-x-3">
+                                    <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                        </svg>
+                                    </div>
+                                    <span>高效的开发体验</span>
+                                </div>
+                                <div className="flex items-center space-x-3">
+                                    <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
+                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth="2"
+                                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <span>安全可靠的配置</span>
+                                </div>
+                            </div>
                         </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>
+
+                    {/* 右侧表单区域 */}
+                    <div className="p-8 md:p-12">
+                        <div className="md:hidden mb-8">
+                            <h1 className="text-3xl font-bold text-gray-900">LangGraph UI</h1>
+                            <p className="text-gray-600 mt-2">专业的 LangGraph 可视化界面</p>
                         </div>
-                        {index > 0 && (
-                            <button type="button" className="remove-header" onClick={() => removeHeader(index)}>
-                                删除
-                            </button>
-                        )}
+
+                        <form
+                            onSubmit={(e) => {
+                                e.preventDefault();
+                                handleLogin();
+                            }}
+                            className="space-y-6"
+                        >
+                            <div>
+                                <label htmlFor="api-url" className="block text-sm font-medium text-gray-700 mb-2">
+                                    API URL
+                                </label>
+                                <input
+                                    type="text"
+                                    id="api-url"
+                                    value={apiUrl}
+                                    onChange={(e) => setApiUrl(e.target.value)}
+                                    placeholder="例如: http://localhost:8123"
+                                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700">请求头配置</label>
+                                {headers.map((header, index) => (
+                                    <div key={index} className="bg-gray-50 rounded-lg p-4">
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <input
+                                                    type="text"
+                                                    id={`header-key-${index}`}
+                                                    value={header.key}
+                                                    onChange={(e) => updateHeader(index, "key", e.target.value)}
+                                                    placeholder="例如: authorization"
+                                                    required
+                                                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                                                />
+                                            </div>
+                                            <div>
+                                                <input
+                                                    type="text"
+                                                    id={`header-value-${index}`}
+                                                    value={header.value}
+                                                    onChange={(e) => updateHeader(index, "value", e.target.value)}
+                                                    placeholder="例如: Bearer token；无则填 1"
+                                                    required
+                                                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                                                />
+                                            </div>
+                                        </div>
+                                        {index > 0 && (
+                                            <button
+                                                type="button"
+                                                onClick={() => removeHeader(index)}
+                                                className="text-red-600 hover:text-red-700 text-sm font-medium flex items-center space-x-1 transition-colors"
+                                            >
+                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path
+                                                        strokeLinecap="round"
+                                                        strokeLinejoin="round"
+                                                        strokeWidth="2"
+                                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                                    />
+                                                </svg>
+                                                <span>删除此请求头</span>
+                                            </button>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="flex items-center space-x-3">
+                                <input
+                                    type="checkbox"
+                                    id="with-credentials"
+                                    checked={withCredentials}
+                                    onChange={(e) => setWithCredentials(e.target.checked)}
+                                    className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                                />
+                                <label htmlFor="with-credentials" className="text-sm text-gray-700">
+                                    启用 withCredentials（跨域请求时发送 Cookie）
+                                </label>
+                            </div>
+
+                            <div className="flex flex-col sm:flex-row gap-4 pt-4">
+                                <button
+                                    type="button"
+                                    onClick={addHeader}
+                                    className="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium flex items-center justify-center space-x-2"
+                                >
+                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                    </svg>
+                                    <span>添加请求头</span>
+                                </button>
+                                <button
+                                    type="submit"
+                                    className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center justify-center space-x-2"
+                                >
+                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span>保存配置</span>
+                                </button>
+                            </div>
+                        </form>
                     </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>
         </div>
     );
 };

package/src/memory/BaseDB.ts

@@ -0,0 +1,92 @@
+import { IDBPDatabase } from "idb";
+
+/**
+ * 数据库记录的基本接口
+ */
+export interface BaseRecord {
+    id?: number;
+    [key: string]: any;
+}
+
+/**
+ * 数据库配置的基本接口
+ */
+export interface BaseDBConfig {
+    dbName: string;
+    dbVersion: number;
+    storeName: string;
+}
+
+/**
+ * 数据库操作的抽象基类
+ */
+export abstract class BaseDB<T extends BaseRecord> {
+    protected isInitialized: boolean = false;
+    protected config: BaseDBConfig;
+
+    constructor(config: BaseDBConfig) {
+        this.config = config;
+    }
+
+    /**
+     * 初始化数据库
+     */
+    public abstract initialize(): Promise<void>;
+
+    /**
+     * 添加记录
+     */
+    public abstract insert(record: Partial<T>): Promise<number>;
+
+    /**
+     * 更新记录
+     */
+    public abstract update(id: number, record: Partial<T>): Promise<void>;
+
+    /**
+     * 删除记录
+     */
+    public abstract delete(id: number): Promise<void>;
+
+    /**
+     * 查询记录
+     */
+    public abstract query(
+        query: string,
+        options?: {
+            prefix?: boolean;
+            fields?: string[];
+            limit?: number;
+            fuzzy?: number;
+        }
+    ): Promise<T[]>;
+
+    public abstract get(id: number): Promise<T | undefined>;
+
+    /**
+     * 获取所有记录
+     */
+    public abstract getAll(): Promise<T[]>;
+}
+
+// 定义向量类型
+export type Vector = number[];
+// 定义数据库记录类型
+export interface MemoryRecord extends BaseRecord {
+    vector?: Vector | BigUint64Array;
+    text: string;
+    /**
+     * 记忆存储的路径，与 Linux 文件系统一致
+     * @example memory://user_id/path/to/memory
+     */
+    path: string;
+    /**
+     * 引用文档的 path
+     */
+    referencePath?: string;
+    type: string;
+    /**
+     * 记忆的标签，用于检索
+     */
+    tags: string[];
+}

package/src/memory/db.ts

@@ -0,0 +1,232 @@
+import { openDB, DBSchema, IDBPDatabase } from "idb";
+import { BaseDB, BaseRecord, BaseDBConfig, MemoryRecord, Vector } from "./BaseDB";
+
+type BinaryVector = number[];
+
+// 定义数据库模式
+interface VecDBSchema extends DBSchema {
+    vectors: {
+        key: number;
+        value: MemoryRecord;
+    };
+}
+
+// 定义默认模型类型
+const defaultModel = "default";
+
+// 向量化文本的抽象基类
+abstract class TextVectorizer {
+    protected model: string;
+
+    constructor(model: string = defaultModel) {
+        this.model = model;
+    }
+
+    abstract vectorize(text: string): Promise<Vector>;
+}
+
+class OpenAIVectorizer extends TextVectorizer {
+    private apiKey: string;
+    public apiEndpoint: string;
+
+    constructor(model: string = "text-embedding-ada-002", { apiKey, apiEndpoint }: { apiKey: string; apiEndpoint: string }) {
+        super(model);
+        this.apiKey = apiKey;
+        this.apiEndpoint = apiEndpoint;
+    }
+
+    async vectorize(text: string): Promise<Vector> {
+        try {
+            const response = await fetch(this.apiEndpoint, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${this.apiKey}`,
+                },
+                body: JSON.stringify({
+                    input: text,
+                    model: this.model,
+                }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`OpenAI API error: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            return data.data[0].embedding;
+        } catch (error) {
+            throw new Error(`Error vectorizing text: ${error}`);
+        }
+    }
+}
+const cosineSimilarity = (vecA: Vector, vecB: Vector): number => {
+    const dotProduct = vecA.reduce((sum: number, val: number, index: number) => sum + val * vecB[index], 0);
+    const magnitudeA = Math.sqrt(vecA.reduce((sum: number, val: number) => sum + val * val, 0));
+    const magnitudeB = Math.sqrt(vecB.reduce((sum: number, val: number) => sum + val * val, 0));
+    return dotProduct / (magnitudeA * magnitudeB);
+};
+
+const binarizeVector = (vector: Vector, threshold: number | null = null): BinaryVector => {
+    if (threshold === null) {
+        const sorted = [...vector].sort((a, b) => a - b);
+        const mid = Math.floor(sorted.length / 2);
+        threshold = sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+    }
+    return vector.map((val: number) => (val >= threshold! ? 1 : 0));
+};
+
+interface VecDBConfig extends BaseDBConfig {
+    vectorizer: TextVectorizer;
+}
+
+interface QueryOptions {
+    limit?: number;
+}
+
+class VecDB extends BaseDB<MemoryRecord> {
+    private vectorizer: TextVectorizer;
+    protected db!: IDBPDatabase<VecDBSchema>;
+    constructor(config: VecDBConfig) {
+        super(config);
+        this.vectorizer = config.vectorizer;
+    }
+
+    public async initialize(): Promise<void> {
+        if (this.isInitialized) {
+            return;
+        }
+
+        this.db = await openDB<VecDBSchema>(this.config.dbName, this.config.dbVersion, {
+            upgrade(db) {
+                if (!db.objectStoreNames.contains("vectors")) {
+                    db.createObjectStore("vectors", {
+                        keyPath: "id",
+                        autoIncrement: true,
+                    });
+                }
+            },
+        });
+        this.isInitialized = true;
+    }
+
+    public async insert(data: MemoryRecord): Promise<number> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+
+        try {
+            let embedding = data.vector;
+            if (!embedding) {
+                embedding = await this.vectorizer.vectorize(data.text!);
+            }
+
+            const transaction = this.db.transaction("vectors", "readwrite");
+            const store = transaction.objectStore("vectors");
+            const { vector: _, ...rest } = data;
+            const record = { vector: embedding, ...rest };
+            const key = await store.add(record);
+            return Number(key);
+        } catch (error) {
+            throw new Error(`Error inserting data: ${error}`);
+        }
+    }
+
+    public async update(key: number, data: MemoryRecord): Promise<void> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+
+        const transaction = this.db.transaction("vectors", "readwrite");
+        const store = transaction.objectStore("vectors");
+        const vector = data["vector"] as Vector;
+        const updatedData = { ...data, id: key, vector };
+        await store.put(updatedData);
+    }
+
+    public async delete(key: number): Promise<void> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+
+        const transaction = this.db.transaction("vectors", "readwrite");
+        const store = transaction.objectStore("vectors");
+        await store.delete(key);
+    }
+
+    public async query(queryText: string, { limit = 10 }: QueryOptions = {}): Promise<Array<MemoryRecord & { similarity: number }>> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+
+        try {
+            const queryVector = await this.vectorizer.vectorize(queryText);
+            const transaction = this.db.transaction("vectors", "readonly");
+            const store = transaction.objectStore("vectors");
+            const vectors = await store.getAll();
+
+            const similarities = vectors.map((entry) => {
+                const vector = entry.vector as Vector;
+                const similarity = cosineSimilarity(queryVector, vector);
+                return { ...entry, similarity };
+            });
+
+            similarities.sort((a, b) => b.similarity - a.similarity);
+            return similarities.slice(0, limit);
+        } catch (error) {
+            throw new Error(`Error querying vectors: ${error}`);
+        }
+    }
+
+    public async get(id: number): Promise<MemoryRecord | undefined> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+        return this.db.transaction("vectors", "readonly").objectStore("vectors").get(id);
+    }
+    public async getAll(): Promise<MemoryRecord[]> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+
+        const transaction = this.db.transaction("vectors", "readonly");
+        const store = transaction.objectStore("vectors");
+        return store.getAll();
+    }
+
+    // 保留原有的 insertBinary 方法作为特殊方法
+    async insertBinary(data: MemoryRecord): Promise<number> {
+        if (!this.isInitialized) {
+            await this.initialize();
+        }
+
+        try {
+            let embedding = data["vector"] as Vector;
+            if (data.text) {
+                embedding = await this.vectorizer.vectorize(data.text);
+            }
+
+            const binaryEmbedding = binarizeVector(embedding);
+            const packedEmbedding = new BigUint64Array(new ArrayBuffer(Math.ceil(binaryEmbedding.length / 64) * 8));
+            for (let i = 0; i < binaryEmbedding.length; i++) {
+                const bitIndex = i % 64;
+                const arrayIndex = Math.floor(i / 64);
+                if (binaryEmbedding[i] === 1) {
+                    packedEmbedding[arrayIndex] |= 1n << BigInt(bitIndex);
+                }
+            }
+
+            const transaction = this.db.transaction("vectors", "readwrite");
+            const store = transaction.objectStore("vectors");
+            const { vector: _, ...rest } = data;
+            const record = { vector: packedEmbedding, ...rest };
+            const key = await store.add(record);
+            return Number(key);
+        } catch (error) {
+            throw new Error(`Error inserting binary data: ${error}`);
+        }
+    }
+}
+
+export { VecDB, TextVectorizer, OpenAIVectorizer };
+export type { Vector, BinaryVector, MemoryRecord, VecDBConfig };