Fix：Optimize Agent template page, fix bugs in knowledge base (#9009)

### What problem does this PR solve?

Replace Avatar with RAGFlowAvatar component for knowledge base and
agent, optimize Agent template page, and modify bugs in knowledge base
#3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/agents/agent-templates.tsx

@@ -11,7 +11,7 @@ import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
 import { IFlowTemplate } from '@/interfaces/database/flow';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { TemplateCard } from './template-card';
@@ -21,7 +21,11 @@ export default function AgentTemplates() {
   const { t } = useTranslation();
   const list = useFetchAgentTemplates();
   const { loading, setAgent } = useSetAgent();
+  const [templateList, setTemplateList] = useState<IFlowTemplate[]>([]);
 
+  useEffect(() => {
+    setTemplateList(list);
+  }, [list]);
   const {
     visible: creatingVisible,
     hideModal: hideCreatingModal,
@@ -62,7 +66,14 @@ export default function AgentTemplates() {
       template?.dsl,
     ],
   );
-
+  const handleSiderBarChange = (keyword: string) => {
+    const tempList = list.filter(
+      (item, index) =>
+        item.title.toLocaleLowerCase().includes(keyword?.toLocaleLowerCase()) ||
+        index === 0,
+    );
+    setTemplateList(tempList);
+  };
   return (
     <section>
       <PageHeader>

web/src/pages/agents/template-card.tsx

@@ -1,47 +1,59 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { IFlowTemplate } from '@/interfaces/database/flow';
+import { Plus } from 'lucide-react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface IProps {
   data: IFlowTemplate;
+  isCreate?: boolean;
   showModal(record: IFlowTemplate): void;
 }
 
-export function TemplateCard({ data, showModal }: IProps) {
+export function TemplateCard({ data, showModal, isCreate = false }: IProps) {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
     showModal(data);
   }, [data, showModal]);
-
   return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard group relative">
+    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard group relative min-h-40">
       <CardContent className="p-4 ">
-        <div className="flex justify-between mb-4">
-          {data.avatar ? (
-            <div
-              className="w-[70px] h-[70px] rounded-xl bg-cover"
-              style={{ backgroundImage: `url(${data.avatar})` }}
-            />
-          ) : (
-            <Avatar className="w-[70px] h-[70px]">
-              <AvatarImage src="https://github.com/shadcn.png" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-          )}
-        </div>
-        <h3 className="text-xl font-bold mb-2">{data.title}</h3>
-        <p className="break-words">{data.description}</p>
-        <Button
-          variant="tertiary"
-          className="absolute bottom-4 right-4 left-4 hidden justify-end group-hover:block text-center"
-          onClick={handleClick}
-        >
-          {t('flow.useTemplate')}
-        </Button>
+        {isCreate && (
+          <div
+            className="flex flex-col justify-center items-center gap-4 mb-4 absolute top-0 right-0 left-0 bottom-0 cursor-pointer "
+            onClick={handleClick}
+          >
+            <Plus size={50} fontWeight={700} />
+            <div>{t('flow.createAgent')}</div>
+          </div>
+        )}
+        {!isCreate && (
+          <>
+            <div className="flex justify-start items-center gap-4 mb-4">
+              <RAGFlowAvatar
+                className="w-7 h-7"
+                avatar={
+                  data.avatar ? data.avatar : 'https://github.com/shadcn.png'
+                }
+                name={data?.title || 'CN'}
+              ></RAGFlowAvatar>
+              <div className="text-[18px] font-bold ">{data.title}</div>
+            </div>
+            <p className="break-words">{data.description}</p>
+            <div className="group-hover:bg-gradient-to-t from-black/70 from-10% via-black/0 via-50% to-black/0 w-full h-full group-hover:block absolute top-0 left-0 hidden rounded-xl">
+              <Button
+                variant="default"
+                className="w-1/3 absolute bottom-4 right-4 left-4 justify-center text-center m-auto"
+                onClick={handleClick}
+              >
+                {t('flow.useTemplate')}
+              </Button>
+            </div>
+          </>
+        )}
       </CardContent>
     </Card>
   );

web/src/pages/agents/template-sidebar.tsx

@@ -0,0 +1,57 @@
+import { Button } from '@/components/ui/button';
+import { useSecondPathName } from '@/hooks/route-hook';
+import { cn } from '@/lib/utils';
+import { Banknote, LayoutGrid, User } from 'lucide-react';
+
+const menuItems = [
+  {
+    section: 'All Templates',
+    items: [
+      { icon: User, label: 'Assistant', key: 'Assistant' },
+      { icon: LayoutGrid, label: 'chatbot', key: 'chatbot' },
+      { icon: Banknote, label: 'generator', key: 'generator' },
+      { icon: Banknote, label: 'Intel', key: 'Intel' },
+    ],
+  },
+];
+
+export function SideBar({ change }: { change: (keyword: string) => void }) {
+  const pathName = useSecondPathName();
+  const handleMenuClick = (key: string) => {
+    change(key);
+  };
+
+  return (
+    <aside className="w-[303px] bg-background border-r flex flex-col">
+      <div className="flex-1 overflow-auto">
+        {menuItems.map((section, idx) => (
+          <div key={idx}>
+            <h2
+              className="p-6 text-sm font-semibold hover:bg-muted/50 cursor-pointer"
+              onClick={() => handleMenuClick('')}
+            >
+              {section.section}
+            </h2>
+            {section.items.map((item, itemIdx) => {
+              const active = pathName === item.key;
+              return (
+                <Button
+                  key={itemIdx}
+                  variant={active ? 'secondary' : 'ghost'}
+                  className={cn('w-full justify-start gap-2.5 p-6 relative')}
+                  onClick={() => handleMenuClick(item.key)}
+                >
+                  <item.icon className="w-6 h-6" />
+                  <span>{item.label}</span>
+                  {active && (
+                    <div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" />
+                  )}
+                </Button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}