From 7a0358827a508c8a629dfaadc8508be1d0720a45 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 20 Feb 2024 14:01:20 +0800
Subject: [PATCH] feat: finish choose var

---
 .../variable/var-reference-picker.tsx         |  9 ++++-
 .../variable/var-reference-popup.tsx          | 35 +++++++++++++++++--
 web/app/components/workflow/nodes/mock.ts     |  2 ++
 web/app/components/workflow/types.ts          |  1 +
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 2506215cac..9be0b44477 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -39,6 +39,7 @@ const VarReferencePicker: FC<Props> = ({
   className,
   isShowNodeName,
   value,
+  onChange,
 }) => {
   const [open, setOpen] = useState(false)
   const hasValue = value.length > 0
@@ -87,7 +88,13 @@ const VarReferencePicker: FC<Props> = ({
           zIndex: 100,
           minWidth: 227,
         }}>
-          <VarReferencePopup vars={mockNodeOutputVars} />
+          <VarReferencePopup
+            vars={mockNodeOutputVars}
+            onChange={(value) => {
+              onChange(value)
+              setOpen(false)
+            }}
+          />
         </PortalToFollowElemContent>
       </PortalToFollowElem>
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
index 9f8a7c927a..acd1ad8252 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -2,43 +2,63 @@
 import type { FC } from 'react'
 import React, { useRef } from 'react'
 import { useHover } from 'ahooks'
-import type { NodeOutPutVar, Var } from '@/app/components/workflow/types'
+import cn from 'classnames'
+import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type ObjectChildrenProps = {
+  nodeId: string
   title: string
   data: Var[]
   objPath: string[]
+  onChange: (value: ValueSelector) => void
 }
 
 type ItemProps = {
+  nodeId: string
   title: string
   objPath: string[]
   itemData: Var
+  onChange: (value: ValueSelector) => void
 }
 
 const Item: FC<ItemProps> = ({
+  nodeId,
   title,
   objPath,
   itemData,
+  onChange,
 }) => {
   const isObj = itemData.type === 'object'
   const itemRef = useRef(null)
   const isItemHovering = useHover(itemRef)
-
+  const handleChosen = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange([nodeId, ...objPath, itemData.variable])
+  }
   return (
-    <div ref={itemRef} className='relative flex items-center h-6 w-[252px] pl-3 pr-[18px] rounded-md cursor-pointer hover:bg-gray-50'>
+    <div
+      ref={itemRef}
+      className={cn(isObj ? 'hover:bg-primary-50 pr-1' : 'hover:bg-gray-50 pr-[18px]', 'relative flex items-center h-6 w-[252px] pl-3  rounded-md cursor-pointer')}
+      onClick={handleChosen}
+    >
       <div className='flex items-center w-0 grow'>
         <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />
         <div className='ml-1 w-0 grow text-ellipsis text-[13px] font-normal text-gray-900'>{itemData.variable}</div>
       </div>
       <div className='ml-1 shrink-0 text-xs font-normal text-gray-500'>{itemData.type}</div>
+      {isObj && (
+        <ChevronRight className='ml-0.5 w-3 h-3 text-gray-500' />
+      )}
       {isObj && isItemHovering && (
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         <ObjectChildren
+          nodeId={nodeId}
           title={title}
           objPath={[...objPath, itemData.variable]}
           data={itemData.children as Var[]}
+          onChange={onChange}
         />
       )}
     </div>
@@ -47,8 +67,10 @@ const Item: FC<ItemProps> = ({
 
 const ObjectChildren: FC<ObjectChildrenProps> = ({
   title,
+  nodeId,
   objPath,
   data,
+  onChange,
 }) => {
   const currObjPath = objPath
 
@@ -59,9 +81,11 @@ const ObjectChildren: FC<ObjectChildrenProps> = ({
         data.map((v, i) => (
           <Item
             key={i}
+            nodeId={nodeId}
             title={title}
             objPath={objPath}
             itemData={v}
+            onChange={onChange}
           />
         ))
       }
@@ -71,9 +95,12 @@ const ObjectChildren: FC<ObjectChildrenProps> = ({
 
 type Props = {
   vars: NodeOutPutVar[]
+  onChange: (value: ValueSelector) => void
 }
 const VarReferencePopup: FC<Props> = ({
+
   vars,
+  onChange,
 }) => {
   return (
     <div className='p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1'>
@@ -84,8 +111,10 @@ const VarReferencePopup: FC<Props> = ({
             <Item
               key={j}
               title={item.title}
+              nodeId={item.nodeId}
               objPath={[]}
               itemData={v}
+              onChange={onChange}
             />
           ))}
         </div>
diff --git a/web/app/components/workflow/nodes/mock.ts b/web/app/components/workflow/nodes/mock.ts
index 598808fec8..d40be4bbe7 100644
--- a/web/app/components/workflow/nodes/mock.ts
+++ b/web/app/components/workflow/nodes/mock.ts
@@ -18,6 +18,7 @@ export const mockNodesData: Record<string, any> = {
 
 export const mockNodeOutputVars: NodeOutPutVar[] = [
   {
+    nodeId: 'aaa',
     title: 'Start',
     vars: [
       {
@@ -31,6 +32,7 @@ export const mockNodeOutputVars: NodeOutPutVar[] = [
     ],
   },
   {
+    nodeId: 'bbb',
     title: 'LLM',
     vars: [
       {
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 7291fc5aee..be1fb9d479 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -90,6 +90,7 @@ export type Var = {
 }
 
 export type NodeOutPutVar = {
+  nodeId: string
   title: string
   vars: Var[]
 }