690419:1831 feat: update CI/CD to use SSH key authentication #05

frontend/components/rag/rag-fallback-badge.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { AlertTriangle } from 'lucide-react';
+
+export function RagFallbackBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+      <AlertTriangle className="h-3 w-3" />
+      ใช้ local model คุณภาพอาจลดลง
+    </span>
+  );
+}

frontend/components/rag/rag-result-card.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { FileText } from 'lucide-react';
+import type { RagQueryResponse, RagCitation } from '../../hooks/use-rag';
+import { RagFallbackBadge } from './rag-fallback-badge';
+
+interface RagResultCardProps {
+  result: RagQueryResponse;
+}
+
+function ConfidenceBar({ score }: { score: number }) {
+  const pct = Math.round(score * 100);
+  const color =
+    pct >= 80 ? 'bg-green-500' : pct >= 50 ? 'bg-yellow-500' : 'bg-red-500';
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-2 w-24 rounded-full bg-muted overflow-hidden">
+        <div className={`h-full ${color} transition-all`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className="text-xs text-muted-foreground">{pct}%</span>
+    </div>
+  );
+}
+
+function CitationItem({ citation }: { citation: RagCitation }) {
+  return (
+    <div className="rounded border p-3 text-sm space-y-1">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5 font-medium text-foreground">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <span>{citation.docType}</span>
+          {citation.docNumber && (
+            <span className="text-muted-foreground">— {citation.docNumber}</span>
+          )}
+          {citation.revision && (
+            <span className="rounded bg-muted px-1 text-xs">Rev. {citation.revision}</span>
+          )}
+        </div>
+        <ConfidenceBar score={citation.score} />
+      </div>
+      <p className="text-muted-foreground line-clamp-3">{citation.snippet}</p>
+    </div>
+  );
+}
+
+export function RagResultCard({ result }: RagResultCardProps) {
+  return (
+    <div className="rounded-lg border bg-card p-6 space-y-4">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1">
+          <h3 className="font-semibold text-base mb-1">คำตอบ</h3>
+          <p className="text-sm leading-relaxed whitespace-pre-wrap">{result.answer}</p>
+        </div>
+        <div className="flex flex-col items-end gap-1.5 shrink-0">
+          <ConfidenceBar score={result.confidence} />
+          {result.usedFallbackModel && <RagFallbackBadge />}
+        </div>
+      </div>
+
+      {result.citations.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium text-muted-foreground">
+            อ้างอิง ({result.citations.length} เอกสาร)
+          </h4>
+          <div className="space-y-2">
+            {result.citations.map((c) => (
+              <CitationItem key={c.chunkId} citation={c} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/rag/rag-search-bar.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useState } from 'react';
+import { Loader2, Search } from 'lucide-react';
+import { z } from 'zod';
+
+const schema = z.object({
+  question: z.string().min(1, 'กรุณาระบุคำถาม').max(500, 'คำถามต้องไม่เกิน 500 ตัวอักษร'),
+});
+
+interface RagSearchBarProps {
+  onSearch: (question: string) => void;
+  isLoading: boolean;
+}
+
+export function RagSearchBar({ onSearch, isLoading }: RagSearchBarProps) {
+  const [question, setQuestion] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const result = schema.safeParse({ question });
+    if (!result.success) {
+      setError(result.error.issues[0]?.message ?? 'ข้อมูลไม่ถูกต้อง');
+      return;
+    }
+    setError(null);
+    onSearch(question);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <input
+            type="text"
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            placeholder="ถามคำถามเกี่ยวกับเอกสารโครงการ..."
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            disabled={isLoading}
+            maxLength={500}
+          />
+          {error && <p className="mt-1 text-sm text-destructive">{error}</p>}
+          <p className="mt-1 text-xs text-muted-foreground text-right">
+            {question.length}/500
+          </p>
+        </div>
+        <button
+          type="submit"
+          disabled={isLoading || question.trim().length === 0}
+          className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Search className="h-4 w-4" />
+          )}
+          ค้นหา
+        </button>
+      </div>
+    </form>
+  );
+}