WIP: Responsive Segmented Controls

This commit is contained in:
Dustin Healy 2025-07-07 10:22:35 -07:00
parent f4d97e1672
commit fcfb0f47f9
7 changed files with 325 additions and 5 deletions

View file

@ -14,7 +14,8 @@ export type ComponentType =
| 'switch'
| 'dropdown'
| 'combobox'
| 'tags';
| 'tags'
| 'segment';
export type OptionType = 'conversation' | 'model' | 'custom';
@ -34,6 +35,7 @@ export enum ComponentTypes {
Dropdown = 'dropdown',
Combobox = 'combobox',
Tags = 'tags',
Segment = 'segment',
}
export enum SettingTypes {
@ -206,6 +208,7 @@ const maxColumns = 4;
const minSliderOptions = 2;
const minDropdownOptions = 2;
const minComboboxOptions = 2;
const minSegmentOptions = 2;
/**
* Validates the provided setting using the constraints unique to each component type.
@ -361,6 +364,20 @@ export function validateSettingDefinitions(settings: SettingsConfiguration): voi
setting.type === SettingTypes.Number ? (setting.includeInput ?? true) : false; // Default to true if type is number
}
if (setting.component === ComponentTypes.Segment) {
if (
setting.type === SettingTypes.Enum &&
(!setting.options || setting.options.length < minSegmentOptions)
) {
errors.push({
code: ZodIssueCode.custom,
message: `Segment component for setting ${setting.key} requires at least ${minSegmentOptions} options for enum type.`,
path: ['options'],
});
// continue;
}
}
if (setting.component === ComponentTypes.Slider && setting.type === SettingTypes.Number) {
if (setting.default === undefined && setting.range) {
// Set default to the middle of the range if unspecified

View file

@ -70,7 +70,7 @@ const baseDefinitions: Record<string, SettingDefinition> = {
descriptionCode: true,
type: 'enum',
default: ImageDetail.auto,
component: 'slider',
component: 'segment',
options: [ImageDetail.low, ImageDetail.auto, ImageDetail.high],
enumMappings: {
[ImageDetail.low]: 'com_ui_low',
@ -218,7 +218,7 @@ const openAIParams: Record<string, SettingDefinition> = {
descriptionCode: true,
type: 'enum',
default: ReasoningEffort.none,
component: 'slider',
component: 'segment',
options: [
ReasoningEffort.none,
ReasoningEffort.low,
@ -268,7 +268,7 @@ const openAIParams: Record<string, SettingDefinition> = {
descriptionCode: true,
type: 'enum',
default: ReasoningSummary.none,
component: 'slider',
component: 'segment',
options: [
ReasoningSummary.none,
ReasoningSummary.auto,
@ -276,7 +276,7 @@ const openAIParams: Record<string, SettingDefinition> = {
ReasoningSummary.detailed,
],
enumMappings: {
[ReasoningSummary.none]: 'com_ui_none',
[ReasoningSummary.none]: 'com_ui_none_',
[ReasoningSummary.auto]: 'com_ui_auto',
[ReasoningSummary.concise]: 'com_ui_concise',
[ReasoningSummary.detailed]: 'com_ui_detailed',