[BUG]: Chat input - long text not scrollable due to <pre> overlay

[Anil567849]

Describe the bug When typing a long paragraph in the chat input, the scroll bar does not work. This happens because the content is transparent, and a pre tag is rendered above it (with pointer-events: none). Since the pre handles the text rendering, the scrollbar for the <textarea> becomes unusable.

Steps to reproduce the behavior: Go to the chat input component. Type or paste a long paragraph so that the input should become scrollable. Try scrolling the input area. Notice that the scrollbar does not work and text overlap.

Expected behavior The chat input should become scrollable when the content exceeds the visible area, allowing the user to see all typed text.

Screenshots

Additional context The issue arises because the pre element is placed above the textarea for styled text display. Even though it's parent has pointer-events: none, it still prevents the native scrolling behavior of the textarea.

[Akshaj-mishra]

I can take this issue and submit a PR. Planning a small fix to ensure the textarea remains the scroll container and syncs scroll with the pre overlay. Let me know if that works. will create pr to solve within a day or so need to understand and test it as well . can i try ?