feat: use DocumentInfo for displaying uploaded file

.changeset/proud-ghosts-suffer.md

@@ -0,0 +1,5 @@
+---
+'@llamaindex/chat-ui': patch
+---
+
+feat: use DocumentInfo for displaying uploaded file

packages/chat-ui/src/chat/chat-message.tsx

@@ -88,7 +88,7 @@ function ChatMessage(props: ChatMessageProps) {
     <ChatMessageProvider
       value={{ message: props.message, isLast: props.isLast }}
     >
-      <div className={cn('group flex gap-4 pr-2 pt-4', props.className)}>
+      <div className={cn('group flex gap-4 p-3', props.className)}>
         {children}
       </div>
     </ChatMessageProvider>

packages/chat-ui/src/chat/chat-messages.tsx

@@ -116,7 +116,7 @@ function ChatMessagesList(props: ChatMessagesListProps) {
   return (
     <div
       className={cn(
-        'flex h-[400px] flex-col gap-5 divide-y overflow-auto',
+        'flex h-[400px] flex-col gap-5 overflow-auto',
         props.className
       )}
       ref={scrollableChatContainerRef}

packages/chat-ui/src/widgets/chat-files.tsx

@@ -1,14 +1,18 @@
 'use client'
 
 import { DocumentFileData } from '../chat/annotation'
-import { DocumentPreview } from './document-preview'
+import { DocumentInfo } from './document-info'
 
 export function ChatFiles({ data }: { data: DocumentFileData }) {
   if (!data.files.length) return null
   return (
     <div className="flex items-center gap-2">
       {data.files.map(file => (
-        <DocumentPreview key={file.id} file={file} />
+        <DocumentInfo
+          key={file.id}
+          document={{ url: file.url, sources: [] }}
+          className="mb-2 mt-2"
+        />
       ))}
     </div>
   )

packages/chat-ui/src/widgets/document-info.tsx

@@ -5,14 +5,19 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@radix-ui/react-hover-card'
-import { Check, Copy } from 'lucide-react'
+import { Check, Copy, FileIcon, XCircleIcon } from 'lucide-react'
 import { DocumentFileType, SourceNode } from '../chat/annotation'
 import { useCopyToClipboard } from '../hook/use-copy-to-clipboard'
 import { Button } from '../ui/button'
-import { DocumentPreviewCard } from './document-preview'
 import { PdfDialog } from './pdf-dialog'
 import { SourceNumberButton } from './source-number-button'
 
+import { cn } from '../lib/utils'
+import { DocxIcon } from '../ui/icons/docx'
+import { PDFIcon } from '../ui/icons/pdf'
+import { SheetIcon } from '../ui/icons/sheet'
+import { TxtIcon } from '../ui/icons/txt'
+
 type Document = {
   url: string
   sources: SourceNode[]
@@ -21,14 +26,14 @@ type Document = {
 export function DocumentInfo({
   document,
   className,
+  onRemove,
 }: {
   document: Document
   className?: string
+  onRemove?: () => void
 }) {
   const { url, sources } = document
-  // Extract filename from URL
-  const urlParts = url.split('/')
-  const fileName = urlParts.length > 0 ? urlParts[urlParts.length - 1] : url
+  const fileName = urlToFileName(url)
   const fileExt = fileName?.split('.').pop() as DocumentFileType | undefined
 
   const previewFile = {
@@ -38,7 +43,11 @@ export function DocumentInfo({
 
   const DocumentDetail = (
     <div className={`relative ${className}`}>
-      <DocumentPreviewCard className="cursor-pointer" file={previewFile} />
+      <DocumentPreviewCard
+        className="cursor-pointer"
+        file={previewFile}
+        onRemove={onRemove}
+      />
       <div className="absolute bottom-2 right-2 flex space-x-2">
         {sources.map((node: SourceNode, index: number) => (
           <div key={node.id}>
@@ -122,3 +131,72 @@ function NodeInfo({ nodeInfo }: { nodeInfo: SourceNode }) {
     </div>
   )
 }
+
+const FileIconMap: Record<DocumentFileType, React.ReactNode> = {
+  csv: <SheetIcon />,
+  pdf: <PDFIcon />,
+  docx: <DocxIcon />,
+  txt: <TxtIcon />,
+}
+
+function DocumentPreviewCard(props: {
+  file: {
+    name: string
+    size?: number
+    type: DocumentFileType
+  }
+  onRemove?: () => void
+  className?: string
+}) {
+  const { onRemove, file, className } = props
+  return (
+    <div
+      className={cn(
+        'bg-secondary relative w-60 max-w-60 rounded-lg p-2 text-sm',
+        className
+      )}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <div className="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md">
+          {FileIconMap[file.type] ?? <FileIcon />}
+        </div>
+        <div className="overflow-hidden">
+          <div className="truncate font-semibold">
+            {file.name} {file.size ? `(${inKB(file.size)} KB)` : ''}
+          </div>
+          {file.type && (
+            <div className="text-token-text-tertiary flex items-center gap-2 truncate">
+              <span>{file.type.toUpperCase()} File</span>
+            </div>
+          )}
+        </div>
+      </div>
+      {onRemove && (
+        <div
+          className={cn(
+            'absolute -right-2 -top-2 z-10 h-6 w-6 rounded-full bg-gray-500 text-white'
+          )}
+        >
+          <XCircleIcon
+            className="h-6 w-6 rounded-full bg-gray-500 text-white"
+            onClick={e => {
+              e.stopPropagation()
+              onRemove()
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function inKB(size: number) {
+  return Math.round((size / 1024) * 10) / 10
+}
+
+function urlToFileName(url: string) {
+  const urlObj = new URL(url)
+  const urlParts = urlObj.pathname.split('/')
+  const fileName = urlParts.length > 0 ? urlParts[urlParts.length - 1] : url
+  return fileName
+}

packages/chat-ui/src/widgets/index.tsx

@@ -9,6 +9,6 @@ export { CodeBlock } from './codeblock'
 export { PdfDialog } from './pdf-dialog'
 export { SuggestedQuestions } from './suggested-questions'
 export { StarterQuestions } from './starter-questions'
-export { DocumentPreview } from './document-preview'
+export { DocumentInfo } from './document-info'
 export { ImagePreview } from './image-preview'
 export { FileUploader } from './file-uploader'