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/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>
   );