refactor: architectural overhaul, memory leak fixes, and UI consistency

[vivekyadav-3]

I've been spending more time diving into the
EmbeddedChat
package, and the deeper I go, the more opportunities I find to boost its stability and performance. I've updated this PR to include several critical refinements that I believe make the widget feel much more refined and production-ready.
What's new in this update?
Auth Stability: I've unified the onAuthChange triggers in
ChatBody.js
. By consolidating these into a single managed effect lifecycle, we avoid redundant calls and ensure that listeners are cleaned up properly.
Fixing Memory Leaks: I caught a bug in
ChatInput.js
where the typing indicator was creating "zombie" timeouts on every keystroke. I've implemented a robust cleanup logic that prevents these leaks and ensures the status clears correctly.
Performance Polish: I refactored the render loop in the
MessageAggregator
to remove unnecessary side-effects. This significantly reduces re-renders, making message grouping and scrolling feel a lot snappier.
UI Harmony: Updated the
ChatHeader
to use our dedicated
Avatar
component instead of a raw tag. It’s a small change, but it ensures our design system is consistent across the entire header.
Hardening MFA: Further refined the
useRCAuth
logic to handle TOTP/MFA states more gracefully, providing much better feedback for secure logins.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull request overview

This pull request aims to optimize authentication listeners and improve message rendering reliability in EmbeddedChat. The changes consolidate redundant auth listeners, refactor message deduplication logic, improve memoization for message toolbox permissions, and enhance login error handling.

Changes:

• Consolidated multiple auth listeners in ChatBody.js into a single lifecycle to prevent listener accumulation
• Refactored MessageAggregator.js to move side effects into useEffect and optimize message deduplication
• Improved useMemo dependencies in MessageToolbox.js to ensure permission-based UI updates reflect role changes immediately
• Enhanced TOTP/MFA flow error handling in useRCAuth.js with clearer state transitions and user feedback

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.

File	Description
packages/react/src/views/MessageAggregators/common/MessageAggregator.js	Optimized theme destructuring, moved message render state logic to useEffect, and attempted to extract message deduplication into a reusable variable
packages/react/src/views/Message/MessageToolbox.js	Wrapped permission checks in useMemo with complete dependencies, changed string quotes to double quotes throughout
packages/react/src/views/ChatBody/ChatBody.js	Consolidated three separate auth listener useEffects into one, improved scroll-to-bottom logic with position awareness
packages/react/src/hooks/useRCAuth.js	Restructured login error handling with explicit returns for each state, improved TOTP flow messages and state cleanup

---

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

[Copilot]

Quote style violation: This file changed from single quotes to double quotes for all string literals, which violates the project's Prettier configuration. The .prettierrc file explicitly specifies "singleQuote": true. All string literals should use single quotes to match the project's code style. Run Prettier on this file to fix the formatting.

[Copilot]

Incorrect dependency in useEffect: messageListRef should not be included in the dependency array. Ref objects have stable references across renders and don't trigger re-renders when their .current value changes. Including refs in dependency arrays is incorrect and can cause unexpected behavior. Remove messageListRef from this dependency array.

[Copilot]

Incorrect dependency in useEffect: messageListRef should not be included in the dependency array. Ref objects have stable references across renders and should not be dependencies. This can cause the event listener to be unnecessarily removed and re-added. Remove messageListRef from this dependency array.

[Copilot]

Incorrect dependency in useEffect: permissionsRef should not be included in the dependency array. Ref objects like permissionsRef have stable references across renders and don't trigger re-renders when their .current value changes. Including refs in dependency arrays is unnecessary and can violate React's rules of hooks. Remove permissionsRef from the dependency array.

Suggested change

permissionsRef,

[Copilot]

The scroll behavior logic has a potential issue. The condition isInitialLoad = messages.length > 0 && scrollTop === 0 may incorrectly trigger scrolling to bottom when the user has scrolled to the top to load older messages. This could disrupt the user's reading experience by unexpectedly jumping to the bottom when old messages are loaded. Consider checking if this is truly an initial load rather than just being at scroll position 0.

[Copilot]

Missing useEffect import from React. The code uses useEffect on line 130 but it's not included in the import statement. This will cause a runtime error.

[Copilot]

Missing definition of uniqueMessageList. The code references uniqueMessageList on lines 131, 133, and 174, but this variable is never defined. Based on the original code, this should be a memoized deduplication of messageList by message _id. Add the missing useMemo definition to compute the unique message list.

[Copilot]

Dead code: isVisibleForMessageType is computed in the useMemo but is never actually used anywhere in the component. This adds unnecessary computation overhead. Either remove this unused variable or use it where intended (possibly to control visibility of certain toolbox options).

[Copilot]

The catch-all error handling at line 78-81 may inadvertently catch successful login responses that don't match the expected format. If res.status !== 'success' and !res.me and !res.error, the function will not return anything, potentially leaving the UI in an inconsistent state. Consider adding an explicit return statement for this case or logging a warning when an unexpected response format is received.

Suggested change

	}
	}
	// Handle unexpected response formats to avoid returning undefined
	console.warn('Unexpected login response format:', res);
	return {
	status: 'error',
	error: 'Unexpected response format received from authentication server.',
	};