refactor: revamp picker block (#4227)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

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

@@ -1,60 +1,32 @@
 import { memo } from 'react'
-import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
 
-export class VariableOption extends MenuOption {
+type VariableMenuItemProps = {
   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
+  onClick: () => void
+  onMouseEnter: () => void
+  setRefElement?: (element: HTMLDivElement) => void
 }
 export const VariableMenuItem = memo(({
-  startIndex,
-  index,
+  title,
+  icon,
+  extraElement,
   isSelected,
+  queryString,
   onClick,
   onMouseEnter,
-  option,
-  queryString,
+  setRefElement,
 }: 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)
+    const match = regex.exec(title)
 
     if (match) {
       before = title.substring(0, match.index)
@@ -65,24 +37,23 @@ export const VariableMenuItem = memo(({
 
   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)}>
+      ref={setRefElement}
+      onMouseEnter={onMouseEnter}
+      onClick={onClick}>
       <div className='mr-2'>
-        {option.icon}
+        {icon}
       </div>
-      <div className='grow text-[13px] text-gray-900 truncate' title={option.title}>
+      <div className='grow text-[13px] text-gray-900 truncate' title={title}>
         {before}
         <span className='text-[#2970FF]'>{middle}</span>
         {after}
       </div>
-      {option.extraElement}
+      {extraElement}
     </div>
   )
 })