fix node variable update render (#5251)

* fix node variable update render

* editor value formatted

* fix

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}

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;
 };
 

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 & {

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) => (
+            {externalVariableList.map((item) => {
-              <LabelAndFormRender
+              return (
-                {...item}
+                <LabelAndFormRender
-                key={item.key}
+                  {...item}
-                formKey={`variables.${item.key}`}
+                  key={item.key}
-                placeholder={item.description}
+                  formKey={`variables.${item.key}`}
-                inputType={variableInputTypeToInputType(item.type)}
+                  placeholder={item.description}
-                variablesForm={variablesForm}
+                  inputType={variableInputTypeToInputType(item.type, item.valueType)}
-                bg={'myGray.50'}
+                  variablesForm={variablesForm}
-              />
+                  bg={'myGray.50'}
-            ))}
+                />
+              );
+            })}
             {variableList.length === 0 && !chatStarted && (
               <Button
                 leftIcon={<MyIcon name={'core/chat/chatFill'} w={'16px'} />}

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'
+}

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>
           )}

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>

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

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}
       />
     )

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}
                   />
                 )}

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>

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>