diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
index c48833a640..86141eb055 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
@@ -36,21 +36,24 @@ type Props = {
   value: Record<string, any>
   onChange: (val: Record<string, any>) => void
   schemas: any[]
-  nodeOutputVars: NodeOutPutVar[]
-  availableNodes: Node[]
-  nodeId: string
+  nodeOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  nodeId?: string
+  disableVariableReference?: boolean
 }
 
 const ReasoningConfigForm: React.FC<Props> = ({
   value,
   onChange,
   schemas,
-  nodeOutputVars,
-  availableNodes,
+  nodeOutputVars = [],
+  availableNodes = [],
   nodeId,
+  disableVariableReference = false,
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
+  const allowVariableReference = !disableVariableReference && !!nodeId
   const getVarKindType = (type: FormTypeEnum) => {
     if (type === FormTypeEnum.file || type === FormTypeEnum.files)
       return VarKindType.variable
@@ -173,7 +176,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
     const isModelSelector = type === FormTypeEnum.modelSelector
     const showTypeSwitch = isNumber || isObject || isArray
     const isConstant = varInput?.type === VarKindType.constant || !varInput?.type
-    const showVariableSelector = isFile || varInput?.type === VarKindType.variable
+    const showVariableSelector = allowVariableReference && (isFile || varInput?.type === VarKindType.variable)
     const targetVarType = () => {
       if (isString)
         return VarType.string
@@ -252,7 +255,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
             {showTypeSwitch && (
               <FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange(variable, defaultValue)} />
             )}
-            {isString && (
+            {isString && allowVariableReference && (
               <MixedVariableTextInput
                 value={varInput?.value as string || ''}
                 onChange={handleValueChange(variable, type)}
@@ -260,6 +263,14 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 availableNodes={availableNodes}
               />
             )}
+            {isString && !allowVariableReference && (
+              <Input
+                className="h-8 grow"
+                value={varInput?.value || ''}
+                onChange={e => handleValueChange(variable, type)(e.target.value)}
+                placeholder={placeholder?.[language] || placeholder?.en_US}
+              />
+            )}
             {isNumber && isConstant && (
               <Input
                 className="h-8 grow"
@@ -328,7 +339,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 className="h-8 grow"
                 readonly={false}
                 isShowNodeName
-                nodeId={nodeId}
+                nodeId={nodeId || ''}
                 value={varInput?.value || []}
                 onChange={handleVariableSelectorChange(variable)}
                 filterVar={getFilterVar()}
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
index 419f905fa5..2dfdc32ad3 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -9,7 +9,7 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headless
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
-import { useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import CheckboxList from '@/app/components/base/checkbox-list'
 import Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
@@ -18,6 +18,8 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
+import { WorkflowContext } from '@/app/components/workflow/context'
+import { HooksStoreContext } from '@/app/components/workflow/hooks-store/provider'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
@@ -47,6 +49,87 @@ type Props = {
   disableVariableInsertion?: boolean
 }
 
+type VariableReferenceFieldsProps = {
+  nodeId: string
+  isString: boolean
+  showVariableSelector: boolean
+  readOnly: boolean
+  schema: CredentialFormSchema
+  varInput: ResourceVarInputs[string]
+  targetVarType: string
+  filterVar?: (payload: Var, selector: ValueSelector) => boolean
+  onValueChange: (newValue: any) => void
+  onVariableSelectorChange: (newValue: ValueSelector | string) => void
+  showManageInputField?: boolean
+  onManageInputField?: () => void
+  disableVariableInsertion?: boolean
+  inPanel?: boolean
+  currentTool?: Tool | Event
+  currentProvider?: ToolWithProvider | TriggerWithProvider
+  isFilterFileVar?: boolean
+}
+
+const VariableReferenceFields: FC<VariableReferenceFieldsProps> = ({
+  nodeId,
+  isString,
+  showVariableSelector,
+  readOnly,
+  schema,
+  varInput,
+  targetVarType,
+  filterVar,
+  onValueChange,
+  onVariableSelectorChange,
+  showManageInputField,
+  onManageInputField,
+  disableVariableInsertion,
+  inPanel,
+  currentTool,
+  currentProvider,
+  isFilterFileVar,
+}) => {
+  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: filterVar || (() => true),
+  })
+
+  return (
+    <>
+      {isString && (
+        <MixedVariableTextInput
+          readOnly={readOnly}
+          value={varInput?.value as string || ''}
+          onChange={onValueChange}
+          nodesOutputVars={availableVars}
+          availableNodes={availableNodesWithParent}
+          showManageInputField={showManageInputField}
+          onManageInputField={onManageInputField}
+          disableVariableInsertion={disableVariableInsertion}
+        />
+      )}
+      {showVariableSelector && (
+        <VarReferencePicker
+          zIndex={inPanel ? 1000 : undefined}
+          className="h-8 grow"
+          readonly={readOnly}
+          isShowNodeName
+          nodeId={nodeId}
+          value={varInput?.value || []}
+          onChange={onVariableSelectorChange}
+          filterVar={filterVar}
+          schema={schema}
+          valueTypePlaceHolder={targetVarType}
+          currentTool={currentTool}
+          currentProvider={currentProvider}
+          isFilterFileVar={isFilterFileVar}
+          availableVars={availableVars}
+          availableNodes={availableNodesWithParent}
+        />
+      )}
+    </>
+  )
+}
+
 const FormInputItem: FC<Props> = ({
   readOnly,
   nodeId,
@@ -63,6 +146,9 @@ const FormInputItem: FC<Props> = ({
   disableVariableInsertion = false,
 }) => {
   const language = useLanguage()
+  const hooksStore = useContext(HooksStoreContext)
+  const workflowStore = useContext(WorkflowContext)
+  const canUseWorkflowHooks = !!hooksStore && !!workflowStore
   const [toolsOptions, setToolsOptions] = useState<FormOption[] | null>(null)
   const [isLoadingToolsOptions, setIsLoadingToolsOptions] = useState(false)
 
@@ -89,17 +175,11 @@ const FormInputItem: FC<Props> = ({
   const isDynamicSelect = type === FormTypeEnum.dynamicSelect
   const isAppSelector = type === FormTypeEnum.appSelector
   const isModelSelector = type === FormTypeEnum.modelSelector
-  const showTypeSwitch = isNumber || isBoolean || isObject || isArray || isSelect
+  const showTypeSwitch = canUseWorkflowHooks && (isNumber || isBoolean || isObject || isArray || isSelect)
   const isConstant = varInput?.type === VarKindType.constant || !varInput?.type
-  const showVariableSelector = isFile || varInput?.type === VarKindType.variable
+  const showVariableSelector = canUseWorkflowHooks && (isFile || varInput?.type === VarKindType.variable)
   const isMultipleSelect = multiple && (isSelect || isDynamicSelect)
-
-  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
-    onlyLeafNodeVar: false,
-    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
-    },
-  })
+  const canRenderVariableReference = canUseWorkflowHooks && !!nodeId
 
   const targetVarType = () => {
     if (isString)
@@ -327,16 +407,34 @@ const FormInputItem: FC<Props> = ({
       {showTypeSwitch && (
         <FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange} />
       )}
-      {isString && (
-        <MixedVariableTextInput
-          readOnly={readOnly}
+      {isString && !canRenderVariableReference && (
+        <Input
+          className="h-8 grow"
           value={varInput?.value as string || ''}
-          onChange={handleValueChange}
-          nodesOutputVars={availableVars}
-          availableNodes={availableNodesWithParent}
+          onChange={e => handleValueChange(e.target.value)}
+          placeholder={placeholder?.[language] || placeholder?.en_US}
+          disabled={readOnly}
+        />
+      )}
+      {canRenderVariableReference && (
+        <VariableReferenceFields
+          nodeId={nodeId}
+          isString={isString}
+          showVariableSelector={showVariableSelector}
+          readOnly={readOnly}
+          schema={schema}
+          varInput={varInput}
+          targetVarType={targetVarType()}
+          filterVar={getFilterVar()}
+          onValueChange={handleValueChange}
+          onVariableSelectorChange={newValue => handleVariableSelectorChange(newValue, variable)}
           showManageInputField={showManageInputField}
           onManageInputField={onManageInputField}
           disableVariableInsertion={disableVariableInsertion}
+          inPanel={inPanel}
+          currentTool={currentTool}
+          currentProvider={currentProvider}
+          isFilterFileVar={isBoolean}
         />
       )}
       {isNumber && isConstant && (
@@ -572,23 +670,6 @@ const FormInputItem: FC<Props> = ({
           scope={scope}
         />
       )}
-      {showVariableSelector && (
-        <VarReferencePicker
-          zIndex={inPanel ? 1000 : undefined}
-          className="h-8 grow"
-          readonly={readOnly}
-          isShowNodeName
-          nodeId={nodeId}
-          value={varInput?.value || []}
-          onChange={value => handleVariableSelectorChange(value, variable)}
-          filterVar={getFilterVar()}
-          schema={schema}
-          valueTypePlaceHolder={targetVarType()}
-          currentTool={currentTool}
-          currentProvider={currentProvider}
-          isFilterFileVar={isBoolean}
-        />
-      )}
     </div>
   )
 }
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
index 462fb421e5..41d865e449 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
@@ -240,8 +240,6 @@ const ToolBlockComponent: FC<ToolBlockComponentProps> = ({
                   value={toolValue}
                   onChange={handleToolValueChange}
                   nodeId={undefined}
-                  nodeOutputVars={[]}
-                  availableNodes={[]}
                 />
               </>
             )}
diff --git a/web/app/components/workflow/skill/editor/skill-editor/tool-setting/tool-settings-section.tsx b/web/app/components/workflow/skill/editor/skill-editor/tool-setting/tool-settings-section.tsx
index 260bed4bc3..d7117dac0e 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/tool-setting/tool-settings-section.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/tool-setting/tool-settings-section.tsx
@@ -1,26 +1,23 @@
 'use client'
 
 import type { FC } from 'react'
-import type { Node } from 'reactflow'
 import type { Tool } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
-import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
 import * as React from 'react'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
-import TabSlider from '@/app/components/base/tab-slider-plain'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
-import { getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
+import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import { VarKindType } from '@/app/components/workflow/nodes/_base/types'
 
 type ToolSettingsSectionProps = {
   currentProvider?: ToolWithProvider
   currentTool?: Tool
   value?: ToolValue
   nodeId?: string
-  nodeOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
   onChange?: (value: ToolValue) => void
 }
 
@@ -29,12 +26,9 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
   currentTool,
   value,
   nodeId,
-  nodeOutputVars = [],
-  availableNodes = [],
   onChange,
 }) => {
   const { t } = useTranslation()
-  const [currType, setCurrType] = useState<'settings' | 'params'>('settings')
   const safeNodeId = nodeId ?? ''
 
   const currentToolSettings = useMemo(() => {
@@ -52,17 +46,12 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
   const paramsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolParams), [currentToolParams])
 
   const allowReasoning = !!safeNodeId
-  const showTabSlider = allowReasoning && currentToolSettings.length > 0 && currentToolParams.length > 0
-  const userSettingsOnly = currentToolSettings.length > 0 && (!allowReasoning || !currentToolParams.length)
-  const reasoningConfigOnly = allowReasoning && currentToolParams.length > 0 && currentToolSettings.length === 0
-
   const handleSettingsFormChange = (v: Record<string, any>) => {
     if (!value || !onChange)
       return
-    const newValue = getStructureValue(v)
     onChange({
       ...value,
-      settings: newValue,
+      settings: v,
     })
   }
 
@@ -81,40 +70,51 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
   if (!currentToolSettings.length && !currentToolParams.length)
     return null
 
+  const showSettingsSection = currentToolSettings.length > 0
+  const showParamsSection = allowReasoning && currentToolParams.length > 0
+  const getVarKindType = (type: FormTypeEnum) => {
+    if (type === FormTypeEnum.file || type === FormTypeEnum.files)
+      return VarKindType.variable
+    if (type === FormTypeEnum.select || type === FormTypeEnum.checkbox || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
+      return VarKindType.constant
+    if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
+      return VarKindType.mixed
+    return VarKindType.constant
+  }
+  const getSafeConfigValue = (rawValue: Record<string, any> | undefined, schemas: any[]) => {
+    const nextValue = { ...(rawValue || {}) }
+    schemas.forEach((schema) => {
+      if (!nextValue[schema.variable]) {
+        nextValue[schema.variable] = {
+          auto: 0,
+          value: {
+            type: getVarKindType(schema.type as FormTypeEnum),
+            value: schema.default ?? null,
+          },
+        }
+        return
+      }
+      if (nextValue[schema.variable].auto === undefined)
+        nextValue[schema.variable].auto = 0
+      if (nextValue[schema.variable].value === undefined) {
+        nextValue[schema.variable].value = {
+          type: getVarKindType(schema.type as FormTypeEnum),
+          value: schema.default ?? null,
+        }
+      }
+    })
+    return nextValue
+  }
+
   return (
     <>
       <Divider className="my-1 w-full" />
-      {/* tabs */}
-      {showTabSlider && (
-        <TabSlider
-          className="mt-1 shrink-0 px-4"
-          itemClassName="py-3"
-          noBorderBottom
-          smallItem
-          value={currType}
-          onChange={(value) => {
-            setCurrType(value as 'settings' | 'params')
-          }}
-          options={[
-            { value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
-            { value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
-          ]}
-        />
-      )}
-      {showTabSlider && currType === 'params' && (
-        <div className="px-4 py-2">
-          <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}</div>
-          <div className="system-xs-regular text-text-tertiary">{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}</div>
-        </div>
-      )}
-      {/* user settings only */}
-      {userSettingsOnly && (
+      {showSettingsSection && (
         <div className="p-4 pb-1">
           <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.settings', { ns: 'plugin' })}</div>
         </div>
       )}
-      {/* reasoning config only */}
-      {reasoningConfigOnly && (
+      {showParamsSection && (
         <div className="mb-1 p-4 pb-1">
           <div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.params', { ns: 'plugin' })}</div>
           <div className="pb-1">
@@ -123,28 +123,22 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
           </div>
         </div>
       )}
-      {/* user settings form */}
-      {(currType === 'settings' || userSettingsOnly) && (
-        <div className="px-4 py-2">
-          <ToolForm
-            inPanel
-            readOnly={false}
-            nodeId={safeNodeId}
-            schema={settingsFormSchemas as any}
-            value={getPlainValue(value?.settings || {})}
-            onChange={handleSettingsFormChange}
-          />
-        </div>
-      )}
-      {/* reasoning config form */}
-      {allowReasoning && (currType === 'params' || reasoningConfigOnly) && (
+      {showSettingsSection && (
         <ReasoningConfigForm
-          value={value?.parameters || {}}
+          value={getSafeConfigValue(value?.settings, settingsFormSchemas)}
+          onChange={handleSettingsFormChange}
+          schemas={settingsFormSchemas as any}
+          nodeId={safeNodeId}
+          disableVariableReference
+        />
+      )}
+      {showParamsSection && (
+        <ReasoningConfigForm
+          value={getSafeConfigValue(value?.parameters, paramsFormSchemas)}
           onChange={handleParamsFormChange}
           schemas={paramsFormSchemas as any}
-          nodeOutputVars={nodeOutputVars}
-          availableNodes={availableNodes}
           nodeId={safeNodeId}
+          disableVariableReference
         />
       )}
     </>