@langgraph-js/ui 1.2.0 → 1.2.1

package/src/chat/components/JsonToMessage/JsonToMessage.css

@@ -0,0 +1,104 @@
+.json-to-message-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.json-to-message-content {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    width: 90%;
+    max-width: 1200px;
+    height: 80vh;
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.json-to-message-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #eaeaea;
+}
+
+.json-to-message-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #333;
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #666;
+}
+
+.close-button:hover {
+    color: #000;
+}
+
+.json-to-message-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+.json-editor-pane {
+    flex: 1;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #eaeaea;
+}
+
+.json-editor-pane textarea {
+    flex: 1;
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;
+    font-size: 0.9rem;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    resize: none;
+}
+
+.error-message {
+    color: #e53e3e;
+    margin-top: 10px;
+    font-size: 0.9rem;
+}
+
+.message-preview-pane {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    background-color: #f9f9f9;
+}
+
+.preview-container {
+    padding: 10px;
+    background-color: white;
+    border-radius: 4px;
+    min-height: 100%;
+}
+
+.no-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #666;
+    font-style: italic;
+}

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

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import { MessagesBox } from "../MessageBox";
+import "./JsonToMessage.css";
+import { RenderMessage } from "@langgraph-js/sdk";
+
+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="json-to-message-overlay">
+            <div className="json-to-message-content">
+                <div className="json-to-message-header">
+                    <h2>JSON 消息预览</h2>
+                    <button onClick={onClose} className="close-button">
+                        ×
+                    </button>
+                </div>
+
+                <div className="json-to-message-body">
+                    <div className="json-editor-pane">
+                        <textarea value={jsonString} onChange={(e) => setJsonString(e.target.value)} rows={20} placeholder="输入JSON消息格式..." />
+                        {error && <p className="error-message">{error}</p>}
+                    </div>
+
+                    <div className="message-preview-pane">
+                        <div className="preview-container chat-messages">
+                            {previewMessages?.length > 0 ? (
+                                <MessagesBox renderMessages={previewMessages} collapsedTools={[]} toggleToolCollapse={() => {}} client={null as any} />
+                            ) : (
+                                <div className="no-preview">请输入有效的JSON以查看消息预览</div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default JsonToMessage;

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

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import JsonToMessage from "./JsonToMessage";
+
+interface JsonToMessageButtonProps {
+    buttonText?: string;
+    initialJson?: string | object;
+    className?: string;
+}
+
+const JsonToMessageButton: React.FC<JsonToMessageButtonProps> = ({ buttonText = "JSON 预览", initialJson, className = "" }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const openModal = () => setIsOpen(true);
+    const closeModal = () => setIsOpen(false);
+
+    return (
+        <>
+            <button className={`history-button ${className}`} onClick={openModal}>
+                {buttonText}
+            </button>
+
+            <JsonToMessage isOpen={isOpen} onClose={closeModal} initialJson={initialJson} />
+        </>
+    );
+};
+
+export default JsonToMessageButton;

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

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

package/src/chat/components/MessageAI.tsx

@@ -1,24 +1,24 @@
-import React from "react";
-import { RenderMessage } from "@langgraph-js/sdk";
-import { UsageMetadata } from "./UsageMetadata";
-import { getMessageContent } from "@langgraph-js/sdk";
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-interface MessageAIProps {
-    message: RenderMessage;
-}
-
-const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
-    return (
-        <div className="message ai">
-            <div className="message-content">
-                <div className="message-text markdown-body">
-                    <Markdown remarkPlugins={[remarkGfm]}>{getMessageContent(message.content)}</Markdown>
-                </div>
-                <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata||{}} spend_time={message.spend_time} />
-            </div>
-        </div>
-    );
-};
-
-export default MessageAI;
+import React from "react";
+import { RenderMessage } from "@langgraph-js/sdk";
+import { UsageMetadata } from "./UsageMetadata";
+import { getMessageContent } from "@langgraph-js/sdk";
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+interface MessageAIProps {
+    message: RenderMessage;
+}
+
+const MessageAI: React.FC<MessageAIProps> = ({ message }) => {
+    return (
+        <div className="message ai">
+            <div className="message-content">
+                <div className="message-text markdown-body">
+                    <Markdown remarkPlugins={[remarkGfm]}>{getMessageContent(message.content)}</Markdown>
+                </div>
+                <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata||{}} spend_time={message.spend_time} />
+            </div>
+        </div>
+    );
+};
+
+export default MessageAI;

package/src/chat/components/MessageBox.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import MessageHuman from "./MessageHuman";
+import MessageAI from "./MessageAI";
+import MessageTool from "./MessageTool";
+import { formatTokens, getMessageContent, LangGraphClient, RenderMessage } from "@langgraph-js/sdk";
+
+export const MessagesBox = ({
+    renderMessages,
+    collapsedTools,
+    toggleToolCollapse,
+    client,
+}: {
+    renderMessages: RenderMessage[];
+    collapsedTools: string[];
+    toggleToolCollapse: (id: string) => void;
+    client: LangGraphClient;
+}) => {
+    return (
+        <>
+            {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} />
+                )
+            )}
+        </>
+    );
+};

package/src/chat/components/MessageHuman.tsx

@@ -1,55 +1,55 @@
-import React from "react";
-interface MessageHumanProps {
-    content: string | any[];
-}
-
-const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
-    const renderContent = () => {
-        if (typeof content === "string") {
-            return <div className="message-text">{content}</div>;
-        }
-
-        if (Array.isArray(content)) {
-            return content.map((item, index) => {
-                switch (item.type) {
-                    case "text":
-                        return (
-                            <div key={index} className="message-text">
-                                {item.text}
-                            </div>
-                        );
-                    case "image_url":
-                        return (
-                            <div key={index} className="message-image">
-                                <img src={item.image_url.url} alt="用户上传的图片" style={{ maxWidth: "200px", borderRadius: "4px" }} />
-                            </div>
-                        );
-                    case "audio":
-                        return (
-                            <div key={index} className="message-audio">
-                                <audio controls src={item.audio_url}>
-                                    您的浏览器不支持音频播放
-                                </audio>
-                            </div>
-                        );
-                    default:
-                        return (
-                            <div key={index} className="message-text">
-                                {JSON.stringify(item)}
-                            </div>
-                        );
-                }
-            });
-        }
-
-        return <div className="message-text">{JSON.stringify(content)}</div>;
-    };
-
-    return (
-        <div className="message human">
-            <div className="message-content">{renderContent()}</div>
-        </div>
-    );
-};
-
-export default MessageHuman;
+import React from "react";
+interface MessageHumanProps {
+    content: string | any[];
+}
+
+const MessageHuman: React.FC<MessageHumanProps> = ({ content }) => {
+    const renderContent = () => {
+        if (typeof content === "string") {
+            return <div className="message-text">{content}</div>;
+        }
+
+        if (Array.isArray(content)) {
+            return content.map((item, index) => {
+                switch (item.type) {
+                    case "text":
+                        return (
+                            <div key={index} className="message-text">
+                                {item.text}
+                            </div>
+                        );
+                    case "image_url":
+                        return (
+                            <div key={index} className="message-image">
+                                <img src={item.image_url.url} alt="用户上传的图片" style={{ maxWidth: "200px", borderRadius: "4px" }} />
+                            </div>
+                        );
+                    case "audio":
+                        return (
+                            <div key={index} className="message-audio">
+                                <audio controls src={item.audio_url}>
+                                    您的浏览器不支持音频播放
+                                </audio>
+                            </div>
+                        );
+                    default:
+                        return (
+                            <div key={index} className="message-text">
+                                {JSON.stringify(item)}
+                            </div>
+                        );
+                }
+            });
+        }
+
+        return <div className="message-text">{JSON.stringify(content)}</div>;
+    };
+
+    return (
+        <div className="message human">
+            <div className="message-content">{renderContent()}</div>
+        </div>
+    );
+};
+
+export default MessageHuman;

package/src/chat/components/MessageTool.tsx

@@ -1,46 +1,46 @@
-import React from "react";
-import { LangGraphClient, RenderMessage, ToolMessage } from "@langgraph-js/sdk";
-import { UsageMetadata } from "./UsageMetadata";
-interface MessageToolProps {
-    message: ToolMessage & RenderMessage;
-    client: LangGraphClient;
-    getMessageContent: (content: any) => string;
-    formatTokens: (tokens: number) => string;
-    isCollapsed: boolean;
-    onToggleCollapse: () => void;
-}
-
-const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageContent, formatTokens, isCollapsed, onToggleCollapse }) => {
-    return (
-        <div className="message tool">
-            {message.name === "ask_user" && !message.additional_kwargs?.done && (
-                <div>
-                    <div>询问 {message.tool_input}</div>
-                    <input
-                        type="text"
-                        onKeyDown={(e) => {
-                            if (e.key === "Enter") {
-                                client.doneFEToolWaiting(message.id!, (e.target as any).value);
-                            }
-                        }}
-                    />
-                </div>
-            )}
-            <div className="tool-message">
-                <div className="tool-header" onClick={onToggleCollapse}>
-                    <div className="tool-title">{message.name}</div>
-                </div>
-
-                {!isCollapsed && (
-                    <div className="tool-content">
-                        <div className="tool-input">{message.tool_input}</div>
-                        <div className="tool-output">{getMessageContent(message.content)}</div>
-                        <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata || {}} spend_time={message.spend_time} />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default MessageTool;
+import React from "react";
+import { LangGraphClient, RenderMessage, ToolMessage } from "@langgraph-js/sdk";
+import { UsageMetadata } from "./UsageMetadata";
+interface MessageToolProps {
+    message: ToolMessage & RenderMessage;
+    client: LangGraphClient;
+    getMessageContent: (content: any) => string;
+    formatTokens: (tokens: number) => string;
+    isCollapsed: boolean;
+    onToggleCollapse: () => void;
+}
+
+const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageContent, formatTokens, isCollapsed, onToggleCollapse }) => {
+    return (
+        <div className="message tool">
+            {message.name === "ask_user" && !message.additional_kwargs?.done && (
+                <div>
+                    <div>询问 {message.tool_input}</div>
+                    <input
+                        type="text"
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                client.doneFEToolWaiting(message.id!, (e.target as any).value);
+                            }
+                        }}
+                    />
+                </div>
+            )}
+            <div className="tool-message">
+                <div className="tool-header" onClick={onToggleCollapse}>
+                    <div className="tool-title">{message.name}</div>
+                </div>
+
+                {!isCollapsed && (
+                    <div className="tool-content">
+                        <div className="tool-input">{message.tool_input}</div>
+                        <div className="tool-output">{getMessageContent(message.content)}</div>
+                        <UsageMetadata response_metadata={message.response_metadata as any} usage_metadata={message.usage_metadata || {}} spend_time={message.spend_time} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MessageTool;

package/src/chat/components/UsageMetadata.tsx

@@ -1,40 +1,40 @@
-interface UsageMetadataProps {
-    usage_metadata: Partial<{
-        input_tokens: number;
-        output_tokens: number;
-        total_tokens: number;
-    }>;
-    response_metadata?:{
-        model_name?: string;
-    }
-    spend_time?: number;
-}
-
-export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time ,response_metadata}) => {
-    const formatTokens = (tokens: number) => {
-        return tokens.toString();
-    };
-
-    return (
-        <div className="message-meta">
-            <div className="token-info">
-                <span className="token-item">
-                    <span className="token-emoji">📥</span>
-                    {formatTokens(usage_metadata.input_tokens || 0)}
-                </span>
-                <span className="token-item">
-                    <span className="token-emoji">📤</span>
-                    {formatTokens(usage_metadata.output_tokens || 0)}
-                </span>
-                <span className="token-item">
-                    <span className="token-emoji">📊</span>
-                    {formatTokens(usage_metadata.total_tokens || 0)}
-                </span>
-            </div>
-            <div>
-                {response_metadata?.model_name}
-            </div>
-            <span className="message-time">{spend_time ? `${(spend_time / 1000).toFixed(2)}s` : ""}</span>
-        </div>
-    );
-};
+interface UsageMetadataProps {
+    usage_metadata: Partial<{
+        input_tokens: number;
+        output_tokens: number;
+        total_tokens: number;
+    }>;
+    response_metadata?:{
+        model_name?: string;
+    }
+    spend_time?: number;
+}
+
+export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time ,response_metadata}) => {
+    const formatTokens = (tokens: number) => {
+        return tokens.toString();
+    };
+
+    return (
+        <div className="message-meta">
+            <div className="token-info">
+                <span className="token-item">
+                    <span className="token-emoji">📥</span>
+                    {formatTokens(usage_metadata.input_tokens || 0)}
+                </span>
+                <span className="token-item">
+                    <span className="token-emoji">📤</span>
+                    {formatTokens(usage_metadata.output_tokens || 0)}
+                </span>
+                <span className="token-item">
+                    <span className="token-emoji">📊</span>
+                    {formatTokens(usage_metadata.total_tokens || 0)}
+                </span>
+            </div>
+            <div>
+                {response_metadata?.model_name}
+            </div>
+            <span className="message-time">{spend_time ? `${(spend_time / 1000).toFixed(2)}s` : ""}</span>
+        </div>
+    );
+};