Merge pull request #26850 from overleaf/mj-chat-deleted-user

[web] Handle deleted users in chat threads

GitOrigin-RevId: 6593bf37e4f2339b40069b7cf4198166660852fb

services/web/frontend/js/features/chat/components/message.tsx

@@ -2,6 +2,7 @@ import { getHueForUserId } from '@/shared/utils/colors'
 import MessageContent from './message-content'
 import type { Message as MessageType } from '@/features/chat/context/chat-context'
 import { User } from '../../../../../types/user'
+import { useTranslation } from 'react-i18next'
 
 export interface MessageProps {
   message: MessageType
@@ -26,11 +27,16 @@ function getArrowStyle(user?: User) {
 }
 
 function Message({ message, fromSelf }: MessageProps) {
+  const { t } = useTranslation()
   return (
     <div className="message-wrapper">
       {!fromSelf && (
         <div className="name" translate="no">
-          <span>{message.user.first_name || message.user.email}</span>
+          <span>
+            {message.user
+              ? message.user.first_name || message.user.email
+              : t('deleted_user')}
+          </span>
         </div>
       )}
       <div className="message" style={getMessageStyle(message.user)}>

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

@@ -29,7 +29,7 @@ export type Message = {
   id: string
   timestamp: number
   contents: string[]
-  user: User
+  user?: User
 }
 
 type State = {

services/web/frontend/js/features/chat/utils/message-list-appender.js

@@ -15,6 +15,7 @@ export function appendMessage(messageList, message, uniqueMessageIds) {
     lastMessage &&
     message &&
     message.user &&
+    lastMessage.user &&
     message.user.id &&
     message.user.id === lastMessage.user.id &&
     message.timestamp - lastMessage.timestamp < TIMESTAMP_GROUP_SIZE
@@ -57,6 +58,7 @@ export function prependMessages(messageList, messages, uniqueMessageIds) {
       const shouldGroup =
         firstMessage &&
         message &&
+        firstMessage.user &&
         message.user &&
         message.user.id === firstMessage.user.id &&
         firstMessage.timestamp - message.timestamp < TIMESTAMP_GROUP_SIZE

services/web/frontend/js/features/ide-redesign/components/chat/message.tsx

@@ -27,8 +27,6 @@ function getAvatarStyle(user?: User) {
 }
 
 function Message({ message, fromSelf }: MessageProps) {
-  const userAvailable = message.user?.id && message.user.email
-
   return (
     <div className="chat-message-redesign">
       <div className="message-row">
@@ -36,7 +34,7 @@ function Message({ message, fromSelf }: MessageProps) {
         {!fromSelf && (
           <div className="message-author">
             <span>
-              {userAvailable
+              {message.user?.id && message.user.email
                 ? message.user.first_name || message.user.email
                 : t('deleted_user')}
             </span>
@@ -49,7 +47,7 @@ function Message({ message, fromSelf }: MessageProps) {
             {!fromSelf && index === message.contents.length - 1 ? (
               <div className="message-avatar">
                 <div className="avatar" style={getAvatarStyle(message.user)}>
-                  {userAvailable ? (
+                  {message.user?.id && message.user.email ? (
                     message.user.first_name?.charAt(0) ||
                     message.user.email.charAt(0)
                   ) : (

services/web/frontend/js/features/review-panel-new/components/review-panel-entry-user.tsx

@@ -3,13 +3,15 @@ import { buildName } from '../utils/build-name'
 import { ReviewPanelUser } from '../../../../../types/review-panel/review-panel'
 import { ChangesUser } from '../context/changes-users-context'
 import { getBackgroundColorForUserId } from '@/shared/utils/colors'
+import { useTranslation } from 'react-i18next'
 
 const ReviewPanelEntryUser = ({
   user,
 }: {
   user?: ReviewPanelUser | ChangesUser
 }) => {
-  const userName = buildName(user)
+  const { t } = useTranslation()
+  const userName = user ? buildName(user) : t('deleted_user')
 
   return (
     <div className="review-panel-entry-user" translate="no">

services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx

@@ -40,7 +40,7 @@ export const ReviewPanelMessage: FC<{
   const user = useUserContext()
   const permissions = usePermissionsContext()
 
-  const isCommentAuthor = user.id === message.user.id
+  const isCommentAuthor = Boolean(message.user && user.id === message.user.id)
   const canEdit = isCommentAuthor && permissions.comment
   const canResolve =
     permissions.resolveAllComments ||

services/web/frontend/js/features/review-panel-new/utils/build-name.ts

@@ -1,15 +1,17 @@
-export const buildName = (user?: {
+export const buildName = (user: {
   first_name?: string
   last_name?: string
   email?: string
 }) => {
-  const name = [user?.first_name, user?.last_name].filter(Boolean).join(' ')
+  const name = [user.first_name, user.last_name].filter(Boolean).join(' ')
 
   if (name) {
     return name
   }
-  if (user?.email) {
+
+  if (user.email) {
     return user.email.split('@')[0]
   }
+
   return 'Unknown'
 }

services/web/types/review-panel/review-panel.ts

@@ -20,6 +20,6 @@ export interface ReviewPanelCommentThreadMessage {
   content: string
   id: CommentId
   timestamp: Date
-  user: ReviewPanelUser
+  user?: ReviewPanelUser
   user_id: UserId
 }