Feat: conversation variable & variable assigner node (#7222)

Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: -LAN- <laipz8200@outlook.com>
2024-08-13 14:44:10 +08:00
parent 8b55bd5828
commit 935e72d449
128 changed files with 3354 additions and 683 deletions
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -0,0 +1,72 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import produce from 'immer'
+import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  isString: boolean
+  list: any[]
+  onChange: (list: any[]) => void
+}
+
+const ArrayValueList: FC<Props> = ({
+  isString = true,
+  list,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const handleNameChange = useCallback((index: number) => {
+    return (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newList = produce(list, (draft: any[]) => {
+        draft[index] = isString ? e.target.value : Number(e.target.value)
+      })
+      onChange(newList)
+    }
+  }, [isString, list, onChange])
+
+  const handleItemRemove = useCallback((index: number) => {
+    return () => {
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleItemAdd = useCallback(() => {
+    const newList = produce(list, (draft: any[]) => {
+      draft.push(undefined)
+    })
+    onChange(newList)
+  }, [list, onChange])
+
+  return (
+    <div className='w-full space-y-2'>
+      {list.map((item, index) => (
+        <div className='flex items-center space-x-1' key={index}>
+          <input
+            className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+            placeholder={t('workflow.chatVariable.modal.arrayValue') || ''}
+            value={list[index]}
+            onChange={handleNameChange(index)}
+            type={isString ? 'text' : 'number'}
+          />
+          <RemoveButton
+            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+            onClick={handleItemRemove(index)}
+          />
+        </div>
+      ))}
+      <Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
+        <RiAddLine className='mr-1 w-4 h-4' />
+        <span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
+      </Button>
+    </div>
+  )
+}
+export default React.memo(ArrayValueList)
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx
@@ -0,0 +1,135 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import { useContext } from 'use-context-selector'
+import { ToastContext } from '@/app/components/base/toast'
+import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
+import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
+import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
+
+type Props = {
+  index: number
+  list: any[]
+  onChange: (list: any[]) => void
+}
+
+const typeList = [
+  ChatVarType.String,
+  ChatVarType.Number,
+]
+
+export const DEFAULT_OBJECT_VALUE = {
+  key: '',
+  type: ChatVarType.String,
+  value: undefined,
+}
+
+const ObjectValueItem: FC<Props> = ({
+  index,
+  list,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const [isFocus, setIsFocus] = useState(false)
+
+  const handleKeyChange = useCallback((index: number) => {
+    return (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newList = produce(list, (draft: any[]) => {
+        if (!/^[a-zA-Z0-9_]+$/.test(e.target.value))
+          return notify({ type: 'error', message: 'key is can only contain letters, numbers and underscores' })
+        draft[index].key = e.target.value
+      })
+      onChange(newList)
+    }
+  }, [list, notify, onChange])
+
+  const handleTypeChange = useCallback((index: number) => {
+    return (type: ChatVarType) => {
+      const newList = produce(list, (draft) => {
+        draft[index].type = type
+        if (type === ChatVarType.Number)
+          draft[index].value = isNaN(Number(draft[index].value)) ? undefined : Number(draft[index].value)
+        else
+          draft[index].value = draft[index].value ? String(draft[index].value) : undefined
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleValueChange = useCallback((index: number) => {
+    return (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newList = produce(list, (draft: any[]) => {
+        draft[index].value = draft[index].type === ChatVarType.String ? e.target.value : isNaN(Number(e.target.value)) ? undefined : Number(e.target.value)
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleItemRemove = useCallback((index: number) => {
+    return () => {
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleItemAdd = useCallback(() => {
+    const newList = produce(list, (draft: any[]) => {
+      draft.push(DEFAULT_OBJECT_VALUE)
+    })
+    onChange(newList)
+  }, [list, onChange])
+
+  const handleFocusChange = useCallback(() => {
+    setIsFocus(true)
+    if (index === list.length - 1)
+      handleItemAdd()
+  }, [handleItemAdd, index, list.length])
+
+  return (
+    <div className='group flex border-t border-gray-200'>
+      {/* Key */}
+      <div className='w-[120px] border-r border-gray-200'>
+        <input
+          className='block px-2 w-full h-7 text-text-secondary system-xs-regular appearance-none outline-none caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active  placeholder:system-xs-regular placeholder:text-components-input-text-placeholder'
+          placeholder={t('workflow.chatVariable.modal.objectKey') || ''}
+          value={list[index].key}
+          onChange={handleKeyChange(index)}
+        />
+      </div>
+      {/* Type */}
+      <div className='w-[96px] border-r border-gray-200'>
+        <VariableTypeSelector
+          inCell
+          value={list[index].type}
+          list={typeList}
+          onSelect={handleTypeChange(index)}
+          popupClassName='w-[120px]'
+        />
+      </div>
+      {/* Value */}
+      <div className='relative w-[230px]'>
+        <input
+          className='block px-2 w-full h-7 text-text-secondary system-xs-regular appearance-none outline-none caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active  placeholder:system-xs-regular placeholder:text-components-input-text-placeholder'
+          placeholder={t('workflow.chatVariable.modal.objectValue') || ''}
+          value={list[index].value}
+          onChange={handleValueChange(index)}
+          onFocus={() => handleFocusChange()}
+          onBlur={() => setIsFocus(false)}
+          type={list[index].type === ChatVarType.Number ? 'number' : 'text'}
+        />
+        {list.length > 1 && !isFocus && (
+          <RemoveButton
+            className='z-10 group-hover:block hidden absolute right-1 top-0.5'
+            onClick={handleItemRemove(index)}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(ObjectValueItem)
--- a/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx
@@ -0,0 +1,36 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import ObjectValueItem from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
+
+type Props = {
+  list: any[]
+  onChange: (list: any[]) => void
+}
+
+const ObjectValueList: FC<Props> = ({
+  list,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='w-full border border-gray-200 rounded-lg overflow-hidden'>
+      <div className='flex items-center h-7 system-xs-medium text-text-tertiary uppercase'>
+        <div className='w-[120px] flex items-center h-full pl-2 border-r border-gray-200'>{t('workflow.chatVariable.modal.objectKey')}</div>
+        <div className='w-[96px] flex items-center h-full pl-2 border-r border-gray-200'>{t('workflow.chatVariable.modal.objectType')}</div>
+        <div className='w-[230px] flex items-center h-full pl-2 pr-1'>{t('workflow.chatVariable.modal.objectValue')}</div>
+      </div>
+      {list.map((item, index) => (
+        <ObjectValueItem
+          key={index}
+          index={index}
+          list={list}
+          onChange={onChange}
+        />
+      ))}
+    </div>
+  )
+}
+export default React.memo(ObjectValueList)
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -0,0 +1,49 @@
+import { memo, useState } from 'react'
+import { capitalize } from 'lodash-es'
+import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
+import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import type { ConversationVariable } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type VariableItemProps = {
+  item: ConversationVariable
+  onEdit: (item: ConversationVariable) => void
+  onDelete: (item: ConversationVariable) => void
+}
+
+const VariableItem = ({
+  item,
+  onEdit,
+  onDelete,
+}: VariableItemProps) => {
+  const [destructive, setDestructive] = useState(false)
+  return (
+    <div className={cn(
+      'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
+    )}>
+      <div className='flex items-center justify-between'>
+        <div className='grow flex gap-1 items-center'>
+          <BubbleX className='w-4 h-4 text-util-colors-teal-teal-700' />
+          <div className='text-text-primary system-sm-medium'>{item.name}</div>
+          <div className='text-text-tertiary system-xs-medium'>{capitalize(item.value_type)}</div>
+        </div>
+        <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
+          <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
+            <RiEditLine className='w-4 h-4' onClick={() => onEdit(item)}/>
+          </div>
+          <div
+            className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'
+            onMouseOver={() => setDestructive(true)}
+            onMouseOut={() => setDestructive(false)}
+          >
+            <RiDeleteBinLine className='w-4 h-4' onClick={() => onDelete(item)}/>
+          </div>
+        </div>
+      </div>
+      <div className='text-text-tertiary system-xs-regular truncate'>{item.description}</div>
+    </div>
+  )
+}
+
+export default memo(VariableItem)
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -0,0 +1,69 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { ConversationVariable } from '@/app/components/workflow/types'
+
+type Props = {
+  open: boolean
+  setOpen: (value: React.SetStateAction<boolean>) => void
+  showTip: boolean
+  chatVar?: ConversationVariable
+  onClose: () => void
+  onSave: (env: ConversationVariable) => void
+}
+
+const VariableModalTrigger = ({
+  open,
+  setOpen,
+  showTip,
+  chatVar,
+  onClose,
+  onSave,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={() => {
+        setOpen(v => !v)
+        open && onClose()
+      }}
+      placement='left-start'
+      offset={{
+        mainAxis: 8,
+        alignmentAxis: showTip ? -278 : -48,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => {
+        setOpen(v => !v)
+        open && onClose()
+      }}>
+        <Button variant='primary'>
+          <RiAddLine className='mr-1 w-4 h-4' />
+          <span className='system-sm-medium'>{t('workflow.chatVariable.button')}</span>
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <VariableModal
+          chatVar={chatVar}
+          onSave={onSave}
+          onClose={() => {
+            onClose()
+            setOpen(false)
+          }}
+        />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default VariableModalTrigger
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -0,0 +1,388 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { v4 as uuid4 } from 'uuid'
+import { RiCloseLine, RiDraftLine, RiInputField } from '@remixicon/react'
+import VariableTypeSelector from '@/app/components/workflow/panel/chat-variable-panel/components/variable-type-select'
+import ObjectValueList from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-list'
+import { DEFAULT_OBJECT_VALUE } from '@/app/components/workflow/panel/chat-variable-panel/components/object-value-item'
+import ArrayValueList from '@/app/components/workflow/panel/chat-variable-panel/components/array-value-list'
+import Button from '@/app/components/base/button'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { ToastContext } from '@/app/components/base/toast'
+import { useStore } from '@/app/components/workflow/store'
+import type { ConversationVariable } from '@/app/components/workflow/types'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
+import cn from '@/utils/classnames'
+
+export type ModalPropsType = {
+  chatVar?: ConversationVariable
+  onClose: () => void
+  onSave: (chatVar: ConversationVariable) => void
+}
+
+type ObjectValueItem = {
+  key: string
+  type: ChatVarType
+  value: string | number | undefined
+}
+
+const typeList = [
+  ChatVarType.String,
+  ChatVarType.Number,
+  ChatVarType.Object,
+  ChatVarType.ArrayString,
+  ChatVarType.ArrayNumber,
+  ChatVarType.ArrayObject,
+]
+
+const objectPlaceholder = `#  example
+#  {
+#     "name": "ray",
+#     "age": 20
+#  }`
+const arrayStringPlaceholder = `#  example
+#  [
+#     "value1",
+#     "value2"
+#  ]`
+const arrayNumberPlaceholder = `#  example
+#  [
+#     100,
+#     200
+#  ]`
+const arrayObjectPlaceholder = `#  example
+#  [
+#     {
+#       "name": "ray",
+#       "age": 20
+#     },
+#     {
+#       "name": "lily",
+#       "age": 18
+#     }
+#  ]`
+
+const ChatVariableModal = ({
+  chatVar,
+  onClose,
+  onSave,
+}: ModalPropsType) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const varList = useStore(s => s.conversationVariables)
+  const [name, setName] = React.useState('')
+  const [type, setType] = React.useState<ChatVarType>(ChatVarType.String)
+  const [value, setValue] = React.useState<any>()
+  const [objectValue, setObjectValue] = React.useState<ObjectValueItem[]>([DEFAULT_OBJECT_VALUE])
+  const [editorContent, setEditorContent] = React.useState<string>()
+  const [editInJSON, setEditInJSON] = React.useState(false)
+  const [des, setDes] = React.useState<string>('')
+
+  const editorMinHeight = useMemo(() => {
+    if (type === ChatVarType.ArrayObject)
+      return '240px'
+    return '120px'
+  }, [type])
+  const placeholder = useMemo(() => {
+    if (type === ChatVarType.ArrayString)
+      return arrayStringPlaceholder
+    if (type === ChatVarType.ArrayNumber)
+      return arrayNumberPlaceholder
+    if (type === ChatVarType.ArrayObject)
+      return arrayObjectPlaceholder
+    return objectPlaceholder
+  }, [type])
+  const getObjectValue = useCallback(() => {
+    if (!chatVar)
+      return [DEFAULT_OBJECT_VALUE]
+    return Object.keys(chatVar.value).map((key) => {
+      return {
+        key,
+        type: typeof chatVar.value[key] === 'string' ? ChatVarType.String : ChatVarType.Number,
+        value: chatVar.value[key],
+      }
+    })
+  }, [chatVar])
+  const formatValueFromObject = useCallback((list: ObjectValueItem[]) => {
+    return list.reduce((acc: any, curr) => {
+      if (curr.key)
+        acc[curr.key] = curr.value || null
+      return acc
+    }, {})
+  }, [])
+
+  const formatValue = (value: any) => {
+    switch (type) {
+      case ChatVarType.String:
+        return value || ''
+      case ChatVarType.Number:
+        return value || 0
+      case ChatVarType.Object:
+        return formatValueFromObject(objectValue)
+      case ChatVarType.ArrayString:
+      case ChatVarType.ArrayNumber:
+      case ChatVarType.ArrayObject:
+        return value?.filter(Boolean) || []
+    }
+  }
+
+  const handleNameChange = (v: string) => {
+    if (!v)
+      return setName('')
+    if (!/^[a-zA-Z0-9_]+$/.test(v))
+      return notify({ type: 'error', message: 'name is can only contain letters, numbers and underscores' })
+    if (/^[0-9]/.test(v))
+      return notify({ type: 'error', message: 'name can not start with a number' })
+    setName(v)
+  }
+
+  const handleTypeChange = (v: ChatVarType) => {
+    setValue(undefined)
+    setEditorContent(undefined)
+    if (v === ChatVarType.ArrayObject)
+      setEditInJSON(true)
+    if (v === ChatVarType.String || v === ChatVarType.Number || v === ChatVarType.Object)
+      setEditInJSON(false)
+    setType(v)
+  }
+
+  const handleEditorChange = (editInJSON: boolean) => {
+    if (type === ChatVarType.Object) {
+      if (editInJSON) {
+        const newValue = !objectValue[0].key ? undefined : formatValueFromObject(objectValue)
+        setValue(newValue)
+        setEditorContent(JSON.stringify(newValue))
+      }
+      else {
+        if (!editorContent) {
+          setValue(undefined)
+          setObjectValue([DEFAULT_OBJECT_VALUE])
+        }
+        else {
+          try {
+            const newValue = JSON.parse(editorContent)
+            setValue(newValue)
+            const newObjectValue = Object.keys(newValue).map((key) => {
+              return {
+                key,
+                type: typeof newValue[key] === 'string' ? ChatVarType.String : ChatVarType.Number,
+                value: newValue[key],
+              }
+            })
+            setObjectValue(newObjectValue)
+          }
+          catch (e) {
+            // ignore JSON.parse errors
+          }
+        }
+      }
+    }
+    if (type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber) {
+      if (editInJSON) {
+        const newValue = (value?.length && value.filter(Boolean).length) ? value.filter(Boolean) : undefined
+        setValue(newValue)
+        if (!editorContent)
+          setEditorContent(JSON.stringify(newValue))
+      }
+      else {
+        setValue(value?.length ? value : [undefined])
+      }
+    }
+    setEditInJSON(editInJSON)
+  }
+
+  const handleEditorValueChange = (content: string) => {
+    if (!content) {
+      setEditorContent(content)
+      return setValue(undefined)
+    }
+    else {
+      setEditorContent(content)
+      try {
+        const newValue = JSON.parse(content)
+        setValue(newValue)
+      }
+      catch (e) {
+        // ignore JSON.parse errors
+      }
+    }
+  }
+
+  const handleSave = () => {
+    if (!name)
+      return notify({ type: 'error', message: 'name can not be empty' })
+    if (!chatVar && varList.some(chatVar => chatVar.name === name))
+      return notify({ type: 'error', message: 'name is existed' })
+    // if (type !== ChatVarType.Object && !value)
+    //   return notify({ type: 'error', message: 'value can not be empty' })
+    if (type === ChatVarType.Object && objectValue.some(item => !item.key && !!item.value))
+      return notify({ type: 'error', message: 'object key can not be empty' })
+
+    onSave({
+      id: chatVar ? chatVar.id : uuid4(),
+      name,
+      value_type: type,
+      value: formatValue(value),
+      description: des,
+    })
+    onClose()
+  }
+
+  useEffect(() => {
+    if (chatVar) {
+      setName(chatVar.name)
+      setType(chatVar.value_type)
+      setValue(chatVar.value)
+      setDes(chatVar.description)
+      setEditInJSON(false)
+      setObjectValue(getObjectValue())
+    }
+  }, [chatVar, getObjectValue])
+
+  return (
+    <div
+      className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
+    >
+      <div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'>
+        {!chatVar ? t('workflow.chatVariable.modal.title') : t('workflow.chatVariable.modal.editTitle')}
+        <div className='flex items-center'>
+          <div
+            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            onClick={onClose}
+          >
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='px-4 py-2 max-h-[480px] overflow-y-auto'>
+        {/* name */}
+        <div className='mb-4'>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.name')}</div>
+          <div className='flex'>
+            <input
+              tabIndex={0}
+              className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
+              value={name}
+              onChange={e => handleNameChange(e.target.value)}
+              type='text'
+            />
+          </div>
+        </div>
+        {/* type */}
+        <div className='mb-4'>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.type')}</div>
+          <div className='flex'>
+            <VariableTypeSelector
+              value={type}
+              list={typeList}
+              onSelect={handleTypeChange}
+              popupClassName='w-[327px]'
+            />
+          </div>
+        </div>
+        {/* default value */}
+        <div className='mb-4'>
+          <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold'>
+            <div>{t('workflow.chatVariable.modal.value')}</div>
+            {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber) && (
+              <Button
+                variant='ghost'
+                size='small'
+                className='text-text-tertiary'
+                onClick={() => handleEditorChange(!editInJSON)}
+              >
+                {editInJSON ? <RiInputField className='mr-1 w-3.5 h-3.5' /> : <RiDraftLine className='mr-1 w-3.5 h-3.5' />}
+                {editInJSON ? t('workflow.chatVariable.modal.oneByOne') : t('workflow.chatVariable.modal.editInJSON')}
+              </Button>
+            )}
+            {type === ChatVarType.Object && (
+              <Button
+                variant='ghost'
+                size='small'
+                className='text-text-tertiary'
+                onClick={() => handleEditorChange(!editInJSON)}
+              >
+                {editInJSON ? <RiInputField className='mr-1 w-3.5 h-3.5' /> : <RiDraftLine className='mr-1 w-3.5 h-3.5' />}
+                {editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')}
+              </Button>
+            )}
+          </div>
+          <div className='flex'>
+            {type === ChatVarType.String && (
+              <input
+                className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+                placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
+                value={value}
+                onChange={e => setValue(e.target.value)}
+              />
+            )}
+            {type === ChatVarType.Number && (
+              <input
+                className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+                placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
+                value={value}
+                onChange={e => setValue(Number(e.target.value))}
+                type='number'
+              />
+            )}
+            {type === ChatVarType.Object && !editInJSON && (
+              <ObjectValueList
+                list={objectValue}
+                onChange={setObjectValue}
+              />
+            )}
+            {type === ChatVarType.ArrayString && !editInJSON && (
+              <ArrayValueList
+                isString
+                list={value || [undefined]}
+                onChange={setValue}
+              />
+            )}
+            {type === ChatVarType.ArrayNumber && !editInJSON && (
+              <ArrayValueList
+                isString={false}
+                list={value || [undefined]}
+                onChange={setValue}
+              />
+            )}
+            {editInJSON && (
+              <div className='w-full py-2 pl-3 pr-1 rounded-[10px] bg-components-input-bg-normal' style={{ height: editorMinHeight }}>
+                <CodeEditor
+                  isExpand
+                  noWrapper
+                  language={CodeLanguage.json}
+                  value={editorContent}
+                  placeholder={<div className='whitespace-pre'>{placeholder}</div>}
+                  onChange={handleEditorValueChange}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        {/* description */}
+        <div className=''>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.chatVariable.modal.description')}</div>
+          <div className='flex'>
+            <textarea
+              className='block p-2 w-full h-20 rounded-lg bg-components-input-bg-normal border border-transparent system-sm-regular outline-none appearance-none caret-primary-600 resize-none hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              value={des}
+              placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
+              onChange={e => setDes(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+      <div className='p-4 pt-2 flex flex-row-reverse rounded-b-2xl'>
+        <div className='flex gap-2'>
+          <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+          <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChatVariableModal
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -0,0 +1,66 @@
+'use client'
+import React, { useState } from 'react'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+
+type Props = {
+  inCell?: boolean
+  value?: any
+  list: any
+  onSelect: (value: any) => void
+  popupClassName?: string
+}
+
+const VariableTypeSelector = ({
+  inCell = false,
+  value,
+  list,
+  onSelect,
+  popupClassName,
+}: Props) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={() => setOpen(v => !v)}
+      placement='bottom'
+    >
+      <PortalToFollowElemTrigger className='w-full' onClick={() => setOpen(v => !v)}>
+        <div className={cn(
+          'flex items-center w-full px-2 cursor-pointer',
+          !inCell && 'py-1 bg-components-input-bg-normal hover:bg-state-base-hover-alt radius-md',
+          inCell && 'py-0.5 hover:bg-state-base-hover',
+          open && !inCell && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
+          open && inCell && 'bg-state-base-hover hover:bg-state-base-hover',
+        )}>
+          <div className={cn(
+            'grow p-1 system-sm-regular text-components-input-text-filled truncate',
+            inCell && 'system-xs-regular text-text-secondary',
+          )}>{value}</div>
+          <RiArrowDownSLine className='ml-0.5 w-4 h-4 text-text-quaternary' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className={cn('w-full z-[11]', popupClassName)}>
+        <div className='p-1 bg-components-panel-bg-blur border-[0.5px] border-components-panel-border radius-xl shadow-lg'>
+          {list.map((item: any) => (
+            <div key={item} className='flex items-center gap-2 pl-3 pr-2 py-[6px] radius-md cursor-pointer hover:bg-state-base-hover' onClick={() => {
+              onSelect(item)
+              setOpen(false)
+            }}>
+              <div className='grow system-md-regular text-text-secondary truncate'>{item}</div>
+              {value === item && <RiCheckLine className='w-4 h-4 text-text-accent' />}
+            </div>
+          ))}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default VariableTypeSelector
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -0,0 +1,202 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import { useContext } from 'use-context-selector'
+import {
+  useStoreApi,
+} from 'reactflow'
+import { RiBookOpenLine, RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@/app/components/workflow/store'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
+import { BubbleX, LongArrowLeft, LongArrowRight } from '@/app/components/base/icons/src/vender/line/others'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import VariableModalTrigger from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger'
+import VariableItem from '@/app/components/workflow/panel/chat-variable-panel/components/variable-item'
+import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
+import type {
+  ConversationVariable,
+} from '@/app/components/workflow/types'
+import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
+import { BlockEnum } from '@/app/components/workflow/types'
+import I18n from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n/language'
+import cn from '@/utils/classnames'
+
+const ChatVariablePanel = () => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const store = useStoreApi()
+  const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
+  const updateChatVarList = useStore(s => s.setConversationVariables)
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+
+  const [showTip, setShowTip] = useState(true)
+  const [showVariableModal, setShowVariableModal] = useState(false)
+  const [currentVar, setCurrentVar] = useState<ConversationVariable>()
+
+  const [showRemoveVarConfirm, setShowRemoveConfirm] = useState(false)
+  const [cacheForDelete, setCacheForDelete] = useState<ConversationVariable>()
+
+  const getEffectedNodes = useCallback((chatVar: ConversationVariable) => {
+    const { getNodes } = store.getState()
+    const allNodes = getNodes()
+    return findUsedVarNodes(
+      ['conversation', chatVar.name],
+      allNodes,
+    )
+  }, [store])
+
+  const removeUsedVarInNodes = useCallback((chatVar: ConversationVariable) => {
+    const { getNodes, setNodes } = store.getState()
+    const effectedNodes = getEffectedNodes(chatVar)
+    const newNodes = getNodes().map((node) => {
+      if (effectedNodes.find(n => n.id === node.id))
+        return updateNodeVars(node, ['conversation', chatVar.name], [])
+
+      return node
+    })
+    setNodes(newNodes)
+  }, [getEffectedNodes, store])
+
+  const handleEdit = (chatVar: ConversationVariable) => {
+    setCurrentVar(chatVar)
+    setShowVariableModal(true)
+  }
+
+  const handleDelete = useCallback((chatVar: ConversationVariable) => {
+    removeUsedVarInNodes(chatVar)
+    updateChatVarList(varList.filter(v => v.id !== chatVar.id))
+    setCacheForDelete(undefined)
+    setShowRemoveConfirm(false)
+    doSyncWorkflowDraft()
+  }, [doSyncWorkflowDraft, removeUsedVarInNodes, updateChatVarList, varList])
+
+  const deleteCheck = useCallback((chatVar: ConversationVariable) => {
+    const effectedNodes = getEffectedNodes(chatVar)
+    if (effectedNodes.length > 0) {
+      setCacheForDelete(chatVar)
+      setShowRemoveConfirm(true)
+    }
+    else {
+      handleDelete(chatVar)
+    }
+  }, [getEffectedNodes, handleDelete])
+
+  const handleSave = useCallback(async (chatVar: ConversationVariable) => {
+    // add chatVar
+    if (!currentVar) {
+      const newList = [chatVar, ...varList]
+      updateChatVarList(newList)
+      doSyncWorkflowDraft()
+      return
+    }
+    // edit chatVar
+    const newList = varList.map(v => v.id === currentVar.id ? chatVar : v)
+    updateChatVarList(newList)
+    // side effects of rename env
+    if (currentVar.name !== chatVar.name) {
+      const { getNodes, setNodes } = store.getState()
+      const effectedNodes = getEffectedNodes(currentVar)
+      const newNodes = getNodes().map((node) => {
+        if (effectedNodes.find(n => n.id === node.id))
+          return updateNodeVars(node, ['conversation', currentVar.name], ['conversation', chatVar.name])
+
+        return node
+      })
+      setNodes(newNodes)
+    }
+    doSyncWorkflowDraft()
+  }, [currentVar, doSyncWorkflowDraft, getEffectedNodes, store, updateChatVarList, varList])
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+      )}
+    >
+      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
+        {t('workflow.chatVariable.panelTitle')}
+        <div className='flex items-center gap-1'>
+          <ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
+            <RiBookOpenLine className='w-4 h-4' />
+          </ActionButton>
+          <div
+            className='flex items-center justify-center w-6 h-6 cursor-pointer'
+            onClick={() => setShowChatVariablePanel(false)}
+          >
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      {showTip && (
+        <div className='shrink-0 px-3 pt-2.5 pb-2'>
+          <div className='relative p-3 radius-2xl bg-background-section-burn'>
+            <div className='inline-block py-[3px] px-[5px] rounded-[5px] border border-divider-deep text-text-tertiary system-2xs-medium-uppercase'>TIPS</div>
+            <div className='mt-1 mb-4 system-sm-regular text-text-secondary'>
+              {t('workflow.chatVariable.panelDescription')}
+              <a target='_blank' rel='noopener noreferrer' className='text-text-accent' href={locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/guides/workflow/key_concepts#conversation-variables' : `https://docs.dify.ai/v/${locale.toLowerCase()}/guides/workflow/key_concept#hui-hua-bian-liang`}>{t('workflow.chatVariable.docLink')}</a>
+            </div>
+            <div className='flex items-center gap-2'>
+              <div className='flex flex-col p-3 pb-4 bg-workflow-block-bg radius-lg border border-workflow-block-border shadow-md'>
+                <BubbleX className='shrink-0 mb-1 w-4 h-4 text-util-colors-teal-teal-700' />
+                <div className='text-text-secondary system-xs-semibold'>conversation_var</div>
+                <div className='text-text-tertiary system-2xs-regular'>String</div>
+              </div>
+              <div className='grow'>
+                <div className='mb-2 flex items-center gap-2 py-1'>
+                  <div className='shrink-0 flex items-center gap-1 w-16 h-3 px-1'>
+                    <LongArrowLeft className='grow h-2 text-text-quaternary' />
+                    <div className='shrink-0 text-text-tertiary system-2xs-medium'>WRITE</div>
+                  </div>
+                  <BlockIcon className='shrink-0' type={BlockEnum.Assigner} />
+                  <div className='grow text-text-secondary system-xs-semibold truncate'>{t('workflow.blocks.assigner')}</div>
+                </div>
+                <div className='flex items-center gap-2 py-1'>
+                  <div className='shrink-0 flex items-center gap-1 w-16 h-3 px-1'>
+                    <div className='shrink-0 text-text-tertiary system-2xs-medium'>READ</div>
+                    <LongArrowRight className='grow h-2 text-text-quaternary' />
+                  </div>
+                  <BlockIcon className='shrink-0' type={BlockEnum.LLM} />
+                  <div className='grow text-text-secondary system-xs-semibold truncate'>{t('workflow.blocks.llm')}</div>
+                </div>
+              </div>
+            </div>
+            <div className='absolute z-10 top-[-4px] right-[38px] w-3 h-3 bg-background-section-burn rotate-45'/>
+          </div>
+        </div>
+      )}
+      <div className='shrink-0 px-4 pt-2 pb-3'>
+        <VariableModalTrigger
+          open={showVariableModal}
+          setOpen={setShowVariableModal}
+          showTip={showTip}
+          chatVar={currentVar}
+          onSave={handleSave}
+          onClose={() => setCurrentVar(undefined)}
+        />
+      </div>
+      <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
+        {varList.map(chatVar => (
+          <VariableItem
+            key={chatVar.id}
+            item={chatVar}
+            onEdit={handleEdit}
+            onDelete={deleteCheck}
+          />
+        ))}
+      </div>
+      <RemoveEffectVarConfirm
+        isShow={showRemoveVarConfirm}
+        onCancel={() => setShowRemoveConfirm(false)}
+        onConfirm={() => cacheForDelete && handleDelete(cacheForDelete)}
+      />
+    </div>
+  )
+}
+
+export default memo(ChatVariablePanel)
--- a/web/app/components/workflow/panel/chat-variable-panel/type.ts
+++ b/web/app/components/workflow/panel/chat-variable-panel/type.ts
@@ -0,0 +1,8 @@
+export enum ChatVarType {
+  Number = 'number',
+  String = 'string',
+  Object = 'object',
+  ArrayString = 'array[string]',
+  ArrayNumber = 'array[number]',
+  ArrayObject = 'array[object]',
+}
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -14,6 +14,7 @@ import {
 import type { StartNodeType } from '../../nodes/start/types'
 import Empty from './empty'
 import UserInput from './user-input'
+import ConversationVariableModal from './conversation-variable-modal'
 import { useChat } from './hooks'
 import type { ChatWrapperRefType } from './index'
 import Chat from '@/app/components/base/chat/chat'
@@ -25,7 +26,13 @@ import {
 } from '@/service/debug'
 import { useStore as useAppStore } from '@/app/components/app/store'

-const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
+type ChatWrapperProps = {
+  showConversationVariableModal: boolean
+  onConversationModalHide: () => void
+  showInputsFieldsPanel: boolean
+}
+
+const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConversationVariableModal, onConversationModalHide, showInputsFieldsPanel }, ref) => {
  const nodes = useNodes<StartNodeType>()
  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
  const startVariables = startNode?.data.variables
@@ -87,33 +94,41 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
  }, [handleRestart])

  return (
-    <Chat
-      config={{
-        ...config,
-        supportCitationHitInfo: true,
-      } as any}
-      chatList={chatList}
-      isResponding={isResponding}
-      chatContainerClassName='px-4'
-      chatContainerInnerClassName='pt-6'
-      chatFooterClassName='px-4 rounded-bl-2xl'
-      chatFooterInnerClassName='pb-4'
-      onSend={doSend}
-      onStopResponding={handleStop}
-      chatNode={(
-        <>
-          <UserInput />
-          {
-            !chatList.length && (
-              <Empty />
-            )
-          }
-        </>
+    <>
+      <Chat
+        config={{
+          ...config,
+          supportCitationHitInfo: true,
+        } as any}
+        chatList={chatList}
+        isResponding={isResponding}
+        chatContainerClassName='px-3'
+        chatContainerInnerClassName='pt-6'
+        chatFooterClassName='px-4 rounded-bl-2xl'
+        chatFooterInnerClassName='pb-4'
+        onSend={doSend}
+        onStopResponding={handleStop}
+        chatNode={(
+          <>
+            {showInputsFieldsPanel && <UserInput />}
+            {
+              !chatList.length && (
+                <Empty />
+              )
+            }
+          </>
+        )}
+        suggestedQuestions={suggestedQuestions}
+        showPromptLog
+        chatAnswerContainerInner='!pr-2'
+      />
+      {showConversationVariableModal && (
+        <ConversationVariableModal
+          conversationID={conversationId}
+          onHide={onConversationModalHide}
+        />
      )}
-      suggestedQuestions={suggestedQuestions}
-      showPromptLog
-      chatAnswerContainerInner='!pr-2'
-    />
+    </>
  )
 })

--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -0,0 +1,155 @@
+'use client'
+import React, { useCallback } from 'react'
+import { useMount } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import { capitalize } from 'lodash-es'
+import copy from 'copy-to-clipboard'
+import { RiCloseLine } from '@remixicon/react'
+import Modal from '@/app/components/base/modal'
+import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
+import { useStore } from '@/app/components/workflow/store'
+import type {
+  ConversationVariable,
+} from '@/app/components/workflow/types'
+import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import useTimestamp from '@/hooks/use-timestamp'
+import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
+import cn from '@/utils/classnames'
+
+export type Props = {
+  conversationID: string
+  onHide: () => void
+}
+
+const ConversationVariableModal = ({
+  conversationID,
+  onHide,
+}: Props) => {
+  const { t } = useTranslation()
+  const { formatTime } = useTimestamp()
+  const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
+  const appID = useStore(s => s.appId)
+  const [currentVar, setCurrentVar] = React.useState<ConversationVariable>(varList[0])
+  const [latestValueMap, setLatestValueMap] = React.useState<Record<string, string>>({})
+  const [latestValueTimestampMap, setLatestValueTimestampMap] = React.useState<Record<string, number>>({})
+
+  const getChatVarLatestValues = useCallback(async () => {
+    if (conversationID && varList.length > 0) {
+      const res = await fetchCurrentValueOfConversationVariable({
+        url: `/apps/${appID}/conversation-variables`,
+        params: { conversation_id: conversationID },
+      })
+      if (res.data.length > 0) {
+        const valueMap = res.data.reduce((acc: any, cur) => {
+          acc[cur.id] = cur.value
+          return acc
+        }, {})
+        setLatestValueMap(valueMap)
+        const timestampMap = res.data.reduce((acc: any, cur) => {
+          acc[cur.id] = cur.updated_at
+          return acc
+        }, {})
+        setLatestValueTimestampMap(timestampMap)
+      }
+    }
+  }, [appID, conversationID, varList.length])
+
+  const [isCopied, setIsCopied] = React.useState(false)
+  const handleCopy = useCallback(() => {
+    copy(currentVar.value)
+    setIsCopied(true)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 2000)
+  }, [currentVar.value])
+
+  useMount(() => {
+    getChatVarLatestValues()
+  })
+
+  return (
+    <Modal
+      isShow
+      onClose={() => { }}
+      className={cn('w-[920px] max-w-[920px] h-[640px] p-0')}
+    >
+      <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
+        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      </div>
+      <div className='w-full h-full flex'>
+        {/* LEFT */}
+        <div className='shrink-0 flex flex-col w-[224px] h-full bg-background-sidenav-bg border-r border-divider-burn'>
+          <div className='shrink-0 pt-5 pl-5 pr-4 pb-3 text-text-primary system-xl-semibold'>{t('workflow.chatVariable.panelTitle')}</div>
+          <div className='grow overflow-y-auto px-3 py-2'>
+            {varList.map(chatVar => (
+              <div key={chatVar.id} className={cn('group mb-0.5 p-2 flex items-center radius-md hover:bg-state-base-hover cursor-pointer', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+                <BubbleX className={cn('shrink-0 mr-1 w-4 h-4 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
+                <div title={chatVar.name} className={cn('text-text-tertiary system-sm-medium truncate group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        {/* RIGHT */}
+        <div className='grow flex flex-col h-full bg-components-panel-bg'>
+          <div className='shrink-0 p-4 pb-2'>
+            <div className='flex items-center gap-1 py-1'>
+              <div className='text-text-primary system-xl-semibold'>{currentVar.name}</div>
+              <div className='text-text-tertiary system-xs-medium'>{capitalize(currentVar.value_type)}</div>
+            </div>
+          </div>
+          <div className='grow p-4 pt-2 flex flex-col'>
+            <div className='shrink-0 mb-2 flex items-center gap-2'>
+              <div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
+              <div className='grow h-[1px]' style={{
+                background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
+              }}></div>
+              {latestValueTimestampMap[currentVar.id] && (
+                <div className='shrink-0 text-text-tertiary system-xs-regular'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
+              )}
+            </div>
+            <div className='grow'>
+              {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
+                <div className='h-full flex flex-col bg-components-input-bg-normal rounded-lg px-2 pb-2'>
+                  <div className='shrink-0 flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
+                    <div className='text-text-secondary system-xs-semibold'>JSON</div>
+                    <div className='flex items-center p-1'>
+                      {!isCopied
+                        ? (
+                          <Clipboard className='w-4 h-4 text-text-tertiary cursor-pointer' onClick={handleCopy} />
+                        )
+                        : (
+                          <ClipboardCheck className='w-4 h-4 text-text-tertiary' />
+                        )
+                      }
+                    </div>
+                  </div>
+                  <div className='grow pl-4'>
+                    <CodeEditor
+                      readOnly
+                      noWrapper
+                      isExpand
+                      language={CodeLanguage.json}
+                      value={latestValueMap[currentVar.id] || ''}
+                      isJSONStringifyBeauty
+                    />
+                  </div>
+                </div>
+              )}
+              {(currentVar.value_type === ChatVarType.Number || currentVar.value_type === ChatVarType.String) && (
+                <div className='h-full px-4 py-3 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-md-regular overflow-y-auto'>{latestValueMap[currentVar.id] || ''}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConversationVariableModal
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -1,19 +1,26 @@
 import {
  memo,
  useRef,
+  useState,
 } from 'react'
 import { useKeyPress } from 'ahooks'
-import { RiCloseLine } from '@remixicon/react'
+import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
 import {
  useEdgesInteractions,
  useNodesInteractions,
  useWorkflowInteractions,
 } from '../../hooks'
+import { BlockEnum } from '../../types'
+import type { StartNodeType } from '../../nodes/start/types'
 import ChatWrapper from './chat-wrapper'
 import cn from '@/utils/classnames'
-import Button from '@/app/components/base/button'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
+import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
+import { useStore } from '@/app/components/workflow/store'

 export type ChatWrapperRefType = {
  handleRestart: () => void
@@ -24,6 +31,13 @@ const DebugAndPreview = () => {
  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
  const { handleNodeCancelRunningStatus } = useNodesInteractions()
  const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
+  const varList = useStore(s => s.conversationVariables)
+  const [expanded, setExpanded] = useState(true)
+  const nodes = useNodes<StartNodeType>()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const variables = startNode?.data.variables || []
+
+  const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)

  const handleRestartChat = () => {
    handleNodeCancelRunningStatus()
@@ -40,28 +54,43 @@ const DebugAndPreview = () => {
  return (
    <div
      className={cn(
-        'flex flex-col w-[400px] rounded-l-2xl h-full border border-black/2',
+        'flex flex-col w-[420px] rounded-l-2xl h-full border border-black/2',
      )}
      style={{
        background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
      }}
    >
-      <div className='shrink-0 flex items-center justify-between pl-4 pr-3 pt-3 pb-2 font-semibold text-gray-900'>
-        {t('workflow.common.debugAndPreview').toLocaleUpperCase()}
-        <div className='flex items-center'>
-          <Button
-            onClick={() => handleRestartChat()}
+      <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
+        <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
+        <div className='flex items-center gap-1'>
+          <TooltipPlus
+            popupContent={t('common.operation.refresh')}
          >
-            <RefreshCcw01 className='shrink-0 mr-1 w-3 h-3 text-gray-500' />
-            <div
-              className='grow truncate uppercase'
-              title={t('common.operation.refresh') || ''}
+            <ActionButton onClick={() => handleRestartChat()}>
+              <RefreshCcw01 className='w-4 h-4' />
+            </ActionButton>
+          </TooltipPlus>
+          {varList.length > 0 && (
+            <TooltipPlus
+              popupContent={t('workflow.chatVariable.panelTitle')}
            >
-              {t('common.operation.refresh')}
+              <ActionButton onClick={() => setShowConversationVariableModal(true)}>
+                <BubbleX className='w-4 h-4' />
+              </ActionButton>
+            </TooltipPlus>
+          )}
+          {variables.length > 0 && (
+            <div className='relative'>
+              <TooltipPlus
+                popupContent={t('workflow.panel.userInputField')}
+              >
+                <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
+                  <RiEqualizer2Line className='w-4 h-4' />
+                </ActionButton>
+              </TooltipPlus>
+              {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
            </div>
-            <div className='shrink-0 ml-1 px-1 leading-[18px] rounded-md border border-gray-200 bg-gray-50 text-[11px] text-gray-500 font-medium'>Shift</div>
-            <div className='shrink-0 ml-0.5 px-1 leading-[18px] rounded-md border border-gray-200 bg-gray-50 text-[11px] text-gray-500 font-medium'>R</div>
-          </Button>
+          )}
          <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
          <div
            className='flex items-center justify-center w-6 h-6 cursor-pointer'
@@ -72,7 +101,12 @@ const DebugAndPreview = () => {
        </div>
      </div>
      <div className='grow rounded-b-2xl overflow-y-auto'>
-        <ChatWrapper ref={chatRef} />
+        <ChatWrapper
+          ref={chatRef}
+          showConversationVariableModal={showConversationVariableModal}
+          onConversationModalHide={() => setShowConversationVariableModal(false)}
+          showInputsFieldsPanel={expanded}
+        />
      </div>
    </div>
  )
--- a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
@@ -1,10 +1,7 @@
 import {
  memo,
-  useState,
 } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import { RiArrowDownSLine } from '@remixicon/react'
 import FormItem from '../../nodes/_base/components/before-run-form/form-item'
 import { BlockEnum } from '../../types'
 import {
@@ -12,11 +9,10 @@ import {
  useWorkflowStore,
 } from '../../store'
 import type { StartNodeType } from '../../nodes/start/types'
+import cn from '@/utils/classnames'

 const UserInput = () => {
-  const { t } = useTranslation()
  const workflowStore = useWorkflowStore()
-  const [expanded, setExpanded] = useState(true)
  const inputs = useStore(s => s.inputs)
  const nodes = useNodes<StartNodeType>()
  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
@@ -33,46 +29,21 @@ const UserInput = () => {
    return null

  return (
-    <div
-      className={`
-        relative rounded-xl border z-[1]
-        ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
-      `}
-    >
-      <div
-        className={`
-          flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
-          ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
-        `}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <RiArrowDownSLine
-          className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
-        />
-        {t('workflow.panel.userInputField').toLocaleUpperCase()}
-      </div>
-      <div className='px-2 pt-1 pb-3'>
-        {
-          expanded && (
-            <div className='py-2 text-[13px] text-gray-900'>
-              {
-                variables.map((variable, index) => (
-                  <div
-                    key={variable.variable}
-                    className='mb-2 last-of-type:mb-0'
-                  >
-                    <FormItem
-                      autoFocus={index === 0}
-                      payload={variable}
-                      value={inputs[variable.variable]}
-                      onChange={v => handleValueChange(variable.variable, v)}
-                    />
-                  </div>
-                ))
-              }
-            </div>
-          )
-        }
+    <div className={cn('relative bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
+      <div className='px-4 pt-3 pb-4'>
+        {variables.map((variable, index) => (
+          <div
+            key={variable.variable}
+            className='mb-4 last-of-type:mb-0'
+          >
+            <FormItem
+              autoFocus={index === 0}
+              payload={variable}
+              value={inputs[variable.variable]}
+              onChange={v => handleValueChange(variable.variable, v)}
+            />
+          </div>
+        ))}
      </div>
    </div>
  )
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -0,0 +1,53 @@
+import { memo, useState } from 'react'
+import { capitalize } from 'lodash-es'
+import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import { useStore } from '@/app/components/workflow/store'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type EnvItemProps = {
+  env: EnvironmentVariable
+  onEdit: (env: EnvironmentVariable) => void
+  onDelete: (env: EnvironmentVariable) => void
+}
+
+const EnvItem = ({
+  env,
+  onEdit,
+  onDelete,
+}: EnvItemProps) => {
+  const envSecrets = useStore(s => s.envSecrets)
+  const [destructive, setDestructive] = useState(false)
+
+  return (
+    <div className={cn(
+      'mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border border-components-panel-border-subtle shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
+    )}>
+      <div className='flex items-center justify-between'>
+        <div className='grow flex gap-1 items-center'>
+          <Env className='w-4 h-4 text-util-colors-violet-violet-600' />
+          <div className='text-text-primary system-sm-medium'>{env.name}</div>
+          <div className='text-text-tertiary system-xs-medium'>{capitalize(env.value_type)}</div>
+          {env.value_type === 'secret' && <RiLock2Line className='w-3 h-3 text-text-tertiary' />}
+        </div>
+        <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
+          <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
+            <RiEditLine className='w-4 h-4' onClick={() => onEdit(env)}/>
+          </div>
+          <div
+            className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'
+            onMouseOver={() => setDestructive(true)}
+            onMouseOut={() => setDestructive(false)}
+          >
+            <RiDeleteBinLine className='w-4 h-4' onClick={() => onDelete(env)} />
+          </div>
+        </div>
+      </div>
+      <div className='text-text-tertiary system-xs-regular truncate'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+    </div>
+  )
+}
+
+export default memo(EnvItem)
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -3,15 +3,14 @@ import {
  useCallback,
  useState,
 } from 'react'
-import { capitalize } from 'lodash-es'
 import {
  useStoreApi,
 } from 'reactflow'
-import { RiCloseLine, RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
+import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
-import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
+import EnvItem from '@/app/components/workflow/panel/env-panel/env-item'
 import type {
  EnvironmentVariable,
 } from '@/app/components/workflow/types'
@@ -61,6 +60,11 @@ const EnvPanel = () => {
    setNodes(newNodes)
  }, [getEffectedNodes, store])

+  const handleEdit = (env: EnvironmentVariable) => {
+    setCurrentVar(env)
+    setShowVariableModal(true)
+  }
+
  const handleDelete = useCallback((env: EnvironmentVariable) => {
    removeUsedVarInNodes(env)
    updateEnvList(envList.filter(e => e.id !== env.id))
@@ -145,7 +149,7 @@ const EnvPanel = () => {
  return (
    <div
      className={cn(
-        'relative flex flex-col w-[400px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+        'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
      )}
    >
      <div className='shrink-0 flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
@@ -171,31 +175,12 @@ const EnvPanel = () => {
      </div>
      <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
        {envList.map(env => (
-          <div
-            key={env.name}
-            className='mb-1 px-2.5 py-2 bg-components-panel-on-panel-item-bg radius-md border-[0.5px] border-components-panel-border-subtle shadow-xs'
-          >
-            <div className='flex items-center justify-between'>
-              <div className='grow flex gap-1 items-center'>
-                <Env className='w-4 h-4 text-util-colors-violet-violet-600' />
-                <div className='text-text-primary system-sm-medium'>{env.name}</div>
-                <div className='text-text-tertiary system-xs-medium'>{capitalize(env.value_type)}</div>
-                {env.value_type === 'secret' && <RiLock2Line className='w-3 h-3 text-text-tertiary' />}
-              </div>
-              <div className='shrink-0 flex gap-1 items-center text-text-tertiary'>
-                <div className='p-1 radius-md cursor-pointer hover:bg-state-base-hover hover:text-text-secondary'>
-                  <RiEditLine className='w-4 h-4' onClick={() => {
-                    setCurrentVar(env)
-                    setShowVariableModal(true)
-                  }}/>
-                </div>
-                <div className='p-1 radius-md cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive'>
-                  <RiDeleteBinLine className='w-4 h-4' onClick={() => deleteCheck(env)} />
-                </div>
-              </div>
-            </div>
-            <div className='text-text-tertiary system-xs-regular truncate'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
-          </div>
+          <EnvItem
+            key={env.id}
+            env={env}
+            onEdit={handleEdit}
+            onDelete={deleteCheck}
+          />
        ))}
      </div>
      <RemoveEffectVarConfirm
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -80,7 +80,7 @@ const VariableModal = ({
      <div className='px-4 py-2'>
        {/* type */}
        <div className='mb-4'>
-          <div className='mb-1 text-text-secondary system-sm-semibold'>{t('workflow.env.modal.type')}</div>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.type')}</div>
          <div className='flex gap-2'>
            <div className={cn(
              'w-[106px] flex items-center justify-center p-2 radius-md bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary system-sm-regular cursor-pointer hover:shadow-xs hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
@@ -111,11 +111,11 @@ const VariableModal = ({
        </div>
        {/* name */}
        <div className='mb-4'>
-          <div className='mb-1 text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.name')}</div>
          <div className='flex'>
            <input
              tabIndex={0}
-              className='block px-3 w-full h-9 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
              placeholder={t('workflow.env.modal.namePlaceholder') || ''}
              value={name}
              onChange={e => handleNameChange(e.target.value)}
@@ -125,11 +125,11 @@ const VariableModal = ({
        </div>
        {/* value */}
        <div className=''>
-          <div className='mb-1 text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</div>
+          <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold'>{t('workflow.env.modal.value')}</div>
          <div className='flex'>
            <input
              tabIndex={0}
-              className='block px-3 w-full h-9 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
+              className='block px-3 w-full h-8 bg-components-input-bg-normal system-sm-regular radius-md border border-transparent appearance-none outline-none caret-primary-600 hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:system-sm-regular placeholder:text-components-input-text-placeholder'
              placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
              value={value}
              onChange={e => setValue(e.target.value)}
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { RiAddLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
-// import cn from '@/utils/classnames'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -13,6 +13,7 @@ import DebugAndPreview from './debug-and-preview'
 import Record from './record'
 import WorkflowPreview from './workflow-preview'
 import ChatRecord from './chat-record'
+import ChatVariablePanel from './chat-variable-panel'
 import EnvPanel from './env-panel'
 import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -25,6 +26,7 @@ const Panel: FC = () => {
  const historyWorkflowData = useStore(s => s.historyWorkflowData)
  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
  const showEnvPanel = useStore(s => s.showEnvPanel)
+  const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
  const isRestoring = useStore(s => s.isRestoring)
  const {
    enableShortcuts,
@@ -90,6 +92,11 @@ const Panel: FC = () => {
          <EnvPanel />
        )
      }
+      {
+        showChatVariablePanel && (
+          <ChatVariablePanel />
+        )
+      }
    </div>
  )
 }