From 45bda80e7078d22e28d615c063d073b8bad8532e Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 11 Oct 2024 11:13:03 -0400 Subject: [PATCH] fix(Message): Deprecate default avatar --- packages/module/src/Message/Message.test.tsx | 47 +++++++++++++------- packages/module/src/Message/Message.tsx | 19 ++------ 2 files changed, 35 insertions(+), 31 deletions(-) diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx index e3170219..26951f3f 100644 --- a/packages/module/src/Message/Message.test.tsx +++ b/packages/module/src/Message/Message.test.tsx @@ -64,15 +64,16 @@ const checkListItemsRendered = () => { describe('Message', () => { it('should render user messages correctly', () => { - render(); + render(); expect(screen.getByText('User')).toBeTruthy(); expect(screen.getByText('Hi')).toBeTruthy(); const date = new Date(); expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy(); expect(screen.queryByText('Loading message')).toBeFalsy(); + expect(screen.getByRole('img')).toHaveAttribute('src', './img'); }); it('should render bot messages correctly', () => { - render(); + render(); expect(screen.getByText('Bot')).toBeTruthy(); expect(screen.getByText('AI')).toBeTruthy(); expect(screen.getByText('Hi')).toBeTruthy(); @@ -80,18 +81,18 @@ describe('Message', () => { expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy(); }); it('should render avatar correctly', () => { - render(); + render(); expect(screen.getByRole('img')).toHaveAttribute('src', './testImg'); }); it('should render botWord correctly', () => { - render(); + render(); expect(screen.getByText('Bot')).toBeTruthy(); expect(screen.getByText('人工知能')).toBeTruthy(); expect(screen.queryByText('AI')).toBeFalsy(); expect(screen.getByText('Hi')).toBeTruthy(); }); it('should render timestamps', () => { - render(); + render(); expect(screen.getByText('Bot')).toBeTruthy(); expect(screen.getByText('AI')).toBeTruthy(); expect(screen.getByText('Hi')).toBeTruthy(); @@ -100,13 +101,15 @@ describe('Message', () => { expect(screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy(); }); it('should render attachments', () => { - render(); + render(); expect(screen.getByText('Hi')).toBeTruthy(); expect(screen.getByText('testAttachment')).toBeTruthy(); }); it('should be able to click attachments', async () => { const spy = jest.fn(); - render(); + render( + + ); expect(screen.getByText('Hi')).toBeTruthy(); expect(screen.getByText('testAttachment')).toBeTruthy(); await userEvent.click(screen.getByRole('button', { name: /testAttachment/i })); @@ -114,7 +117,9 @@ describe('Message', () => { }); it('should be able to close attachments', async () => { const spy = jest.fn(); - render(); + render( + + ); expect(screen.getByText('Hi')).toBeTruthy(); expect(screen.getByText('testAttachment')).toBeTruthy(); expect(screen.getByRole('button', { name: /close testAttachment/i })).toBeTruthy(); @@ -122,7 +127,7 @@ describe('Message', () => { expect(spy).toHaveBeenCalledTimes(1); }); it('should render loading state', () => { - render(); + render(); expect(screen.getByText('Bot')).toBeTruthy(); expect(screen.getByText('AI')).toBeTruthy(); expect(screen.queryByText('Hi')).toBeFalsy(); @@ -133,6 +138,7 @@ describe('Message', () => { it('should be able to show sources', async () => { render( { it('should not show sources if loading', () => { render( { it('should be able to show actions', async () => { render( { it('should not show actions if loading', async () => { render( { }); }); it('should render unordered lists correctly', () => { - render(); + render(); expect(screen.getByText('Here is an unordered list:')).toBeTruthy(); checkListItemsRendered(); }); it('should render ordered lists correctly', () => { - render(); + render(); expect(screen.getByText('Here is an ordered list:')).toBeTruthy(); checkListItemsRendered(); }); it('should render inline code', () => { - render(); + render(); expect(screen.getByText(/() => void/i)).toBeTruthy(); expect(screen.queryByRole('button', { name: 'Copy code button' })).toBeFalsy(); }); it('should render code correctly', () => { - render(); + render(); expect(screen.getByText('Here is some YAML code:')).toBeTruthy(); expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy(); expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy(); @@ -251,14 +260,22 @@ describe('Message', () => { it('can click copy code button', async () => { // need explicit setup since RTL stubs clipboard if you do this const user = userEvent.setup(); - render(); + render(); expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy(); await user.click(screen.getByRole('button', { name: 'Copy code button' })); const clipboardText = await navigator.clipboard.readText(); expect(clipboardText.trim()).toEqual(CODE.trim()); }); it('should handle codeBlockProps correctly by spreading it onto the CodeMessage', () => { - render(); + render( + + ); expect(screen.getByRole('button', { name: 'test' })).toBeTruthy(); }); }); diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx index 4ef427af..9d640ae2 100644 --- a/packages/module/src/Message/Message.tsx +++ b/packages/module/src/Message/Message.tsx @@ -47,11 +47,11 @@ export interface MessageProps extends Omit, 'rol /** Role of the user sending the message */ role: 'user' | 'bot'; /** Message content */ - content: string; + content?: string; /** Name of the user */ name?: string; /** Avatar src for the user */ - avatar?: string; + avatar: string; /** Timestamp for the message */ timestamp?: string; /** Set this to true if message is being loaded */ @@ -95,19 +95,6 @@ export const Message: React.FunctionComponent = ({ attachments, ...props }: MessageProps) => { - // Configure default values - const DEFAULTS = { - user: { - name: 'User', - avatar: 'https://img.freepik.com/premium-photo/graphic-designer-digital-avatar-generative-ai_934475-9292.jpg' - }, - bot: { - name: 'Bot', - avatar: - 'https://yt3.googleusercontent.com/ej8uvIe1AIFiJQXBwY9cfJmt0kO1cAeWxpBqG_cJndGHx95mFq1F8WakSoXIjtcprTbMQJoqH5M=s900-c-k-c0x00ffffff-no-rj' - } - }; - // Keep timestamps consistent between Timestamp component and aria-label const date = new Date(); const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`; @@ -119,7 +106,7 @@ export const Message: React.FunctionComponent = ({ {...props} > {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */} - +
{name && (