I’ve fixed a text overflow issue in the AI-generated messages.#313
I’ve fixed a text overflow issue in the AI-generated messages.#313ngoiyaeric merged 2 commits intomainfrom
Conversation
The component that renders my responses was missing the necessary styling to handle long, unbroken strings of text. This caused text to overflow its container, negatively impacting the user interface. I’ve resolved the issue by adding the `break-words` CSS class to the `MemoizedReactMarkdown` component in `components/message.tsx`. This ensures that long strings of text will wrap correctly, preventing overflow and improving the overall user experience. Additionally, I added an `aria-label` to the submit button in `components/chat-panel.tsx` to improve accessibility.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
WalkthroughPrefer Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Actions as app/actions.tsx
Note right of Actions #E6F0FF: New input-sourcing branch
User->>Browser: Submit form (may include related_query)
Browser->>Actions: POST formData
alt skip == true
Actions->>Actions: use fallback behavior (existing)
else skip == false
Actions->>Actions: userInput = formData.get('related_query') or formData.get('input')
end
Actions->>Server: continue processing with resolved userInput
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
||||||||||||||||||
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||
![charliecreates[bot]](https://avatars.githubusercontent.com/in/1140780?s=60&v=4){kind=small}
There was a problem hiding this comment.
The changes address the stated issues effectively: text overflow is mitigated with break-words, and the icon-only submit button now has an accessible name. For added resilience, consider handling long tokens inside code/pre elements within markdown content. No blocking issues identified.
Additional notes (1)
- Readability |
components/message.tsx:24-24
Good fix for the overflow. One potential edge case: very long tokens inside inline code or fenced code blocks (e.g., hashes, base64, long URLs) may still overflow or require awkward horizontal scrolling, sincepreelements preserve whitespace andoverflow-wrapdoesn’t apply inside them. You can make this more robust by also handlingcodeandpredescendants of.prose.
Consider adding overflow handling for pre and a more aggressive break strategy for code to ensure no content breaks layout while keeping code blocks readable.
Summary of changes
- In
components/message.tsx, added the Tailwind utilitybreak-wordsto theMemoizedReactMarkdowncomponent’sclassNameto prevent long, unbroken strings from overflowing their container. - In
components/chat-panel.tsx, added anaria-label="Send message"to the submitButtonto improve accessibility of the icon-only control.
|
@coderabbitai run unit tests the recommended prompts section is not parsing the prompts into the system when they are clicked like they used to before |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 312 🏁 Script executed: Length of output: 2503 🏁 Script executed: Length of output: 9787 🏁 Script executed: Length of output: 8624 🏁 Script executed: Length of output: 3607 @ngoiyaeric, I've identified the issue with the recommended prompts. This is actually unrelated to the current PR (which only fixes text overflow with The ProblemThe recommended prompts in submitMessage={message => {
setInput(message)
}}The SolutionYou need to modify Option 1: Add a submit callback to ChatPanel (Recommended)Step 1: Modify // In components/chat-panel.tsx
export interface ChatPanelRef {
handleAttachmentClick: () => void;
submitForm: () => void; // Add this
}
export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, input, setInput }, ref) => {
// ... existing code ...
useImperativeHandle(ref, () => ({
handleAttachmentClick() {
fileInputRef.current?.click()
},
submitForm() {
formRef.current?.requestSubmit()
}
}));
// ... rest of the code ...Step 2: Update // In components/chat.tsx, replace both occurrences (lines 96-98 and 118-120):
submitMessage={message => {
setInput(message)
// Use setTimeout to ensure input is set before submitting
setTimeout(() => {
chatPanelRef.current?.submitForm()
}, 0)
}}Option 2: Simpler approach using useEffectAlternatively, you could add a state flag to trigger submission: // In components/chat.tsx
const [shouldSubmit, setShouldSubmit] = useState(false)
useEffect(() => {
if (shouldSubmit && input) {
chatPanelRef.current?.submitForm()
setShouldSubmit(false)
}
}, [shouldSubmit, input])
// Then in submitMessage:
submitMessage={message => {
setInput(message)
setShouldSubmit(true)
}}Note on Unit TestsI cannot run unit tests in the sandbox environment as test frameworks and execution environments are not available. However, you can test this functionality manually by:
Would you like me to create a GitHub issue to track this bug separately from the current PR? |
The `submit` action in `app/actions.tsx` was not correctly processing related queries. It only checked for an `input` field in the form data, ignoring the `related_query` field. This caused clicks on related prompts to fail, as their values were never extracted and processed. This commit resolves the issue by updating the `submit` action to prioritize the `related_query` field when it is available. If the `related_query` field exists in the form data, its value is used as the user input. Otherwise, the action falls back to the `input` field. This ensures that related queries are correctly parsed and submitted to the AI, restoring the intended functionality.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| : ((formData?.get('related_query') as string) || | ||
| (formData?.get('input') as string)) |
There was a problem hiding this comment.
🧩 Analysis chain
Logical inconsistency between input sourcing and type assignment.
Prioritizing related_query over input creates a mismatch with the type assignment logic on lines 182-185:
- If both
inputandrelated_queryare present informData, these lines will userelated_queryas the content - But lines 182-183 will assign type
'input'(becauseformData?.has('input')is checked first) - This creates a mismatch where the content comes from
related_querybut the type is'input'instead of'input_related'
Additionally, according to the PR comments, the root cause of the recommended prompts issue is that clicking a prompt sets the input value but doesn't trigger form submission. This change only affects which field is read for content—it doesn't address the auto-submission problem. Consider:
- Updating the type assignment logic to check
has('related_query')beforehas('input')to match the input sourcing priority - Implementing one of the solutions proposed in the PR comments (exposing a submit method via ref or using a state flag with useEffect) to address the auto-submission issue
Apply this diff to align the type assignment with input sourcing:
const type = skip
? undefined
- : formData?.has('input') || formData?.has('file')
- ? 'input'
- : formData?.has('related_query')
+ : formData?.has('related_query')
? 'input_related'
+ : formData?.has('input') || formData?.has('file')
+ ? 'input'
: 'inquiry'Run this script to verify if both fields can be set simultaneously:
🏁 Script executed:
#!/bin/bash
# Description: Search for code that sets both 'input' and 'related_query' in FormData
# Search for FormData append/set operations with 'input'
echo "=== Searching for FormData operations with 'input' field ==="
rg -n -B3 -A3 "FormData.*input|append.*input|set.*input" --type=tsx --type=ts
# Search for FormData append/set operations with 'related_query'
echo "=== Searching for FormData operations with 'related_query' field ==="
rg -n -B3 -A3 "FormData.*related_query|append.*related_query|set.*related_query" --type=tsx --type=ts
# Search for form submissions that might set these fields
echo "=== Searching for form elements with name='input' or name='related_query' ==="
rg -n -B2 -A2 "name=['\"]input['\"]|name=['\"]related_query['\"]" --type=tsx --type=tsLength of output: 291
🏁 Script executed:
#!/bin/bash
echo "=== Searching for 'related_query' references ==="
rg -n 'related_query' -C3
echo "=== Searching for JSX form elements with name='input' or 'related_query' ==="
rg -n 'name\s*=\s*["\'"](input|related_query)["\'"]' -C3 -g '*.tsx' -g '*.jsx'Length of output: 1989
Align type assignment with input sourcing priority.
Swap the ternary checks so that related_query is evaluated before input:
const type = skip
? undefined
- : formData?.has('input') || formData?.has('file')
- ? 'input'
- : formData?.has('related_query')
- ? 'input_related'
+ : formData?.has('related_query')
+ ? 'input_related'
+ : formData?.has('input') || formData?.has('file')
+ ? 'input'
: 'inquiry'🤖 Prompt for AI Agents
In app/actions.tsx around lines 57 to 58, the current ternary evaluates input
before related_query; swap the checks so related_query is evaluated first (use
related_query || input) and ensure the type assertions remain the same
((formData?.get('related_query') as string) || (formData?.get('input') as
string)) to preserve the original typings and sourcing priority.
2 participants
User description
The component that renders my responses was missing the necessary styling to handle long, unbroken strings of text. This caused text to overflow its container, negatively impacting the user interface.
I’ve resolved the issue by adding the
break-wordsCSS class to theMemoizedReactMarkdowncomponent incomponents/message.tsx. This ensures that long strings of text will wrap correctly, preventing overflow and improving the overall user experience.Additionally, I added an
aria-labelto the submit button incomponents/chat-panel.tsxto improve accessibility.PR Type
Bug fix, Enhancement
Description
Fix text overflow in AI messages with
break-wordsCSSAdd accessibility label to submit button
Diagram Walkthrough
File Walkthrough
message.tsx
Fix text overflow with break-words stylingcomponents/message.tsx
break-wordsCSS class toMemoizedReactMarkdowncomponentchat-panel.tsx
Add accessibility label to submit buttoncomponents/chat-panel.tsx
aria-label="Send message"to submit buttonSummary by CodeRabbit
New Features
Style