690409:1012 Done Task-FE-AI-03

2026-04-09 10:12:23 +07:00
parent 99c8d61856
commit ca0454a043
6 changed files with 971 additions and 124 deletions
@@ -0,0 +1,171 @@
+// File: components/ai/ai-suggestion-field.tsx
+// Component แสดง AI Suggestion พร้อม Accept / Reject / Edit actions (ADR-018, ADR-020)
+
+import { useState } from 'react';
+import { Check, X, Edit2, Sparkles } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+// สีตาม confidence score (>= 0.95 สีเขียว, >= 0.85 สีเหลือง, < 0.85 สีแดง)
+const getConfidenceClass = (confidence: number): string => {
+  if (confidence >= 0.95) return 'text-green-700 bg-green-50 border-green-400';
+  if (confidence >= 0.85) return 'text-yellow-700 bg-yellow-50 border-yellow-400';
+  return 'text-red-700 bg-red-50 border-red-400';
+};
+
+export interface AiSuggestionFieldProps {
+  label: string;
+  value: string;
+  suggestion?: string;
+  confidence?: number;
+  onAccept: () => void;
+  onReject: () => void;
+  onEdit: (newValue: string) => void;
+  className?: string;
+}
+
+export function AiSuggestionField({
+  label,
+  value,
+  suggestion,
+  confidence,
+  onAccept,
+  onReject,
+  onEdit,
+  className,
+}: AiSuggestionFieldProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+
+  // มีค่าจาก AI หรือไม่
+  const hasSuggestion = suggestion !== undefined && suggestion !== '';
+  // ค่าปัจจุบันตรงกับที่ AI แนะนำ
+  const isAiValue = hasSuggestion && value === suggestion;
+
+  const handleSave = () => {
+    onEdit(editValue);
+    setIsEditing(false);
+  };
+
+  const handleStartEdit = () => {
+    setEditValue(value);
+    setIsEditing(true);
+  };
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      {/* Label พร้อม Confidence Badge */}
+      <div className="flex items-center gap-2">
+        <label className="text-sm font-medium">{label}</label>
+        {hasSuggestion && confidence !== undefined && (
+          <Badge
+            variant="outline"
+            className={cn('text-xs gap-1 px-1.5 py-0', getConfidenceClass(confidence))}
+          >
+            <Sparkles className="h-3 w-3" />
+            AI {Math.round(confidence * 100)}%
+          </Badge>
+        )}
+      </div>
+
+      {/* Field Content — highlight สีเหลืองเมื่อใช้ค่าจาก AI */}
+      <div
+        className={cn(
+          'rounded border px-3 py-2 text-sm min-h-[2.25rem]',
+          isAiValue && 'bg-yellow-50 border-l-4 border-yellow-400'
+        )}
+      >
+        {isEditing ? (
+          <div className="flex gap-2">
+            <Input
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              className="h-7 text-sm"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSave();
+                if (e.key === 'Escape') setIsEditing(false);
+              }}
+            />
+            <Button type="button" size="sm" variant="outline" onClick={handleSave} className="h-7 px-2">
+              <Check className="h-3 w-3" />
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => setIsEditing(false)}
+              className="h-7 px-2"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between gap-2">
+            <span>
+              {value !== '' ? value : <span className="text-muted-foreground italic">—</span>}
+            </span>
+            {hasSuggestion && (
+              <div className="flex gap-1 shrink-0">
+                {/* ปุ่ม "รับ" จะแสดงเมื่อค่าปัจจุบันยังไม่ใช่ค่า AI */}
+                {!isAiValue && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    onClick={onAccept}
+                    className="h-6 px-2 text-xs text-green-700 border-green-300 hover:bg-green-50"
+                    title={`รับค่าจาก AI: ${suggestion}`}
+                  >
+                    <Check className="h-3 w-3 mr-1" />
+                    รับ
+                  </Button>
+                )}
+                {/* ปุ่ม "ปฏิเสธ" จะแสดงเมื่อใช้ค่า AI อยู่ */}
+                {isAiValue && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    onClick={onReject}
+                    className="h-6 px-2 text-xs text-red-700 border-red-300 hover:bg-red-50"
+                    title="ปฏิเสธค่า AI"
+                  >
+                    <X className="h-3 w-3 mr-1" />
+                    ปฏิเสธ
+                  </Button>
+                )}
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleStartEdit}
+                  className="h-6 w-6 p-0"
+                  title="แก้ไขค่า"
+                >
+                  <Edit2 className="h-3 w-3" />
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* แสดง AI Suggestion hint เมื่อค่าปัจจุบันต่างจาก AI */}
+      {hasSuggestion && !isAiValue && (
+        <p className="text-xs text-muted-foreground pl-1">
+          AI แนะนำ:{' '}
+          <button
+            type="button"
+            className="font-medium text-yellow-700 hover:underline"
+            onClick={onAccept}
+          >
+            {suggestion}
+          </button>
+        </p>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,158 @@
+// File: components/ai/document-comparison-view.tsx
+// Side-by-side PDF viewer + Form ที่มี AI Suggestions (ADR-018, ADR-020)
+
+import { useState } from 'react';
+import { Eye, ChevronDown, ChevronUp } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { AiSuggestionField } from './ai-suggestion-field';
+import type { ExtractionResult } from '@/types/ai';
+
+// Labels ภาษาไทยสำหรับ field ต่างๆ
+const FIELD_LABELS: Record<string, string> = {
+  subject: 'ชื่อเรื่อง',
+  documentDate: 'วันที่เอกสาร',
+  category: 'ประเภทเอกสาร',
+  senderId: 'รหัสองค์กรผู้ส่ง',
+  disciplineId: 'สาขา (Discipline)',
+  issuedDate: 'วันที่ออกเอกสาร',
+  receivedDate: 'วันที่รับเอกสาร',
+  projectCode: 'รหัสโครงการ',
+  documentNumber: 'เลขที่เอกสาร',
+};
+
+// Fields ที่แสดงใน comparison view
+const DISPLAY_FIELDS = ['subject', 'documentDate', 'category', 'disciplineId', 'senderId'];
+
+export interface DocumentComparisonViewProps {
+  fileUrl: string | null;
+  extractedData: ExtractionResult | null;
+  formData: Record<string, string>;
+  onFieldUpdate: (field: string, value: string) => void;
+  extractedText?: string;
+  reviewReason?: string;
+}
+
+export function DocumentComparisonView({
+  fileUrl,
+  extractedData,
+  formData,
+  onFieldUpdate,
+  extractedText,
+  reviewReason,
+}: DocumentComparisonViewProps) {
+  const [showRawText, setShowRawText] = useState(false);
+
+  // แกะ metadata และ confidence จาก ExtractionResult
+  const metadata = (extractedData?.extractedMetadata ?? {}) as Record<string, unknown>;
+  const fieldConfidences = metadata.fieldConfidences as Record<string, number> | undefined;
+
+  const getSuggestion = (field: string): string | undefined => {
+    const val = metadata[field];
+    return val !== undefined ? String(val) : undefined;
+  };
+
+  const getConfidence = (field: string): number | undefined =>
+    fieldConfidences?.[field] ?? extractedData?.confidenceScore;
+
+  return (
+    <div className="flex flex-1 gap-6 overflow-hidden">
+      {/* Left: PDF Viewer */}
+      <Card className="flex-1 hidden md:flex flex-col overflow-hidden border-2 border-primary/10 shadow-md">
+        <CardContent className="p-0 flex-1 relative bg-slate-100">
+          {fileUrl ? (
+            <iframe
+              src={`${fileUrl}#toolbar=0&navpanes=0`}
+              className="absolute inset-0 w-full h-full"
+              title="Document Viewer"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+              <p>ไม่พบไฟล์เอกสาร</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Right: Form + AI Suggestions */}
+      <Card className="w-full md:w-[450px] lg:w-[500px] flex-shrink-0 flex flex-col overflow-hidden border-2 border-primary/10 shadow-md">
+        <div className="p-4 border-b bg-muted/30 shrink-0">
+          <h2 className="font-semibold text-lg">ข้อมูลที่สกัดได้</h2>
+          {extractedData?.confidenceScore !== undefined && (
+            <p className="text-sm text-muted-foreground mt-1">
+              ความมั่นใจรวม:{' '}
+              <span
+                className={
+                  extractedData.confidenceScore >= 0.95
+                    ? 'text-green-600 font-semibold'
+                    : extractedData.confidenceScore >= 0.85
+                      ? 'text-yellow-600 font-semibold'
+                      : 'text-red-600 font-semibold'
+                }
+              >
+                {(extractedData.confidenceScore * 100).toFixed(1)}%
+              </span>
+            </p>
+          )}
+          {reviewReason && (
+            <p className="text-sm text-red-600 mt-1 bg-red-50 p-2 rounded border border-red-100">
+              เหตุผลตรวจสอบ: {reviewReason}
+            </p>
+          )}
+        </div>
+
+        <CardContent className="flex-1 overflow-y-auto p-4 space-y-4">
+          {/* AI Suggestion Fields */}
+          {DISPLAY_FIELDS.map((field) => {
+            const suggestion = getSuggestion(field);
+            const confidence = getConfidence(field);
+            const currentValue = formData[field] ?? '';
+
+            return (
+              <AiSuggestionField
+                key={field}
+                label={FIELD_LABELS[field] ?? field}
+                value={currentValue}
+                suggestion={suggestion}
+                confidence={confidence}
+                onAccept={() => suggestion !== undefined && onFieldUpdate(field, suggestion)}
+                onReject={() => onFieldUpdate(field, '')}
+                onEdit={(val) => onFieldUpdate(field, val)}
+              />
+            );
+          })}
+
+          {/* OCR Raw Text Viewer (toggle) */}
+          {extractedText && (
+            <div className="border-t pt-4">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="text-blue-600 p-0 h-auto hover:bg-transparent gap-1"
+                onClick={() => setShowRawText((prev) => !prev)}
+              >
+                <Eye className="h-4 w-4" />
+                ดูข้อความดิบจาก AI
+                {showRawText ? (
+                  <ChevronUp className="h-4 w-4" />
+                ) : (
+                  <ChevronDown className="h-4 w-4" />
+                )}
+              </Button>
+              {showRawText && (
+                <Card className="mt-2">
+                  <CardContent className="p-4">
+                    <pre className="text-xs bg-gray-50 p-3 rounded overflow-auto max-h-48 whitespace-pre-wrap font-mono">
+                      {extractedText}
+                    </pre>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,19 @@
+// File: components/ai/processing-indicator.tsx
+// Loading indicator ระหว่าง AI ประมวลผลเอกสาร (ADR-018, ADR-020)
+
+import { Loader2 } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+
+export function AiProcessingIndicator() {
+  return (
+    <Card className="border-yellow-200 bg-yellow-50">
+      <CardContent className="flex items-center space-x-3 p-4">
+        <Loader2 className="h-5 w-5 animate-spin text-yellow-600" />
+        <div>
+          <p className="font-medium text-yellow-800">AI กำลังวิเคราะห์เอกสาร...</p>
+          <p className="text-sm text-yellow-600">กรุณารอสักครู่ (ประมาณ 15-30 วินาที)</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}