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/agent/canvas/node/retrieval-node.tsx

@@ -1,8 +1,8 @@
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { IRetrievalNode } from '@/interfaces/database/flow';
-import { UserOutlined } from '@ant-design/icons';
 import { NodeProps, Position } from '@xyflow/react';
-import { Avatar, Flex } from 'antd';
+import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo, useMemo } from 'react';
@@ -68,10 +68,11 @@ function InnerRetrievalNode({
             return (
               <div className={styles.nodeText} key={knowledge.id}>
                 <Flex align={'center'} gap={6}>
-                  <Avatar
-                    size={26}
-                    icon={<UserOutlined />}
-                    src={knowledge.avatar}
+                  <RAGFlowAvatar
+                    className="size-6 rounded-lg"
+                    avatar={knowledge.avatar}
+                    name={knowledge.name || 'CN'}
+                    isPerson={true}
                   />
                   <Flex className={styles.knowledgeNodeName} flex={1}>
                     {knowledge.name}