Spaces:
Sleeping
Sleeping
File size: 2,254 Bytes
4d592a4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import React from 'react';
import { Clock, Globe, FileText, GitMerge, Lock } from 'lucide-react';
import type { Answer, QueryMode } from '../../types';
import { ConfidenceIndicator } from './ConfidenceIndicator';
interface AnswerCardProps {
answer: Answer;
}
const modeIcons: Record<QueryMode, React.ReactNode> = {
web: <Globe className="w-3 h-3" />,
pdf: <FileText className="w-3 h-3" />,
hybrid: <GitMerge className="w-3 h-3" />,
restricted: <Lock className="w-3 h-3" />,
};
const modeLabels: Record<QueryMode, string> = {
web: 'Web Search',
pdf: 'PDF Only',
hybrid: 'Hybrid',
restricted: 'Restricted',
};
export const AnswerCard: React.FC<AnswerCardProps> = ({ answer }) => {
const formatTime = (timestamp: string) => {
const date = new Date(timestamp);
return date.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
});
};
return (
<div className="card overflow-hidden">
<div className="border-b border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900/50">
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
Question:
</p>
<p className="text-lg font-medium text-gray-900 dark:text-white">
{answer.query}
</p>
</div>
<div className="p-6 space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{modeIcons[answer.mode]}
<span className="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">
{modeLabels[answer.mode]}
</span>
</div>
<div className="flex items-center gap-4">
<ConfidenceIndicator confidence={answer.confidence} />
<div className="flex items-center gap-1 text-xs text-gray-500">
<Clock className="w-3 h-3" />
<span>{formatTime(answer.timestamp)}</span>
</div>
</div>
</div>
<div className="prose prose-gray dark:prose-invert max-w-none">
<p className="text-gray-800 dark:text-gray-200 leading-relaxed whitespace-pre-wrap">
{answer.text}
</p>
</div>
</div>
</div>
);
};
|