Consolidate web configuration editing into a shared component and enable configuration updates within the settings view

- inline 'edit web configuration form footer' within Panel
- move 'edit web configuration form' to `apps/editor/src/views/shared/components`
- create actions (`apps/editor/src/views/actions`) for handlers: 'pick model', 'pick chatbot' and 'pick reasoning effort'.
- use `apps/editor/src/views/shared/components/EditWebConfigurationForm/EditWebConfigurationForm.tsx` in `apps/editor/src/views/settings/frontend/Settings.tsx`, create settings-specific handlers that use the shared actions: pick chatbot, pick model, pick reasoning effort.
- `apps/editor/src/views/panel/backend/message-handlers/handle-update-web-configuration.ts` should use `apps/editor/src/views/utils/generate-unique-name.ts`
- move 'are web configurations equal' to shared utils
- handle updating web configuration in settings

Author: robertpiosik

apps/editor/src/views/actions/duplicate-web-configuration.ts

@@ -14,7 +14,7 @@ export const duplicate_web_configuration = async (params: {
 
   const original_index = current_web_configurations.findIndex((c, i) => (c.name ?? `unnamed-${i}`) === original_name)
 
-  if (original_index === -1) {
+  if (original_index == -1) {
     vscode.window.showErrorMessage(
       dictionary.error_message.PRESET_NOT_FOUND(`with name ${original_name}`)
     )

apps/editor/src/views/actions/pick-chatbot.ts

@@ -0,0 +1,57 @@
+import * as vscode from 'vscode'
+import { CHATBOTS } from '@shared/constants/chatbots'
+
+export const pick_chatbot = async (params: {
+  current_chatbot_id?: string
+}): Promise<keyof typeof CHATBOTS | undefined> => {
+  const chatbots = Object.entries(CHATBOTS)
+
+  const items: vscode.QuickPickItem[] = chatbots.map(([chatbot, { url }]) => ({
+    label: chatbot,
+    description:
+      chatbot == 'Open WebUI'
+        ? 'localhost'
+        : url.replace(/^https?:\/\//, '').split('/')[0]
+  }))
+
+  const quick_pick = vscode.window.createQuickPick()
+  quick_pick.items = items
+  quick_pick.title = 'Chatbots'
+  quick_pick.placeholder = 'Choose a chatbot'
+  quick_pick.buttons = [
+    {
+      iconPath: new vscode.ThemeIcon('close'),
+      tooltip: 'Close'
+    }
+  ]
+
+  if (params.current_chatbot_id) {
+    const active_item = items.find((item) => item.label == params.current_chatbot_id)
+    if (active_item) {
+      quick_pick.activeItems = [active_item]
+    }
+  }
+
+  quick_pick.onDidTriggerButton((button) => {
+    if (button.tooltip === 'Close') {
+      quick_pick.hide()
+    }
+  })
+
+  return new Promise<keyof typeof CHATBOTS | undefined>((resolve) => {
+    let accepted = false
+    quick_pick.onDidAccept(() => {
+      accepted = true
+      const selected = quick_pick.selectedItems[0]?.label as keyof typeof CHATBOTS | undefined
+      quick_pick.hide()
+      resolve(selected)
+    })
+
+    quick_pick.onDidHide(() => {
+      if (!accepted) resolve(undefined)
+      quick_pick.dispose()
+    })
+
+    quick_pick.show()
+  })
+}

apps/editor/src/views/actions/pick-model.ts

@@ -0,0 +1,84 @@
+import * as vscode from 'vscode'
+import axios from 'axios'
+import { CHATBOTS } from '@shared/constants/chatbots'
+import { dictionary } from '@shared/constants/dictionary'
+import { Logger } from '@shared/utils/logger'
+
+export const pick_model = async (params: {
+  chatbot_name: string
+  current_model_id?: string
+}): Promise<string | undefined> => {
+  try {
+    let items: (vscode.QuickPickItem & { model_id: string })[] = []
+
+    if (params.chatbot_name == 'OpenRouter') {
+      const response = await axios.get('https://openrouter.ai/api/v1/models')
+      const models = response.data.data
+
+      items = models.map((model: any) => ({
+        label: model.name,
+        model_id: model.id
+      }))
+    } else {
+      const chatbot_config = CHATBOTS[params.chatbot_name as keyof typeof CHATBOTS]
+      if (chatbot_config && chatbot_config.models) {
+        items = Object.entries(chatbot_config.models).map(([id, data]) => ({
+          label: (data as any).label || id,
+          model_id: id
+        }))
+      }
+    }
+
+    const quick_pick = vscode.window.createQuickPick()
+    quick_pick.items = items
+    quick_pick.title = 'Models'
+    quick_pick.placeholder = 'Choose a model'
+
+    if (params.current_model_id) {
+      const active_item = items.find((i) => i.model_id === params.current_model_id)
+      if (active_item) quick_pick.activeItems = [active_item]
+    }
+
+    quick_pick.buttons = [
+      {
+        iconPath: new vscode.ThemeIcon('close'),
+        tooltip: 'Close'
+      }
+    ]
+
+    quick_pick.onDidTriggerButton((button) => {
+      if (button.tooltip == 'Close') {
+        quick_pick.hide()
+      }
+    })
+
+    return new Promise<string | undefined>((resolve) => {
+      let accepted = false
+      quick_pick.onDidAccept(() => {
+        accepted = true
+        const selected = quick_pick.selectedItems[0] as any
+        quick_pick.hide()
+        resolve(selected?.model_id)
+      })
+
+      quick_pick.onDidHide(() => {
+        if (!accepted) resolve(undefined)
+        quick_pick.dispose()
+      })
+
+      quick_pick.show()
+    })
+  } catch (error) {
+    Logger.error({
+      function_name: 'pick_model',
+      message: 'Error picking model',
+      data: error
+    })
+    vscode.window.showErrorMessage(
+      params.chatbot_name == 'OpenRouter'
+        ? dictionary.error_message.FAILED_TO_FETCH_OPEN_ROUTER_MODELS
+        : 'Failed to pick model'
+    )
+    return undefined
+  }
+}

apps/editor/src/views/actions/pick-reasoning-effort.ts

@@ -0,0 +1,56 @@
+import * as vscode from 'vscode'
+
+export const pick_reasoning_effort = async (params: {
+  supported_efforts: string[]
+  current_effort?: string
+}): Promise<{ effort?: string } | undefined> => {
+  const items: (vscode.QuickPickItem & { effort?: string })[] = [
+    { label: 'Unset', effort: undefined },
+    ...params.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 (params.current_effort) {
+    const active_item = items.find((i) => i.effort === params.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<{ effort?: string } | undefined>((resolve) => {
+    let accepted = false
+    quick_pick.onDidAccept(() => {
+      accepted = true
+      const selected = quick_pick.selectedItems[0] as any
+      quick_pick.hide()
+      resolve(selected ? { effort: selected.effort } : undefined)
+    })
+
+    quick_pick.onDidHide(() => {
+      if (!accepted) resolve(undefined)
+      quick_pick.dispose()
+    })
+
+    quick_pick.show()
+  })
+}

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

@@ -1,63 +1,16 @@
-import * as vscode from 'vscode'
 import { PanelProvider } from '@/views/panel/backend/panel-provider'
-import { CHATBOTS } from '@shared/constants/chatbots'
 import { PickChatbotMessage } from '@/views/panel/types/messages'
+import { pick_chatbot } from '@/views/actions/pick-chatbot'
 
 export const handle_pick_chatbot = async (
   panel_provider: PanelProvider,
   message: PickChatbotMessage
 ): Promise<void> => {
-  const chatbots = Object.entries(CHATBOTS)
-
-  const items: vscode.QuickPickItem[] = chatbots.map(([chatbot, { url }]) => ({
-    label: chatbot,
-    description:
-      chatbot == 'Open WebUI'
-        ? 'localhost'
-        : url.replace(/^https?:\/\//, '').split('/')[0]
-  }))
-
-  const quick_pick = vscode.window.createQuickPick()
-  quick_pick.items = items
-  quick_pick.title = 'Chatbots'
-  quick_pick.placeholder = 'Choose a chatbot'
-  quick_pick.buttons = [
-    {
-      iconPath: new vscode.ThemeIcon('close'),
-      tooltip: 'Close'
-    }
-  ]
-
-  if (message.chatbot_id) {
-    const active_item = items.find((item) => item.label == message.chatbot_id)
-    if (active_item) {
-      quick_pick.activeItems = [active_item]
-    }
-  }
-
-  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]
-      if (selected) {
-        panel_provider.send_message({
-          command: 'NEWLY_PICKED_CHATBOT',
-          chatbot_id: selected.label
-        })
-      }
-      quick_pick.hide()
-    })
-
-    quick_pick.onDidHide(() => {
-      quick_pick.dispose()
-      resolve()
+  const selected = await pick_chatbot({ current_chatbot_id: message.chatbot_id })
+  if (selected) {
+    panel_provider.send_message({
+      command: 'NEWLY_PICKED_CHATBOT',
+      chatbot_id: selected
     })
-
-    quick_pick.show()
-  })
+  }
 }

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

@@ -1,91 +1,19 @@
-import * as vscode from 'vscode'
 import { PanelProvider } from '@/views/panel/backend/panel-provider'
-import { dictionary } from '@shared/constants/dictionary'
-import { Logger } from '@shared/utils/logger'
-import axios from 'axios'
-import { CHATBOTS } from '@shared/constants/chatbots'
 import { PickModelMessage } from '@/views/panel/types/messages'
+import { pick_model } from '@/views/actions/pick-model'
 
 export const handle_pick_model = async (
   panel_provider: PanelProvider,
   message: PickModelMessage
 ): Promise<void> => {
-  try {
-    let items: (vscode.QuickPickItem & { model_id: string })[] = []
-
-    if (message.chatbot_name == 'OpenRouter') {
-      const response = await axios.get('https://openrouter.ai/api/v1/models')
-      const models = response.data.data
-
-      items = models.map((model: any) => ({
-        label: model.name,
-        model_id: model.id
-      }))
-    } else {
-      const chatbot_config =
-        CHATBOTS[message.chatbot_name as keyof typeof CHATBOTS]
-      if (chatbot_config && chatbot_config.models) {
-        items = Object.entries(chatbot_config.models).map(([id, data]) => ({
-          label: (data as any).label || id,
-          model_id: id
-        }))
-      }
-    }
-
-    const quick_pick = vscode.window.createQuickPick()
-    quick_pick.items = items
-    quick_pick.title = 'Models'
-    quick_pick.placeholder = 'Choose a model'
-
-    if (message.current_model_id) {
-      const active_item = items.find(
-        (i) => i.model_id === message.current_model_id
-      )
-      if (active_item) quick_pick.activeItems = [active_item]
-    }
-
-    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_MODEL',
-            model_id: selected.model_id
-          })
-        }
-        quick_pick.hide()
-      })
-
-      quick_pick.onDidHide(() => {
-        quick_pick.dispose()
-        resolve()
-      })
-
-      quick_pick.show()
-    })
-  } catch (error) {
-    Logger.error({
-      function_name: 'handle_pick_model',
-      message: 'Error picking model',
-      data: error
+  const selected = await pick_model({
+    chatbot_name: message.chatbot_name,
+    current_model_id: message.current_model_id
+  })
+  if (selected) {
+    panel_provider.send_message({
+      command: 'NEWLY_PICKED_MODEL',
+      model_id: selected
     })
-    vscode.window.showErrorMessage(
-      message.chatbot_name == 'OpenRouter'
-        ? dictionary.error_message.FAILED_TO_FETCH_OPEN_ROUTER_MODELS
-        : 'Failed to pick model'
-    )
   }
 }