Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -64,11 +64,35 @@ const FEEDBACK_TAGS = {
 function normalizeMarkdownLists(input: string) {
   if (!input) return input;
 
-  return (
-    input
-      .replace(/(^|\n)(\s*)(\d+\.)\s*\n+\s+/g, "$1$2$3 ")
-      .replace(/(^|\n)(\s*)([-*+])\s*\n+\s+/g, "$1$2$3 ")
-  );
+  return input
+    .replace(/(^|\n)(\s*)(\d+\.)\s*\n+\s+/g, "$1$2$3 ")
+    .replace(/(^|\n)(\s*)([-*+])\s*\n+\s+/g, "$1$2$3 ");
+}
+
+// ✅ References normalization: supports string[] OR {source_file, section}[]
+type RefObj = { source_file?: string | null; section?: string | null };
+type RefItem = string | RefObj;
+
+function normalizeRefs(raw: any): string[] {
+  const arr: RefItem[] = Array.isArray(raw) ? raw : [];
+  const out: string[] = [];
+
+  for (const r of arr) {
+    if (typeof r === "string") {
+      const t = r.trim();
+      if (t) out.push(t);
+      continue;
+    }
+
+    if (r && typeof r === "object") {
+      const file = String((r as RefObj).source_file ?? "").trim();
+      const sec = String((r as RefObj).section ?? "").trim();
+      const text = file && sec ? `${file} — ${sec}` : file || sec;
+      if (text) out.push(text);
+    }
+  }
+
+  return out;
 }
 
 export function Message({
@@ -150,6 +174,9 @@ export function Message({
     // UI uses "not-helpful" (dash), backend expects "not_helpful" (underscore)
     const rating = feedbackType === "helpful" ? "helpful" : "not_helpful";
 
+    // ✅ normalize refs to string[] to match backend schema
+    const normalizedRefs = normalizeRefs((message as any).references);
+
     try {
       await apiFeedback({
         user_id: currentUserId,
@@ -159,7 +186,7 @@ export function Message({
         user_text: "", // optional; you can wire last user msg later if you want
         comment: feedbackText || "",
         tags: selectedTags,
-        refs: message.references ?? [],
+        refs: normalizedRefs,
         learning_mode: chatMode === "ask" ? learningMode : chatMode,
         doc_type: docType,
         timestamp_ms: Date.now(),
@@ -207,7 +234,9 @@ export function Message({
           p: ({ children }) => (
             <p className="my-2 whitespace-pre-wrap break-words">{children}</p>
           ),
-          ul: ({ children }) => <ul className="my-3 pl-6 space-y-2">{children}</ul>,
+          ul: ({ children }) => (
+            <ul className="my-3 pl-6 space-y-2">{children}</ul>
+          ),
           ol: ({ children }) => <ol className="my-3 space-y-4">{children}</ol>,
           li: ({ children, node }) => {
             const parent = (node as any)?.parent?.tagName;
@@ -225,7 +254,9 @@ export function Message({
             }
             return <li>{children}</li>;
           },
-          strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+          strong: ({ children }) => (
+            <strong className="font-semibold">{children}</strong>
+          ),
           em: ({ children }) => <em className="italic">{children}</em>,
         }}
       >
@@ -234,6 +265,11 @@ export function Message({
     );
   };
 
+  // ✅ normalize references for UI display as well
+  const displayRefs = useMemo(() => {
+    return normalizeRefs((message as any).references);
+  }, [message]);
+
   return (
     <div
       className={`flex gap-2 ${
@@ -244,7 +280,11 @@ export function Message({
       {showSenderInfo && message.sender ? (
         <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-white">
           {message.sender.isAI ? (
-            <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+            <img
+              src={clareAvatar}
+              alt="Clare"
+              className="w-full h-full object-cover"
+            />
           ) : (
             <img
               src={
@@ -311,18 +351,22 @@ export function Message({
             </div>
           )}
 
-        {/* References */}
-        {message.references && message.references.length > 0 && (
+        {/* References (restored) */}
+        {displayRefs.length > 0 && (
           <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
             <CollapsibleTrigger asChild>
               <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs">
-                {referencesOpen ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-                {message.references.length}{" "}
-                {message.references.length === 1 ? "reference" : "references"}
+                {referencesOpen ? (
+                  <ChevronUp className="h-3 w-3" />
+                ) : (
+                  <ChevronDown className="h-3 w-3" />
+                )}
+                {displayRefs.length}{" "}
+                {displayRefs.length === 1 ? "reference" : "references"}
               </Button>
             </CollapsibleTrigger>
             <CollapsibleContent className="space-y-1 mt-1">
-              {message.references.map((ref, index) => (
+              {displayRefs.map((ref, index) => (
                 <Badge key={index} variant="outline" className="text-xs">
                   {ref}
                 </Badge>
@@ -345,7 +389,11 @@ export function Message({
               onClick={handleCopy}
               title="Copy"
             >
-              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              {copied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
             </Button>
 
             {!isUser && (