+ {/*
*/}
{isChatMode &&
}
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
new file mode 100644
index 0000000000..46dad716dd
--- /dev/null
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -0,0 +1,56 @@
+import {
+ memo,
+} from 'react'
+
+import { RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import type { GlobalVariable } from '../../types'
+import Item from './item'
+import { useStore } from '@/app/components/workflow/store'
+
+import cn from '@/utils/classnames'
+
+const Panel = () => {
+ const { t } = useTranslation()
+ const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
+
+ const globalVariableList: GlobalVariable[] = [
+ {
+ name: 'conversation_id',
+ value_type: 'string',
+ description: 'conversation id',
+ },
+ ]
+
+ return (
+
+
+ Global Variables(Current not show)
+
+
setShowPanel(false)}
+ >
+
+
+
+
+
...
+
+
+ {globalVariableList.map(item => (
+
+
+ )
+}
+
+export default memo(Panel)
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
new file mode 100644
index 0000000000..e7cdf166f9
--- /dev/null
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -0,0 +1,30 @@
+import { memo } from 'react'
+import { capitalize } from 'lodash-es'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import type { GlobalVariable } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+ payload: GlobalVariable
+}
+
+const Item = ({
+ payload,
+}: Props) => {
+ return (
+
+
+
+
+
{payload.name}
+
{capitalize(payload.value_type)}
+
+
+
{payload.description}
+
+ )
+}
+
+export default memo(Item)
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index a35bedc929..51cb1704ca 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -14,6 +14,7 @@ import WorkflowPreview from './workflow-preview'
import ChatRecord from './chat-record'
import ChatVariablePanel from './chat-variable-panel'
import EnvPanel from './env-panel'
+import GlobalVariablePanel from './global-variable-panel'
import cn from '@/utils/classnames'
import { useStore as useAppStore } from '@/app/components/app/store'
import MessageLogModal from '@/app/components/base/message-log-modal'
@@ -26,6 +27,7 @@ const Panel: FC = () => {
const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
const showEnvPanel = useStore(s => s.showEnvPanel)
const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
+ const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
const isRestoring = useStore(s => s.isRestoring)
const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
currentLogItem: state.currentLogItem,
@@ -90,6 +92,11 @@ const Panel: FC = () => {
)
}
+ {
+ showGlobalVariablePanel && (
+
+ )
+ }