diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 99bd9ed840..667546134e 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/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": "",
diff --git a/services/web/frontend/js/features/ide-redesign/components/chat/message.tsx b/services/web/frontend/js/features/ide-redesign/components/chat/message.tsx
index a3676e2216..057ea69266 100644
--- a/services/web/frontend/js/features/ide-redesign/components/chat/message.tsx
+++ b/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 (
{!fromSelf && (
- {message.user.first_name || message.user.email}
+
+ {userAvailable
+ ? message.user.first_name || message.user.email
+ : t('deleted_user')}
+
)}
@@ -32,8 +49,15 @@ function Message({ message, fromSelf }: MessageProps) {
{!fromSelf && index === message.contents.length - 1 ? (
- {message.user.first_name?.charAt(0) ||
- message.user.email.charAt(0)}
+ {userAvailable ? (
+ message.user.first_name?.charAt(0) ||
+ message.user.email.charAt(0)
+ ) : (
+
+ )}
) : (
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
index aeb8d844a0..b0e50cd95d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
+++ b/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;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 37a7fa185e..5f0ecd7b4b 100644
--- a/services/web/locales/en.json
+++ b/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",