Enable visual highlighting for the currently selected preset or group in the UI

Author: robertpiosik

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

@@ -4,7 +4,7 @@ import { Checkbox } from '../Checkbox'
 import cn from 'classnames'
 import { ReactSortable } from 'react-sortablejs'
 import { Icon } from '../Icon'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { CHATBOTS } from '@shared/constants/chatbots'
 
 export const chatbot_to_icon: Record<keyof typeof CHATBOTS, Icon.Variant> = {
@@ -55,6 +55,7 @@ export namespace Presets {
     on_preset_duplicate: (name: string) => void
     on_preset_delete: (name: string) => void
     on_toggle_default_preset: (name: string) => void
+    selected_preset_or_group_name?: string
     translations: {
       my_chat_presets: string
       set_presets_opening_by_default: string
@@ -89,6 +90,15 @@ export const Presets: React.FC<Presets.Props> = (props) => {
     Record<Presets.Props['web_mode'], string>
   >({} as any)
 
+  useEffect(() => {
+    if (props.selected_preset_or_group_name) {
+      set_highlighted_preset_name((prev) => ({
+        ...prev,
+        [props.web_mode]: props.selected_preset_or_group_name
+      }))
+    }
+  }, [props.selected_preset_or_group_name])
+
   const get_is_preset_disabled = (preset: Presets.Preset) =>
     preset.chatbot &&
     (!props.is_connected ||

packages/vscode/src/view/backend/message-handlers/handle-send-prompt.ts

@@ -209,7 +209,8 @@ export const handle_send_prompt = async (params: {
 async function show_preset_quick_pick(
   presets: ConfigPresetFormat[],
   context: vscode.ExtensionContext,
-  mode: string
+  mode: string,
+  provider: ViewProvider
 ): Promise<string[]> {
   const last_selected_item = context.workspaceState.get<string | undefined>(
     get_last_selected_preset_key(mode),
@@ -280,6 +281,10 @@ async function show_preset_quick_pick(
           get_last_selected_preset_key(mode),
           selected_name
         )
+        provider.send_message({
+          command: 'SELECTED_PRESETS',
+          names: [selected_name]
+        })
         resolve([selected_name])
       } else {
         resolve([])
@@ -615,6 +620,10 @@ async function resolve_presets(params: {
         }
 
         const group_name = selected.name
+        params.provider.send_message({
+          command: 'SELECTED_PRESETS',
+          names: [group_name]
+        })
         params.context.workspaceState.update(
           last_selected_group_state_key,
           group_name
@@ -668,6 +677,7 @@ async function resolve_presets(params: {
   return show_preset_quick_pick(
     all_presets,
     params.context,
-    params.provider.web_mode
+    params.provider.web_mode,
+    params.provider
   )
 }

packages/vscode/src/view/frontend/home/Home.tsx

@@ -59,6 +59,8 @@ export const Home: React.FC<Props> = (props) => {
     useState<boolean>(false)
   const [can_apply_clipboard, set_can_apply_clipboard] =
     useState<boolean>(false)
+  const [selected_preset_or_group_name, set_selected_preset_or_group_name] =
+    useState<string>()
   const [can_revert, set_can_revert] = useState<boolean>(false)
 
   const is_in_code_completions_mode =
@@ -122,6 +124,11 @@ export const Home: React.FC<Props> = (props) => {
         case 'CAN_REVERT_CHANGED':
           set_can_revert(message.can_revert)
           break
+        case 'SELECTED_PRESETS':
+          if (message.names.length > 0) {
+            set_selected_preset_or_group_name(message.names[0])
+          }
+          break
       }
     }
 
@@ -537,6 +544,9 @@ export const Home: React.FC<Props> = (props) => {
       on_code_completion_with_quick_pick_click={
         handle_code_completion_with_quick_pick_click
       }
+      selected_preset_or_group_name={
+        selected_preset_or_group_name
+      }
       caret_position_to_set={caret_position_to_set}
       on_caret_position_set={() => set_caret_position_to_set(undefined)}
     />

packages/vscode/src/view/frontend/home/HomeView/HomeView.tsx

@@ -68,6 +68,7 @@ type Props = {
   on_code_completion_with_quick_pick_click: () => void
   caret_position_to_set?: number
   on_caret_position_set?: () => void
+  selected_preset_or_group_name?: string
 }
 
 const web_mode_labels: Record<WebMode, string> = {
@@ -449,6 +450,9 @@ export const HomeView: React.FC<Props> = (props) => {
                   no_preset_enabled_or_selected_in_this_group:
                     'No preset is enabled or selected in this group'
                 }}
+                selected_preset_or_group_name={
+                  props.selected_preset_or_group_name
+                }
               />
             </>
           )}