Repository navigation
[Customer Portal] Add token increase request feature for Novera AI chat - #900
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthroughAdds a token request flow to the Novera AI chat. ChangesToken Request Feature
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatInput
participant NoveraChatPage
participant TokenRequestModal
participant ChatWebSocket
User->>ChatInput: session limit reached (typingDisabled=true)
ChatInput-->>User: renders Session Limit Banner with "Request More Tokens"
User->>ChatInput: clicks "Request More Tokens"
ChatInput->>NoveraChatPage: onRequestTokens()
NoveraChatPage->>TokenRequestModal: open=true
User->>TokenRequestModal: enters reason, clicks "Submit Request"
TokenRequestModal->>NoveraChatPage: onSubmit(reason)
NoveraChatPage->>ChatWebSocket: connect(projectId)
NoveraChatPage->>ChatWebSocket: send token_increase_request {accountId, reason}
TokenRequestModal-->>User: shows confirmation message
ChatWebSocket->>NoveraChatPage: token_request_ack event
NoveraChatPage->>TokenRequestModal: open=false
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx (1)
59-88: ⚡ Quick winAdd
role="alert"for screen reader announcement.The session limit banner appears dynamically when users hit the token limit. Screen readers should announce this change to assistive technology users.
♿ Proposed accessibility enhancement
<Box sx={{ px: 6, py: 1.5, bgcolor: alpha(colors.red[800], 0.05), display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, }} + role="alert" >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx` around lines 59 - 88, The session limit banner Box component needs to announce dynamically to screen readers when it appears. Add the role="alert" attribute to the Box component (the one with bgcolor set to alpha(colors.red[800], 0.05)) so that assistive technology users are notified when the token limit banner is displayed and becomes visible.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/TokenRequestModal.tsx`:
- Around line 45-54: The TokenRequestModal component's internal state (reason,
isSubmitting, submitted) is not being reset when the parent component closes the
modal externally. Add a useEffect hook that listens to the modal's open/closed
state (the prop controlling visibility from the parent) and resets all three
state variables (reason, isSubmitting, and submitted) back to their initial
values when the modal closes. This ensures that when the modal is opened again,
it displays the input form instead of persisting the previous submission state.
The reset logic should happen in the effect dependency when the modal
transitions from open to closed, separate from the handleClose function which
only runs on user-initiated closes.
- Around line 56-65: The handleSubmit function in TokenRequestModal.tsx lacks
error handling for when the onSubmit call fails. If an exception is thrown
during the await onSubmit(reason.trim()) call, it is silently caught and the
user receives no feedback about the failure. Add a catch block to capture any
errors thrown by onSubmit, store the error message in a state variable (you may
need to add a new error state using useState), and ensure the error is displayed
in the DialogContent so the user is informed of the submission failure. Make
sure the finally block still executes to reset the isSubmitting state regardless
of success or failure.
---
Nitpick comments:
In
`@apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx`:
- Around line 59-88: The session limit banner Box component needs to announce
dynamically to screen readers when it appears. Add the role="alert" attribute to
the Box component (the one with bgcolor set to alpha(colors.red[800], 0.05)) so
that assistive technology users are notified when the token limit banner is
displayed and becomes visible.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 693722a7-a112-4267-bf83-31cdd975ddb3
📒 Files selected for processing (5)
apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsxapps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/TokenRequestModal.tsxapps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsxapps/customer-portal/webapp/src/features/support/types/conversations.tsapps/customer-portal/webapp/src/features/support/types/supportComponents.ts
When a user hits the session token limit, a banner with a "Request More Tokens" button appears in the chat input area. Clicking it opens a modal where they can provide a reason. The request is sent as a token_increase_request WebSocket message (accountId + reason, no token count). The modal closes automatically on token_request_ack from the server. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add useEffect to reset reason, isSubmitting, submitted, and submitError when the modal closes externally (e.g. on token_request_ack) - Add catch block in handleSubmit to display error message to the user instead of silently swallowing onSubmit failures Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
88433f6 to
a2902bc
Compare
Summary
token_increase_requestWebSocket message (accountId + reason). The modal closes automatically ontoken_request_ackfrom the server.Changes
ChatInput.tsx— Session limit banner + "Request More Tokens" buttonTokenRequestModal.tsx— New: reason dialog with success/ack stateNoveraChatPage.tsx— Wire modal, submit handler,token_request_ackeventconversations.ts— ExtendChatWebSocketPayloadto union typesupportComponents.ts— AddonRequestTokenstoChatInputPropsTest plan
TOKEN_WARNING_SESSION_LIMIT_REACHED) — confirm banner and "Request More Tokens" button appear in the chat input areatoken_increase_requestwith correctaccountIdandreasonpayloadtoken_request_ackfrom the server🤖 Generated with Claude Code
Summary by CodeRabbit