From fef3c09223248aeace49be908f44b5752a029ff3 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 15:23:13 +0200 Subject: [PATCH 01/27] feat(chat-full-width): Initiate chat full-width feature (#1) - Start working on the chat full-width feature - Implement basic UI with switch checkboxes Changes summary: - Initiated the development of the chat full-width feature: - Implemented a basic UI with switch checkboxes to toggle the full-width mode for chats. --- src/js/app/components/renderSwitch.js | 20 ++++ src/js/app/floatingBtn.js | 6 +- src/js/app/mainAssets.js | 29 ++++++ ...{_gpth-v2.scss => _gpth-floating-btn.scss} | 0 .../{theme-manager => }/_gpth-settings.scss | 20 +--- src/sass/gpthemes/_notifications.scss | 66 ------------- src/sass/gpthemes/gpth-index.scss | 13 +++ .../theme-manager/components/_switch.scss | 96 +++++++++++++++++++ .../{layouts => sections}/_footer.scss | 0 .../{layouts => sections}/_header.scss | 0 .../{layouts => sections}/_main.scss | 0 src/sass/index.scss | 4 +- 12 files changed, 163 insertions(+), 91 deletions(-) create mode 100644 src/js/app/components/renderSwitch.js create mode 100644 src/js/app/mainAssets.js rename src/sass/gpthemes/{_gpth-v2.scss => _gpth-floating-btn.scss} (100%) rename src/sass/gpthemes/{theme-manager => }/_gpth-settings.scss (70%) delete mode 100644 src/sass/gpthemes/_notifications.scss create mode 100644 src/sass/gpthemes/gpth-index.scss create mode 100644 src/sass/gpthemes/theme-manager/components/_switch.scss rename src/sass/gpthemes/theme-manager/{layouts => sections}/_footer.scss (100%) rename src/sass/gpthemes/theme-manager/{layouts => sections}/_header.scss (100%) rename src/sass/gpthemes/theme-manager/{layouts => sections}/_main.scss (100%) diff --git a/src/js/app/components/renderSwitch.js b/src/js/app/components/renderSwitch.js new file mode 100644 index 0000000..9a5b0dc --- /dev/null +++ b/src/js/app/components/renderSwitch.js @@ -0,0 +1,20 @@ +function renderSwitchOption({ inputId, isChecked = false, icon, textTitle, textSubtitle }) { + return ` + ` +} + +export { renderSwitchOption } diff --git a/src/js/app/floatingBtn.js b/src/js/app/floatingBtn.js index 3e73a6e..c27ddb5 100644 --- a/src/js/app/floatingBtn.js +++ b/src/js/app/floatingBtn.js @@ -6,6 +6,7 @@ import { hexToHSL } from '../utils/hexToHSL' // import { fontHtmlCode, addFontsEventHandlers } from './customFonts' import { fontHtmlCode, handleFontsListeners } from './mainFonts' +import { assetsHtmlCode, handleAssetsListeners } from './mainAssets' // console.log(fontHtmlCode) // let isOptionsShown = false @@ -203,8 +204,7 @@ function renderSettings() { @@ -225,8 +225,8 @@ function renderSettings() { $settings.querySelector('#resetAllSettings').addEventListener('click', resetAllSettings) - // addFontsEventHandlers() handleFontsListeners() + handleAssetsListeners() } function openSettings() { diff --git a/src/js/app/mainAssets.js b/src/js/app/mainAssets.js new file mode 100644 index 0000000..96fbedc --- /dev/null +++ b/src/js/app/mainAssets.js @@ -0,0 +1,29 @@ +import browser from 'webextension-polyfill' +import { renderSwitchOption } from './components/renderSwitch' + +let assetsHtmlCode = ` +
+ ${renderSwitchOption({ + inputId: 'gpth-full-width', + isChecked: false, + icon: '🖥️', + textTitle: 'Chat Full Width', + textSubtitle: 'Make the chat bubbles to take the full width', + // textSubtitle: 'Make the chat', + })} + ${renderSwitchOption({ + inputId: 'gpth-auto-full-width', + isChecked: true, + icon: '🚗', + textTitle: 'Auto Chat Full Width', + // textSubtitle: 'Automatic a', + textSubtitle: 'Automatic make chat full width when the sidebar is collapsed, and vice-versa', + })} +
+` + +function handleAssetsListeners() { + console.log('handleAssetsListeners() called') +} + +export { assetsHtmlCode, handleAssetsListeners } diff --git a/src/sass/gpthemes/_gpth-v2.scss b/src/sass/gpthemes/_gpth-floating-btn.scss similarity index 100% rename from src/sass/gpthemes/_gpth-v2.scss rename to src/sass/gpthemes/_gpth-floating-btn.scss diff --git a/src/sass/gpthemes/theme-manager/_gpth-settings.scss b/src/sass/gpthemes/_gpth-settings.scss similarity index 70% rename from src/sass/gpthemes/theme-manager/_gpth-settings.scss rename to src/sass/gpthemes/_gpth-settings.scss index 25b0f05..25c2c44 100644 --- a/src/sass/gpthemes/theme-manager/_gpth-settings.scss +++ b/src/sass/gpthemes/_gpth-settings.scss @@ -1,26 +1,15 @@ -@import 'components/_colorpicker'; -@import 'layouts/_header'; -@import 'components/_tabs'; -@import 'components/_cards'; -@import 'components/_fonts'; -@import 'components/_error-msg'; - .gpth-settings { overflow: clip; --top: calc(var(--h-header) + 0.5rem + 3rem); --right: 1.3rem; --shadow-color: hsla(var(--accent-hsl) / 0.09); --shadow-values: inset 0 0 20px 10px; - // @extend [role='dialog']; opacity: 0; pointer-events: none; padding: 2.2rem 2.8rem; border-radius: var(--br-dialog); top: var(--top); right: var(--right); - // width: 26rem; - // height: 50vh; - // max-width: 30rem; width: clamp(25rem, 25vw, 30rem); max-height: 70vh; transform: translateX(calc(100% + 1.5rem)) !important; @@ -52,11 +41,4 @@ max-height: 70vh; padding: 2rem; } -} - -// html.light { -// .gpth-settings { -// // background-color: hsla(var(--accent-h) var(--surface-s) var(--surface-l) / 0.7); -// background-color: hsla(0 0% calc(var(--surface-l) / 1.18) / 0.7); -// } -// } \ No newline at end of file +} \ No newline at end of file diff --git a/src/sass/gpthemes/_notifications.scss b/src/sass/gpthemes/_notifications.scss deleted file mode 100644 index 92cc15d..0000000 --- a/src/sass/gpthemes/_notifications.scss +++ /dev/null @@ -1,66 +0,0 @@ -.gpth-notification { - font-size: 0.9rem; - position: fixed; - top: 3rem; - left: 50%; - transform: translateX(-50%) translateY(-10%); - visibility: hidden; - opacity: 0; - width: clamp(80vw, 40vw, 40rem); - background-color: hsla(var(--accent-hsl) / 0.2); - backdrop-filter: blur(1.5rem); - border: 1px solid hsla(var(--accent-hsl) / 0.2); - z-index: calc(var(--z-modal) - 4); - pointer-events: none; - display: grid; - gap: 1rem; - padding: var(--p-dialog); - border-radius: var(--br-dialog); - overflow-y: clip; - transition: opacity 0.3s linear, transform 0.3s linear; - - h2, - strong { - color: var(--c-accent); - } - - &--open { - transform: translateX(-50%); - visibility: visible; - opacity: 1; - pointer-events: all; - } - - ul { - list-style-type: disc; - padding: calc(var(--p-btn) * 0.5) calc(var(--p-btn) * 2); - - li { - padding: 0.2rem 0; - } - } - - h3 { - font-size: 1.2em; - } - - &__version { - background-color: var(--c-accent); - color: var(--c-on-accent); - border-radius: calc(var(--br-btn) * 0.5); - font-size: 0.7em; - } - - &__changes { - overflow-y: scroll; - height: 50vh; - } - - footer { - a { - font-weight: bold; - @extend %link_hover_underlined; - // color: var(--c-on-accent) !important; - } - } -} \ No newline at end of file diff --git a/src/sass/gpthemes/gpth-index.scss b/src/sass/gpthemes/gpth-index.scss new file mode 100644 index 0000000..439cebc --- /dev/null +++ b/src/sass/gpthemes/gpth-index.scss @@ -0,0 +1,13 @@ +@import 'theme-manager/components/_colorpicker'; +@import 'theme-manager/components/_tabs'; +@import 'theme-manager/components/_cards'; +@import 'theme-manager/components/_error-msg'; +@import 'theme-manager/components/_fonts'; +@import 'theme-manager/components/_switch'; + +@import 'theme-manager/sections/_header'; +@import 'theme-manager/sections/_main'; +@import 'theme-manager/sections/_header'; + +@import '_gpth-floating-btn'; +@import '_gpth-settings'; \ No newline at end of file diff --git a/src/sass/gpthemes/theme-manager/components/_switch.scss b/src/sass/gpthemes/theme-manager/components/_switch.scss new file mode 100644 index 0000000..f1d3be0 --- /dev/null +++ b/src/sass/gpthemes/theme-manager/components/_switch.scss @@ -0,0 +1,96 @@ +.gpth-switch { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 2rem; + cursor: pointer; + font-size: 1rem; + gap: 0.8rem; + + &__icon { + --icon-size: 3rem; + width: var(--icon-size); + height: var(--icon-size); + display: grid; + place-items: center; + border-radius: 1rem; + background-color: hsla(var(--accent-hsl) / 0.2); + + i { + font-size: 1em; + color: var(--c-accent); + } + } + + &__text { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.3rem; + + .title { + font-size: 0.9em; + font-weight: bold; + color: var(--c-accent); + text-transform: uppercase; + } + + .subtitle { + font-size: 0.8em; + line-height: 1.2; + } + } + + &__checkbox { + --chb-w: 3.2rem; + --chb-h: 1.8rem; + --chb-edge-gap: 0.25rem; + --chb-slider-circle-size: calc(var(--chb-h) - 2 * var(--chb-edge-gap)); + position: relative; + display: inline-block; + width: var(--chb-w); + height: var(--chb-h); + + input { + opacity: 0; + width: 0; + height: 0; + } + + .slider { + display: flex; + align-items: center; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: hsla(var(--accent-hsl) / 0.3); + border: 2px solid hsla(var(--accent-hsl) / 0.5); + transition: .4s; + border-radius: var(--chb-w); + + &::before { + position: absolute; + content: ""; + height: var(--chb-slider-circle-size); + aspect-ratio: 1/1; + left: var(--chb-edge-gap); + background-color: hsla(var(--accent-hsl) / 0.5); + transition: .4s $easeInOutCirc; + border-radius: 50%; + } + } + + input:checked + .slider { + background-color: var(--c-accent); + border: transparent !important; + + &::before { + transform: translateX(calc(var(--chb-w) - 145%)); + background-color: var(--c-on-accent); + } + } + } +} \ No newline at end of file diff --git a/src/sass/gpthemes/theme-manager/layouts/_footer.scss b/src/sass/gpthemes/theme-manager/sections/_footer.scss similarity index 100% rename from src/sass/gpthemes/theme-manager/layouts/_footer.scss rename to src/sass/gpthemes/theme-manager/sections/_footer.scss diff --git a/src/sass/gpthemes/theme-manager/layouts/_header.scss b/src/sass/gpthemes/theme-manager/sections/_header.scss similarity index 100% rename from src/sass/gpthemes/theme-manager/layouts/_header.scss rename to src/sass/gpthemes/theme-manager/sections/_header.scss diff --git a/src/sass/gpthemes/theme-manager/layouts/_main.scss b/src/sass/gpthemes/theme-manager/sections/_main.scss similarity index 100% rename from src/sass/gpthemes/theme-manager/layouts/_main.scss rename to src/sass/gpthemes/theme-manager/sections/_main.scss diff --git a/src/sass/index.scss b/src/sass/index.scss index 33423a0..4228848 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -46,6 +46,4 @@ // @import 'layouts/_old-ui'; @import 'layouts/_old-ui-index'; -@import 'gpthemes/_gpth-v2'; -@import 'gpthemes/_notifications'; -@import 'gpthemes/theme-manager/_gpth-settings'; \ No newline at end of file +@import 'gpthemes/gpth-index'; \ No newline at end of file From c61375112a56aa1c276a176e31a12c676a7dc71a Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 16:34:35 +0200 Subject: [PATCH 02/27] feat(chat-full-width): Add the full-width chat toggle logic - Improve the full-width chat toggle by setting the `chat-bubble-full-width` class on checked - Note: Saving the setting for future page loads and across different pages is not yet implemented Changes summary: - Improved the full-width chat toggle behavior: - Set the `chat-bubble-full-width` class on checked, providing a visual indication of the selected mode. - Note: The setting is not yet saved for future page loads or across different pages. --- src/js/app/mainAssets.js | 39 +++++++++++++++++++++++------ src/sass/elements/_right--main.scss | 35 +++++++++++++++++++++++++- 2 files changed, 65 insertions(+), 9 deletions(-) diff --git a/src/js/app/mainAssets.js b/src/js/app/mainAssets.js index 96fbedc..2ce20d8 100644 --- a/src/js/app/mainAssets.js +++ b/src/js/app/mainAssets.js @@ -11,19 +11,42 @@ let assetsHtmlCode = ` textSubtitle: 'Make the chat bubbles to take the full width', // textSubtitle: 'Make the chat', })} - ${renderSwitchOption({ - inputId: 'gpth-auto-full-width', - isChecked: true, - icon: '🚗', - textTitle: 'Auto Chat Full Width', - // textSubtitle: 'Automatic a', - textSubtitle: 'Automatic make chat full width when the sidebar is collapsed, and vice-versa', - })} ` +/* ${renderSwitchOption({ + inputId: 'gpth-auto-full-width', + isChecked: true, + icon: '🚗', + textTitle: 'Auto Chat Full Width', + // textSubtitle: 'Automatic a', + textSubtitle: 'Automatic make chat full width when the sidebar is collapsed, and vice-versa', +})} */ + +function toggleChatFullWidth(e) { + const mainConversation = document.querySelector("main:has([data-testid^='conversation-turn-'])") + + console.log(e.target.checked, e.target.id) + console.log(mainConversation) + + if (!mainConversation) return + + if (e.target.checked && !mainConversation.classList.contains('gpth-chat-bubble-full-width')) { + mainConversation?.classList.add('gpth-chat-bubble-full-width') + } else { + mainConversation?.classList.remove('gpth-chat-bubble-full-width') + } +} + function handleAssetsListeners() { console.log('handleAssetsListeners() called') + + const selectors = { + chatFullWidth: document.querySelector('.gpth-settings #gpth-full-width'), + // gpthAutoFullWidth: document.querySelector('.gpth-settings #gpth-auto-full-width'), + } + + selectors.chatFullWidth.addEventListener('change', toggleChatFullWidth) } export { assetsHtmlCode, handleAssetsListeners } diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss index f60c746..63c981f 100644 --- a/src/sass/elements/_right--main.scss +++ b/src/sass/elements/_right--main.scss @@ -36,14 +36,16 @@ main [role='presentation'] { // margin-bottom: var(--mb-chat-txt) !important; // } + /* @ === RIGHT - CHATS BUBBLES ===*/ main [data-testid^='conversation-turn-'] { - /* Edit icon in user chat for example. Edit state user chat bg */ --main-surface-tertiary: var(--c-surface-3) !important; // --main-surface-tertiary: hsla(var(--accent-hsl) / 0.5) !important; margin-bottom: var(--mb-chat-bubble) !important; + + /* Horizontal gap from chat bubble to screen-edge */ & > div { @@ -393,4 +395,35 @@ html[data-gptheme='oled'] main [data-testid^='conversation-turn-']:has([data-mes background-color: var(--c-surface-2); } } +} + + +main [data-testid^='conversation-turn-'] { + + .mx-auto.flex.flex-1.text-base, + &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { + transition: 0.3s ease-in-out; + } +} + +main.gpth-chat-bubble-full-width { + [data-testid^='conversation-turn-'] { + padding-left: 4vw !important; + padding-right: 4vw !important; + --max-w-chat-bubble: 100% !important; + + .mx-auto.flex.flex-1.text-base { + max-width: var(--max-w-chat-bubble) !important; + } + + &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { + width: var(--max-w-chat-bubble) !important; + max-width: var(--max-w-chat-bubble) !important; + } + } + + // &:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { + // // --max-w-chat-bubble: 100% !important; + // max-width: 100% !important; + // } } \ No newline at end of file From 84a01c05fc20e056a6e2f7dea3aa5e69fa56ca46 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 18:18:18 +0200 Subject: [PATCH 03/27] refactor(chat-full-width): Improve toggling full-w by utilizing a CSS var instead of a class - Improve the logic for toggling full-width chat bubbles by utilizing a CSS variable instead of a class - This approach ensures that the setting is correctly applied only when chat bubbles are present, avoiding potential errors Changes summary: - Optimized the logic for toggling full-width chat bubbles: - Utilize a CSS variable (`--chat-bubble-full-width`) to control the full-width setting, providing a more robust and error-free implementation. - This approach ensures that the setting is correctly applied only when chat bubbles are present on the page, avoiding potential errors and improving the user experience. --- src/js/app/mainAssets.js | 49 +++++++++++++++---- src/sass/abstract/_vars.scss | 28 +++++------ .../elements/_chats-textarea-max-width.scss | 11 +++-- src/sass/elements/_right--main.scss | 38 +++++++++----- 4 files changed, 82 insertions(+), 44 deletions(-) diff --git a/src/js/app/mainAssets.js b/src/js/app/mainAssets.js index 2ce20d8..7136c98 100644 --- a/src/js/app/mainAssets.js +++ b/src/js/app/mainAssets.js @@ -1,6 +1,12 @@ import browser from 'webextension-polyfill' import { renderSwitchOption } from './components/renderSwitch' +const DEFAULTS = { + w_chat_user: 'initial', + w_chat_gpt: '48rem', + w_prompt_textarea: '48rem', +} + let assetsHtmlCode = `
${renderSwitchOption({ @@ -23,20 +29,45 @@ let assetsHtmlCode = ` textSubtitle: 'Automatic make chat full width when the sidebar is collapsed, and vice-versa', })} */ -function toggleChatFullWidth(e) { - const mainConversation = document.querySelector("main:has([data-testid^='conversation-turn-'])") - - console.log(e.target.checked, e.target.id) - console.log(mainConversation) +// function toggleChatFullWidth(e) { +// /* TODO: FIX THIS, this is not good logic when we are not on conversation page, so we need to fix this by editing the CSS var and not adding the class on main */ +// const mainConversation = document.querySelector("main:has([data-testid^='conversation-turn-'])") - if (!mainConversation) return +// if (!mainConversation) return alert('No main conversation found') - if (e.target.checked && !mainConversation.classList.contains('gpth-chat-bubble-full-width')) { - mainConversation?.classList.add('gpth-chat-bubble-full-width') +// if (e.target.checked && !mainConversation.classList.contains('gpth-chat-bubble-full-width')) { +// mainConversation?.classList.add('gpth-chat-bubble-full-width') +// } else { +// mainConversation?.classList.remove('gpth-chat-bubble-full-width') +// } +// } +function toggleChatFullWidth(e) { + if (e.target.checked) { + applySettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) + // document.documentElement.style.setProperty(`--w_chat_gpt`, '100%') + // document.documentElement.style.setProperty(`--w_chat_user`, '100%') } else { - mainConversation?.classList.remove('gpth-chat-bubble-full-width') + // document.documentElement.style.setProperty(`--w_chat_gpt`, DEFAULTS.w_chat_gpt) + // document.documentElement.style.setProperty(`--w_chat_user`, DEFAULTS.w_chat_user) + applySettings({ w_chat_user: DEFAULTS.w_chat_user, w_chat_gpt: DEFAULTS.w_chat_gpt }) } } +function applySettings(settings) { + Object.entries(settings).forEach(([key, value]) => { + document.documentElement.style.setProperty(`--${key}`, value) + + console.log(key, getComputedStyle(document.documentElement).getPropertyValue(`--${key}`)) + }) +} + +// Function to save settings to Chrome Storage +// async function saveSettings(settings) { +// try { +// await browser.storage.sync.set(settings) +// } catch (error) { +// console.error('Failed to save settings:', error) +// } +// } function handleAssetsListeners() { console.log('handleAssetsListeners() called') diff --git a/src/sass/abstract/_vars.scss b/src/sass/abstract/_vars.scss index 237043e..a69e133 100644 --- a/src/sass/abstract/_vars.scss +++ b/src/sass/abstract/_vars.scss @@ -12,9 +12,13 @@ --lineHeight: 28; /* ? --- Widths and Heights --- */ + --min-w-btn: 5.5rem; --h-header: calc(3.5rem + 0.5rem + 0.375rem); - --max-w-chat-bubble: 48rem; --w-scrollbar: 0.22rem; + // --max-w-chat-bubble: 48rem; + --w_chat_user: initial; + --w_chat_gpt: 48rem; + --w_prompt_textarea: var(--w_chat_gpt); /* ? --- Border-radius --- */ --br: 1rem; @@ -32,6 +36,7 @@ /* ? --- Paddings --- */ --p-chat-bubble: 1.2rem; + --px-chat-bubble-edge-gap: 4vw; --p-contextmenu: 0.8rem; --p-contextmenu-item: 0.9rem 1rem; --p-prompt-textarea: 0.7rem; @@ -56,9 +61,6 @@ --blur-sticky: 20px; --blur-modal: 8px; - /* ? --- Width --- */ - --min-w-btn: 5.5rem; - /* ? --- Shadow things --- */ --box-shadow-values: 0px 0px 100px 0px; @@ -109,30 +111,22 @@ - "ChatGPT 3.5 - Fastest" in 4o menu when hover on it in chat bubbles*/ --text-quaternary: var(--c-subtext-2) !important; --text-error: var(--c-danger) !important; + --box-shadow-primary: inset 0 -20px 80px -20px #ffffff1f; @include dev(tab) { - // --h-header: 40px; --p-chat-bubble: .8rem; --br-chat-bubble: calc(var(--br) * 1.55); - --p-contextmenu: .5rem; - // --p-contextmenu-item: 0.9rem 1rem; --p-prompt-textarea: 0.5rem; - // --p-tooltips: 0.2rem; - // --p-btn: 0.7rem; - // --py-btn: 1rem; - // --px-btn: 1rem; - - // --p-sidebar-nav: 0.5rem; - // --p-sidebar-nav-a-new-chat: 1.8rem; - // --p-sidebar-nav-a: 0.6rem; --p-dialog: 0.3rem; --br-dialog: calc(var(--br) * 1.5); - // --br: .7rem; --p-sidebar-nav: 0.3rem; } - --box-shadow-primary: inset 0 -20px 80px -20px #ffffff1f; + @include dev(mob) { + --px-chat-bubble-edge-gap: 0.45rem; + } + // --color-error: #fe8bbb; // --color-three: #9e7aff; diff --git a/src/sass/elements/_chats-textarea-max-width.scss b/src/sass/elements/_chats-textarea-max-width.scss index 8b664e9..0d2faa4 100644 --- a/src/sass/elements/_chats-textarea-max-width.scss +++ b/src/sass/elements/_chats-textarea-max-width.scss @@ -1,19 +1,20 @@ main:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { // border: 1px solid red; - max-width: var(--max-w-chat-bubble) !important; + max-width: var(--w_prompt_textarea) !important; @include dev(laptop) { - --max-w-chat-bubble: 40rem; + --w_prompt_textarea: 40rem; // border-color: lightblue; } + // @include dev(tab-land) { - // --max-w-chat-bubble: 40rem; + // --w_prompt_textarea: 40rem; // border-color: lightpink; // } @include dev(big-desktop) { - --max-w-chat-bubble: 52rem; + --w_prompt_textarea: 52rem; // border-color: lightgreen; } -} +} \ No newline at end of file diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss index 63c981f..b8deffd 100644 --- a/src/sass/elements/_right--main.scss +++ b/src/sass/elements/_right--main.scss @@ -44,16 +44,26 @@ main [data-testid^='conversation-turn-'] { // --main-surface-tertiary: hsla(var(--accent-hsl) / 0.5) !important; margin-bottom: var(--mb-chat-bubble) !important; + .mx-auto.flex.flex-1.text-base, + &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { + transition: 0.3s ease-in-out; + } + .mx-auto.flex.flex-1.text-base { + // width: var(--w_chat_gpt) !important; + max-width: var(--w_chat_gpt) !important; + } /* Horizontal gap from chat bubble to screen-edge */ & > div { + padding-left: var(--px-chat-bubble-edge-gap); + padding-right: var(--px-chat-bubble-edge-gap); /* Original is px-4 or 1rem */ - @include dev(mob) { - padding-left: 0.45rem; - padding-right: 0.45rem; - } + // @include dev(mob) { + // padding-left: 0.45rem; + // padding-right: 0.45rem; + // } } /* RIGHT - CHATS BUBBLES DIV */ @@ -138,6 +148,8 @@ main [data-testid^='conversation-turn-'] { background-color: var(--c-bg-msg-user); padding: var(--p-chat-bubble) calc(var(--p-chat-bubble) * 1.2); border-radius: var(--br-chat-bubble) !important; + width: var(--w_chat_user) !important; + max-width: var(--w_chat_user) !important; } // } @@ -398,7 +410,7 @@ html[data-gptheme='oled'] main [data-testid^='conversation-turn-']:has([data-mes } -main [data-testid^='conversation-turn-'] { +/* main [data-testid^='conversation-turn-'] { .mx-auto.flex.flex-1.text-base, &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { @@ -408,22 +420,22 @@ main [data-testid^='conversation-turn-'] { main.gpth-chat-bubble-full-width { [data-testid^='conversation-turn-'] { - padding-left: 4vw !important; - padding-right: 4vw !important; - --max-w-chat-bubble: 100% !important; + --w_chat_gpt: 100% !important; + padding-left: var(--px-chat-bubble-edge-gap) !important; + padding-right: var(--px-chat-bubble-edge-gap) !important; .mx-auto.flex.flex-1.text-base { - max-width: var(--max-w-chat-bubble) !important; + max-width: var(--w_chat_gpt) !important; } &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { - width: var(--max-w-chat-bubble) !important; - max-width: var(--max-w-chat-bubble) !important; + width: var(--w_chat_gpt) !important; + max-width: var(--w_chat_gpt) !important; } } // &:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { - // // --max-w-chat-bubble: 100% !important; + // // --w_chat_gpt: 100% !important; // max-width: 100% !important; // } -} \ No newline at end of file +} */ \ No newline at end of file From 584c098aba14dd52b39438494937e03132094780 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 18:36:02 +0200 Subject: [PATCH 04/27] feat(chat-full-width): Save the full-width chat settings into storage - Save the full-width chat settings into storage to apply chosen settings across all pages and page reloads Changes summary: - Added the ability to persist the full-width chat settings: - Save the user's chosen settings into storage, ensuring that the selected full-width mode is applied consistently across all pages and retained during page reloads. --- src/js/app/mainAssets.js | 44 +++++++++++++++++++++-------- src/js/content.js | 3 ++ src/sass/elements/_right--main.scss | 8 ++++++ 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/js/app/mainAssets.js b/src/js/app/mainAssets.js index 7136c98..da011f9 100644 --- a/src/js/app/mainAssets.js +++ b/src/js/app/mainAssets.js @@ -42,14 +42,14 @@ let assetsHtmlCode = ` // } // } function toggleChatFullWidth(e) { + console.log('checked', e.target.checked) + if (e.target.checked) { applySettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) - // document.documentElement.style.setProperty(`--w_chat_gpt`, '100%') - // document.documentElement.style.setProperty(`--w_chat_user`, '100%') + saveSettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) } else { - // document.documentElement.style.setProperty(`--w_chat_gpt`, DEFAULTS.w_chat_gpt) - // document.documentElement.style.setProperty(`--w_chat_user`, DEFAULTS.w_chat_user) applySettings({ w_chat_user: DEFAULTS.w_chat_user, w_chat_gpt: DEFAULTS.w_chat_gpt }) + saveSettings({ w_chat_user: DEFAULTS.w_chat_user, w_chat_gpt: DEFAULTS.w_chat_gpt }) } } function applySettings(settings) { @@ -59,15 +59,28 @@ function applySettings(settings) { console.log(key, getComputedStyle(document.documentElement).getPropertyValue(`--${key}`)) }) } +// function setInputFieldValue(inputSelector, inputVal) { +// const inputEl = document.querySelector(`.gpth-settings #${inputSelector}`) -// Function to save settings to Chrome Storage -// async function saveSettings(settings) { -// try { -// await browser.storage.sync.set(settings) -// } catch (error) { -// console.error('Failed to save settings:', error) -// } +// inputEl.value = inputVal // } +// Function to save settings to Chrome Storage +async function saveSettings(settings) { + try { + await browser.storage.sync.set(settings) + } catch (error) { + console.error('Failed to save settings:', error) + } +} +async function loadSettings() { + try { + const settings = await browser.storage.sync.get(Object.keys(DEFAULTS)) + + applySettings(settings) + } catch (error) { + console.error('Failed to load settings:', error) + } +} function handleAssetsListeners() { console.log('handleAssetsListeners() called') @@ -80,4 +93,11 @@ function handleAssetsListeners() { selectors.chatFullWidth.addEventListener('change', toggleChatFullWidth) } -export { assetsHtmlCode, handleAssetsListeners } +// Load settings on page load +function init() { + console.log('initAssets() called') + loadSettings() +} +// init() + +export { assetsHtmlCode, handleAssetsListeners, init } diff --git a/src/js/content.js b/src/js/content.js index f88a6d0..226ddf2 100644 --- a/src/js/content.js +++ b/src/js/content.js @@ -1,2 +1,5 @@ import './app/floatingBtn' import './app/mainFonts' +import { init as initAssets } from './app/mainAssets' + +initAssets() diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss index b8deffd..f914fee 100644 --- a/src/sass/elements/_right--main.scss +++ b/src/sass/elements/_right--main.scss @@ -409,6 +409,14 @@ html[data-gptheme='oled'] main [data-testid^='conversation-turn-']:has([data-mes } } +main { + + [data-testid^='conversation-turn-'] .mx-auto.flex.flex-1.text-base, + [data-testid^='conversation-turn-']:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'], + &:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { + transition: 0.3s ease-in-out; + } +} /* main [data-testid^='conversation-turn-'] { From ec1e40b331c3db1064056fac3b1838e5e988a93b Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 19:07:01 +0200 Subject: [PATCH 05/27] refactor(chat-full-width): Sync checkbox with stored value - Set the `checked` attribute of the full-width chat checkbox based on the stored value - This ensures that the checkbox accurately reflects the user's chosen setting across platform restarts Changes summary: - Synchronized the full-width chat checkbox with the stored value: - Set the `checked` attribute based on the stored full-width chat setting, ensuring that the checkbox accurately reflects the user's chosen preference across platform restarts and page reloads. --- src/js/app/mainAssets.js | 36 ++++++++---------------------------- 1 file changed, 8 insertions(+), 28 deletions(-) diff --git a/src/js/app/mainAssets.js b/src/js/app/mainAssets.js index da011f9..7387266 100644 --- a/src/js/app/mainAssets.js +++ b/src/js/app/mainAssets.js @@ -15,41 +15,21 @@ let assetsHtmlCode = ` icon: '🖥️', textTitle: 'Chat Full Width', textSubtitle: 'Make the chat bubbles to take the full width', - // textSubtitle: 'Make the chat', })}
` -/* ${renderSwitchOption({ - inputId: 'gpth-auto-full-width', - isChecked: true, - icon: '🚗', - textTitle: 'Auto Chat Full Width', - // textSubtitle: 'Automatic a', - textSubtitle: 'Automatic make chat full width when the sidebar is collapsed, and vice-versa', -})} */ - -// function toggleChatFullWidth(e) { -// /* TODO: FIX THIS, this is not good logic when we are not on conversation page, so we need to fix this by editing the CSS var and not adding the class on main */ -// const mainConversation = document.querySelector("main:has([data-testid^='conversation-turn-'])") - -// if (!mainConversation) return alert('No main conversation found') - -// if (e.target.checked && !mainConversation.classList.contains('gpth-chat-bubble-full-width')) { -// mainConversation?.classList.add('gpth-chat-bubble-full-width') -// } else { -// mainConversation?.classList.remove('gpth-chat-bubble-full-width') -// } -// } function toggleChatFullWidth(e) { console.log('checked', e.target.checked) if (e.target.checked) { applySettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) saveSettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) + setInputCheckedValue('gpth-full-width', true) } else { applySettings({ w_chat_user: DEFAULTS.w_chat_user, w_chat_gpt: DEFAULTS.w_chat_gpt }) saveSettings({ w_chat_user: DEFAULTS.w_chat_user, w_chat_gpt: DEFAULTS.w_chat_gpt }) + setInputCheckedValue('gpth-full-width', false) } } function applySettings(settings) { @@ -59,11 +39,11 @@ function applySettings(settings) { console.log(key, getComputedStyle(document.documentElement).getPropertyValue(`--${key}`)) }) } -// function setInputFieldValue(inputSelector, inputVal) { -// const inputEl = document.querySelector(`.gpth-settings #${inputSelector}`) +function setInputCheckedValue(inputSelector, isChecked) { + const inputEl = document.querySelector(`.gpth-settings #${inputSelector}`) -// inputEl.value = inputVal -// } + inputEl.checked = isChecked +} // Function to save settings to Chrome Storage async function saveSettings(settings) { try { @@ -77,6 +57,8 @@ async function loadSettings() { const settings = await browser.storage.sync.get(Object.keys(DEFAULTS)) applySettings(settings) + // Set the checked attribute based on the saved settings + setInputCheckedValue('gpth-full-width', settings.w_chat_gpt === '100%') } catch (error) { console.error('Failed to load settings:', error) } @@ -87,7 +69,6 @@ function handleAssetsListeners() { const selectors = { chatFullWidth: document.querySelector('.gpth-settings #gpth-full-width'), - // gpthAutoFullWidth: document.querySelector('.gpth-settings #gpth-auto-full-width'), } selectors.chatFullWidth.addEventListener('change', toggleChatFullWidth) @@ -98,6 +79,5 @@ function init() { console.log('initAssets() called') loadSettings() } -// init() export { assetsHtmlCode, handleAssetsListeners, init } From 87e35390765672a2eec3f1fdc2d1185dc9938ca2 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 20:09:24 +0200 Subject: [PATCH 06/27] refactor(chat-full-width): Make the `prompt-textarea` width sync with the chat's width - Make the `prompt-textarea` width sync with the chat's width - Fix the edit icon in user chat bubbles to be visible when chat bubbles are at 90% width Changes summary: - Improved UI synchronization: - Synchronized the width of the `prompt-textarea` with the chat's width for a consistent appearance. - Ensured the edit icon in user chat bubbles remains visible when chat bubbles are set to 90% width, providing users with editing capabilities. --- src/js/app/mainAssets.js | 5 +- .../elements/_chats-textarea-max-width.scss | 44 ++++++++++------ src/sass/elements/_right--main.scss | 50 ++++--------------- src/sass/elements/_right--textarea.scss | 24 --------- 4 files changed, 43 insertions(+), 80 deletions(-) diff --git a/src/js/app/mainAssets.js b/src/js/app/mainAssets.js index 7387266..8174545 100644 --- a/src/js/app/mainAssets.js +++ b/src/js/app/mainAssets.js @@ -23,8 +23,9 @@ function toggleChatFullWidth(e) { console.log('checked', e.target.checked) if (e.target.checked) { - applySettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) - saveSettings({ w_chat_user: '100%', w_chat_gpt: '100%' }) + // ! user chat cant be '100%' bcs the edit icon is out of wrapper then and it looks like it doesnt exist !! + applySettings({ w_chat_user: '90%', w_chat_gpt: '100%' }) + saveSettings({ w_chat_user: '90%', w_chat_gpt: '100%' }) setInputCheckedValue('gpth-full-width', true) } else { applySettings({ w_chat_user: DEFAULTS.w_chat_user, w_chat_gpt: DEFAULTS.w_chat_gpt }) diff --git a/src/sass/elements/_chats-textarea-max-width.scss b/src/sass/elements/_chats-textarea-max-width.scss index 0d2faa4..e336678 100644 --- a/src/sass/elements/_chats-textarea-max-width.scss +++ b/src/sass/elements/_chats-textarea-max-width.scss @@ -1,20 +1,36 @@ -main:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { - // border: 1px solid red; +// main:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { +main:has(#prompt-textarea) { + .px-3.text-base.m-auto { + padding-left: var(--px-chat-bubble-edge-gap) !important; + padding-right: var(--px-chat-bubble-edge-gap) !important; - max-width: var(--w_prompt_textarea) !important; - - @include dev(laptop) { - --w_prompt_textarea: 40rem; - // border-color: lightblue; + /* Textarea and chats wrapper */ + .mx-auto.flex.flex-1.text-base { + max-width: var(--w_prompt_textarea) !important; + } } - // @include dev(tab-land) { - // --w_prompt_textarea: 40rem; - // border-color: lightpink; + // [class*='xl:max-w-[48rem]'] { + // // [class*='lg:max-w-[40rem]'] { + // border: 1px solid greenyellow; + + // max-width: var(--w_prompt_textarea) !important; + // // max-width: var(--w_chat_gpt) !important; + + // // @include dev(laptop) { + // // --w_prompt_textarea: 40rem; + // // // border-color: lightblue; + // // } + + // // // @include dev(tab-land) { + // // // --w_prompt_textarea: 40rem; + // // // border-color: lightpink; + // // // } + + // // @include dev(big-desktop) { + // // --w_prompt_textarea: 52rem; + // // // border-color: lightgreen; + // // } // } - @include dev(big-desktop) { - --w_prompt_textarea: 52rem; - // border-color: lightgreen; - } } \ No newline at end of file diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss index f914fee..695eee5 100644 --- a/src/sass/elements/_right--main.scss +++ b/src/sass/elements/_right--main.scss @@ -41,23 +41,23 @@ main [role='presentation'] { main [data-testid^='conversation-turn-'] { /* Edit icon in user chat for example. Edit state user chat bg */ --main-surface-tertiary: var(--c-surface-3) !important; - // --main-surface-tertiary: hsla(var(--accent-hsl) / 0.5) !important; margin-bottom: var(--mb-chat-bubble) !important; .mx-auto.flex.flex-1.text-base, - &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { - transition: 0.3s ease-in-out; - } - - .mx-auto.flex.flex-1.text-base { - // width: var(--w_chat_gpt) !important; + [class*='xl:max-w-[48rem]'] { max-width: var(--w_chat_gpt) !important; } + // TODO proveriti ovo sve kad ima #prompt-textarea i kad nema (tipa u shared link layout-u) + /* .px-3.text-base.m-auto { + padding-left: var(--px-chat-bubble-edge-gap) !important; + padding-right: var(--px-chat-bubble-edge-gap) !important; + } */ + /* Horizontal gap from chat bubble to screen-edge */ & > div { - padding-left: var(--px-chat-bubble-edge-gap); - padding-right: var(--px-chat-bubble-edge-gap); + // padding-left: var(--px-chat-bubble-edge-gap); + // padding-right: var(--px-chat-bubble-edge-gap); /* Original is px-4 or 1rem */ // @include dev(mob) { @@ -416,34 +416,4 @@ main { &:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { transition: 0.3s ease-in-out; } -} - -/* main [data-testid^='conversation-turn-'] { - - .mx-auto.flex.flex-1.text-base, - &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { - transition: 0.3s ease-in-out; - } -} - -main.gpth-chat-bubble-full-width { - [data-testid^='conversation-turn-'] { - --w_chat_gpt: 100% !important; - padding-left: var(--px-chat-bubble-edge-gap) !important; - padding-right: var(--px-chat-bubble-edge-gap) !important; - - .mx-auto.flex.flex-1.text-base { - max-width: var(--w_chat_gpt) !important; - } - - &:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'] { - width: var(--w_chat_gpt) !important; - max-width: var(--w_chat_gpt) !important; - } - } - - // &:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] { - // // --w_chat_gpt: 100% !important; - // max-width: 100% !important; - // } -} */ \ No newline at end of file +} \ No newline at end of file diff --git a/src/sass/elements/_right--textarea.scss b/src/sass/elements/_right--textarea.scss index 14c53e7..db7ce36 100644 --- a/src/sass/elements/_right--textarea.scss +++ b/src/sass/elements/_right--textarea.scss @@ -64,18 +64,6 @@ main form { color: var(--c-accent) !important; } - /* 📎 "Attach files" button parent oof parent which has items-end */ - // div:has(& > div[type='button'][aria-haspopup='dialog']:has(button[aria-label='Attach files'])) { - // div[type='button'][aria-haspopup='dialog']:has(button[aria-label='Attach files']) { - // margin-bottom: calc(var(--p-prompt-textarea) / 2); - // } - - /* 📎 Attach files svg */ - // button[aria-label='Attach files'] svg { - // color: var(--c-accent) !important; - // } - /* Moram ovako jer imamo dva div[type='button'][aria-haspopup='dialog'] */ - div:has(> input[type='file']) { /* 📎 "Attach files" svg */ @@ -92,22 +80,10 @@ main form { /* 🖼️ "Attach Files" - attached image wrapper */ div[type='button'][aria-haspopup='dialog'] { - // border: 2px solid lightgreen !important; /* "Attach Files" attached image */ span.bg-cover { border-radius: 10px !important; } - - // div[type='button'][aria-haspopup='dialog']:has(input[type='file']) { - // // border: 2px solid red !important; - - // /* 📎 "Attach files" svg */ - // // button:has(> svg) { - // // svg { - // // color: var(--c-accent) !important; - // // } - // // } - // } } } From a3373868c1e7dc417adadb3e4c897ad36fc56007 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 13 Jun 2024 21:19:53 +0200 Subject: [PATCH 07/27] feat(chat-full-width): Add a hover state for the FW option and the real `svg` icon - Add a hover state for the full-width option in the settings - Include the actual full-width SVG icon Changes summary: - Enhanced the full-width option in the settings: - Added a hover state to provide visual feedback when hovering over the full-width option. - Included the actual full-width SVG icon, improving the user interface and providing a clearer representation of the feature. --- src/js/app/components/icons.js | 16 ++++++++++------ src/js/app/components/renderSwitch.js | 2 +- src/js/app/mainAssets.js | 6 ++++-- src/sass/abstract/_vars.scss | 6 ++++++ src/sass/gpthemes/_gpth-floating-btn.scss | 6 +----- .../theme-manager/components/_switch.scss | 19 ++++++++++++++++--- 6 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/js/app/components/icons.js b/src/js/app/components/icons.js index 67e3d46..93c3a76 100644 --- a/src/js/app/components/icons.js +++ b/src/js/app/components/icons.js @@ -1,11 +1,15 @@ -export const icon_sun = `` +const icon_sun = `` -export const icon_moon = `` +const icon_moon = `` -export const icon_moon_full = `` +const icon_moon_full = `` -export const icon_settings = `` +const icon_settings = `` -export const icon_paint = `` +const icon_paint = `` -export const icon_palette = `` +const icon_palette = `` + +const icon_full_width = `` + +export { icon_sun, icon_moon, icon_moon_full, icon_settings, icon_paint, icon_palette, icon_full_width } diff --git a/src/js/app/components/renderSwitch.js b/src/js/app/components/renderSwitch.js index 9a5b0dc..a2225df 100644 --- a/src/js/app/components/renderSwitch.js +++ b/src/js/app/components/renderSwitch.js @@ -2,7 +2,7 @@ function renderSwitchOption({ inputId, isChecked = false, icon, textTitle, textS return `