Add a client id when sending a chat message (#6073)

GitOrigin-RevId: 3ddfab6e711de6770b27aafe87491d33e310635c

services/web/app/src/Features/Chat/ChatController.js

@@ -24,7 +24,7 @@ const async = require('async')
 module.exports = ChatController = {
   sendMessage(req, res, next) {
     const { project_id } = req.params
-    const { content } = req.body
+    const { content, client_id } = req.body
     const user_id = SessionManager.getLoggedInUserId(req.session)
     if (user_id == null) {
       const err = new Error('no logged-in user')
@@ -45,6 +45,7 @@ module.exports = ChatController = {
               return next(err)
             }
             message.user = UserInfoController.formatPersonalInfo(user)
+            message.clientId = client_id
             EditorRealTimeController.emitToRoom(
               project_id,
               'new-chat-message',

services/web/frontend/js/features/chat/context/chat-context.js

@@ -18,6 +18,8 @@ import { useLayoutContext } from '../../../shared/context/layout-context'
 
 const PAGE_SIZE = 50
 
+const clientId = uuid()
+
 export function chatReducer(state, action) {
   switch (action.type) {
     case 'INITIAL_FETCH_MESSAGES':
@@ -55,14 +57,12 @@ export function chatReducer(state, action) {
           content: action.content,
           timestamp: Date.now(),
         }),
-        messageWasJustSent: true,
       }
 
     case 'RECEIVE_MESSAGE':
       return {
         ...state,
         messages: appendMessage(state.messages, action.message),
-        messageWasJustSent: false,
         unreadMessageCount: state.unreadMessageCount + 1,
       }
 
@@ -93,7 +93,6 @@ const initialState = {
   initialMessagesLoaded: false,
   lastTimestamp: null,
   atEnd: false,
-  messageWasJustSent: false,
   unreadMessageCount: 0,
   error: null,
 }
@@ -198,7 +197,7 @@ export function ChatProvider({ children }) {
 
       const url = `/project/${projectId}/messages`
       postJSON(url, {
-        body: { content },
+        body: { content, client_id: clientId },
       }).catch(error => {
         dispatch({
           type: 'ERROR',
@@ -219,11 +218,9 @@ export function ChatProvider({ children }) {
     if (!socket) return
 
     function receivedMessage(message) {
-      // If the message is from the current user and they just sent a message,
-      // then we are receiving the sent message back from the socket. Ignore it
-      // to prevent double message
-      const messageIsFromSelf = message?.user?.id === user?.id
-      if (messageIsFromSelf && state.messageWasJustSent) return
+      // If the message is from the current client id, then we are receiving the sent message back from the socket.
+      // Ignore it to prevent double message.
+      if (message.clientId === clientId) return
 
       dispatch({ type: 'RECEIVE_MESSAGE', message })
 
@@ -239,10 +236,7 @@ export function ChatProvider({ children }) {
 
       socket.removeListener('new-chat-message', receivedMessage)
     }
-    // We're adding and removing the socket listener every time we send a
-    // message (and messageWasJustSent changes). Not great, but no good way
-    // around it
-  }, [socket, state.messageWasJustSent, state.unreadMessageCount, user])
+  }, [socket])
 
   // Handle unread messages
   useEffect(() => {

services/web/test/frontend/features/chat/context/chat-context.test.js

@@ -405,7 +405,7 @@ describe('ChatContext', function () {
         'express:/project/:projectId/messages',
         'POST'
       )
-      expect(JSON.parse(body)).to.deep.equal({ content: 'sent message' })
+      expect(JSON.parse(body)).to.deep.include({ content: 'sent message' })
     })
 
     it("doesn't send if the content is empty", function () {