FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/base/prompt-editor/plugins/component-picker-block/variable-menu.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react'
+import { VariableMenuItem } from './variable-option'
+
+type VariableMenuProps = {
+  startIndex: number
+  selectedIndex: number | null
+  options: any[]
+  onClick: (index: number, option: any) => void
+  onMouseEnter: (index: number, option: any) => void
+  queryString: string | null
+}
+const VariableMenu = ({
+  startIndex,
+  selectedIndex,
+  options,
+  onClick,
+  onMouseEnter,
+  queryString,
+}: VariableMenuProps) => {
+  return (
+    <div className='p-1'>
+      {
+        options.map((option, index: number) => (
+          <VariableMenuItem
+            startIndex={startIndex}
+            index={index}
+            isSelected={selectedIndex === index + startIndex}
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            key={option.key}
+            option={option}
+            queryString={queryString}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default memo(VariableMenu)