Feat: Using IconFont as an additional icon library #3221 (#7427)

### What problem does this PR solve?
Feat: Using IconFont as an additional icon library #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/icon-font.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/lib/utils';
+
+type IconFontType = {
+  name: string;
+  className?: string;
+};
+
+export const IconFont = ({ name, className }: IconFontType) => (
+  <svg className={cn('fill-current size-4', className)}>
+    <use xlinkHref={`#icon-${name}`} />
+  </svg>
+);

web/src/components/more-button.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils';
+import { Ellipsis } from 'lucide-react';
+import React from 'react';
+import { Button, ButtonProps } from './ui/button';
+
+export const MoreButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size={size || 'icon'}
+        className={cn('invisible group-hover:visible size-3.5', className)}
+        {...props}
+      >
+        <Ellipsis />
+      </Button>
+    );
+  },
+);

web/src/locales/en.ts

@@ -71,6 +71,7 @@ export default {
       fileManager: 'File Management',
       flow: 'Agent',
       search: 'Search',
+      welcome: 'Welcome to',
     },
     knowledgeList: {
       welcome: 'Welcome back',
@@ -337,7 +338,8 @@ The above is the content you need to summarize.`,
       maxTokenTip: 'The maximum number of tokens per generated summary chunk.',
       maxTokenMessage: 'Max token is required',
       threshold: 'Threshold',
-      thresholdTip: 'In RAPTOR, chunks are clustered by their semantic similarity. The Threshold parameter sets the minimum similarity required for chunks to be grouped together. A higher Threshold means fewer chunks in each cluster, while a lower one means more.',
+      thresholdTip:
+        'In RAPTOR, chunks are clustered by their semantic similarity. The Threshold parameter sets the minimum similarity required for chunks to be grouped together. A higher Threshold means fewer chunks in each cluster, while a lower one means more.',
       thresholdMessage: 'Threshold is required',
       maxCluster: 'Max cluster',
       maxClusterTip: 'The maximum number of clusters to create.',

web/src/locales/zh-traditional.ts

@@ -71,6 +71,7 @@ export default {
       fileManager: '文件管理',
       flow: 'Agent',
       search: '搜尋',
+      welcome: '歡迎來到',
     },
     knowledgeList: {
       welcome: '歡迎回來',
@@ -332,7 +333,8 @@ export default {
       promptTip:
         '系統提示為大型模型提供任務描述、規定回覆方式，以及設定其他各種要求。系統提示通常與 key（變數）合用，透過變數設定大型模型的輸入資料。你可以透過斜線或 (x) 按鈕顯示可用的 key。',
       maxTokenTip: '用於設定每個被總結的文字塊的最大 token 數。',
-      thresholdTip: '在 RAPTOR 中，數據塊會根據它們的語義相似性進行聚類。閾值參數設定了數據塊被分到同一組所需的最小相似度。閾值越高，每個聚類中的數據塊越少；閾值越低，則每個聚類中的數據塊越多。',
+      thresholdTip:
+        '在 RAPTOR 中，數據塊會根據它們的語義相似性進行聚類。閾值參數設定了數據塊被分到同一組所需的最小相似度。閾值越高，每個聚類中的數據塊越少；閾值越低，則每個聚類中的數據塊越多。',
       maxClusterTip: '最多可創建的聚類數。',
       entityTypes: '實體類型',
       pageRank: '頁面排名',

web/src/locales/zh.ts

@@ -71,6 +71,7 @@ export default {
       fileManager: '文件管理',
       flow: 'Agent',
       search: '搜索',
+      welcome: '欢迎来到',
     },
     knowledgeList: {
       welcome: '欢迎回来',
@@ -349,7 +350,8 @@ export default {
       promptTip:
         '系统提示为大模型提供任务描述、规定回复方式，以及设置其他各种要求。系统提示通常与 key （变量）合用，通过变量设置大模型的输入数据。你可以通过斜杠或者 (x) 按钮显示可用的 key。',
       maxTokenTip: '用于设定每个被总结的文本块的最大 token 数。',
-      thresholdTip: '在 RAPTOR 中，数据块会根据它们的语义相似性进行聚类。阈值设定了数据块被分到同一组所需的最小相似度。阈值越高，每个聚类中的数据块越少；阈值越低，则每个聚类中的数据块越多。',
+      thresholdTip:
+        '在 RAPTOR 中，数据块会根据它们的语义相似性进行聚类。阈值设定了数据块被分到同一组所需的最小相似度。阈值越高，每个聚类中的数据块越少；阈值越低，则每个聚类中的数据块越多。',
       maxClusterTip: '最多可创建的聚类数。',
       entityTypes: '实体类型',
       pageRank: '页面排名',

web/src/pages/datasets/dataset-card.tsx

@@ -1,11 +1,11 @@
+import { MoreButton } from '@/components/more-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IKnowledge } from '@/interfaces/database/knowledge';
 import { formatDate } from '@/utils/date';
-import { ChevronRight, Ellipsis } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import { DatasetDropdown } from './dataset-dropdown';
 import { useDisplayOwnerName } from './use-display-owner';
 import { useRenameDataset } from './use-rename-dataset';
@@ -29,7 +29,7 @@ export function DatasetCard({
       className="w-40"
       onClick={navigateToDataset(dataset.id)}
     >
-      <CardContent className="p-2.5 pt-1 group">
+      <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between mb-2">
           <div className="flex gap-2 items-center">
             <Avatar className="size-6 rounded-lg">
@@ -46,13 +46,7 @@ export function DatasetCard({
             showDatasetRenameModal={showDatasetRenameModal}
             dataset={dataset}
           >
-            <Button
+            <MoreButton></MoreButton>
-              variant="ghost"
-              size="icon"
-              className="invisible group-hover:visible"
-            >
-              <Ellipsis />
-            </Button>
           </DatasetDropdown>
         </section>
         <div className="flex justify-between items-end">

web/src/pages/home/application-card.tsx

@@ -1,3 +1,4 @@
+import { MoreButton } from '@/components/more-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
@@ -14,17 +15,23 @@ type ApplicationCardProps = {
 export function ApplicationCard({ app }: ApplicationCardProps) {
   return (
     <Card className="w-[264px]">
-      <CardContent className="p-2.5 flex items-center gap-2.5">
+      <CardContent className="p-2.5  group flex justify-between">
-        <Avatar className="size-14 rounded-lg">
+        <div className="flex items-center gap-2.5">
-          <AvatarImage src={app.avatar === null ? '' : app.avatar} />
+          <Avatar className="size-14 rounded-lg">
-          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            <AvatarImage src={app.avatar === null ? '' : app.avatar} />
-        </Avatar>
+            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-        <div className="flex-1">
+          </Avatar>
-          <h3 className="text-sm font-normal line-clamp-1 mb-1">{app.title}</h3>
+          <div className="flex-1">
-          <p className="text-xs font-normal text-text-sub-title">
+            <h3 className="text-sm font-normal line-clamp-1 mb-1">
-            {formatDate(app.update_time)}
+              {app.title}
-          </p>
+            </h3>
+            <p className="text-xs font-normal text-text-sub-title">
+              {formatDate(app.update_time)}
+            </p>
+          </div>
         </div>
+
+        <MoreButton className=""></MoreButton>
       </CardContent>
     </Card>
   );

web/src/pages/home/applications.tsx

@@ -1,48 +1,21 @@
+import { IconFont } from '@/components/icon-font';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
-import { Cpu, MessageSquare, Search } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'umi';
 import { Agents } from './agent-list';
-import { ApplicationCard, SeeAllAppCard } from './application-card';
+import { SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';
 
-const applications = [
+const IconMap = {
-  {
+  [Routes.Chats]: 'chat',
-    id: 1,
+  [Routes.Searches]: 'search',
-    title: 'Jarvis chatbot',
+  [Routes.Agents]: 'agent',
-    type: 'Chat app',
+};
-    update_time: '11/24/2024',
-    avatar: <MessageSquare className="h-6 w-6" />,
-  },
-  {
-    id: 2,
-    title: 'Search app 01',
-    type: 'Search app',
-    update_time: '11/24/2024',
-    avatar: <Search className="h-6 w-6" />,
-  },
-  {
-    id: 3,
-    title: 'Chatbot 01',
-    type: 'Chat app',
-    update_time: '11/24/2024',
-    avatar: <MessageSquare className="h-6 w-6" />,
-  },
-  {
-    id: 4,
-    title: 'Workflow 01',
-    type: 'Agent',
-    update_time: '11/24/2024',
-    avatar: <Cpu className="h-6 w-6" />,
-  },
-];
-
-const All = 'all';
 
 export function Applications() {
-  const [val, setVal] = useState('all');
+  const [val, setVal] = useState(Routes.Chats);
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -52,10 +25,6 @@ export function Applications() {
 
   const options = useMemo(
     () => [
-      {
-        label: 'All',
-        value: All,
-      },
       { value: Routes.Chats, label: t('header.chat') },
       { value: Routes.Searches, label: t('header.search') },
       { value: Routes.Agents, label: t('header.flow') },
@@ -70,7 +39,13 @@ export function Applications() {
   return (
     <section className="mt-12">
       <div className="flex justify-between items-center mb-5">
-        <h2 className="text-2xl font-bold ">Applications</h2>
+        <h2 className="text-2xl font-bold flex gap-2.5">
+          <IconFont
+            name={IconMap[val as keyof typeof IconMap]}
+            className="size-8"
+          ></IconFont>
+          {options.find((x) => x.value === val)?.label}
+        </h2>
         <Segmented
           options={options}
           value={val}
@@ -79,14 +54,9 @@ export function Applications() {
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">
-        {(val === All || val === Routes.Searches) &&
-          [...Array(12)].map((_, i) => {
-            const app = applications[i % 4];
-            return <ApplicationCard key={i} app={app}></ApplicationCard>;
-          })}
         {val === Routes.Agents && <Agents></Agents>}
         {val === Routes.Chats && <ChatList></ChatList>}
-        {val === All || <SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
+        {<SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
       </div>
     </section>
   );

web/src/pages/home/banner.tsx

@@ -1,5 +1,6 @@
 import { Card, CardContent } from '@/components/ui/card';
 import { ArrowRight, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 function BannerCard() {
   return (
@@ -39,9 +40,10 @@ export function Banner() {
 }
 
 export function NextBanner() {
+  const { t } = useTranslation();
   return (
     <section className="text-5xl pt-10 pb-14 font-bold">
-      <span className="text-text-title">Welcome to</span>
+      <span className="text-text-title">{t('header.welcome')}</span>
       <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
         RAGFlow
       </span>

web/src/pages/home/datasets.tsx

@@ -1,10 +1,13 @@
+import { IconFont } from '@/components/icon-font';
 import { RenameDialog } from '@/components/rename-dialog';
 import { CardSkeleton } from '@/components/ui/skeleton';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
+import { useTranslation } from 'react-i18next';
 import { DatasetCard, SeeAllCard } from '../datasets/dataset-card';
 import { useRenameDataset } from '../datasets/use-rename-dataset';
 
 export function Datasets() {
+  const { t } = useTranslation();
   const { kbs, loading } = useFetchNextKnowledgeListByPage();
   const {
     datasetRenameLoading,
@@ -17,7 +20,10 @@ export function Datasets() {
 
   return (
     <section>
-      <h2 className="text-2xl font-bold mb-6">Datasets</h2>
+      <h2 className="text-2xl font-bold mb-6 flex gap-2.5 items-center">
+        <IconFont name="data" className="size-8"></IconFont>
+        {t('header.knowledgeBase')}
+      </h2>
       <div className="flex gap-6">
         {loading ? (
           <div className="flex-1">