Implement a Quick Pick UI for selecting chatbots within the preset editor

Author: robertpiosik

packages/vscode/src/view/backend/message-handlers/handle-pick-chatbot.ts

@@ -0,0 +1,66 @@
+import * as vscode from 'vscode'
+import { ViewProvider } from '@/view/backend/view-provider'
+import { CHATBOTS } from '@shared/constants/chatbots'
+import { PickChatbotMessage } from '@/view/types/messages'
+
+export const handle_pick_chatbot = async (
+  provider: ViewProvider,
+  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,
+    buttons: [
+      ...(chatbot != 'Open WebUI'
+        ? [
+            {
+              iconPath: new vscode.ThemeIcon('link-external'),
+              tooltip: 'Open in Browser'
+            }
+          ]
+        : [])
+    ]
+  }))
+
+  const quick_pick = vscode.window.createQuickPick()
+  quick_pick.items = items
+  quick_pick.title = 'Select a Chatbot'
+  quick_pick.placeholder = 'Choose a chatbot from the list'
+
+  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.onDidTriggerItemButton((e) => {
+    const chatbot_name = e.item.label
+    const chatbot_details = CHATBOTS[chatbot_name as keyof typeof CHATBOTS]
+    if (chatbot_details) {
+      vscode.env.openExternal(vscode.Uri.parse(chatbot_details.url))
+    }
+  })
+
+  return new Promise<void>((resolve) => {
+    quick_pick.onDidAccept(() => {
+      const selected = quick_pick.selectedItems[0]
+      if (selected) {
+        provider.send_message({
+          command: 'NEWLY_PICKED_CHATBOT',
+          chatbot_id: selected.label
+        })
+      }
+      quick_pick.hide()
+    })
+
+    quick_pick.onDidHide(() => {
+      quick_pick.dispose()
+      resolve()
+    })
+
+    quick_pick.show()
+  })
+}

packages/vscode/src/view/backend/message-handlers/index.ts

@@ -16,6 +16,7 @@ export * from './handle-send-prompt'
 export * from './handle-show-history-quick-pick'
 export * from './handle-show-prompt-template-quick-pick'
 export * from './handle-update-preset'
+export * from './handle-pick-chatbot'
 export * from './handle-pick-open-router-model'
 export * from './handle-save-home-view-type'
 export * from './handle-get-home-view-type'

packages/vscode/src/view/backend/view-provider.ts

@@ -40,7 +40,8 @@ import {
   handle_show_prompt_template_quick_pick,
   handle_at_sign_quick_pick_for_preset_affix,
   handle_get_api_tool_configurations,
-  handle_pick_open_router_model
+  handle_pick_open_router_model,
+  handle_pick_chatbot
 } from './message-handlers'
 import {
   config_preset_to_ui_format,
@@ -343,6 +344,8 @@ export class ViewProvider implements vscode.WebviewViewProvider {
             )
           } else if (message.command == 'PICK_OPEN_ROUTER_MODEL') {
             await handle_pick_open_router_model(this)
+          } else if (message.command == 'PICK_CHATBOT') {
+            await handle_pick_chatbot(this, message)
           }
         } catch (error: any) {
           console.error('Error handling message:', message, error)

packages/vscode/src/view/frontend/EditPresetForm/EditPresetForm.tsx

@@ -13,6 +13,7 @@ type Props = {
   on_update: (updated_preset: Preset) => void
   on_save: () => void
   pick_open_router_model: () => void
+  pick_chatbot: (chatbot_id?: keyof typeof CHATBOTS) => void
   on_at_sign_in_affix: () => void
 }
 
@@ -110,8 +111,7 @@ export const EditPresetForm: React.FC<Props> = (props) => {
     options
   ])
 
-  const handle_chatbot_change = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const new_chatbot = e.target.value as keyof typeof CHATBOTS
+  const handle_chatbot_change = (new_chatbot: keyof typeof CHATBOTS) => {
     set_chatbot(new_chatbot)
     set_model(Object.keys(CHATBOTS[new_chatbot].models)[0] || undefined)
     set_port(undefined)
@@ -141,6 +141,8 @@ export const EditPresetForm: React.FC<Props> = (props) => {
       const message = event.data as BackendMessage
       if (message.command == 'NEWLY_PICKED_OPEN_ROUTER_MODEL') {
         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 == 'AT_SIGN_QUICK_PICK_FOR_PRESET_AFFIX_RESULT'
       ) {
@@ -199,13 +201,20 @@ export const EditPresetForm: React.FC<Props> = (props) => {
     <div className={styles.form}>
       {chatbot && (
         <Field label="Chatbot" html_for="chatbot">
-          <select id="chatbot" value={chatbot} onChange={handle_chatbot_change}>
-            {Object.keys(CHATBOTS).map((key) => (
-              <option key={key} value={key}>
-                {key}
-              </option>
-            ))}
-          </select>
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+              props.pick_chatbot(chatbot);
+            }}
+          >
+            <div style={{ cursor: 'pointer' }}>
+              <div style={{ pointerEvents: 'none' }}>
+                <select id="chatbot" value={chatbot}>
+                  <option value={chatbot}>{chatbot}</option>
+                </select>
+              </div>
+            </div>
+          </div>
         </Field>
       )}
 

packages/vscode/src/view/frontend/View.tsx

@@ -235,6 +235,9 @@ export const View = () => {
           pick_open_router_model={() => {
             post_message(vscode, { command: 'PICK_OPEN_ROUTER_MODEL' })
           }}
+          pick_chatbot={(chatbot_id) => {
+            post_message(vscode, { command: 'PICK_CHATBOT', chatbot_id })
+          }}
           on_at_sign_in_affix={() => {
             post_message(vscode, {
               command: 'SHOW_AT_SIGN_QUICK_PICK_FOR_PRESET_AFFIX',

packages/vscode/src/view/types/messages.ts

@@ -132,6 +132,11 @@ export interface PickOpenRouterModel extends BaseMessage {
   command: 'PICK_OPEN_ROUTER_MODEL'
 }
 
+export interface PickChatbotMessage extends BaseMessage {
+  command: 'PICK_CHATBOT'
+  chatbot_id?: string
+}
+
 export interface SaveHomeViewTypeMessage extends BaseMessage {
   command: 'SAVE_HOME_VIEW_TYPE'
   view_type: HomeViewType
@@ -213,6 +218,7 @@ export type FrontendMessage =
   | PreviewPresetMessage
   | CaretPositionChangedWebviewMessage
   | PickOpenRouterModel
+  | PickChatbotMessage
   | SaveHomeViewTypeMessage
   | GetHomeViewTypeMessage
   | EditContextMessage
@@ -304,6 +310,11 @@ export interface NewlyPickedOpenRouterModelMessage extends BaseMessage {
   model_id: string
 }
 
+export interface NewlyPickedChatbotMessage extends BaseMessage {
+  command: 'NEWLY_PICKED_CHATBOT'
+  chatbot_id: string
+}
+
 export interface HomeViewTypeMessage extends BaseMessage {
   command: 'HOME_VIEW_TYPE'
   view_type: HomeViewType
@@ -345,6 +356,7 @@ export type BackendMessage =
   | PresetCreatedMessage
   | PresetUpdatedMessage
   | NewlyPickedOpenRouterModelMessage
+  | NewlyPickedChatbotMessage
   | HomeViewTypeMessage
   | WebModeMessage
   | ApiModeMessage