diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx
index e31702193..26951f3fa 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 4ef427afc..9d640ae25 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 */}
-
+