@langgraph-js/ui 5.6.0 → 5.7.0

package/src/chat/tools/{show_form.tsx → ask_user_to_fill_form.tsx}

@@ -1,10 +1,12 @@
 import { createUITool, ToolManager } from "@langgraph-js/sdk";
 import Form, { IChangeEvent } from "@rjsf/core";
 import ErrorBoundary from "../components/ErrorBoundary";
-import { FileText, Eye, EyeOff, ChevronDown, X, Plus, Minus } from "lucide-react";
+import { FileText, Eye, EyeOff, ChevronDown, X, Plus, CheckCircle, AlertCircle } from "lucide-react";
 import { z } from "zod";
 import validator from "@rjsf/validator-ajv8";
 import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 // 自定义文本输入组件
 const CustomTextWidget = (props: any) => {
@@ -428,89 +430,165 @@ const CustomObjectFieldTemplate = (props: any) => {
 // 自定义按钮组件
 const CustomSubmitButton = (props: any) => {
     return (
-        <button
+        <Button
             type="submit"
-            className="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white font-medium focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors disabled:cursor-not-allowed"
             disabled={props.disabled}
+            className={cn(
+                "px-5 rounded-full transition-all duration-200",
+                props.disabled ? "bg-gray-100 text-gray-400" : "bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg hover:shadow-blue-200"
+            )}
         >
-            {props.submitText || "提交"}
-        </button>
+            {props.submitText || "提交表单"}
+        </Button>
     );
 };
 
-export const show_form = createUITool({
-    name: "show_form",
-    description: "显示动态表单，等待用户填写",
-    parameters: {
-        schema: z.any(),
-    },
+const AskUserToFillFormSchema = {
+    title: z.string().describe("Form title"),
+    description: z.string().optional().describe("Optional form description"),
+    schema: z.record(z.string(), z.any()).describe("JSON Schema for the form (react-jsonschema-form compatible)"),
+};
+
+export const ask_user_to_fill_form = createUITool({
+    name: "ask_user_to_fill_form",
+    description: "Present a form to the user for filling out. Schema follows react-jsonschema-form format.",
+    parameters: AskUserToFillFormSchema,
     onlyRender: false,
     handler: ToolManager.waitForUIDone,
     render(tool) {
-        const data = tool.getInputRepaired();
-        const output = tool.getJSONOutputSafe();
-        const formSchema = data.schema;
+        try {
+            const data = tool.getInputRepaired();
+            const output = tool.getJSONOutputSafe();
+            const formSchema = data?.schema || {};
+            const canInteract = tool.state === "interrupted";
 
-        const handleSubmit = (formData: any) => {
-            console.log("Form submitted:", formData);
-            tool.response(formData);
-        };
+            const handleSubmit = (formData: any) => {
+                try {
+                    tool.sendResumeData({
+                        /** @ts-ignore */
+                        type: "respond",
+                        message: JSON.stringify(formData),
+                    });
+                } catch (error) {
+                    console.error("提交表单数据时出错:", error);
+                }
+            };
 
-        // 自定义控件配置
-        const customWidgets = {
-            text: CustomTextWidget,
-            password: CustomPasswordWidget,
-            textarea: CustomTextareaWidget,
-            select: CustomSelectWidget,
-            checkboxes: CustomCheckboxWidget,
-            radio: CustomRadioWidget,
-            number: CustomNumberWidget,
-            range: CustomRangeWidget,
-            date: CustomDateWidget,
-            datetime: CustomDateTimeWidget,
-            file: CustomFileWidget,
-            boolean: CustomBooleanWidget,
-        };
+            // 自定义控件配置
+            const customWidgets = {
+                text: CustomTextWidget,
+                password: CustomPasswordWidget,
+                textarea: CustomTextareaWidget,
+                select: CustomSelectWidget,
+                checkboxes: CustomCheckboxWidget,
+                radio: CustomRadioWidget,
+                number: CustomNumberWidget,
+                range: CustomRangeWidget,
+                date: CustomDateWidget,
+                datetime: CustomDateTimeWidget,
+                file: CustomFileWidget,
+                boolean: CustomBooleanWidget,
+            };
 
-        const customFields = {
-            array: CustomArrayField,
-        };
+            const customFields = {
+                array: CustomArrayField,
+            };
 
-        const customTemplates = {
-            FieldTemplate: CustomFieldTemplate,
-            ObjectFieldTemplate: CustomObjectFieldTemplate,
-            ButtonTemplates: {
-                SubmitButton: CustomSubmitButton,
-            },
-        };
-        return (
-            <div className="p-4 bg-white rounded-lg border border-gray-200">
-                <div className="flex items-center gap-1.5 text-gray-700 mb-3 font-bold">
-                    <FileText className="w-4 h-4 text-blue-500" />
-                    <span>AI 表单</span>
-                </div>
+            const customTemplates = {
+                FieldTemplate: CustomFieldTemplate,
+                ObjectFieldTemplate: CustomObjectFieldTemplate,
+                ButtonTemplates: {
+                    SubmitButton: CustomSubmitButton,
+                },
+            };
+
+            // 完成状态视图
+            if (!canInteract && tool.output) {
+                let submittedData;
+                try {
+                    submittedData = typeof tool.output === "string" ? JSON.parse(tool.output) : tool.output;
+                } catch (error) {
+                    submittedData = tool.output;
+                }
+                return (
+                    <div className="flex flex-col gap-2 my-1 p-3 bg-gray-50/50 border border-gray-200 rounded-xl">
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                            <div className="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200">
+                                <CheckCircle className="w-3 h-3" />
+                            </div>
+                            <span className="font-medium">Form Submitted</span>
+                        </div>
+
+                        <div className="space-y-2">
+                            <div className="text-sm text-gray-600 pl-1">{data?.title || "表单"}</div>
+                            <div className="text-sm text-gray-900 bg-white px-3 py-2.5 rounded-xl border border-gray-200">
+                                <pre className="text-xs whitespace-pre-wrap break-all">{JSON.stringify(submittedData, null, 2)}</pre>
+                            </div>
+                        </div>
+                    </div>
+                );
+            }
+
+            // 交互状态视图
+            return (
                 <ErrorBoundary>
-                    <Form
-                        readonly={tool.state === "done"}
-                        schema={formSchema || {}}
-                        formData={output}
-                        onSubmit={(data: IChangeEvent<any>) => handleSubmit(data.formData)}
-                        validator={validator}
-                        onError={(errors) => {
-                            console.error("表单校验错误:", errors);
-                            alert("表单填写有误，请检查后再提交。");
-                        }}
-                        widgets={customWidgets}
-                        fields={customFields}
-                        templates={customTemplates}
-                        className="custom-form"
-                    >
-                        <div className="flex gap-2 mt-4">
-                            <CustomSubmitButton />
+                    <div className="w-[70%] my-1 border border-gray-200 bg-white shadow-none rounded-xl overflow-hidden">
+                        <div className="pb-2 p-3 border-b border-gray-50 bg-gray-50/30">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-7 h-7 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
+                                        <FileText className="w-3.5 h-3.5" />
+                                    </div>
+                                    <h3 className="text-sm font-medium text-gray-900">{data?.title || "表单"}</h3>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="p-4 space-y-3">
+                            {data?.description && <div className="text-sm text-gray-600">{data.description}</div>}
+                            <ErrorBoundary>
+                                <Form
+                                    readonly={!canInteract}
+                                    schema={formSchema}
+                                    formData={output}
+                                    onSubmit={(formData: IChangeEvent<any>) => {
+                                        try {
+                                            handleSubmit(formData.formData);
+                                        } catch (error) {
+                                            console.error("表单提交处理错误:", error);
+                                        }
+                                    }}
+                                    validator={validator}
+                                    onError={(errors) => {
+                                        console.error("表单校验错误:", errors);
+                                    }}
+                                    widgets={customWidgets}
+                                    fields={customFields}
+                                    templates={customTemplates}
+                                    className="custom-form"
+                                >
+                                    <div className="flex justify-end pt-2">
+                                        <CustomSubmitButton disabled={!canInteract} />
+                                    </div>
+                                </Form>
+                            </ErrorBoundary>
                         </div>
-                    </Form>
+                    </div>
                 </ErrorBoundary>
-            </div>
-        );
+            );
+        } catch (error) {
+            // 外层错误边界，捕获所有未处理的错误
+            console.error("表单组件渲染错误:", error);
+            return (
+                <div className="w-full my-1 border border-red-200 bg-red-50 rounded-xl overflow-hidden">
+                    <div className="p-4">
+                        <div className="flex items-center gap-2 mb-2">
+                            <AlertCircle className="w-5 h-5 text-red-600" />
+                            <h3 className="text-sm font-medium text-red-900">表单加载失败</h3>
+                        </div>
+                        <p className="text-xs text-red-700">表单配置有误，请检查 schema 格式是否正确。</p>
+                    </div>
+                </div>
+            );
+        }
     },
 });

package/src/chat/tools/ask_user_with_options.tsx

@@ -0,0 +1,174 @@
+import { createUITool, ToolManager } from "@langgraph-js/sdk";
+import { useState } from "react";
+import { z } from "zod";
+import { ListChecks, MessageSquarePlus, RefreshCcw, Check, User } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const AskUserWithOptionsSchema = {
+    description: z.string().describe("Question text to display"),
+    type: z.enum(["single_select", "multi_select"]).optional().default("single_select").describe("Selection mode for this question"),
+    options: z
+        .array(
+            z.object({
+                index: z.number().describe("Index of the option"),
+                label: z.string().describe("Optional display label"),
+            })
+        )
+        .describe("Selectable options for the question"),
+    allow_custom_input: z.boolean().default(true).describe("Allow user to input custom text"),
+};
+
+export const ask_user_with_options = createUITool({
+    name: "ask_user_with_options",
+    description: "Render a single question with selectable options and optional custom input.",
+    parameters: AskUserWithOptionsSchema,
+    handler: ToolManager.waitForUIDone,
+    onlyRender: false,
+    render(tool) {
+        const data = tool.getInputRepaired();
+        const optionItems = data.options || [];
+        const isMulti = data.type === "multi_select";
+        const [selected, setSelected] = useState<number[]>([]);
+        const [customText, setCustomText] = useState<string>("");
+
+        const toggleOption = (idx: number) => {
+            if (isMulti) {
+                setSelected((prev) => (prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx]));
+            } else {
+                setSelected([idx]);
+            }
+        };
+
+        const handleReset = () => {
+            setSelected([]);
+            setCustomText("");
+        };
+
+        const canInteract = tool.state === "interrupted";
+
+        const handleSubmit = () => {
+            const selectedLabels = selected.map((i) => optionItems[i]?.label).filter((i) => i !== undefined);
+            const customTextLabel = customText.trim() ? `, Custom Text: ${customText.trim()}` : "";
+            tool.sendResumeData({
+                /** @ts-ignore */
+                type: "respond",
+                message: `User Selected: ${selected.length > 0 ? selectedLabels.join(", ") : "none"} ${customTextLabel}`,
+            });
+        };
+
+        const isSubmitDisabled = !canInteract || (selected.length === 0 && (!data.allow_custom_input || !customText));
+
+        // 完成状态视图
+        if (!canInteract) {
+            return (
+                <div className="flex flex-col gap-2 my-1 p-3 bg-gray-50/50 border border-gray-200 rounded-xl">
+                    <div className="flex items-center gap-2 text-xs text-gray-500">
+                        <div className="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200">
+                            <ListChecks className="w-3 h-3" />
+                        </div>
+                        <span className="font-medium">Question Answered</span>
+                        <Button variant="ghost" size="icon" className="h-7 w-7 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full" onClick={handleReset} title="Reset selection">
+                            <RefreshCcw className="h-3.5 w-3.5" />
+                        </Button>
+                    </div>
+
+                    <div className="space-y-1">
+                        <div className="text-sm text-gray-600 pl-1">{data.description}</div>
+                        <div className="flex items-start gap-2 text-sm text-gray-900 bg-white px-3 py-2.5 rounded-xl border border-gray-200">
+                            <User className="w-4 h-4 mt-0.5 text-blue-500 shrink-0" />
+                            <div className="break-all leading-relaxed">{tool.output ? (typeof tool.output === "string" ? tool.output : JSON.stringify(tool.output)) : "Response submitted"}</div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        // 交互状态视图
+        return (
+            <div className="w-full my-1 border border-gray-200 bg-white shadow-none rounded-xl overflow-hidden">
+                <div className="pb-2 p-3 border-b border-gray-50 bg-gray-50/30">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <div className="w-7 h-7 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
+                                <ListChecks className="w-3.5 h-3.5" />
+                            </div>
+                            <h3 className="text-sm font-medium text-gray-900">User Input Required</h3>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Button variant="ghost" size="icon" className="h-7 w-7 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full" onClick={handleReset} title="Reset selection">
+                                <RefreshCcw className="h-3.5 w-3.5" />
+                            </Button>
+                            <Badge variant="outline" className="bg-white text-gray-600 border-gray-200 font-normal">
+                                {isMulti ? "Multi Select" : "Single Select"}
+                            </Badge>
+                        </div>
+                    </div>
+                </div>
+                <div className="p-3 space-y-3">
+                    <div className="text-sm font-medium text-gray-900">{data.description}</div>
+
+                    {optionItems.length > 0 && (
+                        <div className="space-y-1.5">
+                            <div className="space-y-1.5">
+                                {optionItems.map((opt: any) => {
+                                    const isSelected = selected.includes(opt.index);
+                                    return (
+                                        <div
+                                            key={opt.index}
+                                            className={cn(
+                                                "flex items-center gap-2 p-2 rounded-lg border transition-all cursor-pointer group",
+                                                isSelected ? "bg-blue-50/50 border-blue-500 shadow-sm" : "bg-white border-gray-200 hover:border-blue-300"
+                                            )}
+                                            onClick={() => toggleOption(opt.index)}
+                                        >
+                                            <div
+                                                className={cn(
+                                                    "w-5 h-5 rounded flex items-center justify-center border text-[10px] font-medium transition-colors shrink-0",
+                                                    isSelected ? "bg-blue-500 border-blue-500 text-white" : "bg-gray-50 border-gray-200 text-gray-500 group-hover:border-blue-300"
+                                                )}
+                                            >
+                                                {isSelected ? <Check className="w-3 h-3" /> : opt.index}
+                                            </div>
+                                            <span className={cn("text-sm flex-1 leading-snug", isSelected ? "text-blue-900 font-medium" : "text-gray-700")}>{opt.label}</span>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    {data.allow_custom_input && (
+                        <div className="space-y-1.5 pt-1">
+                            <div className="flex items-center gap-2 text-[10px] font-medium text-gray-500 uppercase tracking-wider">
+                                <MessageSquarePlus className="w-3 h-3" />
+                                <span>Additional Comments</span>
+                            </div>
+                            <textarea
+                                className="w-full rounded-lg border border-gray-200 bg-gray-50/50 p-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all resize-none"
+                                placeholder="Type your answer here..."
+                                value={customText}
+                                onChange={(e) => setCustomText(e.target.value)}
+                                rows={2}
+                            />
+                        </div>
+                    )}
+
+                    <div className="flex justify-end pt-2">
+                        <Button
+                            onClick={handleSubmit}
+                            disabled={isSubmitDisabled}
+                            className={cn(
+                                "px-5 rounded-full transition-all duration-200",
+                                isSubmitDisabled ? "bg-gray-100 text-gray-400" : "bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg hover:shadow-blue-200"
+                            )}
+                        >
+                            Submit Response
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+});

package/src/chat/tools/display_information_card.tsx

@@ -0,0 +1,131 @@
+import { createUITool } from "@langgraph-js/sdk";
+import { z } from "zod";
+import { Info, CheckCircle, AlertTriangle, XCircle, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const DisplayInformationCardSchema = {
+    image_url: z.url().optional().describe("Optional image URL (for info card type)"),
+    title: z.string().describe("Card title"),
+    content: z.string().describe("Main content text"),
+    type: z.enum(["info", "success", "warning", "error"]).optional().default("info").describe("Card style (for info card type)"),
+    actions: z
+        .array(
+            z.object({
+                label: z.string().describe("Button label"),
+                action_id: z.string().describe("Action identifier"),
+                link: z.url().optional(),
+            })
+        )
+        .optional()
+        .describe("Action buttons"),
+};
+
+const getTypeStyles = (type: "info" | "success" | "warning" | "error") => {
+    switch (type) {
+        case "success":
+            return {
+                icon: CheckCircle,
+                iconColor: "text-green-600",
+                iconBg: "bg-green-50",
+                badgeText: "Success",
+                badgeVariant: "outline" as const,
+            };
+        case "warning":
+            return {
+                icon: AlertTriangle,
+                iconColor: "text-yellow-600",
+                iconBg: "bg-yellow-50",
+                badgeText: "Warning",
+                badgeVariant: "outline" as const,
+            };
+        case "error":
+            return {
+                icon: XCircle,
+                iconColor: "text-red-600",
+                iconBg: "bg-red-50",
+                badgeText: "Error",
+                badgeVariant: "outline" as const,
+            };
+        case "info":
+        default:
+            return {
+                icon: Info,
+                iconColor: "text-blue-600",
+                iconBg: "bg-blue-50",
+                badgeText: "Info",
+                badgeVariant: "outline" as const,
+            };
+    }
+};
+
+export const display_information_card = createUITool({
+    name: "display_information_card",
+    description: "Display an information card to the user.",
+    parameters: DisplayInformationCardSchema,
+    onlyRender: true,
+    render(tool) {
+        const data = tool.getInputRepaired();
+        const typeStyles = getTypeStyles(data.type || "info");
+        const IconComponent = typeStyles.icon;
+        const hasActions = data.actions && data.actions.length > 0;
+
+        const handleActionClick = (action: { label: string; action_id: string; link?: string }) => {
+            if (action.link) {
+                window.open(action.link, "_blank", "noopener,noreferrer");
+            }
+        };
+
+        return (
+            <div className="w-[50%] my-1 border border-gray-200 bg-white shadow-none rounded-xl overflow-hidden">
+                <div className="pb-2 p-3 border-b border-gray-50 bg-gray-50/30">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <div className={cn("w-7 h-7 rounded-full flex items-center justify-center", typeStyles.iconBg)}>
+                                <IconComponent className={cn("w-3.5 h-3.5", typeStyles.iconColor)} />
+                            </div>
+                            <h3 className="text-sm font-medium text-gray-900">{data.title}</h3>
+                        </div>
+                        <Badge variant={typeStyles.badgeVariant} className="bg-white text-gray-600 border-gray-200 font-normal">
+                            {typeStyles.badgeText}
+                        </Badge>
+                    </div>
+                </div>
+                <div className="p-3 space-y-3">
+                    <div className="text-sm leading-relaxed text-gray-700 whitespace-pre-wrap">{data.content}</div>
+
+                    {data.image_url && (
+                        <div className="rounded-lg overflow-hidden border border-gray-200 bg-gray-50">
+                            <img src={data.image_url} alt={data.title} className="w-full h-auto object-cover max-h-[400px]" />
+                        </div>
+                    )}
+
+                    {hasActions && (
+                        <div className="flex flex-wrap gap-2 pt-2">
+                            {data.actions!.map((action, index) => (
+                                <Button
+                                    key={index}
+                                    onClick={() => handleActionClick(action)}
+                                    className={cn(
+                                        "px-4 py-2 rounded-lg transition-all duration-200 text-sm font-medium",
+                                        data.type === "success"
+                                            ? "bg-green-600 hover:bg-green-700 text-white shadow-sm hover:shadow-md"
+                                            : data.type === "warning"
+                                              ? "bg-yellow-600 hover:bg-yellow-700 text-white shadow-sm hover:shadow-md"
+                                              : data.type === "error"
+                                                ? "bg-red-600 hover:bg-red-700 text-white shadow-sm hover:shadow-md"
+                                                : "bg-blue-600 hover:bg-blue-700 text-white shadow-sm hover:shadow-md"
+                                    )}
+                                >
+                                    {action.label}
+                                    {action.link && <ExternalLink className="w-3 h-3 ml-1.5" />}
+                                </Button>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    },
+});