@patternfly/chatbot 2.2.0-prerelease.15 → 2.2.0-prerelease.17

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+
+describe('ChatbotHeaderTitle', () => {
+  it('should render ChatbotHeaderTitle with children', () => {
+    render(<ChatbotHeaderTitle>Chatbot Header Title</ChatbotHeaderTitle>);
+    expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderTitle with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderTitle className="custom-header-class">Chatbot Header Title</ChatbotHeaderTitle>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+
+  it('should render title for default display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for docked display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked={'Docked header title'} />);
+    expect(screen.getByText('Docked header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when docked display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for embedded display mode', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded={'Embedded header title'} />);
+    expect(screen.getByText('Embedded header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when embedded display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for fullscreen display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.fullscreen}
+        showOnFullScreen={'Fullscreen header title'}
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when fullscreen display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault={'Default header title'} />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+});

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -40,11 +40,11 @@
     }
 
     .pf-chatbot__button--copy.pf-v6-c-button {
-      color: var(--pf-t--color--white);
+      color: var(--pf-t--color--white); // same in light + dark theme
 
       &:hover,
       &:focus {
-        color: var(--pf-t--color--white);
+        color: var(--pf-t--color--white); // same in light + dark theme
       }
     }
   }
@@ -77,6 +77,6 @@
 }
 
 .pf-chatbot__message-inline-code {
-  background-color: var(--pf-t--chatbot--code--background);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }

package/src/Message/ListMessage/ListMessage.scss

@@ -5,8 +5,8 @@
 .pf-chatbot__message-ordered-list,
 .pf-chatbot__message-unordered-list {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 
   .pf-v6-c-list,
   ul,
@@ -18,8 +18,8 @@
 .pf-chatbot__message--user {
   .pf-chatbot__message-ordered-list,
   .pf-chatbot__message-unordered-list {
-    background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-    color: var(--pf-t--chatbot-message--type--text--color--primary);
-    padding: var(--pf-t--chatbot-message--type--padding);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
   }
 }

package/src/Message/Message.scss

@@ -2,14 +2,6 @@
 // Chatbot Message
 // ============================================================================
 .pf-chatbot__message {
-  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
-  --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
-  --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
-  --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);
-  --pf-t--chatbot-message--type--text--color--primary: var(--pf-t--global--text--color--inverse);
-  --pf-t--chatbot-message--type--border--radius: var(--pf-t--global--border--radius--small);
-  --pf-t--chatbot-message--meta--label--color: var(--pf-t--global--border--color--on-secondary);
-
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
@@ -63,12 +55,12 @@
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
+      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
       font-weight: var(--pf-t--global--font--weight--body--bold);
 
       .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
+        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
       }
     }
 
@@ -88,7 +80,7 @@
     flex-direction: column;
     align-items: flex-start;
     gap: var(--pf-t--global--font--size--sm);
-    color: var(--pf-t--chatbot-message--type--text--color--default);
+    color: var(--pf-t--global--text--color--regular);
   }
 
   &-and-actions {

package/src/Message/Message.test.tsx

@@ -71,6 +71,24 @@ const ORDERED_LIST_WITH_CODE = `
 3. Item 3
 `;
 
+const HEADING = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+const BLOCK_QUOTES = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -377,13 +395,17 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
     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();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
     expect(screen.getByText(/metadata:/i)).toBeTruthy();
-    expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
     expect(screen.getByText(/spec/i)).toBeTruthy();
     expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
     expect(
-      screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
     ).toBeTruthy();
   });
   it('can click copy code button', async () => {
@@ -491,4 +513,19 @@ describe('Message', () => {
     );
     expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
   });
+  it('should handle block quote correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={BLOCK_QUOTES} />);
+    expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
+    expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
+    expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
+  });
+  it('should handle heading correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={HEADING} />);
+    expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
+  });
 });

package/src/Message/Message.tsx

@@ -6,7 +6,15 @@ import React from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Avatar, AvatarProps, Label, LabelGroupProps, Timestamp, Truncate } from '@patternfly/react-core';
+import {
+  Avatar,
+  AvatarProps,
+  ContentVariants,
+  Label,
+  LabelGroupProps,
+  Timestamp,
+  Truncate
+} from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -173,11 +181,22 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             ) : (
               <Markdown
                 components={{
-                  p: TextMessage,
-                  code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
+                  p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+                  code: ({ children, ...props }) => (
+                    <CodeBlockMessage {...props} {...codeBlockProps}>
+                      {children}
+                    </CodeBlockMessage>
+                  ),
                   ul: UnorderedListMessage,
                   ol: (props) => <OrderedListMessage {...props} />,
-                  li: ListItemMessage
+                  li: ListItemMessage,
+                  h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+                  h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+                  h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+                  h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+                  h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+                  h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+                  blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />
                 }}
                 remarkPlugins={[remarkGfm]}
               >

package/src/Message/MessageLoading.scss

@@ -3,9 +3,9 @@
 // ============================================================================
 .pf-chatbot__message-loading {
   width: 36px;
-  padding: var(--pf-t--chatbot-message--type--padding);
+  padding: var(--pf-t--global--spacer--sm);
   background-color: var(--pf-t--global--background--color--tertiary--default);
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  border-radius: var(--pf-t--global--border--radius--small);
 
   &-dots {
     position: relative;

package/src/Message/TextMessage/TextMessage.scss

@@ -13,8 +13,8 @@
 // Need to inline shorter text
 .pf-chatbot__message-text {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 
   .pf-v6-c-content,
   .pf-v6-c-content--small,
@@ -25,27 +25,24 @@
   }
 
   code {
-    background-color: var(--pf-t--chatbot-message--type--background--color--default);
+    background-color: var(--pf-t--global--background--color--tertiary--default);
     font-size: var(--pf-t--global--font--size--body--default);
   }
 }
 
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
-    background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-    color: var(--pf-t--chatbot-message--type--text--color--primary);
-    padding: var(--pf-t--chatbot-message--type--padding);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
 
     .pf-v6-c-content,
     .pf-v6-c-content--small,
     .pf-v6-c-content--blockquote,
     p,
     a {
-      color: var(--pf-t--chatbot-message--type--text--color--primary);
-    }
-
-    code {
-      background-color: initial;
+      color: var(--pf-t--global--text--color--on-brand--default);
     }
   }
 }

package/src/Message/TextMessage/TextMessage.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 import { ExtraProps } from 'react-markdown';
-import { Content, ContentVariants } from '@patternfly/react-core';
+import { Content, ContentProps } from '@patternfly/react-core';
 
-const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
+const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
   <span className="pf-chatbot__message-text">
-    <Content component={ContentVariants.p} {...props}>
+    <Content component={component} {...props}>
       {children}
     </Content>
   </span>

package/src/MessageBar/MessageBar.test.tsx

@@ -1,11 +1,11 @@
+import '@testing-library/jest-dom';
 import React from 'react';
+import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { MessageBar } from './MessageBar';
-import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { MessageBar } from './MessageBar';
 
 const ATTACH_MENU_ITEMS = [
   <DropdownList key="list-1">

package/src/MessageBox/MessageBox.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+
+describe('MessageBox', () => {
+  it('should render Message box', () => {
+    render(
+      <MessageBox>
+        <>Chatbot Messages</>
+      </MessageBox>
+    );
+    expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+  });
+
+  it('should assign ref to Message box', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <MessageBox ref={ref}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/PreviewAttachment/PreviewAttachment.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { PreviewAttachment } from './PreviewAttachment';
+
+describe('PreviewAttachment', () => {
+  it('should render PreviewAttachment', () => {
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    expect(screen.getByText('Preview attachment')).toBeTruthy();
+    expect(screen.getByText('greetings')).toBeTruthy();
+    expect(screen.getAllByText('TEXT')).toBeTruthy();
+  });
+
+  it('should call onEdit handler when edit button is pressed', () => {
+    const onEdit = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={onEdit}
+        handleModalToggle={jest.fn()}
+      />
+    );
+    fireEvent.click(screen.getByText('Edit'));
+
+    expect(onEdit).toHaveBeenCalled();
+  });
+  it('should call onDismiss handler when dismiss button is pressed', () => {
+    const onDismiss = jest.fn();
+    render(
+      <PreviewAttachment
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onEdit={jest.fn()}
+        handleModalToggle={onDismiss}
+      />
+    );
+    fireEvent.click(screen.getByText('Dismiss'));
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});

package/src/Settings/SettingsForm.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+
+describe('SettingsForm', () => {
+  it('should render settingsForm with custom classname', () => {
+    const { container } = render(<SettingsForm className="custom-settings" />);
+    expect(container.querySelector('.custom-settings')).toBeTruthy();
+  });
+
+  it('should render settingsForm with fields', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm fields={fields} />);
+
+    expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+  });
+});