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/chat-variable-panel/components/variable-modal-trigger.tsx

@@ -0,0 +1,69 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { ConversationVariable } from '@/app/components/workflow/types'
+
+type Props = {
+  open: boolean
+  setOpen: (value: React.SetStateAction<boolean>) => void
+  showTip: boolean
+  chatVar?: ConversationVariable
+  onClose: () => void
+  onSave: (env: ConversationVariable) => void
+}
+
+const VariableModalTrigger = ({
+  open,
+  setOpen,
+  showTip,
+  chatVar,
+  onClose,
+  onSave,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={() => {
+        setOpen(v => !v)
+        open && onClose()
+      }}
+      placement='left-start'
+      offset={{
+        mainAxis: 8,
+        alignmentAxis: showTip ? -278 : -48,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => {
+        setOpen(v => !v)
+        open && onClose()
+      }}>
+        <Button variant='primary'>
+          <RiAddLine className='mr-1 w-4 h-4' />
+          <span className='system-sm-medium'>{t('workflow.chatVariable.button')}</span>
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <VariableModal
+          chatVar={chatVar}
+          onSave={onSave}
+          onClose={() => {
+            onClose()
+            setOpen(false)
+          }}
+        />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default VariableModalTrigger