From 4a297d246d70aaa8c2db58a4429d059318d7a96b Mon Sep 17 00:00:00 2001 From: JamesS <47437340+splinesreticulating@users.noreply.github.com> Date: Fri, 27 Jun 2025 12:04:45 -0700 Subject: [PATCH 1/8] Use sliders for ranged settings --- src/lib/components/SettingsForm.svelte | 47 +++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index b60e59c..9478f4a 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -9,6 +9,16 @@ // Simple reactive state for form values let settingValues = $state>({}) + const rangeSettings: Record = { + HISTORY_LOOKBACK_HOURS: { min: 0, max: 48, step: 1 }, + OPENAI_TEMPERATURE: { min: 0, max: 1, step: 0.1 }, + OPENAI_TOP_P: { min: 0, max: 1, step: 0.05 }, + OPENAI_FREQUENCY_PENALTY: { min: -2, max: 2, step: 0.1 }, + OPENAI_PRESENCE_PENALTY: { min: -2, max: 2, step: 0.1 }, + ANTHROPIC_TEMPERATURE: { min: 0, max: 1, step: 0.1 }, + GROK_TEMPERATURE: { min: 0, max: 1, step: 0.1 }, + } + // Initialize form values once on mount $effect(() => { if (Object.keys(settingValues).length === 0) { @@ -106,6 +116,20 @@ rows="4" class="context-textarea" > + {:else if rangeSettings[setting.key]} +
+ + {settingValues[setting.key]} +
{:else} Date: Fri, 27 Jun 2025 12:16:59 -0700 Subject: [PATCH 2/8] fix settings form state update --- src/lib/components/SettingsForm.svelte | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index 9478f4a..48c84af 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -30,6 +30,17 @@ } }) + // Update local state when the form store returns fresh settings + $effect(() => { + if (form?.settings) { + const values: Record = {} + for (const setting of form.settings) { + values[setting.key] = setting.value + } + settingValues = values + } + }) + // Group settings by provider const settingsGroups = $derived({ general: settings.filter((s: { key: string; value: string; description: string }) => From c2abb6476d5eff799efacca71e18f86fa63d94f0 Mon Sep 17 00:00:00 2001 From: nbp Date: Fri, 27 Jun 2025 12:24:58 -0700 Subject: [PATCH 3/8] fix: combine effects --- src/lib/components/SettingsForm.svelte | 35 ++++++++++++++------------ 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index 48c84af..0e044b4 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -19,25 +19,28 @@ GROK_TEMPERATURE: { min: 0, max: 1, step: 0.1 }, } - // Initialize form values once on mount + // Initialize and update form values when settings or form data changes $effect(() => { - if (Object.keys(settingValues).length === 0) { - const values: Record = {} - for (const setting of settings) { - values[setting.key] = setting.value + // Always update from the latest settings or form data + const source = form?.settings || settings; + const values: Record = {} + + // First, set all current values to preserve any user input + Object.assign(values, settingValues); + + // Then update with the latest settings from props or form + for (const setting of source) { + // Only update if the setting exists in the source but not in current values, + // or if it's different from the current value (but not empty) + if (!(setting.key in values) || + (values[setting.key] === '' && setting.value !== '')) { + values[setting.key] = setting.value; } - settingValues = values } - }) - - // Update local state when the form store returns fresh settings - $effect(() => { - if (form?.settings) { - const values: Record = {} - for (const setting of form.settings) { - values[setting.key] = setting.value - } - settingValues = values + + // Only update if there are actual changes to prevent infinite loops + if (JSON.stringify(settingValues) !== JSON.stringify(values)) { + settingValues = values; } }) From ee1a6d23ae9fd9603f2c18fa81c715da5f11f2c8 Mon Sep 17 00:00:00 2001 From: nbp Date: Fri, 27 Jun 2025 12:33:52 -0700 Subject: [PATCH 4/8] fix: retain slider positions --- src/lib/components/SettingsForm.svelte | 50 +++++++++++++------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index 0e044b4..1753769 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -6,8 +6,10 @@ form?: any }>() - // Simple reactive state for form values - let settingValues = $state>({}) + // Initialize form values from props + let settingValues = $state>( + Object.fromEntries(settings.map(s => [s.key, s.value])) + ) const rangeSettings: Record = { HISTORY_LOOKBACK_HOURS: { min: 0, max: 48, step: 1 }, @@ -19,30 +21,21 @@ GROK_TEMPERATURE: { min: 0, max: 1, step: 0.1 }, } - // Initialize and update form values when settings or form data changes + // Update form values when settings change $effect(() => { - // Always update from the latest settings or form data - const source = form?.settings || settings; - const values: Record = {} - - // First, set all current values to preserve any user input - Object.assign(values, settingValues); - - // Then update with the latest settings from props or form - for (const setting of source) { - // Only update if the setting exists in the source but not in current values, - // or if it's different from the current value (but not empty) - if (!(setting.key in values) || - (values[setting.key] === '' && setting.value !== '')) { - values[setting.key] = setting.value; - } - } - - // Only update if there are actual changes to prevent infinite loops - if (JSON.stringify(settingValues) !== JSON.stringify(values)) { - settingValues = values; + if (form?.settings) { + settingValues = Object.fromEntries(form.settings.map(s => [s.key, s.value])); } }) + + // Handle range input changes + function handleRangeChange(key: string, value: string) { + const num = parseFloat(value); + const range = rangeSettings[key]; + if (!isNaN(num) && num >= range.min && num <= range.max) { + settingValues = { ...settingValues, [key]: value }; + } + } // Group settings by provider const settingsGroups = $derived({ @@ -142,7 +135,9 @@ bind:value={settingValues[setting.key]} class="range-input" /> - {settingValues[setting.key]} + + {settingValues[setting.key] || '0'} + {:else} Date: Fri, 27 Jun 2025 12:34:32 -0700 Subject: [PATCH 5/8] fix: replace any types --- src/lib/components/SettingsForm.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index 1753769..6bb3680 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -8,7 +8,7 @@ // Initialize form values from props let settingValues = $state>( - Object.fromEntries(settings.map(s => [s.key, s.value])) + Object.fromEntries(settings.map((s: { key: string; value: string }) => [s.key, s.value])) ) const rangeSettings: Record = { @@ -24,7 +24,7 @@ // Update form values when settings change $effect(() => { if (form?.settings) { - settingValues = Object.fromEntries(form.settings.map(s => [s.key, s.value])); + settingValues = Object.fromEntries(form.settings.map((s: { key: string; value: string }) => [s.key, s.value])); } }) From 14fd23636ca99383f59dde23ef1dbf4a7a16a7cf Mon Sep 17 00:00:00 2001 From: nbp Date: Fri, 27 Jun 2025 12:41:31 -0700 Subject: [PATCH 6/8] fix: slide to edges --- src/lib/components/SettingsForm.svelte | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index 6bb3680..5f9ce79 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -24,16 +24,18 @@ // Update form values when settings change $effect(() => { if (form?.settings) { - settingValues = Object.fromEntries(form.settings.map((s: { key: string; value: string }) => [s.key, s.value])); + settingValues = Object.fromEntries( + form.settings.map((s: { key: string; value: string }) => [s.key, s.value]) + ) } }) - + // Handle range input changes function handleRangeChange(key: string, value: string) { - const num = parseFloat(value); - const range = rangeSettings[key]; + const num = parseFloat(value) + const range = rangeSettings[key] if (!isNaN(num) && num >= range.min && num <= range.max) { - settingValues = { ...settingValues, [key]: value }; + settingValues = { ...settingValues, [key]: value } } } @@ -260,6 +262,8 @@ .range-input { width: 200px; + padding: 8px 0; + margin: 0; } .range-value { @@ -267,7 +271,7 @@ min-width: 30px; text-align: center; font-family: monospace; - font-size: 0.9em; + font-size: 1.3em; margin-left: 10px; color: var(--text); } From 44c390d45aeb4373056d5ba0303f7c1bcb4f4095 Mon Sep 17 00:00:00 2001 From: nbp Date: Fri, 27 Jun 2025 12:51:17 -0700 Subject: [PATCH 7/8] ui: Enlarge button --- src/lib/components/SettingsForm.svelte | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index 5f9ce79..e0f3393 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -290,25 +290,35 @@ } .save { - color: var(--primary-dark); - border: none; - border-radius: var(--border-radius); padding: 0.7rem 1.5rem; - font-size: 1rem; - font-weight: 600; + background-color: var(--primary-dark); + color: var(--white); + border: 1px solid var(--primary-light); + border-radius: var(--border-radius); cursor: pointer; + font-weight: 500; transition: background-color 0.2s, transform 0.1s; + min-height: var(--min-touch-size); + min-width: var(--min-touch-size); + display: flex; + align-items: center; } .save:hover { - background: var(--primary-dark); - color: var(--white); + background-color: var(--primary-dark); } .save:active { - transform: translateY(1px); + transform: scale(0.98); + } + + .save:disabled { + background-color: var(--light); + color: var(--gray); + cursor: not-allowed; + border-color: var(--light); } .status-message { From 227ba1aa24f7c2f231f9fce56b69d4689de64afc Mon Sep 17 00:00:00 2001 From: nbp Date: Fri, 27 Jun 2025 12:55:28 -0700 Subject: [PATCH 8/8] fix: mobile slider colours --- src/lib/components/SettingsForm.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/components/SettingsForm.svelte b/src/lib/components/SettingsForm.svelte index e0f3393..f9775e9 100644 --- a/src/lib/components/SettingsForm.svelte +++ b/src/lib/components/SettingsForm.svelte @@ -266,6 +266,12 @@ margin: 0; } + @media (max-width: 768px) { + input[type='range'] { + accent-color: var(--primary-dark); + } + } + .range-value { display: inline-block; min-width: 30px;