frontend

src/components/ChatMessage.jsx

@@ -0,0 +1,57 @@
+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>
+  );
+}