Fix: Share-log bugs (#9172)

### What problem does this PR solve?

Fix Share-log bugs #3221

### Type of change

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

web/src/pages/agent/chat/box.tsx

@@ -16,7 +16,7 @@ import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { Message } from '@/interfaces/database/chat';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import { get } from 'lodash';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useParams } from 'umi';
 import DebugContent from '../debug-content';
 import { BeginQuery } from '../interface';
@@ -43,7 +43,6 @@ function AgentChatBox() {
   const { data: canvasInfo } = useFetchAgent();
   const { id: canvasId } = useParams();
   const { uploadCanvasFile, loading } = useUploadCanvasFileWithProgress();
-
   const getInputs = useCallback((message: Message) => {
     return get(message, 'data.inputs', {}) as Record<string, BeginQuery>;
   }, []);
@@ -80,7 +79,16 @@ function AgentChatBox() {
       },
       [appendUploadResponseList, uploadCanvasFile],
     );
-
+  const isWaitting = useMemo(() => {
+    const temp = derivedMessages?.some((message, i) => {
+      const flag =
+        message.role === MessageType.Assistant &&
+        derivedMessages.length - 1 === i &&
+        message.data;
+      return flag;
+    });
+    return temp;
+  }, [derivedMessages]);
   return (
     <>
       <section className="flex flex-1 flex-col px-5 h-[90vh]">
@@ -106,12 +114,26 @@ function AgentChatBox() {
                   showLikeButton={false}
                   sendLoading={sendLoading}
                 >
-                  <DebugContent
-                    parameters={buildInputList(message)}
-                    ok={handleOk(message)}
-                    isNext={false}
-                    btnText={'Submit'}
-                  ></DebugContent>
+                  {message.role === MessageType.Assistant &&
+                    derivedMessages.length - 1 === i && (
+                      <DebugContent
+                        parameters={buildInputList(message)}
+                        message={message}
+                        ok={handleOk(message)}
+                        isNext={false}
+                        btnText={'Submit'}
+                      ></DebugContent>
+                    )}
+                  {message.role === MessageType.Assistant &&
+                    derivedMessages.length - 1 !== i && (
+                      <div>
+                        <div>{message?.data?.tips}</div>
+
+                        <div>
+                          {buildInputList(message)?.map((item) => item.value)}
+                        </div>
+                      </div>
+                    )}
                 </MessageItem>
               );
             })}
@@ -122,9 +144,9 @@ function AgentChatBox() {
         <NextMessageInput
           value={value}
           sendLoading={sendLoading}
-          disabled={false}
-          sendDisabled={sendLoading}
-          isUploading={loading}
+          disabled={isWaitting}
+          sendDisabled={sendLoading || isWaitting}
+          isUploading={loading || isWaitting}
           onPressEnter={handlePressEnter}
           onInputChange={handleInputChange}
           stopOutputMessage={stopOutputMessage}

web/src/pages/agent/debug-content/index.tsx

@@ -11,6 +11,7 @@ import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
+import { IMessage } from '@/pages/chat/interface';
 import { zodResolver } from '@hookform/resolvers/zod';
 import React, { ReactNode, useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
@@ -28,6 +29,7 @@ const StringFields = [
 
 interface IProps {
   parameters: BeginQuery[];
+  message?: IMessage;
   ok(parameters: any[]): void;
   isNext?: boolean;
   loading?: boolean;
@@ -37,6 +39,7 @@ interface IProps {
 
 const DebugContent = ({
   parameters,
+  message,
   ok,
   isNext = true,
   loading = false,
@@ -228,10 +231,10 @@ const DebugContent = ({
     },
     [formSchemaValues, ok, parameters],
   );
-
   return (
     <>
       <section>
+        {message?.data?.tips && <div className="mb-2">{message.data.tips}</div>}
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             {parameters.map((x, idx) => {
@@ -242,7 +245,7 @@ const DebugContent = ({
                 type="submit"
                 loading={loading}
                 disabled={!submittable || submitButtonDisabled}
-                className="w-full mt-8"
+                className="w-full mt-1"
               >
                 {btnText || t(isNext ? 'common.next' : 'flow.run')}
               </ButtonLoading>

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

@@ -12,6 +12,7 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import { cn } from '@/lib/utils';
+import { isEmpty } from 'lodash';
 import { Operator } from '../constant';
 import OperatorIcon from '../operator-icon';
 import {
@@ -19,7 +20,20 @@ import {
   toLowerCaseStringAndDeleteChar,
   typeMap,
 } from './workFlowTimeline';
+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(' ');
+};
+const changeToolName = (toolName: any) => {
+  const name = 'Agent ' + capitalizeWords(toolName);
+  return name;
+};
 const ToolTimelineItem = ({
   tools,
   sendLoading = false,
@@ -34,16 +48,7 @@ const ToolTimelineItem = ({
   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(' ');
-  };
   const parentName = (str: string, separator: string = '-->') => {
     if (!str) return '';
     const strs = str.split(separator);
@@ -124,13 +129,11 @@ const ToolTimelineItem = ({
                         )}
                         {isShare && (
                           <span>
-                            {
-                              typeMap[
-                                toLowerCaseStringAndDeleteChar(
-                                  tool.tool_name,
-                                ) as keyof typeof typeMap
-                              ]
-                            }
+                            {typeMap[
+                              toLowerCaseStringAndDeleteChar(
+                                tool.tool_name,
+                              ) as keyof typeof typeMap
+                            ] ?? changeToolName(tool.tool_name)}
                           </span>
                         )}
                         <span className="text-text-sub-title text-xs">
@@ -146,22 +149,37 @@ const ToolTimelineItem = ({
                         </span>
                       </div>
                     </AccordionTrigger>
-                    <AccordionContent>
-                      <div className="space-y-2">
-                        {!isShare && (
+                    {!isShare && (
+                      <AccordionContent>
+                        <div className="space-y-2">
                           <JsonViewer
                             data={tool.result}
                             title="content"
                           ></JsonViewer>
-                        )}
-                        {isShare && (
-                          <JsonViewer
-                            data={tool.result}
-                            title={''}
-                          ></JsonViewer>
-                        )}
-                      </div>
-                    </AccordionContent>
+                        </div>
+                      </AccordionContent>
+                    )}
+                    {isShare && !isEmpty(tool.arguments) && (
+                      <AccordionContent>
+                        <div className="space-y-2">
+                          {tool &&
+                            tool.arguments &&
+                            Object.entries(tool.arguments).length &&
+                            Object.entries(tool.arguments).map(([key, val]) => {
+                              return (
+                                <div key={key}>
+                                  <div className="text-sm font-medium leading-none">
+                                    {key}
+                                  </div>
+                                  <div className="text-sm text-muted-foreground">
+                                    {val || ''}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                        </div>
+                      </AccordionContent>
+                    )}
                   </AccordionItem>
                 </Accordion>
               </section>

web/src/pages/agents/agent-log-page.tsx

@@ -144,12 +144,14 @@ const AgentLogPage: React.FC = () => {
 
   const handlePageChange = (current?: number, pageSize?: number) => {
     console.log('current', current, 'pageSize', pageSize);
-    setPagination((pre) => {
-      return {
-        ...pre,
-        current: current ?? pre.pageSize ? 1 : pre.current,
-        pageSize: pageSize ?? pre.pageSize,
-      };
+    let page = current || 1;
+    if (pagination.pageSize !== pageSize) {
+      page = 1;
+    }
+    setPagination({
+      ...pagination,
+      current: page,
+      pageSize: pageSize || 10,
     });
   };