Improve UI text clarity by standardizing insertion option labels and adding a helpful audio understanding link

Author: robertpiosik

apps/editor/src/views/panel/backend/message-handlers/handle-create-preset-group-or-separator.ts

@@ -138,8 +138,8 @@ export const handle_create_preset_group_or_separator = async (
       (resolve) => {
         const quick_pick = vscode.window.createQuickPick()
         quick_pick.items = [
-          { label: 'Insert new item above' },
-          { label: 'Insert new item below' }
+          { label: 'Insert a new item above' },
+          { label: 'Insert a new item below' }
         ]
         quick_pick.title = 'Placement'
         quick_pick.placeholder = 'Where to insert?'
@@ -175,7 +175,7 @@ export const handle_create_preset_group_or_separator = async (
     if (!position_quick_pick) return
 
     insertion_index =
-      position_quick_pick == 'Insert new item above'
+      position_quick_pick == 'Insert a new item above'
         ? message.reference_index
         : message.reference_index + 1
   } else if (message.placement == 'top') {

apps/editor/src/views/settings/frontend/Home/Home.tsx

@@ -652,7 +652,19 @@ export const Home: React.FC<Props> = (props) => {
           }
         >
           <Notice type="info">
-            Requires a multimodal model accepting audio input.
+            Requires a multimodal model supporting{' '}
+            <a
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                props.on_open_external_url(
+                  'https://ai.google.dev/gemini-api/docs/audio'
+                )
+              }}
+            >
+              audio understanding
+            </a>
+            .
           </Notice>
           {props.voice_input_configs.length == 0 && (
             <Notice type="warning">

apps/editor/src/views/utils/upsert-configuration.ts

@@ -70,8 +70,8 @@ export const upsert_configuration = async (params: {
       (resolve) => {
         const quick_pick = vscode.window.createQuickPick()
         quick_pick.items = [
-          { label: 'Insert new configuration above' },
-          { label: 'Insert new configuration below' }
+          { label: 'Insert a new configuration above' },
+          { label: 'Insert a new configuration below' }
         ]
         quick_pick.title = 'Placement'
         quick_pick.placeholder = 'Where to insert?'
@@ -107,7 +107,7 @@ export const upsert_configuration = async (params: {
     if (!position_quick_pick) return
 
     actual_insertion_index =
-      position_quick_pick == 'Insert new configuration above'
+      position_quick_pick == 'Insert a new configuration above'
         ? params.insertion_index
         : params.insertion_index + 1
   }

apps/editor/src/views/utils/upsert-model-provider.ts

@@ -317,8 +317,8 @@ export const upsert_model_provider = async (params: {
       (resolve) => {
         const quick_pick = vscode.window.createQuickPick()
         quick_pick.items = [
-          { label: 'Insert new provider above' },
-          { label: 'Insert new provider below' }
+          { label: 'Insert a new provider above' },
+          { label: 'Insert a new provider below' }
         ]
         quick_pick.title = 'Placement'
         quick_pick.placeholder = 'Where to insert?'
@@ -354,7 +354,7 @@ export const upsert_model_provider = async (params: {
     if (!position_quick_pick) return
 
     actual_insertion_index =
-      position_quick_pick == 'Insert new provider above'
+      position_quick_pick == 'Insert a new provider above'
         ? insertion_index
         : insertion_index + 1
   }

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

@@ -97,7 +97,7 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
           {!is_dragging_disabled && (
             <IconButton
               codicon_icon="insert"
-              title="Insert new configuration below/above"
+              title="Insert a new configuration below/above"
               on_click={(e) => {
                 e.stopPropagation()
                 props.on_create({ insertion_index: index_for_insertion })

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

@@ -344,7 +344,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                         />
                         <IconButton
                           codicon_icon="insert"
-                          title="Insert new item below/above"
+                          title="Insert a new item below/above"
                           on_click={(e) => {
                             e.stopPropagation()
                             props.on_create(undefined, preset.original_index!)
@@ -549,7 +549,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                       />
                       <IconButton
                         codicon_icon="insert"
-                        title="Insert new item below/above"
+                        title="Insert a new item below/above"
                         on_click={(e) => {
                           e.stopPropagation()
                           props.on_create(undefined, preset.original_index!)

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

@@ -16,10 +16,6 @@ import {
   get_caret_position_from_div,
   set_caret_position_for_div
 } from './utils/caret'
-import {
-  map_display_pos_to_raw_pos,
-  map_raw_pos_to_display_pos
-} from './utils/position-mapping'
 import { Tooltip } from './components'
 import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
 
@@ -85,7 +81,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     useState(false)
   const [hovered_edit_format, set_hovered_edit_format] =
     useState<EditFormat | null>(null)
-
   const [prune_instructions, set_prune_instructions] = useState(
     props.prune_context_instructions_prefix
   )
@@ -106,6 +101,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     is_invocation_dropdown_open,
     on_toggle_invocation_dropdown: toggle_invocation_dropdown
   })
+
   const {
     is_dropdown_open,
     toggle_dropdown,
@@ -114,16 +110,18 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     handle_copy_click,
     handle_select_click
   } = use_dropdown(props)
+
   const invocation_dropdown_ref = useRef<HTMLDivElement>(null)
+
   const { ghost_text, handle_accept_ghost_text } = use_ghost_text({
     value: props.value,
     input_ref,
     is_focused: is_focused && should_show_ghost_text,
     currently_open_file_text: props.currently_open_file_text,
     caret_position
   })
+
   const {
-    handle_clear,
     handle_input_change,
     handle_submit,
     handle_key_down,
@@ -132,7 +130,14 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     handle_cut,
     handle_paste,
     handle_input_click
-  } = use_handlers(props, input_ref, ghost_text, handle_accept_ghost_text)
+  } = use_handlers(
+    props,
+    input_ref,
+    ghost_text,
+    handle_accept_ghost_text,
+    set_caret_position
+  )
+
   const { handle_drag_start, handle_drag_over, handle_drop, handle_drag_end } =
     use_drag_drop({
       input_ref,
@@ -199,28 +204,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     }
   }, [highlighted_html])
 
-  useEffect(() => {
-    if (input_ref.current) {
-      if (
-        props.caret_position_to_set !== undefined &&
-        props.on_caret_position_set
-      ) {
-        const display_pos = map_raw_pos_to_display_pos(
-          props.caret_position_to_set,
-          props.value,
-          props.context_file_paths ?? []
-        )
-        set_caret_position_for_div(input_ref.current, display_pos)
-        props.on_caret_position_set()
-      }
-    }
-  }, [
-    props.caret_position_to_set,
-    props.on_caret_position_set,
-    props.value,
-    props.context_file_paths
-  ])
-
   useEffect(() => {
     if (input_ref.current) {
       input_ref.current.focus()
@@ -247,37 +230,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     }
   }, [is_invocation_dropdown_open])
 
-  useEffect(() => {
-    if (input_ref.current) {
-      input_ref.current.focus()
-      const selection = window.getSelection()
-      if (selection) {
-        const range = document.createRange()
-        range.selectNodeContents(input_ref.current)
-        selection.removeAllRanges()
-        selection.addRange(range)
-      }
-    }
-  }, [props.focus_and_select_key])
-
-  useEffect(() => {
-    const on_selection_change = () => {
-      if (document.activeElement === input_ref.current && input_ref.current) {
-        const pos = get_caret_position_from_div(input_ref.current)
-        set_caret_position(pos)
-        const raw_pos = map_display_pos_to_raw_pos(
-          pos,
-          props.value,
-          props.context_file_paths ?? []
-        )
-        props.on_caret_position_change(raw_pos)
-      }
-    }
-    document.addEventListener('selectionchange', on_selection_change)
-    return () =>
-      document.removeEventListener('selectionchange', on_selection_change)
-  }, [props.on_caret_position_change, props.value, props.context_file_paths])
-
   const placeholder = useMemo(() => {
     if (props.prompt_type == 'code-at-cursor') {
       if (props.chat_history.length > 0 && is_history_enabled) {

packages/ui/src/components/editor/panel/PromptField/hooks/use-handlers.ts

@@ -236,7 +236,8 @@ export const use_handlers = (
   props: PromptFieldProps,
   input_ref: RefObject<HTMLDivElement>,
   ghost_text: string,
-  on_accept_ghost_text: () => void
+  on_accept_ghost_text: () => void,
+  set_caret_position: (pos: number) => void
 ) => {
   const [history_index, set_history_index] = useState(-1)
   const [is_history_enabled, set_is_history_enabled] = useState(!props.value)
@@ -277,17 +278,19 @@ export const use_handlers = (
       if (document.activeElement === input_ref.current && input_ref.current) {
         const selection = window.getSelection()
         const pos = get_caret_position_from_div(input_ref.current)
+        set_caret_position(pos)
+
         const raw_pos = map_display_pos_to_raw_pos(
           pos,
           props.value,
           props.context_file_paths ?? []
         )
         raw_caret_pos_ref.current = raw_pos
+        props.on_caret_position_change(raw_pos)
 
         const is_at_end =
           raw_pos == props.value.length && !!selection?.isCollapsed
 
-        // Only enable history if at end AND haven't modified the current entry
         const is_history_check_enabled =
           is_at_end && !has_modified_current_entry_ref.current
         set_is_history_enabled(is_history_check_enabled)
@@ -297,7 +300,54 @@ export const use_handlers = (
     on_selection_change()
     return () =>
       document.removeEventListener('selectionchange', on_selection_change)
-  }, [props.value, props.context_file_paths, input_ref])
+  }, [
+    props.value,
+    props.context_file_paths,
+    input_ref,
+    props.on_caret_position_change,
+    set_caret_position
+  ])
+
+  useEffect(() => {
+    if (input_ref.current) {
+      if (
+        props.caret_position_to_set !== undefined &&
+        props.on_caret_position_set
+      ) {
+        const display_pos = map_raw_pos_to_display_pos(
+          props.caret_position_to_set,
+          props.value,
+          props.context_file_paths ?? []
+        )
+        set_caret_position_for_div(input_ref.current, display_pos)
+        props.on_caret_position_set()
+      }
+    }
+  }, [
+    props.caret_position_to_set,
+    props.on_caret_position_set,
+    props.value,
+    props.context_file_paths
+  ])
+
+  useEffect(() => {
+    if (input_ref.current) {
+      input_ref.current.focus()
+    }
+  }, [props.focus_key])
+
+  useEffect(() => {
+    if (input_ref.current) {
+      input_ref.current.focus()
+      const selection = window.getSelection()
+      if (selection) {
+        const range = document.createRange()
+        range.selectNodeContents(input_ref.current)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    }
+  }, [props.focus_and_select_key])
 
   const update_value = (new_value: string, caret_pos?: number) => {
     if (new_value === props.value) return
@@ -1460,7 +1510,6 @@ export const use_handlers = (
     handle_submit,
     handle_key_down,
     is_history_enabled,
-    handle_clear,
     handle_copy,
     handle_cut,
     handle_paste,

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.tsx

@@ -61,7 +61,7 @@ export const ConfigurationsList: React.FC<ConfigurationsList.Props> = (
       <div className={styles['col-actions']}>
         <IconButton
           codicon_icon="insert"
-          title="Insert new configuration below/above"
+          title="Insert a new configuration below/above"
           on_click={() => props.on_add({ insertion_index: index })}
         />
         <IconButton

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.tsx

@@ -47,7 +47,7 @@ export const ModelProviders: React.FC<ModelProviders.Props> = (props) => {
       <div className={styles['col-actions']}>
         <IconButton
           codicon_icon="insert"
-          title="Insert new provider below/above"
+          title="Insert a new provider below/above"
           on_click={() => props.on_add_provider({ insertion_index: index })}
         />
         {provider.type == 'custom' && (