@langgraph-js/ui 5.3.0 → 5.5.0

package/src/components/ai-elements/chain-of-thought.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  DotIcon,
+  type LucideIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
+
+type ChainOfThoughtContextValue = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null
+);
+
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  }
+  return context;
+};
+
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }: ChainOfThoughtProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+
+    return (
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+        <div
+          className={cn("not-prose max-w-prose space-y-4", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </ChainOfThoughtContext.Provider>
+    );
+  }
+);
+
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+>;
+
+export const ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+
+    return (
+      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+        <CollapsibleTrigger
+          className={cn(
+            "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+            className
+          )}
+          {...props}
+        >
+          <BrainIcon className="size-4" />
+          <span className="flex-1 text-left">
+            {children ?? "Chain of Thought"}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 transition-transform",
+              isOpen ? "rotate-180" : "rotate-0"
+            )}
+          />
+        </CollapsibleTrigger>
+      </Collapsible>
+    );
+  }
+);
+
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+  icon?: LucideIcon;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+
+export const ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }: ChainOfThoughtStepProps) => {
+    const statusStyles = {
+      complete: "text-muted-foreground",
+      active: "text-foreground",
+      pending: "text-muted-foreground/50",
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex gap-2 text-sm",
+          statusStyles[status],
+          "fade-in-0 slide-in-from-top-2 animate-in",
+          className
+        )}
+        {...props}
+      >
+        <div className="relative mt-0.5">
+          <Icon className="size-4" />
+          <div className="-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border" />
+        </div>
+        <div className="flex-1 space-y-2">
+          <div>{label}</div>
+          {description && (
+            <div className="text-muted-foreground text-xs">{description}</div>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+    <div className={cn("flex items-center gap-2", className)} {...props} />
+  )
+);
+
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+
+export const ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
+    <Badge
+      className={cn("gap-1 px-2 py-0.5 font-normal text-xs", className)}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Badge>
+  )
+);
+
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const ChainOfThoughtContent = memo(
+  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
+    const { isOpen } = useChainOfThought();
+
+    return (
+      <Collapsible open={isOpen}>
+        <CollapsibleContent
+          className={cn(
+            "mt-2 space-y-3",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+);
+
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+  caption?: string;
+};
+
+export const ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
+      <div className="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
+        {children}
+      </div>
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
+    </div>
+  )
+);
+
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";

package/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

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"]
 }