@langgraph-js/ui 3.0.1 → 3.1.0

package/src/artifacts/ArtifactsContext.tsx

@@ -1,99 +0,0 @@
-import React, { createContext, useContext, useState, ReactNode, useEffect } from "react";
-import { useChat } from "@langgraph-js/sdk/react";
-import { Message } from "@langgraph-js/sdk";
-
-interface Artifact {
-    id: string;
-    code: string;
-    filename: string;
-    filetype: string;
-    version: number;
-}
-
-interface ArtifactsContextType {
-    artifacts: Artifact[];
-    currentArtifact: Artifact | null;
-    setCurrentArtifactById: (id: string) => void;
-    getArtifactVersions: (filename: string) => Artifact[];
-    showArtifact: boolean;
-    setShowArtifact: (show: boolean) => void;
-}
-
-const ArtifactsContext = createContext<ArtifactsContextType>({
-    artifacts: [],
-    currentArtifact: null,
-    setCurrentArtifactById: () => {},
-    getArtifactVersions: () => [],
-    showArtifact: false,
-    setShowArtifact: () => {},
-});
-
-export const useArtifacts = () => useContext(ArtifactsContext);
-
-interface ArtifactsProviderProps {
-    children: ReactNode;
-}
-
-export const ArtifactsProvider: React.FC<ArtifactsProviderProps> = ({ children }) => {
-    const [artifacts, setArtifacts] = useState<Artifact[]>([]);
-    const [showArtifact, setShowArtifact] = useState(false);
-    const { renderMessages } = useChat();
-    const [currentArtifact, setCurrentArtifact] = useState<Artifact | null>(null);
-
-    // 获取指定文件名的所有版本
-    const getArtifactVersions = (filename: string) => {
-        return artifacts.filter((artifact) => artifact.filename === filename).sort((a, b) => a.version - b.version);
-    };
-
-    useEffect(() => {
-        if (!renderMessages) return;
-
-        const createArtifacts = renderMessages.filter((message) => message.type === "tool").filter((message) => message.name === "create_artifacts");
-
-        // 创建文件名到最新版本的映射
-        const filenameToLatestVersion = new Map<string, number>();
-
-        // 处理每个 artifact，分配版本号
-        const processedArtifacts = createArtifacts.map((message) => {
-            const content = JSON.parse(message.tool_input as string);
-            const filename = content.filename;
-
-            // 获取当前文件名的最新版本号
-            const currentVersion = filenameToLatestVersion.get(filename) || 0;
-            const newVersion = currentVersion + 1;
-
-            // 更新最新版本号
-            filenameToLatestVersion.set(filename, newVersion);
-
-            return {
-                id: message.id!,
-                code: content.code,
-                filename: filename,
-                version: newVersion,
-                filetype: content.filetype,
-            };
-        });
-
-        setArtifacts(processedArtifacts);
-    }, [renderMessages]);
-
-    const setCurrentArtifactById = (id: string) => {
-        setShowArtifact(true);
-        setCurrentArtifact(artifacts.find((artifact) => artifact.id === id) || null);
-    };
-
-    return (
-        <ArtifactsContext.Provider
-            value={{
-                artifacts,
-                currentArtifact,
-                setCurrentArtifactById,
-                getArtifactVersions,
-                showArtifact,
-                setShowArtifact,
-            }}
-        >
-            {children}
-        </ArtifactsContext.Provider>
-    );
-};

package/src/artifacts/SourceCodeViewer.tsx

@@ -1,15 +0,0 @@
-import { useArtifacts } from "./ArtifactsContext";
-
-export const SourceCodeViewer: React.FC = () => {
-    const { currentArtifact } = useArtifacts();
-
-    if (!currentArtifact) {
-        return <div className="h-full w-full flex items-center justify-center text-gray-500">请选择一个文件</div>;
-    }
-
-    return (
-        <div className="h-full w-full overflow-auto">
-            <pre>{currentArtifact.code}</pre>
-        </div>
-    );
-};

package/src/chat/components/JSONViewer.tsx

@@ -1,18 +0,0 @@
-export const JSONViewer = (props: { data: any }) => {
-    return (
-        /** @ts-ignore */
-        <andypf-json-viewer
-            indent="4"
-            expanded="4"
-            theme="default-light"
-            show-data-types="false"
-            show-toolbar="false"
-            expand-icon-type="circle"
-            show-copy="true"
-            show-size="true"
-            data={JSON.stringify(props.data)}
-        >
-            {/* @ts-ignore */}
-        </andypf-json-viewer>
-    );
-};

package/src/chat/components/JsonToMessage/JsonToMessage.tsx

@@ -1,120 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { MessagesBox } from "../MessageBox";
-import { RenderMessage } from "@langgraph-js/sdk";
-import { X } from "lucide-react";
-
-interface JsonToMessageProps {
-    isOpen: boolean;
-    onClose: () => void;
-    initialJson?: string | object;
-}
-
-const JsonToMessage: React.FC<JsonToMessageProps> = ({ isOpen, onClose, initialJson }) => {
-    const [jsonString, setJsonString] = useState<string>("");
-    const [error, setError] = useState<string | null>(null);
-    const [previewMessages, setPreviewMessages] = useState<RenderMessage[]>([]);
-
-    useEffect(() => {
-        // 重置状态当弹窗打开时
-        if (isOpen) {
-            let initialJsonContent = "";
-
-            if (initialJson) {
-                if (typeof initialJson === "string") {
-                    initialJsonContent = initialJson;
-                } else {
-                    try {
-                        initialJsonContent = JSON.stringify(initialJson, null, 2);
-                    } catch (e) {
-                        console.error("Failed to stringify initial JSON", e);
-                        initialJsonContent = "";
-                    }
-                }
-            } else {
-                // 默认示例消息
-                initialJsonContent = JSON.stringify([], null, 2);
-            }
-
-            setJsonString(initialJsonContent);
-            setError(null);
-
-            // 初始化时尝试解析
-            try {
-                updatePreview(initialJsonContent);
-            } catch (e) {
-                console.error("Failed to parse initial JSON", e);
-            }
-        }
-    }, [isOpen, initialJson]);
-
-    // 解析JSON并更新预览
-    const updatePreview = (jsonInput: string) => {
-        try {
-            const parsedJson = JSON.parse(jsonInput);
-            let message: RenderMessage[] = [];
-            if (Array.isArray(parsedJson)) {
-                message = parsedJson;
-            } else {
-                message = parsedJson.messages;
-            }
-            // 确保消息有必要的字段
-            if (!Array.isArray(message)) {
-                throw new Error("JSON 格式无效，请检查后重试");
-            }
-            setPreviewMessages(message);
-            setError(null);
-        } catch (e) {
-            setError("JSON 格式无效，请检查后重试");
-            console.error("Invalid JSON format:", e);
-        }
-    };
-
-    // 当JSON输入变化时更新预览
-    useEffect(() => {
-        if (jsonString) {
-            updatePreview(jsonString);
-        }
-    }, [jsonString]);
-
-    if (!isOpen) {
-        return null;
-    }
-
-    return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-            <div className="bg-white rounded-lg shadow-xl w-[90%] max-w-[1200px] h-[80vh] max-h-[800px] flex flex-col overflow-hidden">
-                <div className="flex justify-between items-center p-4 border-b border-gray-200">
-                    <h2 className="text-xl font-semibold text-gray-900">JSON 消息预览</h2>
-                    <button onClick={onClose} className="p-1.5 text-gray-500 hover:text-gray-900 transition-colors rounded-lg hover:bg-gray-100">
-                        <X className="w-5 h-5" />
-                    </button>
-                </div>
-
-                <div className="flex flex-1 overflow-hidden">
-                    <div className="flex-1 p-4 flex flex-col border-r border-gray-200">
-                        <textarea
-                            value={jsonString}
-                            onChange={(e) => setJsonString(e.target.value)}
-                            rows={20}
-                            placeholder="输入JSON消息格式..."
-                            className="flex-1 font-mono text-sm p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-                        />
-                        {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
-                    </div>
-
-                    <div className="flex-1 p-4 overflow-y-auto bg-gray-50">
-                        <div className="bg-white rounded-lg p-4 min-h-full">
-                            {previewMessages?.length > 0 ? (
-                                <MessagesBox renderMessages={previewMessages} collapsedTools={[]} toggleToolCollapse={() => {}} client={null as any} />
-                            ) : (
-                                <div className="flex items-center justify-center h-full text-gray-500 italic">请输入有效的JSON以查看消息预览</div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default JsonToMessage;

package/src/chat/components/JsonToMessage/JsonToMessageButton.tsx

@@ -1,20 +0,0 @@
-import React, { useState } from "react";
-import JsonToMessage from "./JsonToMessage";
-import { FileJson } from "lucide-react";
-
-export const JsonToMessageButton: React.FC = () => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <button
-                onClick={() => setIsOpen(true)}
-                className="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center gap-1.5"
-            >
-                <FileJson className="w-4 h-4" />
-                JSON 消息
-            </button>
-            <JsonToMessage isOpen={isOpen} onClose={() => setIsOpen(false)} />
-        </>
-    );
-};

package/src/chat/components/JsonToMessage/index.tsx

@@ -1,5 +0,0 @@
-import JsonToMessage from "./JsonToMessage";
-import { JsonToMessageButton } from "./JsonToMessageButton";
-
-export { JsonToMessage, JsonToMessageButton };
-export default JsonToMessage;

package/src/chat/context/ChatContext.tsx

@@ -1,83 +0,0 @@
-import React, { createContext, useContext, useMemo, ReactNode, useEffect } from "react";
-import { createChatStore } from "@langgraph-js/sdk";
-import { UnionStore, useUnionStore } from "@langgraph-js/sdk";
-import { useStore } from "@nanostores/react";
-
-type ChatContextType = UnionStore<ReturnType<typeof createChatStore>>;
-
-const ChatContext = createContext<ChatContextType | undefined>(undefined);
-
-export const useChat = (): ChatContextType => {
-    const context = useContext(ChatContext);
-    if (!context) {
-        throw new Error("useChat must be used within a ChatProvider");
-    }
-    return context;
-};
-
-interface ChatProviderProps {
-    children: ReactNode;
-    defaultAgent?: string;
-    apiUrl?: string;
-    defaultHeaders?: Record<string, string>;
-    withCredentials?: boolean;
-    showHistory?: boolean;
-    showGraph?: boolean;
-    onInitError?: (error: any, currentAgent: string) => void;
-}
-
-export const ChatProvider: React.FC<ChatProviderProps> = ({
-    children,
-    defaultAgent = "",
-    apiUrl = "http://localhost:8123",
-    defaultHeaders = {},
-    withCredentials = false,
-    showHistory = false,
-    showGraph = false,
-    onInitError,
-}) => {
-    const store = useMemo(() => {
-        const F = withCredentials
-            ? (url: string, options: RequestInit) => {
-                  options.credentials = "include";
-                  return fetch(url, options);
-              }
-            : fetch;
-
-        return createChatStore(
-            defaultAgent,
-            {
-                apiUrl,
-                defaultHeaders,
-                callerOptions: {
-                    fetch: F,
-                    maxRetries: 1,
-                },
-            },
-            {
-                showHistory,
-                showGraph,
-            }
-        );
-    }, [defaultAgent, apiUrl, defaultHeaders, withCredentials, showHistory, showGraph]);
-
-    const unionStore = useUnionStore(store, useStore);
-
-    useEffect(() => {
-        unionStore
-            .initClient()
-            .then((res) => {
-                if (unionStore.showHistory) {
-                    unionStore.refreshHistoryList();
-                }
-            })
-            .catch((err) => {
-                console.error(err);
-                if (onInitError) {
-                    onInitError(err, unionStore.currentAgent);
-                }
-            });
-    }, [unionStore, onInitError]);
-
-    return <ChatContext.Provider value={unionStore}>{children}</ChatContext.Provider>;
-};

package/src/memory/BaseDB.ts

@@ -1,92 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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 };