fix(frontend): refine documents table filters and enhance source URI display (#678)

Author: Mini256

frontend/app/src/components/documents/documents-table-filters.tsx

@@ -48,11 +48,11 @@ export function DocumentsTableFilters ({ knowledgeBaseId, table, onFilterChange
                   <FormControl>
                     <Input
                       name={field.name}
-                      className="h-8 text-sm w-[500px]"
+                      className="h-8 text-sm w-[300px]"
                       onBlur={field.handleBlur}
                       onChange={ev => field.handleChange(ev.target.value)}
                       value={field.state.value ?? ''}
-                      placeholder="Search name or source..."
+                      placeholder="Search documents"
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
                           e.preventDefault();
@@ -89,14 +89,14 @@ export function DocumentsTableFilters ({ knowledgeBaseId, table, onFilterChange
         </div>
 
         {/* Bottom row - Filters */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
 
           <FormField
             name="mime_type"
             render={(field) => (
               <FormItem>
                 <Select value={field.state.value ?? ''} name={field.name} onValueChange={field.handleChange}>
-                  <SelectTrigger className="h-8 text-sm font-normal hover:bg-accent min-w-[120px]" onBlur={field.handleBlur}>
+                  <SelectTrigger className="h-8 text-sm font-normal hover:bg-accent" onBlur={field.handleBlur}>
                     <SelectValue placeholder="Document Type" />
                   </SelectTrigger>
                   <SelectContent>
@@ -116,7 +116,7 @@ export function DocumentsTableFilters ({ knowledgeBaseId, table, onFilterChange
             render={(field) => (
               <FormItem>
                 <Select value={field.state.value ?? ''} name={field.name} onValueChange={field.handleChange}>
-                  <SelectTrigger className="h-8 text-sm font-normal hover:bg-accent min-w-[120px]" onBlur={field.handleBlur}>
+                  <SelectTrigger className="h-8 text-sm font-normal hover:bg-accent" onBlur={field.handleBlur}>
                     <SelectValue placeholder="Index Status" />
                   </SelectTrigger>
                   <SelectContent>
@@ -139,7 +139,6 @@ export function DocumentsTableFilters ({ knowledgeBaseId, table, onFilterChange
                   value={field.state.value ? { from: field.state.value[0], to: field.state.value[1] } : undefined}
                   onChange={(range) => field.handleChange(range ? [range.from, range.to] : undefined)}
                   placeholder="Created Time"
-                  className="w-[180px]"
                   size="sm"
                 />
               </FormItem>
@@ -154,7 +153,6 @@ export function DocumentsTableFilters ({ knowledgeBaseId, table, onFilterChange
                   value={field.state.value ? { from: field.state.value[0], to: field.state.value[1] } : undefined}
                   onChange={(range) => field.handleChange(range ? [range.from, range.to] : undefined)}
                   placeholder="Updated Time"
-                  className="w-[180px]"
                   size="sm"
                 />
               </FormItem>
@@ -169,7 +167,6 @@ export function DocumentsTableFilters ({ knowledgeBaseId, table, onFilterChange
                   value={field.state.value ? { from: field.state.value[0], to: field.state.value[1] } : undefined}
                   onChange={(range) => field.handleChange(range ? [range.from, range.to] : undefined)}
                   placeholder="Last Modified Time"
-                  className="w-[180px]"
                   size="sm"
                 />
               </FormItem>

frontend/app/src/components/documents/documents-table.tsx

@@ -11,16 +11,39 @@ import { DataTableRemote } from '@/components/data-table-remote';
 import { DocumentPreviewDialog } from '@/components/document-viewer';
 import { DocumentsTableFilters } from '@/components/documents/documents-table-filters';
 import { getErrorMessage } from '@/lib/errors';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { CellContext, ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { TrashIcon, UploadIcon, BlocksIcon, WrenchIcon, DownloadIcon } from 'lucide-react';
+import { TrashIcon, UploadIcon, BlocksIcon, WrenchIcon, DownloadIcon, FileDownIcon } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { parseHref } from '@/components/chat/utils';
 
 const helper = createColumnHelper<Document>();
 
+const truncateUrl = (url: string, maxLength: number = 30): 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}`;
+};
+
+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) => [
@@ -38,10 +61,7 @@ const getColumns = (kbId: number) => [
   }),
   helper.accessor('source_uri', {
     header: "SOURCE URI",
-    cell: link({
-      icon: <DownloadIcon className="size-3" />,
-      truncate: true,
-    }),
+    cell: href,
   }),
   helper.accessor('data_source', { header: "DATA SOURCE", cell: ctx => <DatasourceCell {...ctx.getValue()} /> }),
   helper.accessor('updated_at', { header: "LAST UPDATED", cell: datetime }),