Fix: Fixed share-log UI issues and log-template bugs (#9166)

### What problem does this PR solve? Fix: Fixed share-log UI issues and log-template bugs #3221 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-08 20:42:30 +08:00 · 2025-08-01 18:32:38 +08:00
parent 8fd12b670e
commit 01bf799a59
13 changed files with 331 additions and 89 deletions
--- a/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
+++ b/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
@ -14,14 +14,20 @@ import {
 import { cn } from '@/lib/utils';
 import { Operator } from '../constant';
 import OperatorIcon from '../operator-icon';
-import { JsonViewer } from './workFlowTimeline';
+import {
+  JsonViewer,
+  toLowerCaseStringAndDeleteChar,
+  typeMap,
+} from './workFlowTimeline';

 const ToolTimelineItem = ({
  tools,
  sendLoading = false,
+  isShare = false,
 }: {
  tools: Record<string, any>[];
  sendLoading: boolean;
+  isShare?: boolean;
 }) => {
  if (!tools || tools.length === 0 || !Array.isArray(tools)) return null;
  const blackList = ['add_memory', 'gen_citations'];
@ -110,10 +116,23 @@ const ToolTimelineItem = ({
                  <AccordionItem value={idx.toString()}>
                    <AccordionTrigger>
                      <div className="flex gap-2 items-center">
-                        <span>
-                          {parentName(tool.path) + ' '}
-                          {capitalizeWords(tool.tool_name, '_')}
-                        </span>
+                        {!isShare && (
+                          <span>
+                            {parentName(tool.path) + ' '}
+                            {capitalizeWords(tool.tool_name, '_')}
+                          </span>
+                        )}
+                        {isShare && (
+                          <span>
+                            {
+                              typeMap[
+                                toLowerCaseStringAndDeleteChar(
+                                  tool.tool_name,
+                                ) as keyof typeof typeMap
+                              ]
+                            }
+                          </span>
+                        )}
                        <span className="text-text-sub-title text-xs">
                          {/* 0:00
                          {x.data.elapsed_time?.toString().slice(0, 6)} */}
@ -129,10 +148,18 @@ const ToolTimelineItem = ({
                    </AccordionTrigger>
                    <AccordionContent>
                      <div className="space-y-2">
-                        <JsonViewer
-                          data={tool.result}
-                          title="content"
-                        ></JsonViewer>
+                        {!isShare && (
+                          <JsonViewer
+                            data={tool.result}
+                            title="content"
+                          ></JsonViewer>
+                        )}
+                        {isShare && (
+                          <JsonViewer
+                            data={tool.result}
+                            title={''}
+                          ></JsonViewer>
+                        )}
                      </div>
                    </AccordionContent>
                  </AccordionItem>
--- a/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
+++ b/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
@ -1,3 +1,4 @@
+import HightLightMarkdown from '@/components/highlight-markdown';
 import {
  Timeline,
  TimelineContent,
@ -31,7 +32,11 @@ import ToolTimelineItem from './toolTimelineItem';
 type LogFlowTimelineProps = Pick<
  ReturnType<typeof useCacheChatLog>,
  'currentEventListWithoutMessage' | 'currentMessageId'
-> & { canvasId?: string; sendLoading: boolean };
+> & {
+  canvasId?: string;
+  sendLoading: boolean;
+  isShare?: boolean;
+};
 export function JsonViewer({
  data,
  title,
@ -46,12 +51,41 @@ export function JsonViewer({
        src={data}
        displaySize
        collapseStringsAfterLength={100000000000}
-        className="w-full h-[200px] break-words overflow-auto p-2 bg-background-card"
+        className="w-full h-[200px] break-words overflow-auto scrollbar-auto p-2 bg-slate-800"
      />
    </section>
  );
 }
-
+export const typeMap = {
+  begin: t('flow.logTimeline.begin'),
+  agent: t('flow.logTimeline.agent'),
+  retrieval: t('flow.logTimeline.retrieval'),
+  message: t('flow.logTimeline.message'),
+  awaitResponse: t('flow.logTimeline.awaitResponse'),
+  switch: t('flow.logTimeline.switch'),
+  iteration: t('flow.logTimeline.iteration'),
+  categorize: t('flow.logTimeline.categorize'),
+  code: t('flow.logTimeline.code'),
+  textProcessing: t('flow.logTimeline.textProcessing'),
+  tavilySearch: t('flow.logTimeline.tavilySearch'),
+  tavilyExtract: t('flow.logTimeline.tavilyExtract'),
+  exeSQL: t('flow.logTimeline.exeSQL'),
+  google: t('flow.logTimeline.google'),
+  duckDuckGo: t('flow.logTimeline.google'),
+  wikipedia: t('flow.logTimeline.wikipedia'),
+  googleScholar: t('flow.logTimeline.googleScholar'),
+  arXiv: t('flow.logTimeline.googleScholar'),
+  pubMed: t('flow.logTimeline.googleScholar'),
+  gitHub: t('flow.logTimeline.gitHub'),
+  email: t('flow.logTimeline.email'),
+  httpRequest: t('flow.logTimeline.httpRequest'),
+  wenCai: t('flow.logTimeline.wenCai'),
+  yahooFinance: t('flow.logTimeline.yahooFinance'),
+};
+export const toLowerCaseStringAndDeleteChar = (
+  str: string,
+  char: string = '_',
+) => str.toLowerCase().replace(/ /g, '').replaceAll(char, '');
 function getInputsOrOutputs(
  nodeEventList: INodeData[],
  field: 'inputs' | 'outputs',
@ -69,6 +103,7 @@ export const WorkFlowTimeline = ({
  currentMessageId,
  canvasId,
  sendLoading,
+  isShare,
 }: LogFlowTimelineProps) => {
  // const getNode = useGraphStore((state) => state.getNode);
  const [isStopFetchTrace, setISStopFetchTrace] = useState(false);
@ -146,6 +181,7 @@ export const WorkFlowTimeline = ({
    },
    [currentEventListWithoutMessage],
  );
+
  return (
    <Timeline>
      {startedNodeList?.map((x, idx) => {
@ -213,7 +249,15 @@ export const WorkFlowTimeline = ({
                    <AccordionItem value={idx.toString()}>
                      <AccordionTrigger>
                        <div className="flex gap-2 items-center">
-                          <span>{getNodeName(x.data?.component_name)}</span>
+                          <span>
+                            {!isShare && getNodeName(x.data?.component_name)}
+                            {isShare &&
+                              typeMap[
+                                toLowerCaseStringAndDeleteChar(
+                                  nodeLabel,
+                                ) as keyof typeof typeMap
+                              ]}
+                          </span>
                          <span className="text-text-sub-title text-xs">
                            {x.data.elapsed_time?.toString().slice(0, 6)}
                          </span>
@ -228,16 +272,36 @@ export const WorkFlowTimeline = ({
                          </span>
                        </div>
                      </AccordionTrigger>
-                      <AccordionContent>
-                        <div className="space-y-2">
-                          <JsonViewer data={inputs} title="Input"></JsonViewer>
+                      {!isShare && (
+                        <AccordionContent>
+                          <div className="space-y-2">
+                            {!isShare && (
+                              <>
+                                <JsonViewer
+                                  data={inputs}
+                                  title="Input"
+                                ></JsonViewer>

-                          <JsonViewer
-                            data={outputs}
-                            title={'Output'}
-                          ></JsonViewer>
-                        </div>
-                      </AccordionContent>
+                                <JsonViewer
+                                  data={outputs}
+                                  title={'Output'}
+                                ></JsonViewer>
+                              </>
+                            )}
+                          </div>
+                        </AccordionContent>
+                      )}
+                      {isShare && x.data?.thoughts && (
+                        <AccordionContent>
+                          <div className="space-y-2">
+                            <div className="w-full h-[200px] break-words overflow-auto scrollbar-auto p-2 bg-slate-800">
+                              <HightLightMarkdown>
+                                {x.data.thoughts || ''}
+                              </HightLightMarkdown>
+                            </div>
+                          </div>
+                        </AccordionContent>
+                      )}
                    </AccordionItem>
                  </Accordion>
                </section>
@ -248,6 +312,7 @@ export const WorkFlowTimeline = ({
                key={'tool_' + idx}
                tools={filterTrace(x.data.component_id)}
                sendLoading={sendLoading}
+                isShare={isShare}
              ></ToolTimelineItem>
            )}
          </>
--- a/web/src/pages/agents/agent-log-detail-modal.tsx
+++ b/web/src/pages/agents/agent-log-detail-modal.tsx
@ -25,21 +25,25 @@ export const AgentLogDetailModal: React.FC<CustomModalProps> = ({
  const { data: canvasInfo } = useFetchAgent();

  const shortMessage = useMemo(() => {
-    const content = derivedMessages[0]?.content || '';
+    if (derivedMessages?.length) {
+      const content = derivedMessages[0]?.content || '';

-    const chineseCharCount = (content.match(/[\u4e00-\u9fa5]/g) || []).length;
-    const totalLength = content.length;
+      const chineseCharCount = (content.match(/[\u4e00-\u9fa5]/g) || []).length;
+      const totalLength = content.length;

-    if (chineseCharCount > 0) {
-      if (totalLength > 15) {
-        return content.substring(0, 15) + '...';
+      if (chineseCharCount > 0) {
+        if (totalLength > 15) {
+          return content.substring(0, 15) + '...';
+        }
+      } else {
+        if (totalLength > 30) {
+          return content.substring(0, 30) + '...';
+        }
      }
+      return content;
    } else {
-      if (totalLength > 30) {
-        return content.substring(0, 30) + '...';
-      }
+      return '';
    }
-    return content;
  }, [derivedMessages]);

  return (
@ -52,7 +56,7 @@ export const AgentLogDetailModal: React.FC<CustomModalProps> = ({
      className="!w-[900px]"
    >
      <div className="flex items-start mb-4 flex-col gap-4 justify-start">
-        <div>
+        <div className="w-full">
          {derivedMessages?.map((message, i) => {
            return (
              <MessageItem
--- a/web/src/pages/agents/agent-log-page.tsx
+++ b/web/src/pages/agents/agent-log-page.tsx
@ -147,7 +147,7 @@ const AgentLogPage: React.FC = () => {
    setPagination((pre) => {
      return {
        ...pre,
-        current: current ?? pre.current,
+        current: current ?? pre.pageSize ? 1 : pre.current,
        pageSize: pageSize ?? pre.pageSize,
      };
    });
@ -196,8 +196,10 @@ const AgentLogPage: React.FC = () => {
  const [openModal, setOpenModal] = useState(false);
  const [modalData, setModalData] = useState<IAgentLogResponse>();
  const showLogDetail = (item: IAgentLogResponse) => {
-    setModalData(item);
-    setOpenModal(true);
+    if (item?.round) {
+      setModalData(item);
+      setOpenModal(true);
+    }
  };

  return (
--- a/web/src/pages/agents/agent-templates.tsx
+++ b/web/src/pages/agents/agent-templates.tsx
@ -11,7 +11,7 @@ import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
 import { IFlowTemplate } from '@/interfaces/database/flow';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
 import { TemplateCard } from './template-card';
@ -70,15 +70,19 @@ export default function AgentTemplates() {
    ],
  );
  const handleSiderBarChange = (keyword: string) => {
-    const tempList = list.filter(
-      (item, index) =>
-        item.canvas_type
-          ?.toLocaleLowerCase()
-          .includes(keyword?.toLocaleLowerCase()) || index === 0,
-    );
-    setTemplateList(tempList);
    setSelectMenuItem(keyword);
  };
+
+  const tempListFilter = useMemo(() => {
+    if (!selectMenuItem) {
+      return templateList;
+    }
+    return templateList.filter(
+      (item, index) =>
+        item.canvas_type?.toLocaleLowerCase() ===
+          selectMenuItem?.toLocaleLowerCase() || index === 0,
+    );
+  }, [selectMenuItem, templateList]);
  return (
    <section>
      <PageHeader>
@ -104,7 +108,7 @@ export default function AgentTemplates() {

        <main className="flex-1 bg-text-title-invert/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) => {
+            {tempListFilter?.map((x, index) => {
              return (
                <TemplateCard
                  isCreate={index === 0}
--- a/web/src/pages/next-chats/share/index.tsx
+++ b/web/src/pages/next-chats/share/index.tsx
@ -29,7 +29,6 @@ import { ParameterDialog } from './parameter-dialog';
 const ChatContainer = () => {
  const {
    sharedId: conversationId,
-    from,
    locale,
    visibleAvatar,
  } = useGetSharedChatSearchParams();
@ -61,7 +60,6 @@ const ChatContainer = () => {
    resetSession,
  } = useSendNextSharedMessage(addEventList);

-  // const { data } = useFetchExternalAgentInputs();
  const sendDisabled = useSendButtonDisabled(value);
  const appConf = useFetchAppConf();
  const { data: inputsData } = useFetchExternalAgentInputs();
@ -95,7 +93,7 @@ const ChatContainer = () => {
  }, [inputsData, setAgentInfo]);

  React.useEffect(() => {
-    if (!isEmpty(inputsData)) {
+    if (inputsData && inputsData.inputs && !isEmpty(inputsData.inputs)) {
      showParameterDialog();
    }
  }, [inputsData, showParameterDialog]);
@ -141,7 +139,9 @@ const ChatContainer = () => {
        </div>
        <div className="flex flex-1 flex-col p-2.5  h-[90vh] m-3">
          <div
-            className={cn('flex flex-1 flex-col overflow-auto m-auto w-5/6')}
+            className={cn(
+              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto w-5/6',
+            )}
          >
            <div>
              {derivedMessages?.map((message, i) => {
@ -162,6 +162,7 @@ const ChatContainer = () => {
                      sendLoading &&
                      derivedMessages?.length - 1 === i
                    }
+                    isShare={true}
                    avatarDialog={agentInfo.avatar}
                    agentName={agentInfo.title}
                    index={i}