Feat: Supports to debug single component in Agent. infiniflow#3993 (i…

…nfiniflow#4007) ### What problem does this PR solve? Feat: Supports to debug single component in Agent. infiniflow#3993 Fix: The github button on the login page is displayed incorrectly infiniflow#4002 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
isthaison · Dec 13, 2024 · d24892f · d24892f
1 parent b8e9f43
commit d24892f
Show file tree

Hide file tree

Showing 23 changed files with 645 additions and 262 deletions.
diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
@@ -1,5 +1,6 @@
 import { ResponseType } from '@/interfaces/database/base';
 import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
+import { IDebugSingleRequestBody } from '@/interfaces/request/flow';
 import i18n from '@/locales/config';
 import flowService from '@/services/flow-service';
 import { buildMessageListWithUuid } from '@/utils/chat';
@@ -220,3 +221,50 @@ export const useTestDbConnect = () => {
 
   return { data, loading, testDbConnect: mutateAsync };
 };
+
+export const useFetchInputElements = (componentId?: string) => {
+  const { id } = useParams();
+
+  const { data, isPending: loading } = useQuery({
+    queryKey: ['fetchInputElements', id, componentId],
+    initialData: [],
+    enabled: !!id && !!componentId,
+    retryOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    gcTime: 0,
+    queryFn: async () => {
+      try {
+        const { data } = await flowService.getInputElements({
+          id,
+          component_id: componentId,
+        });
+        return data?.data ?? [];
+      } catch (error) {
+        console.log('🚀 ~ queryFn: ~ error:', error);
+      }
+    },
+  });
+
+  return { data, loading };
+};
+
+export const useDebugSingle = () => {
+  const { id } = useParams();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['debugSingle'],
+    mutationFn: async (params: IDebugSingleRequestBody) => {
+      const ret = await flowService.debugSingle({ id, ...params });
+      if (ret?.data?.code !== 0) {
+        message.error(ret?.data?.message);
+      }
+      return ret?.data?.data;
+    },
+  });
+
+  return { data, loading, debugSingle: mutateAsync };
+};
diff --git a/web/src/interfaces/request/flow.ts b/web/src/interfaces/request/flow.ts
@@ -0,0 +1,4 @@
+export interface IDebugSingleRequestBody {
+  component_id: string;
+  params: any[];
+}
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
@@ -381,8 +381,7 @@ The above is the content you need to summarize.`,
       freedomTip: `Set the freedom level to 'Precise' to strictly confine the LLM's response to your selected knowledge base(s). Choose 'Improvise' to grant the LLM greater freedom in its responses, which may lead to hallucinations. 'Balance' is an intermediate level; choose 'Balance' for more balanced responses.`,
       temperature: 'Temperature',
       temperatureMessage: 'Temperature is required',
-      temperatureTip:
-        `This parameter controls the randomness of the model's predictions. A lower temperature results in more conservative responses, while a higher temperature yields more creative and diverse responses.`,
+      temperatureTip: `This parameter controls the randomness of the model's predictions. A lower temperature results in more conservative responses, while a higher temperature yields more creative and diverse responses.`,
       topP: 'Top P',
       topPMessage: 'Top P is required',
       topPTip:
@@ -397,8 +396,7 @@ The above is the content you need to summarize.`,
         'Similar to the presence penalty, this reduces the model’s tendency to repeat the same words frequently.',
       maxTokens: 'Max tokens',
       maxTokensMessage: 'Max tokens is required',
-      maxTokensTip:
-        `This sets the maximum length of the model's output, measured in the number of tokens (words or pieces of words). If disabled, you lift the maximum token limit, allowing the model to determine the number of tokens in its responses. Defaults to 512.`,
+      maxTokensTip: `This sets the maximum length of the model's output, measured in the number of tokens (words or pieces of words). If disabled, you lift the maximum token limit, allowing the model to determine the number of tokens in its responses. Defaults to 512.`,
       maxTokensInvalidMessage: 'Please enter a valid number for Max Tokens.',
       maxTokensMinMessage: 'Max Tokens cannot be less than 0.',
       quote: 'Show quote',
@@ -430,7 +428,7 @@ The above is the content you need to summarize.`,
       partialTitle: 'Partial Embed',
       extensionTitle: 'Chrome Extension',
       tokenError: 'Please create API Token first!',
-      betaError: 'The beta field of the API Token cannot be empty!',
+      betaError: 'Please apply an API key in system setting firstly.',
       searching: 'Searching...',
       parsing: 'Parsing',
       uploading: 'Uploading',
@@ -453,8 +451,7 @@ The above is the content you need to summarize.`,
       profileDescription: 'Update your photo and personal details here.',
       maxTokens: 'Max Tokens',
       maxTokensMessage: 'Max Tokens is required',
-      maxTokensTip:
-        `This sets the maximum length of the model's output, measured in the number of tokens (words or pieces of words). If disabled, you lift the maximum token limit, allowing the model to determine the number of tokens in its responses. Defaults to 512.`,
+      maxTokensTip: `This sets the maximum length of the model's output, measured in the number of tokens (words or pieces of words). If disabled, you lift the maximum token limit, allowing the model to determine the number of tokens in its responses. Defaults to 512.`,
       maxTokensInvalidMessage: 'Please enter a valid number for Max Tokens.',
       maxTokensMinMessage: 'Max Tokens cannot be less than 0.',
       password: 'Password',
@@ -774,7 +771,7 @@ The above is the content you need to summarize.`,
       sourceLang: 'Source language',
       targetLang: 'Target language',
       gitHub: 'GitHub',
-      githubDescription:
+      gitHubDescription:
         'This component is used to search the repository from https://github.com/. Top N specifies the number of search results to be adjusted.',
       baiduFanyi: 'BaiduFanyi',
       baiduFanyiDescription:

diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts
@@ -414,7 +414,7 @@ export default {
       partialTitle: '部分嵌入',
       extensionTitle: 'Chrome 插件',
       tokenError: '請先創建 API Token!',
-      betaError: 'API Token的beta欄位不可以為空！',
+      betaError: '請先在系統設定中申請API密鑰。',
       searching: '搜索中',
       parsing: '解析中',
       uploading: '上傳中',

diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
@@ -431,7 +431,7 @@ export default {
       partialTitle: '部分嵌入',
       extensionTitle: 'Chrome 插件',
       tokenError: '请先创建 API Token!',
-      betaError: 'API Token的beta字段不可以为空！',
+      betaError: '请先在系统设置中申请API密钥。',
       searching: '搜索中',
       parsing: '解析中',
       uploading: '上传中',
@@ -760,7 +760,7 @@ export default {
       sourceLang: '源语言',
       targetLang: '目标语言',
       gitHub: 'GitHub',
-      githubDescription:
+      gitHubDescription:
         '该组件用于从 https://github.com/ 搜索仓库。Top N 指定需要调整的搜索结果数量。',
       baiduFanyi: '百度翻译',
       baiduFanyiDescription:

diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
@@ -5,6 +5,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useSetModalState } from '@/hooks/common-hooks';
+import { get } from 'lodash';
 import { FolderInput, FolderOutput } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import ReactFlow, {
@@ -24,6 +25,7 @@ import {
   useHandleExportOrImportJsonFile,
   useSelectCanvasData,
   useShowFormDrawer,
+  useShowSingleDebugDrawer,
   useValidateConnection,
   useWatchNodeFormDataChange,
 } from '../hooks';
@@ -95,6 +97,11 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
     showModal: showChatModal,
     hideModal: hideChatModal,
   } = useSetModalState();
+  const {
+    singleDebugDrawerVisible,
+    showSingleDebugDrawer,
+    hideSingleDebugDrawer,
+  } = useShowSingleDebugDrawer();
 
   const { formDrawerVisible, hideFormDrawer, showFormDrawer, clickedNode } =
     useShowFormDrawer();
@@ -116,11 +123,24 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
   const onNodeClick: NodeMouseHandler = useCallback(
     (e, node) => {
       if (node.data.label !== Operator.Note) {
+        hideSingleDebugDrawer();
         hideRunOrChatDrawer();
         showFormDrawer(node);
       }
+      // handle single debug icon click
+      if (
+        get(e.target, 'dataset.play') === 'true' ||
+        get(e.target, 'parentNode.dataset.play') === 'true'
+      ) {
+        showSingleDebugDrawer();
+      }
     },
-    [hideRunOrChatDrawer, showFormDrawer],
+    [
+      hideRunOrChatDrawer,
+      hideSingleDebugDrawer,
+      showFormDrawer,
+      showSingleDebugDrawer,
+    ],
   );
 
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
@@ -193,12 +213,6 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
         onSelectionChange={onSelectionChange}
         nodeOrigin={[0.5, 0]}
         isValidConnection={isValidConnection}
-        onChangeCapture={(...params) => {
-          console.info('onChangeCapture:', ...params);
-        }}
-        onChange={(...params) => {
-          console.info('params:', ...params);
-        }}
         defaultEdgeOptions={{
           type: 'buttonEdge',
           markerEnd: 'logo',
@@ -214,7 +228,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           <ControlButton onClick={handleImportJson}>
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <FolderInput />
                 </TooltipTrigger>
                 <TooltipContent>Import</TooltipContent>
@@ -224,7 +238,7 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           <ControlButton onClick={handleExportJson}>
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <FolderOutput />
                 </TooltipTrigger>
                 <TooltipContent>Export</TooltipContent>
@@ -238,6 +252,9 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
           node={clickedNode}
           visible={formDrawerVisible}
           hideModal={hideFormDrawer}
+          singleDebugDrawerVisible={singleDebugDrawerVisible}
+          hideSingleDebugDrawer={hideSingleDebugDrawer}
+          showSingleDebugDrawer={showSingleDebugDrawer}
         ></FormDrawer>
       )}
       {chatVisible && (

diff --git a/web/src/pages/flow/canvas/node/node-header.tsx b/web/src/pages/flow/canvas/node/node-header.tsx
@@ -1,12 +1,14 @@
+import { useTranslate } from '@/hooks/common-hooks';
 import { Flex } from 'antd';
+import { Play } from 'lucide-react';
 import { Operator, operatorMap } from '../../constant';
 import OperatorIcon from '../../operator-icon';
+import { needsSingleStepDebugging } from '../../utils';
 import NodeDropdown from './dropdown';
-
-import { useTranslate } from '@/hooks/common-hooks';
-import styles from './index.less';
 import { NextNodePopover } from './popover';
 
+import { RunTooltip } from '../../flow-tooltip';
+import styles from './index.less';
 interface IProps {
   id: string;
   label: string;
@@ -15,12 +17,17 @@ interface IProps {
   className?: string;
 }
 
-export function RunStatus({ id, name }: Omit<IProps, 'label'>) {
+export function RunStatus({ id, name, label }: IProps) {
   const { t } = useTranslate('flow');
   return (
-    <section className="flex justify-end items-center pb-1 ">
+    <section className="flex  justify-end items-center pb-1 gap-2 text-blue-600">
+      {needsSingleStepDebugging(label) && (
+        <RunTooltip>
+          <Play className="size-3 cursor-pointer" data-play />
+        </RunTooltip> // data-play is used to trigger single step debugging
+      )}
       <NextNodePopover nodeId={id} name={name}>
-        <span className="text-blue-600 cursor-pointer text-[10px]">
+        <span className="cursor-pointer text-[10px]">
           {t('operationResults')}
         </span>
       </NextNodePopover>
@@ -30,8 +37,10 @@ export function RunStatus({ id, name }: Omit<IProps, 'label'>) {
 
 const NodeHeader = ({ label, id, name, gap = 4, className }: IProps) => {
   return (
-    <section className="haha">
-      {label !== Operator.Answer && <RunStatus id={id} name={name}></RunStatus>}
+    <section>
+      {label !== Operator.Answer && (
+        <RunStatus id={id} name={name} label={label}></RunStatus>
+      )}
       <Flex
         flex={1}
         align="center"

diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
@@ -2931,3 +2931,13 @@ export const BeginQueryTypeIconMap = {
   [BeginQueryType.Integer]: ListOrdered,
   [BeginQueryType.Boolean]: ToggleLeft,
 };
+
+export const NoDebugOperatorsList = [
+  Operator.Begin,
+  Operator.Answer,
+  Operator.Concentrator,
+  Operator.Template,
+  Operator.Message,
+  Operator.RewriteQuestion,
+  Operator.Switch,
+];
diff --git a/web/src/pages/flow/debug-content/index.less b/web/src/pages/flow/debug-content/index.less
@@ -0,0 +1,5 @@
+.formWrapper {
+  :global(.ant-form-item-label) {
+    font-weight: 600 !important;
+  }
+}