Fix: Fixed the loss of Await Response function on the share page and other style issues #3221 (#9216)

### What problem does this PR solve?

Fix: Fixed the loss of Await Response function on the share page and
other style issues #3221

### Type of change

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

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

@@ -14,24 +14,37 @@ import {
 import { cn } from '@/lib/utils';
 import { isEmpty } from 'lodash';
 import { Operator } from '../constant';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon, { SVGIconMap } from '../operator-icon';
 import {
   JsonViewer,
   toLowerCaseStringAndDeleteChar,
   typeMap,
 } from './workFlowTimeline';
-const capitalizeWords = (str: string, separator: string = '_'): string => {
-  if (!str) return '';
+type IToolIcon =
+  | Operator.ArXiv
+  | Operator.GitHub
+  | Operator.Bing
+  | Operator.DuckDuckGo
+  | Operator.Google
+  | Operator.GoogleScholar
+  | Operator.PubMed
+  | Operator.TavilyExtract
+  | Operator.TavilySearch
+  | Operator.Wikipedia
+  | Operator.YahooFinance
+  | Operator.WenCai
+  | Operator.Crawler;
 
-  return str
-    .split(separator)
-    .map((word) => {
-      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-    })
-    .join(' ');
+const capitalizeWords = (str: string, separator: string = '_'): string[] => {
+  if (!str) return [''];
+
+  const resultStrArr = str.split(separator).map((word) => {
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  });
+  return resultStrArr;
 };
 const changeToolName = (toolName: any) => {
-  const name = 'Agent ' + capitalizeWords(toolName);
+  const name = 'Agent ' + capitalizeWords(toolName).join(' ');
   return name;
 };
 const ToolTimelineItem = ({
@@ -61,6 +74,8 @@ const ToolTimelineItem = ({
   return (
     <>
       {filteredTools?.map((tool, idx) => {
+        const toolName = capitalizeWords(tool.tool_name, '_').join('');
+
         return (
           <TimelineItem
             key={'tool_' + idx}
@@ -105,7 +120,11 @@ const ToolTimelineItem = ({
                   <div className="size-6 flex items-center justify-center">
                     <OperatorIcon
                       className="size-4"
-                      name={'Agent' as Operator}
+                      name={
+                        (SVGIconMap[toolName as IToolIcon]
+                          ? toolName
+                          : 'Agent') as Operator
+                      }
                     ></OperatorIcon>
                   </div>
                 </div>
@@ -119,12 +138,14 @@ const ToolTimelineItem = ({
                   className="bg-background-card px-3"
                 >
                   <AccordionItem value={idx.toString()}>
-                    <AccordionTrigger>
+                    <AccordionTrigger
+                      hideDownIcon={isShare && isEmpty(tool.arguments)}
+                    >
                       <div className="flex gap-2 items-center">
                         {!isShare && (
                           <span>
                             {parentName(tool.path) + ' '}
-                            {capitalizeWords(tool.tool_name, '_')}
+                            {capitalizeWords(tool.tool_name, '_').join(' ')}
                           </span>
                         )}
                         {isShare && (
@@ -142,7 +163,7 @@ const ToolTimelineItem = ({
                         </span>
                         <span
                           className={cn(
-                            'border-background  -end-1 -top-1 size-2 rounded-full border-2 bg-dot-green',
+                            'border-background  -end-1 -top-1 size-2 rounded-full bg-dot-green',
                           )}
                         >
                           <span className="sr-only">Online</span>
@@ -161,7 +182,7 @@ const ToolTimelineItem = ({
                     )}
                     {isShare && !isEmpty(tool.arguments) && (
                       <AccordionContent>
-                        <div className="space-y-2">
+                        <div className="space-y-2 bg-muted p-2">
                           {tool &&
                             tool.arguments &&
                             Object.entries(tool.arguments).length &&
@@ -171,8 +192,8 @@ const ToolTimelineItem = ({
                                   <div className="text-sm font-medium leading-none">
                                     {key}
                                   </div>
-                                  <div className="text-sm text-muted-foreground">
-                                    {val || ''}
+                                  <div className="text-sm text-muted-foreground mt-1">
+                                    {val as string}
                                   </div>
                                 </div>
                               );