refactor(workflow): improve loading state rendering and enhance control prompt editor re-rendering logic

web/app/components/tools/utils/to-form-schema.ts

@@ -153,7 +153,7 @@ export const getConfiguredValue = (value: Record<string, any>, formSchemas: { va
       const value = formSchema.default
       newValues[formSchema.variable] = {
         type: 'constant',
-        value: formSchema.default,
+        value: typeof formSchema.default === 'string' ? formSchema.default.replace(/\n/g, '\\n') : formSchema.default,
       }
       newValues[formSchema.variable] = correctInitialData(formSchema.type, newValues[formSchema.variable], value)
     }

web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx

@@ -10,6 +10,7 @@ import type {
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
+import { useStore } from '@/app/components/workflow/store'
 
 type MixedVariableTextInputProps = {
   readOnly?: boolean
@@ -30,8 +31,11 @@ const MixedVariableTextInput = ({
   onManageInputField,
 }: MixedVariableTextInputProps) => {
   const { t } = useTranslation()
+  const controlPromptEditorRerenderKey = useStore(s => s.controlPromptEditorRerenderKey)
+
   return (
     <PromptEditor
+      key={controlPromptEditorRerenderKey}
       wrapperClassName={cn(
         'w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
         'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',

web/app/components/workflow/nodes/tool/panel.tsx

@@ -43,9 +43,11 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
   const { schemaTypeDefinitions } = useMatchSchemaType()
 
   if (isLoading) {
-    return <div className='flex h-[200px] items-center justify-center'>
-      <Loading />
-    </div>
+    return (
+      <div className='flex h-[200px] items-center justify-center'>
+        <Loading />
+      </div>
+    )
   }
 
   return (

web/app/components/workflow/nodes/tool/use-config.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
-import { useStore } from '../../store'
+import { useStore, useWorkflowStore } from '../../store'
 import type { ToolNodeType, ToolVarInputs } from './types'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
@@ -21,6 +21,7 @@ import {
 import { canFindTool } from '@/utils'
 
 const useConfig = (id: string, payload: ToolNodeType) => {
+  const workflowStore = useWorkflowStore()
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { handleFetchAllTools } = useFetchToolsData()
   const { t } = useTranslation()
@@ -146,7 +147,9 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     if (!currTool)
       return
     const inputsWithDefaultValue = formattingParameters()
+    const { setControlPromptEditorRerenderKey } = workflowStore.getState()
     setInputs(inputsWithDefaultValue)
+    setTimeout(() => setControlPromptEditorRerenderKey(Date.now()))
   }, [currTool])
 
   // setting when call