@langgraph-js/ui 2.0.0 → 2.1.0

package/src/chat/tools/ask_user_for_approve.tsx

@@ -1,80 +0,0 @@
-import { ToolManager, ToolRenderData, createToolUI } from "@langgraph-js/sdk";
-import { useState } from "react";
-import { CheckCircle2, XCircle, Search } from "lucide-react";
-
-interface RenderResponse {
-    approved: boolean;
-    feedback: string | null;
-}
-
-export const ask_user_for_approve = createToolUI({
-    name: "ask_user_for_approve",
-    description: "Request user review and approval for plans or content, wait for user feedback before proceeding",
-    parameters: [
-        {
-            name: "title",
-            type: "string",
-            description: "Title or subject of the content to be reviewed",
-        },
-    ],
-    onlyRender: true,
-    handler: ToolManager.waitForUIDone,
-    render(tool: ToolRenderData<{ title: string }, RenderResponse>) {
-        const data = tool.getInputRepaired();
-        const [feedback, setFeedback] = useState(tool.getJSONOutputSafe()?.feedback || "");
-
-        const handleApprove = () => {
-            const result = {
-                approved: true,
-                feedback: feedback.trim() || null,
-            };
-            tool.response(result);
-        };
-
-        const handleReject = () => {
-            const result = {
-                approved: false,
-                feedback: feedback.trim() || "用户拒绝了请求",
-            };
-            tool.response(result);
-        };
-
-        return (
-            <div className="flex flex-col gap-3 p-4 bg-white rounded-lg border border-gray-200">
-                <div className="flex items-center gap-2 text-gray-700">
-                    <Search className="w-4 h-4 text-blue-500" />
-                    <span>请求审核批准</span>
-                    {data.title && <span className="text-sm text-gray-500 ml-2 truncate max-w-[200px]">{data.title}</span>}
-                </div>
-
-                <div className="flex gap-2">
-                    <textarea
-                        disabled={tool.state === "done"}
-                        className="flex-1 p-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
-                        placeholder="反馈意见（可选）"
-                        value={feedback}
-                        onChange={(e) => setFeedback(e.target.value)}
-                        rows={1}
-                    />
-
-                    <button
-                        disabled={tool.state === "done"}
-                        className="px-3 py-2 text-sm font-medium text-white bg-green-500 rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
-                        onClick={handleApprove}
-                    >
-                        <CheckCircle2 className="w-4 h-4" />
-                        批准
-                    </button>
-                    <button
-                        disabled={tool.state === "done"}
-                        className="px-3 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
-                        onClick={handleReject}
-                    >
-                        <XCircle className="w-4 h-4" />
-                        拒绝
-                    </button>
-                </div>
-            </div>
-        );
-    },
-});

package/src/chat/tools/update_plan.tsx

@@ -1,75 +0,0 @@
-import { ToolManager, ToolRenderData, createToolUI } from "@langgraph-js/sdk";
-import { FileEdit, Globe, Brain } from "lucide-react";
-
-interface Step {
-    need_web_search: boolean;
-    title: string;
-    description: string;
-    step_type: "research" | "processing";
-    execution_res?: string;
-}
-
-interface Plan {
-    locale: string;
-    has_enough_context: boolean;
-    thought: string;
-    title?: string;
-    steps: Step[];
-}
-
-export const update_plan = createToolUI({
-    name: "update_plan",
-    description: "展示当前执行计划，等待用户确认",
-    parameters: [],
-    onlyRender: true,
-    render(tool: ToolRenderData<Plan, string>) {
-        const data = tool.getInputRepaired();
-        const plan = data || {
-            locale: "zh-CN",
-            has_enough_context: false,
-            thought: "",
-            steps: [],
-        };
-
-        return (
-            <div className="p-3 bg-white rounded-lg border border-gray-200">
-                <div className="flex items-center gap-1.5  text-gray-700 mb-2 font-bold">
-                    <FileEdit className="w-3.5 h-3.5 text-blue-500" />
-                    <span>执行计划</span>
-                </div>
-
-                <div className="space-y-2">
-                    {plan.title && (
-                        <div className="text-sm">
-                            <span className="text-gray-500">标题：</span>
-                            <span>{plan.title}</span>
-                        </div>
-                    )}
-
-                    {plan.thought && (
-                        <div className="text-sm">
-                            <span className="text-gray-500">思考：</span>
-                            <span className="whitespace-pre-wrap">{plan.thought}</span>
-                        </div>
-                    )}
-
-                    {plan.steps && plan.steps.length > 0 && (
-                        <div className="space-y-1.5">
-                            <div className="text-sm text-gray-500">步骤：</div>
-                            {plan.steps.map((step, index) => (
-                                <div key={index} className="pl-2 border-l-2 border-gray-200">
-                                    <div className="flex items-center gap-1.5 text-sm">
-                                        {step!.step_type === "research" ? <Globe className="w-3.5 h-3.5 text-blue-500" /> : <Brain className="w-3.5 h-3.5 text-purple-500" />}
-                                        <span className="font-medium">{step!.title}</span>
-                                        {step!.need_web_search && <span className="text-xs text-blue-500">[搜索]</span>}
-                                    </div>
-                                    <div className="text-sm text-gray-600 pl-5">{step!.description}</div>
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    },
-});

package/src/chat/tools/web_search_tool.tsx

@@ -1,89 +0,0 @@
-// 入参 {"query":"Gemini Diffusion vs other diffusion models advantages disadvantages unique features"}
-
-import { createToolUI, ToolRenderData } from "@langgraph-js/sdk";
-import { LinkIcon } from "lucide-react";
-import { useState } from "react";
-
-interface SearchResult {
-    title: string;
-    url: string;
-    description: string;
-    updateTime: string;
-    metadata: {
-        engines: string[];
-    };
-}
-
-interface RenderResponse {
-    engine: string;
-    results: SearchResult[];
-}
-
-interface SearchInput {
-    query: string;
-}
-
-export const web_search_tool = createToolUI({
-    name: "web_search",
-    description:
-        "A powerful web search tool that provides comprehensive, real-time results using search engine. Returns relevant web content with customizable parameters for result count, content type, and domain filtering. Ideal for gathering current information, news, and detailed web content analysis.",
-    parameters: [],
-    onlyRender: true,
-    render(tool: ToolRenderData<SearchInput, RenderResponse[]>) {
-        const data = tool.getInputRepaired();
-        const feedback = tool.getJSONOutputSafe()?.flatMap((i) => i.results) || [];
-        const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
-
-        const toggleExpand = (index: number) => {
-            const newExpanded = new Set(expandedItems);
-            if (newExpanded.has(index)) {
-                newExpanded.delete(index);
-            } else {
-                newExpanded.add(index);
-            }
-            setExpandedItems(newExpanded);
-        };
-
-        const openLink = (url: string) => {
-            window.open(url, "_blank", "noopener,noreferrer");
-        };
-
-        return (
-            <div className="p-4 space-y-4">
-                <div className="text-sm text-gray-500">
-                    Search Query: {data.query}；Get {feedback.length} results
-                </div>
-                <div className="space-y-3 max-h-[300px] overflow-y-auto">
-                    {feedback.map((result, index) => (
-                        <div key={index} className="border rounded-lg p-2 hover:bg-gray-50">
-                            <div className="flex items-center justify-between select-none cursor-pointer" onClick={() => toggleExpand(index)}>
-                                <span className="font-xs flex-1">{result.title}</span>
-                                <div
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        openLink(result.url);
-                                    }}
-                                    className="px-3 py-1 text-sm"
-                                >
-                                    <LinkIcon className="w-4 h-4" />
-                                </div>
-                                <span className="text-gray-400">{expandedItems.has(index) ? "▼" : "▶"}</span>
-                            </div>
-
-                            {expandedItems.has(index) && (
-                                <div className="mt-3 space-y-2">
-                                    <p className="text-sm text-gray-600">{result.description}</p>
-                                    <div className="flex items-center gap-2 text-xs text-gray-500">
-                                        <span>{new Date(result.updateTime).toLocaleDateString()}</span>
-                                        <span>•</span>
-                                        <span>{result.metadata.engines.join(", ")}</span>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        );
-    },
-});