dify

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)