npm - @langgraph-js/ui - Versions diffs - 1.2.0 → 1.2.1 - Mend

@langgraph-js/ui 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/LICENSE +201 -201
package/README.md +6 -6
package/cli.mjs +36 -36
package/dist/assets/{index-Du4LMUX2.css → index-BlHtM5cu.css} +1 -1
package/dist/assets/index-C7SfDwhG.js +192 -0
package/dist/index.html +14 -14
package/index.html +22 -22
package/package.json +8 -9
package/src/chat/Chat.tsx +151 -164
package/src/chat/FileUpload/index.ts +105 -105
package/src/chat/chat.css +403 -403
package/src/chat/components/FileList.css +128 -128
package/src/chat/components/FileList.tsx +73 -73
package/src/chat/components/HistoryList.tsx +192 -192
package/src/chat/components/JsonEditorPopup.css +80 -80
package/src/chat/components/JsonEditorPopup.tsx +56 -56
package/src/chat/components/JsonToMessage/JsonToMessage.css +104 -0
package/src/chat/components/JsonToMessage/JsonToMessage.tsx +114 -0
package/src/chat/components/JsonToMessage/JsonToMessageButton.tsx +27 -0
package/src/chat/components/JsonToMessage/index.tsx +5 -0
package/src/chat/components/MessageAI.tsx +24 -24
package/src/chat/components/MessageBox.tsx +39 -0
package/src/chat/components/MessageHuman.tsx +55 -55
package/src/chat/components/MessageTool.tsx +46 -46
package/src/chat/components/UsageMetadata.tsx +40 -40
package/src/chat/context/ChatContext.tsx +31 -29
package/src/chat/context/ExtraParamsContext.tsx +41 -41
package/src/chat/store/index.ts +25 -24
package/src/chat/tools.ts +33 -33
package/src/chat/types.ts +16 -16
package/src/hooks/useLocalStorage.ts +27 -27
package/src/index.ts +1 -1
package/src/login/Login.css +93 -93
package/src/login/Login.tsx +92 -92
package/test/App.tsx +9 -9
package/test/main.tsx +5 -5
package/test/vite-env.d.ts +1 -1
package/tsconfig.json +21 -21
package/tsconfig.node.json +9 -9
package/vite.config.ts +17 -17
package/dist/assets/index-BHPbGlnP.js +0 -192

package/dist/index.html CHANGED Viewed

@@ -1,9 +1,9 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite App</title>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
         <style>
             body,
             #root,
@@ -13,11 +13,11 @@
                 width: 100%;
                 height: 100%;
             }
-        </style>
-      <script type="module" crossorigin src="/assets/index-BHPbGlnP.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-Du4LMUX2.css">
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>
-</html>
+        </style>
+      <script type="module" crossorigin src="/assets/index-C7SfDwhG.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-BlHtM5cu.css">
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

package/index.html CHANGED Viewed

@@ -1,22 +1,22 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite App</title>
-        <style>
-            body,
-            #root,
-            html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="./test/main.tsx"></script>
-    </body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+        <style>
+            body,
+            #root,
+            html {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./test/main.tsx"></script>
+    </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -12,21 +12,20 @@
   "main": "./dist/react/src/index.js",
   "type": "module",
   "dependencies": {
-    "@langgraph-js/langgraph-pg": "^1.1.2",
     "@nanostores/react": "^1.0.0",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "nanostores": "^1.0.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.2.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "vite": "^6.3.5",
-    "@langgraph-js/sdk": "1.1.7"
+    "@langgraph-js/sdk": "1.1.9"
   },
   "devDependencies": {
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3"
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4"
   },
   "scripts": {
     "dev": "vite",

package/src/chat/Chat.tsx CHANGED Viewed

@@ -1,164 +1,151 @@
-import React, { useState, useEffect } from "react";
-import "./chat.css";
-import MessageHuman from "./components/MessageHuman";
-import MessageAI from "./components/MessageAI";
-import MessageTool from "./components/MessageTool";
-import HistoryList from "./components/HistoryList";
-import { ChatProvider, useChat } from "./context/ChatContext";
-import { ExtraParamsProvider, useExtraParams } from "./context/ExtraParamsContext";
-import { UsageMetadata } from "./components/UsageMetadata";
-import { formatTime, formatTokens, getMessageContent, Message } from "@langgraph-js/sdk";
-import FileList from "./components/FileList";
-import JsonEditorPopup from "./components/JsonEditorPopup";
-const ChatMessages: React.FC = () => {
-    const { renderMessages, loading, inChatError, client, collapsedTools, toggleToolCollapse } = useChat();
-    return (
-        <div className="chat-messages">
-            {renderMessages.map((message) =>
-                message.type === "human" ? (
-                    <MessageHuman content={message.content} key={message.unique_id} />
-                ) : message.type === "tool" ? (
-                    <MessageTool
-                        key={message.unique_id}
-                        message={message}
-                        client={client!}
-                        getMessageContent={getMessageContent}
-                        formatTokens={formatTokens}
-                        isCollapsed={collapsedTools.includes(message.id!)}
-                        onToggleCollapse={() => toggleToolCollapse(message.id!)}
-                    />
-                ) : (
-                    <MessageAI key={message.unique_id} message={message} />
-                )
-            )}
-            {loading && <div className="loading-indicator">正在思考中...</div>}
-            {inChatError && <div className="error-message">{inChatError}</div>}
-        </div>
-    );
-};
-const ChatInput: React.FC = () => {
-    const { userInput, setUserInput, loading, sendMessage, stopGeneration, currentAgent, setCurrentAgent, client } = useChat();
-    const { extraParams } = useExtraParams();
-    const [imageUrls, setImageUrls] = useState<string[]>([]);
-    const handleFileUploaded = (url: string) => {
-        setImageUrls((prev) => [...prev, url]);
-    };
-    const sendMultiModalMessage = () => {
-        const content: Message[] = [
-            {
-                type: "human",
-                content: [
-                    {
-                        type: "text",
-                        text: userInput,
-                    },
-                    ...imageUrls.map((url) => ({
-                        type: "image_url" as const,
-                        image_url: { url },
-                    })),
-                ],
-            },
-        ];
-        sendMessage(content, {
-            extraParams,
-        });
-        // 清空图片列表
-        setImageUrls([]);
-    };
-    const handleKeyPress = (event: React.KeyboardEvent) => {
-        if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            sendMultiModalMessage();
-        }
-    };
-    return (
-        <div className="chat-input">
-            <div className="chat-input-header">
-                <FileList onFileUploaded={handleFileUploaded} />
-                <UsageMetadata usage_metadata={client?.tokenCounter || {}} />
-                <select value={currentAgent} onChange={(e) => setCurrentAgent(e.target.value)}>
-                    {client?.availableAssistants.map((i) => {
-                        return (
-                            <option value={i.graph_id} key={i.graph_id}>
-                                {i.name}
-                            </option>
-                        );
-                    })}
-                </select>
-            </div>
-            <div className="input-container">
-                <textarea
-                    className="input-textarea"
-                    rows={2}
-                    value={userInput}
-                    onChange={(e) => setUserInput(e.target.value)}
-                    onKeyDown={handleKeyPress}
-                    placeholder="输入消息..."
-                    disabled={loading}
-                />
-                <button
-                    className={`send-button ${loading ? "interrupt" : ""}`}
-                    onClick={() => (loading ? stopGeneration() : sendMultiModalMessage())}
-                    disabled={!loading && !userInput.trim() && imageUrls.length === 0}
-                >
-                    {loading ? "中断" : "发送"}
-                </button>
-            </div>
-        </div>
-    );
-};
-const Chat: React.FC = () => {
-    const [isPopupOpen, setIsPopupOpen] = useState(false);
-    const { showHistory, toggleHistoryVisible } = useChat();
-    const { extraParams, setExtraParams } = useExtraParams();
-    return (
-        <div className="chat-container">
-            {showHistory && <HistoryList onClose={() => toggleHistoryVisible()} formatTime={formatTime} />}
-            <div className="chat-main">
-                <div className="chat-header">
-                    <button onClick={() => setIsPopupOpen(true)} className="edit-params-button">
-                        编辑参数
-                    </button>
-                    <button className="history-button" onClick={() => toggleHistoryVisible()}>
-                        历史记录
-                    </button>
-                    <button
-                        className="history-button"
-                        onClick={() => {
-                            localStorage.setItem("code", "");
-                            location.reload();
-                        }}
-                    >
-                        退出登陆
-                    </button>
-                </div>
-                <ChatMessages />
-                <ChatInput />
-                <JsonEditorPopup isOpen={isPopupOpen} initialJson={extraParams} onClose={() => setIsPopupOpen(false)} onSave={setExtraParams} />
-            </div>
-        </div>
-    );
-};
-const ChatWrapper: React.FC = () => {
-    return (
-        <ChatProvider>
-            <ExtraParamsProvider>
-                <Chat />
-            </ExtraParamsProvider>
-        </ChatProvider>
-    );
-};
-export default ChatWrapper;
+import React, { useState } from "react";
+import "./chat.css";
+import { MessagesBox } from "./components/MessageBox";
+import HistoryList from "./components/HistoryList";
+import { ChatProvider, useChat } from "./context/ChatContext";
+import { ExtraParamsProvider, useExtraParams } from "./context/ExtraParamsContext";
+import { UsageMetadata } from "./components/UsageMetadata";
+import { formatTime, Message } from "@langgraph-js/sdk";
+import FileList from "./components/FileList";
+import JsonEditorPopup from "./components/JsonEditorPopup";
+import { JsonToMessageButton } from "./components/JsonToMessage";
+const ChatMessages: React.FC = () => {
+    const { renderMessages, loading, inChatError, client, collapsedTools, toggleToolCollapse } = useChat();
+    return (
+        <div className="chat-messages">
+            <MessagesBox renderMessages={renderMessages} collapsedTools={collapsedTools} toggleToolCollapse={toggleToolCollapse} client={client!} />
+            {loading && <div className="loading-indicator">正在思考中...</div>}
+            {inChatError && <div className="error-message">{JSON.stringify(inChatError)}</div>}
+        </div>
+    );
+};
+const ChatInput: React.FC = () => {
+    const { userInput, setUserInput, loading, sendMessage, stopGeneration, currentAgent, setCurrentAgent, client } = useChat();
+    const { extraParams } = useExtraParams();
+    const [imageUrls, setImageUrls] = useState<string[]>([]);
+    const handleFileUploaded = (url: string) => {
+        setImageUrls((prev) => [...prev, url]);
+    };
+    const _setCurrentAgent = (agent: string) => {
+        localStorage.setItem("agent_name", agent);
+        setCurrentAgent(agent);
+    };
+    const sendMultiModalMessage = () => {
+        const content: Message[] = [
+            {
+                type: "human",
+                content: [
+                    {
+                        type: "text",
+                        text: userInput,
+                    },
+                    ...imageUrls.map((url) => ({
+                        type: "image_url" as const,
+                        image_url: { url },
+                    })),
+                ],
+            },
+        ];
+        sendMessage(content, {
+            extraParams,
+        });
+        // 清空图片列表
+        setImageUrls([]);
+    };
+    const handleKeyPress = (event: React.KeyboardEvent) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            sendMultiModalMessage();
+        }
+    };
+    return (
+        <div className="chat-input">
+            <div className="chat-input-header">
+                <FileList onFileUploaded={handleFileUploaded} />
+                <UsageMetadata usage_metadata={client?.tokenCounter || {}} />
+                <select value={currentAgent} onChange={(e) => _setCurrentAgent(e.target.value)}>
+                    {client?.availableAssistants.map((i) => {
+                        return (
+                            <option value={i.graph_id} key={i.graph_id}>
+                                {i.name}
+                            </option>
+                        );
+                    })}
+                </select>
+            </div>
+            <div className="input-container">
+                <textarea
+                    className="input-textarea"
+                    rows={2}
+                    value={userInput}
+                    onChange={(e) => setUserInput(e.target.value)}
+                    onKeyDown={handleKeyPress}
+                    placeholder="输入消息..."
+                    disabled={loading}
+                />
+                <button
+                    className={`send-button ${loading ? "interrupt" : ""}`}
+                    onClick={() => (loading ? stopGeneration() : sendMultiModalMessage())}
+                    disabled={!loading && !userInput.trim() && imageUrls.length === 0}
+                >
+                    {loading ? "中断" : "发送"}
+                </button>
+            </div>
+        </div>
+    );
+};
+const Chat: React.FC = () => {
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const { showHistory, toggleHistoryVisible } = useChat();
+    const { extraParams, setExtraParams } = useExtraParams();
+    return (
+        <div className="chat-container">
+            {showHistory && <HistoryList onClose={() => toggleHistoryVisible()} formatTime={formatTime} />}
+            <div className="chat-main">
+                <div className="chat-header">
+                    <JsonToMessageButton></JsonToMessageButton>
+                    <button onClick={() => setIsPopupOpen(true)} className="edit-params-button">
+                        编辑参数
+                    </button>
+                    <button className="history-button" onClick={() => toggleHistoryVisible()}>
+                        历史记录
+                    </button>
+                    <button
+                        className="history-button"
+                        onClick={() => {
+                            localStorage.setItem("code", "");
+                            location.reload();
+                        }}
+                    >
+                        退出登陆
+                    </button>
+                </div>
+                <ChatMessages />
+                <ChatInput />
+                <JsonEditorPopup isOpen={isPopupOpen} initialJson={extraParams} onClose={() => setIsPopupOpen(false)} onSave={setExtraParams} />
+            </div>
+        </div>
+    );
+};
+const ChatWrapper: React.FC = () => {
+    return (
+        <ChatProvider>
+            <ExtraParamsProvider>
+                <Chat />
+            </ExtraParamsProvider>
+        </ChatProvider>
+    );
+};
+export default ChatWrapper;

package/src/chat/FileUpload/index.ts CHANGED Viewed

@@ -1,105 +1,105 @@
-/**
- * File Upload SDK - Base client for file upload services
- */
-// Base interfaces
-interface FileUploadClientOptions {
-    apiUrl?: string;
-}
-interface FileUploadOptions {
-    filename?: string;
-    signal?: AbortSignal;
-}
-interface FileUploadResponse {
-    status: string;
-    data?: {
-        url: string;
-        delete_url?: string;
-        expires_at?: string;
-        size?: number;
-        [key: string]: any;
-    };
-    [key: string]: any;
-}
-// Abstract base class for file upload clients
-abstract class FileUploadClient {
-    protected apiUrl: string;
-    constructor(options: FileUploadClientOptions = {}) {
-        this.apiUrl = options.apiUrl || "";
-    }
-    protected abstract getUploadEndpoint(): string;
-    protected abstract processResponse(response: FileUploadResponse): FileUploadResponse;
-    protected createFormData(file: File | Blob | string, filename?: string): FormData {
-        const formData = new FormData();
-        if (typeof file === "string") {
-            const blob = new Blob([file], { type: "text/plain" });
-            formData.append("file", blob, filename || "file.txt");
-        } else {
-            formData.append("file", file, filename || (file instanceof File ? file.name : "file"));
-        }
-        return formData;
-    }
-    public async upload(file: File | Blob | string, options: FileUploadOptions = {}): Promise<FileUploadResponse> {
-        const formData = this.createFormData(file, options.filename);
-        const fetchOptions: RequestInit = {
-            method: "POST",
-            body: formData,
-        };
-        if (options.signal) {
-            fetchOptions.signal = options.signal;
-        }
-        try {
-            const response = await fetch(`${this.apiUrl}${this.getUploadEndpoint()}`, fetchOptions);
-            if (!response.ok) {
-                throw new Error(`Upload failed with status: ${response.status}`);
-            }
-            const result = (await response.json()) as FileUploadResponse;
-            return this.processResponse(result);
-        } catch (error) {
-            throw new Error(`File upload failed: ${error instanceof Error ? error.message : String(error)}`);
-        }
-    }
-}
-/**
- * TmpFiles SDK - A client for uploading files to tmpfiles.org
- */
-export class TmpFilesClient extends FileUploadClient {
-    constructor(options: FileUploadClientOptions = {}) {
-        super({
-            apiUrl: options.apiUrl || "https://tmpfiles.org/api/v1"
-        });
-    }
-    protected getUploadEndpoint(): string {
-        return "/upload";
-    }
-    protected processResponse(response: FileUploadResponse): FileUploadResponse {
-        if (response.data?.url) {
-            response.data.url = response.data.url.replace("https://tmpfiles.org/", "https://tmpfiles.org/dl/");
-        }
-        return response;
-    }
-}
-// Export types for external use
-export type {
-    FileUploadClientOptions,
-    FileUploadOptions,
-    FileUploadResponse
-};
+/**
+ * File Upload SDK - Base client for file upload services
+ */
+// Base interfaces
+interface FileUploadClientOptions {
+    apiUrl?: string;
+}
+interface FileUploadOptions {
+    filename?: string;
+    signal?: AbortSignal;
+}
+interface FileUploadResponse {
+    status: string;
+    data?: {
+        url: string;
+        delete_url?: string;
+        expires_at?: string;
+        size?: number;
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+// Abstract base class for file upload clients
+abstract class FileUploadClient {
+    protected apiUrl: string;
+    constructor(options: FileUploadClientOptions = {}) {
+        this.apiUrl = options.apiUrl || "";
+    }
+    protected abstract getUploadEndpoint(): string;
+    protected abstract processResponse(response: FileUploadResponse): FileUploadResponse;
+    protected createFormData(file: File | Blob | string, filename?: string): FormData {
+        const formData = new FormData();
+        if (typeof file === "string") {
+            const blob = new Blob([file], { type: "text/plain" });
+            formData.append("file", blob, filename || "file.txt");
+        } else {
+            formData.append("file", file, filename || (file instanceof File ? file.name : "file"));
+        }
+        return formData;
+    }
+    public async upload(file: File | Blob | string, options: FileUploadOptions = {}): Promise<FileUploadResponse> {
+        const formData = this.createFormData(file, options.filename);
+        const fetchOptions: RequestInit = {
+            method: "POST",
+            body: formData,
+        };
+        if (options.signal) {
+            fetchOptions.signal = options.signal;
+        }
+        try {
+            const response = await fetch(`${this.apiUrl}${this.getUploadEndpoint()}`, fetchOptions);
+            if (!response.ok) {
+                throw new Error(`Upload failed with status: ${response.status}`);
+            }
+            const result = (await response.json()) as FileUploadResponse;
+            return this.processResponse(result);
+        } catch (error) {
+            throw new Error(`File upload failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+}
+/**
+ * TmpFiles SDK - A client for uploading files to tmpfiles.org
+ */
+export class TmpFilesClient extends FileUploadClient {
+    constructor(options: FileUploadClientOptions = {}) {
+        super({
+            apiUrl: options.apiUrl || "https://tmpfiles.org/api/v1"
+        });
+    }
+    protected getUploadEndpoint(): string {
+        return "/upload";
+    }
+    protected processResponse(response: FileUploadResponse): FileUploadResponse {
+        if (response.data?.url) {
+            response.data.url = response.data.url.replace("https://tmpfiles.org/", "https://tmpfiles.org/dl/");
+        }
+        return response;
+    }
+}
+// Export types for external use
+export type {
+    FileUploadClientOptions,
+    FileUploadOptions,
+    FileUploadResponse
+};