Refactor the ChatInput dropdown menu into a reusable DropdownMenu component

Author: robertpiosik

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -0,0 +1,37 @@
+.menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  background-color: var(--vscode-menu-background);
+  border: 1px solid var(--vscode-menu-border);
+  border-radius: var(--border-radius-8px);
+  box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+  z-index: 1;
+  padding: var(--padding-4px);
+  width: max-content;
+  text-align: left;
+}
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--padding-12px);
+  align-items: center;
+  padding: var(--padding-4px) var(--padding-8px);
+  cursor: pointer;
+  color: var(--vscode-menu-foreground);
+  white-space: nowrap;
+  border-radius: var(--border-radius-4px);
+
+  &:hover {
+    background-color: var(--vscode-menu-selectionBackground);
+    & > span {
+      color: var(--vscode-menu-selectionForeground);
+    }
+  }
+}
+
+.shortcut {
+  color: var(--vscode-descriptionForeground);
+  font-size: var(--font-size-12px);
+}

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,35 @@
+import { DropdownMenu } from './DropdownMenu'
+
+export default {
+  component: DropdownMenu,
+  decorators: [
+    (Story: any) => (
+      <div style={{ position: 'relative', width: '200px', height: '150px' }}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const sample_items: DropdownMenu.Item[] = [
+  {
+    label: 'Select...',
+    shortcut: 'cmd+return',
+    on_click: () => alert('Select clicked')
+  },
+  {
+    label: 'Copy prompt',
+    shortcut: 'cmd+option+c',
+    on_click: () => alert('Copy clicked')
+  },
+  {
+    label: 'Another Action',
+    on_click: () => alert('Another action clicked')
+  }
+]
+
+export const Default = {
+  args: {
+    items: sample_items
+  }
+}

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,33 @@
+import styles from './DropdownMenu.module.scss'
+import cn from 'classnames'
+
+export namespace DropdownMenu {
+  export type Item = {
+    label: string
+    shortcut?: string
+    on_click: () => void
+  }
+
+  export type Props = {
+    items: Item[]
+    className?: string
+  }
+}
+
+export const DropdownMenu: React.FC<DropdownMenu.Props> = ({
+  items,
+  className
+}) => {
+  return (
+    <div className={cn(styles.menu, className)}>
+      {items.map((item, index) => (
+        <div key={index} className={styles.item} onClick={item.on_click}>
+          <span>{item.label}</span>
+          {item.shortcut && (
+            <span className={styles.shortcut}>{item.shortcut}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

packages/ui/src/components/editor/common/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export * from './DropdownMenu'

packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss

@@ -266,41 +266,6 @@
           width: 20px;
         }
       }
-
-      &__dropdown {
-        position: absolute;
-        top: calc(100% + 4px);
-        right: 0;
-        background-color: var(--vscode-menu-background);
-        border: 1px solid var(--vscode-menu-border);
-        border-radius: var(--border-radius-5px);
-        box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-        z-index: 10;
-        padding: var(--padding-4px) 0;
-        width: max-content;
-        text-align: left;
-
-        &__item {
-          display: flex;
-          justify-content: space-between;
-          gap: var(--padding-12px);
-          align-items: center;
-          padding: var(--padding-4px) var(--padding-8px);
-          cursor: pointer;
-          color: var(--vscode-menu-foreground);
-          white-space: nowrap;
-
-          &:hover {
-            background-color: var(--vscode-menu-selectionBackground);
-            color: var(--vscode-menu-selectionForeground) !important;
-          }
-
-          &__shortcut {
-            color: var(--vscode-descriptionForeground);
-            font-size: var(--font-size-12px);
-          }
-        }
-      }
     }
   }
 }

packages/ui/src/components/editor/panel/ChatInput/ChatInput.tsx

@@ -1,11 +1,12 @@
-import { useRef, useEffect, useMemo, useState } from 'react'
+import { useRef, useEffect, useMemo } from 'react'
 import styles from './ChatInput.module.scss'
 import TextareaAutosize from 'react-textarea-autosize'
 import cn from 'classnames'
 import { Icon } from '../../common/Icon'
 import { get_highlighted_text } from './utils/get-highlighted-text'
 import { use_handlers } from './hooks/use-handlers'
 import { use_dropdown } from './hooks/use-dropdown'
+import { DropdownMenu } from '../../common/DropdownMenu'
 
 export type EditFormat = 'whole' | 'truncated' | 'diff'
 
@@ -109,8 +110,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   }, [
     props.is_in_code_completions_mode,
     props.chat_history,
-    is_history_enabled,
-    props.is_web_mode
+    is_history_enabled
   ])
 
   const custom_handle_key_down = (
@@ -306,42 +306,20 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     />
                   </button>
                   {is_dropdown_open && (
-                    <div className={styles['footer__right__submit__dropdown']}>
-                      <div
-                        className={
-                          styles['footer__right__submit__dropdown__item']
-                        }
-                        onClick={handle_select_click}
-                      >
-                        Select...
-                        <span
-                          className={
-                            styles[
-                              'footer__right__submit__dropdown__item__shortcut'
-                            ]
-                          }
-                        >
-                          {mod_key}+{is_mac ? 'return' : 'enter'}
-                        </span>
-                      </div>
-                      <div
-                        className={
-                          styles['footer__right__submit__dropdown__item']
+                    <DropdownMenu
+                      items={[
+                        {
+                          label: 'Select...',
+                          shortcut: `${mod_key}+${is_mac ? 'return' : 'enter'}`,
+                          on_click: handle_select_click
+                        },
+                        {
+                          label: 'Copy prompt',
+                          shortcut: `${mod_key}+${is_mac ? 'option' : 'alt'}+c`,
+                          on_click: handle_copy_click
                         }
-                        onClick={handle_copy_click}
-                      >
-                        Copy prompt
-                        <span
-                          className={
-                            styles[
-                              'footer__right__submit__dropdown__item__shortcut'
-                            ]
-                          }
-                        >
-                          {mod_key}+{is_mac ? 'option' : 'alt'}+c
-                        </span>
-                      </div>
-                    </div>
+                      ]}
+                    />
                   )}
                 </>
               )}

packages/ui/src/components/editor/panel/ChatInput/hooks/use-dropdown.ts

@@ -37,14 +37,12 @@ export const use_dropdown = ({
     }
   }, [])
 
-  const handle_copy_click = (e: React.MouseEvent) => {
-    e.stopPropagation()
+  const handle_copy_click = () => {
     on_copy()
     close_dropdown()
   }
 
-  const handle_select_click = (e: React.MouseEvent) => {
-    e.stopPropagation()
+  const handle_select_click = () => {
     on_submit_with_control()
     close_dropdown()
   }

packages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss

@@ -50,37 +50,26 @@
   position: absolute;
   right: 0;
   margin-top: var(--padding-2px);
-  z-index: 3;
-  background-color: var(--vscode-dropdown-background);
-  border: 1px solid var(--vscode-focusBorder);
-  border-radius: var(--border-radius-4px);
+  z-index: 1;
+  background-color: var(--vscode-menu-background);
+  border: 1px solid var(--vscode-menu-border);
+  border-radius: var(--border-radius-8px);
+  box-shadow: 0 2px 8px var(--vscode-widget-shadow);
   min-width: 100%;
   max-height: 200px;
   overflow-y: auto;
+  padding: var(--padding-4px);
 
   &__item {
-    --margin: 1px;
     display: flex;
     align-items: center;
     height: 24px;
     padding: 0 var(--padding-8px);
     color: var(--vscode-menu-foreground);
     font-size: var(--font-size-13px);
     cursor: pointer;
-    margin: var(--margin);
     white-space: nowrap;
-
-    &:first-child {
-      border-top-left-radius: calc(var(--border-radius-4px) - var(--margin));
-      border-top-right-radius: calc(var(--border-radius-4px) - var(--margin));
-    }
-
-    &:last-child {
-      border-bottom-left-radius: calc(var(--border-radius-4px) - var(--margin));
-      border-bottom-right-radius: calc(
-        var(--border-radius-4px) - var(--margin)
-      );
-    }
+    border-radius: var(--border-radius-4px);
 
     &:hover {
       background-color: var(--vscode-menu-selectionBackground);