65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
'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>
|
|
);
|
|
}
|