Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -7,7 +7,6 @@ import pdfIcon from "../assets/file-icons/pdf.png";
 import pptIcon from "../assets/file-icons/ppt.png";
 import otherIcon from "../assets/file-icons/other_format.png";
 
-
 import {
   Copy,
   ThumbsUp,
@@ -16,6 +15,7 @@ import {
   ChevronUp,
   Check,
   X,
+  FileText,
 } from "lucide-react";
 import { Badge } from "./ui/badge";
 import {
@@ -73,6 +73,58 @@ function normalizeMarkdownLists(input: string) {
     .replace(/(^|\n)(\s*)([-*+])\s*\n+\s+/g, "$1$2$3 ");
 }
 
+// ---- Refs normalization (supports old string[] + new {source_file, section}[]) ----
+type RefObj = { source_file?: string; section?: string };
+
+function normalizeRefs(raw: any): RefObj[] {
+  const arr: any[] = Array.isArray(raw) ? raw : [];
+  return arr
+    .map((x) => {
+      // object ref
+      if (x && typeof x === "object" && !Array.isArray(x)) {
+        const sf =
+          x.source_file != null
+            ? String(x.source_file).trim()
+            : x.file != null
+            ? String(x.file).trim()
+            : "";
+        const sec =
+          x.section != null
+            ? String(x.section).trim()
+            : x.loc != null
+            ? String(x.loc).trim()
+            : "";
+        if (!sf && !sec) return null;
+        return { source_file: sf || undefined, section: sec || undefined };
+      }
+
+      // string ref, try parse "file — section"
+      if (typeof x === "string") {
+        const s = x.trim();
+        if (!s) return null;
+        const parts = s.split("—").map((p) => p.trim()).filter(Boolean);
+        if (parts.length >= 2) {
+          return {
+            source_file: parts[0] || undefined,
+            section: parts.slice(1).join(" — ") || undefined,
+          };
+        }
+        return { source_file: s || undefined, section: undefined };
+      }
+
+      return null;
+    })
+    .filter(Boolean) as RefObj[];
+}
+
+function stringifyRefsForFeedback(refs: RefObj[]): string[] {
+  return (refs || []).map((r) => {
+    const a = (r.source_file || "").trim();
+    const b = (r.section || "").trim();
+    return b ? `${a} — ${b}` : a;
+  });
+}
+
 export function Message({
   message,
   showSenderInfo = false,
@@ -91,7 +143,7 @@ export function Message({
   );
   const [copied, setCopied] = useState(false);
 
-  // ✅ References UI state
+  // ✅ References UI state (badge toggle)
   const [referencesOpen, setReferencesOpen] = useState(false);
 
   const [showFeedbackArea, setShowFeedbackArea] = useState(false);
@@ -141,6 +193,14 @@ export function Message({
     );
   };
 
+  // ✅ Normalize refs from either `message.refs` (new) or `message.references` (old)
+  const refs: RefObj[] = useMemo(() => {
+    const raw = (message as any).refs ?? (message as any).references ?? [];
+    return normalizeRefs(raw);
+  }, [message]);
+
+  const hasRefs = refs.length > 0;
+
   // ✅ REAL submit to backend -> LangSmith dataset
   const handleFeedbackSubmit = async () => {
     if (!currentUserId || !currentUserId.trim()) {
@@ -164,7 +224,7 @@ export function Message({
         user_text: "", // optional
         comment: feedbackText || "",
         tags: selectedTags,
-        refs: message.references ?? [],
+        refs: stringifyRefsForFeedback(refs),
         learning_mode: chatMode === "ask" ? learningMode : chatMode,
         doc_type: docType,
         timestamp_ms: Date.now(),
@@ -243,14 +303,11 @@ export function Message({
     );
   };
 
-  const hasRefs = !!(message.references && message.references.length > 0);
-
   const attachments = (message as any).attachments as
     | Array<{ name: string; kind: string; size: number; fileType?: string }>
     | undefined;
-  
-  const hasAttachments = !!(attachments && attachments.length);
 
+  const hasAttachments = !!(attachments && attachments.length);
 
   return (
     <div
@@ -282,7 +339,11 @@ export function Message({
         </div>
       ) : !isUser ? (
         <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-          <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
+          <img
+            src={clareAvatar}
+            alt="Clare"
+            className="w-full h-full object-cover"
+          />
         </div>
       ) : null}
 
@@ -304,12 +365,13 @@ export function Message({
           </div>
         )}
 
-        {/* Bubble (make it relative so we can anchor the ref box to bottom-left) */}
+        {/* Bubble (relative so we can anchor the ref badge to bottom-left) */}
         <div
           className={`
             relative
             rounded-2xl px-4 py-3
             ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
+            ${!isUser && hasRefs ? "pb-10" : ""}
           `}
         >
           {/* ✅ Attachments shown “with” the message (neutral card style) */}
@@ -318,7 +380,7 @@ export function Message({
               {attachments!.map((a, idx) => {
                 const icon =
                   a.kind === "pdf" ? pdfIcon : a.kind === "ppt" ? pptIcon : otherIcon;
-        
+
                 const label =
                   a.kind === "pdf"
                     ? "PDF"
@@ -329,7 +391,7 @@ export function Message({
                     : a.kind === "image"
                     ? "Image"
                     : "File";
-        
+
                 return (
                   <div
                     key={`${a.name}-${idx}`}
@@ -363,12 +425,12 @@ export function Message({
               })}
             </div>
           )}
-        
+
           {renderBubbleContent()}
 
-          {/* ✅ Restore "left-bottom small reference box" */}
+          {/* ✅ Left-bottom small reference badge (overlay) */}
           {!isUser && hasRefs && (
-            <div className="mt-3">
+            <div className="absolute left-3 bottom-2">
               <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
                 <CollapsibleTrigger asChild>
                   <button
@@ -376,7 +438,7 @@ export function Message({
                     className="
                       inline-flex items-center gap-1
                       rounded-md border border-border
-                      bg-background/80 dark:bg-background/30
+                      bg-background/85 dark:bg-background/30
                       px-2 py-1
                       text-xs text-foreground
                       shadow-sm
@@ -385,25 +447,45 @@ export function Message({
                     "
                     title="References"
                   >
+                    <FileText className="h-3.5 w-3.5" />
+                    <span className="font-medium">Refs</span>
+                    <span className="opacity-70">({refs.length})</span>
                     {referencesOpen ? (
                       <ChevronUp className="h-3 w-3" />
                     ) : (
                       <ChevronDown className="h-3 w-3" />
                     )}
-                    <span className="font-medium">References</span>
-                    <span className="opacity-70">({message.references!.length})</span>
                   </button>
                 </CollapsibleTrigger>
 
-                <CollapsibleContent className="mt-2 space-y-1">
-                  {message.references!.map((ref, index) => (
-                    <div
-                      key={index}
-                      className="rounded-md border border-border bg-background/60 dark:bg-background/20 px-2 py-1 text-xs"
-                    >
-                      {ref}
+                <CollapsibleContent className="mt-2">
+                  <div
+                    className="
+                      w-[320px] max-w-[70vw]
+                      rounded-md border border-border
+                      bg-background/95 dark:bg-background/40
+                      p-2
+                      shadow-md
+                    "
+                  >
+                    <div className="max-h-40 overflow-auto space-y-2 pr-1">
+                      {refs.map((ref, index) => (
+                        <div
+                          key={index}
+                          className="rounded-md border border-border bg-background/60 dark:bg-background/20 px-2 py-1 text-xs"
+                        >
+                          <div className="font-medium break-words">
+                            {ref.source_file || "Unknown file"}
+                          </div>
+                          {ref.section ? (
+                            <div className="text-muted-foreground break-words mt-0.5">
+                              {ref.section}
+                            </div>
+                          ) : null}
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  </div>
                 </CollapsibleContent>
               </Collapsible>
             </div>