Skip to content

Commit 26329a4

Browse files
robertpiosikrobertpiosik
committed
Refactor shared UI components and update model and reasoning effort selection to support Unset functionality
- should allow unsetting model selection, just like you allow unsetting 'reasoning effort' - move 'field' to `packages/ui/src/components/editor/common` - move 'text button' to `packages/ui/src/components/editor/common` - for model and reasoning effort selection: in field's action place text button 'unset' that will remove the set value. - don't allow unsetting model and reasoning effort from within a quick pick, thus make return type non-optional
1 parent 723cf96 commit 26329a4

30 files changed

Lines changed: 138 additions & 137 deletions

File tree

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Logger } from '@shared/utils/logger'
77
export const pick_model = async (params: {
88
chatbot_name: string
99
current_model_id?: string
10-
}): Promise<string | undefined> => {
10+
}): Promise<{ model_id: string } | undefined> => {
1111
try {
1212
let items: (vscode.QuickPickItem & { model_id: string })[] = []
1313

@@ -20,7 +20,8 @@ export const pick_model = async (params: {
2020
model_id: model.id
2121
}))
2222
} else {
23-
const chatbot_config = CHATBOTS[params.chatbot_name as keyof typeof CHATBOTS]
23+
const chatbot_config =
24+
CHATBOTS[params.chatbot_name as keyof typeof CHATBOTS]
2425
if (chatbot_config && chatbot_config.models) {
2526
items = Object.entries(chatbot_config.models).map(([id, data]) => ({
2627
label: (data as any).label || id,
@@ -35,8 +36,12 @@ export const pick_model = async (params: {
3536
quick_pick.placeholder = 'Choose a model'
3637

3738
if (params.current_model_id) {
38-
const active_item = items.find((i) => i.model_id === params.current_model_id)
39+
const active_item = items.find(
40+
(i) => i.model_id === params.current_model_id
41+
)
3942
if (active_item) quick_pick.activeItems = [active_item]
43+
} else {
44+
quick_pick.activeItems = [items[0]]
4045
}
4146

4247
quick_pick.buttons = [
@@ -52,13 +57,13 @@ export const pick_model = async (params: {
5257
}
5358
})
5459

55-
return new Promise<string | undefined>((resolve) => {
60+
return new Promise<{ model_id: string } | undefined>((resolve) => {
5661
let accepted = false
5762
quick_pick.onDidAccept(() => {
5863
accepted = true
5964
const selected = quick_pick.selectedItems[0] as any
6065
quick_pick.hide()
61-
resolve(selected?.model_id)
66+
resolve(selected ? { model_id: selected.model_id } : undefined)
6267
})
6368

6469
quick_pick.onDidHide(() => {

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import * as vscode from 'vscode'
33
export const pick_reasoning_effort = async (params: {
44
supported_efforts: string[]
55
current_effort?: string
6-
}): Promise<{ effort?: string } | undefined> => {
7-
const items: (vscode.QuickPickItem & { effort?: string })[] = [
8-
{ label: 'Unset', effort: undefined },
9-
...params.supported_efforts.map((effort) => ({
6+
}): Promise<{ effort: string } | undefined> => {
7+
const items: (vscode.QuickPickItem & { effort: string })[] =
8+
params.supported_efforts.map((effort) => ({
109
label: effort.charAt(0).toUpperCase() + effort.slice(1),
1110
effort
1211
}))
13-
]
1412

1513
const quick_pick = vscode.window.createQuickPick()
1614
quick_pick.items = items
@@ -37,7 +35,7 @@ export const pick_reasoning_effort = async (params: {
3735
}
3836
})
3937

40-
return new Promise<{ effort?: string } | undefined>((resolve) => {
38+
return new Promise<{ effort: string } | undefined>((resolve) => {
4139
let accepted = false
4240
quick_pick.onDidAccept(() => {
4341
accepted = true

‎apps/editor/src/views/components/EditWebConfigurationForm/EditWebConfigurationForm.tsx‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState, useEffect, useMemo } from 'react'
22
import styles from './EditWebConfigurationForm.module.scss'
33
import { WebConfiguration } from '@shared/types/web-configuration'
44
import { CHATBOTS } from '@shared/constants/chatbots'
5-
import { Field as UiField } from '@ui/components/editor/panel/Field'
5+
import { Field as UiField } from '@ui/components/editor/common/Field'
66
import { Slider as UiSlider } from '@ui/components/editor/panel/Slider'
77
import { Input as UiInput } from '@ui/components/editor/common/Input'
88
import { Textarea as UiTextarea } from '@ui/components/editor/common/Textarea'
@@ -11,6 +11,7 @@ import { PresetOption as UiPresetOption } from '@ui/components/editor/panel/Pres
1111
import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
1212
import { Fieldset as UiFieldset } from '@ui/components/editor/panel/Fieldset'
1313
import { QuickPickButton as UiQuickPickButton } from '@ui/components/editor/common/QuickPickButton'
14+
import { TextButton as UiTextButton } from '@ui/components/editor/common/TextButton'
1415

1516
type Props = {
1617
web_configuration: WebConfiguration
@@ -195,7 +196,7 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
195196
return (
196197
<UiScrollable>
197198
<div className={styles.form}>
198-
<UiFieldset label="General">
199+
<UiFieldset>
199200
{chatbot && (
200201
<UiField label="Chatbot" html_for="chatbot">
201202
<UiQuickPickButton
@@ -209,9 +210,19 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
209210
)}
210211

211212
{(Object.keys(models).length > 0 || chatbot == 'OpenRouter') && (
212-
<UiField label="Model" html_for="model">
213+
<UiField
214+
label="Model"
215+
html_for="model"
216+
action={
217+
model !== undefined && (
218+
<UiTextButton on_click={() => set_model(undefined)}>
219+
Unset
220+
</UiTextButton>
221+
)
222+
}
223+
>
213224
<UiQuickPickButton
214-
label={model_info?.label || model || 'Select model'}
225+
label={model_info?.label || model || '—'}
215226
onClick={(e) => {
216227
e.stopPropagation()
217228
if (chatbot) {
@@ -223,7 +234,17 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
223234
)}
224235

225236
{supports_user_provided_model && (
226-
<UiField label="Model" html_for="custom-model">
237+
<UiField
238+
label="Model"
239+
html_for="custom-model"
240+
action={
241+
model !== undefined && (
242+
<UiTextButton on_click={() => set_model(undefined)}>
243+
Unset
244+
</UiTextButton>
245+
)
246+
}
247+
>
227248
<UiInput
228249
id="custom-model"
229250
type="text"
@@ -241,6 +262,15 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
241262
info={`Controls how much the model thinks.${
242263
chatbot == 'OpenRouter' ? ' Requires a reasoning model.' : ''
243264
}`}
265+
action={
266+
reasoning_effort !== undefined && (
267+
<UiTextButton
268+
on_click={() => set_reasoning_effort(undefined)}
269+
>
270+
Unset
271+
</UiTextButton>
272+
)
273+
}
244274
>
245275
<UiQuickPickButton
246276
label={

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export const handle_pick_model = async (
66
panel_provider: PanelProvider,
77
message: PickModelMessage
88
): Promise<void> => {
9-
const selected = await pick_model({
9+
const result = await pick_model({
1010
chatbot_name: message.chatbot_name,
1111
current_model_id: message.current_model_id
1212
})
13-
if (selected) {
13+
if (result) {
1414
panel_provider.send_message({
1515
command: 'NEWLY_PICKED_MODEL',
16-
model_id: selected
16+
model_id: result.model_id
1717
})
1818
}
1919
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Main } from './Main'
33
import { Button as UiButton } from '@ui/components/editor/common/Button'
44
import { Page as UiPage } from '@ui/components/editor/panel/Page'
55
import { EditWebConfigurationForm } from '@/views/components/EditWebConfigurationForm'
6-
import { TextButton as UiTextButton } from '@ui/components/editor/panel/TextButton'
6+
import { TextButton as UiTextButton } from '@ui/components/editor/common/TextButton'
77
import { MODE } from '../types/main-view-mode'
88
import { Home } from './Home'
99
import styles from './Panel.module.scss'

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -694,7 +694,9 @@ export interface WebConfigurationsMessage extends BaseMessage {
694694
command: 'WEB_CONFIGURATIONS'
695695
web_configurations: WebConfiguration[]
696696
selected_web_configuration_name_by_mode?: { [T in WebPromptType]?: string }
697-
selected_api_configuration_id_by_prompt_type?: { [T in ApiPromptType]?: string }
697+
selected_api_configuration_id_by_prompt_type?: {
698+
[T in ApiPromptType]?: string
699+
}
698700
}
699701

700702
export interface ApiConfigurationsMessage extends BaseMessage {
@@ -752,7 +754,7 @@ export interface NewlyPickedChatbotMessage extends BaseMessage {
752754

753755
export interface NewlyPickedReasoningEffortMessage extends BaseMessage {
754756
command: 'NEWLY_PICKED_REASONING_EFFORT'
755-
effort?: string
757+
effort: string
756758
}
757759

758760
export interface ModeMessage extends BaseMessage {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export const handle_pick_model = async (
66
settings_provider: SettingsProvider,
77
message: PickModelMessage
88
): Promise<void> => {
9-
const selected = await pick_model({
9+
const result = await pick_model({
1010
chatbot_name: message.chatbot_name,
1111
current_model_id: message.current_model_id
1212
})
13-
if (selected) {
13+
if (result) {
1414
settings_provider.postMessage({
1515
command: 'NEWLY_PICKED_MODEL',
16-
model_id: selected
16+
model_id: result.model_id
1717
})
1818
}
1919
}

‎apps/editor/src/views/settings/frontend/Home/sections/GeneralSection.tsx‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Dropdown as UiDropdown } from '@ui/components/editor/common/Dropdown'
55
import { Item as UiItem } from '@ui/components/editor/settings/Item'
66
import { Group as UiGroup } from '@ui/components/editor/settings/Group/Group'
77
import { Section as UiSection } from '@ui/components/editor/settings/Section'
8-
import { TextButton as UiTextButton } from '@ui/components/editor/settings/TextButton'
8+
import { TextButton as UiTextButton } from '@ui/components/editor/common/TextButton'
99
import { Textarea as UiTextarea } from '@ui/components/editor/common/Textarea'
1010
import { EditFormatInstructions } from '@/views/settings/types/messages'
1111
import {
@@ -185,10 +185,14 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
185185
/>
186186
<UiItem
187187
title={t('general.code-at-cursor.keyboard-shortcut.title')}
188-
description={t('general.code-at-cursor.keyboard-shortcut.description')}
188+
description={t(
189+
'general.code-at-cursor.keyboard-shortcut.description'
190+
)}
189191
slot_right={
190192
<UiTextButton
191-
on_click={() => props.on_open_keybindings('codeWebChat.codeAtCursor')}
193+
on_click={() =>
194+
props.on_open_keybindings('codeWebChat.codeAtCursor')
195+
}
192196
>
193197
{t('general.code-at-cursor.keyboard-shortcut.action')}
194198
</UiTextButton>
@@ -216,7 +220,9 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
216220
/>
217221
<UiItem
218222
title={t('general.include-prompts-in-commit-messages.title')}
219-
description={t('general.include-prompts-in-commit-messages.description')}
223+
description={t(
224+
'general.include-prompts-in-commit-messages.description'
225+
)}
220226
slot_right={
221227
<UiToggler
222228
is_on={props.include_prompts_in_commit_messages}
@@ -226,9 +232,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
226232
/>
227233
<UiItem
228234
title={t('general.intelligent-update.auto-run.title')}
229-
description={t(
230-
'general.intelligent-update.auto-run.description'
231-
)}
235+
description={t('general.intelligent-update.auto-run.description')}
232236
slot_right={
233237
<UiToggler
234238
is_on={props.auto_run_intelligent_update}
@@ -363,7 +367,12 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
363367
: undefined
364368
}
365369
action_title={t('general.action.restore-default')}
366-
on_action_click={() => handle_reset_instruction('whole', EDIT_FORMAT_INSTRUCTIONS_WHOLE)}
370+
on_action_click={() =>
371+
handle_reset_instruction(
372+
'whole',
373+
EDIT_FORMAT_INSTRUCTIONS_WHOLE
374+
)
375+
}
367376
/>
368377
</UiItem>
369378

@@ -393,7 +402,12 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
393402
: undefined
394403
}
395404
action_title={t('general.action.restore-default')}
396-
on_action_click={() => handle_reset_instruction('truncated', EDIT_FORMAT_INSTRUCTIONS_TRUNCATED)}
405+
on_action_click={() =>
406+
handle_reset_instruction(
407+
'truncated',
408+
EDIT_FORMAT_INSTRUCTIONS_TRUNCATED
409+
)
410+
}
397411
/>
398412
</UiItem>
399413

@@ -418,12 +432,18 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
418432
on_blur={handle_instructions_blur}
419433
action_icon={
420434
instructions.search_replace != '' &&
421-
instructions.search_replace != EDIT_FORMAT_INSTRUCTIONS_SEARCH_REPLACE
435+
instructions.search_replace !=
436+
EDIT_FORMAT_INSTRUCTIONS_SEARCH_REPLACE
422437
? 'discard'
423438
: undefined
424439
}
425440
action_title={t('general.action.restore-default')}
426-
on_action_click={() => handle_reset_instruction('search_replace', EDIT_FORMAT_INSTRUCTIONS_SEARCH_REPLACE)}
441+
on_action_click={() =>
442+
handle_reset_instruction(
443+
'search_replace',
444+
EDIT_FORMAT_INSTRUCTIONS_SEARCH_REPLACE
445+
)
446+
}
427447
/>
428448
</UiItem>
429449

@@ -450,12 +470,16 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
450470
: undefined
451471
}
452472
action_title={t('general.action.restore-default')}
453-
on_action_click={() => handle_reset_instruction('diff', EDIT_FORMAT_INSTRUCTIONS_DIFF)}
473+
on_action_click={() =>
474+
handle_reset_instruction(
475+
'diff',
476+
EDIT_FORMAT_INSTRUCTIONS_DIFF
477+
)
478+
}
454479
/>
455480
</UiItem>
456481
</UiGroup>
457482
</div>
458-
459483
</UiSection>
460484
)
461485
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ export interface NewlyPickedChatbotMessage {
486486

487487
export interface NewlyPickedReasoningEffortMessage {
488488
command: 'NEWLY_PICKED_REASONING_EFFORT'
489-
effort?: string
489+
effort: string
490490
}
491491

492492
export interface WebConfigurationUpdatedMessage {
@@ -519,4 +519,3 @@ export type BackendMessage =
519519
| NewlyPickedChatbotMessage
520520
| NewlyPickedReasoningEffortMessage
521521
| WebConfigurationUpdatedMessage
522-

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

File renamed without changes.

0 commit comments

Comments
 (0)