58 lines
2.5 KiB
JavaScript
58 lines
2.5 KiB
JavaScript
import { Bot, User, Receipt, Tag } from 'lucide-react';
|
|
|
|
export function ChatMessage({ role, content, sources = [], detectedCategory, onSelectSource }) {
|
|
const isUser = role === 'user';
|
|
|
|
if (isUser) {
|
|
return (
|
|
<div className="flex justify-end">
|
|
<div className="flex max-w-[75%] items-start gap-2">
|
|
<p className="rounded-2xl rounded-tr-sm bg-ink-900 px-4 py-2.5 text-sm text-paper-100">{content}</p>
|
|
<span className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink-100 text-ink-700">
|
|
<User className="h-3.5 w-3.5" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex justify-start">
|
|
<div className="flex max-w-[85%] items-start gap-2">
|
|
<span className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-amber-500 text-ink-950">
|
|
<Bot className="h-3.5 w-3.5" />
|
|
</span>
|
|
<div className="rounded-2xl rounded-tl-sm border border-ink-900/10 bg-paper-50 px-4 py-3 text-sm text-ink-950 shadow-sm">
|
|
{detectedCategory && (
|
|
<div className="mb-2 inline-flex items-center gap-1 rounded-full border border-amber-500/40 bg-amber-500/10 px-2.5 py-1 text-[11px] font-semibold text-amber-700">
|
|
<Tag className="h-3 w-3" /> Searched in: {detectedCategory}
|
|
</div>
|
|
)}
|
|
<p className="whitespace-pre-wrap leading-relaxed">{content}</p>
|
|
|
|
{sources.length > 0 && (
|
|
<>
|
|
<div className="dash-divider my-3 opacity-30" />
|
|
<div className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
|
|
<Receipt className="h-3 w-3" /> Sourced from {sources.length} catalog item{sources.length > 1 ? 's' : ''}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
{sources.map((s) => (
|
|
<button
|
|
key={s.image_id || s.product_name || s.title}
|
|
onClick={() => onSelectSource?.(s)}
|
|
className="rounded-full border border-ink-900/15 bg-paper-100 px-2.5 py-1 font-mono text-[11px] text-ink-700 transition hover:border-amber-500 hover:text-amber-600"
|
|
title={s.price_range || ''}
|
|
>
|
|
{s.product_name || s.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|