Add functionality to trigger preset selection on submit with control key

Author: robertpiosik

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

@@ -9,6 +9,7 @@ type Props = {
   chat_history_fim_mode: string[]
   on_change: (value: string) => void
   on_submit: () => void
+  on_submit_with_control: () => void
   on_copy: () => void
   token_count?: number
   is_connected: boolean
@@ -87,14 +88,22 @@ export const ChatInput: React.FC<Props> = (props) => {
     }
   }
 
-  const handle_submit = (e?: React.MouseEvent<HTMLButtonElement>) => {
-    e?.stopPropagation()
+  const handle_submit = (
+    e:
+      | React.KeyboardEvent<HTMLTextAreaElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => {
+    e.stopPropagation()
     if (
       !props.is_connected ||
       (!props.is_in_code_completions_mode && !props.value)
     )
       return
-    props.on_submit()
+    if (e.ctrlKey || e.metaKey) {
+      props.on_submit_with_control()
+    } else {
+      props.on_submit()
+    }
     set_history_index(-1) // Reset history index after submitting
   }
 
@@ -126,7 +135,7 @@ export const ChatInput: React.FC<Props> = (props) => {
       }, 0)
     } else if (e.key == 'Enter' && !e.shiftKey) {
       e.preventDefault()
-      handle_submit()
+      handle_submit(e)
     } else if (
       (e.key == 'ArrowUp' || e.key == 'ArrowDown') &&
       is_history_enabled
@@ -301,7 +310,12 @@ export const ChatInput: React.FC<Props> = (props) => {
               !props.is_connected ||
               (!props.is_in_code_completions_mode && !props.value)
             }
-            title={props.submit_disabled_title || 'Send'}
+            title={
+              !props.is_connected ||
+              (!props.is_in_code_completions_mode && !props.value)
+                ? props.submit_disabled_title
+                : 'Send'
+            }
           >
             <div className={cn('codicon', 'codicon-send')} />
           </button>

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

@@ -6,8 +6,7 @@ import { apply_preset_affixes_to_instruction } from '@/helpers/apply-preset-affi
 
 async function validate_presets(
   preset_names: string[],
-  is_code_completions_mode: boolean,
-  context: vscode.ExtensionContext
+  is_code_completions_mode: boolean
 ): Promise<string[]> {
   const config = vscode.workspace.getConfiguration('codeWebChat')
   const presets = config.get<any[]>('presets', [])
@@ -28,31 +27,21 @@ async function validate_presets(
     const preset_quick_pick_items = available_presets.map((preset) => ({
       label: preset.name,
       description: `${preset.chatbot}${
-        preset.model ? ` - ${preset.model}` : ''
+        preset.model ? ` • ${preset.model}` : ''
       }`,
       picked: false
     }))
 
-    const placeholder = !is_code_completions_mode
-      ? 'Select one or more presets'
-      : 'Select one or more presets to use when asking for code completions'
-
-    const selected_presets = await vscode.window.showQuickPick(
+    const selected_preset = await vscode.window.showQuickPick(
       preset_quick_pick_items,
       {
-        placeHolder: placeholder,
-        canPickMany: true
+        placeHolder: 'Select preset'
       }
     )
 
-    if (selected_presets) {
-      const selected_names = selected_presets.map((preset) => preset.label)
-      const selected_names_key = is_code_completions_mode
-        ? 'selectedCodeCompletionPresets'
-        : 'selectedPresets'
-      await context.globalState.update(selected_names_key, selected_names)
-
-      return selected_names
+    if (selected_preset) {
+      const selected_name = selected_preset.label
+      return [selected_name]
     }
     return []
   }
@@ -64,20 +53,12 @@ export const handle_send_prompt = async (
   provider: ViewProvider,
   preset_names: string[]
 ): Promise<void> => {
-  // Validate presets first
   const valid_preset_names = await validate_presets(
     preset_names,
-    provider.is_code_completions_mode,
-    provider.context
+    provider.is_code_completions_mode
   )
 
-  // If no presets were selected in the picker
-  if (valid_preset_names.length == 0) {
-    vscode.window.showInformationMessage(
-      'Please select at least one preset to continue.'
-    )
-    return
-  }
+  if (valid_preset_names.length == 0) return
 
   await vscode.workspace.saveAll()
 
@@ -126,12 +107,7 @@ export const handle_send_prompt = async (
       valid_preset_names
     )
   } else if (!provider.is_code_completions_mode) {
-    if (!provider.instructions) {
-      vscode.window.showInformationMessage(
-        'Please enter instructions.'
-      )
-      return
-    }
+    if (!provider.instructions) return
 
     const context_text = await files_collector.collect_files({
       active_path
@@ -144,7 +120,6 @@ export const handle_send_prompt = async (
       valid_preset_names
     )
 
-    // Use the stored edit_format property
     const config = vscode.workspace.getConfiguration('codeWebChat')
     const edit_format_instructions = config.get<string>(
       `editFormatInstructions${

packages/vscode/src/view/frontend/tabs/chat/Main/Main.tsx

@@ -48,28 +48,21 @@ export const Main: React.FC<Props> = (props) => {
     ? props.code_completion_suggestions
     : props.normal_instructions
 
-  // Calculate input token estimation
   useEffect(() => {
     let estimated_tokens = 0
-    // Basic estimation for instruction
     let text = current_prompt
 
-    // If there's @selection in the instruction and we have an active selection
     if (
       text.includes('@selection') &&
       props.has_active_selection &&
       props.selection_text
     ) {
-      // Approximate replacement
       text = text.replace(/@selection/g, props.selection_text)
     }
 
-    // Rough estimation of tokens (chars/4) for the instruction
     estimated_tokens = Math.ceil(text.length / 4)
 
-    // Add active file length tokens when in FIM mode
     if (props.is_in_code_completions_mode && props.active_file_length) {
-      // Estimate tokens for the file content
       const file_tokens = Math.ceil(props.active_file_length / 4)
       estimated_tokens += file_tokens
     }
@@ -86,9 +79,9 @@ export const Main: React.FC<Props> = (props) => {
   const handle_input_change = (value: string) => {
     // Update the appropriate instruction based on current mode
     if (props.is_in_code_completions_mode) {
-      props.set_code_completion_suggestions(value) // Use prop setter
+      props.set_code_completion_suggestions(value)
     } else {
-      props.set_normal_instructions(value) // Use prop setter
+      props.set_normal_instructions(value)
     }
   }
 
@@ -101,16 +94,22 @@ export const Main: React.FC<Props> = (props) => {
     })
   }
 
+  // Let user select a preset
+  const handle_submit_with_control = async () => {
+    props.initialize_chats({
+      prompt: current_prompt,
+      preset_names: []
+    })
+  }
+
   const handle_copy = () => {
     props.copy_to_clipboard(current_prompt)
   }
 
   const handle_preset_copy = (preset_name: string) => {
-    // Get the preset by name
     const preset = props.presets.find((p) => p.name == preset_name)
 
     if (preset) {
-      // Apply prefix and suffix if they exist
       let modified_instruction = current_prompt
       if (preset.prompt_prefix) {
         modified_instruction = `${preset.prompt_prefix} ${modified_instruction}`
@@ -149,13 +148,14 @@ export const Main: React.FC<Props> = (props) => {
           chat_history_fim_mode={props.chat_history_fim_mode}
           on_change={handle_input_change}
           on_submit={handle_submit}
+          on_submit_with_control={handle_submit_with_control}
           on_copy={handle_copy}
           is_connected={props.is_connected}
           token_count={total_token_count}
           submit_disabled_title={
             !props.is_connected
               ? 'WebSocket connection not established. Please install the browser extension.'
-              : 'Initialize chats'
+              : 'Enter instructions'
           }
           is_in_code_completions_mode={props.is_in_code_completions_mode}
           has_active_selection={props.has_active_selection}