use previewcard to render documents

Author: marcusschiesser

templates/types/streaming/nextjs/app/components/ui/chat/chat-message/chat-sources.tsx

@@ -1,8 +1,7 @@
-import { Check, Copy, FileText } from "lucide-react";
-import Image from "next/image";
+import { Check, Copy } from "lucide-react";
 import { useMemo } from "react";
 import { Button } from "../../button";
-import { FileIcon } from "../../document-preview";
+import { PreviewCard } from "../../document-preview";
 import {
   HoverCard,
   HoverCardContent,
@@ -49,13 +48,7 @@ export function ChatSources({ data }: { data: SourceData }) {
   );
 }
 
-export function SourceInfo({
-  node,
-  index,
-}: {
-  node?: SourceNode;
-  index: number;
-}) {
+function SourceInfo({ node, index }: { node?: SourceNode; index: number }) {
   if (!node) return <SourceNumberButton index={index} />;
   return (
     <HoverCard>
@@ -97,55 +90,33 @@ export function SourceNumberButton({
   );
 }
 
-export function DocumentInfo({ document }: { document: Document }) {
+export function DocumentInfo({
+  document,
+  className,
+}: {
+  document: Document;
+  className?: string;
+}) {
   const { url, sources } = document;
-  let fileName: string | undefined;
-  if (sources.length > 0) {
-    fileName = sources[0].metadata.file_name as string | undefined;
-  } else {
-    // Extract filename from URL if sources is empty
-    const urlParts = url.split("/");
-    fileName = urlParts[urlParts.length - 1];
-  }
-  const fileExt = fileName?.split(".").pop();
-  const fileImage = fileExt ? FileIcon[fileExt as DocumentFileType] : null;
+  // Extract filename from URL
+  const urlParts = url.split("/");
+  const fileName = urlParts.length > 0 ? urlParts[urlParts.length - 1] : url;
+  const fileExt = fileName?.split(".").pop() as DocumentFileType | undefined;
+
+  const previewFile = {
+    filename: fileName,
+    filetype: fileExt,
+  };
 
   const DocumentDetail = (
-    <div
-      key={url}
-      className="h-28 w-48 flex flex-col justify-between p-4 border rounded-md shadow-md cursor-pointer"
-    >
-      <p
-        title={fileName}
-        className={cn(
-          fileName ? "truncate" : "text-blue-900 break-words",
-          "text-left",
-        )}
-      >
-        {fileName ?? url}
-      </p>
-      <div className="flex justify-between items-center">
-        <div className="space-x-2 flex">
-          {sources.map((node: SourceNode, index: number) => {
-            return (
-              <div key={node.id}>
-                <SourceInfo node={node} index={index} />
-              </div>
-            );
-          })}
-        </div>
-        {fileImage ? (
-          <div className="relative h-8 w-8 shrink-0 overflow-hidden rounded-md">
-            <Image
-              className="h-full w-auto"
-              priority
-              src={fileImage}
-              alt="Icon"
-            />
+    <div className={`relative ${className}`}>
+      <PreviewCard className={"cursor-pointer"} file={previewFile} />
+      <div className="absolute bottom-2 left-2 space-x-2 flex">
+        {sources.map((node: SourceNode, index: number) => (
+          <div key={node.id}>
+            <SourceInfo node={node} index={index} />
           </div>
-        ) : (
-          <FileText className="text-gray-500" />
-        )}
+        ))}
       </div>
     </div>
   );

templates/types/streaming/nextjs/app/components/ui/chat/chat-message/markdown.tsx

@@ -5,7 +5,7 @@ import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 
-import { SourceData } from "..";
+import { DOCUMENT_FILE_TYPES, DocumentFileType, SourceData } from "..";
 import { useClientConfig } from "../hooks/use-config";
 import { DocumentInfo, SourceNumberButton } from "./chat-sources";
 import { CodeBlock } from "./codeblock";
@@ -124,14 +124,23 @@ export default function Markdown({
         a({ href, children }) {
           // If href starts with `{backend}/api/files`, then it's a local document and we use DocumenInfo for rendering
           if (href?.startsWith(backend + "/api/files")) {
-            return (
-              <DocumentInfo
-                document={{
-                  url: href,
-                  sources: [],
-                }}
-              />
-            );
+            // Check if the file is document file type
+            const fileExtension = href.split(".").pop()?.toLowerCase();
+
+            if (
+              fileExtension &&
+              DOCUMENT_FILE_TYPES.includes(fileExtension as DocumentFileType)
+            ) {
+              return (
+                <DocumentInfo
+                  document={{
+                    url: href,
+                    sources: [],
+                  }}
+                  className="mb-2 mt-2"
+                />
+              );
+            }
           }
           // If a text link starts with 'citation:', then render it as a citation reference
           if (

templates/types/streaming/nextjs/app/components/ui/chat/index.ts

@@ -20,6 +20,12 @@ export type ImageData = {
 };
 
 export type DocumentFileType = "csv" | "pdf" | "txt" | "docx";
+export const DOCUMENT_FILE_TYPES: DocumentFileType[] = [
+  "csv",
+  "pdf",
+  "txt",
+  "docx",
+];
 
 export type UploadedFileMeta = {
   id: string;

templates/types/streaming/nextjs/app/components/ui/document-preview.tsx

@@ -37,7 +37,7 @@ export function DocumentPreview(props: DocumentPreviewProps) {
     <Drawer direction="left">
       <DrawerTrigger asChild>
         <div>
-          <PreviewCard {...props} />
+          <PreviewCard className="cursor-pointer" {...props} />
         </div>
       </DrawerTrigger>
       <DrawerContent className="w-3/5 mt-24 h-full max-h-[96%] ">
@@ -71,31 +71,41 @@ export const FileIcon: Record<DocumentFileType, string> = {
   txt: TxtIcon,
 };
 
-function PreviewCard(props: DocumentPreviewProps) {
-  const { onRemove, file } = props;
+export function PreviewCard(props: {
+  file: {
+    filename: string;
+    filesize?: number;
+    filetype?: DocumentFileType;
+  };
+  onRemove?: () => void;
+  className?: string;
+}) {
+  const { onRemove, file, className } = props;
   return (
     <div
       className={cn(
         "p-2 w-60 max-w-60 bg-secondary rounded-lg text-sm relative",
-        file.metadata?.refs?.length ? "" : "cursor-pointer",
+        className,
       )}
     >
       <div className="flex flex-row items-center gap-2">
-        <div className="relative h-8 w-8 shrink-0 overflow-hidden rounded-md">
+        <div className="relative h-8 w-8 shrink-0 overflow-hidden rounded-md flex items-center justify-center">
           <Image
-            className="h-full w-auto"
+            className="h-full w-auto object-contain"
             priority
-            src={FileIcon[file.filetype]}
+            src={FileIcon[file.filetype || "txt"]}
             alt="Icon"
           />
         </div>
         <div className="overflow-hidden">
           <div className="truncate font-semibold">
-            {file.filename} ({inKB(file.filesize)} KB)
-          </div>
-          <div className="truncate text-token-text-tertiary flex items-center gap-2">
-            <span>{file.filetype.toUpperCase()} File</span>
+            {file.filename} {file.filesize ? `(${inKB(file.filesize)} KB)` : ""}
           </div>
+          {file.filetype && (
+            <div className="truncate text-token-text-tertiary flex items-center gap-2">
+              <span>{file.filetype.toUpperCase()} File</span>
+            </div>
+          )}
         </div>
       </div>
       {onRemove && (