@langgraph-js/ui 5.7.0 → 5.7.2

package/src/chat/tools/ask_user_to_fill_form.tsx

@@ -8,29 +8,45 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
+// 错误信息显示组件
+const ErrorMessage = ({ errors }: { errors?: string[] }) => {
+    if (!errors || errors.length === 0) return null;
+    return (
+        <div className="flex items-start gap-1.5 mt-1">
+            <AlertCircle className="w-3.5 h-3.5 text-red-500 shrink-0 mt-0.5" />
+            <span className="text-xs text-red-600">{errors[0]}</span>
+        </div>
+    );
+};
+
 // 自定义文本输入组件
 const CustomTextWidget = (props: any) => {
     const hasMinLength = props.options?.minLength;
     const hasMaxLength = props.options?.maxLength;
     const currentLength = props.value?.length || 0;
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
 
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <input
                 type="text"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                className={cn(
+                    "w-full rounded-lg border bg-gray-50/50 p-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 transition-all",
+                    hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                )}
                 value={props.value || ""}
                 onChange={(e) => props.onChange(e.target.value)}
                 placeholder={props.placeholder}
                 disabled={props.disabled}
                 maxLength={hasMaxLength ? props.options.maxLength : undefined}
             />
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
             {(hasMinLength || hasMaxLength) && (
                 <div className="flex justify-end mt-1">
@@ -50,11 +66,12 @@ const CustomTextWidget = (props: any) => {
 // 自定义密码输入组件
 const CustomPasswordWidget = (props: any) => {
     const [showPassword, setShowPassword] = useState(false);
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
 
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
@@ -62,7 +79,10 @@ const CustomPasswordWidget = (props: any) => {
             <div className="relative">
                 <input
                     type={showPassword ? "text" : "password"}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                    className={cn(
+                        "w-full rounded-lg border bg-gray-50/50 p-2 pr-10 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 transition-all",
+                        hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                    )}
                     value={props.value || ""}
                     onChange={(e) => props.onChange(e.target.value)}
                     placeholder={props.placeholder}
@@ -72,6 +92,7 @@ const CustomPasswordWidget = (props: any) => {
                     {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                 </button>
             </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -82,17 +103,21 @@ const CustomTextareaWidget = (props: any) => {
     const hasMinLength = props.options?.minLength;
     const hasMaxLength = props.options?.maxLength;
     const currentLength = props.value?.length || 0;
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
 
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <textarea
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-vertical"
+                className={cn(
+                    "w-full rounded-lg border bg-gray-50/50 p-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 transition-all resize-none",
+                    hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                )}
                 value={props.value || ""}
                 onChange={(e) => props.onChange(e.target.value)}
                 placeholder={props.placeholder}
@@ -100,6 +125,7 @@ const CustomTextareaWidget = (props: any) => {
                 rows={props.options?.rows || 4}
                 maxLength={hasMaxLength ? props.options.maxLength : undefined}
             />
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
             {(hasMinLength || hasMaxLength) && (
                 <div className="flex justify-end mt-1">
@@ -118,17 +144,22 @@ const CustomTextareaWidget = (props: any) => {
 
 // 自定义选择框组件
 const CustomSelectWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <div className="relative">
                 <select
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors appearance-none"
+                    className={cn(
+                        "w-full rounded-lg border bg-gray-50/50 p-2 pr-10 text-sm text-gray-900 focus:outline-none focus:ring-2 transition-all appearance-none",
+                        hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                    )}
                     value={props.value || ""}
                     onChange={(e) => props.onChange(e.target.value)}
                     disabled={props.disabled}
@@ -146,6 +177,7 @@ const CustomSelectWidget = (props: any) => {
                 </select>
                 <ChevronDown size={16} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
             </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -153,15 +185,17 @@ const CustomSelectWidget = (props: any) => {
 
 // 自定义多选框组件
 const CustomCheckboxWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-900 mb-2">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
-            <div className="space-y-2">
+            <div className={cn("space-y-2", hasError && "p-2 border border-red-200 rounded-lg bg-red-50/30")}>
                 {props.options?.enumOptions?.map((option: any, index: number) => (
                     <label key={index} className="flex items-center">
                         <input
@@ -182,6 +216,7 @@ const CustomCheckboxWidget = (props: any) => {
                     </label>
                 ))}
             </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -189,15 +224,17 @@ const CustomCheckboxWidget = (props: any) => {
 
 // 自定义单选按钮组件
 const CustomRadioWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-900 mb-2">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
-            <div className="space-y-2">
+            <div className={cn("space-y-2", hasError && "p-2 border border-red-200 rounded-lg bg-red-50/30")}>
                 {props.options?.enumOptions?.map((option: any, index: number) => (
                     <label key={index} className="flex items-center">
                         <input
@@ -213,6 +250,7 @@ const CustomRadioWidget = (props: any) => {
                     </label>
                 ))}
             </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -220,17 +258,22 @@ const CustomRadioWidget = (props: any) => {
 
 // 自定义数字输入组件
 const CustomNumberWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <input
                 type="number"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                className={cn(
+                    "w-full rounded-lg border bg-gray-50/50 p-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 transition-all",
+                    hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                )}
                 value={props.value || ""}
                 onChange={(e) => props.onChange(Number(e.target.value))}
                 placeholder={props.placeholder}
@@ -239,6 +282,7 @@ const CustomNumberWidget = (props: any) => {
                 max={props.options?.max}
                 step={props.options?.step}
             />
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -246,15 +290,17 @@ const CustomNumberWidget = (props: any) => {
 
 // 自定义滑块组件
 const CustomRangeWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-900 mb-2">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
-            <div className="px-2">
+            <div className={cn("px-2", hasError && "p-2 border border-red-200 rounded-lg bg-red-50/30")}>
                 <input
                     type="range"
                     className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
@@ -271,6 +317,7 @@ const CustomRangeWidget = (props: any) => {
                     <span>{props.options?.max || 100}</span>
                 </div>
             </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -278,21 +325,27 @@ const CustomRangeWidget = (props: any) => {
 
 // 自定义日期选择器组件
 const CustomDateWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <input
                 type="date"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                className={cn(
+                    "w-full rounded-lg border bg-gray-50/50 p-2 text-sm text-gray-900 focus:outline-none focus:ring-2 transition-all",
+                    hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                )}
                 value={props.value || ""}
                 onChange={(e) => props.onChange(e.target.value)}
                 disabled={props.disabled}
             />
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -300,21 +353,27 @@ const CustomDateWidget = (props: any) => {
 
 // 自定义日期时间选择器组件
 const CustomDateTimeWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <input
                 type="datetime-local"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                className={cn(
+                    "w-full rounded-lg border bg-gray-50/50 p-2 text-sm text-gray-900 focus:outline-none focus:ring-2 transition-all",
+                    hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                )}
                 value={props.value || ""}
                 onChange={(e) => props.onChange(e.target.value)}
                 disabled={props.disabled}
             />
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -322,23 +381,28 @@ const CustomDateTimeWidget = (props: any) => {
 
 // 自定义布尔值组件
 const CustomBooleanWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
-            {props.label && (
-                <label className="flex items-center">
-                    <input
-                        type="checkbox"
-                        className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 mr-2"
-                        checked={props.value || false}
-                        onChange={(e) => props.onChange(e.target.checked)}
-                        disabled={props.disabled}
-                    />
-                    <span className="text-sm text-gray-700">
-                        {props.label}
-                        {props.required && <span className="text-red-500 ml-1">*</span>}
-                    </span>
-                </label>
-            )}
+            <div className={cn(hasError && "p-2 border border-red-200 rounded-lg bg-red-50/30")}>
+                {props.label && (
+                    <label className="flex items-center">
+                        <input
+                            type="checkbox"
+                            className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 mr-2"
+                            checked={props.value || false}
+                            onChange={(e) => props.onChange(e.target.checked)}
+                            disabled={props.disabled}
+                        />
+                        <span className="text-sm text-gray-700">
+                            {props.label}
+                            {props.required && <span className="text-red-500 ml-1">*</span>}
+                        </span>
+                    </label>
+                )}
+            </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1 ml-6">{props.description}</p>}
         </div>
     );
@@ -346,6 +410,7 @@ const CustomBooleanWidget = (props: any) => {
 
 // 自定义文件上传组件
 const CustomFileWidget = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
     const handleFileChange = (e: any) => {
         const files = e.target.files;
         if (props.multiple) {
@@ -360,19 +425,23 @@ const CustomFileWidget = (props: any) => {
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-sm font-medium text-gray-900 mb-1">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
             <input
                 type="file"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors file:mr-3 file:py-1 file:px-3 file:border-0 file:bg-blue-50 file:text-blue-700 file:rounded file:font-medium"
+                className={cn(
+                    "w-full rounded-lg border bg-gray-50/50 p-2 text-sm text-gray-900 focus:outline-none focus:ring-2 transition-all file:mr-3 file:py-1 file:px-3 file:border-0 file:bg-blue-50 file:text-blue-700 file:rounded file:font-medium",
+                    hasError ? "border-red-500 focus:ring-red-100 focus:border-red-500" : "border-gray-200 focus:ring-blue-100 focus:border-blue-400"
+                )}
                 onChange={handleFileChange}
                 disabled={props.disabled}
                 multiple={props.multiple}
                 accept={props.accept}
             />
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -380,15 +449,17 @@ const CustomFileWidget = (props: any) => {
 
 // 自定义数组字段组件
 const CustomArrayField = (props: any) => {
+    const hasError = props.rawErrors && props.rawErrors.length > 0;
+
     return (
         <div className="mb-4">
             {props.label && (
-                <label className="block text-sm font-medium text-gray-700 mb-2">
+                <label className="block text-sm font-medium text-gray-900 mb-2">
                     {props.label}
                     {props.required && <span className="text-red-500 ml-1">*</span>}
                 </label>
             )}
-            <div className="space-y-2">
+            <div className={cn("space-y-2", hasError && "p-2 border border-red-200 rounded-lg bg-red-50/30")}>
                 {props.items.map((item: any, index: number) => (
                     <div key={index} className="flex items-start gap-2 p-3 border border-gray-200 rounded-lg">
                         <div className="flex-1">{item.children}</div>
@@ -402,6 +473,7 @@ const CustomArrayField = (props: any) => {
                     添加项目
                 </button>
             </div>
+            <ErrorMessage errors={props.rawErrors} />
             {props.description && <p className="text-xs text-gray-500 mt-1">{props.description}</p>}
         </div>
     );
@@ -412,12 +484,12 @@ const CustomFieldTemplate = (props: any) => {
     return <div className={`${props.className} mb-4`}>{props.children}</div>;
 };
 
-// 自定义对象字段模板
+// 自定义对象字段模板 - 默认竖向排列
 const CustomObjectFieldTemplate = (props: any) => {
     return (
         <div className="mb-4">
             {props.title && <h3 className="text-sm font-medium text-gray-700 mb-2">{props.title}</h3>}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pl-4 border-l-2 border-gray-200">
+            <div className="space-y-3 pl-4 border-l-2 border-gray-200">
                 {props.properties.map((prop: any) => (
                     <div key={prop.name}>{prop.content}</div>
                 ))}
@@ -460,7 +532,7 @@ export const ask_user_to_fill_form = createUITool({
             const data = tool.getInputRepaired();
             const output = tool.getJSONOutputSafe();
             const formSchema = data?.schema || {};
-            const canInteract = tool.state === "interrupted";
+            const canInteract = tool.state === "interrupted" || tool.state === "loading";
 
             const handleSubmit = (formData: any) => {
                 try {
@@ -543,8 +615,8 @@ export const ask_user_to_fill_form = createUITool({
                                 </div>
                             </div>
                         </div>
-                        <div className="p-4 space-y-3">
-                            {data?.description && <div className="text-sm text-gray-600">{data.description}</div>}
+                        <div className="p-3 space-y-3">
+                            {data?.description && <div className="text-sm font-medium text-gray-900">{data.description}</div>}
                             <ErrorBoundary>
                                 <Form
                                     readonly={!canInteract}
@@ -578,6 +650,25 @@ export const ask_user_to_fill_form = createUITool({
         } catch (error) {
             // 外层错误边界，捕获所有未处理的错误
             console.error("表单组件渲染错误:", error);
+            const errorMessage = error instanceof Error ? error.message : "表单配置有误，请检查 schema 格式是否正确。";
+
+            // 如果可以交互，直接将错误响应到远端
+            const canInteract = tool.state === "interrupted" || tool.state === "loading";
+            if (canInteract) {
+                try {
+                    tool.sendResumeData({
+                        /** @ts-ignore */
+                        type: "respond",
+                        message: JSON.stringify({
+                            error: "表单加载失败",
+                            message: errorMessage,
+                        }),
+                    });
+                } catch (sendError) {
+                    console.error("发送错误响应失败:", sendError);
+                }
+            }
+
             return (
                 <div className="w-full my-1 border border-red-200 bg-red-50 rounded-xl overflow-hidden">
                     <div className="p-4">
@@ -585,7 +676,7 @@ export const ask_user_to_fill_form = createUITool({
                             <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>
+                        <p className="text-xs text-red-700">{errorMessage}</p>
                     </div>
                 </div>
             );

package/src/chat/tools/create_artifacts.tsx

@@ -1,6 +1,7 @@
-import { ArtifactCommand, createUITool, ToolRenderData } from "@langgraph-js/sdk";
-import { FileIcon } from "lucide-react";
+import { ArtifactCommand, createUITool } from "@langgraph-js/sdk";
+import { FileIcon, Code2, Eye, Sparkles, Terminal } from "lucide-react";
 import { useChat } from "@langgraph-js/sdk/react";
+import { motion } from "motion/react";
 
 export const create_artifacts = createUITool({
     name: "create_artifacts",
@@ -8,26 +9,83 @@ export const create_artifacts = createUITool({
     parameters: {},
     onlyRender: true,
     render(tool: any) {
-        const data: ArtifactCommand = tool.getInputRepaired();
+        const data: Partial<ArtifactCommand> = tool.getInputRepaired();
         const { setCurrentArtifactById, setShowArtifact } = useChat();
 
         const toggleExpand = () => {
+            if (!data.id) return;
             setCurrentArtifactById(data.id, tool.message.id!);
             setShowArtifact(true);
         };
 
+        // 根据文件扩展名获取合适的图标
+        const getFileIcon = (filename: string = "") => {
+            const ext = filename.split(".").pop()?.toLowerCase();
+            switch (ext) {
+                case "tsx":
+                case "jsx":
+                case "ts":
+                case "js":
+                    return <Code2 className="w-5 h-5 text-blue-500" />;
+                case "py":
+                    return <Terminal className="w-5 h-5 text-green-500" />;
+                case "html":
+                case "css":
+                    return <Code2 className="w-5 h-5 text-orange-500" />;
+                default:
+                    return <FileIcon className="w-5 h-5 text-gray-500" />;
+            }
+        };
+
         return (
-            <div className="p-4 space-y-4">
-                <div className="text-sm text-gray-500">创建文件: {data.title}</div>
-                <div className="border rounded-lg p-2 hover:bg-gray-50">
-                    <div className="flex items-center justify-between select-none cursor-pointer" onClick={toggleExpand}>
-                        <div className="flex items-center gap-2">
-                            <FileIcon className="w-4 h-4" />
-                            <span className="font-xs">{data.title}</span> version: {data.id}
+            <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="p-2 max-w-md">
+                {/* Artifact 卡片 */}
+                <div
+                    className="group relative overflow-hidden bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500/10 dark:hover:shadow-indigo-500/20 hover:border-indigo-300 dark:hover:border-indigo-700/50"
+                    onClick={toggleExpand}
+                >
+                    {/* 背景光晕效果 */}
+                    <div className="absolute -top-24 -right-24 w-48 h-48 bg-indigo-500/5 dark:bg-indigo-500/10 rounded-full blur-3xl group-hover:bg-indigo-500/10 dark:group-hover:bg-indigo-500/20 transition-colors duration-500" />
+
+                    <div className="p-4 relative flex items-center gap-4">
+                        {/* 图标容器 */}
+                        <div className="relative shrink-0">
+                            <div className="p-3 rounded-xl bg-gray-50 dark:bg-gray-800 group-hover:bg-white dark:group-hover:bg-gray-700 shadow-sm group-hover:shadow-md transition-all duration-300">
+                                {getFileIcon(data.title)}
+                            </div>
+                            <div className="absolute -top-1 -right-1 p-1 rounded-full bg-indigo-500 shadow-lg shadow-indigo-500/50">
+                                <Sparkles className="w-2 h-2 text-white" />
+                            </div>
+                        </div>
+
+                        {/* 文字内容 */}
+                        <div className="flex-1 min-w-0 space-y-1.5">
+                            <h5 className="text-sm font-bold text-gray-900 dark:text-gray-100 truncate group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">{data.title}</h5>
+                            <div className="flex flex-wrap items-center gap-2">
+                                <span className="inline-block max-w-[150px] truncate text-[10px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-md bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-100/50 dark:border-indigo-500/20 whitespace-nowrap">
+                                    ID: {data.id}
+                                </span>
+                                <span className="flex items-center gap-1 text-[11px] text-gray-400 dark:text-gray-500 font-medium whitespace-nowrap shrink-0">
+                                    <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+                                    可交互
+                                </span>
+                            </div>
                         </div>
+
+                        {/* 操作按钮 */}
+                        <div className="shrink-0">
+                            <div className="p-2.5 rounded-xl bg-gray-50 dark:bg-gray-800 group-hover:bg-indigo-500 group-hover:text-white group-hover:shadow-lg group-hover:shadow-indigo-500/30 transition-all duration-300">
+                                <Eye className="w-4 h-4 group-hover:scale-110 transition-transform" />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 悬停时的底部进度条式装饰 */}
+                    <div className="h-0.5 w-full bg-transparent overflow-hidden">
+                        <motion.div initial={{ x: "-100%" }} whileHover={{ x: "0%" }} className="h-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" transition={{ duration: 0.4 }} />
                     </div>
                 </div>
-            </div>
+            </motion.div>
         );
     },
 });

package/src/settings/ArtifactsSettings.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import SettingFormBase from "./SettingFormBase";
+
+interface ArtifactsSettingsData {
+    artifactsUrl: string;
+}
+
+const initialArtifactsSettings: ArtifactsSettingsData = {
+    artifactsUrl: "https://langgraph-artifacts.netlify.app/",
+};
+
+const ArtifactsSettings: React.FC = () => {
+    return (
+        <SettingFormBase settingKey="artifactsUrl" initialData={initialArtifactsSettings}>
+            {(formData, handleChange) => (
+                <form className="space-y-6">
+                    <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
+                        <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">Artifacts 设置</h4>
+                        <p className="text-sm text-blue-800 dark:text-blue-200 leading-relaxed">
+                            配置 artifacts 查看器的 URL。这个 URL 指向用于显示 artifacts 的 Web 组件。
+                        </p>
+                    </div>
+
+                    <div>
+                        <label htmlFor="artifactsUrl" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Artifacts URL
+                        </label>
+                        <input
+                            type="url"
+                            id="artifactsUrl"
+                            name="artifactsUrl"
+                            value={formData.artifactsUrl}
+                            onChange={handleChange}
+                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                            placeholder="https://langgraph-artifacts.netlify.app/"
+                        />
+                        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                            输入有效的 URL 地址，用于加载 artifacts 查看器组件。
+                        </p>
+                    </div>
+                </form>
+            )}
+        </SettingFormBase>
+    );
+};
+
+export default ArtifactsSettings;