add show file widget to the

Author: leehuwuj

helpers/tools.ts

@@ -139,7 +139,7 @@ For better results, you can specify the region parameter to get results from a s
     dependencies: [
       {
         name: "e2b_code_interpreter",
-        version: "^0.0.11b38",
+        version: "0.0.11b38",
       },
     ],
     supportedFrameworks: ["fastapi", "express", "nextjs"],

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

@@ -97,10 +97,16 @@ export function SourceNumberButton({
   );
 }
 
-function DocumentInfo({ document }: { document: Document }) {
-  if (!document.sources.length) return null;
+export function DocumentInfo({ document }: { document: Document }) {
   const { url, sources } = document;
-  const fileName = sources[0].metadata.file_name as string | undefined;
+  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;
 

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

@@ -6,7 +6,8 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 
 import { SourceData } from "..";
-import { SourceNumberButton } from "./chat-sources";
+import { useClientConfig } from "../hooks/use-config";
+import { DocumentInfo, SourceNumberButton } from "./chat-sources";
 import { CodeBlock } from "./codeblock";
 
 const MemoizedReactMarkdown: FC<Options> = memo(
@@ -78,6 +79,7 @@ export default function Markdown({
   sources?: SourceData;
 }) {
   const processedContent = preprocessContent(content, sources);
+  const { backend } = useClientConfig();
 
   return (
     <MemoizedReactMarkdown
@@ -119,6 +121,17 @@ export default function Markdown({
           );
         },
         a({ href, children }) {
+          // If href starts with http://localhost:8000/api/files, render DocumentPreview
+          if (href?.startsWith(backend + "/api/files")) {
+            return (
+              <DocumentInfo
+                document={{
+                  url: href,
+                  sources: [],
+                }}
+              />
+            );
+          }
           // If a text link starts with 'citation:', then render it as a citation reference
           if (
             Array.isArray(children) &&