[LG-5926] refactor(message): remove assistant avatar and name (#3482)

* refactor(message): remove assistant avatar and name

* chore(message): changeset

Author: stephl3

.changeset/heavy-clocks-sin.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/message': major
+---
+
+[LG-5926](https://jira.mongodb.org/browse/LG-5926): remove assistant avatar and name from `Message`

chat/message/package.json

@@ -14,7 +14,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/avatar": "workspace:^",
     "@leafygreen-ui/badge": "workspace:^",
     "@leafygreen-ui/banner": "workspace:^",
     "@leafygreen-ui/button": "workspace:^",

chat/message/src/Message.stories.tsx

@@ -200,7 +200,6 @@ const meta: StoryMetaType<typeof Message> = {
   argTypes: {
     darkMode: storybookArgTypes.darkMode,
     isSender: { control: 'boolean' },
-    avatar: { control: 'none' },
     components: { control: 'none' },
     markdownProps: { control: 'none' },
   },

chat/message/src/Message/Message.styles.ts

@@ -10,15 +10,23 @@ import {
 } from '@leafygreen-ui/tokens';
 
 const getBaseContainerStyles = (theme: Theme) => css`
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  white-space: pre-line;
+  overflow-wrap: break-word;
   display: flex;
   flex-direction: column;
-  gap: ${spacing[150]}px;
-  align-items: flex-start;
+  gap: ${spacing[200]}px;
   color: ${color[theme].text[Variant.Primary][InteractionState.Default]};
 `;
 
-const senderStyles = css`
-  align-items: flex-end;
+const getSenderContainerStyles = (theme: Theme) => css`
+  width: auto;
+  border-radius: ${borderRadius[300]}px ${borderRadius[300]}px 0;
+  background-color: ${palette.gray[theme === Theme.Dark ? 'dark2' : 'light2']};
+  padding: ${spacing[300]}px;
+  align-self: flex-end;
 `;
 
 export const getContainerStyles = ({
@@ -33,39 +41,7 @@ export const getContainerStyles = ({
   cx(
     getBaseContainerStyles(theme),
     {
-      [senderStyles]: isSender,
+      [getSenderContainerStyles(theme)]: isSender,
     },
     className,
   );
-
-export const avatarContainerStyles = css`
-  display: flex;
-  gap: ${spacing[150]}px;
-`;
-
-const baseMessageContainerStyles = css`
-  position: relative;
-  max-width: 100%;
-  white-space: pre-line;
-  overflow-wrap: break-word;
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing[200]}px;
-`;
-
-const getSenderMessageContainerStyles = (theme: Theme) => css`
-  border-radius: ${borderRadius[300]}px ${borderRadius[300]}px 0;
-  background-color: ${palette.gray[theme === Theme.Dark ? 'dark2' : 'light2']};
-  padding: ${spacing[300]}px;
-`;
-
-export const getMessageContainerStyles = ({
-  isSender,
-  theme,
-}: {
-  isSender: boolean;
-  theme: Theme;
-}) =>
-  cx(baseMessageContainerStyles, {
-    [getSenderMessageContainerStyles(theme)]: isSender,
-  });

chat/message/src/Message/Message.tsx

@@ -1,7 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import { useLeafyGreenChatContext } from '@lg-chat/leafygreen-chat-provider';
 
-import { AssistantAvatar } from '@leafygreen-ui/avatar';
 import {
   CompoundComponent,
   filterChildren,
@@ -10,7 +8,6 @@ import {
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
-import { Body } from '@leafygreen-ui/typography';
 
 import {
   ActionCard,
@@ -22,11 +19,7 @@ import {
 import { MessageContext } from '../MessageContext';
 import { MessageSubcomponentProperty } from '../shared.types';
 
-import {
-  avatarContainerStyles,
-  getContainerStyles,
-  getMessageContainerStyles,
-} from './Message.styles';
+import { getContainerStyles } from './Message.styles';
 import { type MessageProps } from './Message.types';
 import { MessageContent } from './MessageContent';
 
@@ -47,7 +40,6 @@ export const Message = CompoundComponent(
       fwdRef,
     ) => {
       const { darkMode, theme } = useDarkMode(darkModeProp);
-      const { assistantName } = useLeafyGreenChatContext();
 
       const contextValue = useMemo(
         () => ({
@@ -90,28 +82,15 @@ export const Message = CompoundComponent(
               ref={fwdRef}
               {...rest}
             >
-              {!isSender && (
-                <div className={avatarContainerStyles}>
-                  <AssistantAvatar size={20} />
-                  <Body weight="semiBold">{assistantName}</Body>
-                </div>
-              )}
-              <div
-                className={getMessageContainerStyles({
-                  isSender,
-                  theme,
-                })}
-              >
-                <MessageContent sourceType={sourceType} {...markdownProps}>
-                  {messageBody ?? ''}
-                </MessageContent>
-                {actionCard}
-                {promotion}
-                {actions}
-                {verifiedBanner}
-                {links}
-                {remainingChildren}
-              </div>
+              <MessageContent sourceType={sourceType} {...markdownProps}>
+                {messageBody ?? ''}
+              </MessageContent>
+              {actionCard}
+              {promotion}
+              {actions}
+              {verifiedBanner}
+              {links}
+              {remainingChildren}
             </div>
           </MessageContext.Provider>
         </LeafyGreenProvider>

chat/message/tsconfig.json

@@ -35,9 +35,6 @@
     {
       "path": "../rich-links"
     },
-    {
-      "path": "../../packages/avatar"
-    },
     {
       "path": "../../packages/badge"
     },