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/datasets/dataset-card.tsx

@@ -1,5 +1,5 @@
 import { MoreButton } from '@/components/more-button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
@@ -32,10 +32,11 @@ export function DatasetCard({
       <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">
-              <AvatarImage src={dataset.avatar} />
-              <AvatarFallback className="rounded-lg ">CN</AvatarFallback>
-            </Avatar>
+            <RAGFlowAvatar
+              className="size-6 rounded-lg"
+              avatar={dataset.avatar}
+              name={dataset.name || 'CN'}
+            ></RAGFlowAvatar>
             {owner && (
               <Badge className="h-5 rounded-sm px-1 bg-background-badge text-text-badge">
                 {owner}