Fix: Improve Agent templates functionality and fix some UI style issues (#9129)

### What problem does this PR solve?

Fix: Improve Agent templates functionality and fix some UI style issues
#3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/agents/agent-templates.tsx

@@ -15,7 +15,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { TemplateCard } from './template-card';
-import { SideBar } from './template-sidebar';
+import { MenuItemKey, SideBar } from './template-sidebar';
 
 export default function AgentTemplates() {
   const { navigateToAgentList } = useNavigatePage();
@@ -23,7 +23,9 @@ export default function AgentTemplates() {
   const list = useFetchAgentTemplates();
   const { loading, setAgent } = useSetAgent();
   const [templateList, setTemplateList] = useState<IFlowTemplate[]>([]);
-
+  const [selectMenuItem, setSelectMenuItem] = useState<string>(
+    MenuItemKey.Recommended,
+  );
   useEffect(() => {
     setTemplateList(list);
   }, [list]);
@@ -70,10 +72,12 @@ export default function AgentTemplates() {
   const handleSiderBarChange = (keyword: string) => {
     const tempList = list.filter(
       (item, index) =>
-        item.title.toLocaleLowerCase().includes(keyword?.toLocaleLowerCase()) ||
-        index === 0,
+        item.canvas_type
+          ?.toLocaleLowerCase()
+          .includes(keyword?.toLocaleLowerCase()) || index === 0,
     );
     setTemplateList(tempList);
+    setSelectMenuItem(keyword);
   };
   return (
     <section>
@@ -93,9 +97,12 @@ export default function AgentTemplates() {
         </Breadcrumb>
       </PageHeader>
       <div className="flex flex-1 h-dvh">
-        <SideBar change={handleSiderBarChange}></SideBar>
+        <SideBar
+          change={handleSiderBarChange}
+          selected={selectMenuItem}
+        ></SideBar>
 
-        <main className="flex-1 bg-muted/50 h-dvh">
+        <main className="flex-1 bg-text-title-invert/50 h-dvh">
           <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[94vh] overflow-auto px-8 pt-8">
             {templateList?.map((x, index) => {
               return (

web/src/pages/agents/template-sidebar.tsx

@@ -1,44 +1,85 @@
 import { Button } from '@/components/ui/button';
-import { useSecondPathName } from '@/hooks/route-hook';
 import { cn } from '@/lib/utils';
-import { Banknote, LayoutGrid, User } from 'lucide-react';
-
+import {
+  Box,
+  ChartPie,
+  Component,
+  MessageCircleCode,
+  PencilRuler,
+  Sparkle,
+} from 'lucide-react';
+export enum MenuItemKey {
+  Recommended = 'Recommended',
+  Agent = 'Agent',
+  CustomerSupport = 'Customer Support',
+  Marketing = 'Marketing',
+  ConsumerApp = 'Consumer App',
+  Other = 'Other',
+}
 const menuItems = [
   {
-    section: 'All Templates',
+    // section: 'All Templates',
+    section: '',
     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' },
+      {
+        icon: Sparkle,
+        label: MenuItemKey.Recommended,
+        key: MenuItemKey.Recommended,
+      },
+      { icon: Box, label: MenuItemKey.Agent, key: MenuItemKey.Agent },
+      {
+        icon: MessageCircleCode,
+        label: MenuItemKey.CustomerSupport,
+        key: MenuItemKey.CustomerSupport,
+      },
+      {
+        icon: ChartPie,
+        label: MenuItemKey.Marketing,
+        key: MenuItemKey.Marketing,
+      },
+      {
+        icon: Component,
+        label: MenuItemKey.ConsumerApp,
+        key: MenuItemKey.ConsumerApp,
+      },
+      { icon: PencilRuler, label: MenuItemKey.Other, key: MenuItemKey.Other },
     ],
   },
 ];
 
-export function SideBar({ change }: { change: (keyword: string) => void }) {
-  const pathName = useSecondPathName();
+export function SideBar({
+  change,
+  selected = MenuItemKey.Recommended,
+}: {
+  change: (keyword: string) => void;
+  selected?: string;
+}) {
   const handleMenuClick = (key: string) => {
     change(key);
   };
 
   return (
-    <aside className="w-[303px] bg-background border-r flex flex-col">
+    <aside className="w-[303px] bg-text-title-invert 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.section && (
+              <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;
+              const active = selected === item.key;
               return (
                 <Button
                   key={itemIdx}
                   variant={active ? 'secondary' : 'ghost'}
-                  className={cn('w-full justify-start gap-2.5 p-6 relative')}
+                  className={cn(
+                    'w-full justify-start gap-4 px-6 py-8 relative rounded-none',
+                  )}
                   onClick={() => handleMenuClick(item.key)}
                 >
                   <item.icon className="w-6 h-6" />