fix node variable update render (#5251)

* fix node variable update render * editor value formatted * fix
2025-07-18 10:03:55 +00:00 · 2025-07-18 15:48:26 +08:00
parent 530f30e3e8
commit 6f75c1b80e
12 changed files with 59 additions and 33 deletions
--- a/packages/web/components/common/Textarea/PromptEditor/index.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/index.tsx
@@ -1,6 +1,6 @@
 import type { BoxProps } from '@chakra-ui/react';
 import { Box, Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { editorStateToText } from './utils';
 import Editor from './Editor';
 import MyModal from '../../MyModal';
@@ -58,6 +58,12 @@ const PromptEditor = ({
    },
    [onBlur]
  );
+  const formattedValue = useMemo(() => {
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return value;
+  }, [value]);

  return (
    <>
@@ -70,7 +76,7 @@ const PromptEditor = ({
          minH={minH}
          maxH={maxH}
          maxLength={maxLength}
-          value={value}
+          value={formattedValue}
          onChange={onChangeInput}
          onBlur={onBlurInput}
          placeholder={placeholder}
--- a/projects/app/src/components/core/app/formRender/utils.ts
+++ b/projects/app/src/components/core/app/formRender/utils.ts
@@ -6,11 +6,15 @@ import { InputTypeEnum } from './constant';
 import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
 import type { InputConfigType } from '@fastgpt/global/core/workflow/type/io';

-export const variableInputTypeToInputType = (inputType: VariableInputEnum) => {
+export const variableInputTypeToInputType = (
+  inputType: VariableInputEnum,
+  valueType?: WorkflowIOValueTypeEnum
+) => {
  if (inputType === VariableInputEnum.input) return InputTypeEnum.input;
  if (inputType === VariableInputEnum.textarea) return InputTypeEnum.textarea;
  if (inputType === VariableInputEnum.numberInput) return InputTypeEnum.numberInput;
  if (inputType === VariableInputEnum.select) return InputTypeEnum.select;
+  if (inputType === VariableInputEnum.custom) return valueTypeToInputType(valueType);
  return InputTypeEnum.JSONEditor;
 };

--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Provider.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Provider.tsx
@@ -23,13 +23,14 @@ import { getChatResData } from '@/web/core/chat/api';
 import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
 import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext';
 import { useCreation } from 'ahooks';
+import type { ChatTypeEnum } from './constants';

 export type ChatProviderProps = {
  appId: string;
  chatId: string;
  outLinkAuthData?: OutLinkChatAuthProps;

-  chatType: 'log' | 'chat' | 'share' | 'team';
+  chatType: ChatTypeEnum;
 };

 type useChatStoreType = ChatProviderProps & {
@@ -130,7 +131,7 @@ const Provider = ({
  appId,
  chatId,
  outLinkAuthData,
-  chatType = 'chat',
+  chatType,
  children,
  ...props
 }: ChatProviderProps & {
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInputForm.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInputForm.tsx
@@ -79,17 +79,19 @@ const VariableInput = ({
              <MyIcon name={'common/info'} color={'primary.600'} w={4} />
              {t('chat:variable_invisable_in_share')}
            </Flex>
-            {externalVariableList.map((item) => (
-              <LabelAndFormRender
-                {...item}
-                key={item.key}
-                formKey={`variables.${item.key}`}
-                placeholder={item.description}
-                inputType={variableInputTypeToInputType(item.type)}
-                variablesForm={variablesForm}
-                bg={'myGray.50'}
-              />
-            ))}
+            {externalVariableList.map((item) => {
+              return (
+                <LabelAndFormRender
+                  {...item}
+                  key={item.key}
+                  formKey={`variables.${item.key}`}
+                  placeholder={item.description}
+                  inputType={variableInputTypeToInputType(item.type, item.valueType)}
+                  variablesForm={variablesForm}
+                  bg={'myGray.50'}
+                />
+              );
+            })}
            {variableList.length === 0 && !chatStarted && (
              <Button
                leftIcon={<MyIcon name={'core/chat/chatFill'} w={'16px'} />}
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/constants.ts
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/constants.ts
@@ -17,3 +17,10 @@ export enum FeedbackTypeEnum {
  admin = 'admin',
  hidden = 'hidden'
 }
+
+export enum ChatTypeEnum {
+  chat = 'chat',
+  log = 'log',
+  share = 'share',
+  team = 'team'
+}
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx
@@ -47,7 +47,7 @@ import {
  formatChatValue2InputType,
  setUserSelectResultToHistories
 } from './utils';
-import { textareaMinH } from './constants';
+import { ChatTypeEnum, textareaMinH } from './constants';
 import { SseResponseEventEnum } from '@fastgpt/global/core/workflow/runtime/constants';
 import ChatProvider, { ChatBoxContext, type ChatProviderProps } from './Provider';

@@ -155,7 +155,7 @@ const ChatBox = ({
  const isInteractive = useMemo(() => checkIsInteractiveByHistories(chatRecords), [chatRecords]);

  const externalVariableList = useMemo(() => {
-    if (chatType === 'chat') {
+    if ([ChatTypeEnum.log, ChatTypeEnum.chat].includes(chatType)) {
      return allVariableList.filter((item) => item.type === VariableInputEnum.custom);
    }
    return [];
@@ -972,7 +972,7 @@ const ChatBox = ({
              <VariableInputForm
                chatStarted={chatStarted}
                chatForm={chatForm}
-                showExternalVariables={chatType === 'chat'}
+                showExternalVariables={[ChatTypeEnum.log, ChatTypeEnum.chat].includes(chatType)}
              />
            </Box>
          )}
--- a/projects/app/src/pageComponents/app/detail/Logs/DetailLogsModal.tsx
+++ b/projects/app/src/pageComponents/app/detail/Logs/DetailLogsModal.tsx
@@ -20,6 +20,7 @@ import ChatRecordContextProvider, {
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useContextSelector } from 'use-context-selector';
 import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList';
+import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';

 const PluginRunBox = dynamic(() => import('@/components/core/chat/ChatContainer/PluginRunBox'));
 const ChatBox = dynamic(() => import('@/components/core/chat/ChatContainer/ChatBox'));
@@ -164,7 +165,7 @@ const DetailLogsModal = ({ appId, chatId, onClose }: Props) => {
                feedbackType={'admin'}
                showMarkIcon
                showVoiceIcon={false}
-                chatType="log"
+                chatType={ChatTypeEnum.log}
              />
            )}
          </Box>
--- a/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeVariableUpdate.tsx
+++ b/projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeVariableUpdate.tsx
@@ -31,6 +31,7 @@ import { WorkflowNodeEdgeContext } from '../../context/workflowInitContext';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import InputRender from '@/components/core/app/formRender';
 import { valueTypeToInputType } from '@/components/core/app/formRender/utils';
+import { isValidReferenceValueFormat } from '@fastgpt/global/core/workflow/utils';

 const NodeVariableUpdate = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
  const { inputs = [], nodeId } = data;
@@ -110,19 +111,19 @@ const NodeVariableUpdate = ({ data, selected }: NodeProps<FlowNodeItemType>) =>
        (item) => item.renderType === updateItem.renderType
      );

-      const onUpdateNewValue = (newValue?: ReferenceValueType | string) => {
-        if (typeof newValue === 'string') {
-          onUpdateList(
-            updateList.map((update, i) =>
-              i === index ? { ...update, value: ['', newValue] } : update
-            )
-          );
-        } else if (newValue) {
+      const onUpdateNewValue = (newValue: any) => {
+        if (isValidReferenceValueFormat(newValue)) {
          onUpdateList(
            updateList.map((update, i) =>
              i === index ? { ...update, value: newValue as ReferenceItemValueType } : update
            )
          );
+        } else {
+          onUpdateList(
+            updateList.map((update, i) =>
+              i === index ? { ...update, value: ['', newValue] } : update
+            )
+          );
        }
      };

@@ -224,7 +225,7 @@ const NodeVariableUpdate = ({ data, selected }: NodeProps<FlowNodeItemType>) =>
              const inputValue = isArray(updateItem.value?.[1]) ? '' : updateItem.value?.[1];

              return (
-                <Box w={'300px'} bg={'white'} borderRadius={'sm'}>
+                <Box w={'300px'} borderRadius={'sm'}>
                  <InputRender
                    inputType={valueTypeToInputType(valueType)}
                    value={inputValue || ''}
--- a/projects/app/src/pageComponents/app/detail/useChatTest.tsx
+++ b/projects/app/src/pageComponents/app/detail/useChatTest.tsx
@@ -18,6 +18,7 @@ import { ChatItemContext } from '@/web/core/chat/context/chatItemContext';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { getInitChatInfo } from '@/web/core/chat/api';
 import { useTranslation } from 'next-i18next';
+import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';

 const PluginRunBox = dynamic(() => import('@/components/core/chat/ChatContainer/PluginRunBox'));

@@ -140,7 +141,7 @@ export const useChatTest = ({
        appId={appId}
        chatId={chatId}
        showMarkIcon
-        chatType={'chat'}
+        chatType={ChatTypeEnum.chat}
        onStartChat={startChat}
      />
    )
--- a/projects/app/src/pages/chat/index.tsx
+++ b/projects/app/src/pages/chat/index.tsx
@@ -37,6 +37,7 @@ import ChatRecordContextProvider, {
  ChatRecordContext
 } from '@/web/core/chat/context/chatRecordContext';
 import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList';
+import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';

 const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));

@@ -212,7 +213,7 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
                    showEmptyIntro
                    feedbackType={'user'}
                    onStartChat={onStartChat}
-                    chatType={'chat'}
+                    chatType={ChatTypeEnum.chat}
                    isReady={!loading}
                  />
                )}
--- a/projects/app/src/pages/chat/share.tsx
+++ b/projects/app/src/pages/chat/share.tsx
@@ -39,6 +39,7 @@ import { useI18nLng } from '@fastgpt/web/hooks/useI18n';
 import { type AppSchema } from '@fastgpt/global/core/app/type';
 import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList';
 import { useToast } from '@fastgpt/web/hooks/useToast';
+import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';

 const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));

@@ -294,7 +295,7 @@ const OutLink = (props: Props) => {
                      outLinkAuthData={outLinkAuthData}
                      feedbackType={'user'}
                      onStartChat={startChat}
-                      chatType="share"
+                      chatType={ChatTypeEnum.share}
                    />
                  )}
                </Box>
--- a/projects/app/src/pages/chat/team.tsx
+++ b/projects/app/src/pages/chat/team.tsx
@@ -34,6 +34,7 @@ import { useChatStore } from '@/web/core/chat/context/useChatStore';
 import { useMount } from 'ahooks';
 import { ChatSourceEnum } from '@fastgpt/global/core/chat/constants';
 import ChatQuoteList from '@/pageComponents/chat/ChatQuoteList';
+import { ChatTypeEnum } from '@/components/core/chat/ChatContainer/ChatBox/constants';
 const CustomPluginRunBox = dynamic(() => import('@/pageComponents/chat/CustomPluginRunBox'));

 type Props = { appId: string; chatId: string; teamId: string; teamToken: string };
@@ -228,7 +229,7 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
                    outLinkAuthData={outLinkAuthData}
                    feedbackType={'user'}
                    onStartChat={startChat}
-                    chatType="team"
+                    chatType={ChatTypeEnum.team}
                  />
                )}
              </Box>