- 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.

…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.

…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.

- 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.

- 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.

- 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.

- 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.

- 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.

…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.