Feat: Add log-detail page,Improve the style of chat boxes (#9119)

### What problem does this PR solve?

Feat: Add log-detail page,Improve the style of chat boxes #3221

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/chat/use-send-agent-message.ts

@@ -180,6 +180,7 @@ export const useSendAgentMessage = (
   const { id: agentId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   const inputs = useSelectBeginNodeDataInputs();
+  const [sessionId, setSessionId] = useState<string | null>(null);
   const { send, answerList, done, stopOutputMessage } = useSendMessageBySSE(
     url || api.runCanvas,
   );
@@ -187,6 +188,12 @@ export const useSendAgentMessage = (
     return answerList[0]?.message_id;
   }, [answerList]);
 
+  useEffect(() => {
+    if (answerList[0]?.session_id) {
+      setSessionId(answerList[0]?.session_id);
+    }
+  }, [answerList]);
+
   const { findReferenceByMessageId } = useFindMessageReference(answerList);
   const prologue = useGetBeginNodePrologue();
   const {
@@ -222,6 +229,8 @@ export const useSendAgentMessage = (
         params.inputs = transferInputsArrayToObject(query); // begin operator inputs
 
         params.files = uploadResponseList;
+
+        params.session_id = sessionId;
       }
       const res = await send(params);
 
@@ -239,6 +248,7 @@ export const useSendAgentMessage = (
     },
     [
       agentId,
+      sessionId,
       send,
       inputs,
       uploadResponseList,

web/src/pages/agent/hooks/use-cache-chat-log.ts

@@ -43,19 +43,13 @@ export function useCacheChatLog() {
     setEventList([]);
   }, []);
 
-  const addEventList = useCallback(
-    (events: IEventList, message_id: string) => {
-      const nextList = [...eventList];
-      events.forEach((x) => {
-        if (nextList.every((y) => y !== x)) {
-          nextList.push(x);
-        }
-      });
-      setEventList(nextList);
-      setMessageIdPool((prev) => ({ ...prev, [message_id]: nextList }));
-    },
-    [eventList],
-  );
+  const addEventList = useCallback((events: IEventList, message_id: string) => {
+    setEventList((x) => {
+      const list = [...x, ...events];
+      setMessageIdPool((prev) => ({ ...prev, [message_id]: list }));
+      return list;
+    });
+  }, []);
 
   const currentEventListWithoutMessage = useMemo(() => {
     const list = messageIdPool[currentMessageId]?.filter(

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

@@ -18,16 +18,26 @@ import { JsonViewer } from './workFlowTimeline';
 
 const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
   if (!tools || tools.length === 0 || !Array.isArray(tools)) return null;
-  const blackList = ['analyze_task', 'add_memory', 'gen_citations'];
+  const blackList = ['add_memory', 'gen_citations'];
   const filteredTools = tools.filter(
     (tool) => !blackList.includes(tool.tool_name),
   );
+  const capitalizeWords = (str: string, separator: string = '_'): string => {
+    if (!str) return '';
+
+    return str
+      .split(separator)
+      .map((word) => {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      })
+      .join(' ');
+  };
   return (
     <>
       {filteredTools?.map((tool, idx) => {
         return (
           <TimelineItem
-            key={idx}
+            key={'tool_' + idx}
             step={idx}
             className="group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8"
           >
@@ -82,7 +92,10 @@ const ToolTimelineItem = ({ tools }: { tools: Record<string, any>[] }) => {
                   <AccordionItem value={idx.toString()}>
                     <AccordionTrigger>
                       <div className="flex gap-2 items-center">
-                        <span>{tool.tool_name}</span>
+                        <span>
+                          {tool.path + ' '}
+                          {capitalizeWords(tool.tool_name, '_')}
+                        </span>
                         <span className="text-text-sub-title text-xs">
                           {/* 0:00
                           {x.data.elapsed_time?.toString().slice(0, 6)} */}