From ada558bedca4dde76d720ca5f93cb4b08a79db99 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 19 Feb 2024 18:33:06 +0800
Subject: [PATCH] feat: add picker shower

---
 .../base/portal-to-follow-elem/index.tsx      |  4 +-
 .../variable/var-reference-picker.tsx         | 81 +++++++++++++------
 .../variable/var-reference-popup.tsx          | 33 ++++++++
 .../components/workflow/nodes/llm/panel.tsx   |  8 +-
 .../nodes/llm/{use-input.ts => use-config.ts} |  0
 web/app/components/workflow/nodes/mock.ts     | 32 +++++++-
 web/app/components/workflow/types.ts          |  9 +++
 7 files changed, 135 insertions(+), 32 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
 rename web/app/components/workflow/nodes/llm/{use-input.ts => use-config.ts} (100%)

diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index 2100f2601d..46f4e1a40f 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@floating-ui/react'
 
 import type { OffsetOptions, Placement } from '@floating-ui/react'
-
+import cn from 'classnames'
 export type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right
@@ -129,7 +129,7 @@ React.HTMLProps<HTMLElement> & { asChild?: boolean }
   return (
     <div
       ref={ref}
-      className='inline-block'
+      className={cn('inline-block', props.className)}
       // The user can style the trigger based on the state
       data-state={context.open ? 'open' : 'closed'}
       {...context.getReferenceProps(props)}
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 06482e5d05..3eb27b2185 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
@@ -1,12 +1,19 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useState } from 'react'
 import cn from 'classnames'
-import { mockNodesData } from '../../../mock'
+import { mockNodeOutputVars, mockNodesData } from '../../../mock'
+import VarReferencePopup from './var-reference-popup'
 import type { ValueSelector } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
 type Props = {
   className?: string
   isShowNodeName: boolean
@@ -15,6 +22,14 @@ type Props = {
   onChange: (value: ValueSelector) => void
 }
 
+// const toShowVarType = (type: string) => {
+//   if (['text-input', 'paragraph', 'select', 'url'].includes(type))
+//     return 'String'
+
+//   return type.charAt(0).toUpperCase() + type.substring(1)
+// }
+
+// TODO: get data from context
 const getNodeInfoById = (id: string) => {
   return mockNodesData[id]
 }
@@ -25,6 +40,7 @@ const VarReferencePicker: FC<Props> = ({
   isShowNodeName,
   value,
 }) => {
+  const [open, setOpen] = useState(false)
   const hasValue = value.length > 0
   const node = hasValue ? getNodeInfoById(value[0]) : null
   const varName = hasValue ? value[value.length - 1] : ''
@@ -32,33 +48,48 @@ const VarReferencePicker: FC<Props> = ({
   const getVarType = () => {
     return 'string'
   }
+
   return (
     <div className={cn(className, !readonly && 'cursor-pointer')}>
-      <div className={cn('w-full h-8 p-1 rounded-lg bg-gray-100')}>
-        <div className={cn('inline-flex h-full items-center px-1.5 rounded-[5px]', hasValue && 'bg-white')}>
-          {hasValue && (
-            <>
-              {isShowNodeName && (
-                <div className='flex items-center'>
-                  <div className='p-[1px]'>
-                    <VarBlockIcon
-                      className='!text-gray-900'
-                      type={node?.type}
-                    />
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement='bottom-start'
+      >
+        <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='!flex'>
+          <div className={cn('w-full h-8 p-1 rounded-lg bg-gray-100')}>
+            <div className={cn('inline-flex h-full items-center px-1.5 rounded-[5px]', hasValue && 'bg-white')}>
+              {hasValue && (
+                <>
+                  {isShowNodeName && (
+                    <div className='flex items-center'>
+                      <div className='p-[1px]'>
+                        <VarBlockIcon
+                          className='!text-gray-900'
+                          type={node?.type}
+                        />
+                      </div>
+                      <div className='mx-0.5 text-xs font-medium text-gray-700'>{node?.title}</div>
+                      <Line3 className='mr-0.5'></Line3>
+                    </div>
+                  )}
+                  <div className='flex items-center text-primary-600'>
+                    <Variable02 className='w-3.5 h-3.5' />
+                    <div className='ml-0.5 text-xs font-medium'>{varName}</div>
                   </div>
-                  <div className='mx-0.5 text-xs font-medium text-gray-700'>{node?.title}</div>
-                  <Line3 className='mr-0.5'></Line3>
-                </div>
+                  <div className='ml-0.5 text-xs font-normal text-gray-500'>{getVarType()}</div>
+                </>
               )}
-              <div className='flex items-center text-primary-600'>
-                <Variable02 className='w-3.5 h-3.5' />
-                <div className='ml-0.5 text-xs font-medium'>{varName}</div>
-              </div>
-              <div className='ml-0.5 text-xs font-normal text-gray-500'>{getVarType()}</div>
-            </>
-          )}
-        </div>
-      </div>
+            </div>
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent style={{
+          zIndex: 100,
+          width: 227,
+        }}>
+          <VarReferencePopup vars={mockNodeOutputVars} />
+        </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
new file mode 100644
index 0000000000..1d08189723
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -0,0 +1,33 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+
+type Props = {
+  vars: NodeOutPutVar[]
+}
+
+const VarReferencePopup: FC<Props> = ({
+  vars,
+}) => {
+  return (
+    <div className='p-1 bg-white rounded-lg border border-gray-200 shadow-lg space-y-1'>
+      {vars.map((item, i) => (
+        <div key={i}>
+          <div className='flex items-center h-[22px] px-3 text-xs font-medium text-gray-500 uppercase'>{item.title}</div>
+          {item.vars.map((v, j) => (
+            <div key={j} className='flex items-center h-6 pl-3 pr-[18px] rounded-md cursor-pointer hover:bg-gray-50'>
+              <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'>{v.variable}</div>
+              </div>
+              <div className='ml-1 shrink-0 text-xs font-normal text-gray-500'>{v.type}</div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+export default React.memo(VarReferencePopup)
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 90c18ef297..0a2266149a 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import BasePanel from '../_base/panel'
 import VarList from '../_base/components/variable/var-list'
-import useInput from './use-input'
+import useConfig from './use-config'
 import { mockLLMNodeData } from './mock'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
@@ -23,10 +23,10 @@ const Panel: FC = () => {
     handleVarListChange,
     handleAddVariable,
     toggleContextEnabled,
-  } = useInput(mockLLMNodeData)
+  } = useConfig(mockLLMNodeData)
   const model = inputs.model
-  const modelMode = inputs.model?.mode
-  const isChatMode = modelMode === 'chat'
+  // const modelMode = inputs.model?.mode
+  // const isChatMode = modelMode === 'chat'
 
   return (
     <BasePanel
diff --git a/web/app/components/workflow/nodes/llm/use-input.ts b/web/app/components/workflow/nodes/llm/use-config.ts
similarity index 100%
rename from web/app/components/workflow/nodes/llm/use-input.ts
rename to web/app/components/workflow/nodes/llm/use-config.ts
diff --git a/web/app/components/workflow/nodes/mock.ts b/web/app/components/workflow/nodes/mock.ts
index 5d1a323c3e..ca693a73b7 100644
--- a/web/app/components/workflow/nodes/mock.ts
+++ b/web/app/components/workflow/nodes/mock.ts
@@ -1,13 +1,43 @@
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 
 export const mockNodesData: Record<string, any> = {
   aaa: {
     title: 'Start',
     type: BlockEnum.Start,
-
   },
   bbb: {
     title: 'Knowledge',
     type: BlockEnum.KnowledgeRetrieval,
   },
+  ccc: {
+    title: 'Code',
+    type: BlockEnum.Code,
+  },
 }
+
+export const mockNodeOutputVars: NodeOutPutVar[] = [
+  {
+    title: 'Start',
+    vars: [
+      {
+        variable: 'query',
+        type: 'string',
+      },
+      {
+        variable: 'age',
+        type: 'number',
+      },
+    ],
+  },
+  {
+    title: 'LLM',
+    vars: [
+      {
+        variable: 'usage',
+        type: 'object',
+        struct: ['token', 'value'],
+      },
+    ],
+  },
+]
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 8fd1f35d8b..5b2c86fae1 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -83,6 +83,15 @@ export type LLMNodeData = {
   }
 }
 
+export type NodeOutPutVar = {
+  title: string
+  vars: {
+    variable: string
+    type: string
+    struct?: string[]
+  }[]
+}
+
 export type Block = {
   classification?: string
   type: BlockEnum