fix wave ai scrolling bug (and some other small UI fixes)

[sawka]

No description provided.

[coderabbitai]

Walkthrough

• Updated status color classes in AIToolUse to use semantic tokens (text-success, text-error, text-gray-400) instead of specific Tailwind color tokens.
• Shifted onContextMenu handling from a wrapper div in AIPanel to the AIPanelMessages component via a new onContextMenu prop.
• Extended AIPanelMessagesProps to include an optional onContextMenu and attached it to the component’s root container.
• Adjusted CodeBlock container styling in StreamDown: use numeric maxWidth, add a minWidth constraint as min(400, maxWidth), replacing previous px string interpolation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The title claims to fix a “wave ai scrolling bug” and mentions “other small UI fixes,” but the actual changeset only refactors color class names, moves an onContextMenu handler, adds a prop, and adjusts code block styling without addressing any scrolling behavior. This mismatch means the title does not accurately summarize the main focus of the PR.	Please update the title to clearly reflect the key changes, for example by mentioning the semantic color token refactor in AIToolUse, the onContextMenu prop addition to AIPanelMessages, and the CodeBlock styling adjustments.
Description Check	❓ Inconclusive	The pull request description is empty and provides no information about the changes or their intent, making it impossible to understand the motivation or scope of the updates.	Please add a brief summary of the changes and their purpose, such as the color mapping updates in AIToolUse, onContextMenu prop addition for AIPanelMessages, and CodeBlock styling improvements.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sawka/waveai-minor-ui

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 47bdc38 and d390e70.

📒 Files selected for processing (4)

• frontend/app/aipanel/aimessage.tsx (1 hunks)
• frontend/app/aipanel/aipanel.tsx (1 hunks)
• frontend/app/aipanel/aipanelmessages.tsx (2 hunks)
• frontend/app/element/streamdown.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

frontend/app/aipanel/aipanel.tsx (1)

frontend/app/aipanel/aipanelmessages.tsx (1)

• AIPanelMessages (16-64)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Build for TestDriver.ai
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: Analyze (go)

🔇 Additional comments (5)

frontend/app/element/streamdown.tsx (1)

155-155: LGTM: Improved styling with numeric values.

The change to use numeric maxWidth directly with a minWidth constraint is correct. React automatically appends 'px' to numeric CSS values, and the Math.min(400, codeBlockMaxWidth) ensures code blocks maintain a reasonable minimum width while respecting the maximum.

frontend/app/aipanel/aipanelmessages.tsx (2)

13-13: Good addition of onContextMenu prop.

The optional onContextMenu prop is properly typed and allows the parent component to handle context menu events on the messages container.

---

45-45: LGTM: Context menu handler now on scrollable container.

Attaching onContextMenu directly to the scrollable container (instead of a wrapper div) likely fixes the scrolling issue mentioned in the PR title. The previous wrapper div may have been interfering with scroll event propagation.

frontend/app/aipanel/aipanel.tsx (1)

531-531: LGTM: Cleaner onContextMenu prop passing.

Passing onContextMenu as a prop to AIPanelMessages instead of wrapping it in a div with the handler is a cleaner approach. This refactor, combined with the changes in aipanelmessages.tsx, likely resolves the scrolling bug by eliminating an unnecessary wrapper layer.

frontend/app/aipanel/aimessage.tsx (1)

82-82: Confirm Tailwind semantic tokens exist

I couldn’t locate any tailwind.config.* in the repo—ensure your configuration defines success and error under colors so that text-success and text-error utilities are available.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}