From a38ce6d70265a38241a238e3ac4b1b1923d20886 Mon Sep 17 00:00:00 2001 From: Webifi Date: Sat, 3 Jun 2023 09:40:49 -0500 Subject: [PATCH] Clean up UI for settings modal, better for mobile. --- src/app.scss | 27 +++++++- src/lib/ChatOptionMenu.svelte | 2 +- src/lib/ChatSettingField.svelte | 27 ++++---- src/lib/ChatSettingsModal.svelte | 103 +++++++++++++++++-------------- src/lib/Profiles.svelte | 8 +-- src/lib/Settings.svelte | 14 ++--- 6 files changed, 104 insertions(+), 77 deletions(-) diff --git a/src/app.scss b/src/app.scss index 02c589a..6f328b7 100644 --- a/src/app.scss +++ b/src/app.scss @@ -157,9 +157,9 @@ html { resize: vertical; } -$footer-padding: 1.5rem 1.5rem; -$fullhd: 2000px; -$modal-content-width: 1000px; +// $footer-padding: 1.5rem 1.5rem; +// $fullhd: 2000px; +// $modal-content-width: 1000px; @import "/node_modules/bulma/bulma.sass"; @@ -277,6 +277,12 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t max-height: calc(100vh - 60px); overflow-y: auto; } +.modal-card .dropdown-menu .dropdown-content { + max-height: calc(100vh - 80px); +} +.modal-card { + overflow: visible; +} @media only screen and (max-width: 768px) { .main-menu .dropdown-menu .dropdown-content { @@ -594,3 +600,18 @@ aside.menu.main-menu .menu-expanse { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; } + +.modal-card footer { + justify-content: space-between; +} +.modal-card footer .level { + width: 100%; +} + +.modal-card header, .modal-card footer, .modal-card .notification { + padding: .8em; +} +.modal-card .notification { + margin-left: -.5em; + margin-right: -.5em; +} \ No newline at end of file diff --git a/src/lib/ChatOptionMenu.svelte b/src/lib/ChatOptionMenu.svelte index eab3d99..768611e 100644 --- a/src/lib/ChatOptionMenu.svelte +++ b/src/lib/ChatOptionMenu.svelte @@ -92,7 +92,7 @@ Chat Profile Settings
- close()} class="dropdown-item"> + close()} class="dropdown-item"> New Chat { if (chatId) close(); copyChat(chatId) }}> diff --git a/src/lib/ChatSettingField.svelte b/src/lib/ChatSettingField.svelte index 5784481..bd11cbb 100644 --- a/src/lib/ChatSettingField.svelte +++ b/src/lib/ChatSettingField.svelte @@ -24,28 +24,28 @@ } const settingChecks:Record = { - 'profile': [ + profile: [ { - prompt:'Unsaved changes to the current profile will be lost.\n Continue?', + prompt: 'Unsaved changes to the current profile will be lost.\n Continue?', fn: (setting, newVal, oldVal) => { return !!chatSettings.isDirty && newVal !== oldVal }, - passed: false, + passed: false }, { - prompt:'Personality change will not correctly apply to existing chat session.\n Continue?', + prompt: 'Personality change will not correctly apply to existing chat session.\n Continue?', fn: (setting, newVal, oldVal) => { return chat.sessionStarted && newVal !== originalProfile && (getProfile(newVal).characterName !== chatSettings.characterName) }, - passed: false, - }, + passed: false + } ] } const resetSettingCheck = (key:keyof ChatSettings) => { const checks = settingChecks[key] - checks && checks.forEach((c)=>{c.passed=false}) + checks && checks.forEach((c) => { c.passed = false }) } let debounce: any @@ -73,11 +73,10 @@ const newVal = chatSettings[setting.key] if (val === newVal) return try { - if((typeof setting.afterChange === 'function') && setting.afterChange(chatId, setting, chatSettings[setting.key])){ + if ((typeof setting.afterChange === 'function') && setting.afterChange(chatId, setting, chatSettings[setting.key])) { console.log('Refreshed from setting', setting.key, chatSettings[setting.key], val) refreshSettings() } - } catch (e) { setChatSettingValue(chatId, setting, val) window.alert('Unable to change:\n' + e.message) @@ -85,13 +84,13 @@ dispatch('change', setting) } const checks = settingChecks[setting.key] || [] - const newVal = cleanSettingValue(setting.type, el.checked||el.value) + const newVal = cleanSettingValue(setting.type, el.checked || el.value) for (let i = 0, l = checks.length; i < l; i++) { - let c = checks[i] - if(c.passed) continue + const c = checks[i] + if (c.passed) continue if (c.fn(setting, newVal, val)) { // eventually this needs to be an async call to a confirmation modal where - // "passed", not really being used here, will be reworked to some other + // "passed", not really being used here, will be reworked to some other // state to deal with inevitable issues once a non-blocking modal is used. if (window.confirm(c.prompt)) { c.passed = true @@ -101,7 +100,7 @@ // refresh setting modal, if open refreshSettings() resetSettingCheck(setting.key) - return + return } } else { c.passed = true diff --git a/src/lib/ChatSettingsModal.svelte b/src/lib/ChatSettingsModal.svelte index 6bb48e4..b3f913e 100644 --- a/src/lib/ChatSettingsModal.svelte +++ b/src/lib/ChatSettingsModal.svelte @@ -18,7 +18,7 @@ import { faTrash, faClone, - faEllipsisVertical, + faEllipsis, faFloppyDisk, faThumbtack, faDownload, @@ -27,7 +27,7 @@ import { exportProfileAsJSON } from './Export.svelte' import { afterUpdate } from 'svelte' import ChatSettingField from './ChatSettingField.svelte' - import { getModelMaxTokens } from './Stats.svelte'; + import { getModelMaxTokens } from './Stats.svelte' export let chatId:number export const show = () => { showSettings() } @@ -50,7 +50,7 @@ $: chatSettings = chat.settings $: globalStore = $globalStorage - let originalProfile = chatSettings && chatSettings.profile + const originalProfile = chatSettings && chatSettings.profile afterUpdate(() => { sizeTextElements() @@ -64,7 +64,7 @@ const clearSettings = () => { resetChatSettings(chatId) - showSettingsModal++ // Make sure the dialog updates + refreshSettings() } const refreshSettings = async () => { @@ -131,7 +131,7 @@ const profileSelect = getChatSettingObjectByKey('profile') as ChatSetting & SettingSelect profileSelect.options = getProfileSelect() chatDefaults.profile = getDefaultProfileKey() - chatDefaults.max_tokens = getModelMaxTokens(chatSettings.model||'') + chatDefaults.max_tokens = getModelMaxTokens(chatSettings.model || '') // const defaultProfile = globalStore.defaultProfile || profileSelect.options[0].value defaultProfile = getDefaultProfileKey() isDefault = defaultProfile === chatSettings.profile @@ -204,10 +204,12 @@ // excludeFromProfile const deepEqual = (x:any, y:any) => { - const ok = Object.keys, tx = typeof x, ty = typeof y - return x && y && tx === 'object' && tx === ty ? ( - ok(x).every(key => excludeFromProfile[key] || deepEqual(x[key], y[key])) - ) : (x === y || ((x===undefined||x===null||x===false) && (y===undefined||y===null||y===false))) + const ok = Object.keys; const tx = typeof x; const ty = typeof y + return x && y && tx === 'object' && tx === ty + ? ( + ok(x).every(key => excludeFromProfile[key] || deepEqual(x[key], y[key])) + ) + : (x === y || ((x === undefined || x === null || x === false) && (y === undefined || y === null || y === false))) } const setDirty = (e:CustomEvent|undefined = undefined) => { @@ -228,41 +230,7 @@
{ showProfileMenu = false }}>

Chat Settings

-
-
- -
- -
+
{#key showSettingsModal} @@ -273,9 +241,50 @@
diff --git a/src/lib/Profiles.svelte b/src/lib/Profiles.svelte index 4964142..8bcd8a6 100644 --- a/src/lib/Profiles.svelte +++ b/src/lib/Profiles.svelte @@ -72,7 +72,7 @@ export const prepareSummaryPrompt = (chatId:number, promptsSize:number, maxToken } // Restart currently loaded profile -export const restartProfile = (chatId:number, noApply:boolean=false) => { +export const restartProfile = (chatId:number, noApply:boolean = false) => { const settings = getChatSettings(chatId) if (!settings.profile && !noApply) return applyProfile(chatId, '', true) // Clear current messages @@ -87,7 +87,7 @@ export const restartProfile = (chatId:number, noApply:boolean=false) => { // Add trainingPrompts, if any if (settings.trainingPrompts) { - settings.trainingPrompts.forEach(tp => { + settings.trainingPrompts.forEach(tp => { addMessage(chatId, tp) }) } @@ -96,12 +96,10 @@ export const restartProfile = (chatId:number, noApply:boolean=false) => { saveChatStore() // Mark mark this as last used setGlobalSettingValueByKey('lastProfile', settings.profile) -} +} // Apply currently selected profile export const applyProfile = (chatId:number, key:string = '', resetChat:boolean = false) => { - const settings = getChatSettings(chatId) - const profile = getProfile(key || settings.profile) resetChatSettings(chatId, resetChat) // Fully reset if (!resetChat) return return restartProfile(chatId, true) diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte index 3e41c37..d305e25 100644 --- a/src/lib/Settings.svelte +++ b/src/lib/Settings.svelte @@ -1,6 +1,6 @@