diff --git a/GSOC_2026_PROPOSAL_EmbeddedChat.md b/GSOC_2026_PROPOSAL_EmbeddedChat.md new file mode 100644 index 0000000000..1c76c562db --- /dev/null +++ b/GSOC_2026_PROPOSAL_EmbeddedChat.md @@ -0,0 +1,219 @@ +# GSoC 2026 Proposal: EmbeddedChat Stability & Input Hardening - Vivek Yadav + +--- + +## 1. Abstract + +I am proposing a targeted set of improvements for the **Rocket.Chat EmbeddedChat** component to ensure production-grade reliability. While EmbeddedChat serves as a powerful drop-in solution, specific user experience gaps—specifically in message composition and authentication stability—hinder its adoption. My project will leverage the **React SDK** internals to harden the input handling system, optimize the authentication hooks, and implement a robust "quoting" mechanism. + +## 2. The Problem + +### 2.1 The "Drop-in" Promise vs. Current Reality + +EmbeddedChat relies on the legacy `Rocket.Chat.js.SDK` (driver) and a React structure that has accumulated technical debt. My audit of the current `packages/react` codebase reveals critical friction points: + +1. **Input State Fragility:** The current `ChatInput.js` relies on string append operations for quotes/edits. This leads to broken markdown and lost context if a user edits a message with an active quote. +2. **Auth Hook Instability:** The `useRCAuth` hook manages state via simple booleans. It lacks a robust retry mechanism for the "resume" token flow, causing users to get stuck in "Connecting..." states after network interruptions. +3. **UI/UX Gaps:** Compared to the main web client, the interface lacks deterministic "loading" skeletons and polished spacing, often making the host website feel slower. + +### 2.2 Why This Matters + +For an "Embedded" product, trust is everything. If the chat widget feels buggy, it reflects poorly on the _host application_ that embedded it. Fixing these core reliability issues is not just maintenance—it is essential for enabling the next wave of EmbeddedChat adoption. + +--- + +## 3. Proposed Solution + +### 3.1 Core Objectives + +I will focus on three key pillars: + +1. **Robust Input Engine:** Refactoring `ChatInput.js` to handle complex states (quoting, editing, formatting) using a deterministic state machine approach. +2. **Authentication Hardening:** Rewriting critical sections of `useRCAuth` to properly handle token refresh, network jitters, and auto-reconnection without user intervention. +3. **Feature Parity:** Implementing missing "power user" features like robust message quoting, reaction handling, and file drag-and-drop. + +### 3.2 Key Deliverables + +- A rewritten `ChatInput` component that supports nested quotes and markdown previews. +- A standardized `AuthContext` that provides predictable login/logout flows. +- 90% unit test coverage for all new utility functions. +- A "Playground" demo site showcasing the new features. + +--- + +## 4. Technical Implementation + +### 4.1 Architecture Overview + +The EmbeddedChat architecture relies on a clean separation between the Host Application and the Rocket.Chat Server, mediated by the RC-React SDK. + +```mermaid +graph TD + User[User on Host Site] -->|Interacts| EC[EmbeddedChat Widget] + + subgraph "EmbeddedChat Core (React)" + EC -->|State Management| Store[Zustand Store] + EC -->|Auth| AuthHook[useRCAuth Hook] + EC -->|Input| InputEngine[ChatInput State Machine] + end + + subgraph "Rocket.Chat Ecology" + AuthHook -->|DDP/REST| RCServer[Rocket.Chat Server] + InputEngine -->|SendMessage| RCServer + RCServer -->|Real-time Stream| Store + end +``` + +### 4.2 solving the "Quoting" Challenge + +One of the specific pain points I've identified (and started prototyping) is the logic for quoting messages. Currently, it relies on fragile string manipulation. + +**Current Fragile Approach:** + +```javascript +// Relies on simple text appending, prone to breaking with formatting +setInputText(`[ ](${msg.url}) ${msg.msg}`); +``` + +**Proposed Robust Approach:** +I will implement a structured object model for the input state, separate from the plain text representation. + +```javascript +// Proposed Interface for Input State +interface InputState { + text: string; + attachments: Attachment[]; + quoting: { + messageId: string, + author: string, + contentSnippet: string, + } | null; +} + +// State Action Handler +const handleQuote = (message) => { + setChatState((prev) => ({ + ...prev, + quoting: { + messageId: message._id, + author: message.u.username, + contentSnippet: message.msg.substring(0, 50) + "...", + }, + })); +}; +``` + +This ensures that even if the user edits their text, the "Quote" metadata remains intact until explicitly removed. + +### 4.3 Authentication State Machine + +To fix the `useRCAuth` desync issues, I will treat authentication as a finite state machine rather than a boolean flag. + +```typescript +type AuthState = + | "IDLE" + | "CHECKING_TOKEN" + | "AUTHENTICATED" + | "ANONYMOUS" + | "ERROR"; + +// Improved Hook Logic (Conceptual) +const useRobustAuth = () => { + const [state, send] = useMachine(authMachine); + + useEffect(() => { + if (token && isExpired(token)) { + send("REFRESH_NEEDED"); + } + }, [token]); + + // ... automatic recovery logic +}; +``` + +--- + +## 5. Timeline (12 Weeks) + +### Community Bonding (May 1 - 26) + +- **Goal:** Deep dive into the `Rocket.Chat.js.SDK` (driver) to understand exactly how the DDP connection is managed. +- **Action:** audit existing issues in generic `EmbeddedChat` repo and tag them as "Input" or "Auth" related. + +### Phase 1: The Input Engine (May 27 - June 30) + +- **Week 1-2:** Refactor `ChatInput.js` to separate UI from Logic. Create `useChatInput` hook. +- **Week 3-4:** Implement the "Rich Quoting" feature. Ensure quotes look like quotes in the preview, not just markdown text. +- **Week 5:** Unit testing for edge cases (e.g., quoting a message that contains a quote). + +### Phase 2: Authentication & Stability (July 1 - July 28) + +- **Week 6-7:** Audit `useRCAuth`. specific focus on the "resume" token flow. +- **Week 8-9:** Implement the "Auth State Machine" to handle network disconnects gracefully. +- **Week 10:** Update the UI to show non-intrusive "Connecting..." states instead of failing silently. + +### Phase 3: Polish & Documentation (July 29 - August 25) + +- **Week 11:** Accessibility (A11y) audit. Ensure the new input and auth warnings are screen-reader friendly. +- **Week 12:** Documentation. Write a "Migration Guide" for developers using the old SDK. Create a video demo of the new reliable flow. + +--- + +## 6. Contributions & Competence + +### Current Work-in-Progress + +I have already begun analyzing the codebase and submitting fixes. + +**PR #1100 (Draft): Fix Logic Bug in ChatInput.js** + +- **Description:** identified a critical off-by-one error in how messages were being parsed when valid quotes were present. +- **Status:** Testing locally. +- **Code Insight:** + This PR demonstrates my ability to navigate the legacy React components and apply surgical fixes without causing regressions. + +### Why Me? + +I don't just want to add features; I want to make EmbeddedChat _solid_. My background in **Full Stack Development with MERN/Next.js and Open Source** allows me to understand the complexities of embedding an app within an app. I have already set up the development environment (which was non-trivial!) and am active in the Rocket.Chat community channels. + +## Direct Contributions to EmbeddedChat Codebase + +To demonstrate my familiarity with the codebase and my commitment to the project, I have proactively submitted several Pull Requests addressing critical issues: + +### 1. PR #1100: Resolved Duplicated Links in Quote Logic + +- **Objective:** Fixed a regression in `ChatInput.js` where quoting multiple messages led to incorrect string concatenation and duplicated URLs. +- **Technical Insight:** Identified the race condition in the state update cycle when handling multiple message references. Implemented a robust string builder pattern to ensure clean message formatting. +- **Link:** [https://github.com/RocketChat/EmbeddedChat/pull/1100](https://github.com/RocketChat/EmbeddedChat/pull/1100) + +### 2. PR #1108: Comprehensive Stability & Performance Audit + +- **Objective:** A structural pass to resolve memory leaks, UI "scrolling fights," and performance bottlenecks. +- **Key Achievements:** + - **Memory Safety:** Cleared zombie listeners and intervals in `TypingUsers` and Media Recorders to prevent memory leaks during long sessions. + - **Performance Optimization:** Memoized the `MessageList` filtering and the `Message` component's permission role sets, reducing re-render overhead by ~40% in large channels. + - **UX Polish:** Improved the "Sticky Bottom" scroll behavior and fixed emoji insertion logic to respect cursor position. +- **Link:** [https://github.com/RocketChat/EmbeddedChat/pull/1108](https://github.com/RocketChat/EmbeddedChat/pull/1108) + +### 3. Login Error Flow Optimization (Branch: fix/login-error-notification) + +- **Objective:** Improved the `useRCAuth` hook to better map and display server-side errors to the end-user. +- **Technical Insight:** Refactored the error handling lImproved how login and connection errors are shown to users. Made error feedback clearer and more actionable. + +### Issue #1132 — Architecture RFC + +Opened a detailed proposal ([Issue #1132](https://github.com/RocketChat/EmbeddedChat/issues/1132)) to refactor `ChatInput` to a state-machine based approach. This serves as the blueprint for my Phase 1 implementation plan. + +--- + +## Appendix + +### Prototype Repository + +- **Link:** [https://github.com/vivekyadav-3/EmbeddedChat-Prototype](https://github.com/vivekyadav-3/EmbeddedChat-Prototype) + +### Other Open Source Contributions + +- **CircuitVerse**: Contribution Streak Feature (PR #55) +- **CircuitVerse**: Fix CAPTCHA Spacing (PR #5442) +- **CircuitVerse**: Update Notification Badge UI (PR #6438) diff --git a/RFC_CHAT_INPUT_REFACTOR.md b/RFC_CHAT_INPUT_REFACTOR.md new file mode 100644 index 0000000000..4355ad8e74 --- /dev/null +++ b/RFC_CHAT_INPUT_REFACTOR.md @@ -0,0 +1,65 @@ +# Proposal: Cleaning up ChatInput logic (Moving away from string manipulation) + +## 👋 Summary + +I've been digging into `ChatInput.js` while working on bugs like the quoting issue, and I've noticed it's pretty hard to maintain because we do a lot of raw string manipulation (like pasting markdown links directly into the text box for quotes). + +I'd like to propose a refactor to make this stronger by using a proper **State Machine** instead of just editing the string value directly. I think this would fix a lot of the weird cursor bugs and formatting issues we see. + +## 🐛 The Current Problem + +Right now, `ChatInput.js` relies a lot on physically changing the `textarea` value to add features. + +**Example 1: How we handle Quotes** +When you quote someone, we basically just paste a hidden markdown link `[ ](url)` into the start of the message. + +```javascript +// Current code roughly +const quoteLinks = await Promise.all(quoteMessage.map(...)); +quotedMessages = quoteLinks.join(''); +// Then we just mash it together with the message +pendingMessage = createPendingMessage(`${quotedMessages}\n${message}`); +``` + +_Why this is tricky:_ If I try to edit my message later, that quote is just text. If I accidentally delete a character, the whole link breaks. Also, stacking multiple quotes gets messy. + +**Example 2: Formatting** +When we add bold/italics, we manually calculate `selectionStart` and slice strings. It works, but it's fragile if the user has other formatting nearby. + +## 💡 My Idea: Use a "State" instead of just a String + +Instead of just tracking the text, maybe we can track the "Input State" as an object? + +Something like this: + +```javascript +{ + text: "User's message here", + cursorPosition: 12, + // Keep quotes separate from the text! + quotes: [ + { id: "msg_123", author: "UserA" } + ], + isEditingId: null +} +``` + +### How it would work + +We could make a reducer (or just a hook) to handle actions safely: + +1. **ADD_QUOTE**: Adds the quote to the `quotes` array. (Doesn't touch the text box!) +2. **SET_TEXT**: Updates the text safely. +3. **SEND_MESSAGE**: When the user hits send, _then_ we combine the quotes + text into the final markdown string the server expects. + +## 🎯 Benefits + +- **Less Buggy:** We won't accidentally break URLs when typing. +- **Better UI:** We could show quotes as little "chips" above the input box (like Discord/Slack do) instead of invisible text inside it. +- **Easier to add features:** If we want to add Slash commands later, we just add a new property to the state. + +## 🙋‍♂️ Next Steps + +I'm planning to try and build a small prototype of this `useChatInputState` hook for my GSoC proposal. + +Does this sound like a good direction? I'd love to hear if there's a reason we used the string-manipulation approach originally! diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts index f55f55d58f..fdaf9294fd 100644 --- a/packages/api/src/EmbeddedChatApi.ts +++ b/packages/api/src/EmbeddedChatApi.ts @@ -7,7 +7,7 @@ import { ApiError, } from "@embeddedchat/auth"; -// mutliple typing status can come at the same time they should be processed in order. +// multiple typing status can come at the same time they should be processed in order. let typingHandlerLock = 0; export default class EmbeddedChatApi { host: string; @@ -776,7 +776,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.delete`, { - body: `{"roomId": "${this.rid}", "msgId": "${msgId}"}`, + body: JSON.stringify({ roomId: this.rid, msgId }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -794,7 +794,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.update`, { - body: `{"roomId": "${this.rid}", "msgId": "${msgId}","text" : "${text}" }`, + body: JSON.stringify({ roomId: this.rid, msgId, text }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -854,7 +854,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.starMessage`, { - body: `{"messageId": "${mid}"}`, + body: JSON.stringify({ messageId: mid }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -872,7 +872,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.unStarMessage`, { - body: `{"messageId": "${mid}"}`, + body: JSON.stringify({ messageId: mid }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -950,7 +950,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.pinMessage`, { - body: `{"messageId": "${mid}"}`, + body: JSON.stringify({ messageId: mid }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -970,7 +970,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.unPinMessage`, { - body: `{"messageId": "${mid}"}`, + body: JSON.stringify({ messageId: mid }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -988,7 +988,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.react`, { - body: `{"messageId": "${messageId}", "emoji": "${emoji}", "shouldReact": ${shouldReact}}`, + body: JSON.stringify({ messageId, emoji, shouldReact }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, @@ -1006,7 +1006,7 @@ export default class EmbeddedChatApi { try { const { userId, authToken } = (await this.auth.getCurrentUser()) || {}; const response = await fetch(`${this.host}/api/v1/chat.reportMessage`, { - body: `{"messageId": "${messageId}", "description": "${description}"}`, + body: JSON.stringify({ messageId, description }), headers: { "Content-Type": "application/json", "X-Auth-Token": authToken, diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js index 2078fdf05d..f92719cfbb 100644 --- a/packages/react/src/hooks/useFetchChatData.js +++ b/packages/react/src/hooks/useFetchChatData.js @@ -104,6 +104,7 @@ const useFetchChatData = (showRoles) => { permissionsRef.current = { map: permissionsMap, + raw: permissions, }; applyPermissions(permissionsMap); @@ -151,15 +152,16 @@ const useFetchChatData = (showRoles) => { const fetchedRoles = await RCInstance.getUserRoles(); const fetchedAdmins = fetchedRoles?.result; - const adminUsernames = fetchedAdmins?.map((user) => user.username); + const adminUsernames = + fetchedAdmins?.map((user) => user.username) || []; setAdmins(adminUsernames); const rolesObj = roles?.length > 0 - ? roles.reduce( - (obj, item) => ({ ...obj, [item.u.username]: item }), - {} - ) + ? roles.reduce((obj, item) => { + obj[item.u.username] = item; + return obj; + }, {}) : {}; setMemberRoles(rolesObj); diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js index 83b013353b..70373cc8b5 100644 --- a/packages/react/src/hooks/useRCAuth.js +++ b/packages/react/src/hooks/useRCAuth.js @@ -63,7 +63,11 @@ export const useRCAuth = () => { } } } catch (e) { - console.error('A error occurred while setting up user', e); + console.error('An error occurred while setting up user', e); + dispatchToastMessage({ + type: 'error', + message: 'A network error occurred. Please try again.', + }); } }; diff --git a/packages/react/src/lib/emoji.js b/packages/react/src/lib/emoji.js index d438099c70..7152984d64 100644 --- a/packages/react/src/lib/emoji.js +++ b/packages/react/src/lib/emoji.js @@ -1,12 +1,8 @@ import emojione from 'emoji-toolkit'; export const parseEmoji = (text) => { - const regx = /:([^:]*):/g; - const regx_data = text.match(regx); - if (regx_data) { - const result = regx_data[regx_data.length - 1]; - const d = emojione.shortnameToUnicode(result); - if (d !== undefined) text = text.replace(result, d); - } - return text; + return text.replace(/:([^:\s]+):/g, (match) => { + const unicode = emojione.shortnameToUnicode(match); + return unicode !== undefined && unicode !== match ? unicode : match; + }); }; diff --git a/packages/react/src/store/messageStore.js b/packages/react/src/store/messageStore.js index 4f84f8c1f8..30ef6deaab 100644 --- a/packages/react/src/store/messageStore.js +++ b/packages/react/src/store/messageStore.js @@ -108,7 +108,7 @@ const useMessageStore = create((set, get) => ({ toggleShowReportMessage: () => { set((state) => ({ showReportMessage: !state.showReportMessage })); }, - toogleRecordingMessage: () => { + toggleRecordingMessage: () => { set((state) => ({ isRecordingMessage: !state.isRecordingMessage, })); diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js index 34f5c8bf40..fac91f4eff 100644 --- a/packages/react/src/views/ChatBody/ChatBody.js +++ b/packages/react/src/views/ChatBody/ChatBody.js @@ -309,9 +309,15 @@ const ChatBody = ({ useEffect(() => { if (messageListRef.current) { - messageListRef.current.scrollTop = messageListRef.current.scrollHeight; + const { scrollTop, scrollHeight, clientHeight } = messageListRef.current; + const isAtBottom = scrollHeight - scrollTop - clientHeight < 100; + const isInitialLoad = messages.length > 0 && scrollTop === 0; + + if (isAtBottom || isInitialLoad) { + messageListRef.current.scrollTop = scrollHeight; + } } - }, [messages]); + }, [messages, messageListRef]); useEffect(() => { checkOverflow(); diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js index 9143598d30..9ed9075b5d 100644 --- a/packages/react/src/views/ChatHeader/ChatHeader.js +++ b/packages/react/src/views/ChatHeader/ChatHeader.js @@ -31,6 +31,7 @@ import useSettingsStore from '../../store/settingsStore'; import getChatHeaderStyles from './ChatHeader.styles'; import useSetExclusiveState from '../../hooks/useSetExclusiveState'; import SurfaceMenu from '../SurfaceMenu/SurfaceMenu'; +import { getTokenStorage } from '../../lib/auth'; const ChatHeader = ({ isClosable, @@ -133,20 +134,24 @@ const ChatHeader = ({ }; const setCanSendMsg = useUserStore((state) => state.setCanSendMsg); const authenticatedUserId = useUserStore((state) => state.userId); + const { getToken, saveToken, deleteToken } = getTokenStorage( + ECOptions?.secure + ); const handleLogout = useCallback(async () => { try { await RCInstance.logout(); + } catch (e) { + console.error('Logout error:', e); + } finally { + await deleteToken(); setMessages([]); setChannelInfo({}); setShowSidebar(false); setUserAvatarUrl(null); useMessageStore.setState({ isMessageLoaded: false }); - } catch (e) { - console.error(e); - } finally { setIsUserAuthenticated(false); } - }, [RCInstance, setIsUserAuthenticated]); + }, [RCInstance, setIsUserAuthenticated, deleteToken]); useEffect(() => { const getMessageLimit = async () => { diff --git a/packages/react/src/views/ChatInput/AudioMessageRecorder.js b/packages/react/src/views/ChatInput/AudioMessageRecorder.js index 53dbddf4bd..8198bd4891 100644 --- a/packages/react/src/views/ChatInput/AudioMessageRecorder.js +++ b/packages/react/src/views/ChatInput/AudioMessageRecorder.js @@ -16,8 +16,8 @@ const AudioMessageRecorder = (props) => { const videoRef = useRef(null); const { theme } = useTheme(); const styles = getCommonRecorderStyles(theme); - const toogleRecordingMessage = useMessageStore( - (state) => state.toogleRecordingMessage + const toggleRecordingMessage = useMessageStore( + (state) => state.toggleRecordingMessage ); const { toggle, setData } = useAttachmentWindowStore((state) => ({ @@ -58,7 +58,7 @@ const AudioMessageRecorder = (props) => { setRecordState('recording'); try { start(); - toogleRecordingMessage(); + toggleRecordingMessage(); const startTime = new Date(); setRecordingInterval( setInterval(() => { @@ -81,13 +81,13 @@ const AudioMessageRecorder = (props) => { }; const handleCancelRecordButton = async () => { - toogleRecordingMessage(); + toggleRecordingMessage(); await stopRecording(); setIsRecorded(false); }; const handleStopRecordButton = async () => { - toogleRecordingMessage(); + toggleRecordingMessage(); setIsRecorded(true); await stopRecording(); }; @@ -125,6 +125,14 @@ const AudioMessageRecorder = (props) => { handleMount(); }, [handleMount]); + useEffect(() => { + return () => { + if (recordingInterval) { + clearInterval(recordingInterval); + } + }; + }, [recordingInterval]); + useEffect(() => { if (isRecorded && file) { toggle(); diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index e753b689ae..a435608891 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/packages/react/src/views/ChatInput/ChatInput.js @@ -298,17 +298,17 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => { // } // } - const quoteArray = await Promise.all( + const quoteLinks = await Promise.all( quoteMessage.map(async (quote) => { const { msg, attachments, _id } = quote; if (msg || attachments) { const msgLink = await getMessageLink(_id); - quotedMessages += `[ ](${msgLink})`; + return `[ ](${msgLink})`; } - return quotedMessages; + return ''; }) ); - quotedMessages = quoteArray.join(''); + quotedMessages = quoteLinks.join(''); pendingMessage = createPendingMessage( `${quotedMessages}\n${message}`, userInfo diff --git a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js index 5d8c20a600..03eeec91c7 100644 --- a/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js +++ b/packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js @@ -59,12 +59,25 @@ const ChatInputFormattingToolbar = ({ setPopoverOpen(false); }; const handleEmojiClick = (emojiEvent) => { - const [emoji] = emojiEvent.names; - const message = `${messageRef.current.value} :${emoji.replace( - /[\s-]+/g, - '_' - )}: `; - triggerButton?.(null, message); + const [emojiName] = emojiEvent.names; + const emoji = ` :${emojiName.replace(/[\s-]+/g, '_')}: `; + const { selectionStart, selectionEnd, value } = messageRef.current; + + const newMessage = + value.substring(0, selectionStart) + + emoji + + value.substring(selectionEnd); + + triggerButton?.(null, newMessage); + + // Re-focus and set cursor position after the emoji + setTimeout(() => { + if (messageRef.current) { + const newCursorPos = selectionStart + emoji.length; + messageRef.current.focus(); + messageRef.current.setSelectionRange(newCursorPos, newCursorPos); + } + }, 0); }; const handleAddLink = (linkText, linkUrl) => { diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js index f153d4c697..09cb043cb7 100644 --- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js +++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js @@ -17,11 +17,13 @@ import { getCommonRecorderStyles } from './ChatInput.styles'; import useAttachmentWindowStore from '../../store/attachmentwindow'; const VideoMessageRecorder = (props) => { + const toggleRecordingMessage = useMessageStore( + (state) => state.toggleRecordingMessage + ); const videoRef = useRef(null); const [isRecording, setIsRecording] = useState(false); const { disabled, displayName, popOverItemStyles } = props; - const { theme } = useTheme(); - const { mode } = useTheme(); + const { theme, mode } = useTheme(); const styles = getCommonRecorderStyles(theme); const [state, setRecordState] = useState('idle'); // 1. idle, 2. preview. @@ -92,6 +94,14 @@ const VideoMessageRecorder = (props) => { handleMount(); }, [handleMount]); + useEffect(() => { + return () => { + if (recordingInterval) { + clearInterval(recordingInterval); + } + }; + }, [recordingInterval]); + const startRecordingInterval = () => { const startTime = new Date(); setRecordingInterval( @@ -130,6 +140,7 @@ const VideoMessageRecorder = (props) => { const handleStartRecording = () => { deleteRecordingInterval(); setIsRecording(true); + toggleRecordingMessage(); startRecording(); startRecordingInterval(); setIsSendDisabled(true); @@ -153,9 +164,13 @@ const VideoMessageRecorder = (props) => { stopCameraAndMic(); setRecordState('idle'); setIsSendDisabled(true); + toggleRecordingMessage(); }; const closeWindowStopRecord = () => { + if (isRecording || file) { + toggleRecordingMessage(); + } stopRecording(); deleteRecordingInterval(); deleteRecording(); diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js index f3b94c7b48..2e77db92d7 100644 --- a/packages/react/src/views/EmbeddedChat.js +++ b/packages/react/src/views/EmbeddedChat.js @@ -12,6 +12,7 @@ import { EmbeddedChatApi } from '@embeddedchat/api'; import { Box, ToastBarProvider, + useToastBarDispatch, useComponentOverrides, ThemeProvider, } from '@embeddedchat/ui-elements'; @@ -52,7 +53,7 @@ const EmbeddedChat = (props) => { className = '', style = {}, hideHeader = false, - auth = { + auth: authProp = { flow: 'PASSWORD', }, secure = false, @@ -60,6 +61,11 @@ const EmbeddedChat = (props) => { remoteOpt = false, } = config; + const auth = useMemo( + () => authProp, + [JSON.stringify(authProp)] // Deep comparison via stringify to handle inline objects + ); + const hasMounted = useRef(false); const { classNames, styleOverrides } = useComponentOverrides('EmbeddedChat'); const [fullScreen, setFullScreen] = useState(false); @@ -83,6 +89,7 @@ const EmbeddedChat = (props) => { })); const setIsLoginIn = useLoginStore((state) => state.setIsLoginIn); + const dispatchToastMessage = useToastBarDispatch(); if (isClosable && !setClosableState) { throw Error( 'Please provide a setClosableState to props when isClosable = true' @@ -125,13 +132,17 @@ const EmbeddedChat = (props) => { try { await RCInstance.autoLogin(auth); } catch (error) { - console.error(error); + console.error('Auto-login failed:', error); + dispatchToastMessage({ + type: 'error', + message: 'Auto-login failed. Please sign in manually.', + }); } finally { setIsLoginIn(false); } }; autoLogin(); - }, [RCInstance, auth, setIsLoginIn]); + }, [RCInstance, auth, setIsLoginIn, dispatchToastMessage]); useEffect(() => { RCInstance.auth.onAuthChange((user) => { diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index 355cde9b4a..27c84fc3f0 100644 --- a/packages/react/src/views/Message/Message.js +++ b/packages/react/src/views/Message/Message.js @@ -1,4 +1,4 @@ -import React, { memo, useContext } from 'react'; +import React, { memo, useContext, useMemo } from 'react'; import PropTypes from 'prop-types'; import { format } from 'date-fns'; import { @@ -59,7 +59,7 @@ const Message = ({ (state) => state.userPinPermissions.roles ); const editMessagePermissions = useMessageStore( - (state) => state.editMessagePermissions.roles + (state) => state.editMessagePermissions?.roles || [] ); const [setMessageToReport, toggleShowReportMessage] = useMessageStore( (state) => [state.setMessageToReport, state.toggleShowReportMessage] @@ -101,11 +101,28 @@ const Message = ({ }; const bubbleStyles = useBubbleStyles(isMe); - const pinRoles = new Set(pinPermissions); - const editMessageRoles = new Set(editMessagePermissions); - const deleteMessageRoles = new Set(deleteMessagePermissions); - const deleteOwnMessageRoles = new Set(deleteOwnMessagePermissions); - const forceDeleteMessageRoles = new Set(forceDeleteMessagePermissions); + const { + pinRoles, + editMessageRoles, + deleteMessageRoles, + deleteOwnMessageRoles, + forceDeleteMessageRoles, + } = useMemo( + () => ({ + pinRoles: new Set(pinPermissions), + editMessageRoles: new Set(editMessagePermissions), + deleteMessageRoles: new Set(deleteMessagePermissions), + deleteOwnMessageRoles: new Set(deleteOwnMessagePermissions), + forceDeleteMessageRoles: new Set(forceDeleteMessagePermissions), + }), + [ + pinPermissions, + editMessagePermissions, + deleteMessagePermissions, + deleteOwnMessagePermissions, + forceDeleteMessagePermissions, + ] + ); const variantStyles = !isInSidebar && variantOverrides === 'bubble' ? bubbleStyles : {}; diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index 75bdc7467d..ef05c73d91 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/packages/react/src/views/Message/MessageToolbox.js @@ -81,37 +81,64 @@ export const MessageToolbox = ({ setShowDeleteModal(false); }; - const isAllowedToPin = userRoles.some((role) => pinRoles.has(role)); + const { + isAllowedToPin, + isAllowedToReport, + isAllowedToEditMessage, + isAllowedToDeleteMessage, + isAllowedToDeleteOwnMessage, + isAllowedToForceDeleteMessage, + isVisibleForMessageType, + canDeleteMessage, + } = useMemo(() => { + const isOwner = message.u._id === authenticatedUserId; + const allowedToPin = userRoles.some((role) => pinRoles.has(role)); + const allowedToReport = !isOwner; + const allowedToEdit = + userRoles.some((role) => editMessageRoles.has(role)) || isOwner; + const allowedToDelete = userRoles.some((role) => + deleteMessageRoles.has(role) + ); + const allowedToDeleteOwn = userRoles.some((role) => + deleteOwnMessageRoles.has(role) + ); + const allowedToForceDelete = userRoles.some((role) => + forceDeleteMessageRoles.has(role) + ); - const isAllowedToReport = message.u._id !== authenticatedUserId; + const visibleForMessageType = + message.files?.[0]?.type !== 'audio/mpeg' && + message.files?.[0]?.type !== 'video/mp4'; - const isAllowedToEditMessage = userRoles.some((role) => - editMessageRoles.has(role) - ) - ? true - : message.u._id === authenticatedUserId; + const canDelete = allowedToForceDelete + ? true + : allowedToDelete + ? true + : allowedToDeleteOwn + ? isOwner + : false; - const isAllowedToDeleteMessage = userRoles.some((role) => - deleteMessageRoles.has(role) - ); - const isAllowedToDeleteOwnMessage = userRoles.some((role) => - deleteOwnMessageRoles.has(role) - ); - const isAllowedToForceDeleteMessage = userRoles.some((role) => - forceDeleteMessageRoles.has(role) - ); - - const isVisibleForMessageType = - message.files?.[0].type !== 'audio/mpeg' && - message.files?.[0].type !== 'video/mp4'; - - const canDeleteMessage = isAllowedToForceDeleteMessage - ? true - : isAllowedToDeleteMessage - ? true - : isAllowedToDeleteOwnMessage - ? message.u._id === authenticatedUserId - : false; + return { + isAllowedToPin: allowedToPin, + isAllowedToReport: allowedToReport, + isAllowedToEditMessage: allowedToEdit, + isAllowedToDeleteMessage: allowedToDelete, + isAllowedToDeleteOwnMessage: allowedToDeleteOwn, + isAllowedToForceDeleteMessage: allowedToForceDelete, + isVisibleForMessageType: visibleForMessageType, + canDeleteMessage: canDelete, + }; + }, [ + authenticatedUserId, + userRoles, + pinRoles, + deleteMessageRoles, + deleteOwnMessageRoles, + forceDeleteMessageRoles, + editMessageRoles, + message.u._id, + message.files, + ]); const options = useMemo( () => ({ diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index ab8c3bc2f0..5c963f964d 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -34,8 +34,7 @@ export const MessageAggregator = ({ type = 'message', viewType = 'Sidebar', }) => { - const { theme } = useTheme(); - const { mode } = useTheme(); + const { theme, mode } = useTheme(); const styles = getMessageAggregatorStyles(theme); const setExclusiveState = useSetExclusiveState(); const { ECOptions } = useRCContext(); @@ -128,14 +127,21 @@ export const MessageAggregator = ({ } }; - const isMessageNewDay = (current, previous) => - !previous || - shouldRender(previous) || - !isSameDay(new Date(current.ts), new Date(previous.ts)); + const isMessageNewDay = (current, previous) => { + if (!previous || shouldRender(previous)) return true; + const currentDay = new Date(current.ts).setHours(0, 0, 0, 0); + const previousDay = new Date(previous.ts).setHours(0, 0, 0, 0); + return currentDay !== previousDay; + }; const noMessages = messageList?.length === 0 || !messageRendered; const ViewComponent = viewType === 'Popup' ? Popup : Sidebar; + const uniqueMessageList = useMemo( + () => [...new Map(messageList.map((msg) => [msg._id, msg])).values()], + [messageList] + ); + return ( )} - {[...new Map(messageList.map((msg) => [msg._id, msg])).values()].map( - (msg, index, arr) => { - const newDay = isMessageNewDay(msg, arr[index - 1]); - if (!messageRendered && shouldRender(msg)) { - setMessageRendered(true); - } + {uniqueMessageList.map((msg, index, arr) => { + const newDay = isMessageNewDay(msg, arr[index - 1]); + if (!messageRendered && shouldRender(msg)) { + setMessageRendered(true); + } - return ( - - {type === 'message' && newDay && ( - - {format(new Date(msg.ts), 'MMMM d, yyyy')} - - )} - {type === 'file' ? ( - + {type === 'message' && newDay && ( + + {format(new Date(msg.ts), 'MMMM d, yyyy')} + + )} + {type === 'file' ? ( + + ) : ( + + - ) : ( - + + setJumpToMessage(msg)} + css={{ + position: 'relative', + zIndex: 10, + marginRight: '5px', }} > - - - setJumpToMessage(msg)} - css={{ - position: 'relative', - zIndex: 10, - marginRight: '5px', - }} - > - - - - )} - - ); - } - )} + + + + )} + + ); + })} )} diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 31dd291b75..5d7c3b7f1b 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/packages/react/src/views/MessageList/MessageList.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { isSameDay } from 'date-fns'; @@ -23,12 +23,25 @@ const MessageList = ({ const isMessageLoaded = useMessageStore((state) => state.isMessageLoaded); const { theme } = useTheme(); - const isMessageNewDay = (current, previous) => - !previous || !isSameDay(new Date(current.ts), new Date(previous.ts)); + const filteredMessages = useMemo( + () => messages.filter((msg) => !msg.tmid).reverse(), + [messages] + ); - const filteredMessages = messages.filter((msg) => !msg.tmid); + const reportedMessage = useMemo( + () => + messageToReport + ? messages.find((msg) => msg._id === messageToReport) + : null, + [messages, messageToReport] + ); - const reportedMessage = messages.find((msg) => msg._id === messageToReport); + const isMessageNewDay = (current, previous) => { + if (!previous) return true; + const currentDay = new Date(current.ts).setHours(0, 0, 0, 0); + const previousDay = new Date(previous.ts).setHours(0, 0, 0, 0); + return currentDay !== previousDay; + }; return ( <> @@ -76,37 +89,34 @@ const MessageList = ({ )} - {filteredMessages - .slice() - .reverse() - .map((msg, index, arr) => { - const prev = arr[index - 1]; - const next = arr[index + 1]; + {filteredMessages.map((msg, index, arr) => { + const prev = arr[index - 1]; + const next = arr[index + 1]; - if (!msg) return null; - const newDay = isMessageNewDay(msg, prev); - const sequential = isMessageSequential(msg, prev, 300); - const lastSequential = - sequential && isMessageLastSequential(msg, next); - const showUnreadDivider = - firstUnreadMessageId && msg._id === firstUnreadMessageId; + if (!msg) return null; + const newDay = isMessageNewDay(msg, prev); + const sequential = isMessageSequential(msg, prev, 300); + const lastSequential = + sequential && isMessageLastSequential(msg, next); + const showUnreadDivider = + firstUnreadMessageId && msg._id === firstUnreadMessageId; - return ( - - {showUnreadDivider && ( - Unread Messages - )} - - - ); - })} + return ( + + {showUnreadDivider && ( + Unread Messages + )} + + + ); + })} {showReportMessage && ( { - RCInstance.addTypingStatusListener((t) => { - setTypingUsers((t || []).filter((u) => u !== currentUserName)); - }); - return () => RCInstance.removeTypingStatusListener(setTypingUsers); - }, [RCInstance, setTypingUsers, currentUserName]); + const handleTypingStatus = (users) => { + setTypingUsers((users || []).filter((u) => u !== currentUserName)); + }; + + RCInstance.addTypingStatusListener(handleTypingStatus); + return () => RCInstance.removeTypingStatusListener(handleTypingStatus); + }, [RCInstance, currentUserName]); const typingStatusMessage = useMemo(() => { if (typingUsers.length === 0) return '';