feat: vars to new place

web/app/components/workflow-app/components/workflow-header/index.tsx

@@ -41,8 +41,8 @@ const WorkflowHeader = () => {
     return {
       normal: {
         components: {
-          left: <ChatVariableTrigger />,
           middle: <FeaturesTrigger />,
+          chatVariableTrigger: <ChatVariableTrigger />,
         },
         runAndHistoryProps: {
           showRunButton: !isChatMode,

web/app/components/workflow/header/chat-variable-button.tsx

@@ -25,6 +25,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
       )}
       disabled={disabled}
       onClick={handleClick}
+      variant='ghost'
     >
       <BubbleX className='h-4 w-4 text-components-button-secondary-text' />
     </Button>

web/app/components/workflow/header/env-button.tsx

@@ -26,6 +26,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
         'p-2',
         theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
       )}
+      variant='ghost'
       disabled={disabled}
       onClick={handleClick}
     >

web/app/components/workflow/header/header-in-normal.tsx

@@ -25,6 +25,7 @@ export type HeaderInNormalProps = {
   components?: {
     left?: React.ReactNode
     middle?: React.ReactNode
+    chatVariableTrigger?: React.ReactNode
   }
   runAndHistoryProps?: RunAndHistoryProps
 }
@@ -69,9 +70,12 @@ const HeaderInNormal = ({
       </div>
       <div className='flex items-center gap-2'>
         {components?.left}
-        <EnvButton disabled={nodesReadOnly} />
         <Divider type='vertical' className='mx-auto h-3.5' />
         <RunAndHistory {...runAndHistoryProps} />
+        <div className='cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]'>
+          {components?.chatVariableTrigger}
+          <EnvButton disabled={nodesReadOnly} />
+        </div>
         {components?.middle}
         <VersionHistoryButton onClick={onStartRestoring} />
       </div>