@langgraph-js/ui 5.2.0 → 5.4.0

package/src/chat/components/MessageHuman.tsx

@@ -1,7 +1,8 @@
 import { RenderMessage } from "@langgraph-js/sdk";
 import { useChat } from "@langgraph-js/sdk/react";
-import React from "react";
-import { RotateCcw, Undo } from "lucide-react";
+import React, { useState } from "react";
+import { RotateCcw, Undo, ChevronDown, ChevronUp, Edit3, Check, X } from "lucide-react";
+import { useExtraParams } from "../context/ExtraParamsContext";
 
 interface MessageHumanProps {
     message: RenderMessage;
@@ -54,9 +55,76 @@ const parseFileTags = (text: string): any[] => {
 
 const MessageHuman: React.FC<MessageHumanProps> = ({ message, content }) => {
     const chat = useChat();
+    const { extraParams } = useExtraParams();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editedContent, setEditedContent] = useState<string>("");
+
+    // 获取纯文本内容用于编辑
+    const getTextContent = (content: string | any[]): string => {
+        if (typeof content === "string") {
+            return content;
+        }
+        if (Array.isArray(content)) {
+            return content
+                .filter((item) => item.type === "text" && typeof item.text === "string")
+                .map((item) => item.text)
+                .join("");
+        }
+        return "";
+    };
+
+    // 处理双击进入编辑模式
+    const handleDoubleClick = () => {
+        setIsEditing(true);
+        setEditedContent(getTextContent(content));
+    };
+
+    // 确认编辑并调用 revertChatTo + sendMessage
+    const handleEditConfirm = async () => {
+        if (editedContent.trim() !== getTextContent(content)) {
+            await chat.revertChatTo(message.id!, false, { includeMessageId: true }); // 先回退到该消息
+            await chat.sendMessage([{ type: "human", content: editedContent }], { extraParams }); // 发送编辑的内容
+        }
+        setIsEditing(false);
+        setEditedContent("");
+    };
+
+    // 取消编辑
+    const handleEditCancel = () => {
+        setIsEditing(false);
+        setEditedContent("");
+    };
+
     const renderContent = () => {
+        if (isEditing) {
+            return (
+                <div className="flex flex-col gap-2">
+                    <textarea
+                        value={editedContent}
+                        onChange={(e) => setEditedContent(e.target.value)}
+                        className="w-full bg-transparent text-white rounded px-3 py-2 min-h-[120px] resize-none border-2 border-blue-400 outline-none"
+                        placeholder="编辑消息内容..."
+                        autoFocus
+                    />
+                    <div className="flex gap-2 justify-end">
+                        <button onClick={handleEditConfirm} className="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700 transition-colors" title="确认编辑">
+                            <Check size={14} />
+                        </button>
+                        <button onClick={handleEditCancel} className="px-3 py-1 bg-gray-600 text-white rounded text-sm hover:bg-gray-700 transition-colors" title="取消编辑">
+                            <X size={14} />
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
         if (typeof content === "string") {
-            return <div className="text-white whitespace-pre-wrap">{content}</div>;
+            return (
+                <div className="text-white whitespace-pre-wrap cursor-pointer" onDoubleClick={handleDoubleClick} title="双击编辑">
+                    {content}
+                </div>
+            );
         }
 
         if (Array.isArray(content)) {
@@ -78,7 +146,7 @@ const MessageHuman: React.FC<MessageHumanProps> = ({ message, content }) => {
                     switch (item.type) {
                         case "text":
                             return (
-                                <div key={index} className="text-white whitespace-pre-wrap">
+                                <div key={index} className="text-white whitespace-pre-wrap cursor-pointer" onDoubleClick={handleDoubleClick} title="双击编辑">
                                     {item.text}
                                 </div>
                             );
@@ -129,16 +197,23 @@ const MessageHuman: React.FC<MessageHumanProps> = ({ message, content }) => {
     };
 
     return (
-        <div className="flex flex-row w-full justify-end group/message-human">
+        <div className="flex flex-row w-full justify-end group/message-human ">
             <div className="hidden group-hover/message-human:flex gap-2 mx-2">
                 <button onClick={() => chat.revertChatTo(message.id!, true)} className="p-2 text-gray-700 transition-colors cursor-pointer" title="重试">
                     <RotateCcw size={16} />
                 </button>
-                <button onClick={() => chat.revertChatTo(message.id!, false)} className="p-2 text-gray-700 transition-colors cursor-pointer" title="回退">
-                    <Undo size={16} />
+                <button onClick={handleDoubleClick} className="p-2 text-gray-700 transition-colors cursor-pointer" title="编辑">
+                    <Edit3 size={16} />
                 </button>
+                <button onClick={() => setIsExpanded(!isExpanded)} className="p-2 text-gray-700 transition-colors cursor-pointer" title={isExpanded ? "收起" : "展开"}>
+                    {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                </button>
+            </div>
+            <div
+                className={`flex flex-col w-fit bg-blue-500/90 rounded-2xl text-white px-4 py-3 max-w-[80%] ${isExpanded || isEditing ? "" : "max-h-40 overflow-y-auto"} ${isEditing ? "w-full h-52" : ""}`}
+            >
+                {renderContent()}
             </div>
-            <div className="flex flex-col w-fit bg-blue-500/90 rounded-2xl text-white px-4 py-3 max-w-[80%]">{renderContent()}</div>
         </div>
     );
 };

package/src/chat/components/UsageMetadata.tsx

@@ -25,7 +25,7 @@ export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, sp
     const speed = spend_time ? ((usage_metadata.output_tokens || 0) * 1000) / (spend_time || 1) : 0;
     spend_time = spend_time && !isNaN(spend_time) ? spend_time : 0;
     const { currentChatId } = useChat();
-    const { openMonitorWithChat } = useMonitor();
+    const monitor = useMonitor();
     return (
         <div className="flex items-center justify-between text-xs text-gray-400 mt-3">
             <div className="flex items-center gap-3">
@@ -37,7 +37,7 @@ export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, sp
                 {response_metadata?.model_name && <span className="text-gray-500">{response_metadata.model_name}</span>}
                 {tool_call_id && <span className="text-gray-400">Tool: {tool_call_id}</span>}
                 {id && (
-                    <span className="text-gray-400" onClick={() => openMonitorWithChat(currentChatId!, id)}>
+                    <span className="text-gray-400" onClick={() => monitor?.openMonitorWithChat(currentChatId!, id)}>
                         ID: {id}
                     </span>
                 )}

package/src/debugPanel/Context.tsx

@@ -0,0 +1,45 @@
+import { RenderMessage } from "@langgraph-js/sdk";
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+interface DebugPanelContextType {
+    isDebugPanelVisible: boolean;
+    setIsDebugPanelVisible: (visible: boolean) => void;
+    toggleDebugPanel: () => void;
+    messagesContext: string;
+    setMessagesContext: (messages: RenderMessage[]) => void;
+}
+
+const DebugPanelContext = createContext<DebugPanelContextType | undefined>(undefined);
+
+export const useDebugPanel = () => {
+    const context = useContext(DebugPanelContext);
+    if (context === undefined) {
+        throw new Error("useDebugPanel must be used within a DebugPanelProvider");
+    }
+    return context;
+};
+
+interface DebugPanelProviderProps {
+    children: ReactNode;
+}
+
+export const DebugPanelProvider: React.FC<DebugPanelProviderProps> = ({ children }) => {
+    const [messagesContext, setMessagesContext] = useState<string>("");
+    const [isDebugPanelVisible, setIsDebugPanelVisible] = useState(false);
+
+    const toggleDebugPanel = () => {
+        setIsDebugPanelVisible((prev) => !prev);
+    };
+
+    const value = {
+        isDebugPanelVisible,
+        setIsDebugPanelVisible,
+        toggleDebugPanel,
+        messagesContext,
+        setMessagesContext(messages: RenderMessage[]) {
+            setMessagesContext(JSON.stringify(messages));
+        },
+    };
+
+    return <DebugPanelContext.Provider value={value}>{children}</DebugPanelContext.Provider>;
+};

package/src/debugPanel/DebugPanel.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ChatProvider, useChat } from "@langgraph-js/sdk/react";
+import { Message } from "@langgraph-js/sdk";
+import { Send, Bug, Bot, Plus, Trash } from "lucide-react";
+import { toast } from "sonner";
+import { useDebugPanel } from "./Context";
+import ModelTesterPopup from "../chat/components/ModelTesterPopup";
+import { MessagesBox } from "../chat/components/MessageBox";
+import { ExtraParamsProvider } from "@/chat/context/ExtraParamsContext";
+
+const DebugMessages: React.FC = () => {
+    const { renderMessages, loading, inChatError, client } = useChat();
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
+    };
+
+    useEffect(() => {
+        if (renderMessages.length > 0 && !loading) {
+            scrollToBottom();
+        }
+    }, [renderMessages, loading]);
+
+    return (
+        <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 bg-gray-50 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+            {renderMessages.length === 0 && !loading ? (
+                <div className="flex items-center justify-center h-full">
+                    <div className="text-center">
+                        <div className="flex items-center justify-center">
+                            <div className="text-4xl mb-4">🐛</div>
+                        </div>
+                        <h1 className="text-2xl font-bold text-gray-700 mb-2">Debug Panel</h1>
+                        <div className="text-sm text-gray-500">调试助手控制台</div>
+                    </div>
+                </div>
+            ) : (
+                <div className="flex flex-col gap-5 w-full">
+                    <MessagesBox renderMessages={renderMessages} collapsedTools={[]} toggleToolCollapse={() => {}} client={client!} />
+                </div>
+            )}
+            {loading && (
+                <div className="flex items-center justify-center py-4 text-gray-500">
+                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-blue-500 border-t-transparent mr-2"></div>
+                    调试中...
+                </div>
+            )}
+            {inChatError && <div className="px-4 py-3 text-sm text-red-600 bg-red-50 rounded-lg">{JSON.stringify(inChatError)}</div>}
+            <div ref={messagesEndRef} />
+        </div>
+    );
+};
+
+const DebugInput: React.FC = () => {
+    const { userInput, setUserInput, loading, sendMessage, stopGeneration, createNewChat, renderMessages } = useChat();
+    const { messagesContext } = useDebugPanel();
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const sendDebugMessage = () => {
+        const item = localStorage.getItem("model-tester-config");
+        if (!item) {
+            toast.error("请先配置模型测试器");
+            return;
+        }
+
+        let config;
+        try {
+            config = JSON.parse(item);
+        } catch (error) {
+            toast.error("模型测试器配置格式错误，请重新配置");
+            console.error("Failed to parse model-tester-config:", error);
+            return;
+        }
+
+        // 验证配置对象的有效性
+        if (!config || typeof config !== "object") {
+            toast.error("模型测试器配置无效，请重新配置");
+            return;
+        }
+
+        // 检查必要的配置项
+        if (!config.token || typeof config.token !== "string" || config.token.trim() === "") {
+            toast.error("API Token 未配置或为空，请检查模型测试器配置");
+            return;
+        }
+        const isFirstMessage = renderMessages.length === 0;
+        const content: Message[] = [
+            {
+                type: "human",
+                content: userInput,
+            },
+        ];
+        if (isFirstMessage && messagesContext)
+            content.push({
+                type: "human",
+                content: "这些是我们的数据\n\n" + messagesContext,
+            });
+        sendMessage(content, {
+            extraParams: {
+                model_name: config.model_name || "qwen-plus",
+                api_key: config.token.trim(),
+                api_host: config.base_url,
+            },
+        });
+    };
+
+    const handleKeyPress = (event: React.KeyboardEvent) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            sendDebugMessage();
+        }
+    };
+
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    useEffect(() => {
+        if (userInput && (userInput.length > 50 || userInput.includes("\n"))) {
+            setIsExpanded(true);
+        } else {
+            setIsExpanded(false);
+        }
+    }, [userInput]);
+
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            if (isExpanded) {
+                textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 96) + "px";
+            }
+        }
+    }, [userInput, isExpanded]);
+
+    return (
+        <div className="p-4 bg-white border-t border-gray-200">
+            <div className={`bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 ${isExpanded ? "rounded-xl" : "rounded-full"}`}>
+                <div className={`flex gap-3 ${isExpanded ? "items-end" : "items-center"}`}>
+                    <button
+                        onClick={() => createNewChat()}
+                        className="w-8 h-8 flex items-center justify-center rounded-full focus:outline-none transition-colors bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-40"
+                        title="创建新对话"
+                    >
+                        <Trash className="w-4 h-4" />
+                    </button>
+                    <textarea
+                        ref={textareaRef}
+                        className="flex-1 text-sm resize-none active:outline-none focus:outline-none bg-transparent"
+                        rows={1}
+                        value={userInput}
+                        onChange={(e) => setUserInput(e.target.value)}
+                        onKeyDown={handleKeyPress}
+                        placeholder="输入调试命令..."
+                        disabled={loading}
+                        style={{
+                            maxHeight: isExpanded ? "6rem" : "2rem",
+                            fontFamily: "inherit",
+                            lineHeight: isExpanded ? "inherit" : "2rem",
+                        }}
+                    />
+                    <button
+                        className={`w-8 h-8 flex items-center justify-center rounded-full focus:outline-none transition-colors disabled:cursor-not-allowed ${
+                            loading ? "bg-red-500 hover:bg-red-600 text-white" : "bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-40"
+                        }`}
+                        onClick={() => (loading ? stopGeneration() : sendDebugMessage())}
+                        disabled={!loading && !userInput.trim()}
+                    >
+                        {loading ? (
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        ) : (
+                            <Send className="w-4 h-4" />
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const DebugPanel: React.FC = () => {
+    const [isModelTesterOpen, setIsModelTesterOpen] = useState(false);
+
+    return (
+        <div className="flex h-full w-full max-w-xl overflow-hidden bg-gray-50">
+            <section className="flex-1 flex flex-col overflow-hidden">
+                <header className="flex items-center gap-2 px-4 py-3 justify-between bg-white border-b border-gray-200">
+                    <div className="flex items-center gap-2">
+                        <Bug className="w-5 h-5 text-gray-600" />
+                        <h1 className="text-lg font-semibold text-gray-900">调试面板</h1>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={() => setIsModelTesterOpen(true)}
+                            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 cursor-pointer rounded-xl hover:bg-gray-100 focus:outline-none transition-colors flex items-center gap-2"
+                        >
+                            <Bot className="w-4 h-4" />
+                            模型测试器
+                        </button>
+                    </div>
+                </header>
+                <main className="flex-1 overflow-hidden flex flex-col">
+                    <DebugMessages />
+                    <DebugInput />
+                </main>
+                <ModelTesterPopup isOpen={isModelTesterOpen} onClose={() => setIsModelTesterOpen(false)} />
+            </section>
+        </div>
+    );
+};
+
+const DebugPanelWrapper: React.FC = () => {
+    const { isDebugPanelVisible } = useDebugPanel();
+    if (!isDebugPanelVisible) {
+        return null;
+    }
+    return (
+        <ChatProvider
+            defaultAgent={"graph"}
+            apiUrl={new URL("/api/open-smith/graph", window.location.origin.toString()).href}
+            defaultHeaders={{}}
+            withCredentials={false}
+            showHistory={false}
+            fallbackToAvailableAssistants={false}
+            onInitError={(err, currentAgent) => {
+                toast.error("调试面板连接失败: " + currentAgent + "\n" + err, {
+                    duration: 5000,
+                });
+            }}
+        >
+            <ExtraParamsProvider>
+                <DebugPanel />
+            </ExtraParamsProvider>
+        </ChatProvider>
+    );
+};
+
+export default DebugPanelWrapper;

package/src/debugPanel/index.ts

@@ -0,0 +1 @@
+export { default } from "./DebugPanel";

package/src/index.ts

@@ -1,2 +1,3 @@
 import "./index.css";
 export { default as Chat } from "./chat/Chat";
+export { default as DebugPanel } from "./debugPanel";

package/src/monitor/index.tsx

@@ -45,15 +45,12 @@ export const MonitorProvider: React.FC<{ children: ReactNode }> = ({ children })
 // Hook 用于在组件中使用 modal
 export const useMonitor = () => {
     const context = useContext(MonitorContext);
-    if (context === undefined) {
-        throw new Error("useModal must be used within a ModalProvider");
-    }
     return context;
 };
 
 // Modal 组件
 export const Monitor: React.FC = () => {
-    const { isOpen, url, closeModal } = useMonitor();
+    const { isOpen, url, closeModal } = useMonitor()!;
 
     if (!isOpen) return null;
 

package/test/App.tsx

@@ -1,7 +1,13 @@
-import { Chat } from "../src/index";
+import { Chat, DebugPanel } from "../src/index";
+import { DebugPanelProvider } from "../src/debugPanel/Context";
 
 function App() {
-    return <Chat />;
+    return (
+        <DebugPanelProvider>
+            <Chat />
+            <DebugPanel />
+        </DebugPanelProvider>
+    );
 }
 
 export default App;

package/tsconfig.json

@@ -20,5 +20,5 @@
             "@/*": ["./src/*"]
         }
     },
-    "include": ["test", "test/**/*.tsx"]
+    "include": ["test", "test/**/*.tsx", "src/debugPanel/Context.tsx"]
 }

package/dist/assets/channel-vUExqIsh.js

@@ -1 +0,0 @@
-import{U as a,C as n}from"./mermaid.core-CGLWRVx8.js";const t=(r,o)=>a.lang.round(n.parse(r)[o]);export{t as c};

package/dist/assets/classDiagram-2ON5EDUG-BR8LFF3q.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-MBLYLOpW.js";import{_ as i}from"./mermaid.core-CGLWRVx8.js";import"./index-BKT1JcWk.js";import"./chunk-FMBD7UC4-CKvuUqu2.js";import"./chunk-55IACEB6-CBZCFFSQ.js";import"./chunk-QN33PNHL-C7W3Jof4.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/assets/classDiagram-v2-WZHVMYZB-BR8LFF3q.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-MBLYLOpW.js";import{_ as i}from"./mermaid.core-CGLWRVx8.js";import"./index-BKT1JcWk.js";import"./chunk-FMBD7UC4-CKvuUqu2.js";import"./chunk-55IACEB6-CBZCFFSQ.js";import"./chunk-QN33PNHL-C7W3Jof4.js";var u={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{u as diagram};

package/dist/assets/clone-DFFpaJQA.js

@@ -1 +0,0 @@
-import{b as r}from"./index-BKT1JcWk.js";var e=4;function a(o){return r(o,e)}export{a as c};