Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement full and custom width conversation view options #35

Merged
merged 27 commits into from
Jul 14, 2024
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
fef3c09
feat(chat-full-width): Initiate chat full-width feature (#1)
itsmartashub Jun 13, 2024
c613751
feat(chat-full-width): Add the full-width chat toggle logic
itsmartashub Jun 13, 2024
84a01c0
refactor(chat-full-width): Improve toggling full-w by utilizing a CSS…
itsmartashub Jun 13, 2024
584c098
feat(chat-full-width): Save the full-width chat settings into storage
itsmartashub Jun 13, 2024
ec1e40b
refactor(chat-full-width): Sync checkbox with stored value
itsmartashub Jun 13, 2024
87e3539
refactor(chat-full-width): Make the `prompt-textarea` width sync with…
itsmartashub Jun 13, 2024
a337386
feat(chat-full-width): Add a hover state for the FW option and the re…
itsmartashub Jun 13, 2024
bf449e8
refactor(chat-full-width): Make user chat also `100%` and fix the edi…
itsmartashub Jun 14, 2024
d48bffa
refactor(chat-full-width): Unsync the `prompt-textarea` width from th…
itsmartashub Jun 14, 2024
20c10b7
feat(custom-chat-width): Complete custom width slider design
itsmartashub Jun 14, 2024
5195916
feat(custom-width-textarea): Implement prompt textarea width slider
itsmartashub Jun 14, 2024
5f96c15
feat(chat-full-width): Bring back toggle full-width mode for all chats
itsmartashub Jun 14, 2024
0626032
feat(textarea-sync): Enhance width customization options
itsmartashub Jun 19, 2024
6885de2
refactor: Overhaul width customization
itsmartashub Jul 11, 2024
2a9cdeb
fix(chat-custom-width): Correct user chat bubble width and edit icon
itsmartashub Jul 11, 2024
7a08d29
refactor(chat-custom-width): Apply `DRY` principle
itsmartashub Jul 11, 2024
fcb9b81
feat(textarea-sync/lock-indicator): Add lock icon indicator
itsmartashub Jul 11, 2024
29d56c5
refactor(chat-full-width): Add proper icons. Improve locked indicator…
itsmartashub Jul 12, 2024
82cfb4f
fix(chat-custom-width): Correct unit and initial prompt sync state is…
itsmartashub Jul 12, 2024
59a8371
fix(chat-full-width): Improve user chat bubble width calculation
itsmartashub Jul 13, 2024
6e89b63
feat(chat-custom-width/window-resizing): Responsive width adjustment …
itsmartashub Jul 14, 2024
1340445
refactor(chat-custom-width/window-resizing): Optimize responsive widt…
itsmartashub Jul 14, 2024
be27c77
refactor(main-assets): Overhaul code structure
itsmartashub Jul 14, 2024
84ac040
chore(chat-custom-width/cleanup): Remove unused files
itsmartashub Jul 14, 2024
56ea483
refactor(chat-custom-width/storage): Optimize storage usage on `Reset…
itsmartashub Jul 14, 2024
d8c62cb
chore(chat-custom-width/testing): Remove dev testing code
itsmartashub Jul 14, 2024
4c4a48a
fix(chat-custom-width): Correct slider tooltip unit to be `%`
itsmartashub Jul 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(chat-full-width): Bring back toggle full-width mode for all chats
- Bring back the option to toggle full-width mode for all chats
- Note: This requires additional fixes and calculations, especially with custom widths. Reset buttons will also be implemented to restore default options.

Changes summary:
- Reintroduced the option to toggle full-width mode for all chats:
  - Provides users with the ability to enable or disable full-width mode for all chat bubbles.
  - ❗ TODO: Additional fixes and calculations are required, especially when considering custom widths.
  - ❗ TODO: Reset buttons will be implemented to allow users to easily restore default options.
itsmartashub committed Jun 14, 2024
commit 5f96c15d56d9123dd52f54896922c4aeed2bc082
38 changes: 26 additions & 12 deletions src/js/app/mainAssets.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import browser from 'webextension-polyfill'
import { renderSwitchOption, renderSmallCardOption } from './components/renderSwitch'
import { icon_full_width } from './components/icons'

const removePercent = (str) => str.replace('%', '') // /%/g
const removePercentAndRem = (str) => str.replace(/%|rem/g, '') // /%/g

const FW_DEFAULTS = {
w_chat_user: 'initial',
@@ -32,7 +32,7 @@ const FW_OPTIONS = {
let assetsHtmlCode = `
<section id="sectionAssets" class="gpth-assets">

<div class="gpth-assets__custom-width">
<div class="gpth-assets__custom-width mb-4">
${renderSmallCardOption({
name: 'Chats Width',
inputId: 'gpth-full-width-custom',
@@ -54,6 +54,16 @@ let assetsHtmlCode = `
unit: '%',
})}
</div>

<div>
${renderSwitchOption({
inputId: 'gpth-full-width',
isChecked: false,
icon: icon_full_width,
textTitle: 'Chat Full Width',
textSubtitle: "Expand chats to screen's edge for wider conversation view",
})}
</div>
</section>
`
function whenFullWidth() {
@@ -71,7 +81,9 @@ function whenFullWidth() {
chat_user_edit_icon_top: FW_OPTIONS.chat_user_edit_icon_top,
chat_user_edit_icon_transform: FW_OPTIONS.chat_user_edit_icon_transform,
})
// setInputCheckedValue('gpth-full-width', true)
setInputCheckedValue('gpth-full-width', true)
setRangeOutput('gpth-full-width-custom', removePercentAndRem(FW_OPTIONS.w_chat_gpt))
setInputFieldValue('gpth-full-width-custom', removePercentAndRem(FW_OPTIONS.w_chat_gpt))
}
function whenDefaultWidth() {
applySettings({
@@ -88,7 +100,9 @@ function whenDefaultWidth() {
chat_user_edit_icon_top: FW_DEFAULTS.chat_user_edit_icon_top,
chat_user_edit_icon_transform: FW_DEFAULTS.chat_user_edit_icon_transform,
})
// setInputCheckedValue('gpth-full-width', false)
setInputCheckedValue('gpth-full-width', false)
setRangeOutput('gpth-full-width-custom', removePercentAndRem(FW_DEFAULTS.w_chat_gpt))
setInputFieldValue('gpth-full-width-custom', removePercentAndRem(FW_DEFAULTS.w_chat_gpt))
}
function toggleChatFullWidth(e) {
if (e.target.checked) {
@@ -133,12 +147,12 @@ async function loadSettings() {

applySettings(settings)
// Set the checked attribute based on the saved settings
// setInputCheckedValue('gpth-full-width', settings.w_chat_gpt === '100%')
setRangeOutput('gpth-full-width-custom', removePercent(settings.w_chat_gpt))
setInputFieldValue('gpth-full-width-custom', removePercent(settings.w_chat_gpt))
setInputCheckedValue('gpth-full-width', settings.w_chat_gpt === '100%')
setRangeOutput('gpth-full-width-custom', removePercentAndRem(settings.w_chat_gpt))
setInputFieldValue('gpth-full-width-custom', removePercentAndRem(settings.w_chat_gpt))

setRangeOutput('gpth-textarea-width-custom', removePercent(settings.w_prompt_textarea))
setInputFieldValue('gpth-textarea-width-custom', removePercent(settings.w_prompt_textarea))
setRangeOutput('gpth-textarea-width-custom', removePercentAndRem(settings.w_prompt_textarea))
setInputFieldValue('gpth-textarea-width-custom', removePercentAndRem(settings.w_prompt_textarea))
} catch (error) {
console.error('Failed to load settings:', error)
}
@@ -161,7 +175,7 @@ function handleChatCustomWidth(e) {
w_chat_gpt: `${e.target.value}%`,
})

// setInputCheckedValue('gpth-full-width', false)
setInputCheckedValue('gpth-full-width', false)
}
function handleTextareaCustomWidth(e) {
console.log('handleChatCustomWidth()', e.target.id)
@@ -174,7 +188,7 @@ function handleTextareaCustomWidth(e) {
saveSettings({
w_prompt_textarea: `${e.target.value}%`,
})
// setInputCheckedValue('gpth-full-width', false)
setInputCheckedValue('gpth-full-width', false)
}

function handleAssetsListeners() {
@@ -186,7 +200,7 @@ function handleAssetsListeners() {
textareaCustomWidth: document.querySelector('.gpth-settings #gpth-textarea-width-custom'),
}

// selectors.chatFullWidth.addEventListener('change', toggleChatFullWidth)
selectors.chatFullWidth.addEventListener('change', toggleChatFullWidth)
selectors.chatCustomWidth.addEventListener('change', handleChatCustomWidth)
selectors.textareaCustomWidth.addEventListener('change', handleTextareaCustomWidth)
}