From c1bf4c6405c8c1db41b5fd699f1621b798398273 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 28 Mar 2024 18:23:05 +0800
Subject: [PATCH] chore: var picker ui

---
 .../workflow-variable-block/component.tsx     | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
index 725a5c7a6d..94bf6cef81 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -2,6 +2,10 @@ import type { FC } from 'react'
 import { useSelectOrDelete } from '../../hooks'
 import { DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND } from './index'
 import type { Node } from '@/app/components/workflow/types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { Line3 } from '@/app/components/base/icons/src/public/common'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -16,21 +20,33 @@ const WorkflowVariableBlockComponent: FC<WorkflowVariableBlockComponentProps> =
 }) => {
   const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND)
   const node = getWorkflowNode(variables[0])
+  const outputVarNode = node.data
   const variablesLength = variables.length
   const lastVariable = variables[variablesLength - 1]
 
   return (
     <div
       className={`
-        inline-flex items-center pl-1 pr-0.5 h-6 bg-white border-[0.5px] border-black/5 rounded-[5px]
-        hover:border hover:border-primary-300 hover:bg-primary-25
-        ${isSelected && '!border !border-primary-500 !bg-primary-50'}
+        mr-[2px] relative group/wrap flex items-center h-[20px] pl-0.5 pr-[3px] rounded-[5px] border
+        ${isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white'}
       `}
       ref={ref}
     >
-      <div>{node.data.title}</div>
-      /
-      <div>{lastVariable}</div>
+      <div className='flex items-center'>
+        <div className='p-[1px]'>
+          <VarBlockIcon
+            className='!text-gray-500'
+            type={outputVarNode?.type || BlockEnum.Start}
+          />
+        </div>
+        <div className='shrink-0 mx-0.5 text-xs font-medium text-gray-500 truncate' title={outputVarNode?.title} style={{
+        }}>{outputVarNode?.title}</div>
+        <Line3 className='mr-0.5 text-gray-300'></Line3>
+      </div>
+      <div className='flex items-center text-primary-600'>
+        <Variable02 className='w-3.5 h-3.5' />
+        <div className='shrink-0 ml-0.5 text-xs font-medium truncate' title={lastVariable}>{lastVariable}</div>
+      </div>
     </div>
   )
 }