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

@@ -1,64 +1,44 @@
 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
+  icon: JSX.Element
+  title: string
+  disabled?: boolean
   isSelected: boolean
-  onClick: (index: number, option: PromptOption) => void
-  onMouseEnter: (index: number, option: PromptOption) => void
-  option: PromptOption
+  onClick: () => void
+  onMouseEnter: () => void
+  setRefElement?: (element: HTMLDivElement) => void
 }
 export const PromptMenuItem = memo(({
-  startIndex,
-  index,
+  icon,
+  title,
+  disabled,
   isSelected,
   onClick,
   onMouseEnter,
-  option,
+  setRefElement,
 }: 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'}
+        ${isSelected && !disabled && '!bg-gray-50'}
+        ${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>
+      ref={setRefElement}
+      onMouseEnter={() => {
+        if (disabled)
+          return
+        onMouseEnter()
+      }}
+      onClick={() => {
+        if (disabled)
+          return
+        onClick()
+      }}>
+      {icon}
+      <div className='ml-1 text-[13px] text-gray-900'>{title}</div>
     </div>
   )
 })