feat(frontend): support download uploaded files (#553)

close #466
pingcap · Dec 31, 2024 · 11852d1 · 11852d1
1 parent f72c2ec
commit 11852d1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/frontend/app/src/components/chat/message-content-sources.tsx b/frontend/app/src/components/chat/message-content-sources.tsx
@@ -2,7 +2,7 @@ import type { ChatMessageSource } from '@/api/chats';
 import { useChatMessageField, useChatMessageStreamContainsState, useChatMessageStreamState } from '@/components/chat/chat-hooks';
 import { ChatMessageController } from '@/components/chat/chat-message-controller';
 import { AppChatStreamState } from '@/components/chat/chat-stream-state';
-import { isNotFinished, parseSource } from '@/components/chat/utils';
+import { isNotFinished, parseHref, parseSource } from '@/components/chat/utils';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
@@ -72,7 +72,7 @@ function MessageContextSource ({ index, animation, context }: { index: number, a
       initial={animation && { x: '-30%', opacity: 0 }}
       animate={{ x: 0, opacity: 1 }}
     >
-      <a className="flex flex-col justify-between space-y-1 p-2 max-w-full h-full" href={context.source_uri} target="_blank">
+      <a className="flex flex-col justify-between space-y-1 p-2 max-w-full h-full" {...parseHref(context)}>
         <div className="font-normal line-clamp-3 opacity-90">
           {context.name}
         </div>
@@ -90,8 +90,10 @@ export function MessageContextSourceCard ({ title, href }: { title?: string, hre
     return parseSource(href);
   }, [href]);
 
+  const isHttp = /^https?:\/\//.test(href ?? '');
+
   return (
-    <a className="flex flex-col justify-between space-y-1 p-2 max-w-full h-full" href={href} target="_blank">
+    <a className="flex flex-col justify-between space-y-1 p-2 max-w-full h-full" href={isHttp ? href : 'javascript:(void)'} target="_blank">
       <div className="font-normal line-clamp-3 opacity-90">
         {title}
       </div>

diff --git a/frontend/app/src/components/chat/utils.ts b/frontend/app/src/components/chat/utils.ts
@@ -1,15 +1,33 @@
+import type { ChatMessageSource } from '@/api/chats';
 import type { OngoingState } from '@/components/chat/chat-message-controller';
 
 export type { ChatEngineOptions } from '@/api/chat-engines';
 
+const truncateUrl = (url: string, maxLength: number = 20): string => {
+  if (!url || url.length <= maxLength) return url;
+  const start = url.substring(0, maxLength / 2);
+  const end = url.substring(url.length - maxLength / 2);
+  return `${start}...${end}`;
+};
+
 export function parseSource (uri?: string) {
   if (!uri) {
     return 'Unknown';
   }
   if (/^https:\/\//.test(uri)) {
     return new URL(uri).hostname;
   } else {
-    return uri;
+    return truncateUrl(uri);
+  }
+}
+
+export function parseHref (source: ChatMessageSource): { href: string, download?: string, target?: HTMLAnchorElement['target'] } {
+  if (/^https?:\/\//.test(source.source_uri)) {
+    return { href: source.source_uri, target: '_blank' };
+  } else if (source.source_uri.startsWith('uploads/')) {
+    return { href: `/api/v1/documents/${source.id}/download`, download: source.source_uri.slice(source.source_uri.lastIndexOf('/') + 1) };
+  } else {
+    return { href: 'javascript:void(0)' };
   }
 }
 

diff --git a/frontend/app/src/components/documents/documents-table.tsx b/frontend/app/src/components/documents/documents-table.tsx
@@ -7,14 +7,15 @@ import { datetime } from '@/components/cells/datetime';
 import { link } from '@/components/cells/link';
 import { mono } from '@/components/cells/mono';
 import { DatasourceCell } from '@/components/cells/reference';
+import { parseHref } from '@/components/chat/utils';
 import { DataTableRemote } from '@/components/data-table-remote';
 import { DocumentPreviewDialog } from '@/components/document-viewer';
 import { DocumentsTableFilters } from '@/components/documents/documents-table-filters';
 import { NextLink } from '@/components/nextjs/NextLink';
 import { getErrorMessage } from '@/lib/errors';
 import type { CellContext, ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { UploadIcon } from 'lucide-react';
+import { FileDownIcon, FileIcon, UploadIcon } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
@@ -27,7 +28,21 @@ const truncateUrl = (url: string, maxLength: number = 30): string => {
   return `${start}...${end}`;
 };
 
-const href = (cell: CellContext<any, string>) => <a className="underline" href={cell.getValue()} target="_blank">{truncateUrl(cell.getValue())}</a>;
+const href = (cell: CellContext<Document, string>) => {
+  const url = cell.getValue();
+  if (/^https?:\/\//.test(url)) {
+    return <a className="underline" href={url} target="_blank">{url}</a>;
+  } else if (url.startsWith('uploads/')) {
+    return (
+      <a className="underline" {...parseHref(cell.row.original)}>
+        <FileDownIcon className="inline-flex size-4 mr-1 stroke-1" />
+        {truncateUrl(url)}
+      </a>
+    );
+  } else {
+    return <span title={url}>{truncateUrl(url)}</span>;
+  }
+};
 
 const getColumns = (kbId: number) => [
   helper.accessor('id', { cell: mono }),