Implement reasoning effort selection and clearable sampling parameters in the preset form via a new VS Code QuickPick handler and UI updates

Author: robertpiosik

apps/editor/src/views/panel/backend/message-handlers/handle-pick-reasoning-effort.ts

@@ -0,0 +1,61 @@
+import * as vscode from 'vscode'
+import { PanelProvider } from '@/views/panel/backend/panel-provider'
+import { PickReasoningEffortMessage } from '@/views/panel/types/messages'
+
+export const handle_pick_reasoning_effort = async (
+  panel_provider: PanelProvider,
+  message: PickReasoningEffortMessage
+): Promise<void> => {
+  const items: (vscode.QuickPickItem & { effort?: string })[] = [
+    { label: 'Unset', effort: undefined },
+    ...message.supported_efforts.map((effort) => ({
+      label: effort.charAt(0).toUpperCase() + effort.slice(1),
+      effort
+    }))
+  ]
+
+  const quick_pick = vscode.window.createQuickPick()
+  quick_pick.items = items
+  quick_pick.title = 'Reasoning Efforts'
+  quick_pick.placeholder = 'Choose a reasoning effort'
+
+  if (message.current_effort) {
+    const active_item = items.find((i) => i.effort === message.current_effort)
+    if (active_item) quick_pick.activeItems = [active_item]
+  } else {
+    quick_pick.activeItems = [items[0]]
+  }
+
+  quick_pick.buttons = [
+    {
+      iconPath: new vscode.ThemeIcon('close'),
+      tooltip: 'Close'
+    }
+  ]
+
+  quick_pick.onDidTriggerButton((button) => {
+    if (button.tooltip == 'Close') {
+      quick_pick.hide()
+    }
+  })
+
+  return new Promise<void>((resolve) => {
+    quick_pick.onDidAccept(() => {
+      const selected = quick_pick.selectedItems[0] as any
+      if (selected) {
+        panel_provider.send_message({
+          command: 'NEWLY_PICKED_REASONING_EFFORT',
+          effort: selected.effort
+        })
+      }
+      quick_pick.hide()
+    })
+
+    quick_pick.onDidHide(() => {
+      quick_pick.dispose()
+      resolve()
+    })
+
+    quick_pick.show()
+  })
+}

apps/editor/src/views/panel/backend/message-handlers/index.ts

@@ -20,6 +20,7 @@ export * from './handle-show-prompt-template-quick-pick'
 export * from './handle-update-preset'
 export * from './handle-pick-chatbot'
 export * from './handle-pick-model'
+export * from './handle-pick-reasoning-effort'
 export * from './handle-save-mode'
 export * from './handle-get-mode'
 export * from './handle-edit-context'

apps/editor/src/views/panel/backend/panel-provider.ts

@@ -58,6 +58,7 @@ import {
   handle_toggle_pinned_api_tool_configuration,
   handle_pick_model,
   handle_pick_chatbot,
+  handle_pick_reasoning_effort,
   handle_focus_on_file_in_preview,
   handle_go_to_file,
   handle_show_diff,
@@ -873,6 +874,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
             await handle_pick_model(this, message)
           } else if (message.command == 'PICK_CHATBOT') {
             await handle_pick_chatbot(this, message)
+          } else if (message.command == 'PICK_REASONING_EFFORT') {
+            await handle_pick_reasoning_effort(this, message)
           } else if (message.command == 'UPDATE_LAST_USED_PRESET') {
             update_last_used_preset_or_group({
               panel_provider: this,

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -535,6 +535,13 @@ export const Panel = () => {
                 pick_chatbot={(chatbot_id) => {
                   post_message(vscode, { command: 'PICK_CHATBOT', chatbot_id })
                 }}
+                pick_reasoning_effort={(supported_efforts, current_effort) => {
+                  post_message(vscode, {
+                    command: 'PICK_REASONING_EFFORT',
+                    supported_efforts,
+                    current_effort
+                  })
+                }}
                 on_at_sign_in_affix={() => {}}
               />
             </UiPage>

apps/editor/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.module.scss

@@ -11,3 +11,18 @@
   align-items: flex-start;
   gap: 6px;
 }
+
+.clear {
+  color: var(--vscode-textLink-foreground);
+  white-space: nowrap;
+  font-size: 12px;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  &:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+}

apps/editor/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.tsx

@@ -8,7 +8,6 @@ import { Field as UiField } from '@ui/components/editor/panel/Field'
 import { Slider as UiSlider } from '@ui/components/editor/panel/Slider'
 import { Input as UiInput } from '@ui/components/editor/common/Input'
 import { Textarea as UiTextarea } from '@ui/components/editor/common/Textarea'
-import { Dropdown as UiDropdown } from '@ui/components/editor/common/Dropdown'
 import { BackendMessage } from '@/views/panel/types/messages'
 import { PresetOption as UiPresetOption } from '@ui/components/editor/panel/PresetOption'
 import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
@@ -19,6 +18,10 @@ type Props = {
   on_update: (updated_preset: Preset) => void
   pick_model: (chatbot_name: string, current_model_id?: string) => void
   pick_chatbot: (chatbot_id?: keyof typeof CHATBOTS) => void
+  pick_reasoning_effort: (
+    supported_efforts: string[],
+    current_effort?: string
+  ) => void
   on_at_sign_in_affix: () => void
 }
 
@@ -58,9 +61,11 @@ export const EditPresetForm: React.FC<Props> = (props) => {
     'prompt_prefix' | 'prompt_suffix' | null
   >(null)
   const [is_prompt_template_collapsed, set_is_prompt_template_collapsed] =
-    useState(true)
+    useState(!(props.preset.prompt_prefix || props.preset.prompt_suffix))
   const [is_sampling_collapsed, set_is_sampling_collapsed] = useState(true)
-  const [is_options_collapsed, set_is_options_collapsed] = useState(true)
+  const [is_options_collapsed, set_is_options_collapsed] = useState(
+    !props.preset.options?.length
+  )
 
   const chatbot_config = chatbot ? CHATBOTS[chatbot] : undefined
   const models = useMemo(() => chatbot_config?.models || {}, [chatbot_config])
@@ -183,6 +188,8 @@ export const EditPresetForm: React.FC<Props> = (props) => {
         set_model(message.model_id)
       } else if (message.command == 'NEWLY_PICKED_CHATBOT') {
         handle_chatbot_change(message.chatbot_id as keyof typeof CHATBOTS)
+      } else if (message.command == 'NEWLY_PICKED_REASONING_EFFORT') {
+        set_reasoning_effort(message.effort)
       }
     }
     window.addEventListener('message', handle_message)
@@ -200,30 +207,21 @@ export const EditPresetForm: React.FC<Props> = (props) => {
     }
   }
 
-  const reasoning_effort_options = useMemo(() => {
-    const supported_efforts =
+  const supported_reasoning_efforts = useMemo(() => {
+    return (
       chatbot_config?.supported_reasoning_efforts ||
-      model_info?.supported_reasoning_efforts
-
-    if (supported_efforts) {
-      return [
-        { value: '—', label: '—' },
-        ...supported_efforts.map((effort: string) => {
-          const capitalized = effort.charAt(0).toUpperCase() + effort.slice(1)
-          return { value: effort, label: capitalized }
-        })
-      ]
-    }
-    return [{ value: '—', label: '—' }]
+      model_info?.supported_reasoning_efforts ||
+      []
+    )
   }, [chatbot_config, model_info])
 
   useEffect(() => {
     if (
       reasoning_effort &&
-      !reasoning_effort_options.find((o) => o.value === reasoning_effort)
+      !supported_reasoning_efforts.includes(reasoning_effort)
     )
       set_reasoning_effort(undefined)
-  }, [reasoning_effort, reasoning_effort_options])
+  }, [reasoning_effort, supported_reasoning_efforts])
 
   return (
     <UiScrollable>
@@ -347,40 +345,55 @@ export const EditPresetForm: React.FC<Props> = (props) => {
                 chatbot == 'OpenRouter' ? ' Requires a reasoning model.' : ''
               }`}
             >
-              <UiDropdown
-                options={reasoning_effort_options}
-                value={reasoning_effort || '—'}
-                onChange={(value) => {
-                  set_reasoning_effort(value == '—' ? undefined : value)
+              <button
+                className={dropdown_styles.button}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  props.pick_reasoning_effort(
+                    supported_reasoning_efforts,
+                    reasoning_effort
+                  )
                 }}
-              />
+              >
+                <span>
+                  {reasoning_effort
+                    ? reasoning_effort.charAt(0).toUpperCase() +
+                      reasoning_effort.slice(1)
+                    : '—'}
+                </span>
+                <span
+                  className={cn(
+                    'codicon codicon-chevron-down',
+                    dropdown_styles.chevron
+                  )}
+                />
+              </button>
             </UiField>
           )}
 
-          {supports_thinking_budget &&
-            !supports_reasoning_effort && ( // Additional check for AI Studio
-              <UiField
-                label="Thinking Budget"
-                html_for="thinking-budget"
-                info="Search for allowed min-max values."
-              >
-                <UiInput
-                  id="thinking-budget"
-                  type="text"
-                  value={String(thinking_budget ?? '')}
-                  on_change={(value) => {
-                    const num = parseInt(value, 10)
-                    set_thinking_budget(isNaN(num) ? undefined : num)
-                  }}
-                  placeholder="e.g. 8000"
-                  on_key_down={(e) =>
-                    !/[0-9]/.test(e.key) &&
-                    e.key != 'Backspace' &&
-                    e.preventDefault()
-                  }
-                />
-              </UiField>
-            )}
+          {supports_thinking_budget && !supports_reasoning_effort && (
+            <UiField
+              label="Thinking Budget"
+              html_for="thinking-budget"
+              info="Search for allowed min-max values."
+            >
+              <UiInput
+                id="thinking-budget"
+                type="text"
+                value={String(thinking_budget ?? '')}
+                on_change={(value) => {
+                  const num = parseInt(value, 10)
+                  set_thinking_budget(isNaN(num) ? undefined : num)
+                }}
+                placeholder="e.g. 8000"
+                on_key_down={(e) =>
+                  !/[0-9]/.test(e.key) &&
+                  e.key != 'Backspace' &&
+                  e.preventDefault()
+                }
+              />
+            </UiField>
+          )}
 
           {supports_system_instructions && (
             <UiField
@@ -455,9 +468,19 @@ export const EditPresetForm: React.FC<Props> = (props) => {
               <UiField
                 label="Temperature"
                 info="Influences response variety. Lower values are more predictable; higher values are more diverse."
+                action={
+                  temperature !== undefined && (
+                    <button
+                      className={styles.clear}
+                      onClick={() => set_temperature(undefined)}
+                    >
+                      Clear
+                    </button>
+                  )
+                }
               >
                 <UiSlider
-                  value={temperature ?? 1}
+                  value={temperature}
                   onChange={set_temperature}
                   min={0}
                   max={2}
@@ -469,13 +492,18 @@ export const EditPresetForm: React.FC<Props> = (props) => {
               <UiField
                 label="Top P"
                 info="Limits token choices to cumulative probability P. Lower values make responses more predictable."
+                action={
+                  top_p !== undefined && (
+                    <button
+                      className={styles.clear}
+                      onClick={() => set_top_p(undefined)}
+                    >
+                      Clear
+                    </button>
+                  )
+                }
               >
-                <UiSlider
-                  value={top_p ?? 0.95}
-                  onChange={set_top_p}
-                  min={0}
-                  max={1}
-                />
+                <UiSlider value={top_p} onChange={set_top_p} min={0} max={1} />
               </UiField>
             )}
           </UiFieldset>

apps/editor/src/views/panel/types/messages.ts

@@ -206,6 +206,12 @@ export interface PickChatbotMessage extends BaseMessage {
   chatbot_id?: string
 }
 
+export interface PickReasoningEffortMessage extends BaseMessage {
+  command: 'PICK_REASONING_EFFORT'
+  supported_efforts: string[]
+  current_effort?: string
+}
+
 export interface SaveModeMessage extends BaseMessage {
   command: 'SAVE_MODE'
   mode: Mode
@@ -570,6 +576,7 @@ export type FrontendMessage =
   | CaretPositionChangedWebviewMessage
   | PickModelMessage
   | PickChatbotMessage
+  | PickReasoningEffortMessage
   | SaveModeMessage
   | GetModeMessage
   | EditContextMessage
@@ -727,6 +734,11 @@ export interface NewlyPickedChatbotMessage extends BaseMessage {
   chatbot_id: string
 }
 
+export interface NewlyPickedReasoningEffortMessage extends BaseMessage {
+  command: 'NEWLY_PICKED_REASONING_EFFORT'
+  effort?: string
+}
+
 export interface ModeMessage extends BaseMessage {
   command: 'MODE'
   mode: Mode
@@ -903,6 +915,7 @@ export type BackendMessage =
   | PresetUpdatedMessage
   | NewlyPickedModelMessage
   | NewlyPickedChatbotMessage
+  | NewlyPickedReasoningEffortMessage
   | ModeMessage
   | WebPromptTypeMessage
   | ApiPromptTypeMessage

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

@@ -3,11 +3,17 @@
   flex-direction: column;
   gap: 4px;
 
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
   &__label {
     font-size: 12px;
     font-weight: 600;
     color: var(--vscode-foreground);
-    align-self: flex-start;
   }
 
   &__info {