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

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/workflow/header/chat-variable-button.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react'
+import Button from '@/app/components/base/button'
+import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import { useStore } from '@/app/components/workflow/store'
+
+const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
+  const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
+
+  const handleClick = () => {
+    setShowChatVariablePanel(true)
+    setShowEnvPanel(false)
+    setShowDebugAndPreviewPanel(false)
+  }
+
+  return (
+    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+      <BubbleX className='w-4 h-4 text-components-button-secondary-text' />
+    </Button>
+  )
+}
+
+export default memo(ChatVariableButton)

web/app/components/workflow/header/env-button.tsx

@@ -1,21 +1,23 @@
 import { memo } from 'react'
+import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
-import cn from '@/utils/classnames'
 
-const EnvButton = () => {
+const EnvButton = ({ disabled }: { disabled: boolean }) => {
+  const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
 
   const handleClick = () => {
     setShowEnvPanel(true)
+    setShowChatVariablePanel(false)
     setShowDebugAndPreviewPanel(false)
   }
 
   return (
-    <div className={cn('relative flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs cursor-pointer hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover')} onClick={handleClick}>
+    <Button className='p-2' disabled={disabled} onClick={handleClick}>
       <Env className='w-4 h-4 text-components-button-secondary-text' />
-    </div>
+    </Button>
   )
 }
 

web/app/components/workflow/header/index.tsx

@@ -19,6 +19,7 @@ import {
 import type { StartNodeType } from '../nodes/start/types'
 import {
   useChecklistBeforePublish,
+  useIsChatMode,
   useNodesReadOnly,
   useNodesSyncDraft,
   useWorkflowMode,
@@ -31,6 +32,7 @@ import EditingTitle from './editing-title'
 import RunningTitle from './running-title'
 import RestoringTitle from './restoring-title'
 import ViewHistory from './view-history'
+import ChatVariableButton from './chat-variable-button'
 import EnvButton from './env-button'
 import Button from '@/app/components/base/button'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -44,7 +46,8 @@ const Header: FC = () => {
   const appDetail = useAppStore(s => s.appDetail)
   const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
   const appID = appDetail?.id
-  const { getNodesReadOnly } = useNodesReadOnly()
+  const isChatMode = useIsChatMode()
+  const { nodesReadOnly, getNodesReadOnly } = useNodesReadOnly()
   const publishedAt = useStore(s => s.publishedAt)
   const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
   const toolPublished = useStore(s => s.toolPublished)
@@ -165,7 +168,8 @@ const Header: FC = () => {
       {
         normal && (
           <div className='flex items-center gap-2'>
-            <EnvButton />
+            {isChatMode && <ChatVariableButton disabled={nodesReadOnly} />}
+            <EnvButton disabled={nodesReadOnly} />
             <div className='w-[1px] h-3.5 bg-gray-200'></div>
             <RunAndHistory />
             <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
@@ -176,7 +180,7 @@ const Header: FC = () => {
               {...{
                 publishedAt,
                 draftUpdatedAt,
-                disabled: Boolean(getNodesReadOnly()),
+                disabled: nodesReadOnly,
                 toolPublished,
                 inputs: variables,
                 onRefreshData: handleToolConfigureUpdate,