690519:1631 224 to 226 AI #01

2026-05-19 16:31:50 +07:00
parent 3e25097470
commit ea5499123e
127 changed files with 12387 additions and 42 deletions
@@ -0,0 +1,99 @@
+'use client';
+
+// File: components/ai/intent-classification/test-console-panel.tsx
+// Change Log
+// - 2026-05-19: สร้าง Test Console Panel สำหรับทดสอบ Intent Classification (ADR-024).
+
+import { useState } from 'react';
+import { useClassifyIntent } from '@/hooks/ai/use-intent-classification';
+import { ClassificationResultCard } from './classification-result-card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Loader2, Send } from 'lucide-react';
+import type { ClassificationResult } from '@/lib/services/ai-intent.service';
+
+/**
+ * Test Console Panel — Admin/Developer ทดสอบ classification แบบ real-time
+ */
+export function TestConsolePanel() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<
+    Array<{ query: string; result: ClassificationResult; timestamp: Date }>
+  >([]);
+
+  const classifyMutation = useClassifyIntent();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
+
+    try {
+      const result = await classifyMutation.mutateAsync({ query: trimmed });
+      setResults((prev) => [
+        { query: trimmed, result, timestamp: new Date() },
+        ...prev,
+      ]);
+      setQuery('');
+    } catch {
+      // Error state จัดการโดย TanStack Query (classifyMutation.isError)
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Send className="h-5 w-5" />
+          Test Console
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Input Form */}
+        <form onSubmit={handleSubmit} className="flex gap-2">
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="พิมพ์คำถามเพื่อทดสอบ เช่น 'สรุปเอกสารนี้' หรือ 'show me RFA'"
+            maxLength={200}
+            disabled={classifyMutation.isPending}
+          />
+          <Button
+            type="submit"
+            disabled={!query.trim() || classifyMutation.isPending}
+          >
+            {classifyMutation.isPending ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Send className="h-4 w-4" />
+            )}
+          </Button>
+        </form>
+
+        {/* Error Display */}
+        {classifyMutation.isError && (
+          <p className="text-sm text-destructive">
+            เกิดข้อผิดพลาด: ไม่สามารถเชื่อมต่อ AI ได้ กรุณาลองใหม่
+          </p>
+        )}
+
+        {/* Results List */}
+        <div className="space-y-3 max-h-[60vh] overflow-y-auto">
+          {results.length === 0 && (
+            <p className="text-muted-foreground text-sm text-center py-8">
+              พิมพ์คำถามด้านบนเพื่อทดสอบ Intent Classification
+            </p>
+          )}
+          {results.map((item, idx) => (
+            <ClassificationResultCard
+              key={`${item.timestamp.getTime()}-${idx}`}
+              query={item.query}
+              result={item.result}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}