Skip to content

[Customer Portal MicroApp] feat: show recent chats/cases by activity, allow replying to chats - #1032

Merged
Rashmika998 merged 10 commits into
wso2-open-operations:v2from
2003dinijay:dinijay/feat/support-page-v2
Jul 6, 2026
Merged

[Customer Portal MicroApp] feat: show recent chats/cases by activity, allow replying to chats#1032
Rashmika998 merged 10 commits into
wso2-open-operations:v2from
2003dinijay:dinijay/feat/support-page-v2

Conversation

@2003dinijay

@2003dinijay 2003dinijay commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

Purpose

The Support page's Chats and Cases dashboard preview widgets were hard-filtered to a fixed set of "outstanding" status IDs and sorted by creation date. Items that changed status after creation (e.g. reopened, or just updated) wouldn't surface in the recent list, and "most recent" didn't reflect actual recent activity. Separately, the chat detail view was read-only — no way to reply within an existing conversation once opened from the Support page.

Goals

  • Show chats and cases in the Support page dashboard preview regardless of status, sorted by most-recently-updated instead of most-recently-created.
  • Allow users to send a follow-up message from the chat detail page instead of only viewing a read-only transcript.

Approach

  • SupportPage.tsx — removed the stateKeys/statusIds filters from ChatItemListContent and CaseItemListContent, and changed sortBy from { field: "createdOn", order: "desc" } to { field: "updatedOn", order: "desc" } for both. updatedOn was already a supported sort field on the backend (ConversationSortField/CaseSortField enums), just unused by the frontend.
  • ChatDetailPage.tsx — added a StickyCommentBar (the same reusable component used on CaseDetailPage.tsx/ChatPage.tsx) wired to the existing chats.send mutation, which was already implemented in services/chats.ts and backed by the existing POST /projects/{id}/conversations/{conversationId}/messages endpoint, but previously unused. On send, the mutation invalidates the chat's comments query so the reply and the AI's response (persisted server-side) appear in the transcript. Includes an onError toast on send failure and disables the input until projectId is resolved (avoids firing the mutation with a null project id on a direct deep-link/hard-refresh).

Known follow-up

The Cases widget is still labeled "Outstanding Cases" / "Active support tickets" (TAB_CONFIG.case) even though it no longer filters by status — left as-is per product decision; worth revisiting the copy in a follow-up if it reads as misleading.

User stories

As a customer portal user, I want to see my most recently active chats and cases on the Support page dashboard regardless of status, and I want to continue a conversation from an existing chat instead of only being able to start new ones.

Release note

Support page dashboard now shows recently updated chats and cases of any status, sorted by last activity. Users can send follow-up messages from an existing chat's detail page.

Documentation

N/A — UI behavior change only, no new user-facing workflow beyond existing chat/case viewing.

Automation tests

  • Unit tests: none added — no existing unit test coverage for these page components to extend.
  • Integration tests: verified via tsc --noEmit (clean); live UI verification not performed in this environment (no local Asgardeo/backend auth configured) — please verify the reply flow and dashboard sorting against a real project before merging.

Security checks

  • Followed secure coding standards in the WSO2 secure engineering guidelines: yes
  • Ran FindSecurityBugs plugin and verified report: not run (frontend-only TypeScript change, no Java/Ballerina touched)
  • Confirmed this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets: yes

Related PRs

N/A — rebased directly on v2; no dependency on other open PRs (the "guard against invalid user timezone" fix referenced during development, #1015, is already merged into v2).

Test environment

Node v26.3.0, macOS 26.5.1, verified via tsc --noEmit only — live browser verification pending (see Automation tests).

Summary by CodeRabbit

  • New Features
    • Chat details include a sticky message composer (supports multiline) and hide it for read-only conversations.
    • Overline fields can now display and copy multiple identifiers.
  • Bug Fixes
    • Sending messages now trims input, blocks sending when unavailable/read-only, shows errors on failure, and refreshes the thread after success.
  • UI / Improvements
    • Chat timestamps now use standard formatted date/time across the conversation view.
    • Message bubbles and their skeletons were refreshed for a cleaner layout.
    • Support tabs for cases/chats now show “most recently updated” results with reduced status filtering.

Copilot AI review requested due to automatic review settings July 3, 2026 09:37
@github-actions github-actions Bot added App/Customer Portal Platform/Microapp Type/New Feature Represents a request or task for a new feature labels Jul 3, 2026
@coderabbitai

coderabbitai Bot commented Jul 3, 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: 6c20f3ea-69ff-4f9d-aef8-7c8d775c532f

📥 Commits

Reviewing files that changed from the base of the PR and between 3a91d25 and fec9db7.

📒 Files selected for processing (1)
  • apps/customer-portal/microapp/src/components/features/detail/OverlineSlot.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/customer-portal/microapp/src/components/features/detail/OverlineSlot.tsx

📝 Walkthrough

Walkthrough

Chat messaging and compose behavior were updated, detail identifiers can now render and copy multiple IDs, and SupportPage now loads Cases and Chats by updated time without the previous status filters.

Changes

Chat messaging and compose flow

Layer / File(s) Summary
Conversation state constants
apps/customer-portal/microapp/src/config/constants.tsx
Defines CONVERSATION_STATE_IDS and READ_ONLY_CONVERSATION_STATUS_IDS alongside the existing exported status arrays.
Message bubble layout
apps/customer-portal/microapp/src/components/features/chat/MessageBubble.tsx, apps/customer-portal/microapp/src/components/shared/TypewriterText.tsx
Reworks message and skeleton layouts around avatar rows, header timestamps, assistant thinking state, and author-specific styling, and renders Markdown hard breaks from newline characters.
Chat page timestamps
apps/customer-portal/microapp/src/pages/ChatPage.tsx
Replaces relative-time timestamp generation with formatted dates for assistant and user messages, and enables multiline composing.
Chat detail send UI
apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx
Adds comment state, send mutation handling, read-only gating, timestamp formatting, and the sticky comment bar.

Detail identifier display

Layer / File(s) Summary
Copyable overline IDs
apps/customer-portal/microapp/src/components/features/detail/OverlineSlot.tsx
Adds optional multi-ID rendering with copy-to-clipboard behavior and keeps the single-ID fallback.
Case detail overline ids
apps/customer-portal/microapp/src/pages/CaseDetailPage.tsx
Passes internal and external case identifiers as an ids array to the overline slot.

Support tab queries

Layer / File(s) Summary
Cases and chats query updates
apps/customer-portal/microapp/src/pages/SupportPage.tsx
Removes the conversations status import and changes the Cases and Chats tab queries to drop status filters and sort by updatedOn descending.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

  • wso2-open-operations/cs-tools#609: Also touches the chat feature area, including ChatDetailPage.tsx and MessageBubble.tsx, with related message rendering and send-flow changes.

Suggested labels: Platform/Web, Area/Frontend

Suggested reviewers: shayanmalinda, chanukaranaba

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main change: recent chats/cases by activity and replying from chat detail.
Description check ✅ Passed The description is largely complete and covers purpose, goals, approach, tests, security, and release notes, with only some optional template sections omitted.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
✨ 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.

@2003dinijay 2003dinijay changed the title [Customer Portal][Microapp] feat: show recent chats/cases by activity, allow replying to chats [Customer Portal Microapp] feat: show recent chats/cases by activity, allow replying to chats Jul 3, 2026

Copilot AI 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.

Pull request overview

Updates the Customer Portal microapp Support experience so dashboard previews reflect most recent activity (not just creation time / “outstanding” statuses), and enables replying within an existing chat conversation from the chat detail view.

Changes:

  • Removed hard “outstanding” status filtering for Support page chat/case preview widgets and switched sorting to updatedOn desc.
  • Added a StickyCommentBar to ChatDetailPage wired to the existing chats.send mutation, with toast error handling and query invalidation to refresh the transcript.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
apps/customer-portal/microapp/src/pages/SupportPage.tsx Removes status-based filtering for chat/case previews and sorts by updatedOn to reflect recent activity.
apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx Adds reply input to chat detail and hooks it up to the send-message mutation + transcript refresh.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@2003dinijay
2003dinijay requested a review from Rashmika998 July 3, 2026 09:42

@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: 1

🤖 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/microapp/src/pages/ChatDetailPage.tsx`:
- Around line 58-61: The send handler in ChatDetailPage checks comment.trim()
but still passes the raw comment into mutation.mutate, so whitespace can be
stored. Update handleSend to use the trimmed value for the mutation payload, and
keep the empty-check based on the same trimmed value so the guard and sent
message stay consistent.
🪄 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: c24659bd-35b2-4291-92ea-0ccb1467c692

📥 Commits

Reviewing files that changed from the base of the PR and between d574f8c and 329dc68.

📒 Files selected for processing (2)
  • apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx
  • apps/customer-portal/microapp/src/pages/SupportPage.tsx

Comment thread apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx
@2003dinijay 2003dinijay changed the title [Customer Portal Microapp] feat: show recent chats/cases by activity, allow replying to chats [Customer Portal MicroApp] feat: show recent chats/cases by activity, allow replying to chats Jul 3, 2026
Give Novera messages the same circular gradient Bot-icon avatar and
no-bubble layout the webapp uses, switch message timestamps from
relative ("5 hours ago") to absolute date/time to match the webapp,
and disable the reply box once a conversation is resolved or converted
to a case.
…ebapp

The webapp's ChatInput disappears entirely (returns null) once a
conversation is closed, rather than showing a disabled input. Mirror
that instead of graying out the box.

@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: 1

🤖 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/microapp/src/pages/ChatPage.tsx`:
- Line 191: The timestamp generation in ChatPage is passing a Date object into
useDateTime().format, which reinterprets it as UTC and can shift the displayed
time. Update the timestamp creation at both call sites in ChatPage to preserve
the instant before formatting, using new Date().toISOString() or equivalent, and
keep the change scoped to the timestamp fields that currently call format(new
Date()).
🪄 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: 8af110e9-1c36-4a35-8633-57e89559689e

📥 Commits

Reviewing files that changed from the base of the PR and between 329dc68 and 3708610.

📒 Files selected for processing (4)
  • apps/customer-portal/microapp/src/components/features/chat/MessageBubble.tsx
  • apps/customer-portal/microapp/src/config/constants.tsx
  • apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx
  • apps/customer-portal/microapp/src/pages/ChatPage.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx

Comment thread apps/customer-portal/microapp/src/pages/ChatPage.tsx
Chat input already requires the send button to submit (Enter is not
bound to send). Add an opt-in multiline mode to StickyCommentBar and
enable it for the two chat surfaces so Enter now grows the textarea
with a newline, matching normal textarea behavior, instead of being a
no-op. Other StickyCommentBar consumers (case/service/engagement/sra
detail pages) are unaffected since multiline defaults to off.
CommonMark collapses single newlines into a space, so a message typed
across multiple lines (now possible since Enter inserts a newline)
rendered back as one line. Convert each newline to a markdown hard
break before rendering.
CaseDetailPage shows two IDs (internal + external case number) in the
header. Add a single copy icon next to them that copies both IDs
together, with a brief checkmark confirmation.
Wrap the case-ID copy button in a Tooltip that reads "Copy" and flips
to "Copied!" on click, and bump the icon from 14px to 16px.
MUI Tooltip only shows while actively hovered, so it could vanish
right after the click if the cursor moved even slightly. Control the
open state so it stays visible for the full 2s confirmation window
regardless of hover.

@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/microapp/src/components/features/detail/StickyCommentBar.tsx (1)

44-61: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Multiline + default submitOnEnter is a silent footgun.

submitOnEnter defaults to true, so any future caller enabling multiline without explicitly setting submitOnEnter={false} will have Enter always submit (via preventDefault), silently blocking newline entry despite multiline being on. Consider deriving the newline-vs-submit behavior directly from multiline (e.g., only allow Enter-to-submit when not multiline, or support Shift+Enter to insert a newline while Enter submits) so the two props can't drift out of sync.

♻️ Example: couple behavior to `multiline` instead of relying on caller-supplied `submitOnEnter`
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    if (submitOnEnter && event.key === "Enter" && hasContent) {
-      event.preventDefault();
-      send();
-    }
-  };
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || !hasContent) return;
+    const shouldSubmit = multiline ? submitOnEnter && !event.shiftKey : submitOnEnter;
+    if (shouldSubmit) {
+      event.preventDefault();
+      send();
+    }
+  };
🤖 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/microapp/src/components/features/detail/StickyCommentBar.tsx`
around lines 44 - 61, The Enter handling in StickyCommentBar is currently driven
by submitOnEnter alone, which can conflict with multiline and block newline
entry. Update handleKeyDown (and any related send logic in StickyCommentBar) so
Enter-to-submit is derived from multiline behavior instead of relying on callers
to keep submitOnEnter in sync, for example by disabling plain Enter submit when
multiline is true or by supporting Shift+Enter for newlines. Keep the behavior
coupled to the StickyCommentBar props so future multiline usage cannot silently
prevent text entry.
🤖 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/microapp/src/components/features/detail/OverlineSlot.tsx`:
- Around line 43-51: The copy feedback timer in OverlineSlot’s handleCopy has no
cleanup, so add a ref-backed timeout in the component and clear it before
scheduling a new one and when the component unmounts. Use useRef and useEffect
in OverlineSlot to store the timer id, cancel any existing timeout before
calling setTimeout, and return a cleanup function that clears the pending timer
so setCopied(false) is never called after unmount or after a newer copy action.

In `@apps/customer-portal/microapp/src/pages/CaseDetailPage.tsx`:
- Around line 144-149: Restore the `id` fallback in `CaseDetailPage` by changing
the `OverlineSlot` props so it still receives `data.internalId` when
`data.number` is missing. The issue is in the `ids` conditional passed to
`OverlineSlot`, which currently becomes `undefined` and prevents the fallback
display; update the `ids` logic in `CaseDetailPage` so the component can render
the internal ID as intended.

---

Nitpick comments:
In
`@apps/customer-portal/microapp/src/components/features/detail/StickyCommentBar.tsx`:
- Around line 44-61: The Enter handling in StickyCommentBar is currently driven
by submitOnEnter alone, which can conflict with multiline and block newline
entry. Update handleKeyDown (and any related send logic in StickyCommentBar) so
Enter-to-submit is derived from multiline behavior instead of relying on callers
to keep submitOnEnter in sync, for example by disabling plain Enter submit when
multiline is true or by supporting Shift+Enter for newlines. Keep the behavior
coupled to the StickyCommentBar props so future multiline usage cannot silently
prevent text entry.
🪄 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: 505a281a-7545-4c88-8093-8493b7faf391

📥 Commits

Reviewing files that changed from the base of the PR and between 3708610 and 3a91d25.

📒 Files selected for processing (6)
  • apps/customer-portal/microapp/src/components/features/detail/OverlineSlot.tsx
  • apps/customer-portal/microapp/src/components/features/detail/StickyCommentBar.tsx
  • apps/customer-portal/microapp/src/components/shared/TypewriterText.tsx
  • apps/customer-portal/microapp/src/pages/CaseDetailPage.tsx
  • apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx
  • apps/customer-portal/microapp/src/pages/ChatPage.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/customer-portal/microapp/src/pages/ChatPage.tsx
  • apps/customer-portal/microapp/src/pages/ChatDetailPage.tsx

Comment thread apps/customer-portal/microapp/src/pages/CaseDetailPage.tsx
…verlineSlot.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@Rashmika998
Rashmika998 merged commit 8927601 into wso2-open-operations:v2 Jul 6, 2026
1 check passed
@coderabbitai coderabbitai Bot mentioned this pull request Jul 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

App/Customer Portal Platform/Microapp Type/New Feature Represents a request or task for a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants