Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -69,32 +69,6 @@ function normalizeMarkdownLists(input: string) {
     .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({
   message,
   showSenderInfo = false,
@@ -112,7 +86,10 @@ export function Message({
     null
   );
   const [copied, setCopied] = useState(false);
+
+  // ✅ References UI state
   const [referencesOpen, setReferencesOpen] = useState(false);
+
   const [showFeedbackArea, setShowFeedbackArea] = useState(false);
   const [feedbackType, setFeedbackType] = useState<
     "helpful" | "not-helpful" | null
@@ -174,19 +151,16 @@ 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,
         rating,
         assistant_message_id: message.id,
         assistant_text: message.content,
-        user_text: "", // optional; you can wire last user msg later if you want
+        user_text: "", // optional
         comment: feedbackText || "",
         tags: selectedTags,
-        refs: normalizedRefs,
+        refs: message.references ?? [],
         learning_mode: chatMode === "ask" ? learningMode : chatMode,
         doc_type: docType,
         timestamp_ms: Date.now(),
@@ -265,10 +239,7 @@ export function Message({
     );
   };
 
-  // ✅ normalize references for UI display as well
-  const displayRefs = useMemo(() => {
-    return normalizeRefs((message as any).references);
-  }, [message]);
+  const hasRefs = !!(message.references && message.references.length > 0);
 
   return (
     <div
@@ -322,14 +293,58 @@ export function Message({
           </div>
         )}
 
-        {/* Bubble */}
+        {/* Bubble (make it relative so we can anchor the ref box to bottom-left) */}
         <div
           className={`
+            relative
             rounded-2xl px-4 py-3
             ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
           `}
         >
           {renderBubbleContent()}
+
+          {/* ✅ Restore "left-bottom small reference box" */}
+          {!isUser && hasRefs && (
+            <div className="mt-3">
+              <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="
+                      inline-flex items-center gap-1
+                      rounded-md border border-border
+                      bg-background/80 dark:bg-background/30
+                      px-2 py-1
+                      text-xs text-foreground
+                      shadow-sm
+                      hover:bg-background
+                      transition
+                    "
+                    title="References"
+                  >
+                    {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}
+                    </div>
+                  ))}
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+          )}
         </div>
 
         {/* Next Question Button for Quiz Mode */}
@@ -351,30 +366,6 @@ export function Message({
             </div>
           )}
 
-        {/* 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" />
-                )}
-                {displayRefs.length}{" "}
-                {displayRefs.length === 1 ? "reference" : "references"}
-              </Button>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="space-y-1 mt-1">
-              {displayRefs.map((ref, index) => (
-                <Badge key={index} variant="outline" className="text-xs">
-                  {ref}
-                </Badge>
-              ))}
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
         {/* Message Actions */}
         {shouldShowActions && (
           <div className="flex items-center gap-1">
@@ -389,11 +380,7 @@ 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 && (