From 5d670cb7cef27ebb006cab42a5b2bec96fa96684 Mon Sep 17 00:00:00 2001 From: Timothy Jaeryang Baek Date: Thu, 7 Aug 2025 02:11:16 +0400 Subject: [PATCH] refac: interface settings styling --- .../components/chat/Settings/Interface.svelte | 1466 +++++++---------- .../ManageFloatingActionButtonsModal.svelte | 170 ++ 2 files changed, 740 insertions(+), 896 deletions(-) create mode 100644 src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte index 930b3d9efb..47f8a38595 100644 --- a/src/lib/components/chat/Settings/Interface.svelte +++ b/src/lib/components/chat/Settings/Interface.svelte @@ -5,6 +5,10 @@ import Tooltip from '$lib/components/common/Tooltip.svelte'; import { updateUserInfo } from '$lib/apis/users'; import { getUserPosition } from '$lib/utils'; + import Minus from '$lib/components/icons/Minus.svelte'; + import Plus from '$lib/components/icons/Plus.svelte'; + import Switch from '$lib/components/common/Switch.svelte'; + import ManageFloatingActionButtonsModal from './Interface/ManageFloatingActionButtonsModal.svelte'; const dispatch = createEventDispatcher(); const i18n = getContext('i18n'); @@ -84,119 +88,14 @@ let iframeSandboxAllowSameOrigin = false; let iframeSandboxAllowForms = false; - const toggleExpandDetails = () => { - expandDetails = !expandDetails; - saveSettings({ expandDetails }); - }; - - const toggleCollapseCodeBlocks = () => { - collapseCodeBlocks = !collapseCodeBlocks; - saveSettings({ collapseCodeBlocks }); - }; - - const toggleSplitLargeChunks = async () => { - splitLargeChunks = !splitLargeChunks; - saveSettings({ splitLargeChunks: splitLargeChunks }); - }; - - const toggleHighContrastMode = async () => { - highContrastMode = !highContrastMode; - saveSettings({ highContrastMode: highContrastMode }); - }; - - const togglePromptAutocomplete = async () => { - promptAutocomplete = !promptAutocomplete; - saveSettings({ promptAutocomplete: promptAutocomplete }); - }; - - const toggleScrollOnBranchChange = async () => { - scrollOnBranchChange = !scrollOnBranchChange; - saveSettings({ scrollOnBranchChange: scrollOnBranchChange }); - }; - - const toggleWidescreenMode = async () => { - widescreenMode = !widescreenMode; - saveSettings({ widescreenMode: widescreenMode }); - }; - - const toggleChatBubble = async () => { - chatBubble = !chatBubble; - saveSettings({ chatBubble: chatBubble }); - }; + let showManageFloatingActionButtonsModal = false; const toggleLandingPageMode = async () => { landingPageMode = landingPageMode === '' ? 'chat' : ''; saveSettings({ landingPageMode: landingPageMode }); }; - const toggleShowUpdateToast = async () => { - showUpdateToast = !showUpdateToast; - saveSettings({ showUpdateToast: showUpdateToast }); - }; - - const toggleNotificationSound = async () => { - notificationSound = !notificationSound; - saveSettings({ notificationSound: notificationSound }); - }; - - const toggleNotificationSoundAlways = async () => { - notificationSoundAlways = !notificationSoundAlways; - saveSettings({ notificationSoundAlways: notificationSoundAlways }); - }; - - const toggleShowChangelog = async () => { - showChangelog = !showChangelog; - saveSettings({ showChangelog: showChangelog }); - }; - - const toggleShowUsername = async () => { - showUsername = !showUsername; - saveSettings({ showUsername: showUsername }); - }; - - const toggleEmojiInCall = async () => { - showEmojiInCall = !showEmojiInCall; - saveSettings({ showEmojiInCall: showEmojiInCall }); - }; - - const toggleDisplayMultiModelResponsesInTabs = async () => { - displayMultiModelResponsesInTabs = !displayMultiModelResponsesInTabs; - saveSettings({ displayMultiModelResponsesInTabs }); - }; - - const toggleVoiceInterruption = async () => { - voiceInterruption = !voiceInterruption; - saveSettings({ voiceInterruption: voiceInterruption }); - }; - - const toggleImageCompression = async () => { - imageCompression = !imageCompression; - saveSettings({ imageCompression }); - }; - - const toggleImageCompressionInChannels = async () => { - imageCompressionInChannels = !imageCompressionInChannels; - saveSettings({ imageCompressionInChannels }); - }; - - const toggleChatFadeStreamingText = async () => { - chatFadeStreamingText = !chatFadeStreamingText; - saveSettings({ chatFadeStreamingText: chatFadeStreamingText }); - }; - - const toggleHapticFeedback = async () => { - hapticFeedback = !hapticFeedback; - saveSettings({ hapticFeedback: hapticFeedback }); - }; - - const toggleStylizedPdfExport = async () => { - stylizedPdfExport = !stylizedPdfExport; - saveSettings({ stylizedPdfExport: stylizedPdfExport }); - }; - const toggleUserLocation = async () => { - userLocation = !userLocation; - if (userLocation) { const position = await getUserPosition().catch((error) => { toast.error(error.message); @@ -215,7 +114,6 @@ }; const toggleTitleAutoGenerate = async () => { - titleAutoGenerate = !titleAutoGenerate; saveSettings({ title: { ...$settings.title, @@ -224,51 +122,6 @@ }); }; - const toggleAutoFollowUps = async () => { - autoFollowUps = !autoFollowUps; - saveSettings({ autoFollowUps }); - }; - - const toggleAutoTags = async () => { - autoTags = !autoTags; - saveSettings({ autoTags }); - }; - - const toggleDetectArtifacts = async () => { - detectArtifacts = !detectArtifacts; - saveSettings({ detectArtifacts }); - }; - - const toggleRichTextInput = async () => { - richTextInput = !richTextInput; - saveSettings({ richTextInput }); - }; - - const toggleShowFormattingToolbar = async () => { - showFormattingToolbar = !showFormattingToolbar; - saveSettings({ showFormattingToolbar }); - }; - - const toggleInsertPromptAsRichText = async () => { - insertPromptAsRichText = !insertPromptAsRichText; - saveSettings({ insertPromptAsRichText }); - }; - - const toggleKeepFollowUpPrompts = async () => { - keepFollowUpPrompts = !keepFollowUpPrompts; - saveSettings({ keepFollowUpPrompts }); - }; - - const toggleInsertFollowUpPrompt = async () => { - insertFollowUpPrompt = !insertFollowUpPrompt; - saveSettings({ insertFollowUpPrompt }); - }; - - const toggleLargeTextAsFile = async () => { - largeTextAsFile = !largeTextAsFile; - saveSettings({ largeTextAsFile }); - }; - const toggleResponseAutoCopy = async () => { const permission = await navigator.clipboard .readText() @@ -279,12 +132,10 @@ return ''; }); - console.log(permission); - if (permission === 'granted') { - responseAutoCopy = !responseAutoCopy; saveSettings({ responseAutoCopy: responseAutoCopy }); } else { + responseAutoCopy = false; toast.error( $i18n.t( 'Clipboard write permission denied. Please check your browser settings to grant the necessary access.' @@ -293,11 +144,6 @@ } }; - const toggleCopyFormatted = async () => { - copyFormatted = !copyFormatted; - saveSettings({ copyFormatted }); - }; - const toggleChangeChatDirection = async () => { if (chatDirection === 'auto') { chatDirection = 'LTR'; @@ -326,21 +172,6 @@ saveSettings({ webSearch: webSearch }); }; - const toggleIframeSandboxAllowSameOrigin = async () => { - iframeSandboxAllowSameOrigin = !iframeSandboxAllowSameOrigin; - saveSettings({ iframeSandboxAllowSameOrigin }); - }; - - const toggleIframeSandboxAllowForms = async () => { - iframeSandboxAllowForms = !iframeSandboxAllowForms; - saveSettings({ iframeSandboxAllowForms }); - }; - - const toggleShowFloatingActionButtons = async () => { - showFloatingActionButtons = !showFloatingActionButtons; - saveSettings({ showFloatingActionButtons }); - }; - onMount(async () => { titleAutoGenerate = $settings?.title?.auto ?? true; autoTags = $settings?.autoTags ?? true; @@ -411,6 +242,15 @@ }); + { + floatingActionButtons = buttons; + saveSettings({ floatingActionButtons }); + }} +/> +
-

{$i18n.t('UI')}

+

{$i18n.t('UI')}

@@ -457,18 +297,166 @@ {$i18n.t('High Contrast Mode')} ({$i18n.t('Beta')})
+
+ { + saveSettings({ highContrastMode }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Notification Sound')} +
+ +
+ { + saveSettings({ notificationSound }); + }} + /> +
+
+
+ + {#if notificationSound} +
+
+
+ {$i18n.t('Always Play Notification Sound')} +
+ +
+ { + saveSettings({ notificationSoundAlways }); + }} + /> +
+
+
+ {/if} + +
+
+
{$i18n.t('Allow User Location')}
+ +
+ { + toggleUserLocation(); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Haptic Feedback')} ({$i18n.t('Android')}) +
+ +
+ { + saveSettings({ hapticFeedback }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Copy Formatted Text')} +
+ +
+ { + saveSettings({ copyFormatted }); + }} + /> +
+
+
+ + {#if $user?.role === 'admin'} +
+
+
+ {$i18n.t('Toast notifications for new updates')} +
+ +
+ { + saveSettings({ showUpdateToast }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t(`Show "What's New" modal on login`)} +
+ +
+ { + saveSettings({ showChangelog }); + }} + /> +
+
+
+ {/if} + +
{$i18n.t('Chat')}
+ +
+
+
+ {$i18n.t('Chat direction')} +
+
@@ -497,77 +485,6 @@
-
-
-
- {$i18n.t('Chat Bubble UI')} -
- - -
-
- - {#if !$settings.chatBubble} -
-
-
- {$i18n.t('Display the username instead of You in the Chat')} -
- - -
-
- {/if} - -
-
-
- {$i18n.t('Chat direction')} -
- - -
-
-
@@ -596,193 +513,330 @@
+
+
+
+ {$i18n.t('Chat Bubble UI')} +
+ +
+ { + saveSettings({ chatBubble }); + }} + /> +
+
+
+ + {#if !$settings.chatBubble} +
+
+
+ {$i18n.t('Display the username instead of You in the Chat')} +
+ +
+ { + saveSettings({ showUsername }); + }} + /> +
+
+
+ {/if} +
{$i18n.t('Widescreen Mode')}
- -
-
- -
-
-
- {$i18n.t('Notification Sound')} -
- - -
-
- - {#if notificationSound} -
-
-
- {$i18n.t('Always Play Notification Sound')} -
- - + />
- {/if} - -
-
-
{$i18n.t('Allow User Location')}
- - -
-
- {$i18n.t('Haptic Feedback')} ({$i18n.t('Android')}) +
+ {$i18n.t('Fade Effect for Streaming Text')}
- +
+ { + saveSettings({ chatFadeStreamingText }); + }} + /> +
-
- {$i18n.t('Copy Formatted Text')} +
+ {$i18n.t('Title Auto-Generation')} +
+ +
+ { + toggleTitleAutoGenerate(); + }} + /> +
+
+
+ +
+
+
{$i18n.t('Follow-Up Auto-Generation')}
+ +
+ { + saveSettings({ autoFollowUps }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Chat Tags Auto-Generation')} +
+ +
+ { + saveSettings({ autoTags }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Auto-Copy Response to Clipboard')} +
+ +
+ { + toggleResponseAutoCopy(); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Keep Follow-Up Prompts in Chat')} +
+ +
+ { + saveSettings({ keepFollowUpPrompts }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Insert Follow-Up Prompt to Input')} +
+ +
+ { + saveSettings({ insertFollowUpPrompt }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Always Collapse Code Blocks')} +
+ +
+ { + saveSettings({ collapseCodeBlocks }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Always Expand Details')} +
+ +
+ { + saveSettings({ expandDetails }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Display Multi-model Responses in Tabs')} +
+ +
+ { + saveSettings({ displayMultiModelResponsesInTabs }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Scroll On Branch Change')} +
+ +
+ { + saveSettings({ scrollOnBranchChange }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Stylized PDF Export')} +
+ +
+ { + saveSettings({ stylizedPdfExport }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Floating Action Buttons')} +
+ +
+ {#if showFloatingActionButtons} + + {/if} + + { + saveSettings({ showFloatingActionButtons }); + }} + /> +
+
+
+ +
+
+
+ {$i18n.t('Web Search in Chat')}
- {#if $user?.role === 'admin'} -
-
-
- {$i18n.t('Toast notifications for new updates')} -
- - -
-
- -
-
-
- {$i18n.t(`Show "What's New" modal on login`)} -
- - -
-
- {/if} - -
{$i18n.t('Input')}
+
{$i18n.t('Input')}
@@ -813,20 +867,15 @@ {$i18n.t('Rich Text Input for Chat')}
- +
+ { + saveSettings({ richTextInput }); + }} + /> +
@@ -837,20 +886,15 @@ {$i18n.t('Show Formatting Toolbar')}
- +
+ { + saveSettings({ showFormattingToolbar }); + }} + /> +
@@ -860,20 +904,15 @@ {$i18n.t('Insert Prompt as Rich Text')} - +
+ { + saveSettings({ insertPromptAsRichText }); + }} + /> +
@@ -884,20 +923,15 @@ {$i18n.t('Prompt Autocompletion')} - +
+ { + saveSettings({ promptAutocomplete }); + }} + /> +
{/if} @@ -909,114 +943,19 @@ {$i18n.t('Paste Large Text as File')} - - - - -
{$i18n.t('Chat')}
- -
-
-
- {$i18n.t('Title Auto-Generation')} +
+ { + saveSettings({ largeTextAsFile }); + }} + />
- -
-
-
-
{$i18n.t('Follow-Up Auto-Generation')}
- - -
-
- -
-
-
- {$i18n.t('Chat Tags Auto-Generation')} -
- - -
-
- -
-
-
- {$i18n.t('Web Search in Chat')} -
- - -
-
+
{$i18n.t('Artifacts')}
@@ -1024,227 +963,15 @@ {$i18n.t('Detect Artifacts Automatically')}
- -
-
- -
-
-
- {$i18n.t('Auto-Copy Response to Clipboard')} +
+ { + saveSettings({ detectArtifacts }); + }} + />
- - -
-
- -
-
-
- {$i18n.t('Fade Effect for Streaming Text')} -
- - -
-
- -
-
-
- {$i18n.t('Keep Follow-Up Prompts in Chat')} -
- - -
-
- -
-
-
- {$i18n.t('Insert Follow-Up Prompt to Input')} -
- - -
-
- -
-
-
- {$i18n.t('Always Collapse Code Blocks')} -
- - -
-
- -
-
-
- {$i18n.t('Always Expand Details')} -
- - -
-
- -
-
-
- {$i18n.t('Display Multi-model Responses in Tabs')} -
- - -
-
- -
-
-
- {$i18n.t('Scroll On Branch Change')} -
- - -
-
- -
-
-
- {$i18n.t('Show Floating Action Buttons')} -
- -
@@ -1254,20 +981,15 @@ {$i18n.t('iframe Sandbox Allow Same Origin')}
- +
+ { + saveSettings({ iframeSandboxAllowSameOrigin }); + }} + /> +
@@ -1277,66 +999,33 @@ {$i18n.t('iframe Sandbox Allow Forms')} - - - - -
-
-
- {$i18n.t('Stylized PDF Export')} +
+ { + saveSettings({ iframeSandboxAllowForms }); + }} + />
- -
-
{$i18n.t('Voice')}
+
{$i18n.t('Voice')}
{$i18n.t('Allow Voice Interruption in Call')}
- +
+ { + saveSettings({ voiceInterruption }); + }} + /> +
@@ -1346,24 +1035,19 @@ {$i18n.t('Display Emoji in Call')}
- +
+ { + saveSettings({ showEmojiInCall }); + }} + /> +
-
{$i18n.t('File')}
+
{$i18n.t('File')}
@@ -1371,20 +1055,15 @@ {$i18n.t('Image Compression')}
- +
+ { + saveSettings({ imageCompression }); + }} + /> +
@@ -1395,7 +1074,7 @@ {$i18n.t('Image Max Compression Size')} -
+
@@ -1426,20 +1105,15 @@ {$i18n.t('Compress Images in Channels')}
- +
+ { + saveSettings({ imageCompressionInChannels }); + }} + /> +
{/if} diff --git a/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte b/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte new file mode 100644 index 0000000000..6de35f73f1 --- /dev/null +++ b/src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte @@ -0,0 +1,170 @@ + + + +
+
+

+ {$i18n.t('Action Buttons')} +

+ +
+ +
+
+ { + e.preventDefault(); + submitHandler(); + }} + > +
+
+
Actions
+ +
+ + + {#if floatingActionButtons !== null} + + {/if} +
+
+ + {#if floatingActionButtons === null || floatingActionButtons.length === 0} +
+ {$i18n.t('Default action buttons will be used.')} +
+ {:else} + {#each floatingActionButtons as button (button.id)} +
+
+ + + +
+ +
+