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/locales/en.ts

@@ -1050,7 +1050,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       },
       operator: 'Operator',
       value: 'Value',
-      useTemplate: 'Use this template',
+      useTemplate: 'Use',
       wenCai: 'WenCai',
       queryType: 'Query type',
       wenCaiDescription:

web/src/locales/zh-traditional.ts

@@ -1017,7 +1017,7 @@ export default {
       },
       operator: '操作符',
       value: '值',
-      useTemplate: '使用該模板',
+      useTemplate: '使用',
       wenCai: '問財',
       queryType: '查詢類型',
       wenCaiDescription:

web/src/locales/zh.ts

@@ -1047,7 +1047,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       },
       operator: '操作符',
       value: '值',
-      useTemplate: '使用该模板',
+      useTemplate: '使用',
       wenCai: '问财',
       queryType: '查询类型',
       wenCaiDescription:

web/src/pages/agent/form/begin-form/query-table.tsx

@@ -54,7 +54,7 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
     {
       accessorKey: 'key',
       header: 'key',
-      meta: { cellClassName: 'max-w-16' },
+      meta: { cellClassName: 'max-w-30' },
       cell: ({ row }) => {
         const key: string = row.getValue('key');
         return (
@@ -72,7 +72,7 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
     {
       accessorKey: 'name',
       header: t('flow.name'),
-      meta: { cellClassName: 'max-w-20' },
+      meta: { cellClassName: 'max-w-30' },
       cell: ({ row }) => {
         const name: string = row.getValue('name');
         return (
@@ -107,10 +107,16 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
 
         return (
           <div>
-            <Button variant={'ghost'} onClick={() => showModal(idx, record)}>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => showModal(idx, record)}
+            >
               <Pencil />
             </Button>
-            <Button variant={'ghost'} onClick={() => deleteRecord(idx)}>
+            <Button
+              className="bg-transparent text-foreground  hover:bg-muted-foreground hover:text-foreground"
+              onClick={() => deleteRecord(idx)}
+            >
               <Trash2 />
             </Button>
           </div>
@@ -139,7 +145,7 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
   return (
     <div className="w-full">
       <div className="rounded-md border">
-        <Table>
+        <Table rootClassName="rounded-md">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>

web/src/pages/agent/log-sheet/index.tsx

@@ -27,12 +27,15 @@ import {
 import { IModalProps } from '@/interfaces/common';
 import { ITraceData } from '@/interfaces/database/agent';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { get } from 'lodash';
-import { BellElectric, NotebookText } from 'lucide-react';
+import { NotebookText } from 'lucide-react';
 import { useCallback, useEffect, useMemo } from 'react';
 import JsonView from 'react18-json-view';
 import 'react18-json-view/src/style.css';
+import { Operator } from '../constant';
 import { useCacheChatLog } from '../hooks/use-cache-chat-log';
+import OperatorIcon from '../operator-icon';
 import useGraphStore from '../store';
 
 type LogSheetProps = IModalProps<any> &
@@ -89,6 +92,7 @@ export function LogSheet({
 
   const getNodeName = useCallback(
     (nodeId: string) => {
+      if ('begin' === nodeId) return t('flow.begin');
       return getNode(nodeId)?.data.name;
     },
     [getNode],
@@ -160,8 +164,12 @@ export function LogSheet({
           <Timeline>
             {startedNodeList.map((x, idx) => {
               const nodeDataList = filterFinishedNodeList(x.data.component_id);
+              const finishNodeIds = nodeDataList.map(
+                (x: INodeData) => x.component_id,
+              );
               const inputs = getInputsOrOutputs(nodeDataList, 'inputs');
               const outputs = getInputsOrOutputs(nodeDataList, 'outputs');
+              const nodeLabel = getNode(x.data.component_id)?.data.label;
               return (
                 <TimelineItem
                   key={idx}
@@ -172,7 +180,22 @@ export function LogSheet({
                     <TimelineSeparator className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-background-checked" />
 
                     <TimelineIndicator className="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
-                      <BellElectric className="size-5" />
+                      <div className='relative after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-transparent after:transition-all after:duration-300'>
+                        <div className="absolute inset-0 z-10 flex items-center justify-center ">
+                          <div
+                            className={cn('rounded-full w-6 h-6', {
+                              ' border-muted-foreground border-2 border-t-transparent animate-spin ':
+                                !finishNodeIds.includes(x.data.component_id),
+                            })}
+                          ></div>
+                        </div>
+                        <div className="size-6 flex items-center justify-center">
+                          <OperatorIcon
+                            className="size-5"
+                            name={nodeLabel as Operator}
+                          ></OperatorIcon>
+                        </div>
+                      </div>
                     </TimelineIndicator>
                   </TimelineHeader>
                   <TimelineContent className="text-foreground  rounded-lg border  mb-5">

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