From 5c7a6db6b3858bb3138bb9d0053840f1d2a723df Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 12 Mar 2025 15:58:33 +0800
Subject: [PATCH] feat: prompt var popup

---
 .../workflow-variable-block/component.tsx     | 31 +++++++++++++++++--
 .../variable/var-full-path-panel.tsx          |  5 ++-
 2 files changed, 32 insertions(+), 4 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 fc6e589807..47bb297789 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
@@ -11,6 +11,7 @@ import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import {
   RiErrorWarningFill,
+  RiMoreLine,
 } from '@remixicon/react'
 import { useSelectOrDelete } from '../../hooks'
 import type { WorkflowNodesMap } from './node'
@@ -27,6 +28,8 @@ import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import Tooltip from '@/app/components/base/tooltip'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
+import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
+import { Type } from '@/app/components/workflow/nodes/llm/types'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -43,10 +46,11 @@ const WorkflowVariableBlockComponent = ({
   const [editor] = useLexicalComposerContext()
   const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND)
   const variablesLength = variables.length
+  const isShowAPart = variablesLength > 2
   const varName = (
     () => {
       const isSystem = isSystemVar(variables)
-      const varName = variablesLength >= 3 ? (variables).slice(-2).join('.') : variables[variablesLength - 1]
+      const varName = variables[variablesLength - 1]
       return `${isSystem ? 'sys.' : ''}${varName}`
     }
   )()
@@ -76,7 +80,7 @@ const WorkflowVariableBlockComponent = ({
   const Item = (
     <div
       className={cn(
-        'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
+        'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
         isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
         !node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover',
       )}
@@ -99,6 +103,13 @@ const WorkflowVariableBlockComponent = ({
           <Line3 className='mr-0.5 text-divider-deep'></Line3>
         </div>
       )}
+      {isShowAPart && (
+        <div className='flex items-center'>
+          <RiMoreLine className='w-3 h-3 text-text-secondary' />
+          <Line3 className='mr-0.5 text-divider-deep'></Line3>
+        </div>
+      )}
+
       <div className='flex items-center text-text-accent'>
         {!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />}
         {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
@@ -126,7 +137,21 @@ const WorkflowVariableBlockComponent = ({
     )
   }
 
-  return Item
+  return (
+    <Tooltip
+      noDecoration
+      popupContent={
+        <VarFullPathPanel
+          nodeName={node.title}
+          path={variables.slice(1)}
+          varType={Type.string}
+          nodeType={node?.type}
+        />}
+      disabled={!isShowAPart}
+    >
+      {Item}
+    </Tooltip>
+  )
 }
 
 export default memo(WorkflowVariableBlockComponent)
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
index dde7069acf..67179feef0 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx
@@ -6,16 +6,19 @@ import { Type } from '../../../llm/types'
 import { PickerPanelMain as Panel } from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
+
 type Props = {
   nodeName: string
   path: string[]
   varType: TypeWithArray
+  nodeType?: BlockEnum
 }
 
 const VarFullPathPanel: FC<Props> = ({
   nodeName,
   path,
   varType,
+  nodeType = BlockEnum.LLM,
 }) => {
   const schema: StructuredOutput = (() => {
     const schema: StructuredOutput['schema'] = {
@@ -41,7 +44,7 @@ const VarFullPathPanel: FC<Props> = ({
   return (
     <div className='w-[280px] pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
       <div className='flex p-3 pb-2 border-b-[0.5px] border-divider-subtle space-x-1 '>
-        <BlockIcon size='xs' type={BlockEnum.LLM} />
+        <BlockIcon size='xs' type={nodeType} />
         <div className='w-0 grow system-xs-medium text-text-secondary truncate'>{nodeName}</div>
       </div>
       <Panel