Skip to content

Commit 308937b

Browse files
committed
Refactor model selection to support multiple chatbots and add close button to quick pick dialogs
1 parent 8bba135 commit 308937b

15 files changed

Lines changed: 128 additions & 81 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Code Web Chat is a free and open-source (FOSS), independent AI coding toolkit fo
3131

3232
Pick all the necessary files, including useful examples, for a lean, task-focused context. Such steered model is easy to prompt, for outputs you're looking for. The toolkit is a perfect companion for all kinds of coding tasks; from tedious refactors to complex features.
3333

34-
When pair programming with Code Web Chat you foster codebase understanding and your own coding skills to prompt for the right, easy to review code.
34+
When pair programming with Code Web Chat, you foster codebase understanding and your own coding skills. Prompt for correct, easy to review code.
3535

3636
> “The only way to go fast, is to go well.” ― Robert C. Martin, Clean Architecture
3737

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,14 @@ export const handle_pick_chatbot = async (
2626

2727
const quick_pick = vscode.window.createQuickPick()
2828
quick_pick.items = items
29-
quick_pick.title = 'Select a Chatbot'
30-
quick_pick.placeholder = 'Choose a chatbot from the list'
29+
quick_pick.title = 'Chatbots'
30+
quick_pick.placeholder = 'Choose a chatbot'
31+
quick_pick.buttons = [
32+
{
33+
iconPath: new vscode.ThemeIcon('close'),
34+
tooltip: 'Close'
35+
}
36+
]
3137

3238
if (message.chatbot_id) {
3339
const active_item = items.find((item) => item.label == message.chatbot_id)
@@ -36,6 +42,12 @@ export const handle_pick_chatbot = async (
3642
}
3743
}
3844

45+
quick_pick.onDidTriggerButton((button) => {
46+
if (button.tooltip === 'Close') {
47+
quick_pick.hide()
48+
}
49+
})
50+
3951
quick_pick.onDidTriggerItemButton((e) => {
4052
const chatbot_name = e.item.label
4153
const chatbot_details = CHATBOTS[chatbot_name as keyof typeof CHATBOTS]
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import * as vscode from 'vscode'
2+
import { PanelProvider } from '@/views/panel/backend/panel-provider'
3+
import { dictionary } from '@shared/constants/dictionary'
4+
import { Logger } from '@shared/utils/logger'
5+
import axios from 'axios'
6+
import { CHATBOTS } from '@shared/constants/chatbots'
7+
import { PickModelMessage } from '@/views/panel/types/messages'
8+
9+
export const handle_pick_model = async (
10+
panel_provider: PanelProvider,
11+
message: PickModelMessage
12+
): Promise<void> => {
13+
try {
14+
let items: vscode.QuickPickItem[] = []
15+
16+
if (message.chatbot_name == 'OpenRouter') {
17+
const response = await axios.get('https://openrouter.ai/api/v1/models')
18+
const models = response.data.data
19+
20+
items = models.map((model: any) => ({
21+
label: model.name,
22+
description: model.id,
23+
detail: model.description
24+
}))
25+
} else {
26+
const chatbot_config =
27+
CHATBOTS[message.chatbot_name as keyof typeof CHATBOTS]
28+
if (chatbot_config && chatbot_config.models) {
29+
items = Object.entries(chatbot_config.models).map(([id, data]) => ({
30+
label: (data as any).label || id
31+
}))
32+
}
33+
}
34+
35+
const quick_pick = vscode.window.createQuickPick()
36+
quick_pick.items = items
37+
quick_pick.title = 'Models'
38+
quick_pick.placeholder = 'Choose a model'
39+
quick_pick.buttons = [
40+
{
41+
iconPath: new vscode.ThemeIcon('close'),
42+
tooltip: 'Close'
43+
}
44+
]
45+
46+
quick_pick.onDidTriggerButton((button) => {
47+
if (button.tooltip == 'Close') {
48+
quick_pick.hide()
49+
}
50+
})
51+
52+
return new Promise<void>((resolve) => {
53+
quick_pick.onDidAccept(() => {
54+
const selected = quick_pick.selectedItems[0]
55+
if (selected) {
56+
panel_provider.send_message({
57+
command: 'NEWLY_PICKED_MODEL',
58+
model_id: selected.description!
59+
})
60+
}
61+
quick_pick.hide()
62+
})
63+
64+
quick_pick.onDidHide(() => {
65+
quick_pick.dispose()
66+
resolve()
67+
})
68+
69+
quick_pick.show()
70+
})
71+
} catch (error) {
72+
Logger.error({
73+
function_name: 'handle_pick_model',
74+
message: 'Error picking model',
75+
data: error
76+
})
77+
vscode.window.showErrorMessage(
78+
message.chatbot_name == 'OpenRouter'
79+
? dictionary.error_message.FAILED_TO_FETCH_OPEN_ROUTER_MODELS
80+
: 'Failed to pick model'
81+
)
82+
}
83+
}

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

Lines changed: 0 additions & 41 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export * from './handle-send-to-browser'
1919
export * from './handle-show-prompt-template-quick-pick'
2020
export * from './handle-update-preset'
2121
export * from './handle-pick-chatbot'
22-
export * from './handle-pick-open-router-model'
22+
export * from './handle-pick-model'
2323
export * from './handle-save-mode'
2424
export * from './handle-get-mode'
2525
export * from './handle-edit-context'

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import {
5151
handle_get_api_tool_configurations,
5252
handle_reorder_api_tool_configurations,
5353
handle_toggle_pinned_api_tool_configuration,
54-
handle_pick_open_router_model,
54+
handle_pick_model,
5555
handle_pick_chatbot,
5656
handle_focus_on_file_in_preview,
5757
handle_go_to_file,
@@ -715,8 +715,8 @@ export class PanelProvider implements vscode.WebviewViewProvider {
715715
)
716716
} else if (message.command == 'GET_WORKSPACE_STATE') {
717717
handle_get_workspace_state(this)
718-
} else if (message.command == 'PICK_OPEN_ROUTER_MODEL') {
719-
await handle_pick_open_router_model(this)
718+
} else if (message.command == 'PICK_MODEL') {
719+
await handle_pick_model(this, message)
720720
} else if (message.command == 'PICK_CHATBOT') {
721721
await handle_pick_chatbot(this, message)
722722
} else if (message.command == 'UPDATE_LAST_USED_PRESET') {

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -433,8 +433,11 @@ export const Panel = () => {
433433
<EditPresetForm
434434
preset={updating_preset}
435435
on_update={set_updated_preset}
436-
pick_open_router_model={() => {
437-
post_message(vscode, { command: 'PICK_OPEN_ROUTER_MODEL' })
436+
pick_model={(chatbot_name) => {
437+
post_message(vscode, {
438+
command: 'PICK_MODEL',
439+
chatbot_name
440+
})
438441
}}
439442
pick_chatbot={(chatbot_id) => {
440443
post_message(vscode, { command: 'PICK_CHATBOT', chatbot_id })

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

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Fieldset } from '@ui/components/editor/panel/Fieldset'
1717
type Props = {
1818
preset: Preset
1919
on_update: (updated_preset: Preset) => void
20-
pick_open_router_model: () => void
20+
pick_model: (chatbot_name: string) => void
2121
pick_chatbot: (chatbot_id?: keyof typeof CHATBOTS) => void
2222
on_at_sign_in_affix: () => void
2323
}
@@ -179,7 +179,7 @@ export const EditPresetForm: React.FC<Props> = (props) => {
179179
useEffect(() => {
180180
const handle_message = (event: MessageEvent) => {
181181
const message = event.data as BackendMessage
182-
if (message.command == 'NEWLY_PICKED_OPEN_ROUTER_MODEL') {
182+
if (message.command == 'NEWLY_PICKED_MODEL') {
183183
set_model(message.model_id)
184184
} else if (message.command == 'NEWLY_PICKED_CHATBOT') {
185185
handle_chatbot_change(message.chatbot_id as keyof typeof CHATBOTS)
@@ -249,32 +249,18 @@ export const EditPresetForm: React.FC<Props> = (props) => {
249249
</Field>
250250
)}
251251

252-
{Object.keys(models).length > 0 && (
252+
{(Object.keys(models).length > 0 || chatbot == 'OpenRouter') && (
253253
<Field label="Model" html_for="model">
254-
<Dropdown
255-
options={[
256-
{ value: '', label: '—' },
257-
...Object.entries(models).map(([value, model_data]) => ({
258-
value,
259-
label: (model_data as any).label
260-
}))
261-
]}
262-
value={model || ''}
263-
onChange={(value) => set_model(value || undefined)}
264-
/>
265-
</Field>
266-
)}
267-
268-
{chatbot == 'OpenRouter' && (
269-
<Field label="Model" html_for="open-router-model">
270254
<button
271255
className={dropdown_styles.button}
272256
onClick={(e) => {
273257
e.stopPropagation()
274-
props.pick_open_router_model()
258+
if (chatbot) {
259+
props.pick_model(chatbot)
260+
}
275261
}}
276262
>
277-
<span>{model || 'Select model'}</span>
263+
<span>{model_info?.label || model || 'Select model'}</span>
278264
<span
279265
className={cn(
280266
'codicon codicon-chevron-down',

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,9 @@ export interface CaretPositionChangedWebviewMessage extends BaseMessage {
180180
caret_position: number
181181
}
182182

183-
export interface PickOpenRouterModel extends BaseMessage {
184-
command: 'PICK_OPEN_ROUTER_MODEL'
183+
export interface PickModelMessage extends BaseMessage {
184+
command: 'PICK_MODEL'
185+
chatbot_name: string
185186
}
186187

187188
export interface PickChatbotMessage extends BaseMessage {
@@ -531,7 +532,7 @@ export type FrontendMessage =
531532
| ShowPromptTemplateQuickPickMessage
532533
| PreviewPresetMessage
533534
| CaretPositionChangedWebviewMessage
534-
| PickOpenRouterModel
535+
| PickModelMessage
535536
| PickChatbotMessage
536537
| SaveModeMessage
537538
| GetModeMessage
@@ -677,8 +678,8 @@ export interface PresetUpdatedMessage extends BaseMessage {
677678
command: 'PRESET_UPDATED'
678679
}
679680

680-
export interface NewlyPickedOpenRouterModelMessage extends BaseMessage {
681-
command: 'NEWLY_PICKED_OPEN_ROUTER_MODEL'
681+
export interface NewlyPickedModelMessage extends BaseMessage {
682+
command: 'NEWLY_PICKED_MODEL'
682683
model_id: string
683684
}
684685

@@ -849,7 +850,7 @@ export type BackendMessage =
849850
| ContextSizeWarningThresholdMessage
850851
| PresetCreatedMessage
851852
| PresetUpdatedMessage
852-
| NewlyPickedOpenRouterModelMessage
853+
| NewlyPickedModelMessage
853854
| NewlyPickedChatbotMessage
854855
| ModeMessage
855856
| WebPromptTypeMessage

packages/ui/src/components/editor/panel/Radio/Radio.module.scss renamed to packages/ui/src/components/editor/common/Radio/Radio.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
appearance: none;
33
height: 16px;
44
width: 16px;
5-
background-color: var(--vscode-checkbox-background);
6-
border: 1px solid var(--vscode-checkbox-border);
5+
background-color: var(--cwc-bg-secondary);
6+
border: 1px solid var(--cwc-border-color);
77
border-radius: 50%;
88
position: relative;
99
cursor: pointer;

0 commit comments

Comments
 (0)