diff --git a/web/src/app.tsx b/web/src/app.tsx index ed1a39583..ddafd4a16 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -19,6 +19,7 @@ import weekYear from 'dayjs/plugin/weekYear'; import weekday from 'dayjs/plugin/weekday'; import React, { ReactNode, useEffect, useState } from 'react'; import { ThemeProvider, useTheme } from './components/theme-provider'; +import { SidebarProvider } from './components/ui/sidebar'; import { TooltipProvider } from './components/ui/tooltip'; import storage from './utils/authorization-util'; @@ -68,7 +69,9 @@ function Root({ children }: React.PropsWithChildren) { }} locale={locale} > - {children} + + {children} + diff --git a/web/src/components/icon-font.tsx b/web/src/components/icon-font.tsx index 6154165b1..4aec51a77 100644 --- a/web/src/components/icon-font.tsx +++ b/web/src/components/icon-font.tsx @@ -1,4 +1,6 @@ +import { FileIconMap } from '@/constants/file'; import { cn } from '@/lib/utils'; +import { getExtension } from '@/utils/document-util'; type IconFontType = { name: string; @@ -10,3 +12,18 @@ export const IconFont = ({ name, className }: IconFontType) => ( ); + +export function FileIcon({ + name, + className, + type, +}: IconFontType & { type?: string }) { + const isFolder = type === 'folder'; + return ( + + + + ); +} diff --git a/web/src/components/ragflow-avatar.tsx b/web/src/components/ragflow-avatar.tsx index 08d883aca..728c5e374 100644 --- a/web/src/components/ragflow-avatar.tsx +++ b/web/src/components/ragflow-avatar.tsx @@ -1,3 +1,4 @@ +import { cn } from '@/lib/utils'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; import { random } from 'lodash'; import { forwardRef } from 'react'; @@ -15,16 +16,24 @@ export const RAGFlowAvatar = forwardRef< React.ComponentPropsWithoutRef & { name?: string; avatar?: string; + isPerson?: boolean; } ->(({ name, avatar, ...props }, ref) => { +>(({ name, avatar, isPerson = false, className, ...props }, ref) => { const index = random(0, 3); console.log('🚀 ~ index:', index); const value = Colors[index]; return ( - + {name?.slice(0, 1)} diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx index 9c523adab..18c94e8ea 100644 --- a/web/src/components/ui/switch.tsx +++ b/web/src/components/ui/switch.tsx @@ -11,7 +11,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx index 8f5d0e76e..d8410695f 100644 --- a/web/src/components/ui/table.tsx +++ b/web/src/components/ui/table.tsx @@ -6,10 +6,10 @@ const Table = React.forwardRef< HTMLTableElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
(({ className, ...props }, ref) => ( )); diff --git a/web/src/constants/file.ts b/web/src/constants/file.ts new file mode 100644 index 000000000..edf34a7e3 --- /dev/null +++ b/web/src/constants/file.ts @@ -0,0 +1,15 @@ +export const FileIconMap = { + doc: 'doc', + docx: 'doc', + pdf: 'pdf', + xls: 'excel', + xlsx: 'excel', + ppt: 'ppt', + pptx: 'ppt', + jpg: 'jpg', + jpeg: 'jpg', + png: 'png', + txt: 'text', + csv: 'pdf', + md: 'md', +}; diff --git a/web/src/global.less b/web/src/global.less index 58308ad73..82e6989cd 100644 --- a/web/src/global.less +++ b/web/src/global.less @@ -17,6 +17,7 @@ body { .ant-app { height: 100%; + width: 100%; } /* Scroll bar stylings */ diff --git a/web/src/interfaces/database/knowledge.ts b/web/src/interfaces/database/knowledge.ts index a479aa625..986798f09 100644 --- a/web/src/interfaces/database/knowledge.ts +++ b/web/src/interfaces/database/knowledge.ts @@ -25,6 +25,7 @@ export interface IKnowledge { embd_id: string; nickname: string; operator_permission: number; + size: number; } export interface IKnowledgeResult { diff --git a/web/src/pages/dataset/dataset/dataset-table.tsx b/web/src/pages/dataset/dataset/dataset-table.tsx index 9d32266f9..5354c39e6 100644 --- a/web/src/pages/dataset/dataset/dataset-table.tsx +++ b/web/src/pages/dataset/dataset/dataset-table.tsx @@ -119,59 +119,51 @@ export function DatasetTable({ return (
-
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
-
+ )) + ) : ( + + + No results. + + + )} + +
{table.getFilteredSelectedRowModel().rows.length} of{' '} diff --git a/web/src/pages/dataset/dataset/index.tsx b/web/src/pages/dataset/dataset/index.tsx index 549e05674..f93bbae4e 100644 --- a/web/src/pages/dataset/dataset/index.tsx +++ b/web/src/pages/dataset/dataset/index.tsx @@ -60,7 +60,7 @@ export default function Dataset() { }); return ( -
+
- + {name}
diff --git a/web/src/pages/dataset/sidebar/index.tsx b/web/src/pages/dataset/sidebar/index.tsx index 14ae88157..76b864380 100644 --- a/web/src/pages/dataset/sidebar/index.tsx +++ b/web/src/pages/dataset/sidebar/index.tsx @@ -1,55 +1,78 @@ -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { RAGFlowAvatar } from '@/components/ragflow-avatar'; import { Button } from '@/components/ui/button'; import { useSecondPathName } from '@/hooks/route-hook'; import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request'; -import { cn } from '@/lib/utils'; +import { cn, formatBytes } from '@/lib/utils'; import { Routes } from '@/routes'; -import { formatDate } from '@/utils/date'; -import { Banknote, LayoutGrid, User } from 'lucide-react'; +import { formatPureDate } from '@/utils/date'; +import { Banknote, Database, FileSearch2 } from 'lucide-react'; +import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHandleMenuClick } from './hooks'; -const items = [ - { icon: User, label: 'Dataset', key: Routes.DatasetBase }, - { - icon: LayoutGrid, - label: 'Retrieval testing', - key: Routes.DatasetTesting, - }, - { icon: Banknote, label: 'Settings', key: Routes.DatasetSetting }, -]; - export function SideBar() { const pathName = useSecondPathName(); const { handleMenuClick } = useHandleMenuClick(); const { data } = useFetchKnowledgeBaseConfiguration(); + const { t } = useTranslation(); + + const items = useMemo(() => { + return [ + { + icon: Database, + label: t(`knowledgeDetails.dataset`), + key: Routes.DatasetBase, + }, + { + icon: FileSearch2, + label: t(`knowledgeDetails.testing`), + key: Routes.DatasetTesting, + }, + { + icon: Banknote, + label: t(`knowledgeDetails.configuration`), + key: Routes.DatasetSetting, + }, + ]; + }, [t]); return ( -