Fix: Add parsing animations to the agent log and optimize some page styles (#9040)

### What problem does this PR solve?

Add parsing animations to the agent log and optimize some page styles
#3221

### Type of change

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

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

@@ -15,6 +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';
 
 export default function AgentTemplates() {
   const { navigateToAgentList } = useNavigatePage();
@@ -91,25 +92,32 @@ export default function AgentTemplates() {
           </BreadcrumbList>
         </Breadcrumb>
       </PageHeader>
-      <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[94vh] overflow-auto px-8">
-        {list?.map((x) => {
-          return (
-            <TemplateCard
-              key={x.id}
-              data={x}
-              showModal={showModal}
-            ></TemplateCard>
-          );
-        })}
+      <div className="flex flex-1 h-dvh">
+        <SideBar change={handleSiderBarChange}></SideBar>
+
+        <main className="flex-1 bg-muted/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 (
+                <TemplateCard
+                  isCreate={index === 0}
+                  key={x.id}
+                  data={x}
+                  showModal={showModal}
+                ></TemplateCard>
+              );
+            })}
+          </div>
+          {creatingVisible && (
+            <CreateAgentDialog
+              loading={loading}
+              visible={creatingVisible}
+              hideModal={hideCreatingModal}
+              onOk={handleOk}
+            ></CreateAgentDialog>
+          )}
+        </main>
       </div>
-      {creatingVisible && (
-        <CreateAgentDialog
-          loading={loading}
-          visible={creatingVisible}
-          hideModal={hideCreatingModal}
-          onOk={handleOk}
-        ></CreateAgentDialog>
-      )}
     </section>
   );
 }