ui: ESLint config updates (#27700)
* chore: Spacing between sibling elements in html markup * chore: Formatting and linting rules
This commit is contained in:
@@ -66,13 +66,14 @@
|
||||
})()}
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Label for={field.key} class="flex items-center gap-1.5 text-sm font-medium">
|
||||
<Label class="flex items-center gap-1.5 text-sm font-medium" for={field.key}>
|
||||
{field.label}
|
||||
|
||||
{#if field.isExperimental}
|
||||
<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{/if}
|
||||
</Label>
|
||||
|
||||
{#if isCustomRealTime}
|
||||
<SettingsChatParameterSourceIndicator />
|
||||
{/if}
|
||||
@@ -80,9 +81,9 @@
|
||||
|
||||
<div class="relative w-full">
|
||||
<Input
|
||||
autocomplete={field.isPrivate ? 'new-password' : undefined}
|
||||
id={field.key}
|
||||
type={field.isPrivate ? 'password' : field.isPositiveInteger ? 'number' : 'text'}
|
||||
autocomplete={field.isPrivate ? 'new-password' : undefined}
|
||||
{...field.isPositiveInteger
|
||||
? {
|
||||
min: String(field.min ?? 1),
|
||||
@@ -90,28 +91,30 @@
|
||||
...(field.max != null ? { max: String(field.max) } : {})
|
||||
}
|
||||
: {}}
|
||||
value={currentValue}
|
||||
class="w-full {isCustomRealTime ? 'pr-8' : ''}"
|
||||
oninput={(e) => onConfigChange(field.key, e.currentTarget.value)}
|
||||
placeholder={currentModelParams[field.key] != null
|
||||
? `Default: ${normalizeFloatingPoint(currentModelParams[field.key])}`
|
||||
: (field.placeholder ?? '')}
|
||||
class="w-full {isCustomRealTime ? 'pr-8' : ''}"
|
||||
value={currentValue}
|
||||
/>
|
||||
|
||||
{#if isCustomRealTime}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Reset to default"
|
||||
class="absolute top-1/2 right-2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded transition-colors hover:bg-muted"
|
||||
onclick={() => {
|
||||
settingsStore.resetParameterToServerDefault(field.key);
|
||||
onConfigChange(field.key, '');
|
||||
}}
|
||||
class="absolute top-1/2 right-2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded transition-colors hover:bg-muted"
|
||||
aria-label="Reset to default"
|
||||
title="Reset to default"
|
||||
type="button"
|
||||
>
|
||||
<RotateCcw class="h-3 w-3" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if field.help || SETTING_CONFIG_INFO[field.key]}
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
{@html field.help || SETTING_CONFIG_INFO[field.key]}
|
||||
@@ -119,7 +122,7 @@
|
||||
{/if}
|
||||
{:else if field.type === SettingsFieldType.TEXTAREA}
|
||||
{#if field.label}
|
||||
<Label for={field.key} class="block flex items-center gap-1.5 text-sm font-medium">
|
||||
<Label class="block flex items-center gap-1.5 text-sm font-medium" for={field.key}>
|
||||
{field.label}
|
||||
|
||||
{#if field.isExperimental}
|
||||
@@ -129,11 +132,11 @@
|
||||
{/if}
|
||||
|
||||
<Textarea
|
||||
class="min-h-[10rem] w-full md:max-w-3xl"
|
||||
id={field.key}
|
||||
value={String(localConfig[field.key] ?? '')}
|
||||
onchange={(e) => onConfigChange(field.key, e.currentTarget.value)}
|
||||
placeholder=""
|
||||
class="min-h-[10rem] w-full md:max-w-3xl"
|
||||
value={String(localConfig[field.key] ?? '')}
|
||||
/>
|
||||
|
||||
{#if field.help || SETTING_CONFIG_INFO[field.key]}
|
||||
@@ -145,13 +148,13 @@
|
||||
{#if field.key === SETTINGS_KEYS.SYSTEM_MESSAGE}
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="showSystemMessage"
|
||||
checked={Boolean(localConfig.showSystemMessage ?? true)}
|
||||
id="showSystemMessage"
|
||||
onCheckedChange={(checked) =>
|
||||
onConfigChange(SETTINGS_KEYS.SHOW_SYSTEM_MESSAGE, Boolean(checked))}
|
||||
/>
|
||||
|
||||
<Label for="showSystemMessage" class="cursor-pointer text-sm font-normal">
|
||||
<Label class="cursor-pointer text-sm font-normal" for="showSystemMessage">
|
||||
Show system message in conversations
|
||||
</Label>
|
||||
</div>
|
||||
@@ -172,21 +175,20 @@
|
||||
})()}
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Label for={field.key} class="flex items-center gap-1.5 text-sm font-medium">
|
||||
<Label class="flex items-center gap-1.5 text-sm font-medium" for={field.key}>
|
||||
{field.label}
|
||||
|
||||
{#if field.isExperimental}
|
||||
<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{/if}
|
||||
</Label>
|
||||
|
||||
{#if isCustomRealTime}
|
||||
<SettingsChatParameterSourceIndicator />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Select.Root
|
||||
type="single"
|
||||
value={currentValue}
|
||||
onValueChange={(value) => {
|
||||
if (field.key === SETTINGS_KEYS.THEME && value && onThemeChange) {
|
||||
onThemeChange(value);
|
||||
@@ -194,6 +196,8 @@
|
||||
onConfigChange(field.key, value);
|
||||
}
|
||||
}}
|
||||
type="single"
|
||||
value={currentValue}
|
||||
>
|
||||
<div class="relative w-full md:w-auto">
|
||||
<Select.Trigger class="w-full">
|
||||
@@ -206,25 +210,27 @@
|
||||
{selectedOption?.label || `Select ${field.label.toLowerCase()}`}
|
||||
</div>
|
||||
</Select.Trigger>
|
||||
|
||||
{#if isCustomRealTime}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Reset to default"
|
||||
class="absolute top-1/2 right-8 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded transition-colors hover:bg-muted"
|
||||
onclick={() => {
|
||||
settingsStore.resetParameterToServerDefault(field.key);
|
||||
onConfigChange(field.key, '');
|
||||
}}
|
||||
class="absolute top-1/2 right-8 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded transition-colors hover:bg-muted"
|
||||
aria-label="Reset to default"
|
||||
title="Reset to default"
|
||||
type="button"
|
||||
>
|
||||
<RotateCcw class="h-3 w-3" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Select.Content>
|
||||
{#if field.options}
|
||||
{#each field.options as option (option.value)}
|
||||
<Select.Item value={option.value} label={option.label}>
|
||||
<Select.Item label={option.label} value={option.value}>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if option.icon}
|
||||
{@const IconComponent = option.icon}
|
||||
@@ -237,6 +243,7 @@
|
||||
{/if}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
|
||||
{#if field.help || SETTING_CONFIG_INFO[field.key]}
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
{field.help || SETTING_CONFIG_INFO[field.key]}
|
||||
@@ -258,20 +265,21 @@
|
||||
|
||||
<RadioGroup.Root
|
||||
class="gap-4"
|
||||
value={currentMode}
|
||||
onValueChange={(value) => {
|
||||
for (const opt of radioOptions) {
|
||||
onConfigChange(opt.key, opt.value === value);
|
||||
}
|
||||
}}
|
||||
value={currentMode}
|
||||
>
|
||||
{#each radioOptions as opt (opt.value)}
|
||||
{@const itemId = `${field.key}-${opt.value}`}
|
||||
<div class="flex items-center gap-2">
|
||||
<RadioGroup.Item value={opt.value} id={itemId} />
|
||||
<RadioGroup.Item id={itemId} value={opt.value} />
|
||||
|
||||
<Label
|
||||
for={itemId}
|
||||
class="flex cursor-pointer items-center gap-1.5 text-sm font-normal"
|
||||
for={itemId}
|
||||
>
|
||||
{opt.label}
|
||||
|
||||
@@ -291,16 +299,16 @@
|
||||
{:else if field.type === SettingsFieldType.CHECKBOX}
|
||||
<div class="flex items-start space-x-3">
|
||||
<Checkbox
|
||||
id={field.key}
|
||||
checked={Boolean(localConfig[field.key])}
|
||||
onCheckedChange={(checked) => onConfigChange(field.key, checked)}
|
||||
class="mt-1"
|
||||
id={field.key}
|
||||
onCheckedChange={(checked) => onConfigChange(field.key, checked)}
|
||||
/>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label
|
||||
for={field.key}
|
||||
class="flex cursor-pointer items-center gap-1.5 pt-1 pb-0.5 text-sm leading-none font-medium"
|
||||
for={field.key}
|
||||
>
|
||||
{field.label}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user