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/external-tool-option.tsx

@@ -0,0 +1,85 @@
+import { memo } from 'react'
+import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+
+export class VariableOption extends MenuOption {
+  title: string
+  icon?: JSX.Element
+  extraElement?: JSX.Element
+  keywords: Array<string>
+  keyboardShortcut?: string
+  onSelect: (queryString: string) => void
+
+  constructor(
+    title: string,
+    options: {
+      icon?: JSX.Element
+      extraElement?: JSX.Element
+      keywords?: Array<string>
+      keyboardShortcut?: string
+      onSelect: (queryString: string) => void
+    },
+  ) {
+    super(title)
+    this.title = title
+    this.keywords = options.keywords || []
+    this.icon = options.icon
+    this.extraElement = options.extraElement
+    this.keyboardShortcut = options.keyboardShortcut
+    this.onSelect = options.onSelect.bind(this)
+  }
+}
+
+type VariableMenuItemProps = {
+  isSelected: boolean
+  onClick: () => void
+  onMouseEnter: () => void
+  option: VariableOption
+  queryString: string | null
+}
+export const VariableMenuItem = memo(({
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+  queryString,
+}: VariableMenuItemProps) => {
+  const title = option.title
+  let before = title
+  let middle = ''
+  let after = ''
+
+  if (queryString) {
+    const regex = new RegExp(queryString, 'i')
+    const match = regex.exec(option.title)
+
+    if (match) {
+      before = title.substring(0, match.index)
+      middle = match[0]
+      after = title.substring(match.index + match[0].length)
+    }
+  }
+
+  return (
+    <div
+      key={option.key}
+      className={`
+        flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
+        ${isSelected && 'bg-primary-50'}
+      `}
+      tabIndex={-1}
+      ref={option.setRefElement}
+      onMouseEnter={onMouseEnter}
+      onClick={onClick}>
+      <div className='mr-2'>
+        {option.icon}
+      </div>
+      <div className='grow text-[13px] text-gray-900 truncate' title={option.title}>
+        {before}
+        <span className='text-[#2970FF]'>{middle}</span>
+        {after}
+      </div>
+      {option.extraElement}
+    </div>
+  )
+})
+VariableMenuItem.displayName = 'VariableMenuItem'

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

@@ -0,0 +1,201 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { $insertNodes } from 'lexical'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type {
+  ContextBlockType,
+  ExternalToolBlockType,
+  HistoryBlockType,
+  QueryBlockType,
+  VariableBlockType,
+  WorkflowVariableBlockType,
+} from '../../types'
+import { INSERT_CONTEXT_BLOCK_COMMAND } from '../context-block'
+import { INSERT_HISTORY_BLOCK_COMMAND } from '../history-block'
+import { INSERT_QUERY_BLOCK_COMMAND } from '../query-block'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
+import { $createCustomTextNode } from '../custom-text/node'
+import { PromptOption } from './prompt-option'
+import { VariableOption } from './variable-option'
+import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
+import {
+  MessageClockCircle,
+  Tool03,
+} from '@/app/components/base/icons/src/vender/solid/general'
+import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
+import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import AppIcon from '@/app/components/base/app-icon'
+
+export const usePromptOptions = (
+  contextBlock?: ContextBlockType,
+  queryBlock?: QueryBlockType,
+  historyBlock?: HistoryBlockType,
+) => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+
+  return useMemo(() => {
+    return [
+      ...contextBlock?.show
+        ? [
+          new PromptOption(t('common.promptEditor.context.item.title'), {
+            icon: <File05 className='w-4 h-4 text-[#6938EF]' />,
+            onSelect: () => {
+              if (!contextBlock?.selectable)
+                return
+              editor.dispatchCommand(INSERT_CONTEXT_BLOCK_COMMAND, undefined)
+            },
+            disabled: !contextBlock?.selectable,
+          }),
+        ]
+        : [],
+      ...queryBlock?.show
+        ? [
+          new PromptOption(t('common.promptEditor.query.item.title'), {
+            icon: <UserEdit02 className='w-4 h-4 text-[#FD853A]' />,
+            onSelect: () => {
+              if (!queryBlock?.selectable)
+                return
+              editor.dispatchCommand(INSERT_QUERY_BLOCK_COMMAND, undefined)
+            },
+            disabled: !queryBlock?.selectable,
+          }),
+        ]
+        : [],
+      ...historyBlock?.show
+        ? [
+          new PromptOption(t('common.promptEditor.history.item.title'), {
+            icon: <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />,
+            onSelect: () => {
+              if (!historyBlock?.selectable)
+                return
+              editor.dispatchCommand(INSERT_HISTORY_BLOCK_COMMAND, undefined)
+            },
+            disabled: !historyBlock?.selectable,
+          }),
+        ]
+        : [],
+    ]
+  }, [contextBlock, editor, historyBlock, queryBlock, t])
+}
+
+export const useVariableOptions = (
+  variableBlock?: VariableBlockType,
+  queryString?: string,
+) => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+
+  const options = useMemo(() => {
+    const baseOptions = (variableBlock?.variables || []).map((item) => {
+      return new VariableOption(item.value, {
+        icon: <BracketsX className='w-[14px] h-[14px] text-[#2970FF]' />,
+        onSelect: () => {
+          editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${item.value}}}`)
+        },
+      })
+    })
+    if (!queryString)
+      return baseOptions
+
+    const regex = new RegExp(queryString, 'i')
+
+    return baseOptions.filter(option => regex.test(option.title) || option.keywords.some(keyword => regex.test(keyword)))
+  }, [editor, queryString, variableBlock])
+
+  const addOption = useMemo(() => {
+    return new VariableOption(t('common.promptEditor.variable.modal.add'), {
+      icon: <BracketsX className='mr-2 w-[14px] h-[14px] text-[#2970FF]' />,
+      onSelect: () => {
+        editor.update(() => {
+          const prefixNode = $createCustomTextNode('{{')
+          const suffixNode = $createCustomTextNode('}}')
+          $insertNodes([prefixNode, suffixNode])
+          prefixNode.select()
+        })
+      },
+    })
+  }, [editor, t])
+
+  return useMemo(() => {
+    return variableBlock?.show ? [...options, addOption] : []
+  }, [options, addOption, variableBlock?.show])
+}
+
+export const useExternalToolOptions = (
+  externalToolBlockType?: ExternalToolBlockType,
+  queryString?: string,
+) => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+
+  const options = useMemo(() => {
+    const baseToolOptions = (externalToolBlockType?.externalTools || []).map((item) => {
+      return new VariableOption(item.name, {
+        icon: (
+          <AppIcon
+            className='!w-[14px] !h-[14px]'
+            icon={item.icon}
+            background={item.icon_background}
+          />
+        ),
+        extraElement: <div className='text-xs text-gray-400'>{item.variableName}</div>,
+        onSelect: () => {
+          editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${item.variableName}}}`)
+        },
+      })
+    })
+    if (!queryString)
+      return baseToolOptions
+
+    const regex = new RegExp(queryString, 'i')
+
+    return baseToolOptions.filter(option => regex.test(option.title) || option.keywords.some(keyword => regex.test(keyword)))
+  }, [editor, queryString, externalToolBlockType])
+
+  const addOption = useMemo(() => {
+    return new VariableOption(t('common.promptEditor.variable.modal.addTool'), {
+      icon: <Tool03 className='mr-2 w-[14px] h-[14px] text-[#444CE7]' />,
+      extraElement: <ArrowUpRight className='w-3 h-3 text-gray-400' />,
+      onSelect: () => {
+        if (externalToolBlockType?.onAddExternalTool)
+          externalToolBlockType.onAddExternalTool()
+      },
+    })
+  }, [externalToolBlockType, t])
+
+  return useMemo(() => {
+    return externalToolBlockType?.show ? [...options, addOption] : []
+  }, [options, addOption, externalToolBlockType?.show])
+}
+
+export const useOptions = (
+  contextBlock?: ContextBlockType,
+  queryBlock?: QueryBlockType,
+  historyBlock?: HistoryBlockType,
+  variableBlock?: VariableBlockType,
+  externalToolBlockType?: ExternalToolBlockType,
+  workflowVariableBlockType?: WorkflowVariableBlockType,
+  queryString?: string,
+) => {
+  const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock)
+  const variableOptions = useVariableOptions(variableBlock, queryString)
+  const externalToolOptions = useExternalToolOptions(externalToolBlockType, queryString)
+  const workflowVariableOptions = useMemo(() => {
+    if (!workflowVariableBlockType?.show)
+      return []
+
+    return workflowVariableBlockType.variables || []
+  }, [workflowVariableBlockType])
+
+  return useMemo(() => {
+    return {
+      promptOptions,
+      variableOptions,
+      externalToolOptions,
+      workflowVariableOptions,
+      allOptions: [...promptOptions, ...variableOptions, ...externalToolOptions],
+    }
+  }, [promptOptions, variableOptions, externalToolOptions, workflowVariableOptions])
+}

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

@@ -0,0 +1,283 @@
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
+import ReactDOM from 'react-dom'
+import {
+  FloatingPortal,
+  flip,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/react'
+import type { TextNode } from 'lexical'
+import type { MenuRenderFn } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+import type {
+  ContextBlockType,
+  ExternalToolBlockType,
+  HistoryBlockType,
+  QueryBlockType,
+  VariableBlockType,
+  WorkflowVariableBlockType,
+} from '../../types'
+import { useBasicTypeaheadTriggerMatch } from '../../hooks'
+import { INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND } from '../workflow-variable-block'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
+import { $splitNodeContainingQuery } from '../../utils'
+import type { PromptOption } from './prompt-option'
+import PromptMenu from './prompt-menu'
+import VariableMenu from './variable-menu'
+import type { VariableOption } from './variable-option'
+import { useOptions } from './hooks'
+import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+
+type ComponentPickerProps = {
+  triggerString: string
+  contextBlock?: ContextBlockType
+  queryBlock?: QueryBlockType
+  historyBlock?: HistoryBlockType
+  variableBlock?: VariableBlockType
+  externalToolBlock?: ExternalToolBlockType
+  workflowVariableBlock?: WorkflowVariableBlockType
+}
+const ComponentPicker = ({
+  triggerString,
+  contextBlock,
+  queryBlock,
+  historyBlock,
+  variableBlock,
+  externalToolBlock,
+  workflowVariableBlock,
+}: ComponentPickerProps) => {
+  const { eventEmitter } = useEventEmitterContextContext()
+  const { refs, floatingStyles, elements } = useFloating({
+    placement: 'bottom-start',
+    middleware: [
+      offset(16), // fix hide cursor
+      shift(),
+      flip(),
+    ],
+  })
+  const [editor] = useLexicalComposerContext()
+  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(triggerString, {
+    minLength: 0,
+    maxLength: 0,
+  })
+
+  const [queryString, setQueryString] = useState<string | null>(null)
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === INSERT_VARIABLE_VALUE_BLOCK_COMMAND)
+      editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${v.payload}}}`)
+  })
+
+  const {
+    allOptions,
+    promptOptions,
+    variableOptions,
+    externalToolOptions,
+    workflowVariableOptions,
+  } = useOptions(
+    contextBlock,
+    queryBlock,
+    historyBlock,
+    variableBlock,
+    externalToolBlock,
+    workflowVariableBlock,
+  )
+
+  const onSelectOption = useCallback(
+    (
+      selectedOption: PromptOption | VariableOption,
+      nodeToRemove: TextNode | null,
+      closeMenu: () => void,
+      matchingString: string,
+    ) => {
+      editor.update(() => {
+        if (nodeToRemove && selectedOption?.key)
+          nodeToRemove.remove()
+
+        if (selectedOption?.onSelect)
+          selectedOption.onSelect(matchingString)
+
+        closeMenu()
+      })
+    },
+    [editor],
+  )
+
+  const handleSelectWorkflowVariable = useCallback((variables: string[]) => {
+    editor.update(() => {
+      const needRemove = $splitNodeContainingQuery(checkForTriggerMatch(triggerString, editor)!)
+      if (needRemove)
+        needRemove.remove()
+    })
+
+    if (variables[1] === 'sys.query' || variables[1] === 'sys.files')
+      editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, [variables[1]])
+    else
+      editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, variables)
+  }, [editor, checkForTriggerMatch, triggerString])
+
+  const renderMenu = useCallback<MenuRenderFn<PromptOption | VariableOption>>((
+    anchorElementRef,
+    { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
+  ) => {
+    if (anchorElementRef.current && (allOptions.length || workflowVariableBlock?.show)) {
+      return (
+        <>
+          {
+            ReactDOM.createPortal(
+              <div ref={refs.setReference}></div>,
+              anchorElementRef.current,
+            )
+          }
+          {
+            elements.reference && (
+              <FloatingPortal id='typeahead-menu'>
+                <div
+                  className='w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg overflow-y-auto'
+                  style={{
+                    ...floatingStyles,
+                    maxHeight: 'calc(1 / 3 * 100vh)',
+                  }}
+                  ref={refs.setFloating}
+                >
+                  {
+                    !!promptOptions.length && (
+                      <>
+                        <PromptMenu
+                          startIndex={0}
+                          selectedIndex={selectedIndex}
+                          options={promptOptions}
+                          onClick={(index, option) => {
+                            if (option.disabled)
+                              return
+                            setHighlightedIndex(index)
+                            selectOptionAndCleanUp(option)
+                          }}
+                          onMouseEnter={(index, option) => {
+                            if (option.disabled)
+                              return
+                            setHighlightedIndex(index)
+                          }}
+                        />
+                      </>
+                    )
+                  }
+                  {
+                    !!variableOptions.length && (
+                      <>
+                        {
+                          !!promptOptions.length && (
+                            <div className='h-[1px] bg-gray-100'></div>
+                          )
+                        }
+                        <VariableMenu
+                          startIndex={promptOptions.length}
+                          selectedIndex={selectedIndex}
+                          options={variableOptions}
+                          onClick={(index, option) => {
+                            if (option.disabled)
+                              return
+                            setHighlightedIndex(index)
+                            selectOptionAndCleanUp(option)
+                          }}
+                          onMouseEnter={(index, option) => {
+                            if (option.disabled)
+                              return
+                            setHighlightedIndex(index)
+                          }}
+                          queryString={queryString}
+                        />
+                      </>
+                    )
+                  }
+                  {
+                    !!externalToolOptions.length && (
+                      <>
+                        {
+                          (!!promptOptions.length || !!variableOptions.length) && (
+                            <div className='h-[1px] bg-gray-100'></div>
+                          )
+                        }
+                        <VariableMenu
+                          startIndex={promptOptions.length + variableOptions.length}
+                          selectedIndex={selectedIndex}
+                          options={externalToolOptions}
+                          onClick={(index, option) => {
+                            if (option.disabled)
+                              return
+                            setHighlightedIndex(index)
+                            selectOptionAndCleanUp(option)
+                          }}
+                          onMouseEnter={(index, option) => {
+                            if (option.disabled)
+                              return
+                            setHighlightedIndex(index)
+                          }}
+                          queryString={queryString}
+                        />
+                      </>
+                    )
+                  }
+                  {
+                    workflowVariableBlock?.show && (
+                      <>
+                        {
+                          (!!promptOptions.length || !!variableOptions.length || !!externalToolOptions.length) && (
+                            <div className='h-[1px] bg-gray-100'></div>
+                          )
+                        }
+                        <div className='p-1'>
+                          <VarReferenceVars
+                            hideSearch
+                            vars={workflowVariableOptions}
+                            onChange={(variables: string[]) => {
+                              handleSelectWorkflowVariable(variables)
+                            }}
+                          />
+                        </div>
+                      </>
+                    )
+                  }
+                </div>
+              </FloatingPortal>
+            )
+          }
+        </>
+      )
+    }
+
+    return null
+  }, [
+    allOptions,
+    promptOptions,
+    variableOptions,
+    externalToolOptions,
+    queryString,
+    workflowVariableBlock?.show,
+    workflowVariableOptions,
+    handleSelectWorkflowVariable,
+    elements,
+    floatingStyles,
+    refs,
+  ])
+
+  return (
+    <LexicalTypeaheadMenuPlugin
+      options={allOptions as any}
+      onQueryChange={setQueryString}
+      onSelectOption={onSelectOption}
+      anchorClassName='z-[999999]'
+      menuRenderFn={renderMenu}
+      triggerFn={checkForTriggerMatch}
+    />
+  )
+}
+
+export default memo(ComponentPicker)

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

@@ -0,0 +1,37 @@
+import { memo } from 'react'
+import { PromptMenuItem } from './prompt-option'
+
+type PromptMenuProps = {
+  startIndex: number
+  selectedIndex: number | null
+  options: any[]
+  onClick: (index: number, option: any) => void
+  onMouseEnter: (index: number, option: any) => void
+}
+const PromptMenu = ({
+  startIndex,
+  selectedIndex,
+  options,
+  onClick,
+  onMouseEnter,
+}: PromptMenuProps) => {
+  return (
+    <div className='p-1'>
+      {
+        options.map((option, index: number) => (
+          <PromptMenuItem
+            startIndex={startIndex}
+            index={index}
+            isSelected={selectedIndex === index + startIndex}
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            key={option.key}
+            option={option}
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default memo(PromptMenu)

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

@@ -0,0 +1,65 @@
+import { memo } from 'react'
+import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+
+export class PromptOption extends MenuOption {
+  title: string
+  icon?: JSX.Element
+  keywords: Array<string>
+  keyboardShortcut?: string
+  onSelect: (queryString: string) => void
+  disabled?: boolean
+
+  constructor(
+    title: string,
+    options: {
+      icon?: JSX.Element
+      keywords?: Array<string>
+      keyboardShortcut?: string
+      onSelect: (queryString: string) => void
+      disabled?: boolean
+    },
+  ) {
+    super(title)
+    this.title = title
+    this.keywords = options.keywords || []
+    this.icon = options.icon
+    this.keyboardShortcut = options.keyboardShortcut
+    this.onSelect = options.onSelect.bind(this)
+    this.disabled = options.disabled
+  }
+}
+
+type PromptMenuItemMenuItemProps = {
+  startIndex: number
+  index: number
+  isSelected: boolean
+  onClick: (index: number, option: PromptOption) => void
+  onMouseEnter: (index: number, option: PromptOption) => void
+  option: PromptOption
+}
+export const PromptMenuItem = memo(({
+  startIndex,
+  index,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+}: PromptMenuItemMenuItemProps) => {
+  return (
+    <div
+      key={option.key}
+      className={`
+        flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50 rounded-md
+        ${isSelected && !option.disabled && '!bg-gray-50'}
+        ${option.disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'}
+      `}
+      tabIndex={-1}
+      ref={option.setRefElement}
+      onMouseEnter={() => onMouseEnter(index + startIndex, option)}
+      onClick={() => onClick(index + startIndex, option)}>
+      {option.icon}
+      <div className='ml-1 text-[13px] text-gray-900'>{option.title}</div>
+    </div>
+  )
+})
+PromptMenuItem.displayName = 'PromptMenuItem'

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)

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

@@ -0,0 +1,89 @@
+import { memo } from 'react'
+import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+
+export class VariableOption extends MenuOption {
+  title: string
+  icon?: JSX.Element
+  extraElement?: JSX.Element
+  keywords: Array<string>
+  keyboardShortcut?: string
+  onSelect: (queryString: string) => void
+
+  constructor(
+    title: string,
+    options: {
+      icon?: JSX.Element
+      extraElement?: JSX.Element
+      keywords?: Array<string>
+      keyboardShortcut?: string
+      onSelect: (queryString: string) => void
+    },
+  ) {
+    super(title)
+    this.title = title
+    this.keywords = options.keywords || []
+    this.icon = options.icon
+    this.extraElement = options.extraElement
+    this.keyboardShortcut = options.keyboardShortcut
+    this.onSelect = options.onSelect.bind(this)
+  }
+}
+
+type VariableMenuItemProps = {
+  startIndex: number
+  index: number
+  isSelected: boolean
+  onClick: (index: number, option: VariableOption) => void
+  onMouseEnter: (index: number, option: VariableOption) => void
+  option: VariableOption
+  queryString: string | null
+}
+export const VariableMenuItem = memo(({
+  startIndex,
+  index,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+  queryString,
+}: VariableMenuItemProps) => {
+  const title = option.title
+  let before = title
+  let middle = ''
+  let after = ''
+
+  if (queryString) {
+    const regex = new RegExp(queryString, 'i')
+    const match = regex.exec(option.title)
+
+    if (match) {
+      before = title.substring(0, match.index)
+      middle = match[0]
+      after = title.substring(match.index + match[0].length)
+    }
+  }
+
+  return (
+    <div
+      key={option.key}
+      className={`
+        flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
+        ${isSelected && 'bg-primary-50'}
+      `}
+      tabIndex={-1}
+      ref={option.setRefElement}
+      onMouseEnter={() => onMouseEnter(index + startIndex, option)}
+      onClick={() => onClick(index + startIndex, option)}>
+      <div className='mr-2'>
+        {option.icon}
+      </div>
+      <div className='grow text-[13px] text-gray-900 truncate' title={option.title}>
+        {before}
+        <span className='text-[#2970FF]'>{middle}</span>
+        {after}
+      </div>
+      {option.extraElement}
+    </div>
+  )
+})
+VariableMenuItem.displayName = 'VariableMenuItem'