@langgraph-js/ui 5.6.0 → 5.7.1

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>
+        );
+    },
+});

package/src/chat/tools/image_generation.tsx

@@ -0,0 +1,140 @@
+import { createUITool } from "@langgraph-js/sdk";
+import { z } from "zod";
+import { Image, Loader2, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useState, useEffect } from "react";
+
+const ImageGenerationSchema = {
+    prompt: z.string().describe("prompt description"),
+    input_image_urls: z.array(z.string()).optional().describe("input image urls"),
+    resolution: z.enum(["1K", "2K", "4K"]).optional().default("1K").describe("image resolution"),
+    aspectRatio: z.enum(["21:9", "16:9", "4:3", "3:2", "1:1", "9:16", "3:4", "2:3", "5:4", "4:5"]).optional().default("16:9").describe("image aspect ratio"),
+    model: z.string().optional().default("gemini-3-pro-image-preview").describe("model name"),
+};
+
+export const image_generation = createUITool({
+    name: "image_generation",
+    description: "Generate or edit an image.",
+    parameters: ImageGenerationSchema,
+    onlyRender: true,
+    render(tool) {
+        const data = tool.getInputRepaired();
+        const [imageUrls, setImageUrls] = useState<string[]>([]);
+        const [loading, setLoading] = useState(true);
+        const [error, setError] = useState<string>("");
+
+        useEffect(() => {
+            // 处理输出，可能是字符串或数组
+            const output = tool.getJSONOutputSafe();
+            if (output) {
+                try {
+                    if (typeof output === "string") {
+                        // 尝试解析 JSON
+                        const parsed = JSON.parse(output);
+                        if (parsed.image_url) {
+                            setImageUrls(Array.isArray(parsed.image_url) ? parsed.image_url : [parsed.image_url]);
+                        } else if (Array.isArray(parsed)) {
+                            setImageUrls(parsed);
+                        } else {
+                            setImageUrls([output]);
+                        }
+                    } else if (Array.isArray(output)) {
+                        setImageUrls(output);
+                    } else if (output.image_url) {
+                        setImageUrls(Array.isArray(output.image_url) ? output.image_url : [output.image_url]);
+                    }
+                    setLoading(false);
+                } catch (e) {
+                    // 如果不是 JSON，直接作为 URL
+                    setImageUrls([output]);
+                    setLoading(false);
+                }
+            } else {
+                setLoading(false);
+            }
+        }, [tool.output]);
+
+        const isEditing = data.input_image_urls && data.input_image_urls.length > 0;
+
+        return (
+            <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 gap-2">
+                        <div className="w-7 h-7 rounded-full bg-purple-50 text-purple-600 flex items-center justify-center">
+                            <Sparkles className="w-3.5 h-3.5" />
+                        </div>
+                        <h3 className="text-sm font-medium text-gray-900">{isEditing ? "Image Editing" : "Image Generation"}</h3>
+                    </div>
+                </div>
+                <div className="p-4 space-y-4">
+                    {/* Prompt */}
+                    <div>
+                        <div className="text-xs font-medium text-gray-500 mb-1">Prompt</div>
+                        <div className="text-sm text-gray-900 bg-gray-50 rounded-lg p-3 border border-gray-200">{data.prompt}</div>
+                    </div>
+
+                    {/* Reference Images */}
+                    {isEditing && data.input_image_urls && data.input_image_urls.length > 0 && (
+                        <div>
+                            <div className="text-xs font-medium text-gray-500 mb-2">Reference Images</div>
+                            <div className="flex flex-wrap gap-2">
+                                {data.input_image_urls.map((url, index) => (
+                                    <div key={index} className="relative w-24 h-24 rounded-lg overflow-hidden border border-gray-200 bg-gray-50">
+                                        <img src={url} alt={`Reference ${index + 1}`} className="w-full h-full object-cover" />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Configuration */}
+                    <div className="flex flex-wrap gap-3 text-xs text-gray-600">
+                        <div className="flex items-center gap-1">
+                            <span className="font-medium">Resolution:</span>
+                            <span className="px-1.5 py-0.5 bg-blue-50 text-blue-700 rounded">{data.resolution || "1K"}</span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                            <span className="font-medium">Aspect Ratio:</span>
+                            <span className="px-1.5 py-0.5 bg-green-50 text-green-700 rounded">{data.aspectRatio || "16:9"}</span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                            <span className="font-medium">Model:</span>
+                            <span className="px-1.5 py-0.5 bg-purple-50 text-purple-700 rounded truncate max-w-[200px]">{data.model || "gemini-3-pro-image-preview"}</span>
+                        </div>
+                    </div>
+
+                    {/* Generated Images */}
+                    {loading ? (
+                        <div className="flex flex-col items-center justify-center py-12 bg-gray-50 rounded-lg border border-gray-200">
+                            <Loader2 className="w-8 h-8 text-purple-600 animate-spin mb-2" />
+                            <div className="text-sm text-gray-600">Generating image...</div>
+                        </div>
+                    ) : error ? (
+                        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+                    ) : imageUrls.length > 0 ? (
+                        <div>
+                            <div className="text-xs font-medium text-gray-500 mb-2">Generated Images</div>
+                            <div
+                                className={cn(
+                                    "grid gap-4",
+                                    imageUrls.length === 1 ? "grid-cols-1" : imageUrls.length === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+                                )}
+                            >
+                                {imageUrls.map((url, index) => (
+                                    <div key={index} className="relative group rounded-lg overflow-hidden border border-gray-200 bg-gray-50">
+                                        <img src={url} alt={`Generated image ${index + 1}`} className="w-full h-auto object-contain" onError={() => setError(`Failed to load image ${index + 1}`)} />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-center justify-center py-12 bg-gray-50 rounded-lg border border-gray-200">
+                            <Image className="w-8 h-8 text-gray-400 mb-2" />
+                            <div className="text-sm text-gray-600">No images generated yet</div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    },
+});

package/src/chat/tools/index.ts

@@ -1,6 +1,18 @@
-// export { ask_user_for_approve } from "./ask_user_for_approve";
-// export { update_plan } from "./update_plan";
-// export { web_search_tool } from "./web_search_tool";
-export { show_form } from "./show_form";
-// 在这里添加其他工具的导出
-// export { other_tool } from "./other_tool";
+import { create_artifacts } from "./create_artifacts";
+import { __default_tool__ } from "./human-in-the-loop";
+import { ask_user_to_fill_form } from "./ask_user_to_fill_form";
+import { ask_user_with_options } from "./ask_user_with_options";
+import { display_information_card } from "./display_information_card";
+import { wait_for_user_to_upload_file } from "./wait_for_user_to_upload_file";
+import { visualize_data_with_chart } from "./visualize_data_with_chart";
+import { image_generation } from "./image_generation";
+export const default_tools = [
+    ask_user_to_fill_form,
+    create_artifacts,
+    __default_tool__,
+    ask_user_with_options,
+    display_information_card,
+    wait_for_user_to_upload_file,
+    visualize_data_with_chart,
+    image_generation,
+];