Implement full and custom width conversation view options #35
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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.
- 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.
… 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.
- 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.
- 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.
… 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.
3 tasks
itsmartashub
changed the title
…al `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.
Fix edit icon disappearance in full-width modeIn the new UI, when the full-width option is enabled, the edit icon for user chats disappears due to the restricted width of the user chat element. This pull request aims to fix this issue by repositioning the edit icon and ensuring it remains visible and accessible to users. Additionally, we will address the overflow issue by applying overflow: visible to the user chat element, while thoroughly testing for any potential layout breaks caused by this change.
|
…t icon being cropped/invisible - Make user chat bubbles also 100% width when full width mode is enabled - Fix the edit icon being cropped and invisible by repositioning it to the right and bottom corner Changes summary: - Improved the design of user chat bubbles in full-width mode: - User chat bubbles now also occupy 100% width when full-width mode is enabled, providing a consistent appearance with GPT chat bubbles. - Repositioned the edit icon to the right and bottom corner to ensure visibility
…e chat's width - Unsync the `prompt-textarea` width from the chat's width - Consider making this behavior optional in future updates Changes summary: - Adjusted the width synchronization of the `prompt-textarea`: - The `prompt-textarea` width is now independent of the chat's width, providing a consistent input field size. - Consider making this behavior optional in future updates to allow users to choose their preferred textarea width.
|
hello @itsmartashub , i have some sugestions regarding the chat width implementation,
|
|
- Finish the design of range input sliders for custom chat bubble width Changes summary: - Completed the design of range input sliders used for adjusting custom chat bubble width: - Improved the visual appearance of the sliders for a more polished and user-friendly experience.
|
Aah ok my bad, apologies :( |
- Add a custom width slider for the `prompt-textarea` Changes summary: - Implemented a custom width slider for the `prompt-textarea`: - Allows users to adjust the width of the textarea independently from chat bubble width.
- 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.
|
hello @itsmartashub , i did notice a small behaviour of chat-full-width implementation, it does maintain the selected width % even after smaller device breakpoint which shouldnt be the case |
- Implement "Sync Textarea with Chat Width" logic to synchronize prompt textarea width with chat bubbles - Add "Reset All Widths" buttons to easily restore default width settings for chat bubbles and prompt textarea Changes summary: - Enhanced width customization options: - Introduced the ability to synchronize the prompt textarea width with the width of chat bubbles, providing a consistent user experience. - Added "Reset All Widths" buttons to allow users to conveniently restore the default width settings for both chat bubbles and the prompt textarea.
Hi there, dear @NeeRaj-2401. Yap, I'm aware of that. Just I've got a lot on my plate these days and not a lot of free time to focus on the extension. Also, since this extension is primarily for the desktop versions, I tend to work in a similar way. So, I always make sure everything is working properly on the desktop versions first, and then once I'm sure everything is tested, I move on to mobile (smaller breakpoints). In this case, the full/custom width feature is far from finished, so mobile is even further away. I hope you don't mind me asking, but I'm curious about why you think the currently selected width should be different at different breakpoints? |
The only reason 😅 
|
- Refactor and fix issues related to custom chat bubble and prompt textarea widths - Implement proper synchronization between chat bubble width and prompt textarea width - Fix issues with locking the textarea width to chat widths Changes summary: - Overhauled the width customization logic: - Refactored and fixed issues related to custom chat bubble and prompt textarea widths. - Implemented proper synchronization between chat bubble width and prompt textarea width, ensuring a consistent user experience. - Addressed and resolved issues with locking the textarea width to chat widths.
- Fix user chat bubble width behavior to match GPT chat bubbles - Ensure the edit icon is visible and accessible for user chat bubbles Changes summary: - Corrected the width behavior of user chat bubbles to match the width of GPT chat bubbles, ensuring a consistent user experience. - Ensured the edit icon for user chat bubbles is visible and accessible, providing users with the ability to edit their messages.
- Apply the DRY (Don't Repeat Yourself) principle by eliminating code duplication and improving code reusability Changes summary: - Applied the DRY (Don't Repeat Yourself) principle: - Eliminated code duplication to improve maintainability and reduce redundancy. - Improved code reusability by extracting common functionality into reusable functions or components.
- Add a lock icon indicator on the textarea message sync switch to show when it is locked to chat widths - The lock icon dynamically appears based on the state of the textarea sync switch Changes summary: - Added a visual indicator for the textarea message sync switch: - A lock icon is displayed when the textarea width is locked to chat widths, providing a clear indication of the current synchronization state. - The lock icon dynamically appears or disappears based on the state of the textarea sync switch, offering users a straightforward way to understand the synchronization behavior.
… and checkbox styling - Enhance the style of the lock indicator and width switches for full-width chat options - Add proper icons for the full-width chat switches Changes summary: - Improved the design of the full-width chat options: - Enhanced the style of the lock indicator and width switches, providing a more polished appearance. - Added distinct icons for the full-width chat switches, making the options clearer and more visually appealing.
…sues - Change percentage values to REM units where appropriate - Fix the initial state of the `textarea-sync` switch to ensure it starts as expected Changes summary: - Corrected unit inconsistencies by changing percentage values to REM units where appropriate, ensuring consistent sizing across different screen sizes and font sizes. - Addressed an issue with the initial state of the `textarea-sync` switch, ensuring it starts in the expected default state.
itsmartashub
changed the title
This was
linked to
issues
Jul 12, 2024
itsmartashub
changed the title
itsmartashub
changed the title
itsmartashub
added
Feature
- Make new css var for max-width to separate `max-width` and `width` for user chat bubbles - Fix user chat bubble width to match the content width, ensuring it doesn't become wider than necessary - Make user chat bubbles full width when the full chat width option is toggled - Set user chat bubble width to 70% when adjusted chat width via the custom width slider Changes summary: - Improved the width calculation for user chat bubbles: - Introduced separate `max-width` and `width` variables to better control the width behavior. - Fixed an issue where user chat bubbles could become wider than necessary; now, the width matches the content width. - User chat bubbles will be full width when the full chat width option is enabled. - Set user chat bubble width to 70% when adjusted via the custom width slider, providing a clear distinction from GPT chat bubbles.
I understand that. But what if someone uses the extension on tablets or phones and wants the width to be custom, say, But I can certainly look into what I can do when the user resizes the window if that would help you. If you have a better idea than changing the widths on the window resizing event to solve this, please suggest it. |
6 tasks
…39) - Implement a new resizing function to make chat bubbles and the prompt textarea full width on smaller screens (breakpoint < 768px) - Reset to default or previously chosen width options on larger screens - Note: The responsive width adjustment is not saved, so on page refresh, the options won't remain full width Changes summary: - Added a responsive width adjustment feature: - On smaller screens (breakpoint < 768px), chat bubbles and the prompt textarea are automatically set to full width for improved mobile experience. - On larger screens, the width settings reset to default or previously chosen options, ensuring a balanced layout for desktop users. - Note: The responsive width adjustment is not saved, so on page refresh, the options won't remain full width.
…h adjustment - Improve the responsive width adjustment logic: - The resize event listener is now added only when chat width settings differ from defaults. - Full-width behavior on resize applies only if chat width settings have been modified. - If the user resets the widths, the resize listener is removed. - The code automatically detects changes to chat width settings by comparing with default values, eliminating the need for manual flags. Changes summary: - Optimized the responsive width adjustment logic: - Reduced unnecessary event listeners by adding the resize listener only when chat width settings deviate from defaults. - Ensured full-width behavior on resize is triggered only when chat width settings have been intentionally modified by the user. - Removed the resize listener when the user resets the widths, reducing redundant code execution. - Implemented automatic detection of changes to chat width settings by comparing with default values, simplifying the logic and improving performanc
- Main changes: - Introduced a configuration object for constants and default values. - Improved error handling (with some TODOs remaining for user-friendly messages). - Adopted modern JS features like optional chaining. - Refactored code for better modularization and organization. - Enforced consistent use of `const` and `let`. - Enhanced naming conventions and code structure. - `renderSwitch` improvements: - Utilized template literals for string concatenation. - Employed default parameter syntax for optional parameters. - Implemented input sanitization to prevent XSS attacks. - Enhanced accessibility with ARIA attributes. - Laid the groundwork for internationalization (actual implementation requires a translation function). - Used more semantic HTML structure. Changes summary: - Overhauled the structure and organization of the `mainAssets.js` file: - Introduced a configuration object for centralizing constants and default values, improving maintainability. - Enhanced error handling for more robust code (with some TODOs remaining for user-friendly error messages). - Leveraged modern JavaScript features like optional chaining for cleaner code. - Refactored functions for better modularization and organization, improving code readability. - Enforced consistent use of `const` and `let` for variable declaration. - Adopted improved naming conventions and code structure for clearer code logic. - Enhanced the `renderSwitch` function: - Utilized template literals for more readable and maintainable string concatenation. - Employed default parameter syntax for optional parameters, reducing function complexity. - Implemented input sanitization to prevent potential XSS attacks, enhancing security. - Incorporated ARIA attributes to improve accessibility for assistive technologies. - Laid the foundation for internationalization, though actual translation requires a separate translation function. - Utilized more semantic HTML structure for improved code semantics and accessibility.
- Remove unused JavaScript files to reduce repository size and improve maintainability Changes summary: - Removed unused JavaScript files, reducing clutter and improving the overall maintainability of the codebase.
… All` - Remove resettable items from storage when using the "Reset All Widths" option to relieve storage usage Changes summary: - Optimized storage usage: - Removed resettable items from storage when the "Reset All Widths" option is used, reducing storage utilization and improving long-term maintainability.
- Comment out development testing code to prevent accidental execution Changes summary: - Commented out development testing code to ensure it is not accidentally executed in production, reducing potential issues and maintaining code integrity.
- Fix the unit of the custom width slider tooltip to display percentages (%) instead of REM Changes summary: - Corrected the unit displayed in the custom width slider tooltip: - The tooltip now correctly displays percentages (%) instead of REM units, providing a clearer indication of the slider value.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
1. Chat Width Customization [#1, #37]:
storagesaving)2. Prompt Field Width Customization [#37]:
storagesaving)3. Sync Feature for Prompt Field [#38]:
storagesaving)4. Implement responsive full-width adjustment for chat bubbles and prompt textarea when resizing window [#39]
<= 768px768pxand the interface is being resized, remove the full-width adjustment and reset to the default or previously chosen width options. So first, I have to detect if the user change the default preferences.debouncefn to prevent unnecessary resizing events and ensure smooth adjustments.Closes: #1, #37, #38, #39