Bugfix/docs gpt widget behavior #2172
Conversation
- Adjust max-width for message bubbles to 90% for answers and 80% for questions - Add overflow-wrap to prevent text overflow in messages - Update list styling with proper spacing and positioning - Add responsive font sizing for headings using clamp() - Implement custom table styling with proper borders and spacing - Add custom markdown renderer rules for tables
Add support for multi-line input and custom scrollbar styling. Implement Enter key submission handling while allowing Shift+Enter for new lines.
|
@Mohamed-Abuali is attempting to deploy a commit to the Arc53 Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
There are few issuess
- Empty whitespace is sent as a prompts
- In tables, horizontal scrollbars may only appear while hovering/scrolling, which makes the fact that the table is horizontally scrollable less obvious
- Swapped td/th Tags (Lines 693-694)
md.renderer.rules.td_open = () => '<th class="dgpt-th">'; // ❌ Should be <td>
md.renderer.rules.th_open = () => '<td class="dgpt-td">'; // ❌ Should be <th>
- Multi-line Input Not Properly Implemented: The input is not vertically centered in the textarea, user cannot see multiple lines of the text properly - one row is visible
…ocsGPT-widget-behavior
|
Got it, I’m already working on these items and will push them tomorrow. |
|
Hello, I wanted to ask about the textarea input in the large window widget. Another option could be to reduce the height of both the textarea and the send button to match a single-line input size. Right now it’s closer to a two-line height, so I can adjust that if needed. The small widget is perfectly centered and reseizes for each new line. 
|
|
@Mohamed-Abuali preferably vertically centered when the textarea is single line( initially) |
- Add auto-resizing functionality for prompt textarea with min/max height constraints - Fix table cell markup (th/td) and improve scrollbar styling - Add promptRef to manage textarea state and reset after submission
|
Everything is Done |
ManishMadan2882
left a comment
ManishMadan2882
left a comment
There was a problem hiding this comment.
@Mohamed-Abuali Thanks for the update, UI looks good now, but some minor comments
- Lines 713-714 still have the tags swapped.
md.renderer.rules.td_open = () => '<th class="dgpt-td">'; // ❌ Should be <td>
md.renderer.rules.th_open = () => '<td class="dgpt-th">'; // ❌ Should be <th>
- Minor Issue: The handleSubmit function (lines 888-898) doesn't validate the prompt before calling appendQuery. While unlikely to be triggered due to the disabled button, it's a best practice to validate in the submit handler as well.
- Fix swapped td/th elements in markdown renderer - Adjust font weights for table headers and cells - Add validation to prevent empty message submissions
2 participants
This PR introduces a bug fix to the messaging widget:
Fix message bubble width and text wrapping to prevent overflow.
Correct list spacing and alignment.
Add responsive table support to prevent layout issues.
Replace the single-line input with a textarea to support multi-line input, custom scrollbar styling, and Enter/Shift+Enter behavior for message submission.
Bug fixes were needed to resolve display issues that caused messages, lists, and tables to render improperly or overflow the chat container.
The feature was needed to allow users to input multi-line prompts naturally while maintaining proper submission behavior.
Issue Link: #2159
video showcase:
FormatFix2.mp4
NewLineFix.mp4