Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -3,6 +3,10 @@ import React, { useMemo, useState } from "react";
 import { Button } from "./ui/button";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+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,
@@ -241,6 +245,13 @@ 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);
+
+
   return (
     <div
       className={`flex gap-2 ${
@@ -301,6 +312,46 @@ export function Message({
             ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
           `}
         >
+          {/* ✅ Attachments shown “with” the message */}
+          {hasAttachments && (
+            <div className="mb-3 flex flex-wrap gap-2">
+              {attachments!.map((a, idx) => {
+                const icon = a.kind === "pdf" ? pdfIcon : a.kind === "ppt" ? pptIcon : otherIcon;
+                const label =
+                  a.kind === "pdf"
+                    ? "PDF"
+                    : a.kind === "ppt"
+                    ? "Presentation"
+                    : a.kind === "doc"
+                    ? "Document"
+                    : a.kind === "image"
+                    ? "Image"
+                    : "File";
+        
+                return (
+                  <div
+                    key={`${a.name}-${idx}`}
+                    className="
+                      inline-flex items-center gap-2
+                      rounded-xl border border-border
+                      bg-background/70 dark:bg-background/30
+                      px-2 py-1
+                      shadow-sm
+                      max-w-full
+                    "
+                    title={a.name}
+                  >
+                    <img src={icon} alt={a.name} className="h-6 w-6 object-contain" draggable={false} />
+                    <div className="min-w-0">
+                      <div className="text-xs font-medium truncate max-w-[320px]">{a.name}</div>
+                      <div className="text-[11px] text-muted-foreground">{label}</div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        
           {renderBubbleContent()}
 
           {/* ✅ Restore "left-bottom small reference box" */}