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/panel/debug-and-preview/index.tsx

@@ -1,19 +1,26 @@
 import {
   memo,
   useRef,
+  useState,
 } from 'react'
 import { useKeyPress } from 'ahooks'
-import { RiCloseLine } from '@remixicon/react'
+import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { useNodes } from 'reactflow'
 import {
   useEdgesInteractions,
   useNodesInteractions,
   useWorkflowInteractions,
 } from '../../hooks'
+import { BlockEnum } from '../../types'
+import type { StartNodeType } from '../../nodes/start/types'
 import ChatWrapper from './chat-wrapper'
 import cn from '@/utils/classnames'
-import Button from '@/app/components/base/button'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
+import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
+import { useStore } from '@/app/components/workflow/store'
 
 export type ChatWrapperRefType = {
   handleRestart: () => void
@@ -24,6 +31,13 @@ const DebugAndPreview = () => {
   const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
   const { handleNodeCancelRunningStatus } = useNodesInteractions()
   const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
+  const varList = useStore(s => s.conversationVariables)
+  const [expanded, setExpanded] = useState(true)
+  const nodes = useNodes<StartNodeType>()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const variables = startNode?.data.variables || []
+
+  const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)
 
   const handleRestartChat = () => {
     handleNodeCancelRunningStatus()
@@ -40,28 +54,43 @@ const DebugAndPreview = () => {
   return (
     <div
       className={cn(
-        'flex flex-col w-[400px] rounded-l-2xl h-full border border-black/2',
+        'flex flex-col w-[420px] rounded-l-2xl h-full border border-black/2',
       )}
       style={{
         background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
       }}
     >
-      <div className='shrink-0 flex items-center justify-between pl-4 pr-3 pt-3 pb-2 font-semibold text-gray-900'>
-        {t('workflow.common.debugAndPreview').toLocaleUpperCase()}
-        <div className='flex items-center'>
-          <Button
-            onClick={() => handleRestartChat()}
+      <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
+        <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
+        <div className='flex items-center gap-1'>
+          <TooltipPlus
+            popupContent={t('common.operation.refresh')}
           >
-            <RefreshCcw01 className='shrink-0 mr-1 w-3 h-3 text-gray-500' />
-            <div
-              className='grow truncate uppercase'
-              title={t('common.operation.refresh') || ''}
+            <ActionButton onClick={() => handleRestartChat()}>
+              <RefreshCcw01 className='w-4 h-4' />
+            </ActionButton>
+          </TooltipPlus>
+          {varList.length > 0 && (
+            <TooltipPlus
+              popupContent={t('workflow.chatVariable.panelTitle')}
             >
-              {t('common.operation.refresh')}
+              <ActionButton onClick={() => setShowConversationVariableModal(true)}>
+                <BubbleX className='w-4 h-4' />
+              </ActionButton>
+            </TooltipPlus>
+          )}
+          {variables.length > 0 && (
+            <div className='relative'>
+              <TooltipPlus
+                popupContent={t('workflow.panel.userInputField')}
+              >
+                <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
+                  <RiEqualizer2Line className='w-4 h-4' />
+                </ActionButton>
+              </TooltipPlus>
+              {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
             </div>
-            <div className='shrink-0 ml-1 px-1 leading-[18px] rounded-md border border-gray-200 bg-gray-50 text-[11px] text-gray-500 font-medium'>Shift</div>
-            <div className='shrink-0 ml-0.5 px-1 leading-[18px] rounded-md border border-gray-200 bg-gray-50 text-[11px] text-gray-500 font-medium'>R</div>
-          </Button>
+          )}
           <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
           <div
             className='flex items-center justify-center w-6 h-6 cursor-pointer'
@@ -72,7 +101,12 @@ const DebugAndPreview = () => {
         </div>
       </div>
       <div className='grow rounded-b-2xl overflow-y-auto'>
-        <ChatWrapper ref={chatRef} />
+        <ChatWrapper
+          ref={chatRef}
+          showConversationVariableModal={showConversationVariableModal}
+          onConversationModalHide={() => setShowConversationVariableModal(false)}
+          showInputsFieldsPanel={expanded}
+        />
       </div>
     </div>
   )