Feat/environment variables in workflow (#6515)

Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/workflow/panel/index.tsx

@@ -13,6 +13,7 @@ import DebugAndPreview from './debug-and-preview'
 import Record from './record'
 import WorkflowPreview from './workflow-preview'
 import ChatRecord from './chat-record'
+import EnvPanel from './env-panel'
 import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
@@ -23,6 +24,7 @@ const Panel: FC = () => {
   const selectedNode = nodes.find(node => node.data.selected)
   const historyWorkflowData = useStore(s => s.historyWorkflowData)
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
+  const showEnvPanel = useStore(s => s.showEnvPanel)
   const isRestoring = useStore(s => s.isRestoring)
   const {
     enableShortcuts,
@@ -39,9 +41,7 @@ const Panel: FC = () => {
   return (
     <div
       tabIndex={-1}
-      className={cn(
-        'absolute top-14 right-0 bottom-2 flex z-10 outline-none',
-      )}
+      className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
       onFocus={disableShortcuts}
       onBlur={enableShortcuts}
       key={`${isRestoring}`}
@@ -85,6 +85,11 @@ const Panel: FC = () => {
           <WorkflowPreview />
         )
       }
+      {
+        showEnvPanel && (
+          <EnvPanel />
+        )
+      }
     </div>
   )
 }