From 77401e6f5c94abaf7b7115019de78edf15968a05 Mon Sep 17 00:00:00 2001
From: zhsama <torvalds@linux.do>
Date: Fri, 16 Jan 2026 18:21:43 +0800
Subject: [PATCH] feat: optimize variable picker styling and optimize agent
 nodes

---
 .../plugins/component-picker-block/index.tsx           |  6 ++++--
 .../_base/components/variable/var-reference-vars.tsx   | 10 ++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index 56a9c251bd..c7ed721dde 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -13,6 +13,7 @@ import type {
   WorkflowVariableBlockType,
 } from '../../types'
 import type { PickerBlockMenuOption } from './menu'
+import type { AgentNode } from '@/app/components/base/prompt-editor/types'
 import {
   flip,
   offset,
@@ -30,6 +31,7 @@ import {
   Fragment,
   memo,
   useCallback,
+  useMemo,
   useState,
 } from 'react'
 import ReactDOM from 'react-dom'
@@ -195,8 +197,8 @@ const ComponentPicker = ({
   }, [editor, checkForTriggerMatch, triggerString, agentBlock, handleClose])
 
   const isAgentTrigger = triggerString === '@' && agentBlock?.show
-  const showAssembleVariables = triggerString === '/' && workflowVariableBlock?.showAssembleVariables
-  const agentNodes = agentBlock?.agentNodes || []
+  const showAssembleVariables = triggerString === '/'
+  const agentNodes: AgentNode[] = useMemo(() => agentBlock?.agentNodes || [], [agentBlock?.agentNodes])
 
   const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
     anchorElementRef,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index a2b00a9506..f5c159f63f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -10,8 +10,8 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { CodeAssistant, MagicEdit } from '@/app/components/base/icons/src/vender/line/general'
-import { MagicWand } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { MagicWand } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import Input from '@/app/components/base/input'
 import {
   PortalToFollowElem,
@@ -410,14 +410,12 @@ const VarReferenceVars: FC<Props> = ({
           <div className="flex items-center border-t border-divider-subtle pt-1">
             <button
               type="button"
-              className="flex h-8 w-full items-center px-3 text-text-tertiary hover:text-text-secondary"
+              className="flex h-6 w-full items-center rounded-md pl-3 pr-[18px] text-text-secondary hover:bg-state-base-hover"
               onClick={handleAssembleVariables}
               onMouseDown={e => e.preventDefault()}
             >
-              <span className="mr-1 flex h-4 w-4 items-center justify-center rounded bg-util-colors-indigo-indigo-500/10">
-                <MagicWand className="h-3.5 w-3.5 text-util-colors-indigo-indigo-500" />
-              </span>
-              <span className="system-xs-medium truncate" title={t('nodes.tool.assembleVariables', { ns: 'workflow' })}>
+              <MagicWand className="h-3.5 w-3.5 shrink-0 text-text-accent" />
+              <span className="system-sm-medium ml-1 w-0 grow truncate text-left text-text-secondary" title={t('nodes.tool.assembleVariables', { ns: 'workflow' })}>
                 {t('nodes.tool.assembleVariables', { ns: 'workflow' })}
               </span>
             </button>