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/chat-wrapper.tsx

@@ -14,6 +14,7 @@ import {
 import type { StartNodeType } from '../../nodes/start/types'
 import Empty from './empty'
 import UserInput from './user-input'
+import ConversationVariableModal from './conversation-variable-modal'
 import { useChat } from './hooks'
 import type { ChatWrapperRefType } from './index'
 import Chat from '@/app/components/base/chat/chat'
@@ -25,7 +26,13 @@ import {
 } from '@/service/debug'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
-const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
+type ChatWrapperProps = {
+  showConversationVariableModal: boolean
+  onConversationModalHide: () => void
+  showInputsFieldsPanel: boolean
+}
+
+const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConversationVariableModal, onConversationModalHide, showInputsFieldsPanel }, ref) => {
   const nodes = useNodes<StartNodeType>()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const startVariables = startNode?.data.variables
@@ -87,33 +94,41 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
   }, [handleRestart])
 
   return (
-    <Chat
-      config={{
-        ...config,
-        supportCitationHitInfo: true,
-      } as any}
-      chatList={chatList}
-      isResponding={isResponding}
-      chatContainerClassName='px-4'
-      chatContainerInnerClassName='pt-6'
-      chatFooterClassName='px-4 rounded-bl-2xl'
-      chatFooterInnerClassName='pb-4'
-      onSend={doSend}
-      onStopResponding={handleStop}
-      chatNode={(
-        <>
-          <UserInput />
-          {
-            !chatList.length && (
-              <Empty />
-            )
-          }
-        </>
+    <>
+      <Chat
+        config={{
+          ...config,
+          supportCitationHitInfo: true,
+        } as any}
+        chatList={chatList}
+        isResponding={isResponding}
+        chatContainerClassName='px-3'
+        chatContainerInnerClassName='pt-6'
+        chatFooterClassName='px-4 rounded-bl-2xl'
+        chatFooterInnerClassName='pb-4'
+        onSend={doSend}
+        onStopResponding={handleStop}
+        chatNode={(
+          <>
+            {showInputsFieldsPanel && <UserInput />}
+            {
+              !chatList.length && (
+                <Empty />
+              )
+            }
+          </>
+        )}
+        suggestedQuestions={suggestedQuestions}
+        showPromptLog
+        chatAnswerContainerInner='!pr-2'
+      />
+      {showConversationVariableModal && (
+        <ConversationVariableModal
+          conversationID={conversationId}
+          onHide={onConversationModalHide}
+        />
       )}
-      suggestedQuestions={suggestedQuestions}
-      showPromptLog
-      chatAnswerContainerInner='!pr-2'
-    />
+    </>
   )
 })
 

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

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

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>
   )

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

@@ -1,10 +1,7 @@
 import {
   memo,
-  useState,
 } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import { RiArrowDownSLine } from '@remixicon/react'
 import FormItem from '../../nodes/_base/components/before-run-form/form-item'
 import { BlockEnum } from '../../types'
 import {
@@ -12,11 +9,10 @@ import {
   useWorkflowStore,
 } from '../../store'
 import type { StartNodeType } from '../../nodes/start/types'
+import cn from '@/utils/classnames'
 
 const UserInput = () => {
-  const { t } = useTranslation()
   const workflowStore = useWorkflowStore()
-  const [expanded, setExpanded] = useState(true)
   const inputs = useStore(s => s.inputs)
   const nodes = useNodes<StartNodeType>()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
@@ -33,46 +29,21 @@ const UserInput = () => {
     return null
 
   return (
-    <div
-      className={`
-        relative rounded-xl border z-[1]
-        ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
-      `}
-    >
-      <div
-        className={`
-          flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
-          ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
-        `}
-        onClick={() => setExpanded(!expanded)}
-      >
-        <RiArrowDownSLine
-          className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
-        />
-        {t('workflow.panel.userInputField').toLocaleUpperCase()}
-      </div>
-      <div className='px-2 pt-1 pb-3'>
-        {
-          expanded && (
-            <div className='py-2 text-[13px] text-gray-900'>
-              {
-                variables.map((variable, index) => (
-                  <div
-                    key={variable.variable}
-                    className='mb-2 last-of-type:mb-0'
-                  >
-                    <FormItem
-                      autoFocus={index === 0}
-                      payload={variable}
-                      value={inputs[variable.variable]}
-                      onChange={v => handleValueChange(variable.variable, v)}
-                    />
-                  </div>
-                ))
-              }
-            </div>
-          )
-        }
+    <div className={cn('relative bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
+      <div className='px-4 pt-3 pb-4'>
+        {variables.map((variable, index) => (
+          <div
+            key={variable.variable}
+            className='mb-4 last-of-type:mb-0'
+          >
+            <FormItem
+              autoFocus={index === 0}
+              payload={variable}
+              value={inputs[variable.variable]}
+              onChange={v => handleValueChange(variable.variable, v)}
+            />
+          </div>
+        ))}
       </div>
     </div>
   )