Refactor preset management to dynamically select and apply affixes based on the active chat mode

Author: robertpiosik

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

@@ -12,6 +12,7 @@ type Props = {
   preset: Preset
   on_update: (updated_preset: Preset) => void
   pick_open_router_model: () => void
+  can_set_affixes: boolean
 }
 
 export const EditPresetForm: React.FC<Props> = (props) => {
@@ -284,29 +285,33 @@ export const EditPresetForm: React.FC<Props> = (props) => {
         </Field>
       )}
 
-      <Field
-        label="Prompt Prefix"
-        html_for="prefix"
-        info="Text prepended to prompts used with this preset"
-      >
-        <textarea
-          id="prefix"
-          value={prompt_prefix}
-          onChange={(e) => set_prompt_prefix(e.target.value)}
-        />
-      </Field>
+      {props.can_set_affixes && (
+        <>
+          <Field
+            label="Prompt Prefix"
+            html_for="prefix"
+            info="Text prepended to prompts used with this preset"
+          >
+            <textarea
+              id="prefix"
+              value={prompt_prefix}
+              onChange={(e) => set_prompt_prefix(e.target.value)}
+            />
+          </Field>
 
-      <Field
-        label="Prompt Suffix"
-        html_for="suffix"
-        info="Text appended to prompts used with this preset"
-      >
-        <textarea
-          id="suffix"
-          value={prompt_suffix}
-          onChange={(e) => set_prompt_suffix(e.target.value)}
-        />
-      </Field>
+          <Field
+            label="Prompt Suffix"
+            html_for="suffix"
+            info="Text appended to prompts used with this preset"
+          >
+            <textarea
+              id="suffix"
+              value={prompt_suffix}
+              onChange={(e) => set_prompt_suffix(e.target.value)}
+            />
+          </Field>
+        </>
+      )}
     </div>
   )
 }

packages/ui/src/components/editor/Presets/Presets.module.scss

@@ -68,18 +68,14 @@
           width: 16px;
           height: 16px;
         }
-
-        &--selected > svg {
-          fill: var(--vscode-textLink-foreground);
-        }
       }
 
       &__text {
         overflow: hidden;
         text-overflow: ellipsis;
 
-        &--selected {
-          color: var(--vscode-textLink-foreground);
+        &--selected > span:first-child {
+          font-weight: 600;
         }
 
         &--disabled {

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

@@ -44,7 +44,6 @@ const with_ids = (
 
 const ChatbotIcon: React.FC<{
   chatbot: keyof typeof CHATBOTS
-  is_selected: boolean
   is_disabled: boolean
 }> = (params) => {
   const icon_variant = chatbot_to_icon[params.chatbot]
@@ -54,7 +53,6 @@ const ChatbotIcon: React.FC<{
   return (
     <div
       className={cn(styles.presets__item__left__icon, {
-        [styles['presets__item__left__icon--selected']]: params.is_selected,
         [styles['presets__item__left__icon--disabled']]: params.is_disabled
       })}
     >
@@ -74,7 +72,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
       })}
     >
       <div className={styles['my-presets']}>
-        <div className={styles['my-presets__left']}>MY PRESETS</div>
+        <div className={styles['my-presets__left']}>MY CHAT PRESETS</div>
 
         <TextButton
           on_click={props.on_set_default_presets}
@@ -134,11 +132,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
                 title={display_name}
               >
                 <div className={styles.presets__item__left}>
-                  <ChatbotIcon
-                    chatbot={preset.chatbot}
-                    is_selected={props.selected_presets.includes(preset.name)}
-                    is_disabled={false}
-                  />
+                  <ChatbotIcon chatbot={preset.chatbot} is_disabled={false} />
 
                   <div
                     className={cn(styles.presets__item__left__text, {

packages/vscode/src/commands/chat-commands.ts

@@ -111,7 +111,8 @@ async function process_chat_instructions(
   preset_names: string[],
   context: vscode.ExtensionContext,
   workspace_provider: any,
-  open_editors_provider: any
+  open_editors_provider: any,
+  presets_config_key: string
 ) {
   const files_collector = new FilesCollector(
     workspace_provider,
@@ -143,7 +144,8 @@ async function process_chat_instructions(
     preset_names.map(async (preset_name) => {
       let base_instructions = apply_preset_affixes_to_instruction(
         instructions,
-        preset_name
+        preset_name,
+        presets_config_key
       )
 
       if (base_instructions.includes('@Selection')) {
@@ -195,7 +197,8 @@ export async function handle_chat_command(
   file_tree_provider: any,
   open_editors_provider: any,
   websocket_server_instance: WebSocketManager,
-  preset_names: string[]
+  preset_names: string[],
+  presets_config_key: string
 ) {
   const instructions = await get_chat_instructions(context)
   if (!instructions) return
@@ -205,11 +208,12 @@ export async function handle_chat_command(
     preset_names,
     context,
     file_tree_provider,
-    open_editors_provider
+    open_editors_provider,
+    presets_config_key
   )
   if (!chats) return
 
-  websocket_server_instance.initialize_chats(chats)
+  websocket_server_instance.initialize_chats(chats, presets_config_key)
 }
 
 export function chat_using_command(
@@ -230,8 +234,9 @@ export function chat_using_command(
     if (!instructions) return
 
     const config = vscode.workspace.getConfiguration('codeWebChat')
+    const presets_config_key = 'chatPresetsForEditContext'
     const web_chat_presets = config.get<ConfigPresetFormat[]>(
-      'chatPresetsForEditContext',
+      presets_config_key,
       []
     )
 
@@ -258,11 +263,12 @@ export function chat_using_command(
       [selected_preset.label],
       context,
       file_tree_provider,
-      open_editors_provider
+      open_editors_provider,
+      presets_config_key
     )
     if (!chats) return
 
-    websocket_server_instance.initialize_chats(chats)
+    websocket_server_instance.initialize_chats(chats, presets_config_key)
   })
 }
 
@@ -323,7 +329,8 @@ export function chat_command(
       file_tree_provider,
       open_editors_provider,
       websocket_server_instance,
-      selected_names
+      selected_names,
+      'chatPresetsForEditContext'
     )
   })
 }

packages/vscode/src/commands/code-completion-in-chat-commands.ts

@@ -90,7 +90,10 @@ async function handle_code_completion_in_chat_command(
       }
     })
 
-    websocket_server_instance.initialize_chats(chats)
+    websocket_server_instance.initialize_chats(
+      chats,
+      'chatPresetsForCodeAtCursor'
+    )
   } catch (error: any) {
     console.error('Error in FIM in Chat:', error)
     vscode.window.showErrorMessage('Error in FIM in Chat: ' + error.message)
@@ -119,7 +122,7 @@ export function code_completion_in_chat_with_command(
     async () => {
       const config = vscode.workspace.getConfiguration('codeWebChat')
       const all_presets = config.get<ConfigPresetFormat[]>(
-        'chatPresetsForEditContext',
+        'chatPresetsForCodeAtCursor',
         []
       )
       const presets = filter_presets_with_affixes(all_presets)
@@ -174,7 +177,7 @@ export function code_completion_in_chat_command(
     async () => {
       const config = vscode.workspace.getConfiguration('codeWebChat')
       const all_presets = config.get<ConfigPresetFormat[]>(
-        'chatPresetsForEditContext',
+        'chatPresetsForCodeAtCursor',
         []
       )
       const presets = filter_presets_with_affixes(all_presets)

packages/vscode/src/services/websocket-manager.ts

@@ -258,15 +258,15 @@ export class WebSocketManager {
 
   // TODO: This needs attention - should be renamed to "initialize-chat" and handle only one at a time.
   public async initialize_chats(
-    chats: Array<{ text: string; preset_name: string }>
+    chats: Array<{ text: string; preset_name: string }>,
+    presets_config_key: string
   ): Promise<void> {
     if (!this.has_connected_browsers) {
       throw new Error('Does not have connected browsers.')
     }
 
     const config = vscode.workspace.getConfiguration('codeWebChat')
-    const web_chat_presets =
-      config.get<any[]>('chatPresetsForEditContext') ?? []
+    const web_chat_presets = config.get<any[]>(presets_config_key) ?? []
 
     for (const chat of chats) {
       const preset = web_chat_presets.find((p) => p.name == chat.preset_name)

packages/vscode/src/utils/apply-preset-affixes.ts

@@ -1,14 +1,17 @@
 import { ConfigPresetFormat } from '@/view/backend/helpers/preset-format-converters'
 import * as vscode from 'vscode'
 
-export function get_presets_by_names(preset_names: string[]): Array<{
+export function get_presets_by_names(
+  preset_names: string[],
+  presets_config_key: string
+): Array<{
   name: string
   prompt_prefix?: string
   prompt_suffix?: string
 }> {
   const config = vscode.workspace.getConfiguration('codeWebChat')
   const all_presets = config.get<ConfigPresetFormat[]>(
-    'chatPresetsForEditContext',
+    presets_config_key,
     []
   )
 
@@ -23,9 +26,10 @@ export function get_presets_by_names(preset_names: string[]): Array<{
 
 export function apply_preset_affixes_to_instruction(
   instruction: string,
-  preset_name: string
+  preset_name: string,
+  presets_config_key: string
 ): string {
-  const presets = get_presets_by_names([preset_name])
+  const presets = get_presets_by_names([preset_name], presets_config_key)
   if (presets.length > 0) {
     const preset = presets[0]
     let result = instruction

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

@@ -25,7 +25,8 @@ export const handle_copy_prompt = async (
   if (preset_name !== undefined) {
     final_instruction = apply_preset_affixes_to_instruction(
       instruction_to_copy,
-      preset_name
+      preset_name,
+      provider.get_presets_config_key()
     )
   }