4.8 test fix (#1385)

* fix: tool name cannot startwith number * fix: chatbox update * fix: chatbox * perf: drag ui * perf: drag component * drag component
2025-07-23 05:12:39 +00:00 · 2024-05-07 18:41:34 +08:00
parent 2a99e46353
commit fef1a1702b
16 changed files with 203 additions and 118 deletions
--- a/projects/app/i18n/zh/common.json
+++ b/projects/app/i18n/zh/common.json
@@ -644,8 +644,7 @@
            "success": "开始同步"
          }
        },
-        "training": {
-        }
+        "training": {}
      },
      "data": {
        "Auxiliary Data": "辅助数据",
@@ -920,7 +919,7 @@
        "AppId": "应用的ID",
        "ChatId": "当前对话ID",
        "Current time": "当前时间",
-        "Histories": "历史记录,最多取10条",
+        "Histories": "最近10条聊天记录",
        "Key already exists": "Key 已经存在",
        "Key cannot be empty": "参数名不能为空",
        "Props name": "参数名",
--- a/projects/app/package.json
+++ b/projects/app/package.json
@@ -47,7 +47,6 @@
    "nextjs-node-loader": "^1.1.5",
    "nprogress": "^0.2.0",
    "react": "18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
    "react-day-picker": "^8.7.1",
    "react-dom": "18.2.0",
    "react-hook-form": "7.43.1",
@@ -73,7 +72,6 @@
    "@types/lodash": "^4.14.191",
    "@types/node": "^20.8.5",
    "@types/react": "18.2.0",
-    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-dom": "18.2.0",
    "@types/react-syntax-highlighter": "^15.5.6",
    "@types/request-ip": "^0.0.37",
--- a/projects/app/src/components/ChatBox/components/VariableInput.tsx
+++ b/projects/app/src/components/ChatBox/components/VariableInput.tsx
@@ -1,5 +1,5 @@
 import { VariableItemType } from '@fastgpt/global/core/app/type.d';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 import { Box, Button, Card, Input, Textarea } from '@chakra-ui/react';
@@ -24,10 +24,23 @@ const VariableInput = ({
  chatForm: UseFormReturn<ChatBoxInputFormType>;
 }) => {
  const { t } = useTranslation();
-  const [refresh, setRefresh] = useState(false);
-  const { register, setValue, handleSubmit: handleSubmitChat, watch } = chatForm;
+  const { register, unregister, setValue, handleSubmit: handleSubmitChat, watch } = chatForm;
  const variables = watch('variables');

+  useEffect(() => {
+    // 重新注册所有字段
+    variableModules.forEach((item) => {
+      register(`variables.${item.key}`, { required: item.required });
+    });
+
+    return () => {
+      // 组件卸载时注销所有字段
+      variableModules.forEach((item) => {
+        unregister(`variables.${item.key}`);
+      });
+    };
+  }, [register, unregister, variableModules]);
+
  return (
    <Box py={3}>
      {/* avatar */}
@@ -92,7 +105,6 @@ const VariableInput = ({
                  value={variables[item.key]}
                  onchange={(e) => {
                    setValue(`variables.${item.key}`, e);
-                    setRefresh((state) => !state);
                  }}
                />
              )}
@@ -116,4 +128,4 @@ const VariableInput = ({
  );
 };

-export default React.memo(VariableInput);
+export default VariableInput;
--- a/projects/app/src/components/ChatBox/index.tsx
+++ b/projects/app/src/components/ChatBox/index.tsx
@@ -158,12 +158,6 @@ const ChatBox = (
    isChatting
  } = useChatProviderStore();

-  /* variable */
-  const filterVariableModules = useMemo(
-    () => variableModules.filter((item) => item.type !== VariableInputEnum.custom),
-    [variableModules]
-  );
-
  // compute variable input is finish.
  const chatForm = useForm<ChatBoxInputFormType>({
    defaultValues: {
@@ -174,9 +168,15 @@ const ChatBox = (
    }
  });
  const { setValue, watch, handleSubmit } = chatForm;
-  const variables = watch('variables');
  const chatStarted = watch('chatStarted');
-  const variableIsFinish = useMemo(() => {
+
+  /* variable */
+  const variables = watch('variables');
+  const filterVariableModules = useMemo(
+    () => variableModules.filter((item) => item.type !== VariableInputEnum.custom),
+    [variableModules]
+  );
+  const variableIsFinish = (() => {
    if (!filterVariableModules || filterVariableModules.length === 0 || chatHistories.length > 0)
      return true;

@@ -188,7 +188,7 @@ const ChatBox = (
    }

    return chatStarted;
-  }, [filterVariableModules, chatHistories.length, chatStarted, variables]);
+  })();

  // 滚动到底部
  const scrollToBottom = (behavior: 'smooth' | 'auto' = 'smooth') => {
@@ -360,6 +360,12 @@ const ChatBox = (
    [questionGuide, shareId, outLinkUid, teamId, teamToken]
  );

+  /* Abort chat completions, questionGuide */
+  const abortRequest = useCallback(() => {
+    chatController.current?.abort('stop');
+    questionGuideController.current?.abort('stop');
+  }, []);
+
  /**
   * user confirm send prompt
   */
@@ -383,6 +389,8 @@ const ChatBox = (
          return;
        }

+        abortRequest();
+
        text = text.trim();

        if (!text && files.length === 0) {
@@ -472,7 +480,8 @@ const ChatBox = (
            generatingMessage: (e) => generatingMessage({ ...e, autoTTSResponse }),
            variables
          });
-          setValue('variables', newVariables || []);
+
+          newVariables && setValue('variables', newVariables);

          isNewChatReplace.current = isNewChat;

@@ -540,6 +549,7 @@ const ChatBox = (
      })();
    },
    [
+      abortRequest,
      chatHistories,
      createQuestionGuide,
      finishSegmentedAudio,
@@ -710,7 +720,7 @@ const ChatBox = (
        });
      };
    },
-    [appId, chatId, feedbackType, teamId, teamToken]
+    [appId, chatId, feedbackType, setChatHistories, teamId, teamToken]
  );
  const onADdUserDislike = useCallback(
    (chat: ChatSiteItemType) => {
@@ -747,7 +757,7 @@ const ChatBox = (
        return () => setFeedbackId(chat.dataId);
      }
    },
-    [appId, chatId, feedbackType, outLinkUid, shareId, teamId, teamToken]
+    [appId, chatId, feedbackType, outLinkUid, setChatHistories, shareId, teamId, teamToken]
  );
  const onReadUserDislike = useCallback(
    (chat: ChatSiteItemType) => {
@@ -868,6 +878,7 @@ const ChatBox = (
      setValue('variables', e || defaultVal);
    },
    resetHistory(e) {
+      abortRequest();
      setValue('chatStarted', e.length > 0);
      setChatHistories(e);
    },
--- a/projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse/ListItem.tsx
+++ b/projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse/ListItem.tsx
@@ -1,5 +1,8 @@
 import { Box, Button, Flex } from '@chakra-ui/react';
-import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
+import {
+  DraggableProvided,
+  DraggableStateSnapshot
+} from '@fastgpt/web/components/common/DndDrag/index';
 import Container from '../../components/Container';
 import { DragHandleIcon, MinusIcon, SmallAddIcon } from '@chakra-ui/icons';
 import { IfElseListItemType } from '@fastgpt/global/core/workflow/template/system/ifElse/type';
@@ -25,6 +28,7 @@ import { getElseIFLabel, getHandleId } from '@fastgpt/global/core/workflow/utils
 import { SourceHandle } from '../render/Handle';
 import { Position, useReactFlow } from 'reactflow';
 import { getReferenceDataValueType } from '@/web/core/workflow/utils';
+import DragIcon from '@fastgpt/web/components/common/DndDrag/DragIcon';

 const ListItem = ({
  provided,
@@ -63,11 +67,7 @@ const ListItem = ({
      >
        <Container w={snapshot.isDragging ? '' : 'full'} className="nodrag">
          <Flex mb={4} alignItems={'center'}>
-            {ifElseList.length > 1 && (
-              <Box {...provided.dragHandleProps}>
-                <DragHandleIcon color={'blackAlpha.600'} />
-              </Box>
-            )}
+            {ifElseList.length > 1 && <DragIcon provided={provided} />}
            <Box color={'black'} fontSize={'lg'} ml={2}>
              {getElseIFLabel(conditionIndex)}
            </Box>
--- a/projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse/index.tsx
+++ b/projects/app/src/components/core/workflow/Flow/nodes/NodeIfElse/index.tsx
@@ -9,7 +9,7 @@ import { IfElseListItemType } from '@fastgpt/global/core/workflow/template/syste
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../../context';
 import Container from '../../components/Container';
-import { DragDropContext, DragStart, Draggable, DropResult, Droppable } from 'react-beautiful-dnd';
+import DndDrag, { Draggable, DropResult } from '@fastgpt/web/components/common/DndDrag/index';
 import { SourceHandle } from '../render/Handle';
 import { getHandleId } from '@fastgpt/global/core/workflow/utils';
 import ListItem from './ListItem';
@@ -20,8 +20,6 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
  const { nodeId, inputs = [] } = data;
  const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);

-  const [draggingItemHeight, setDraggingItemHeight] = useState(0);
-
  const ifElseList = useMemo(
    () =>
      (inputs.find((input) => input.key === NodeInputKeyEnum.ifElseList)
@@ -47,73 +45,49 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
    [inputs, nodeId, onChangeNode]
  );

-  const reorder = (list: IfElseListItemType[], startIndex: number, endIndex: number) => {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-
-    return result;
-  };
-
-  const onDragStart = (start: DragStart) => {
-    const draggingNode = document.querySelector(`[data-rbd-draggable-id="${start.draggableId}"]`);
-    setDraggingItemHeight(draggingNode?.getBoundingClientRect().height || 0);
-  };
-
-  const onDragEnd = (result: DropResult) => {
-    if (!result.destination) {
-      return;
-    }
-    const newList = reorder(ifElseList, result.source.index, result.destination.index);
-
-    onUpdateIfElseList(newList);
-    setDraggingItemHeight(0);
-  };
-
  return (
    <NodeCard selected={selected} maxW={'1000px'} {...data}>
-      <Box px={4}>
-        <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
-          <Droppable
-            droppableId="droppable"
-            renderClone={(provided, snapshot, rubric) => (
-              <ListItem
-                provided={provided}
-                snapshot={snapshot}
-                conditionItem={ifElseList[rubric.source.index]}
-                conditionIndex={rubric.source.index}
-                ifElseList={ifElseList}
-                onUpdateIfElseList={onUpdateIfElseList}
-                nodeId={nodeId}
-              />
-            )}
-          >
-            {(provided, snapshot) => (
-              <Box {...provided.droppableProps} ref={provided.innerRef}>
-                {ifElseList.map((conditionItem, conditionIndex) => (
-                  <Draggable
-                    key={conditionIndex}
-                    draggableId={conditionIndex.toString()}
-                    index={conditionIndex}
-                  >
-                    {(provided, snapshot) => (
-                      <ListItem
-                        provided={provided}
-                        snapshot={snapshot}
-                        conditionItem={conditionItem}
-                        conditionIndex={conditionIndex}
-                        ifElseList={ifElseList}
-                        onUpdateIfElseList={onUpdateIfElseList}
-                        nodeId={nodeId}
-                      />
-                    )}
-                  </Draggable>
-                ))}
-                {snapshot.isDraggingOver && <Box height={draggingItemHeight} />}
-              </Box>
-            )}
-          </Droppable>
-        </DragDropContext>
+      <Box px={4} cursor={'default'}>
+        <DndDrag<IfElseListItemType>
+          onDragEndCb={(list) => onUpdateIfElseList(list)}
+          dataList={ifElseList}
+          renderClone={(provided, snapshot, rubric) => (
+            <ListItem
+              provided={provided}
+              snapshot={snapshot}
+              conditionItem={ifElseList[rubric.source.index]}
+              conditionIndex={rubric.source.index}
+              ifElseList={ifElseList}
+              onUpdateIfElseList={onUpdateIfElseList}
+              nodeId={nodeId}
+            />
+          )}
+        >
+          {(provided) => (
+            <Box {...provided.droppableProps} ref={provided.innerRef}>
+              {ifElseList.map((conditionItem, conditionIndex) => (
+                <Draggable
+                  key={conditionIndex}
+                  draggableId={conditionIndex.toString()}
+                  index={conditionIndex}
+                >
+                  {(provided, snapshot) => (
+                    <ListItem
+                      provided={provided}
+                      snapshot={snapshot}
+                      conditionItem={conditionItem}
+                      conditionIndex={conditionIndex}
+                      ifElseList={ifElseList}
+                      onUpdateIfElseList={onUpdateIfElseList}
+                      nodeId={nodeId}
+                    />
+                  )}
+                </Draggable>
+              ))}
+            </Box>
+          )}
+        </DndDrag>
+
        <Container position={'relative'}>
          <Flex alignItems={'center'}>
            <Box color={'black'} fontSize={'lg'} ml={2}>
--- a/projects/app/src/pages/api/v1/chat/completions.ts
+++ b/projects/app/src/pages/api/v1/chat/completions.ts
@@ -45,7 +45,6 @@ import { DispatchNodeResponseKeyEnum } from '@fastgpt/global/core/workflow/runti
 import { dispatchWorkFlowV1 } from '@fastgpt/service/core/workflow/dispatchV1';
 import { setEntryEntries } from '@fastgpt/service/core/workflow/dispatchV1/utils';
 import { NextAPI } from '@/service/middle/entry';
-import { MongoAppVersion } from '@fastgpt/service/core/app/versionSchema';
 import { getAppLatestVersion } from '@fastgpt/service/core/app/controller';

 type FastGptWebChatProps = {
--- a/projects/app/src/pages/app/detail/components/FlowEdit/index.tsx
+++ b/projects/app/src/pages/app/detail/components/FlowEdit/index.tsx
@@ -28,7 +28,7 @@ const Render = ({ app, onClose }: Props) => {
  useEffect(() => {
    if (!isV2Workflow) return;
    initData(JSON.parse(workflowStringData));
-  }, [isV2Workflow, initData, workflowStringData]);
+  }, [isV2Workflow, initData, app._id]);

  useEffect(() => {
    if (!isV2Workflow) {
--- a/projects/app/src/pages/chat/share.tsx
+++ b/projects/app/src/pages/chat/share.tsx
@@ -99,8 +99,8 @@ const OutLink = ({
        data: {
          messages: prompts,
          variables: {
-            ...customVariables,
-            ...variables
+            ...variables,
+            ...customVariables
          },
          shareId,
          chatId: completionChatId,