Skip to content

[Customer Portal] Add token increase request feature for Novera AI chat - #900

Merged
dilshanfardil merged 2 commits into
wso2-open-operations:mainfrom
SasmithaDilshan:feature/case-date-range-filters
Jun 22, 2026
Merged

dilshanfardil merged 2 commits into
wso2-open-operations:mainfrom
SasmithaDilshan:feature/case-date-range-filters

Conversation

@SasmithaDilshan

@SasmithaDilshan SasmithaDilshan commented Jun 20, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Novera chat token increase request — When a user hits the session token limit, a banner appears in the chat input area with a "Request More Tokens" button. Clicking it opens a modal where the user enters a reason; the request is sent as a token_increase_request WebSocket message (accountId + reason). The modal closes automatically on token_request_ack from the server.

Changes

  • ChatInput.tsx — Session limit banner + "Request More Tokens" button
  • TokenRequestModal.tsx — New: reason dialog with success/ack state
  • NoveraChatPage.tsx — Wire modal, submit handler, token_request_ack event
  • conversations.ts — Extend ChatWebSocketPayload to union type
  • supportComponents.ts — Add onRequestTokens to ChatInputProps

Test plan

  • Trigger session limit (or mock TOKEN_WARNING_SESSION_LIMIT_REACHED) — confirm banner and "Request More Tokens" button appear in the chat input area
  • Click button, enter a reason, submit — verify WebSocket sends token_increase_request with correct accountId and reason payload
  • Confirm modal closes automatically on token_request_ack from the server

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Added token request functionality: Users can now request additional chat session tokens when hitting session limits. A "Request More Tokens" button displays when the limit is reached, allowing users to submit a reason for their request through a modal dialog.

@coderabbitai

coderabbitai Bot commented Jun 20, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 19f84ab0-b256-4bc1-a0d6-77350b96aed9

📥 Commits

Reviewing files that changed from the base of the PR and between acc2800 and a2902bc.

📒 Files selected for processing (5)
  • apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx
  • apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/TokenRequestModal.tsx
  • apps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsx
  • apps/customer-portal/webapp/src/features/support/types/conversations.ts
  • apps/customer-portal/webapp/src/features/support/types/supportComponents.ts
🚧 Files skipped from review as they are similar to previous changes (5)
  • apps/customer-portal/webapp/src/features/support/types/supportComponents.ts
  • apps/customer-portal/webapp/src/features/support/types/conversations.ts
  • apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx
  • apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/TokenRequestModal.tsx
  • apps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsx

📝 Walkthrough

Walkthrough

Adds a token request flow to the Novera AI chat. ChatWebSocketPayload becomes a discriminated union with a new "token_increase_request" variant. A new TokenRequestModal component collects a reason from the user. ChatInput gains a session-limit banner with a "Request More Tokens" button, and NoveraChatPage orchestrates the modal state and WebSocket messaging.

Changes

Token Request Feature

Layer / File(s) Summary
WebSocket payload union and ChatInputProps extension
apps/customer-portal/webapp/src/features/support/types/conversations.ts, apps/customer-portal/webapp/src/features/support/types/supportComponents.ts
ChatWebSocketPayload is converted from a single object to a discriminated union adding a "token_increase_request" variant (accountId, reason). ChatInputProps gains an optional onRequestTokens?: () => void prop.
TokenRequestModal component
apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/TokenRequestModal.tsx
New modal component with reason, isSubmitting, and submitted state. Validates non-empty trimmed reason, calls async onSubmit(reason), blocks close during submission, and switches between input form and confirmation message after success.
ChatInput session-limit banner and NoveraChatPage orchestration
apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx, apps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsx
ChatInput renders a "Session Limit Banner" when typingDisabled is true, conditionally showing a "Request More Tokens" button bound to onRequestTokens. NoveraChatPage adds isTokenRequestModalOpen state, a handleTokenRequestSubmit callback that connects and sends token_increase_request over WebSocket, a token_request_ack event handler that closes the modal, and renders TokenRequestModal wired to these.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 Hop hop, the tokens ran low,
A banner appeared with a friendly glow.
Type your reason, click submit with care,
The WebSocket whispers a message through air.
Ack comes back, the modal takes flight—
More tokens granted, keep chatting all night! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is missing most required sections from the template (Purpose, Goals, Release notes, Documentation, Training, etc.), providing only a summary and test plan. Add required template sections including Purpose with issue links, Goals, Release note, Documentation, Training, Certification, Marketing, Security checks, and other applicable sections from the template.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main feature being added: token increase request functionality for Novera AI chat in the customer portal.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 win

Add 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

📥 Commits

Reviewing files that changed from the base of the PR and between d6f3ea7 and acc2800.

📒 Files selected for processing (5)
  • apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/ChatInput.tsx
  • apps/customer-portal/webapp/src/features/support/components/novera-ai-assistant/novera-chat-page/TokenRequestModal.tsx
  • apps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsx
  • apps/customer-portal/webapp/src/features/support/types/conversations.ts
  • apps/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>
@SasmithaDilshan SasmithaDilshan changed the title Add date range filters for SR/Engagements, time tracking export, and Novera token request Add token increase request feature for Novera AI chat Jun 21, 2026
- 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>
@SasmithaDilshan
SasmithaDilshan force-pushed the feature/case-date-range-filters branch from 88433f6 to a2902bc Compare June 21, 2026 06:15
@SasmithaDilshan SasmithaDilshan changed the title Add token increase request feature for Novera AI chat [Customer Portal] Add token increase request feature for Novera AI chat Jun 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants