@langgraph-js/ui 5.6.0 → 5.7.0

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,
+];

package/src/chat/tools/visualize_data_with_chart.tsx

@@ -0,0 +1,274 @@
+import { createUITool } from "@langgraph-js/sdk";
+import { z } from "zod";
+import { BarChart3, TrendingUp, PieChart, ScatterChart, AreaChart, Radar, Grid3x3, BarChart } from "lucide-react";
+import {
+    LineChart,
+    Line,
+    BarChart as RechartsBarChart,
+    Bar,
+    PieChart as RechartsPieChart,
+    Pie,
+    Cell,
+    ScatterChart as RechartsScatterChart,
+    Scatter,
+    AreaChart as RechartsAreaChart,
+    Area,
+    RadarChart as RechartsRadarChart,
+    PolarGrid,
+    PolarAngleAxis,
+    PolarRadiusAxis,
+    Radar as RechartsRadar,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+    ComposedChart,
+} from "recharts";
+
+const VisualizeDataWithChartSchema = {
+    title: z.string().describe("Chart title"),
+    description: z.string().optional().describe("Optional chart description"),
+    chart_type: z.enum(["line", "bar", "pie", "scatter", "area", "radar", "heatmap", "histogram"]).describe("Type of chart to render"),
+    data: z.array(z.record(z.string(), z.any())).describe("Chart data points"),
+    x_axis: z
+        .object({
+            label: z.string().describe("X-axis label"),
+            field: z.string().describe("Data field for X-axis"),
+        })
+        .optional()
+        .describe("X-axis configuration"),
+    y_axis: z
+        .object({
+            label: z.string().describe("Y-axis label"),
+            field: z.string().describe("Data field for Y-axis"),
+        })
+        .optional()
+        .describe("Y-axis configuration"),
+    options: z.record(z.string(), z.any()).optional().describe("Additional chart configuration options"),
+};
+
+const getChartIcon = (chartType: string) => {
+    switch (chartType) {
+        case "line":
+            return TrendingUp;
+        case "bar":
+            return BarChart3;
+        case "pie":
+            return PieChart;
+        case "scatter":
+            return ScatterChart;
+        case "area":
+            return AreaChart;
+        case "radar":
+            return Radar;
+        case "heatmap":
+            return Grid3x3;
+        case "histogram":
+            return BarChart;
+        default:
+            return BarChart3;
+    }
+};
+
+const COLORS = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#84cc16"];
+
+const renderChart = (chartType: string, data: Record<string, any>[], xAxis?: { label: string; field: string }, yAxis?: { label: string; field: string }, options?: Record<string, any>) => {
+    if (!data || data.length === 0) {
+        return <div className="text-sm text-gray-500 p-8 text-center">No data available</div>;
+    }
+
+    const commonProps = {
+        data,
+        margin: { top: 5, right: 30, left: 20, bottom: 5 },
+    };
+
+    switch (chartType) {
+        case "line":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <LineChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Line type="monotone" dataKey={yAxis.field} stroke={COLORS[0]} strokeWidth={2} />}
+                    </LineChart>
+                </ResponsiveContainer>
+            );
+
+        case "bar":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsBarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Bar dataKey={yAxis.field} fill={COLORS[0]} />}
+                    </RechartsBarChart>
+                </ResponsiveContainer>
+            );
+
+        case "pie":
+            // Pie chart uses different data structure
+            const pieData =
+                xAxis?.field && yAxis?.field
+                    ? data.map((item) => ({
+                          name: item[xAxis.field],
+                          value: item[yAxis.field],
+                      }))
+                    : data;
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsPieChart>
+                        <Pie
+                            data={pieData}
+                            cx="50%"
+                            cy="50%"
+                            labelLine={false}
+                            label={(props: any) => {
+                                const { name, percent } = props;
+                                return `${name}: ${((percent as number) * 100).toFixed(0)}%`;
+                            }}
+                            outerRadius={120}
+                            fill="#8884d8"
+                            dataKey={yAxis?.field || "value"}
+                        >
+                            {pieData.map((entry, index) => (
+                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                            ))}
+                        </Pie>
+                        <Tooltip />
+                        <Legend />
+                    </RechartsPieChart>
+                </ResponsiveContainer>
+            );
+
+        case "scatter":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsScatterChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis type="number" dataKey={xAxis?.field || "x"} name={xAxis?.label || "X"} />
+                        <YAxis type="number" dataKey={yAxis?.field || "y"} name={yAxis?.label || "Y"} />
+                        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
+                        <Scatter dataKey={yAxis?.field || "y"} fill={COLORS[0]} />
+                    </RechartsScatterChart>
+                </ResponsiveContainer>
+            );
+
+        case "area":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsAreaChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Area type="monotone" dataKey={yAxis.field} stroke={COLORS[0]} fill={COLORS[0]} fillOpacity={0.6} />}
+                    </RechartsAreaChart>
+                </ResponsiveContainer>
+            );
+
+        case "radar":
+            const radarData = data.map((item) => {
+                const result: Record<string, any> = {};
+                if (xAxis?.field) {
+                    result[xAxis.field] = item[xAxis.field];
+                }
+                if (yAxis?.field) {
+                    result[yAxis.field] = item[yAxis.field];
+                }
+                // Include all numeric fields
+                Object.keys(item).forEach((key) => {
+                    if (typeof item[key] === "number" && key !== xAxis?.field && key !== yAxis?.field) {
+                        result[key] = item[key];
+                    }
+                });
+                return result;
+            });
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsRadarChart data={radarData}>
+                        <PolarGrid />
+                        <PolarAngleAxis dataKey={xAxis?.field || "name"} />
+                        <PolarRadiusAxis />
+                        <RechartsRadar name={yAxis?.label || "Value"} dataKey={yAxis?.field || "value"} stroke={COLORS[0]} fill={COLORS[0]} fillOpacity={0.6} />
+                        <Tooltip />
+                        <Legend />
+                    </RechartsRadarChart>
+                </ResponsiveContainer>
+            );
+
+        case "heatmap":
+            // Heatmap is not directly supported by recharts, use a composed chart as approximation
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <ComposedChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && (
+                            <Bar dataKey={yAxis.field} fill={COLORS[0]} radius={[4, 4, 0, 0]}>
+                                {data.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                                ))}
+                            </Bar>
+                        )}
+                    </ComposedChart>
+                </ResponsiveContainer>
+            );
+
+        case "histogram":
+            return (
+                <ResponsiveContainer width="100%" height={400}>
+                    <RechartsBarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={xAxis?.field || "name"} label={{ value: xAxis?.label, position: "insideBottom", offset: -5 }} />
+                        <YAxis label={{ value: yAxis?.label, angle: -90, position: "insideLeft" }} />
+                        <Tooltip />
+                        <Legend />
+                        {yAxis?.field && <Bar dataKey={yAxis.field} fill={COLORS[0]} />}
+                    </RechartsBarChart>
+                </ResponsiveContainer>
+            );
+
+        default:
+            return <div className="text-sm text-gray-500 p-8 text-center">Unsupported chart type: {chartType}</div>;
+    }
+};
+
+export const visualize_data_with_chart = createUITool({
+    name: "visualize_data_with_chart",
+    description: "Generate a dynamic chart for data visualization and user review.",
+    parameters: VisualizeDataWithChartSchema,
+    onlyRender: true,
+    render(tool) {
+        const data = tool.getInputRepaired();
+        const ChartIcon = getChartIcon(data.chart_type || "line");
+
+        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-blue-50 text-blue-600 flex items-center justify-center">
+                            <ChartIcon className="w-3.5 h-3.5" />
+                        </div>
+                        <h3 className="text-sm font-medium text-gray-900">{data.title}</h3>
+                    </div>
+                </div>
+                <div className="p-4">
+                    {data.description && <div className="text-sm text-gray-600 mb-4">{data.description}</div>}
+                    <div className="w-full">{renderChart(data.chart_type || "line", (data.data || []) as Record<string, any>[], data.x_axis, data.y_axis, data.options)}</div>
+                </div>
+            </div>
+        );
+    },
+});