dify

dify/web/app/components/workflow/panel/chat-record/index.tsx

@@ -0,0 +1,140 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import { RiCloseLine } from '@remixicon/react'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../../store'
+import { useWorkflowRun } from '../../hooks'
+import { formatWorkflowRunIdentifier } from '../../utils'
+import UserInput from './user-input'
+import Chat from '@/app/components/base/chat/chat'
+import type { ChatItem, ChatItemInTree } from '@/app/components/base/chat/types'
+import { fetchConversationMessages } from '@/service/debug'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Loading from '@/app/components/base/loading'
+import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
+import type { IChatItem } from '@/app/components/base/chat/chat/type'
+import { buildChatItemTree, getThreadMessages } from '@/app/components/base/chat/utils'
+
+function getFormattedChatList(messages: any[]) {
+  const res: ChatItem[] = []
+  messages.forEach((item: any) => {
+    const questionFiles = item.message_files?.filter((file: any) => file.belongs_to === 'user') || []
+    res.push({
+      id: `question-${item.id}`,
+      content: item.query,
+      isAnswer: false,
+      message_files: getProcessedFilesFromResponse(questionFiles.map((item: any) => ({ ...item, related_id: item.id }))),
+      parentMessageId: item.parent_message_id || undefined,
+    })
+    const answerFiles = item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || []
+    res.push({
+      id: item.id,
+      content: item.answer,
+      feedback: item.feedback,
+      isAnswer: true,
+      citation: item.metadata?.retriever_resources,
+      message_files: getProcessedFilesFromResponse(answerFiles.map((item: any) => ({ ...item, related_id: item.id }))),
+      workflow_run_id: item.workflow_run_id,
+      parentMessageId: `question-${item.id}`,
+    })
+  })
+  return res
+}
+
+const ChatRecord = () => {
+  const [fetched, setFetched] = useState(false)
+  const [chatItemTree, setChatItemTree] = useState<ChatItemInTree[]>([])
+  const [threadChatItems, setThreadChatItems] = useState<IChatItem[]>([])
+  const appDetail = useAppStore(s => s.appDetail)
+  const workflowStore = useWorkflowStore()
+  const { handleLoadBackupDraft } = useWorkflowRun()
+  const historyWorkflowData = useStore(s => s.historyWorkflowData)
+  const currentConversationID = historyWorkflowData?.conversation_id
+
+  const handleFetchConversationMessages = useCallback(async () => {
+    if (appDetail && currentConversationID) {
+      try {
+        setFetched(false)
+        const res = await fetchConversationMessages(appDetail.id, currentConversationID)
+
+        const newAllChatItems = getFormattedChatList((res as any).data)
+
+        const tree = buildChatItemTree(newAllChatItems)
+        setChatItemTree(tree)
+        setThreadChatItems(getThreadMessages(tree, newAllChatItems.at(-1)?.id))
+      }
+      catch {
+      }
+      finally {
+        setFetched(true)
+      }
+    }
+  }, [appDetail, currentConversationID])
+
+  useEffect(() => {
+    handleFetchConversationMessages()
+  }, [currentConversationID, appDetail, handleFetchConversationMessages])
+
+  const switchSibling = useCallback((siblingMessageId: string) => {
+    setThreadChatItems(getThreadMessages(chatItemTree, siblingMessageId))
+  }, [chatItemTree])
+
+  return (
+    <div
+      className='flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-chatbot-bg shadow-xl'
+      // style={{
+      //   background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
+      // }}
+    >
+      {!fetched && (
+        <div className='flex h-full items-center justify-center'>
+          <Loading />
+        </div>
+      )}
+      {fetched && (
+        <>
+          <div className='flex shrink-0 items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
+            {`TEST CHAT${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
+            <div
+              className='flex h-6 w-6 cursor-pointer items-center justify-center'
+              onClick={() => {
+                handleLoadBackupDraft()
+                workflowStore.setState({ historyWorkflowData: undefined })
+              }}
+            >
+              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+            </div>
+          </div>
+          <div className='h-0 grow'>
+            <Chat
+              config={{
+                supportCitationHitInfo: true,
+                questionEditEnable: false,
+              } as any}
+              chatList={threadChatItems}
+              chatContainerClassName='px-3'
+              chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
+              chatFooterClassName='px-4 rounded-b-2xl'
+              chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
+              chatNode={<UserInput />}
+              noChatInput
+              allToolIcons={{}}
+              showPromptLog
+              switchSibling={switchSibling}
+              noSpacing
+              chatAnswerContainerInner='!pr-2'
+            />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default memo(ChatRecord)

dify/web/app/components/workflow/panel/chat-record/user-input.tsx

@@ -0,0 +1,56 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+
+const UserInput = () => {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = useState(true)
+  const variables: any = []
+
+  if (!variables.length)
+    return null
+
+  return (
+    <div
+      className={`
+        rounded-xl border
+        ${!expanded ? 'border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-none' : 'border-transparent bg-white shadow-xs'}
+      `}
+    >
+      <div
+        className={`
+          flex h-[18px] cursor-pointer items-center px-2 pt-4 text-[13px] font-semibold
+          ${!expanded ? 'text-text-accent-secondary' : 'text-text-secondary'}
+        `}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <RiArrowDownSLine
+          className={`mr-1 h-3 w-3 ${!expanded ? '-rotate-90 text-text-accent' : 'text-text-tertiary'}`}
+        />
+        {t('workflow.panel.userInputField').toLocaleUpperCase()}
+      </div>
+      <div className='px-2 pb-3 pt-1'>
+        {
+          expanded && (
+            <div className='py-2 text-[13px] text-text-primary'>
+              {
+                variables.map((variable: any) => (
+                  <div
+                    key={variable.variable}
+                    className='mb-2 last-of-type:mb-0'
+                  >
+                  </div>
+                ))
+              }
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(UserInput)

dify/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-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'
+import BoolValue from './bool-value'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  list: boolean[]
+  onChange: (list: boolean[]) => void
+}
+
+const ArrayValueList: FC<Props> = ({
+  className,
+  list,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const handleChange = useCallback((index: number) => {
+    return (value: boolean) => {
+      const newList = produce(list, (draft: any[]) => {
+        draft[index] = 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(false)
+    })
+    onChange(newList)
+  }, [list, onChange])
+
+  return (
+    <div className={cn('w-full space-y-2', className)}>
+      {list.map((item, index) => (
+        <div className='flex items-center space-x-1' key={index}>
+          <BoolValue
+            value={item}
+            onChange={handleChange(index)}
+          />
+
+          <RemoveButton
+            className='!bg-gray-100 !p-2 hover:!bg-gray-200'
+            onClick={handleItemRemove(index)}
+          />
+        </div>
+      ))}
+      <Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
+        <RiAddLine className='mr-1 h-4 w-4' />
+        <span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
+      </Button>
+    </div>
+  )
+}
+export default React.memo(ArrayValueList)

dify/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'
+import Input from '@/app/components/base/input'
+
+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
+            placeholder={t('workflow.chatVariable.modal.arrayValue') || ''}
+            value={list[index]}
+            onChange={handleNameChange(index)}
+            type={isString ? 'text' : 'number'}
+          />
+          <RemoveButton
+            className='!bg-gray-100 !p-2 hover:!bg-gray-200'
+            onClick={handleItemRemove(index)}
+          />
+        </div>
+      ))}
+      <Button variant='tertiary' className='w-full' onClick={handleItemAdd}>
+        <RiAddLine className='mr-1 h-4 w-4' />
+        <span>{t('workflow.chatVariable.modal.addArrayValue')}</span>
+      </Button>
+    </div>
+  )
+}
+export default React.memo(ArrayValueList)

dify/web/app/components/workflow/panel/chat-variable-panel/components/bool-value.tsx

@@ -0,0 +1,37 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import OptionCard from '../../../nodes/_base/components/option-card'
+
+type Props = {
+  value: boolean
+  onChange: (value: boolean) => void
+}
+
+const BoolValue: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const booleanValue = value
+  const handleChange = useCallback((newValue: boolean) => {
+    return () => {
+      onChange(newValue)
+    }
+  }, [onChange])
+
+  return (
+    <div className='flex w-full space-x-1'>
+      <OptionCard className='grow'
+        selected={booleanValue}
+        title='True'
+        onSelect={handleChange(true)}
+      />
+      <OptionCard className='grow'
+        selected={!booleanValue}
+        title='False'
+        onSelect={handleChange(false)}
+      />
+    </div>
+  )
+}
+export default React.memo(BoolValue)

dify/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 (!/^\w+$/.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='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder  hover:bg-state-base-hover focus:bg-components-input-bg-active'
+          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='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder  hover:bg-state-base-hover focus:bg-components-input-bg-active'
+          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='absolute right-1 top-0.5 z-10 hidden group-hover:block'
+            onClick={handleItemRemove(index)}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(ObjectValueItem)

dify/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 overflow-hidden rounded-lg border border-gray-200'>
+      <div className='system-xs-medium flex h-7 items-center uppercase text-text-tertiary'>
+        <div className='flex h-full w-[120px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectKey')}</div>
+        <div className='flex h-full w-[96px] items-center border-r border-gray-200 pl-2'>{t('workflow.chatVariable.modal.objectType')}</div>
+        <div className='flex h-full w-[230px] items-center 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)

dify/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(
+      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 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='flex grow items-center gap-1'>
+          <BubbleX className='h-4 w-4 text-util-colors-teal-teal-700' />
+          <div className='system-sm-medium text-text-primary'>{item.name}</div>
+          <div className='system-xs-medium text-text-tertiary'>{capitalize(item.value_type)}</div>
+        </div>
+        <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
+          <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
+            <RiEditLine className='h-4 w-4' onClick={() => onEdit(item)}/>
+          </div>
+          <div
+            className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
+            onMouseOver={() => setDestructive(true)}
+            onMouseOut={() => setDestructive(false)}
+          >
+            <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(item)}/>
+          </div>
+        </div>
+      </div>
+      <div className='system-xs-regular truncate text-text-tertiary'>{item.description}</div>
+    </div>
+  )
+}
+
+export default memo(VariableItem)

dify/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx

@@ -0,0 +1,71 @@
+'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)
+        if (open)
+          onClose()
+      }}
+      placement='left-start'
+      offset={{
+        mainAxis: 8,
+        alignmentAxis: showTip ? -278 : -48,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => {
+        setOpen(v => !v)
+        if (open)
+          onClose()
+      }}>
+        <Button variant='primary'>
+          <RiAddLine className='mr-1 h-4 w-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

dify/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx

@@ -0,0 +1,426 @@
+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 Input from '@/app/components/base/input'
+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'
+import BoolValue from './bool-value'
+import ArrayBoolList from './array-bool-list'
+import {
+  arrayBoolPlaceholder,
+  arrayNumberPlaceholder,
+  arrayObjectPlaceholder,
+  arrayStringPlaceholder,
+  objectPlaceholder,
+} from '@/app/components/workflow/panel/chat-variable-panel/utils'
+import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
+
+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.Boolean,
+  ChatVarType.Object,
+  ChatVarType.ArrayString,
+  ChatVarType.ArrayNumber,
+  ChatVarType.ArrayBoolean,
+  ChatVarType.ArrayObject,
+]
+
+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 [description, setDescription] = 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
+    if (type === ChatVarType.ArrayBoolean)
+      return arrayBoolPlaceholder
+    return objectPlaceholder
+  }, [type])
+  const getObjectValue = useCallback(() => {
+    if (!chatVar || Object.keys(chatVar.value).length === 0)
+      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.Boolean:
+        return value === undefined ? true : value
+      case ChatVarType.Object:
+        return editInJSON ? value : formatValueFromObject(objectValue)
+      case ChatVarType.ArrayString:
+      case ChatVarType.ArrayNumber:
+      case ChatVarType.ArrayObject:
+        return value?.filter(Boolean) || []
+      case ChatVarType.ArrayBoolean:
+        return value || []
+    }
+  }
+
+  const checkVariableName = (value: string) => {
+    const { isValid, errorMessageKey } = checkKeys([value], false)
+    if (!isValid) {
+      notify({
+        type: 'error',
+        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+      })
+      return false
+    }
+    return true
+  }
+
+  const handleVarNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    replaceSpaceWithUnderscoreInVarNameInput(e.target)
+    if (!!e.target.value && !checkVariableName(e.target.value))
+      return
+    setName(e.target.value || '')
+  }
+
+  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)
+    if(v === ChatVarType.Boolean)
+      setValue(false)
+    if (v === ChatVarType.ArrayBoolean)
+      setValue([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 {
+            // 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])
+      }
+    }
+
+    if(type === ChatVarType.ArrayBoolean) {
+      if(editInJSON)
+        setEditorContent(JSON.stringify(value.map((item: boolean) => item ? 'True' : 'False')))
+    }
+    setEditInJSON(editInJSON)
+  }
+
+  const handleEditorValueChange = (content: string) => {
+    if (!content) {
+      setEditorContent(content)
+      return setValue(undefined)
+    }
+    else {
+      setEditorContent(content)
+      try {
+        let newValue = JSON.parse(content)
+        if(type === ChatVarType.ArrayBoolean) {
+          newValue = newValue.map((item: string | boolean) => {
+            if (item === 'True' || item === 'true' || item === true)
+              return true
+            if (item === 'False' || item === 'false' || item === false)
+              return false
+            return undefined
+          }).filter((item?: boolean) => item !== undefined)
+        }
+        setValue(newValue)
+      }
+      catch {
+        // ignore JSON.parse errors
+      }
+    }
+  }
+
+  const handleSave = () => {
+    if (!checkVariableName(name))
+      return
+    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,
+    })
+    onClose()
+  }
+
+  useEffect(() => {
+    if (chatVar) {
+      setName(chatVar.name)
+      setType(chatVar.value_type)
+      setValue(chatVar.value)
+      setDescription(chatVar.description)
+      setObjectValue(getObjectValue())
+      if (chatVar.value_type === ChatVarType.ArrayObject) {
+        setEditorContent(JSON.stringify(chatVar.value))
+        setEditInJSON(true)
+      }
+      else {
+        setEditInJSON(false)
+      }
+    }
+  }, [chatVar, getObjectValue])
+
+  return (
+    <div
+      className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
+    >
+      <div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
+        {!chatVar ? t('workflow.chatVariable.modal.title') : t('workflow.chatVariable.modal.editTitle')}
+        <div className='flex items-center'>
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={onClose}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='max-h-[480px] overflow-y-auto px-4 py-2'>
+        {/* name */}
+        <div className='mb-4'>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.name')}</div>
+          <div className='flex'>
+            <Input
+              placeholder={t('workflow.chatVariable.modal.namePlaceholder') || ''}
+              value={name}
+              onChange={handleVarNameChange}
+              onBlur={e => checkVariableName(e.target.value)}
+              type='text'
+            />
+          </div>
+        </div>
+        {/* type */}
+        <div className='mb-4'>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{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='system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary'>
+            <div>{t('workflow.chatVariable.modal.value')}</div>
+            {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber || type === ChatVarType.ArrayBoolean) && (
+              <Button
+                variant='ghost'
+                size='small'
+                className='text-text-tertiary'
+                onClick={() => handleEditorChange(!editInJSON)}
+              >
+                {editInJSON ? <RiInputField className='mr-1 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-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 h-3.5 w-3.5' /> : <RiDraftLine className='mr-1 h-3.5 w-3.5' />}
+                {editInJSON ? t('workflow.chatVariable.modal.editInForm') : t('workflow.chatVariable.modal.editInJSON')}
+              </Button>
+            )}
+          </div>
+          <div className='flex'>
+            {type === ChatVarType.String && (
+              // Input will remove \n\r, so use Textarea just like description area
+              <textarea
+                className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+                value={value}
+                placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
+                onChange={e => setValue(e.target.value)}
+              />
+            )}
+            {type === ChatVarType.Number && (
+              <Input
+                placeholder={t('workflow.chatVariable.modal.valuePlaceholder') || ''}
+                value={value}
+                onChange={e => setValue(Number(e.target.value))}
+                type='number'
+              />
+            )}
+            {type === ChatVarType.Boolean && (
+              <BoolValue
+                value={value}
+                onChange={setValue}
+              />
+            )}
+            {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}
+              />
+            )}
+            {type === ChatVarType.ArrayBoolean && !editInJSON && (
+              <ArrayBoolList
+                list={value || [true]}
+                onChange={setValue}
+              />
+            )}
+
+            {editInJSON && (
+              <div className='w-full rounded-[10px] bg-components-input-bg-normal py-2 pl-3 pr-1' 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='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.chatVariable.modal.description')}</div>
+          <div className='flex'>
+            <textarea
+              className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+              value={description}
+              placeholder={t('workflow.chatVariable.modal.descriptionPlaceholder') || ''}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
+        <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

dify/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 w-full cursor-pointer items-center px-2',
+          !inCell && 'radius-md bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
+          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(
+            'system-sm-regular grow truncate p-1 text-components-input-text-filled',
+            inCell && 'system-xs-regular text-text-secondary',
+          )}>{value}</div>
+          <RiArrowDownSLine className='ml-0.5 h-4 w-4 text-text-quaternary' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className={cn('z-[11] w-full', popupClassName)}>
+        <div className='radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+          {list.map((item: any) => (
+            <div key={item} className='radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
+              onSelect(item)
+              setOpen(false)
+            }}>
+              <div className='system-md-regular grow truncate text-text-secondary'>{item}</div>
+              {value === item && <RiCheckLine className='h-4 w-4 text-text-accent' />}
+            </div>
+          ))}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default VariableTypeSelector

dify/web/app/components/workflow/panel/chat-variable-panel/index.tsx

@@ -0,0 +1,217 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+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 { useDocLink } from '@/context/i18n'
+import cn from '@/utils/classnames'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
+
+const ChatVariablePanel = () => {
+  const { t } = useTranslation()
+  const docLink = useDocLink()
+  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 {
+    invalidateConversationVarValues,
+  } = useInspectVarsCrud()
+  const handleVarChanged = useCallback(() => {
+    doSyncWorkflowDraft(false, {
+      onSuccess() {
+        invalidateConversationVarValues()
+      },
+    })
+  }, [doSyncWorkflowDraft, invalidateConversationVarValues])
+
+  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)
+    handleVarChanged()
+  }, [handleVarChanged, 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)
+      handleVarChanged()
+      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)
+    }
+    handleVarChanged()
+  }, [currentVar, getEffectedNodes, handleVarChanged, store, updateChatVarList, varList])
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+      )}
+    >
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
+        {t('workflow.chatVariable.panelTitle')}
+        <div className='flex items-center gap-1'>
+          <ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
+            <RiBookOpenLine className='h-4 w-4' />
+          </ActionButton>
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={() => setShowChatVariablePanel(false)}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      {showTip && (
+        <div className='shrink-0 px-3 pb-2 pt-2.5'>
+          <div className='radius-2xl relative bg-background-section-burn p-3'>
+            <div className='system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary'>TIPS</div>
+            <div className='system-sm-regular mb-4 mt-1 text-text-secondary'>
+              {t('workflow.chatVariable.panelDescription')}
+              <a target='_blank' rel='noopener noreferrer' className='text-text-accent'
+                href={docLink('/guides/workflow/variables#conversation-variables', {
+                  'zh-Hans': '/guides/workflow/variables#会话变量',
+                  'ja-JP': '/guides/workflow/variables#会話変数',
+                })}>
+                {t('workflow.chatVariable.docLink')}
+              </a>
+            </div>
+            <div className='flex items-center gap-2'>
+              <div className='radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md'>
+                <BubbleX className='mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
+                <div className='system-xs-semibold text-text-secondary'>conversation_var</div>
+                <div className='system-2xs-regular text-text-tertiary'>String</div>
+              </div>
+              <div className='grow'>
+                <div className='mb-2 flex items-center gap-2 py-1'>
+                  <div className='flex h-3 w-16 shrink-0 items-center gap-1 px-1'>
+                    <LongArrowLeft className='h-2 grow text-text-quaternary' />
+                    <div className='system-2xs-medium shrink-0 text-text-tertiary'>WRITE</div>
+                  </div>
+                  <BlockIcon className='shrink-0' type={BlockEnum.Assigner} />
+                  <div className='system-xs-semibold grow truncate text-text-secondary'>{t('workflow.blocks.assigner')}</div>
+                </div>
+                <div className='flex items-center gap-2 py-1'>
+                  <div className='flex h-3 w-16 shrink-0 items-center gap-1 px-1'>
+                    <div className='system-2xs-medium shrink-0 text-text-tertiary'>READ</div>
+                    <LongArrowRight className='h-2 grow text-text-quaternary' />
+                  </div>
+                  <BlockIcon className='shrink-0' type={BlockEnum.LLM} />
+                  <div className='system-xs-semibold grow truncate text-text-secondary'>{t('workflow.blocks.llm')}</div>
+                </div>
+              </div>
+            </div>
+            <div className='absolute right-[38px] top-[-4px] z-10 h-3 w-3 rotate-45 bg-background-section-burn' />
+          </div>
+        </div>
+      )}
+      <div className='shrink-0 px-4 pb-3 pt-2'>
+        <VariableModalTrigger
+          open={showVariableModal}
+          setOpen={setShowVariableModal}
+          showTip={showTip}
+          chatVar={currentVar}
+          onSave={handleSave}
+          onClose={() => setCurrentVar(undefined)}
+        />
+      </div>
+      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
+        {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)

dify/web/app/components/workflow/panel/chat-variable-panel/type.ts

@@ -0,0 +1,10 @@
+export enum ChatVarType {
+  Number = 'number',
+  String = 'string',
+  Boolean = 'boolean',
+  Object = 'object',
+  ArrayString = 'array[string]',
+  ArrayNumber = 'array[number]',
+  ArrayBoolean = 'array[boolean]',
+  ArrayObject = 'array[object]',
+}

dify/web/app/components/workflow/panel/chat-variable-panel/utils.ts

@@ -0,0 +1,35 @@
+export const objectPlaceholder = `#  example
+#  {
+#     "name": "ray",
+#     "age": 20
+#  }`
+
+export const arrayStringPlaceholder = `#  example
+#  [
+#     "value1",
+#     "value2"
+#  ]`
+
+export const arrayNumberPlaceholder = `#  example
+#  [
+#     100,
+#     200
+#  ]`
+
+export const arrayObjectPlaceholder = `#  example
+#  [
+#     {
+#       "name": "ray",
+#       "age": 20
+#     },
+#     {
+#       "name": "lily",
+#       "age": 18
+#     }
+#  ]`
+
+export const arrayBoolPlaceholder = `#  example
+#  [
+#     "True",
+#     "False"
+#  ]`

dify/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -0,0 +1,205 @@
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react'
+import { useNodes } from 'reactflow'
+import { BlockEnum } from '../../types'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../../store'
+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'
+import type { ChatItem, OnSend } from '@/app/components/base/chat/types'
+import { useFeatures } from '@/app/components/base/features/hooks'
+import {
+  fetchSuggestedQuestions,
+  stopChatMessageResponding,
+} from '@/service/debug'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { getLastAnswer, isValidGeneratedAnswer } from '@/app/components/base/chat/utils'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
+
+type ChatWrapperProps = {
+  showConversationVariableModal: boolean
+  onConversationModalHide: () => void
+  showInputsFieldsPanel: boolean
+  onHide: () => void
+}
+
+const ChatWrapper = (
+  {
+    ref,
+    showConversationVariableModal,
+    onConversationModalHide,
+    showInputsFieldsPanel,
+    onHide,
+  }: ChatWrapperProps & {
+    ref: React.RefObject<ChatWrapperRefType>;
+  },
+) => {
+  const nodes = useNodes<StartNodeType>()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const startVariables = startNode?.data.variables
+  const appDetail = useAppStore(s => s.appDetail)
+  const workflowStore = useWorkflowStore()
+  const { inputs, setInputs } = useStore(s => ({
+    inputs: s.inputs,
+    setInputs: s.setInputs,
+  }))
+
+  const initialInputs = useMemo(() => {
+    const initInputs: Record<string, any> = {}
+    if (startVariables) {
+      startVariables.forEach((variable) => {
+        if (variable.default)
+          initInputs[variable.variable] = variable.default
+      })
+    }
+    return initInputs
+  }, [startVariables])
+
+  const features = useFeatures(s => s.features)
+  const config = useMemo(() => {
+    return {
+      opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+      suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
+      suggested_questions_after_answer: features.suggested,
+      text_to_speech: features.text2speech,
+      speech_to_text: features.speech2text,
+      retriever_resource: features.citation,
+      sensitive_word_avoidance: features.moderation,
+      file_upload: features.file,
+    }
+  }, [features.opening, features.suggested, features.text2speech, features.speech2text, features.citation, features.moderation, features.file])
+  const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
+
+  const {
+    conversationId,
+    chatList,
+    handleStop,
+    isResponding,
+    suggestedQuestions,
+    handleSend,
+    handleRestart,
+    setTargetMessageId,
+  } = useChat(
+    config,
+    {
+      inputs,
+      inputsForm: (startVariables || []) as any,
+    },
+    [],
+    taskId => stopChatMessageResponding(appDetail!.id, taskId),
+  )
+
+  const handleRestartChat = useCallback(() => {
+    handleRestart()
+    setInputs(initialInputs)
+  }, [handleRestart, setInputs, initialInputs])
+
+  const doSend: OnSend = useCallback((message, files, isRegenerate = false, parentAnswer: ChatItem | null = null) => {
+    handleSend(
+      {
+        query: message,
+        files,
+        inputs: workflowStore.getState().inputs,
+        conversation_id: conversationId,
+        parent_message_id: (isRegenerate ? parentAnswer?.id : getLastAnswer(chatList)?.id) || undefined,
+      },
+      {
+        onGetSuggestedQuestions: (messageId, getAbortController) => fetchSuggestedQuestions(appDetail!.id, messageId, getAbortController),
+      },
+    )
+  }, [handleSend, workflowStore, conversationId, chatList, appDetail])
+
+  const doRegenerate = useCallback((chatItem: ChatItem, editedQuestion?: { message: string, files?: FileEntity[] }) => {
+    const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
+    const parentAnswer = chatList.find(item => item.id === question.parentMessageId)
+    doSend(editedQuestion ? editedQuestion.message : question.content,
+      editedQuestion ? editedQuestion.files : question.message_files,
+      true,
+      isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null,
+    )
+  }, [chatList, doSend])
+
+  const { eventEmitter } = useEventEmitterContextContext()
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === EVENT_WORKFLOW_STOP)
+      handleStop()
+  })
+
+  useImperativeHandle(ref, () => {
+    return {
+      handleRestart: handleRestartChat,
+    }
+  }, [handleRestartChat])
+
+  useEffect(() => {
+    if (Object.keys(initialInputs).length > 0) {
+      setInputs({
+        ...initialInputs,
+        ...inputs,
+      })
+    }
+  }, [initialInputs])
+
+  useEffect(() => {
+    if (isResponding)
+      onHide()
+  }, [isResponding, onHide])
+
+  return (
+    <>
+      <Chat
+        config={{
+          ...config,
+          supportCitationHitInfo: true,
+        } as any}
+        chatList={chatList}
+        isResponding={isResponding}
+        chatContainerClassName='px-3'
+        chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
+        chatFooterClassName='px-4 rounded-bl-2xl'
+        chatFooterInnerClassName='pb-0'
+        showFileUpload
+        showFeatureBar
+        onFeatureBarClick={setShowFeaturesPanel}
+        onSend={doSend}
+        inputs={inputs}
+        inputsForm={(startVariables || []) as any}
+        onRegenerate={doRegenerate}
+        onStopResponding={handleStop}
+        chatNode={(
+          <>
+            {showInputsFieldsPanel && <UserInput />}
+            {
+              !chatList.length && (
+                <Empty />
+              )
+            }
+          </>
+        )}
+        noSpacing
+        suggestedQuestions={suggestedQuestions}
+        showPromptLog
+        chatAnswerContainerInner='!pr-2'
+        switchSibling={setTargetMessageId}
+      />
+      {showConversationVariableModal && (
+        <ConversationVariableModal
+          conversationID={conversationId}
+          onHide={onConversationModalHide}
+        />
+      )}
+    </>
+  )
+}
+
+ChatWrapper.displayName = 'ChatWrapper'
+
+export default memo(ChatWrapper)

dify/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx

@@ -0,0 +1,156 @@
+'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 {
+  Copy,
+  CopyCheck,
+} 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'
+import { noop } from 'lodash-es'
+
+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={noop}
+      className={cn('h-[640px] w-[920px] max-w-[920px] p-0')}
+    >
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onHide}>
+        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+      </div>
+      <div className='flex h-full w-full'>
+        {/* LEFT */}
+        <div className='flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg'>
+          <div className='system-xl-semibold shrink-0 pb-3 pl-5 pr-4 pt-5 text-text-primary'>{t('workflow.chatVariable.panelTitle')}</div>
+          <div className='grow overflow-y-auto px-3 py-2'>
+            {varList.map(chatVar => (
+              <div key={chatVar.id} className={cn('radius-md group mb-0.5 flex cursor-pointer items-center p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
+                <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 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('system-sm-medium truncate text-text-tertiary 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='flex h-full w-0 grow flex-col bg-components-panel-bg'>
+          <div className='shrink-0 p-4 pb-2'>
+            <div className='flex items-center gap-1 py-1'>
+              <div className='system-xl-semibold text-text-primary'>{currentVar.name}</div>
+              <div className='system-xs-medium text-text-tertiary'>{capitalize(currentVar.value_type)}</div>
+            </div>
+          </div>
+          <div className='flex h-0 grow flex-col p-4 pt-2'>
+            <div className='mb-2 flex shrink-0 items-center gap-2'>
+              <div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
+              <div className='h-px grow' style={{
+                background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
+              }}></div>
+              {latestValueTimestampMap[currentVar.id] && (
+                <div className='system-xs-regular shrink-0 text-text-tertiary'>{t('workflow.chatVariable.updatedAt')}{formatTime(latestValueTimestampMap[currentVar.id], t('appLog.dateTimeFormat') as string)}</div>
+              )}
+            </div>
+            <div className='grow overflow-y-auto'>
+              {currentVar.value_type !== ChatVarType.Number && currentVar.value_type !== ChatVarType.String && (
+                <div className='flex h-full flex-col rounded-lg bg-components-input-bg-normal px-2 pb-2'>
+                  <div className='flex h-7 shrink-0 items-center justify-between pl-3 pr-2 pt-1'>
+                    <div className='system-xs-semibold text-text-secondary'>JSON</div>
+                    <div className='flex items-center p-1'>
+                      {!isCopied
+                        ? (
+                          <Copy className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={handleCopy} />
+                        )
+                        : (
+                          <CopyCheck className='h-4 w-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='system-md-regular h-full overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-4 py-3 text-components-input-text-filled'>{latestValueMap[currentVar.id] || ''}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConversationVariableModal

dify/web/app/components/workflow/panel/debug-and-preview/empty.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+import { ChatBotSlim } from '@/app/components/base/icons/src/vender/line/communication'
+
+const Empty = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
+      <div className='mb-2 flex justify-center'>
+        <ChatBotSlim className='h-12 w-12 text-gray-300' />
+      </div>
+      <div className='w-[256px] text-center text-[13px] text-gray-400'>
+        {t('workflow.common.previewPlaceholder')}
+      </div>
+    </div>
+  )
+}
+
+export default Empty

dify/web/app/components/workflow/panel/debug-and-preview/hooks.ts

@@ -0,0 +1,516 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce, setAutoFreeze } from 'immer'
+import { uniqBy } from 'lodash-es'
+import {
+  useSetWorkflowVarsWithValue,
+  useWorkflowRun,
+} from '../../hooks'
+import { NodeRunningStatus, WorkflowRunningStatus } from '../../types'
+import { useWorkflowStore } from '../../store'
+import { DEFAULT_ITER_TIMES, DEFAULT_LOOP_TIMES } from '../../constants'
+import type {
+  ChatItem,
+  ChatItemInTree,
+  Inputs,
+} from '@/app/components/base/chat/types'
+import type { InputForm } from '@/app/components/base/chat/chat/type'
+import {
+  getProcessedInputs,
+  processOpeningStatement,
+} from '@/app/components/base/chat/chat/utils'
+import { useToastContext } from '@/app/components/base/toast'
+import { TransferMethod } from '@/types/app'
+import {
+  getProcessedFiles,
+  getProcessedFilesFromResponse,
+} from '@/app/components/base/file-uploader/utils'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { getThreadMessages } from '@/app/components/base/chat/utils'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
+import { useHooksStore } from '../../hooks-store'
+
+type GetAbortController = (abortController: AbortController) => void
+type SendCallback = {
+  onGetSuggestedQuestions?: (responseItemId: string, getAbortController: GetAbortController) => Promise<any>
+}
+export const useChat = (
+  config: any,
+  formSettings?: {
+    inputs: Inputs
+    inputsForm: InputForm[]
+  },
+  prevChatTree?: ChatItemInTree[],
+  stopChat?: (taskId: string) => void,
+) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { handleRun } = useWorkflowRun()
+  const hasStopResponded = useRef(false)
+  const workflowStore = useWorkflowStore()
+  const conversationId = useRef('')
+  const taskIdRef = useRef('')
+  const [isResponding, setIsResponding] = useState(false)
+  const isRespondingRef = useRef(false)
+  const configsMap = useHooksStore(s => s.configsMap)
+  const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId)
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue()
+  const [suggestedQuestions, setSuggestQuestions] = useState<string[]>([])
+  const suggestedQuestionsAbortControllerRef = useRef<AbortController | null>(null)
+  const {
+    setIterTimes,
+    setLoopTimes,
+  } = workflowStore.getState()
+
+  const handleResponding = useCallback((isResponding: boolean) => {
+    setIsResponding(isResponding)
+    isRespondingRef.current = isResponding
+  }, [])
+
+  const [chatTree, setChatTree] = useState<ChatItemInTree[]>(prevChatTree || [])
+  const chatTreeRef = useRef<ChatItemInTree[]>(chatTree)
+  const [targetMessageId, setTargetMessageId] = useState<string>()
+  const threadMessages = useMemo(() => getThreadMessages(chatTree, targetMessageId), [chatTree, targetMessageId])
+
+  const getIntroduction = useCallback((str: string) => {
+    return processOpeningStatement(str, formSettings?.inputs || {}, formSettings?.inputsForm || [])
+  }, [formSettings?.inputs, formSettings?.inputsForm])
+
+  /** Final chat list that will be rendered */
+  const chatList = useMemo(() => {
+    const ret = [...threadMessages]
+    if (config?.opening_statement) {
+      const index = threadMessages.findIndex(item => item.isOpeningStatement)
+
+      if (index > -1) {
+        ret[index] = {
+          ...ret[index],
+          content: getIntroduction(config.opening_statement),
+          suggestedQuestions: config.suggested_questions?.map((item: string) => getIntroduction(item)),
+        }
+      }
+      else {
+        ret.unshift({
+          id: `${Date.now()}`,
+          content: getIntroduction(config.opening_statement),
+          isAnswer: true,
+          isOpeningStatement: true,
+          suggestedQuestions: config.suggested_questions?.map((item: string) => getIntroduction(item)),
+        })
+      }
+    }
+    return ret
+  }, [threadMessages, config?.opening_statement, getIntroduction, config?.suggested_questions])
+
+  useEffect(() => {
+    setAutoFreeze(false)
+    return () => {
+      setAutoFreeze(true)
+    }
+  }, [])
+
+  /** Find the target node by bfs and then operate on it */
+  const produceChatTreeNode = useCallback((targetId: string, operation: (node: ChatItemInTree) => void) => {
+    return produce(chatTreeRef.current, (draft) => {
+      const queue: ChatItemInTree[] = [...draft]
+      while (queue.length > 0) {
+        const current = queue.shift()!
+        if (current.id === targetId) {
+          operation(current)
+          break
+        }
+        if (current.children)
+          queue.push(...current.children)
+      }
+    })
+  }, [])
+
+  const handleStop = useCallback(() => {
+    hasStopResponded.current = true
+    handleResponding(false)
+    if (stopChat && taskIdRef.current)
+      stopChat(taskIdRef.current)
+    setIterTimes(DEFAULT_ITER_TIMES)
+    setLoopTimes(DEFAULT_LOOP_TIMES)
+    if (suggestedQuestionsAbortControllerRef.current)
+      suggestedQuestionsAbortControllerRef.current.abort()
+  }, [handleResponding, setIterTimes, setLoopTimes, stopChat])
+
+  const handleRestart = useCallback(() => {
+    conversationId.current = ''
+    taskIdRef.current = ''
+    handleStop()
+    setIterTimes(DEFAULT_ITER_TIMES)
+    setLoopTimes(DEFAULT_LOOP_TIMES)
+    setChatTree([])
+    setSuggestQuestions([])
+  }, [
+    handleStop,
+    setIterTimes,
+    setLoopTimes,
+  ])
+
+  const updateCurrentQAOnTree = useCallback(({
+    parentId,
+    responseItem,
+    placeholderQuestionId,
+    questionItem,
+  }: {
+    parentId?: string
+    responseItem: ChatItem
+    placeholderQuestionId: string
+    questionItem: ChatItem
+  }) => {
+    let nextState: ChatItemInTree[]
+    const currentQA = { ...questionItem, children: [{ ...responseItem, children: [] }] }
+    if (!parentId && !chatTree.some(item => [placeholderQuestionId, questionItem.id].includes(item.id))) {
+      // QA whose parent is not provided is considered as a first message of the conversation,
+      // and it should be a root node of the chat tree
+      nextState = produce(chatTree, (draft) => {
+        draft.push(currentQA)
+      })
+    }
+    else {
+      // find the target QA in the tree and update it; if not found, insert it to its parent node
+      nextState = produceChatTreeNode(parentId!, (parentNode) => {
+        const questionNodeIndex = parentNode.children!.findIndex(item => [placeholderQuestionId, questionItem.id].includes(item.id))
+        if (questionNodeIndex === -1)
+          parentNode.children!.push(currentQA)
+        else
+          parentNode.children![questionNodeIndex] = currentQA
+      })
+    }
+    setChatTree(nextState)
+    chatTreeRef.current = nextState
+  }, [chatTree, produceChatTreeNode])
+
+  const handleSend = useCallback((
+    params: {
+      query: string
+      files?: FileEntity[]
+      parent_message_id?: string
+      [key: string]: any
+    },
+    {
+      onGetSuggestedQuestions,
+    }: SendCallback,
+  ) => {
+    if (isRespondingRef.current) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
+      return false
+    }
+
+    const parentMessage = threadMessages.find(item => item.id === params.parent_message_id)
+
+    const placeholderQuestionId = `question-${Date.now()}`
+    const questionItem = {
+      id: placeholderQuestionId,
+      content: params.query,
+      isAnswer: false,
+      message_files: params.files,
+      parentMessageId: params.parent_message_id,
+    }
+
+    const placeholderAnswerId = `answer-placeholder-${Date.now()}`
+    const placeholderAnswerItem = {
+      id: placeholderAnswerId,
+      content: '',
+      isAnswer: true,
+      parentMessageId: questionItem.id,
+      siblingIndex: parentMessage?.children?.length ?? chatTree.length,
+    }
+
+    setTargetMessageId(parentMessage?.id)
+    updateCurrentQAOnTree({
+      parentId: params.parent_message_id,
+      responseItem: placeholderAnswerItem,
+      placeholderQuestionId,
+      questionItem,
+    })
+
+    // answer
+    const responseItem: ChatItem = {
+      id: placeholderAnswerId,
+      content: '',
+      agent_thoughts: [],
+      message_files: [],
+      isAnswer: true,
+      parentMessageId: questionItem.id,
+      siblingIndex: parentMessage?.children?.length ?? chatTree.length,
+    }
+
+    handleResponding(true)
+
+    const { files, inputs, ...restParams } = params
+    const bodyParams = {
+      files: getProcessedFiles(files || []),
+      inputs: getProcessedInputs(inputs || {}, formSettings?.inputsForm || []),
+      ...restParams,
+    }
+    if (bodyParams?.files?.length) {
+      bodyParams.files = bodyParams.files.map((item) => {
+        if (item.transfer_method === TransferMethod.local_file) {
+          return {
+            ...item,
+            url: '',
+          }
+        }
+        return item
+      })
+    }
+
+    let hasSetResponseId = false
+
+    handleRun(
+      bodyParams,
+      {
+        onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
+          responseItem.content = responseItem.content + message
+
+          if (messageId && !hasSetResponseId) {
+            questionItem.id = `question-${messageId}`
+            responseItem.id = messageId
+            responseItem.parentMessageId = questionItem.id
+            hasSetResponseId = true
+          }
+
+          if (isFirstMessage && newConversationId)
+            conversationId.current = newConversationId
+
+          taskIdRef.current = taskId
+          if (messageId)
+            responseItem.id = messageId
+
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        async onCompleted(hasError?: boolean, errorMessage?: string) {
+          handleResponding(false)
+          fetchInspectVars({})
+          invalidAllLastRun()
+
+          if (hasError) {
+            if (errorMessage) {
+              responseItem.content = errorMessage
+              responseItem.isError = true
+              updateCurrentQAOnTree({
+                placeholderQuestionId,
+                questionItem,
+                responseItem,
+                parentId: params.parent_message_id,
+              })
+            }
+            return
+          }
+
+          if (config?.suggested_questions_after_answer?.enabled && !hasStopResponded.current && onGetSuggestedQuestions) {
+            try {
+              const { data }: any = await onGetSuggestedQuestions(
+                responseItem.id,
+                newAbortController => suggestedQuestionsAbortControllerRef.current = newAbortController,
+              )
+              setSuggestQuestions(data)
+            }
+            // eslint-disable-next-line unused-imports/no-unused-vars
+            catch (error) {
+              setSuggestQuestions([])
+            }
+          }
+        },
+        onMessageEnd: (messageEnd) => {
+          responseItem.citation = messageEnd.metadata?.retriever_resources || []
+          const processedFilesFromResponse = getProcessedFilesFromResponse(messageEnd.files || [])
+          responseItem.allFiles = uniqBy([...(responseItem.allFiles || []), ...(processedFilesFromResponse || [])], 'id')
+
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onMessageReplace: (messageReplace) => {
+          responseItem.content = messageReplace.answer
+        },
+        onError() {
+          handleResponding(false)
+        },
+        onWorkflowStarted: ({ workflow_run_id, task_id }) => {
+          taskIdRef.current = task_id
+          responseItem.workflow_run_id = workflow_run_id
+          responseItem.workflowProcess = {
+            status: WorkflowRunningStatus.Running,
+            tracing: [],
+          }
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onWorkflowFinished: ({ data }) => {
+          responseItem.workflowProcess!.status = data.status as WorkflowRunningStatus
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onIterationStart: ({ data }) => {
+          responseItem.workflowProcess!.tracing!.push({
+            ...data,
+            status: NodeRunningStatus.Running,
+          })
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onIterationFinish: ({ data }) => {
+          const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.id === data.id)
+          if (currentTracingIndex > -1) {
+            responseItem.workflowProcess!.tracing[currentTracingIndex] = {
+              ...responseItem.workflowProcess!.tracing[currentTracingIndex],
+              ...data,
+            }
+            updateCurrentQAOnTree({
+              placeholderQuestionId,
+              questionItem,
+              responseItem,
+              parentId: params.parent_message_id,
+            })
+          }
+        },
+        onLoopStart: ({ data }) => {
+          responseItem.workflowProcess!.tracing!.push({
+            ...data,
+            status: NodeRunningStatus.Running,
+          })
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onLoopFinish: ({ data }) => {
+          const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.id === data.id)
+          if (currentTracingIndex > -1) {
+            responseItem.workflowProcess!.tracing[currentTracingIndex] = {
+              ...responseItem.workflowProcess!.tracing[currentTracingIndex],
+              ...data,
+            }
+            updateCurrentQAOnTree({
+              placeholderQuestionId,
+              questionItem,
+              responseItem,
+              parentId: params.parent_message_id,
+            })
+          }
+        },
+        onNodeStarted: ({ data }) => {
+          responseItem.workflowProcess!.tracing!.push({
+            ...data,
+            status: NodeRunningStatus.Running,
+          } as any)
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onNodeRetry: ({ data }) => {
+          responseItem.workflowProcess!.tracing!.push(data)
+
+          updateCurrentQAOnTree({
+            placeholderQuestionId,
+            questionItem,
+            responseItem,
+            parentId: params.parent_message_id,
+          })
+        },
+        onNodeFinished: ({ data }) => {
+          const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.id === data.id)
+          if (currentTracingIndex > -1) {
+            responseItem.workflowProcess!.tracing[currentTracingIndex] = {
+              ...responseItem.workflowProcess!.tracing[currentTracingIndex],
+              ...data,
+            }
+            updateCurrentQAOnTree({
+              placeholderQuestionId,
+              questionItem,
+              responseItem,
+              parentId: params.parent_message_id,
+            })
+          }
+        },
+        onAgentLog: ({ data }) => {
+          const currentNodeIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.node_id === data.node_id)
+          if (currentNodeIndex > -1) {
+            const current = responseItem.workflowProcess!.tracing![currentNodeIndex]
+
+            if (current.execution_metadata) {
+              if (current.execution_metadata.agent_log) {
+                const currentLogIndex = current.execution_metadata.agent_log.findIndex(log => log.message_id === data.message_id)
+                if (currentLogIndex > -1) {
+                  current.execution_metadata.agent_log[currentLogIndex] = {
+                    ...current.execution_metadata.agent_log[currentLogIndex],
+                    ...data,
+                  }
+                }
+                else {
+                  current.execution_metadata.agent_log.push(data)
+                }
+              }
+              else {
+                current.execution_metadata.agent_log = [data]
+              }
+            }
+            else {
+              current.execution_metadata = {
+                agent_log: [data],
+              } as any
+            }
+
+            responseItem.workflowProcess!.tracing[currentNodeIndex] = {
+              ...current,
+            }
+
+            updateCurrentQAOnTree({
+              placeholderQuestionId,
+              questionItem,
+              responseItem,
+              parentId: params.parent_message_id,
+            })
+          }
+        },
+      },
+    )
+  }, [threadMessages, chatTree.length, updateCurrentQAOnTree, handleResponding, formSettings?.inputsForm, handleRun, notify, t, config?.suggested_questions_after_answer?.enabled, fetchInspectVars, invalidAllLastRun])
+
+  return {
+    conversationId: conversationId.current,
+    chatList,
+    setTargetMessageId,
+    handleSend,
+    handleStop,
+    handleRestart,
+    isResponding,
+    suggestedQuestions,
+  }
+}

dify/web/app/components/workflow/panel/debug-and-preview/index.spec.tsx

@@ -0,0 +1,145 @@
+/**
+ * Debug and Preview Panel Width Persistence Tests
+ * Tests for GitHub issue #22745: Panel width persistence bug fix
+ */
+
+import '@testing-library/jest-dom'
+
+type PanelWidthSource = 'user' | 'system'
+
+// Mock localStorage for testing
+const createMockLocalStorage = () => {
+  const storage: Record<string, string> = {}
+  return {
+    getItem: jest.fn((key: string) => storage[key] || null),
+    setItem: jest.fn((key: string, value: string) => {
+      storage[key] = value
+    }),
+    removeItem: jest.fn((key: string) => {
+      delete storage[key]
+    }),
+    clear: jest.fn(() => {
+      Object.keys(storage).forEach(key => delete storage[key])
+    }),
+    get storage() { return { ...storage } },
+  }
+}
+
+// Preview panel width logic
+const createPreviewPanelManager = () => {
+  const storageKey = 'debug-and-preview-panel-width'
+
+  return {
+    updateWidth: (width: number, source: PanelWidthSource = 'user') => {
+      const newValue = Math.max(400, Math.min(width, 800))
+      if (source === 'user')
+        localStorage.setItem(storageKey, `${newValue}`)
+
+      return newValue
+    },
+    getStoredWidth: () => {
+      const stored = localStorage.getItem(storageKey)
+      return stored ? Number.parseFloat(stored) : 400
+    },
+  }
+}
+
+describe('Debug and Preview Panel Width Persistence', () => {
+  let mockLocalStorage: ReturnType<typeof createMockLocalStorage>
+
+  beforeEach(() => {
+    mockLocalStorage = createMockLocalStorage()
+    Object.defineProperty(globalThis, 'localStorage', {
+      value: mockLocalStorage,
+      writable: true,
+    })
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Preview Panel Width Management', () => {
+    it('should save user resize to localStorage', () => {
+      const manager = createPreviewPanelManager()
+
+      const result = manager.updateWidth(450, 'user')
+
+      expect(result).toBe(450)
+      expect(localStorage.setItem).toHaveBeenCalledWith('debug-and-preview-panel-width', '450')
+    })
+
+    it('should not save system compression to localStorage', () => {
+      const manager = createPreviewPanelManager()
+
+      const result = manager.updateWidth(300, 'system')
+
+      expect(result).toBe(400) // Respects minimum width
+      expect(localStorage.setItem).not.toHaveBeenCalled()
+    })
+
+    it('should behave identically to Node Panel', () => {
+      const manager = createPreviewPanelManager()
+
+      // Both user and system operations should behave consistently
+      manager.updateWidth(500, 'user')
+      expect(localStorage.setItem).toHaveBeenCalledWith('debug-and-preview-panel-width', '500')
+
+      manager.updateWidth(200, 'system')
+      expect(localStorage.getItem('debug-and-preview-panel-width')).toBe('500')
+    })
+  })
+
+  describe('Dual Panel Scenario', () => {
+    it('should maintain independence from Node Panel', () => {
+      localStorage.setItem('workflow-node-panel-width', '600')
+      localStorage.setItem('debug-and-preview-panel-width', '450')
+
+      const manager = createPreviewPanelManager()
+
+      // System compresses preview panel
+      manager.updateWidth(200, 'system')
+
+      // Only preview panel storage key should be unaffected
+      expect(localStorage.getItem('debug-and-preview-panel-width')).toBe('450')
+      expect(localStorage.getItem('workflow-node-panel-width')).toBe('600')
+    })
+
+    it('should handle F12 scenario consistently', () => {
+      const manager = createPreviewPanelManager()
+
+      // User sets preference
+      manager.updateWidth(500, 'user')
+      expect(localStorage.getItem('debug-and-preview-panel-width')).toBe('500')
+
+      // F12 opens causing viewport compression
+      manager.updateWidth(180, 'system')
+
+      // User preference preserved
+      expect(localStorage.getItem('debug-and-preview-panel-width')).toBe('500')
+    })
+  })
+
+  describe('Consistency with Node Panel', () => {
+    it('should enforce same minimum width rules', () => {
+      const manager = createPreviewPanelManager()
+
+      // Same 400px minimum as Node Panel
+      const result = manager.updateWidth(300, 'user')
+      expect(result).toBe(400)
+      expect(localStorage.setItem).toHaveBeenCalledWith('debug-and-preview-panel-width', '400')
+    })
+
+    it('should use same source parameter pattern', () => {
+      const manager = createPreviewPanelManager()
+
+      // Default to 'user' when source not specified
+      manager.updateWidth(500)
+      expect(localStorage.setItem).toHaveBeenCalledWith('debug-and-preview-panel-width', '500')
+
+      // Explicit 'system' source
+      manager.updateWidth(300, 'system')
+      expect(localStorage.setItem).toHaveBeenCalledTimes(1) // Only user call
+    })
+  })
+})

dify/web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -0,0 +1,142 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
+import {
+  useWorkflowInteractions,
+} from '../../hooks'
+import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
+import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
+import { BlockEnum } from '../../types'
+import type { StartNodeType } from '../../nodes/start/types'
+import { useResizePanel } from '../../nodes/_base/hooks/use-resize-panel'
+import ChatWrapper from './chat-wrapper'
+import cn from '@/utils/classnames'
+import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
+import Tooltip from '@/app/components/base/tooltip'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
+import { useStore } from '@/app/components/workflow/store'
+import { debounce, noop } from 'lodash-es'
+
+export type ChatWrapperRefType = {
+  handleRestart: () => void
+}
+const DebugAndPreview = () => {
+  const { t } = useTranslation()
+  const chatRef = useRef({ handleRestart: noop })
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+  const { handleNodeCancelRunningStatus } = useNodesInteractionsWithoutSync()
+  const { handleEdgeCancelRunningStatus } = useEdgesInteractionsWithoutSync()
+  const [expanded, setExpanded] = useState(true)
+  const nodes = useNodes<StartNodeType>()
+  const selectedNode = nodes.find(node => node.data.selected)
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const variables = startNode?.data.variables || []
+  const visibleVariables = variables
+
+  const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)
+
+  const handleRestartChat = () => {
+    handleNodeCancelRunningStatus()
+    handleEdgeCancelRunningStatus()
+    chatRef.current.handleRestart()
+  }
+
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const nodePanelWidth = useStore(s => s.nodePanelWidth)
+  const panelWidth = useStore(s => s.previewPanelWidth)
+  const setPanelWidth = useStore(s => s.setPreviewPanelWidth)
+  const handleResize = useCallback((width: number, source: 'user' | 'system' = 'user') => {
+    if (source === 'user')
+      localStorage.setItem('debug-and-preview-panel-width', `${width}`)
+    setPanelWidth(width)
+  }, [setPanelWidth])
+  const maxPanelWidth = useMemo(() => {
+    if (!workflowCanvasWidth)
+      return 720
+
+    if (!selectedNode)
+      return workflowCanvasWidth - 400
+
+    return workflowCanvasWidth - 400 - 400
+  }, [workflowCanvasWidth, selectedNode, nodePanelWidth])
+  const {
+    triggerRef,
+    containerRef,
+  } = useResizePanel({
+    direction: 'horizontal',
+    triggerDirection: 'left',
+    minWidth: 400,
+    maxWidth: maxPanelWidth,
+    onResize: debounce((width: number) => {
+      handleResize(width, 'user')
+    }),
+  })
+
+  return (
+    <div className='relative h-full'>
+      <div
+        ref={triggerRef}
+        className='absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center'>
+        <div className='h-10 w-0.5 rounded-sm bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid'></div>
+      </div>
+      <div
+        ref={containerRef}
+        className={cn(
+          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
+        )}
+        style={{ width: `${panelWidth}px` }}
+      >
+        <div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
+          <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
+          <div className='flex items-center gap-1'>
+            <Tooltip
+              popupContent={t('common.operation.refresh')}
+            >
+              <ActionButton onClick={() => handleRestartChat()}>
+                <RefreshCcw01 className='h-4 w-4' />
+              </ActionButton>
+            </Tooltip>
+            {visibleVariables.length > 0 && (
+              <div className='relative'>
+                <Tooltip
+                  popupContent={t('workflow.panel.userInputField')}
+                >
+                  <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
+                    <RiEqualizer2Line className='h-4 w-4' />
+                  </ActionButton>
+                </Tooltip>
+                {expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg' />}
+              </div>
+            )}
+            <div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>
+            <div
+              className='flex h-6 w-6 cursor-pointer items-center justify-center'
+              onClick={handleCancelDebugAndPreviewPanel}
+            >
+              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+            </div>
+          </div>
+        </div>
+        <div className='grow overflow-y-auto rounded-b-2xl'>
+          <ChatWrapper
+            ref={chatRef}
+            showConversationVariableModal={showConversationVariableModal}
+            onConversationModalHide={() => setShowConversationVariableModal(false)}
+            showInputsFieldsPanel={expanded}
+            onHide={() => setExpanded(false)}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(DebugAndPreview)

dify/web/app/components/workflow/panel/debug-and-preview/user-input.tsx

@@ -0,0 +1,58 @@
+import {
+  memo,
+} from 'react'
+import { useNodes } from 'reactflow'
+import FormItem from '../../nodes/_base/components/before-run-form/form-item'
+import { BlockEnum } from '../../types'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../../store'
+import type { StartNodeType } from '../../nodes/start/types'
+import cn from '@/utils/classnames'
+
+const UserInput = () => {
+  const workflowStore = useWorkflowStore()
+  const inputs = useStore(s => s.inputs)
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
+  const nodes = useNodes<StartNodeType>()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const variables = startNode?.data.variables || []
+  const visibleVariables = showDebugAndPreviewPanel ? variables : variables.filter(v => v.hide !== true)
+
+  const handleValueChange = (variable: string, v: string) => {
+    const {
+      inputs,
+      setInputs,
+    } = workflowStore.getState()
+    setInputs({
+      ...inputs,
+      [variable]: v,
+    })
+  }
+
+  if (!visibleVariables.length)
+    return null
+
+  return (
+    <div className={cn('relative z-[1] rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs')}>
+      <div className='px-4 pb-4 pt-3'>
+        {visibleVariables.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>
+  )
+}
+
+export default memo(UserInput)

dify/web/app/components/workflow/panel/env-panel/env-item.tsx

@@ -0,0 +1,65 @@
+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(
+      'radius-md group mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
+    )}>
+      <div className='px-2.5 py-2'>
+        <div className='flex items-center justify-between'>
+          <div className='flex grow items-center gap-1'>
+            <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
+            <div className='system-sm-medium text-text-primary'>{env.name}</div>
+            <div className='system-xs-medium text-text-tertiary'>{capitalize(env.value_type)}</div>
+            {env.value_type === 'secret' && <RiLock2Line className='h-3 w-3 text-text-tertiary' />}
+          </div>
+          <div className='flex shrink-0 items-center gap-1 text-text-tertiary'>
+            <div className='radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary'>
+              <RiEditLine className='h-4 w-4' onClick={() => onEdit(env)}/>
+            </div>
+            <div
+              className='radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive'
+              onMouseOver={() => setDestructive(true)}
+              onMouseOut={() => setDestructive(false)}
+            >
+              <RiDeleteBinLine className='h-4 w-4' onClick={() => onDelete(env)} />
+            </div>
+          </div>
+        </div>
+        <div className='system-xs-regular truncate text-text-tertiary'>{env.value_type === 'secret' ? envSecrets[env.id] : env.value}</div>
+      </div>
+      {env.description && (
+        <>
+          <div className={'h-[0.5px] bg-divider-subtle'} />
+          <div className={cn('rounded-bl-[8px] rounded-br-[8px] bg-background-default-subtle px-2.5 py-2 group-hover:bg-transparent',
+            destructive && 'bg-state-destructive-hover hover:bg-state-destructive-hover',
+          )}>
+            <div className='system-xs-regular truncate text-text-tertiary'>{env.description}</div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default memo(EnvItem)

dify/web/app/components/workflow/panel/env-panel/index.tsx

@@ -0,0 +1,195 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import {
+  useStoreApi,
+} from 'reactflow'
+import { RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@/app/components/workflow/store'
+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'
+import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
+import cn from '@/utils/classnames'
+import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
+
+const EnvPanel = () => {
+  const { t } = useTranslation()
+  const store = useStoreApi()
+  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const envList = useStore(s => s.environmentVariables) as EnvironmentVariable[]
+  const envSecrets = useStore(s => s.envSecrets)
+  const updateEnvList = useStore(s => s.setEnvironmentVariables)
+  const setEnvSecrets = useStore(s => s.setEnvSecrets)
+  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+
+  const [showVariableModal, setShowVariableModal] = useState(false)
+  const [currentVar, setCurrentVar] = useState<EnvironmentVariable>()
+
+  const [showRemoveVarConfirm, setShowRemoveConfirm] = useState(false)
+  const [cacheForDelete, setCacheForDelete] = useState<EnvironmentVariable>()
+
+  const formatSecret = (s: string) => {
+    return s.length > 8 ? `${s.slice(0, 6)}************${s.slice(-2)}` : '********************'
+  }
+
+  const getEffectedNodes = useCallback((env: EnvironmentVariable) => {
+    const { getNodes } = store.getState()
+    const allNodes = getNodes()
+    return findUsedVarNodes(
+      ['env', env.name],
+      allNodes,
+    )
+  }, [store])
+
+  const removeUsedVarInNodes = useCallback((env: EnvironmentVariable) => {
+    const { getNodes, setNodes } = store.getState()
+    const effectedNodes = getEffectedNodes(env)
+    const newNodes = getNodes().map((node) => {
+      if (effectedNodes.find(n => n.id === node.id))
+        return updateNodeVars(node, ['env', env.name], [])
+
+      return node
+    })
+    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))
+    setCacheForDelete(undefined)
+    setShowRemoveConfirm(false)
+    doSyncWorkflowDraft()
+    if (env.value_type === 'secret') {
+      const newMap = { ...envSecrets }
+      delete newMap[env.id]
+      setEnvSecrets(newMap)
+    }
+  }, [doSyncWorkflowDraft, envList, envSecrets, removeUsedVarInNodes, setEnvSecrets, updateEnvList])
+
+  const deleteCheck = useCallback((env: EnvironmentVariable) => {
+    const effectedNodes = getEffectedNodes(env)
+    if (effectedNodes.length > 0) {
+      setCacheForDelete(env)
+      setShowRemoveConfirm(true)
+    }
+    else {
+      handleDelete(env)
+    }
+  }, [getEffectedNodes, handleDelete])
+
+  const handleSave = useCallback(async (env: EnvironmentVariable) => {
+    // add env
+    let newEnv = env
+    if (!currentVar) {
+      if (env.value_type === 'secret') {
+        setEnvSecrets({
+          ...envSecrets,
+          [env.id]: formatSecret(env.value),
+        })
+      }
+      const newList = [env, ...envList]
+      updateEnvList(newList)
+      await doSyncWorkflowDraft()
+      updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
+      return
+    }
+    else if (currentVar.value_type === 'secret') {
+      if (env.value_type === 'secret') {
+        if (envSecrets[currentVar.id] !== env.value) {
+          newEnv = env
+          setEnvSecrets({
+            ...envSecrets,
+            [env.id]: formatSecret(env.value),
+          })
+        }
+        else {
+          newEnv = { ...env, value: '[__HIDDEN__]' }
+        }
+      }
+    }
+    else {
+      if (env.value_type === 'secret') {
+        newEnv = env
+        setEnvSecrets({
+          ...envSecrets,
+          [env.id]: formatSecret(env.value),
+        })
+      }
+    }
+    const newList = envList.map(e => e.id === currentVar.id ? newEnv : e)
+    updateEnvList(newList)
+    // side effects of rename env
+    if (currentVar.name !== env.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, ['env', currentVar.name], ['env', env.name])
+
+        return node
+      })
+      setNodes(newNodes)
+    }
+    await doSyncWorkflowDraft()
+    updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
+  }, [currentVar, doSyncWorkflowDraft, envList, envSecrets, getEffectedNodes, setEnvSecrets, store, updateEnvList])
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+      )}
+    >
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
+        {t('workflow.env.envPanelTitle')}
+        <div className='flex items-center'>
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={() => setShowEnvPanel(false)}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.env.envDescription')}</div>
+      <div className='shrink-0 px-4 pb-3 pt-2'>
+        <VariableTrigger
+          open={showVariableModal}
+          setOpen={setShowVariableModal}
+          env={currentVar}
+          onSave={handleSave}
+          onClose={() => setCurrentVar(undefined)}
+        />
+      </div>
+      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
+        {envList.map(env => (
+          <EnvItem
+            key={env.id}
+            env={env}
+            onEdit={handleEdit}
+            onDelete={deleteCheck}
+          />
+        ))}
+      </div>
+      <RemoveEffectVarConfirm
+        isShow={showRemoveVarConfirm}
+        onCancel={() => setShowRemoveConfirm(false)}
+        onConfirm={() => cacheForDelete && handleDelete(cacheForDelete)}
+      />
+    </div>
+  )
+}
+
+export default memo(EnvPanel)

dify/web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { v4 as uuid4 } from 'uuid'
+import { RiCloseLine } from '@remixicon/react'
+import { useContext } from 'use-context-selector'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Tooltip from '@/app/components/base/tooltip'
+import { ToastContext } from '@/app/components/base/toast'
+import { useStore } from '@/app/components/workflow/store'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
+
+export type ModalPropsType = {
+  env?: EnvironmentVariable
+  onClose: () => void
+  onSave: (env: EnvironmentVariable) => void
+}
+const VariableModal = ({
+  env,
+  onClose,
+  onSave,
+}: ModalPropsType) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const envList = useStore(s => s.environmentVariables)
+  const envSecrets = useStore(s => s.envSecrets)
+  const [type, setType] = React.useState<'string' | 'number' | 'secret'>('string')
+  const [name, setName] = React.useState('')
+  const [value, setValue] = React.useState<any>()
+  const [description, setDescription] = React.useState<string>('')
+
+  const checkVariableName = (value: string) => {
+    const { isValid, errorMessageKey } = checkKeys([value], false)
+    if (!isValid) {
+      notify({
+        type: 'error',
+        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+      })
+      return false
+    }
+    return true
+  }
+
+  const handleVarNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    replaceSpaceWithUnderscoreInVarNameInput(e.target)
+    if (!!e.target.value && !checkVariableName(e.target.value))
+      return
+    setName(e.target.value || '')
+  }
+
+  const handleSave = () => {
+    if (!checkVariableName(name))
+      return
+    if (!value)
+      return notify({ type: 'error', message: 'value can not be empty' })
+
+    // Add check for duplicate name when editing
+    if (env && env.name !== name && envList.some(e => e.name === name))
+      return notify({ type: 'error', message: 'name is existed' })
+    // Original check for create new variable
+    if (!env && envList.some(e => e.name === name))
+      return notify({ type: 'error', message: 'name is existed' })
+
+    onSave({
+      id: env ? env.id : uuid4(),
+      value_type: type,
+      name,
+      value: type === 'number' ? Number(value) : value,
+      description,
+    })
+    onClose()
+  }
+
+  useEffect(() => {
+    if (env) {
+      setType(env.value_type)
+      setName(env.name)
+      setValue(env.value_type === 'secret' ? envSecrets[env.id] : env.value)
+      setDescription(env.description)
+    }
+  }, [env, envSecrets])
+
+  return (
+    <div
+      className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl')}
+    >
+      <div className='system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
+        {!env ? t('workflow.env.modal.title') : t('workflow.env.modal.editTitle')}
+        <div className='flex items-center'>
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={onClose}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='px-4 py-2'>
+        {/* type */}
+        <div className='mb-4'>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.type')}</div>
+          <div className='flex gap-2'>
+            <div className={cn(
+              'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+              type === 'string' && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
+            )} onClick={() => setType('string')}>String</div>
+            <div className={cn(
+              'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+              type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
+            )} onClick={() => {
+              setType('number')
+              if (!(/^\d$/).test(value))
+                setValue('')
+            }}>Number</div>
+            <div className={cn(
+              'radius-md system-sm-regular flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+              type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
+            )} onClick={() => setType('secret')}>
+              <span>Secret</span>
+              <Tooltip
+                popupContent={
+                  <div className='w-[240px]'>
+                    {t('workflow.env.modal.secretTip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-3.5 h-3.5'
+              />
+            </div>
+          </div>
+        </div>
+        {/* name */}
+        <div className='mb-4'>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.name')}</div>
+          <div className='flex'>
+            <Input
+              placeholder={t('workflow.env.modal.namePlaceholder') || ''}
+              value={name}
+              onChange={handleVarNameChange}
+              onBlur={e => checkVariableName(e.target.value)}
+              type='text'
+            />
+          </div>
+        </div>
+        {/* value */}
+        <div className='mb-4'>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.value')}</div>
+          <div className='flex'>
+            {
+              type !== 'number' ? <textarea
+                className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+                value={value}
+                placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
+                onChange={e => setValue(e.target.value)}
+              />
+                : <Input
+                  placeholder={t('workflow.env.modal.valuePlaceholder') || ''}
+                  value={value}
+                  onChange={e => setValue(e.target.value)}
+                  type="number"
+                />
+            }
+          </div>
+        </div>
+        {/* description */}
+        <div className=''>
+          <div className='system-sm-semibold mb-1 flex h-6 items-center text-text-secondary'>{t('workflow.env.modal.description')}</div>
+          <div className='flex'>
+            <textarea
+              className='system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs'
+              value={description}
+              placeholder={t('workflow.env.modal.descriptionPlaceholder') || ''}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-row-reverse rounded-b-2xl p-4 pt-2'>
+        <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 VariableModal

dify/web/app/components/workflow/panel/env-panel/variable-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/env-panel/variable-modal'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+
+type Props = {
+  open: boolean
+  setOpen: (value: React.SetStateAction<boolean>) => void
+  env?: EnvironmentVariable
+  onClose: () => void
+  onSave: (env: EnvironmentVariable) => void
+}
+
+const VariableTrigger = ({
+  open,
+  setOpen,
+  env,
+  onClose,
+  onSave,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={() => {
+        setOpen(v => !v)
+        if (open)
+          onClose()
+      }}
+      placement='left-start'
+      offset={{
+        mainAxis: 8,
+        alignmentAxis: -104,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => {
+        setOpen(v => !v)
+        if (open)
+          onClose()
+      }}>
+        <Button variant='primary'>
+          <RiAddLine className='mr-1 h-4 w-4' />
+          <span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <VariableModal
+          env={env}
+          onSave={onSave}
+          onClose={() => {
+            onClose()
+            setOpen(false)
+          }}
+        />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default VariableTrigger

dify/web/app/components/workflow/panel/global-variable-panel/index.tsx

@@ -0,0 +1,91 @@
+import {
+  memo,
+} from 'react'
+
+import { RiCloseLine } from '@remixicon/react'
+import type { GlobalVariable } from '../../types'
+import Item from './item'
+import { useStore } from '@/app/components/workflow/store'
+
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import { useIsChatMode } from '../../hooks'
+import { isInWorkflowPage } from '../../constants'
+
+const Panel = () => {
+  const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
+  const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
+  const isWorkflowPage = isInWorkflowPage()
+
+  const globalVariableList: GlobalVariable[] = [
+    ...(isChatMode ? [{
+      name: 'conversation_id',
+      value_type: 'string' as const,
+      description: t('workflow.globalVar.fieldsDescription.conversationId'),
+    },
+    {
+      name: 'dialog_count',
+      value_type: 'number' as const,
+      description: t('workflow.globalVar.fieldsDescription.dialogCount'),
+    }] : []),
+    {
+      name: 'user_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.userId'),
+    },
+    {
+      name: 'app_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.appId'),
+    },
+    {
+      name: 'workflow_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.workflowId'),
+    },
+    {
+      name: 'workflow_run_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.workflowRunId'),
+    },
+    // is workflow
+    ...((isWorkflowPage && !isChatMode) ? [{
+      name: 'timestamp',
+      value_type: 'number' as const,
+      description: t('workflow.globalVar.fieldsDescription.triggerTimestamp'),
+    }] : []),
+  ]
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
+      )}
+    >
+      <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
+        {t('workflow.globalVar.title')}
+        <div className='flex items-center'>
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={() => setShowPanel(false)}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.globalVar.description')}</div>
+
+      <div className='mt-4 grow overflow-y-auto rounded-b-2xl px-4'>
+        {globalVariableList.map(item => (
+          <Item
+            key={item.name}
+            payload={item}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default memo(Panel)

dify/web/app/components/workflow/panel/global-variable-panel/item.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react'
+import { capitalize } from 'lodash-es'
+import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
+
+import type { GlobalVariable } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  payload: GlobalVariable
+}
+
+const Item = ({
+  payload,
+}: Props) => {
+  return (
+    <div className={cn(
+      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+    )}>
+      <div className='flex items-center justify-between'>
+        <div className='flex grow items-center gap-1'>
+          <GlobalVariableIcon className='h-4 w-4 text-util-colors-orange-orange-600' />
+          <div className='system-sm-medium text-text-primary'>
+            <span className='text-text-tertiary'>sys.</span>
+            {payload.name}
+          </div>
+          <div className='system-xs-medium text-text-tertiary'>{capitalize(payload.value_type)}</div>
+        </div>
+      </div>
+      <div className='system-xs-regular mt-1.5 truncate text-text-tertiary'>{payload.description}</div>
+    </div>
+  )
+}
+
+export default memo(Item)

dify/web/app/components/workflow/panel/index.tsx

@@ -0,0 +1,156 @@
+import type { FC } from 'react'
+import { memo, useCallback, useEffect, useRef } from 'react'
+import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel'
+import { useShallow } from 'zustand/react/shallow'
+import { useStore as useReactflow } from 'reactflow'
+import { Panel as NodePanel } from '../nodes'
+import { useStore } from '../store'
+import EnvPanel from './env-panel'
+import cn from '@/utils/classnames'
+import dynamic from 'next/dynamic'
+
+const VersionHistoryPanel = dynamic(() => import('@/app/components/workflow/panel/version-history-panel'), {
+  ssr: false,
+})
+
+export type PanelProps = {
+  components?: {
+    left?: React.ReactNode
+    right?: React.ReactNode
+  }
+  versionHistoryPanelProps?: VersionHistoryPanelProps
+}
+
+/**
+ * Reference MDN standard implementation：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserverEntry/borderBoxSize
+ */
+const getEntryWidth = (entry: ResizeObserverEntry, element: HTMLElement): number => {
+  if (entry.borderBoxSize?.length > 0)
+    return entry.borderBoxSize[0].inlineSize
+
+  if (entry.contentRect.width > 0)
+    return entry.contentRect.width
+
+  return element.getBoundingClientRect().width
+}
+
+const useResizeObserver = (
+  callback: (width: number) => void,
+  dependencies: React.DependencyList = [],
+) => {
+  const elementRef = useRef<HTMLDivElement>(null)
+
+  const stableCallback = useCallback(callback, [callback])
+
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = getEntryWidth(entry, element)
+        stableCallback(width)
+      }
+    })
+
+    resizeObserver.observe(element)
+
+    const initialWidth = element.getBoundingClientRect().width
+    stableCallback(initialWidth)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [stableCallback, ...dependencies])
+  return elementRef
+}
+
+const Panel: FC<PanelProps> = ({
+  components,
+  versionHistoryPanelProps,
+}) => {
+  const selectedNode = useReactflow(useShallow((s) => {
+    const nodes = s.getNodes()
+    const currentNode = nodes.find(node => node.data.selected)
+
+    if (currentNode) {
+      return {
+        id: currentNode.id,
+        type: currentNode.type,
+        data: currentNode.data,
+      }
+    }
+  }))
+  const showEnvPanel = useStore(s => s.showEnvPanel)
+  const isRestoring = useStore(s => s.isRestoring)
+  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
+
+  // widths used for adaptive layout
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const previewPanelWidth = useStore(s => s.previewPanelWidth)
+  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
+
+  // When a node is selected and the NodePanel appears, if the current width
+  // of preview/otherPanel is too large, it may result in the total width of
+  // the two panels exceeding the workflowCanvasWidth, causing the NodePanel
+  // to be pushed out. Here we check and, if necessary, reduce the previewPanelWidth
+  // to "workflowCanvasWidth - 400 (minimum NodePanel width) - 400 (minimum canvas space)",
+  // while still ensuring that previewPanelWidth ≥ 400.
+
+  useEffect(() => {
+    if (!selectedNode || !workflowCanvasWidth)
+      return
+
+    const reservedCanvasWidth = 400 // Reserve the minimum visible width for the canvas
+    const minNodePanelWidth = 400
+    const maxAllowed = Math.max(workflowCanvasWidth - reservedCanvasWidth - minNodePanelWidth, 400)
+
+    if (previewPanelWidth > maxAllowed)
+      setPreviewPanelWidth(maxAllowed)
+  }, [selectedNode, workflowCanvasWidth, previewPanelWidth, setPreviewPanelWidth])
+
+  const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
+  const setOtherPanelWidth = useStore(s => s.setOtherPanelWidth)
+
+  const rightPanelRef = useResizeObserver(
+    setRightPanelWidth,
+    [setRightPanelWidth, selectedNode, showEnvPanel, showWorkflowVersionHistoryPanel],
+  )
+
+  const otherPanelRef = useResizeObserver(
+    setOtherPanelWidth,
+    [setOtherPanelWidth, showEnvPanel, showWorkflowVersionHistoryPanel],
+  )
+
+  return (
+    <div
+      ref={rightPanelRef}
+      tabIndex={-1}
+      className={cn('absolute bottom-1 right-0 top-14 z-10 flex outline-none')}
+      key={`${isRestoring}`}
+    >
+      {components?.left}
+      {!!selectedNode && <NodePanel {...selectedNode} />}
+      <div
+        className="relative"
+        ref={otherPanelRef}
+      >
+        {
+          components?.right
+        }
+        {
+          showWorkflowVersionHistoryPanel && (
+            <VersionHistoryPanel {...versionHistoryPanelProps} />
+          )
+        }
+        {
+          showEnvPanel && (
+            <EnvPanel />
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(Panel)

dify/web/app/components/workflow/panel/inputs-panel.tsx

@@ -0,0 +1,143 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
+import FormItem from '../nodes/_base/components/before-run-form/form-item'
+import {
+  BlockEnum,
+  InputVarType,
+  WorkflowRunningStatus,
+} from '../types'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../store'
+import { useWorkflowRun } from '../hooks'
+import type { StartNodeType } from '../nodes/start/types'
+import { TransferMethod } from '../../base/text-generation/types'
+import Button from '@/app/components/base/button'
+import {
+  getProcessedInputs,
+} from '@/app/components/base/chat/chat/utils'
+import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
+import { useHooksStore } from '../hooks-store'
+
+type Props = {
+  onRun: () => void
+}
+
+const InputsPanel = ({ onRun }: Props) => {
+  const { t } = useTranslation()
+  const workflowStore = useWorkflowStore()
+  const { inputs } = useStore(s => ({
+    inputs: s.inputs,
+    setInputs: s.setInputs,
+  }))
+  const fileSettings = useHooksStore(s => s.configsMap?.fileSettings)
+  const nodes = useNodes<StartNodeType>()
+  const files = useStore(s => s.files)
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+  const {
+    handleRun,
+  } = useWorkflowRun()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const startVariables = startNode?.data.variables
+  const { checkInputsForm } = useCheckInputsForms()
+
+  const initialInputs = { ...inputs }
+  if (startVariables) {
+    startVariables.forEach((variable) => {
+      if (variable.default)
+        initialInputs[variable.variable] = variable.default
+      if (inputs[variable.variable] !== undefined)
+        initialInputs[variable.variable] = inputs[variable.variable]
+    })
+  }
+
+  const variables = useMemo(() => {
+    const data = startVariables || []
+    if (fileSettings?.image?.enabled) {
+      return [
+        ...data,
+        {
+          type: InputVarType.files,
+          variable: '__image',
+          required: false,
+          label: 'files',
+        },
+      ]
+    }
+
+    return data
+  }, [fileSettings?.image?.enabled, startVariables])
+
+  const handleValueChange = (variable: string, v: any) => {
+    const {
+      inputs,
+      setInputs,
+    } = workflowStore.getState()
+    if (variable === '__image') {
+      workflowStore.setState({
+        files: v,
+      })
+    }
+    else {
+      setInputs({
+        ...inputs,
+        [variable]: v,
+      })
+    }
+  }
+
+  const doRun = useCallback(() => {
+    if (!checkInputsForm(initialInputs, variables as any))
+      return
+    onRun()
+    handleRun({ inputs: getProcessedInputs(initialInputs, variables as any), files })
+  }, [files, handleRun, initialInputs, onRun, variables, checkInputsForm])
+
+  const canRun = useMemo(() => {
+    if (files?.some(item => (item.transfer_method as any) === TransferMethod.local_file && !item.upload_file_id))
+      return false
+
+    return true
+  }, [files])
+
+  return (
+    <>
+      <div className='px-4 pb-2 pt-3'>
+        {
+          variables.map((variable, index) => (
+            <div
+              key={variable.variable}
+              className='mb-2 last-of-type:mb-0'
+            >
+              <FormItem
+                autoFocus={index === 0}
+                className='!block'
+                payload={variable}
+                value={initialInputs[variable.variable]}
+                onChange={v => handleValueChange(variable.variable, v)}
+              />
+            </div>
+          ))
+        }
+      </div>
+      <div className='flex items-center justify-between px-4 py-2'>
+        <Button
+          variant='primary'
+          disabled={!canRun || workflowRunningData?.result?.status === WorkflowRunningStatus.Running}
+          className='w-full'
+          onClick={doRun}
+        >
+          {t('workflow.singleRun.startRun')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default memo(InputsPanel)

dify/web/app/components/workflow/panel/record.tsx

@@ -0,0 +1,37 @@
+import { memo, useCallback } from 'react'
+import type { WorkflowRunDetailResponse } from '@/models/log'
+import Run from '../run'
+import { useStore } from '../store'
+import { useWorkflowUpdate } from '../hooks'
+import { useHooksStore } from '../hooks-store'
+import { formatWorkflowRunIdentifier } from '../utils'
+
+const Record = () => {
+  const historyWorkflowData = useStore(s => s.historyWorkflowData)
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+  const getWorkflowRunAndTraceUrl = useHooksStore(s => s.getWorkflowRunAndTraceUrl)
+
+  const handleResultCallback = useCallback((res: WorkflowRunDetailResponse) => {
+    const graph = res.graph
+    handleUpdateWorkflowCanvas({
+      nodes: graph.nodes,
+      edges: graph.edges,
+      viewport: graph.viewport || { x: 0, y: 0, zoom: 1 },
+    })
+  }, [handleUpdateWorkflowCanvas])
+
+  return (
+    <div className='flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
+      <div className='system-xl-semibold flex items-center justify-between p-4 pb-0 text-text-primary'>
+        {`Test Run${formatWorkflowRunIdentifier(historyWorkflowData?.finished_at)}`}
+      </div>
+      <Run
+        runDetailUrl={getWorkflowRunAndTraceUrl(historyWorkflowData?.id).runUrl}
+        tracingListUrl={getWorkflowRunAndTraceUrl(historyWorkflowData?.id).traceUrl}
+        getResultCallback={handleResultCallback}
+      />
+    </div>
+  )
+}
+
+export default memo(Record)

dify/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx

@@ -0,0 +1,84 @@
+import React, { type FC, useCallback } from 'react'
+import { RiMoreFill } from '@remixicon/react'
+import { VersionHistoryContextMenuOptions } from '../../../types'
+import MenuItem from './menu-item'
+import useContextMenu from './use-context-menu'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+
+export type ContextMenuProps = {
+  isShowDelete: boolean
+  isNamedVersion: boolean
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  handleClickMenuItem: (operation: VersionHistoryContextMenuOptions) => void
+}
+
+const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
+  const { isShowDelete, handleClickMenuItem, open, setOpen } = props
+  const {
+    deleteOperation,
+    options,
+  } = useContextMenu(props)
+
+  const handleClickTrigger = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    setOpen(v => !v)
+  }, [setOpen])
+
+  return (
+    <PortalToFollowElem
+      placement={'bottom-end'}
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger>
+        <Button size='small' className='px-1' onClick={handleClickTrigger}>
+          <RiMoreFill className='h-4 w-4' />
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-10'>
+        <div className='flex w-[184px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+          <div className='flex flex-col p-1'>
+            {
+              options.map((option) => {
+                return (
+                  <MenuItem
+                    key={option.key}
+                    item={option}
+                    onClick={handleClickMenuItem.bind(null, option.key)}
+                  />
+                )
+              })
+            }
+          </div>
+          {
+            isShowDelete && (
+              <>
+                <Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
+                <div className='p-1'>
+                  <MenuItem
+                    item={deleteOperation}
+                    isDestructive
+                    onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
+                  />
+                </div>
+              </>
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(ContextMenu)

dify/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx

@@ -0,0 +1,39 @@
+import React, { type FC } from 'react'
+import type { VersionHistoryContextMenuOptions } from '../../../types'
+import cn from '@/utils/classnames'
+
+type MenuItemProps = {
+  item: {
+    key: VersionHistoryContextMenuOptions
+    name: string
+  }
+  onClick: (operation: VersionHistoryContextMenuOptions) => void
+  isDestructive?: boolean
+}
+
+const MenuItem: FC<MenuItemProps> = ({
+  item,
+  onClick,
+  isDestructive = false,
+}) => {
+  return (
+    <div
+      className={cn(
+        'flex cursor-pointer items-center justify-between rounded-lg px-2 py-1.5 ',
+        isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
+      )}
+      onClick={() => {
+        onClick(item.key)
+      }}
+    >
+      <div className={cn(
+        'system-md-regular flex-1 text-text-primary',
+        isDestructive && 'hover:text-text-destructive',
+      )}>
+        {item.name}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(MenuItem)

dify/web/app/components/workflow/panel/version-history-panel/context-menu/use-context-menu.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { VersionHistoryContextMenuOptions } from '../../../types'
+import type { ContextMenuProps } from './index'
+import { useStore } from '@/app/components/workflow/store'
+
+const useContextMenu = (props: ContextMenuProps) => {
+  const {
+    isNamedVersion,
+  } = props
+  const { t } = useTranslation()
+  const pipelineId = useStore(s => s.pipelineId)
+
+  const deleteOperation = {
+    key: VersionHistoryContextMenuOptions.delete,
+    name: t('common.operation.delete'),
+  }
+
+  const options = useMemo(() => {
+    return [
+      {
+        key: VersionHistoryContextMenuOptions.restore,
+        name: t('workflow.common.restore'),
+      },
+      isNamedVersion
+        ? {
+          key: VersionHistoryContextMenuOptions.edit,
+          name: t('workflow.versionHistory.editVersionInfo'),
+        }
+        : {
+          key: VersionHistoryContextMenuOptions.edit,
+          name: t('workflow.versionHistory.nameThisVersion'),
+        },
+      // todo: pipeline support export specific version DSL
+      ...(!pipelineId ? [{
+        key: VersionHistoryContextMenuOptions.exportDSL,
+        name: t('app.export'),
+      }] : []),
+      {
+        key: VersionHistoryContextMenuOptions.copyId,
+        name: t('workflow.versionHistory.copyId'),
+      },
+    ]
+  }, [isNamedVersion, t])
+
+  return {
+    deleteOperation,
+    options,
+  }
+}
+
+export default useContextMenu

dify/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx

@@ -0,0 +1,42 @@
+import React, { type FC } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type DeleteConfirmModalProps = {
+  isOpen: boolean
+  versionInfo: VersionHistory
+  onClose: () => void
+  onDelete: (id: string) => void
+}
+
+const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onDelete,
+}) => {
+  const { t } = useTranslation()
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
+      <div className='title-2xl-semi-bold text-text-primary'>
+        {`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
+      </div>
+      <p className='system-md-regular text-text-secondary'>
+        {t('workflow.versionHistory.deletionTip')}
+      </p>
+    </div>
+    <div className='flex items-center justify-end gap-x-2 p-6'>
+      <Button onClick={onClose}>
+        {t('common.operation.cancel')}
+      </Button>
+      <Button variant='warning' onClick={onDelete.bind(null, versionInfo.id)}>
+        {t('common.operation.delete')}
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default DeleteConfirmModal

dify/web/app/components/workflow/panel/version-history-panel/empty.tsx

@@ -0,0 +1,30 @@
+import Button from '@/app/components/base/button'
+import { RiHistoryLine } from '@remixicon/react'
+import React, { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type EmptyProps = {
+  onResetFilter: () => void
+}
+
+const Empty: FC<EmptyProps> = ({
+  onResetFilter,
+}) => {
+  const { t } = useTranslation()
+
+  return <div className='flex h-5/6 w-full flex-col justify-center gap-y-2'>
+    <div className='flex justify-center'>
+      <RiHistoryLine className='h-10 w-10 text-text-empty-state-icon' />
+    </div>
+    <div className='system-xs-regular flex justify-center text-text-tertiary'>
+      {t('workflow.versionHistory.filter.empty')}
+    </div>
+    <div className='flex justify-center'>
+      <Button size='small' onClick={onResetFilter}>
+        {t('workflow.versionHistory.filter.reset')}
+      </Button>
+    </div>
+  </div>
+}
+
+export default React.memo(Empty)

dify/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx

@@ -0,0 +1,32 @@
+import { RiCheckLine } from '@remixicon/react'
+import React, { type FC } from 'react'
+import type { WorkflowVersionFilterOptions } from '../../../types'
+
+type FilterItemProps = {
+  item: {
+    key: WorkflowVersionFilterOptions
+    name: string
+  }
+  isSelected?: boolean
+  onClick: (value: WorkflowVersionFilterOptions) => void
+}
+
+const FilterItem: FC<FilterItemProps> = ({
+  item,
+  isSelected = false,
+  onClick,
+}) => {
+  return (
+    <div
+      className='flex cursor-pointer items-center justify-between gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
+      onClick={() => {
+        onClick(item.key)
+      }}
+    >
+      <div className='system-md-regular flex-1 text-text-primary'>{item.name}</div>
+      {isSelected && <RiCheckLine className='h-4 w-4 shrink-0 text-text-accent' />}
+    </div>
+  )
+}
+
+export default React.memo(FilterItem)

dify/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx

@@ -0,0 +1,33 @@
+import React, { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Switch from '@/app/components/base/switch'
+
+type FilterSwitchProps = {
+  enabled: boolean
+  handleSwitch: (value: boolean) => void
+}
+
+const FilterSwitch: FC<FilterSwitchProps> = ({
+  enabled,
+  handleSwitch,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center p-1'>
+      <div className='flex w-full items-center gap-x-1 px-2 py-1.5'>
+        <div className='system-md-regular flex-1 px-1 text-text-secondary'>
+          {t('workflow.versionHistory.filter.onlyShowNamedVersions')}
+        </div>
+        <Switch
+          defaultValue={enabled}
+          onChange={v => handleSwitch(v)}
+          size='md'
+          className='shrink-0'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(FilterSwitch)

dify/web/app/components/workflow/panel/version-history-panel/filter/index.tsx

@@ -0,0 +1,81 @@
+import React, { type FC, useCallback, useState } from 'react'
+import { RiFilter3Line } from '@remixicon/react'
+import { WorkflowVersionFilterOptions } from '../../../types'
+import { useFilterOptions } from './use-filter'
+import FilterItem from './filter-item'
+import FilterSwitch from './filter-switch'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'
+
+type FilterProps = {
+  filterValue: WorkflowVersionFilterOptions
+  isOnlyShowNamedVersions: boolean
+  onClickFilterItem: (filter: WorkflowVersionFilterOptions) => void
+  handleSwitch: (isOnlyShowNamedVersions: boolean) => void
+}
+
+const Filter: FC<FilterProps> = ({
+  filterValue,
+  isOnlyShowNamedVersions,
+  onClickFilterItem,
+  handleSwitch,
+}) => {
+  const [open, setOpen] = useState(false)
+  const options = useFilterOptions()
+
+  const handleOnClick = useCallback((value: WorkflowVersionFilterOptions) => {
+    onClickFilterItem(value)
+  }, [onClickFilterItem])
+
+  const isFiltering = filterValue !== WorkflowVersionFilterOptions.all || isOnlyShowNamedVersions
+
+  return (
+    <PortalToFollowElem
+      placement={'bottom-end'}
+      offset={{
+        mainAxis: 4,
+        crossAxis: 55,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div
+          className={cn(
+            'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0.5',
+            isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
+          )}
+        >
+          <RiFilter3Line className={cn('h-4 w-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[12]'>
+        <div className='flex w-[248px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+          <div className='flex flex-col p-1'>
+            {
+              options.map((option) => {
+                return (
+                  <FilterItem
+                    key={option.key}
+                    item={option}
+                    isSelected={filterValue === option.key}
+                    onClick={handleOnClick}
+                  />
+                )
+              })
+            }
+          </div>
+          <Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
+          <FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default Filter

dify/web/app/components/workflow/panel/version-history-panel/filter/use-filter.ts

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+import { WorkflowVersionFilterOptions } from '../../../types'
+
+export const useFilterOptions = () => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      key: WorkflowVersionFilterOptions.all,
+      name: t('workflow.versionHistory.filter.all'),
+    },
+    {
+      key: WorkflowVersionFilterOptions.onlyYours,
+      name: t('workflow.versionHistory.filter.onlyYours'),
+    },
+  ]
+}

dify/web/app/components/workflow/panel/version-history-panel/index.tsx

@@ -0,0 +1,310 @@
+'use client'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownDoubleLine, RiCloseLine, RiLoader2Line } from '@remixicon/react'
+import copy from 'copy-to-clipboard'
+import { useDSL, useNodesSyncDraft, useWorkflowRun } from '../../hooks'
+import { useStore, useWorkflowStore } from '../../store'
+import { VersionHistoryContextMenuOptions, WorkflowVersionFilterOptions } from '../../types'
+import VersionHistoryItem from './version-history-item'
+import Filter from './filter'
+import type { VersionHistory } from '@/types/workflow'
+import { useDeleteWorkflow, useInvalidAllLastRun, useResetWorkflowVersionHistory, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow'
+import Divider from '@/app/components/base/divider'
+import Loading from './loading'
+import Empty from './empty'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import RestoreConfirmModal from './restore-confirm-modal'
+import DeleteConfirmModal from './delete-confirm-modal'
+import VersionInfoModal from '@/app/components/app/app-publisher/version-info-modal'
+import Toast from '@/app/components/base/toast'
+import { useHooksStore } from '../../hooks-store'
+
+const HISTORY_PER_PAGE = 10
+const INITIAL_PAGE = 1
+
+export type VersionHistoryPanelProps = {
+  getVersionListUrl?: string
+  deleteVersionUrl?: (versionId: string) => string
+  updateVersionUrl?: (versionId: string) => string
+  latestVersionId?: string
+}
+export const VersionHistoryPanel = ({
+  getVersionListUrl,
+  deleteVersionUrl,
+  updateVersionUrl,
+  latestVersionId,
+}: VersionHistoryPanelProps) => {
+  const [filterValue, setFilterValue] = useState(WorkflowVersionFilterOptions.all)
+  const [isOnlyShowNamedVersions, setIsOnlyShowNamedVersions] = useState(false)
+  const [operatedItem, setOperatedItem] = useState<VersionHistory>()
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [editModalOpen, setEditModalOpen] = useState(false)
+  const workflowStore = useWorkflowStore()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { handleRestoreFromPublishedWorkflow, handleLoadBackupDraft } = useWorkflowRun()
+  const { handleExportDSL } = useDSL()
+  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
+  const currentVersion = useStore(s => s.currentVersion)
+  const setCurrentVersion = useStore(s => s.setCurrentVersion)
+  const userProfile = useAppContextSelector(s => s.userProfile)
+  const configsMap = useHooksStore(s => s.configsMap)
+  const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId)
+  const {
+    deleteAllInspectVars,
+  } = workflowStore.getState()
+  const { t } = useTranslation()
+
+  const {
+    data: versionHistory,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+  } = useWorkflowVersionHistory({
+    url: getVersionListUrl || '',
+    initialPage: INITIAL_PAGE,
+    limit: HISTORY_PER_PAGE,
+    userId: filterValue === WorkflowVersionFilterOptions.onlyYours ? userProfile.id : '',
+    namedOnly: isOnlyShowNamedVersions,
+  })
+
+  const handleVersionClick = useCallback((item: VersionHistory) => {
+    if (item.id !== currentVersion?.id) {
+      setCurrentVersion(item)
+      handleRestoreFromPublishedWorkflow(item)
+    }
+  }, [currentVersion?.id, setCurrentVersion, handleRestoreFromPublishedWorkflow])
+
+  const handleNextPage = () => {
+    if (hasNextPage)
+      fetchNextPage()
+  }
+
+  const handleClose = () => {
+    handleLoadBackupDraft()
+    workflowStore.setState({ isRestoring: false })
+    setShowWorkflowVersionHistoryPanel(false)
+  }
+
+  const handleClickFilterItem = useCallback((value: WorkflowVersionFilterOptions) => {
+    setFilterValue(value)
+  }, [])
+
+  const handleSwitch = useCallback((value: boolean) => {
+    setIsOnlyShowNamedVersions(value)
+  }, [])
+
+  const handleResetFilter = useCallback(() => {
+    setFilterValue(WorkflowVersionFilterOptions.all)
+    setIsOnlyShowNamedVersions(false)
+  }, [])
+
+  const handleClickMenuItem = useCallback((item: VersionHistory, operation: VersionHistoryContextMenuOptions) => {
+    setOperatedItem(item)
+    switch (operation) {
+      case VersionHistoryContextMenuOptions.restore:
+        setRestoreConfirmOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.edit:
+        setEditModalOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.delete:
+        setDeleteConfirmOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.copyId:
+        copy(item.id)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.copyIdSuccess'),
+        })
+        break
+      case VersionHistoryContextMenuOptions.exportDSL:
+        handleExportDSL?.(false, item.id)
+        break
+    }
+  }, [t, handleExportDSL])
+
+  const handleCancel = useCallback((operation: VersionHistoryContextMenuOptions) => {
+    switch (operation) {
+      case VersionHistoryContextMenuOptions.restore:
+        setRestoreConfirmOpen(false)
+        break
+      case VersionHistoryContextMenuOptions.edit:
+        setEditModalOpen(false)
+        break
+      case VersionHistoryContextMenuOptions.delete:
+        setDeleteConfirmOpen(false)
+        break
+    }
+  }, [])
+
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
+
+  const handleRestore = useCallback((item: VersionHistory) => {
+    setShowWorkflowVersionHistoryPanel(false)
+    handleRestoreFromPublishedWorkflow(item)
+    workflowStore.setState({ isRestoring: false })
+    workflowStore.setState({ backupDraft: undefined })
+    handleSyncWorkflowDraft(true, false, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.restoreSuccess'),
+        })
+        deleteAllInspectVars()
+        invalidAllLastRun()
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.restoreFailure'),
+        })
+      },
+      onSettled: () => {
+        resetWorkflowVersionHistory()
+      },
+    })
+  }, [setShowWorkflowVersionHistoryPanel, handleRestoreFromPublishedWorkflow, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, resetWorkflowVersionHistory])
+
+  const { mutateAsync: deleteWorkflow } = useDeleteWorkflow()
+
+  const handleDelete = useCallback(async (id: string) => {
+    await deleteWorkflow(deleteVersionUrl?.(id) || '', {
+      onSuccess: () => {
+        setDeleteConfirmOpen(false)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.deleteSuccess'),
+        })
+        resetWorkflowVersionHistory()
+        deleteAllInspectVars()
+        invalidAllLastRun()
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.deleteFailure'),
+        })
+      },
+      onSettled: () => {
+        setDeleteConfirmOpen(false)
+      },
+    })
+  }, [deleteWorkflow, t, resetWorkflowVersionHistory, deleteAllInspectVars, invalidAllLastRun, deleteVersionUrl])
+
+  const { mutateAsync: updateWorkflow } = useUpdateWorkflow()
+
+  const handleUpdateWorkflow = useCallback(async (params: { id?: string, title: string, releaseNotes: string }) => {
+    const { id, ...rest } = params
+    await updateWorkflow({
+      url: updateVersionUrl?.(id || '') || '',
+      ...rest,
+    }, {
+      onSuccess: () => {
+        setEditModalOpen(false)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.updateSuccess'),
+        })
+        resetWorkflowVersionHistory()
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.updateFailure'),
+        })
+      },
+      onSettled: () => {
+        setEditModalOpen(false)
+      },
+    })
+  }, [t, updateWorkflow, resetWorkflowVersionHistory, updateVersionUrl])
+
+  return (
+    <div className='flex h-full w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
+      <div className='flex items-center gap-x-2 px-4 pt-3'>
+        <div className='system-xl-semibold flex-1 py-1 text-text-primary'>{t('workflow.versionHistory.title')}</div>
+        <Filter
+          filterValue={filterValue}
+          isOnlyShowNamedVersions={isOnlyShowNamedVersions}
+          onClickFilterItem={handleClickFilterItem}
+          handleSwitch={handleSwitch}
+        />
+        <Divider type='vertical' className='mx-1 h-3.5' />
+        <div
+          className='flex h-6 w-6 cursor-pointer items-center justify-center p-0.5'
+          onClick={handleClose}
+        >
+          <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+        </div>
+      </div>
+      <div className="flex h-0 flex-1 flex-col">
+        <div className="flex-1 overflow-y-auto px-3 py-2">
+          {(isFetching && !versionHistory?.pages?.length)
+            ? (
+              <Loading />
+            )
+            : (
+              <>
+                {versionHistory?.pages?.map((page, pageNumber) => (
+                  page.items?.map((item, idx) => {
+                    const isLast = pageNumber === versionHistory.pages.length - 1 && idx === page.items.length - 1
+                    return <VersionHistoryItem
+                      key={item.id}
+                      item={item}
+                      currentVersion={currentVersion}
+                      latestVersionId={latestVersionId || ''}
+                      onClick={handleVersionClick}
+                      handleClickMenuItem={handleClickMenuItem.bind(null, item)}
+                      isLast={isLast}
+                    />
+                  })
+                ))}
+                {!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
+                  <Empty onResetFilter={handleResetFilter} />
+                )}
+              </>
+            )}
+        </div>
+        {hasNextPage && (
+          <div className='p-2'>
+            <div
+              className='flex cursor-pointer items-center gap-x-1'
+              onClick={handleNextPage}
+            >
+              <div className='item-center flex justify-center p-0.5'>
+                {isFetching
+                  ? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
+                  : <RiArrowDownDoubleLine className='h-3.5 w-3.5 text-text-accent' />}
+              </div>
+              <div className='system-xs-medium-uppercase py-[1px] text-text-accent'>
+                {t('workflow.common.loadMore')}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {restoreConfirmOpen && (<RestoreConfirmModal
+        isOpen={restoreConfirmOpen}
+        versionInfo={operatedItem!}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.restore)}
+        onRestore={handleRestore}
+      />)}
+      {deleteConfirmOpen && (<DeleteConfirmModal
+        isOpen={deleteConfirmOpen}
+        versionInfo={operatedItem!}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.delete)}
+        onDelete={handleDelete}
+      />)}
+      {editModalOpen && (<VersionInfoModal
+        isOpen={editModalOpen}
+        versionInfo={operatedItem}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.edit)}
+        onPublish={handleUpdateWorkflow}
+      />)}
+    </div>
+  )
+}
+
+export default React.memo(VersionHistoryPanel)

dify/web/app/components/workflow/panel/version-history-panel/loading/index.tsx

@@ -0,0 +1,19 @@
+import Item from './item'
+
+const itemConfig = Array.from({ length: 8 }).map((_, index) => {
+  return {
+    isFirst: index === 0,
+    isLast: index === 7,
+    titleWidth: (index + 1) % 2 === 0 ? 'w-1/3' : 'w-2/5',
+    releaseNotesWidth: (index + 1) % 2 === 0 ? 'w-3/4' : 'w-4/6',
+  }
+})
+
+const Loading = () => {
+  return <div className='relative w-full overflow-y-hidden'>
+    <div className='absolute left-0 top-0 z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
+    {itemConfig.map((config, index) => <Item key={index} {...config} />)}
+  </div>
+}
+
+export default Loading

dify/web/app/components/workflow/panel/version-history-panel/loading/item.tsx

@@ -0,0 +1,40 @@
+import React, { type FC } from 'react'
+import cn from '@/utils/classnames'
+
+type ItemProps = {
+  titleWidth: string
+  releaseNotesWidth: string
+  isFirst: boolean
+  isLast: boolean
+}
+
+const Item: FC<ItemProps> = ({
+  titleWidth,
+  releaseNotesWidth,
+  isFirst,
+  isLast,
+}) => {
+  return (
+    <div className='relative flex gap-x-1 p-2' >
+      {!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
+      <div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
+        <div className='h-2 w-2 rounded-lg border-[2px] border-text-quaternary' />
+      </div>
+      <div className='flex grow flex-col gap-y-0.5'>
+        <div className='flex h-3.5 items-center'>
+          <div className={cn('h-2 w-full rounded-sm bg-text-quaternary opacity-20', titleWidth)} />
+        </div>
+        {
+          !isFirst && (
+            <div className='flex h-3 items-center'>
+              <div className={cn('h-1.5 w-full rounded-sm bg-text-quaternary opacity-20', releaseNotesWidth)} />
+            </div>
+          )
+        }
+      </div>
+    </div>
+
+  )
+}
+
+export default React.memo(Item)

dify/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx

@@ -0,0 +1,42 @@
+import React, { type FC } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type RestoreConfirmModalProps = {
+  isOpen: boolean
+  versionInfo: VersionHistory
+  onClose: () => void
+  onRestore: (item: VersionHistory) => void
+}
+
+const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onRestore,
+}) => {
+  const { t } = useTranslation()
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
+      <div className='title-2xl-semi-bold text-text-primary'>
+        {`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
+      </div>
+      <p className='system-md-regular text-text-secondary'>
+        {t('workflow.versionHistory.restorationTip')}
+      </p>
+    </div>
+    <div className='flex items-center justify-end gap-x-2 p-6'>
+      <Button onClick={onClose}>
+        {t('common.operation.cancel')}
+      </Button>
+      <Button variant='primary' onClick={onRestore.bind(null, versionInfo)}>
+        {t('workflow.common.restore')}
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default RestoreConfirmModal

dify/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { useTranslation } from 'react-i18next'
+import ContextMenu from './context-menu'
+import cn from '@/utils/classnames'
+import type { VersionHistory } from '@/types/workflow'
+import { type VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
+
+type VersionHistoryItemProps = {
+  item: VersionHistory
+  currentVersion: VersionHistory | null
+  latestVersionId: string
+  onClick: (item: VersionHistory) => void
+  handleClickMenuItem: (operation: VersionHistoryContextMenuOptions) => void
+  isLast: boolean
+}
+
+const formatVersion = (versionHistory: VersionHistory, latestVersionId: string): string => {
+  const { version, id } = versionHistory
+  if (version === WorkflowVersion.Draft)
+    return WorkflowVersion.Draft
+  if (id === latestVersionId)
+    return WorkflowVersion.Latest
+  try {
+    const date = new Date(version)
+    if (Number.isNaN(date.getTime()))
+      return version
+
+    // format as YYYY-MM-DD HH:mm:ss
+    return date.toISOString().slice(0, 19).replace('T', ' ')
+  }
+  catch {
+    return version
+  }
+}
+
+const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
+  item,
+  currentVersion,
+  latestVersionId,
+  onClick,
+  handleClickMenuItem,
+  isLast,
+}) => {
+  const { t } = useTranslation()
+  const [isHovering, setIsHovering] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const formatTime = (time: number) => dayjs.unix(time).format('YYYY-MM-DD HH:mm')
+  const formattedVersion = formatVersion(item, latestVersionId)
+  const isSelected = item.version === currentVersion?.version
+  const isDraft = formattedVersion === WorkflowVersion.Draft
+  const isLatest = formattedVersion === WorkflowVersion.Latest
+
+  useEffect(() => {
+    if (isDraft)
+      onClick(item)
+  }, [])
+
+  const handleClickItem = () => {
+    if (isSelected)
+      return
+    onClick(item)
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative flex gap-x-1 rounded-lg p-2',
+        isSelected ? 'cursor-not-allowed bg-state-accent-active' : 'cursor-pointer hover:bg-state-base-hover',
+      )}
+      onClick={handleClickItem}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => {
+        setIsHovering(false)
+        setOpen(false)
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        setOpen(true)
+      }}
+    >
+      {!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
+      <div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
+        <div className={cn(
+          'h-2 w-2 rounded-lg border-[2px]',
+          isSelected ? 'border-text-accent' : 'border-text-quaternary',
+        )}/>
+      </div>
+      <div className='flex grow flex-col gap-y-0.5 overflow-hidden'>
+        <div className='mr-6 flex h-5 items-center gap-x-1'>
+          <div className={cn(
+            'system-sm-semibold truncate py-[1px]',
+            isSelected ? 'text-text-accent' : 'text-text-secondary',
+          )}>
+            {isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
+          </div>
+          {isLatest && (
+            <div className='system-2xs-medium-uppercase flex h-5 shrink-0 items-center rounded-md border border-text-accent-secondary
+            bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary'>
+              {t('workflow.versionHistory.latest')}
+            </div>
+          )}
+        </div>
+        {
+          !isDraft && (
+            <div className='system-xs-regular break-words text-text-secondary'>
+              {item.marked_comment || ''}
+            </div>
+          )
+        }
+        {
+          !isDraft && (
+            <div className='system-xs-regular truncate text-text-tertiary'>
+              {`${formatTime(item.created_at)} · ${item.created_by.name}`}
+            </div>
+          )
+        }
+      </div>
+      {/* Context Menu */}
+      {!isDraft && isHovering && (
+        <div className='absolute right-1 top-1'>
+          <ContextMenu
+            isShowDelete={!isLatest}
+            isNamedVersion={!!item.marked_name}
+            open={open}
+            setOpen={setOpen}
+            handleClickMenuItem={handleClickMenuItem}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(VersionHistoryItem)

dify/web/app/components/workflow/panel/workflow-preview.tsx

@@ -0,0 +1,235 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import {
+  RiClipboardLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import copy from 'copy-to-clipboard'
+import ResultText from '../run/result-text'
+import ResultPanel from '../run/result-panel'
+import TracingPanel from '../run/tracing-panel'
+import {
+  useWorkflowInteractions,
+} from '../hooks'
+import { useStore } from '../store'
+import {
+  WorkflowRunningStatus,
+} from '../types'
+import { formatWorkflowRunIdentifier } from '../utils'
+import Toast from '../../base/toast'
+import InputsPanel from './inputs-panel'
+import cn from '@/utils/classnames'
+import Loading from '@/app/components/base/loading'
+import Button from '@/app/components/base/button'
+
+const WorkflowPreview = () => {
+  const { t } = useTranslation()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
+  const workflowRunningData = useStore(s => s.workflowRunningData)
+  const isListening = useStore(s => s.isListening)
+  const showInputsPanel = useStore(s => s.showInputsPanel)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const panelWidth = useStore(s => s.previewPanelWidth)
+  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
+  const [currentTab, setCurrentTab] = useState<string>(showInputsPanel ? 'INPUT' : 'TRACING')
+
+  const switchTab = async (tab: string) => {
+    setCurrentTab(tab)
+  }
+
+  useEffect(() => {
+    if (showDebugAndPreviewPanel && showInputsPanel)
+      setCurrentTab('INPUT')
+  }, [showDebugAndPreviewPanel, showInputsPanel])
+
+  useEffect(() => {
+    if (isListening)
+      switchTab('DETAIL')
+  }, [isListening])
+
+  useEffect(() => {
+    const status = workflowRunningData?.result.status
+    if (!workflowRunningData)
+      return
+
+    if ((status === WorkflowRunningStatus.Succeeded || status === WorkflowRunningStatus.Failed) && !workflowRunningData.resultText && !workflowRunningData.result.files?.length)
+      switchTab('DETAIL')
+  }, [workflowRunningData])
+
+  const [isResizing, setIsResizing] = useState(false)
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+  }, [])
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false)
+  }, [])
+
+  const resize = useCallback((e: MouseEvent) => {
+    if (isResizing) {
+      const newWidth = window.innerWidth - e.clientX
+      // width constraints: 400 <= width <= maxAllowed (canvas - reserved 400)
+      const reservedCanvasWidth = 400
+      const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
+
+      if (newWidth >= 400 && newWidth <= maxAllowed)
+        setPreviewPanelWidth(newWidth)
+    }
+  }, [isResizing, workflowCanvasWidth, setPreviewPanelWidth])
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize)
+    window.addEventListener('mouseup', stopResizing)
+    return () => {
+      window.removeEventListener('mousemove', resize)
+      window.removeEventListener('mouseup', stopResizing)
+    }
+  }, [resize, stopResizing])
+
+  return (
+    <div className={
+      'relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
+    }
+    style={{ width: `${panelWidth}px` }}
+    >
+      <div
+        className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
+        onMouseDown={startResizing}
+      />
+      <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
+        {`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at)}`}
+        <div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}>
+          <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+        </div>
+      </div>
+      <div className='relative flex grow flex-col'>
+        <div className='flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4'>
+          {showInputsPanel && (
+            <div
+              className={cn(
+                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+                currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary',
+              )}
+              onClick={() => switchTab('INPUT')}
+            >{t('runLog.input')}</div>
+          )}
+          <div
+            className={cn(
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-text-secondary',
+              !workflowRunningData && '!cursor-not-allowed opacity-30',
+            )}
+            onClick={() => {
+              if (!workflowRunningData)
+                return
+              switchTab('RESULT')
+            }}
+          >{t('runLog.result')}</div>
+          <div
+            className={cn(
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
+              !workflowRunningData && '!cursor-not-allowed opacity-30',
+            )}
+            onClick={() => {
+              if (!workflowRunningData)
+                return
+              switchTab('DETAIL')
+            }}
+          >{t('runLog.detail')}</div>
+          <div
+            className={cn(
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
+              !workflowRunningData && '!cursor-not-allowed opacity-30',
+            )}
+            onClick={() => {
+              if (!workflowRunningData)
+                return
+              switchTab('TRACING')
+            }}
+          >{t('runLog.tracing')}</div>
+        </div>
+        <div className={cn(
+          'h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg',
+          (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
+        )}>
+          {currentTab === 'INPUT' && showInputsPanel && (
+            <InputsPanel onRun={() => switchTab('RESULT')} />
+          )}
+          {currentTab === 'RESULT' && (
+            <>
+              <ResultText
+                isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
+                outputs={workflowRunningData?.resultText}
+                allFiles={workflowRunningData?.result?.files}
+                error={workflowRunningData?.result?.error}
+                onClick={() => switchTab('DETAIL')}
+              />
+              {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
+                <Button
+                  className={cn('mb-4 ml-4 space-x-1')}
+                  onClick={() => {
+                    const content = workflowRunningData?.resultText
+                    if (typeof content === 'string')
+                      copy(content)
+                    else
+                      copy(JSON.stringify(content))
+                    Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+                  }}>
+                  <RiClipboardLine className='h-3.5 w-3.5' />
+                  <div>{t('common.operation.copy')}</div>
+                </Button>
+              )}
+            </>
+          )}
+          {currentTab === 'DETAIL' && (
+            <ResultPanel
+              inputs={workflowRunningData?.result?.inputs}
+              inputs_truncated={workflowRunningData?.result?.inputs_truncated}
+              process_data={workflowRunningData?.result?.process_data}
+              process_data_truncated={workflowRunningData?.result?.process_data_truncated}
+              outputs={workflowRunningData?.result?.outputs}
+              outputs_truncated={workflowRunningData?.result?.outputs_truncated}
+              outputs_full_content={workflowRunningData?.result?.outputs_full_content}
+              status={workflowRunningData?.result?.status || ''}
+              error={workflowRunningData?.result?.error}
+              elapsed_time={workflowRunningData?.result?.elapsed_time}
+              total_tokens={workflowRunningData?.result?.total_tokens}
+              created_at={workflowRunningData?.result?.created_at}
+              created_by={(workflowRunningData?.result?.created_by as any)?.name}
+              steps={workflowRunningData?.result?.total_steps}
+              exceptionCounts={workflowRunningData?.result?.exceptions_count}
+            />
+          )}
+          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
+            <div className='flex h-full items-center justify-center bg-components-panel-bg'>
+              <Loading />
+            </div>
+          )}
+          {currentTab === 'TRACING' && (
+            <TracingPanel
+              className='bg-background-section-burn'
+              list={workflowRunningData?.tracing || []}
+            />
+          )}
+          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+            <div className='flex h-full items-center justify-center !bg-background-section-burn'>
+              <Loading />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(WorkflowPreview)