Create a generic <Chat /> component, and use it for account appeal#12360
Create a generic <Chat /> component, and use it for account appeal#12360sebastianekstrom wants to merge 7 commits into
<Chat /> component, and use it for account appeal#12360Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
<Chat /> for account appeal<Chat /> component, and use it for account appeal
There was a problem hiding this comment.
3 issues found across 31 files
Confidence score: 3/5
- In
clients/apps/web/src/components/FileUpload/Upload.ts, a cancel/finalize race can still emit success, so canceled uploads may appear completed and leave UI/state inconsistent; gate success emission on final canceled state (or re-check abort signal) before merging. - In
clients/apps/web/src/components/Organization/HumanReviewCase/useUnreadTitleBadge.ts, initializing from the current unread count instead of the persisted seen baseline can suppress real unread indicators when the tab mounts unfocused, causing users to miss messages; restore initialization from persisted seen state and add a mount/unfocused regression test. - In
clients/apps/web/src/components/Chat/MessageThread.tsx, per-messageattachments.filterintroduces O(messages×attachments) render work that can degrade thread performance as data grows; pre-group attachments bymessageIdonce per render and use constant-time lookup.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="clients/apps/web/src/components/Chat/MessageThread.tsx">
<violation number="1" location="clients/apps/web/src/components/Chat/MessageThread.tsx:73">
P2: Per-message `attachments.filter` creates quadratic render cost. Pre-group attachments by `messageId` once per render and do O(1) lookup per bubble.</violation>
</file>
<file name="clients/apps/web/src/components/Organization/HumanReviewCase/useUnreadTitleBadge.ts">
<violation number="1" location="clients/apps/web/src/components/Organization/HumanReviewCase/useUnreadTitleBadge.ts:10">
P2: Unread title badge baseline uses current count instead of persisted seen count, hiding existing unread messages when mounted while tab is unfocused.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| <ChatBubble | ||
| key={message.id} | ||
| message={message} | ||
| attachments={attachments.filter( |
There was a problem hiding this comment.
P2: Per-message attachments.filter creates quadratic render cost. Pre-group attachments by messageId once per render and do O(1) lookup per bubble.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At clients/apps/web/src/components/Chat/MessageThread.tsx, line 73:
<comment>Per-message `attachments.filter` creates quadratic render cost. Pre-group attachments by `messageId` once per render and do O(1) lookup per bubble.</comment>
<file context>
@@ -0,0 +1,86 @@
+ <ChatBubble
+ key={message.id}
+ message={message}
+ attachments={attachments.filter(
+ (attachment) => attachment.messageId === message.id,
+ )}
</file context>
| messages: schemas['SupportCaseMessage'][] | undefined, | ||
| ) => { | ||
| const count = (messages ?? []).filter(isNotifiable).length | ||
| const seenCountRef = useRef(count) |
There was a problem hiding this comment.
P2: Unread title badge baseline uses current count instead of persisted seen count, hiding existing unread messages when mounted while tab is unfocused.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At clients/apps/web/src/components/Organization/HumanReviewCase/useUnreadTitleBadge.ts, line 10:
<comment>Unread title badge baseline uses current count instead of persisted seen count, hiding existing unread messages when mounted while tab is unfocused.</comment>
<file context>
@@ -0,0 +1,53 @@
+ messages: schemas['SupportCaseMessage'][] | undefined,
+) => {
+ const count = (messages ?? []).filter(isNotifiable).length
+ const seenCountRef = useRef(count)
+ const latestCountRef = useRef(count)
+ const baseTitleRef = useRef<string | null>(null)
</file context>
| // Gates the merchant-facing human-review case flow shown after a denied | ||
| // appeal. Hardcoded off until the dedicated flow is finished. | ||
| const NEW_CASE_FLOW_ENABLED = false | ||
| const NEW_CASE_FLOW_ENABLED = true |
There was a problem hiding this comment.
Will revert this before merging
|
Preview Environment |
7517e2a to
bfe933a
Compare
bfe933a to
eccef10
Compare
OpenAPI ChangesNo changes detected in the OpenAPI schema. |
There was a problem hiding this comment.
0 issues found across 3 files (changes from recent commits).
Requires human review: Auto-approval blocked by 2 unresolved issues from previous reviews.
Re-trigger cubic
There was a problem hiding this comment.
0 issues found across 1 file (changes from recent commits).
Requires human review: Auto-approval blocked by 2 unresolved issues from previous reviews.
Re-trigger cubic
There was a problem hiding this comment.
0 issues found across 3 files (changes from recent commits).
Requires human review: Auto-approval blocked by 2 unresolved issues from previous reviews.
Re-trigger cubic
Summary
This PR will do a somewhat huge refactor of the current appeal chat. However it's not launched to anyone yet so no risk of regression. Changes made are:
<Chat />component(X)in the tab barFinancein the navFull demo
demoooooo.mov
Summary by cubic
Adds a reusable
Chatfor account appeals with attachments, drag-and-drop, unread indicators, and a new empty state to start conversations. Migrates the appeal case UI to this component, launches the new flow, and improves uploads, scrolling, polling, and line-break rendering in messages.New Features
Chatwith grouped bubbles, avatars, image/file previews, smooth animations, line-break preserving text, custom message rendering, drag-and-drop overlay, and an empty state.Refactors
Chatvia an adapter; replies can include optionalfile_ids; initial appeal uses a minimum length with a counter.useAppealCasepolling is visibility-aware with adjustable intervals and stops when the thread is closed.Written for commit 706a75a. Summary will update on new commits.