Skip to content

Commit 896a773

Browse files
robertpiosikrobertpiosik
committed
Implement QuickPickButton component, refactor EditWebConfigurationForm to use it, and update codicons version
- create a new ui component in `packages/ui/src/components/editor/common`, name it QuickPickButton. Should look exactly like dropdown and be used in `apps/editor/src/views/shared/components/EditWebConfigurationForm/EditWebConfigurationForm.tsx` - the quick pick button should use unfold icon
1 parent 8dedbaa commit 896a773

8 files changed

Lines changed: 70 additions & 133 deletions

File tree

‎apps/browser/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
"@types/react": "^18.2.48",
4141
"@types/react-dom": "^18.2.18",
4242
"@types/webextension-polyfill": "^0.12.4",
43-
"@vscode/codicons": "^0.0.40",
4443
"classnames": "^2.5.1",
4544
"react": "^18.2.0",
4645
"react-dom": "^18.2.0",

‎apps/editor/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1128,7 +1128,7 @@
11281128
"@joplin/turndown-plugin-gfm": "^1.0.63",
11291129
"@mozilla/readability": "^0.6.0",
11301130
"@svgr/webpack": "^8.1.0",
1131-
"@vscode/codicons": "^0.0.43",
1131+
"@vscode/codicons": "^0.0.45",
11321132
"axios": "^1.10.0",
11331133
"bufferutil": "^4.0.9",
11341134
"classnames": "^2.5.1",

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

Lines changed: 27 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { useState, useEffect, useMemo } from 'react'
2-
import cn from 'classnames'
32
import styles from './EditWebConfigurationForm.module.scss'
4-
import dropdown_styles from '@ui/components/editor/common/Dropdown/Dropdown.module.scss'
53
import { WebConfiguration } from '@shared/types/web-configuration'
64
import { CHATBOTS } from '@shared/constants/chatbots'
75
import { Field as UiField } from '@ui/components/editor/panel/Field'
@@ -12,6 +10,7 @@ import { BackendMessage } from '@/views/panel/types/messages'
1210
import { PresetOption as UiPresetOption } from '@ui/components/editor/panel/PresetOption'
1311
import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
1412
import { Fieldset as UiFieldset } from '@ui/components/editor/panel/Fieldset'
13+
import { QuickPickButton as UiQuickPickButton } from '@ui/components/editor/common/QuickPickButton'
1514

1615
type Props = {
1716
web_configuration: WebConfiguration
@@ -31,7 +30,9 @@ type Props = {
3130
export const EditWebConfigurationForm: React.FC<Props> = (props) => {
3231
const [chatbot, set_chatbot] = useState(props.web_configuration.chatbot)
3332
const [name, set_name] = useState(props.web_configuration.name)
34-
const [temperature, set_temperature] = useState(props.web_configuration.temperature)
33+
const [temperature, set_temperature] = useState(
34+
props.web_configuration.temperature
35+
)
3536
const [top_p, set_top_p] = useState(props.web_configuration.top_p)
3637
const [thinking_budget, set_thinking_budget] = useState(
3738
props.web_configuration.thinking_budget
@@ -45,9 +46,12 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
4546
)
4647
const [port, set_port] = useState(props.web_configuration.port)
4748
const [new_url, set_new_url] = useState(props.web_configuration.new_url)
48-
const [options, set_options] = useState<string[]>(props.web_configuration.options || [])
49+
const [options, set_options] = useState<string[]>(
50+
props.web_configuration.options || []
51+
)
4952
const [is_sampling_collapsed, set_is_sampling_collapsed] = useState(
50-
props.web_configuration.temperature === undefined && props.web_configuration.top_p === undefined
53+
props.web_configuration.temperature === undefined &&
54+
props.web_configuration.top_p === undefined
5155
)
5256

5357
const chatbot_config = chatbot ? CHATBOTS[chatbot] : undefined
@@ -113,7 +117,7 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
113117
})
114118
} else {
115119
props.on_update({
116-
name,
120+
name
117121
})
118122
}
119123
}, [
@@ -194,43 +198,27 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
194198
<UiFieldset label="General">
195199
{chatbot && (
196200
<UiField label="Chatbot" html_for="chatbot">
197-
<button
198-
className={dropdown_styles.button}
201+
<UiQuickPickButton
202+
label={chatbot}
199203
onClick={(e) => {
200204
e.stopPropagation()
201205
props.pick_chatbot(chatbot)
202206
}}
203-
>
204-
<span>{chatbot}</span>
205-
<span
206-
className={cn(
207-
'codicon codicon-chevron-down',
208-
dropdown_styles.chevron
209-
)}
210-
/>
211-
</button>
207+
/>
212208
</UiField>
213209
)}
214210

215211
{(Object.keys(models).length > 0 || chatbot == 'OpenRouter') && (
216212
<UiField label="Model" html_for="model">
217-
<button
218-
className={dropdown_styles.button}
213+
<UiQuickPickButton
214+
label={model_info?.label || model || 'Select model'}
219215
onClick={(e) => {
220216
e.stopPropagation()
221217
if (chatbot) {
222218
props.pick_model(chatbot, model)
223219
}
224220
}}
225-
>
226-
<span>{model_info?.label || model || 'Select model'}</span>
227-
<span
228-
className={cn(
229-
'codicon codicon-chevron-down',
230-
dropdown_styles.chevron
231-
)}
232-
/>
233-
</button>
221+
/>
234222
</UiField>
235223
)}
236224

@@ -254,29 +242,21 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
254242
chatbot == 'OpenRouter' ? ' Requires a reasoning model.' : ''
255243
}`}
256244
>
257-
<button
258-
className={dropdown_styles.button}
245+
<UiQuickPickButton
246+
label={
247+
reasoning_effort
248+
? reasoning_effort.charAt(0).toUpperCase() +
249+
reasoning_effort.slice(1)
250+
: '—'
251+
}
259252
onClick={(e) => {
260253
e.stopPropagation()
261254
props.pick_reasoning_effort(
262255
supported_reasoning_efforts,
263256
reasoning_effort
264257
)
265258
}}
266-
>
267-
<span>
268-
{reasoning_effort
269-
? reasoning_effort.charAt(0).toUpperCase() +
270-
reasoning_effort.slice(1)
271-
: '—'}
272-
</span>
273-
<span
274-
className={cn(
275-
'codicon codicon-chevron-down',
276-
dropdown_styles.chevron
277-
)}
278-
/>
279-
</button>
259+
/>
280260
</UiField>
281261
)}
282262

@@ -349,7 +329,7 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
349329
<UiField
350330
label={chatbot_config?.url_override_label || 'URL override'}
351331
html_for="new-url"
352-
info="Use a smart workspace for your coding tasks."
332+
info="Elevate your workflow with smart workspaces."
353333
>
354334
<UiInput
355335
id="new-url"
@@ -379,9 +359,7 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
379359

380360
{chatbot &&
381361
Object.keys(chatbot_config?.supported_options || {}).length > 0 && (
382-
<UiFieldset
383-
label="Options"
384-
>
362+
<UiFieldset label="Options">
385363
<div className={styles.options}>
386364
{Object.entries(chatbot_config!.supported_options!).map(
387365
([key, label]) => {
@@ -394,6 +372,7 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
394372
if (model_info?.disabled_options?.includes(key)) {
395373
return null
396374
}
375+
397376
return (
398377
<UiPresetOption
399378
key={key}

‎packages/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"dependencies": {
2323
"@storybook/react": "^7.6.20",
2424
"@storybook/react-vite": "^7.6.20",
25-
"@vscode/codicons": "^0.0.43",
25+
"@vscode/codicons": "^0.0.45",
2626
"classnames": "^2.5.1",
2727
"dayjs": "^1.11.10",
2828
"react": "^18.2.0",

‎packages/ui/src/components/editor/common/QuickPickButton/QuickPickButton.module.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.button {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
background: var(--vscode-input-background);
6+
color: var(--vscode-input-foreground);
7+
padding: 4px 7px;
8+
border-radius: 4px;
9+
cursor: pointer;
10+
width: 100%;
11+
}
12+
13+
.icon {
14+
color: var(--vscode-icon-foreground);
15+
}

‎packages/ui/src/components/editor/common/QuickPickButton/QuickPickButton.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import cn from 'classnames'
2+
import styles from './QuickPickButton.module.scss'
3+
4+
export namespace QuickPickButton {
5+
export type Props = {
6+
label: React.ReactNode
7+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
8+
}
9+
}
10+
11+
export const QuickPickButton: React.FC<QuickPickButton.Props> = (props) => {
12+
return (
13+
<button className={styles.button} onClick={props.onClick}>
14+
<span>{props.label}</span>
15+
<span className={cn('codicon codicon-unfold', styles.icon)} />
16+
</button>
17+
)
18+
}

‎packages/ui/src/components/editor/common/QuickPickButton/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './QuickPickButton'

‎pnpm-lock.yaml‎

Lines changed: 7 additions & 82 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)