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-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>
+  );
+}