Merge pull request #25178 from overleaf/mj-ide-redesign-deleted-chat-user

[web] Editor redesign: Handle deleted user in chat

GitOrigin-RevId: 905896883657d6a39fd3c0de2306af18580d1be3

services/web/frontend/extracted-translations.json

@@ -382,6 +382,7 @@
   "deleted_by_id": "",
   "deleted_by_ip": "",
   "deleted_by_on": "",
+  "deleted_user": "",
   "deleting": "",
   "demonstrating_git_integration": "",
   "demonstrating_track_changes_feature": "",

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

@@ -3,12 +3,23 @@ import { User } from '../../../../../../types/user'
 import { getHueForUserId } from '@/shared/utils/colors'
 import MessageContent from '@/features/chat/components/message-content'
 import classNames from 'classnames'
+import MaterialIcon from '@/shared/components/material-icon'
+import { t } from 'i18next'
 
 function hue(user?: User) {
   return user ? getHueForUserId(user.id) : 0
 }
 
 function getAvatarStyle(user?: User) {
+  if (!user?.id) {
+    // Deleted user
+    return {
+      backgroundColor: 'var(--bg-light-disabled)',
+      borderColor: 'var(--bg-light-disabled)',
+      color: 'var(--content-disabled)',
+    }
+  }
+
   return {
     borderColor: `hsl(${hue(user)}, 85%, 40%)`,
     backgroundColor: `hsl(${hue(user)}, 85%, 40%`,
@@ -16,13 +27,19 @@ 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">
         <div className="message-avatar-placeholder" />
         {!fromSelf && (
           <div className="message-author">
-            <span>{message.user.first_name || message.user.email}</span>
+            <span>
+              {userAvailable
+                ? message.user.first_name || message.user.email
+                : t('deleted_user')}
+            </span>
           </div>
         )}
       </div>
@@ -32,8 +49,15 @@ function Message({ message, fromSelf }: MessageProps) {
             {!fromSelf && index === message.contents.length - 1 ? (
               <div className="message-avatar">
                 <div className="avatar" style={getAvatarStyle(message.user)}>
-                  {message.user.first_name?.charAt(0) ||
-                    message.user.email.charAt(0)}
+                  {userAvailable ? (
+                    message.user.first_name?.charAt(0) ||
+                    message.user.email.charAt(0)
+                  ) : (
+                    <MaterialIcon
+                      type="delete"
+                      className="message-avatar-deleted-user-icon"
+                    />
+                  )}
                 </div>
               </div>
             ) : (

services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss

@@ -37,7 +37,7 @@
 
   .ide-redesign-main {
     --chat-bg: var(--white);
-    --chat-color: var(--neutral-70);
+    --chat-color: var(--content-primary);
     --chat-instructions-color: var(--neutral-70);
     --chat-new-message-bg: var(--neutral-10);
     --chat-new-message-textarea-color: var(--neutral-90);
@@ -257,6 +257,11 @@
     text-transform: uppercase;
   }
 
+  .message-avatar .message-avatar-deleted-user-icon {
+    line-height: 24px;
+    font-size: 16px;
+  }
+
   .message-author,
   .message-container {
     flex: 1 1 auto;

services/web/locales/en.json

@@ -504,6 +504,7 @@
   "deleted_by_id": "Deleted By ID",
   "deleted_by_ip": "Deleted By IP",
   "deleted_by_on": "Deleted by __name__ on __date__",
+  "deleted_user": "Deleted user",
   "deleting": "Deleting",
   "demonstrating_git_integration": "Demonstrating Git integration",
   "demonstrating_track_changes_feature": "Demonstrating Track Changes feature",