Skip to content

Commit 689b208

Browse files
mini2smini2s
authored
Update UI style (#645)
* feat(ui): replace Select with SearchableSelect across components * feat(types): update ZGSM default model to Auto
1 parent 3fe0959 commit 689b208

File tree

9 files changed

+99
-105
lines changed

9 files changed

+99
-105
lines changed

‎packages/types/src/providers/zgsm.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ModelInfo } from "../model.js"
22

3-
export const zgsmDefaultModelId = "GLM-4.5"
3+
export const zgsmDefaultModelId = "Auto"
44

55
export const zgsmModels = {
66
default: {

‎src/core/costrict/error-code/ErrorCodeManager.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ export class ErrorCodeManager {
129129
* @returns Formatted error information object
130130
*/
131131
public async parseResponse(error: any, isZgsm = false, taskId: string, instanceId: string): Promise<string> {
132+
// error.error
132133
const isHtml = error?.headers && error.headers["content-type"] && error.headers["content-type"] === "text/html"
133134
let rawError =
134135
(error.error?.metadata?.raw ? JSON.stringify(error.error.metadata.raw, null, 2) : error.message) ||

‎src/utils/encoding.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,6 @@ export const BINARY_MAGIC_NUMBERS = [
113113
{ magic: Buffer.from([0xff, 0xd8, 0xff]), description: "JPEG image" },
114114
// GIF files
115115
{ magic: Buffer.from([0x47, 0x49, 0x46, 0x38]), description: "GIF image" },
116-
// PDF files
117-
{ magic: Buffer.from([0x25, 0x50, 0x44, 0x46, 0x2d]), description: "PDF document" },
118116
// Mach-O files (macOS)
119117
{ magic: Buffer.from([0xfe, 0xed, 0xfa, 0xce]), description: "Mach-O executable (32-bit)" },
120118
{ magic: Buffer.from([0xfe, 0xed, 0xfa, 0xcf]), description: "Mach-O executable (64-bit)" },

‎webview-ui/src/components/modes/ModesView.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
3131
import { Tab, TabContent, TabHeader } from "@src/components/common/Tab"
3232
import {
3333
Button,
34-
Select,
35-
SelectContent,
36-
SelectItem,
37-
SelectTrigger,
38-
SelectValue,
34+
// Select,
35+
// SelectContent,
36+
// SelectItem,
37+
// SelectTrigger,
38+
// SelectValue,
3939
Popover,
4040
PopoverContent,
4141
PopoverTrigger,
@@ -47,6 +47,7 @@ import {
4747
CommandGroup,
4848
Input,
4949
StandardTooltip,
50+
SearchableSelect,
5051
} from "@src/components/ui"
5152
import { DeleteModeDialog } from "@src/components/modes/DeleteModeDialog"
5253
import { useEvent } from "react-use"
@@ -771,25 +772,25 @@ const ModesView = ({ onDone }: ModesViewProps) => {
771772
{t("prompts:apiConfiguration.select")}
772773
</div>
773774
<div className="mb-2">
774-
<Select
775+
<SearchableSelect
775776
value={currentApiConfigName}
776777
onValueChange={(value) => {
777778
vscode.postMessage({
778779
type: "loadApiConfiguration",
779780
text: value,
780781
})
781-
}}>
782-
<SelectTrigger className="w-full">
783-
<SelectValue placeholder={t("settings:common.select")} />
784-
</SelectTrigger>
785-
<SelectContent>
786-
{(listApiConfigMeta || []).map((config) => (
787-
<SelectItem key={config.id} value={config.name}>
788-
{config.name}
789-
</SelectItem>
790-
))}
791-
</SelectContent>
792-
</Select>
782+
}}
783+
options={(listApiConfigMeta || []).map(({ name }) => ({
784+
label: name,
785+
value: name,
786+
}))}
787+
placeholder={t("settings:common.select")}
788+
searchPlaceholder={""}
789+
emptyMessage={""}
790+
className="w-full"
791+
disabledSearch
792+
data-testid="provider-select"
793+
/>
793794
</div>
794795
</div>
795796
</div>

‎webview-ui/src/components/settings/BrowserSettings.tsx‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import { HTMLAttributes, useEffect, useMemo, useState } from "react"
44
import { Trans } from "react-i18next"
55

66
import {
7-
Select,
8-
SelectContent,
9-
SelectGroup,
10-
SelectItem,
11-
SelectTrigger,
12-
SelectValue,
7+
// Select,
8+
// SelectContent,
9+
// SelectGroup,
10+
// SelectItem,
11+
// SelectTrigger,
12+
// SelectValue,
1313
Slider,
1414
Button,
15+
SearchableSelect,
1516
} from "@/components/ui"
1617
import { useAppTranslation } from "@/i18n/TranslationContext"
1718
import { vscode } from "@/utils/vscode"
@@ -137,22 +138,17 @@ export const BrowserSettings = ({
137138
<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
138139
<div>
139140
<label className="block font-medium mb-1">{t("settings:browser.viewport.label")}</label>
140-
<Select
141+
<SearchableSelect
141142
value={browserViewportSize}
142-
onValueChange={(value) => setCachedStateField("browserViewportSize", value)}>
143-
<SelectTrigger className="w-full">
144-
<SelectValue placeholder={t("settings:common.select")} />
145-
</SelectTrigger>
146-
<SelectContent>
147-
<SelectGroup>
148-
{options.map(({ value, label }) => (
149-
<SelectItem key={value} value={value}>
150-
{label}
151-
</SelectItem>
152-
))}
153-
</SelectGroup>
154-
</SelectContent>
155-
</Select>
143+
onValueChange={(value) => setCachedStateField("browserViewportSize", value)}
144+
options={options}
145+
placeholder={t("settings:common.select")}
146+
searchPlaceholder={""}
147+
emptyMessage={""}
148+
className="w-full"
149+
disabledSearch
150+
data-testid="provider-select"
151+
/>
156152
<div className="text-vscode-descriptionForeground text-sm mt-1">
157153
{t("settings:browser.viewport.description")}
158154
</div>

‎webview-ui/src/components/settings/LanguageSettings.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import type { Language } from "@roo-code/types"
77
import { ZGSM_LANGUAGES as LANGUAGES } from "@roo/language"
88

99
import { cn } from "@src/lib/utils"
10-
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
10+
import {
11+
SearchableSelect /* Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue */,
12+
} from "@src/components/ui"
1113

1214
import { SetCachedStateField } from "./types"
1315
import { SectionHeader } from "./SectionHeader"
@@ -31,21 +33,17 @@ export const LanguageSettings = ({ language, setCachedStateField, className, ...
3133
</SectionHeader>
3234

3335
<Section>
34-
<Select value={language} onValueChange={(value) => setCachedStateField("language", value as Language)}>
35-
<SelectTrigger className="w-full">
36-
<SelectValue placeholder={t("settings:common.select")} />
37-
</SelectTrigger>
38-
<SelectContent>
39-
<SelectGroup>
40-
{Object.entries(LANGUAGES).map(([code, name]) => (
41-
<SelectItem key={code} value={code}>
42-
{name}
43-
<span className="text-muted-foreground">({code})</span>
44-
</SelectItem>
45-
))}
46-
</SelectGroup>
47-
</SelectContent>
48-
</Select>
36+
<SearchableSelect
37+
value={language}
38+
onValueChange={(value) => setCachedStateField("language", value as Language)}
39+
options={Object.entries(LANGUAGES).map(([code, name]) => ({ value: code, label: name }))}
40+
placeholder={t("settings:common.select")}
41+
searchPlaceholder={""}
42+
emptyMessage={""}
43+
disabledSearch
44+
className="w-full"
45+
data-testid="provider-select"
46+
/>
4947
</Section>
5048
</div>
5149
)

‎webview-ui/src/components/settings/PromptsSettings.tsx‎

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import { useAppTranslation } from "@src/i18n/TranslationContext"
88
import { useExtensionState } from "@src/context/ExtensionStateContext"
99
import {
1010
Button,
11-
Select,
12-
SelectContent,
13-
SelectItem,
14-
SelectTrigger,
15-
SelectValue,
11+
SearchableSelect,
12+
// Select,
13+
// SelectContent,
14+
// SelectItem,
15+
// SelectTrigger,
16+
// SelectValue,
1617
StandardTooltip,
1718
} from "@src/components/ui"
1819
import { SectionHeader } from "./SectionHeader"
@@ -145,20 +146,19 @@ const PromptsSettings = ({
145146

146147
<Section>
147148
<div>
148-
<Select
149+
<SearchableSelect
149150
value={activeSupportOption}
150-
onValueChange={(type) => setActiveSupportOption(type as SupportPromptType)}>
151-
<SelectTrigger className="w-full" data-testid="support-prompt-select-trigger">
152-
<SelectValue placeholder={t("settings:common.select")} />
153-
</SelectTrigger>
154-
<SelectContent>
155-
{Object.keys(supportPrompt.default).map((type) => (
156-
<SelectItem key={type} value={type} data-testid={`${type}-option`}>
157-
{t(`prompts:supportPrompts.types.${type}.label`)}
158-
</SelectItem>
159-
))}
160-
</SelectContent>
161-
</Select>
151+
onValueChange={(type) => setActiveSupportOption(type as SupportPromptType)}
152+
options={Object.keys(supportPrompt.default).map((type) => ({
153+
value: type,
154+
label: t(`prompts:supportPrompts.types.${type}.label`),
155+
}))}
156+
placeholder={t("settings:common.select")}
157+
searchPlaceholder={""}
158+
emptyMessage={""}
159+
className="w-full"
160+
data-testid="provider-select"
161+
/>
162162
<div className="text-sm text-vscode-descriptionForeground mt-1">
163163
{t(`prompts:supportPrompts.types.${activeSupportOption}.description`)}
164164
</div>
@@ -198,7 +198,7 @@ const PromptsSettings = ({
198198
? t("prompts:supportPrompts.enhance.apiConfiguration")
199199
: t("prompts:supportPrompts.condense.apiConfiguration")}
200200
</label>
201-
<Select
201+
<SearchableSelect
202202
value={
203203
activeSupportOption === "ENHANCE"
204204
? enhancementApiConfigId || "-"
@@ -219,32 +219,28 @@ const PromptsSettings = ({
219219
text: newConfigId,
220220
})
221221
}
222-
}}>
223-
<SelectTrigger data-testid="api-config-select" className="w-full">
224-
<SelectValue
225-
placeholder={
222+
}}
223+
options={[
224+
{
225+
id: "-",
226+
name:
226227
activeSupportOption === "ENHANCE"
227228
? t("prompts:supportPrompts.enhance.useCurrentConfig")
228-
: t("prompts:supportPrompts.condense.useCurrentConfig")
229-
}
230-
/>
231-
</SelectTrigger>
232-
<SelectContent>
233-
<SelectItem value="-">
234-
{activeSupportOption === "ENHANCE"
235-
? t("prompts:supportPrompts.enhance.useCurrentConfig")
236-
: t("prompts:supportPrompts.condense.useCurrentConfig")}
237-
</SelectItem>
238-
{(listApiConfigMeta || []).map((config) => (
239-
<SelectItem
240-
key={config.id}
241-
value={config.id}
242-
data-testid={`${config.id}-option`}>
243-
{config.name}
244-
</SelectItem>
245-
))}
246-
</SelectContent>
247-
</Select>
229+
: t("prompts:supportPrompts.condense.useCurrentConfig"),
230+
},
231+
...(listApiConfigMeta || []),
232+
].map(({ id, name }) => ({ value: id, label: name }))}
233+
placeholder={
234+
activeSupportOption === "ENHANCE"
235+
? t("prompts:supportPrompts.enhance.useCurrentConfig")
236+
: t("prompts:supportPrompts.condense.useCurrentConfig")
237+
}
238+
searchPlaceholder={""}
239+
emptyMessage={""}
240+
disabledSearch
241+
className="w-full"
242+
data-testid="provider-select"
243+
/>
248244
<div className="text-sm text-vscode-descriptionForeground mt-1">
249245
{activeSupportOption === "ENHANCE"
250246
? t("prompts:supportPrompts.enhance.apiConfigDescription")

‎webview-ui/src/components/ui/hooks/__tests__/useSelectedModel.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,7 @@ describe("useSelectedModel", () => {
406406
const { result } = renderHook(() => useSelectedModel(), { wrapper })
407407

408408
expect(result.current.provider).toBe("zgsm")
409-
expect(result.current.id).toBe("GLM-4.5")
409+
expect(result.current.id).toBe("Auto")
410410
})
411411
})
412412

‎webview-ui/src/components/ui/searchable-select.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
PopoverTrigger,
1515
} from "@/components/ui"
1616
import { useEscapeKey } from "@/hooks/useEscapeKey"
17+
import { useTranslation } from "react-i18next"
1718

1819
export interface SearchableSelectOption {
1920
value: string
@@ -27,7 +28,8 @@ interface SearchableSelectProps {
2728
onValueChange: (value: string) => void
2829
options: SearchableSelectOption[]
2930
placeholder: string
30-
searchPlaceholder: string
31+
searchPlaceholder?: string
32+
disabledSearch?: boolean
3133
emptyMessage: string
3234
className?: string
3335
disabled?: boolean
@@ -40,11 +42,13 @@ export function SearchableSelect({
4042
options,
4143
placeholder,
4244
searchPlaceholder,
45+
disabledSearch = false,
4346
emptyMessage,
4447
className,
4548
disabled,
4649
"data-testid": dataTestId,
4750
}: SearchableSelectProps) {
51+
const { t } = useTranslation()
4852
const [open, setOpen] = React.useState(false)
4953
const [searchValue, setSearchValue] = React.useState("")
5054
const searchInputRef = React.useRef<HTMLInputElement>(null)
@@ -130,12 +134,12 @@ export function SearchableSelect({
130134
</PopoverTrigger>
131135
<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)]">
132136
<Command>
133-
<div className="relative">
137+
<div className={cn("relative", disabledSearch ? "hidden" : "")}>
134138
<CommandInput
135139
ref={searchInputRef}
136140
value={searchValue}
137141
onValueChange={setSearchValue}
138-
placeholder={searchPlaceholder}
142+
placeholder={searchPlaceholder || t("settings:common.select")}
139143
className="h-9 mr-4"
140144
/>
141145
{searchValue.length > 0 && (

0 commit comments

Comments
 (0)