The window is basically complete, but there are some issues need to fix.

1. The window won't scroll when complete.
2. The AI needs the context to generate new inputs, I don't know
how to write.

src/components/creater/edit-testcase-panel.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import {useState, useEffect} from "react";
-import { Label } from "@/components/ui/label";
+import {generateAITestcase} from "@/app/actions/ai-testcase";
-import { Input } from "@/components/ui/input";
+import {Label} from "@/components/ui/label";
-import { Button } from "@/components/ui/button";
+import {Input} from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
-import { getProblemData } from "@/app/actions/getProblem";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import {getProblemData} from "@/app/actions/getProblem";
 
 export default function EditTestcasePanel({
                                               problemId,
@@ -37,6 +38,7 @@ export default function EditTestcasePanel({
                 setTestcases([]);
             }
         }
+
         fetchData();
     }, [problemId]);
 
@@ -46,11 +48,36 @@ export default function EditTestcasePanel({
             {
                 id: `new-${Date.now()}`,
                 expectedOutput: "",
-        inputs: [{ name: "input1", value: "" }],
+                inputs: [{name: "input1", value: ""}],
             },
         ]);
     };
 
+    const [isGenerating, setIsGenerating] = useState(false);
+
+    const handleAITestcase = async () => {
+        setIsGenerating(true);
+        try {
+            const AIOutputParsed = await generateAITestcase({problemId: problemId});
+            setTestcases([
+                ...testcases,
+                {
+                    id: `new-${Date.now()}`,
+                    expectedOutput: AIOutputParsed.expectedOutput,
+                    inputs: AIOutputParsed.inputs
+                }
+            ])
+            window.scrollTo({
+                top: document.body.scrollHeight,
+                behavior: 'smooth',
+            });
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsGenerating(false);
+        }
+    }
+
     const handleRemoveTestcase = (index: number) => {
         const newTestcases = [...testcases];
         newTestcases.splice(index, 1);
@@ -93,9 +120,41 @@ export default function EditTestcasePanel({
         <Card className="w-full">
             <CardHeader>
                 <CardTitle>测试用例</CardTitle>
+                <div className="flex items-center space-x-1"> {/* space-x-1 让按钮更接近 */}
                     <Button type="button" onClick={handleAddTestcase}>
                         添加测试用例
                     </Button>
+                    <Button
+                        type="button"
+                        className="flex items-center gap-1"
+                        onClick={handleAITestcase}
+                        disabled={isGenerating}
+                        style={{
+                            opacity: isGenerating ? 0.7 : 1,
+                            cursor: isGenerating ? 'not-allowed' : 'pointer'
+                        }}
+                    >
+                        <svg
+                            data-testid="geist-icon"
+                            height="16"
+                            strokeLinejoin="round"
+                            style={{color: isGenerating ? '#888' : "currentColor"}}
+                            viewBox="0 0 16 16"
+                            width="16"
+                        >
+                            <path
+                                d="M2.5 0.5V0H3.5V0.5C3.5 1.60457 4.39543 2.5 5.5 2.5H6V3V3.5H5.5C4.39543 3.5 3.5 4.39543 3.5 5.5V6H3H2.5V5.5C2.5 4.39543 1.60457 3.5 0.5 3.5H0V3V2.5H0.5C1.60457 2.5 2.5 1.60457 2.5 0.5Z"
+                                fill="currentColor"></path>
+                            <path
+                                d="M14.5 4.5V5H13.5V4.5C13.5 3.94772 13.0523 3.5 12.5 3.5H12V3V2.5H12.5C13.0523 2.5 13.5 2.05228 13.5 1.5V1H14H14.5V1.5C14.5 2.05228 14.9477 2.5 15.5 2.5H16V3V3.5H15.5C14.9477 3.5 14.5 3.94772 14.5 4.5Z"
+                                fill="currentColor"></path>
+                            <path
+                                d="M8.40706 4.92939L8.5 4H9.5L9.59294 4.92939C9.82973 7.29734 11.7027 9.17027 14.0706 9.40706L15 9.5V10.5L14.0706 10.5929C11.7027 10.8297 9.82973 12.7027 9.59294 15.0706L9.5 16H8.5L8.40706 15.0706C8.17027 12.7027 6.29734 10.8297 3.92939 10.5929L3 10.5V9.5L3.92939 9.40706C6.29734 9.17027 8.17027 7.29734 8.40706 4.92939Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        {isGenerating ? '生成中...' : '使用AI生成测试用例'}
+                    </Button>
+                </div>
             </CardHeader>
             <CardContent>
                 <div className="space-y-6">
@@ -176,5 +235,6 @@ export default function EditTestcasePanel({
                 </div>
             </CardContent>
         </Card>
+
     );
 }