Implement custom width options for chat and prompt field

[itsmartashub]

Currently, the chat and textarea prompt widths are fixed, which may not provide enough flexibility for users with different screen sizes or preferences. To enhance the user experience, we should implement custom width options that allow users to adjust the width of the chat and textarea prompt to their liking.

Solution Basics:

1. Chat Width Customization:

• Add a settings option that allows users to set a custom width for the chat area.
• Implement a slider where users can specify the desired width as a percentage of the chat width.
• Ensure that the chat area dynamically adjusts to the specified width, providing a real-time preview of the changes.
• Change the edit state icon position for user chats avoiding its cutting when increasing the chats width
• Add reset button for all width options (chats, prompt field, sync prompt)
• Cross page consistency (storage saving)

2. Prompt Field Width Customization:

• Similarly, provide a settings option for customizing the width of the textarea prompt where users type their messages.
• Allow users to set a custom width as a percentage, to suit their typing preferences.
• Ensure that the chat area dynamically adjusts to the specified width, providing a real-time preview of the changes.
• Cross page consistency (storage saving)

3. Sync Feature for Prompt Field [#38]:

• Introduce a sync option for the textarea prompt width, implemented as a switch/checkbox.
• When enabled, the textarea prompt width automatically follows the chat width, providing a consistent layout.
• If disabled, the custom prompt width settings become active, allowing users to set their preferred width independently from the chat width.
• Add a lock icon indicator on the prompt message sync custom width which will dynamically appears based on the state of the prompt sync switch value
• Cross page consistency (storage saving)