Feat: Add AgentTemplates component. #3221 (#5194)

### What problem does this PR solve?

Feat: Add AgentTemplates component. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agents/index.tsx

@@ -1,15 +1,17 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { useFetchFlowList } from '@/hooks/flow-hooks';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Plus } from 'lucide-react';
 import { AgentCard } from './agent-card';
 
 export default function Agent() {
   const { data } = useFetchFlowList();
+  const { navigateToAgentTemplates } = useNavigatePage();
 
   return (
     <section>
       <div className="px-8 pt-8">
-        <ListFilterBar title="Agents">
+        <ListFilterBar title="Agents" showDialog={navigateToAgentTemplates}>
           <Plus className="mr-2 h-4 w-4" />
           Create app
         </ListFilterBar>