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/agent/log-sheet/toolTimelineItem.tsx

@@ -16,7 +16,13 @@ import { Operator } from '../constant';
 import OperatorIcon from '../operator-icon';
 import { JsonViewer } from './workFlowTimeline';
 
-const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
+const ToolTimelineItem = ({
+  tools,
+  sendLoading = false,
+}: {
+  tools: Record<string, any>[];
+  sendLoading: boolean;
+}) => {
   if (!tools || tools.length === 0 || !Array.isArray(tools)) return null;
   const blackList = ['add_memory', 'gen_citations'];
   const filteredTools = tools.filter(
@@ -32,6 +38,15 @@ const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
       })
       .join(' ');
   };
+  const parentName = (str: string, separator: string = '-->') => {
+    if (!str) return '';
+    const strs = str.split(separator);
+    if (strs.length > 1) {
+      return strs[strs.length - 1];
+    } else {
+      return str;
+    }
+  };
   return (
     <>
       {filteredTools?.map((tool, idx) => {
@@ -58,7 +73,9 @@ const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
                   'group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 p-1 items-center justify-center group-data-[orientation=vertical]/timeline:-left-7',
                   {
                     'border border-blue-500': !(
-                      idx >= filteredTools.length - 1 && tool.result === '...'
+                      idx >= filteredTools.length - 1 &&
+                      tool.result === '...' &&
+                      sendLoading
                     ),
                   },
                 )}
@@ -69,7 +86,8 @@ const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
                       className={cn('rounded-full w-6 h-6', {
                         ' border-muted-foreground border-2 border-t-transparent animate-spin ':
                           idx >= filteredTools.length - 1 &&
-                          tool.result === '...',
+                          tool.result === '...' &&
+                          sendLoading,
                       })}
                     ></div>
                   </div>
@@ -93,7 +111,7 @@ const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
                     <AccordionTrigger>
                       <div className="flex gap-2 items-center">
                         <span>
-                          {tool.path + ' '}
+                          {parentName(tool.path) + ' '}
                           {capitalizeWords(tool.tool_name, '_')}
                         </span>
                         <span className="text-text-sub-title text-xs">