@patternfly/chatbot 2.1.0-prerelease.17

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -0,0 +1,88 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Code Block
+// ============================================================================
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+// Import PatternFly components
+import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
+
+import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import { ExtraProps } from 'react-markdown';
+
+const CodeBlockMessage = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: JSX.IntrinsicElements['code'] & ExtraProps) => {
+  const [copied, setCopied] = React.useState(false);
+
+  const buttonRef = React.useRef();
+  const tooltipID = React.useId();
+
+  const language = /language-(\w+)/.exec(className || '')?.[1];
+
+  // Handle clicking copy button
+  const handleCopy = React.useCallback((event, text) => {
+    navigator.clipboard.writeText(text.toString());
+    setCopied(true);
+  }, []);
+
+  // Reset copied state
+  React.useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => {
+        setCopied(false);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  });
+
+  if (!String(children).includes('\n')) {
+    return (
+      <code {...props} className="pf-chatbot__message-inline-code">
+        {children}
+      </code>
+    );
+  }
+
+  // Setup code block header
+  const actions = (
+    <>
+      <CodeBlockAction>
+        {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
+        <Button
+          ref={buttonRef}
+          aria-label={ariaLabel ?? 'Copy code button'}
+          variant="plain"
+          className="pf-chatbot__button--copy"
+          onClick={(event) => handleCopy(event, children)}
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </Button>
+        <Tooltip id={tooltipID} content="Copy" position="top" triggerRef={buttonRef} />
+      </CodeBlockAction>
+    </>
+  );
+
+  return (
+    <div className="pf-chatbot__message-code-block">
+      <CodeBlock actions={actions}>
+        <CodeBlockCode>
+          {language ? (
+            <SyntaxHighlighter {...props} language={language} style={obsidian} PreTag="div" CodeTag="div" wrapLongLines>
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <>{children}</>
+          )}
+        </CodeBlockCode>
+      </CodeBlock>
+    </div>
+  );
+};
+
+export default CodeBlockMessage;

package/src/Message/ListMessage/ListItemMessage.tsx

@@ -0,0 +1,11 @@
+// ============================================================================
+// Chatbot Main - Message - Content - List
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { ListItem } from '@patternfly/react-core';
+
+const ListItemMessage = ({ children }: JSX.IntrinsicElements['li'] & ExtraProps) => <ListItem>{children}</ListItem>;
+
+export default ListItemMessage;

package/src/Message/ListMessage/ListMessage.scss

@@ -0,0 +1,25 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Text
+// ============================================================================
+
+.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);
+
+  .pf-v6-c-list,
+  ul,
+  li {
+    font-size: var(--pf-t--chatbot--font-size);
+  }
+}
+
+.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);
+  }
+}

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -0,0 +1,17 @@
+// ============================================================================
+// Chatbot Main - Message - Content - List
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { List, ListComponent, OrderType } from '@patternfly/react-core';
+
+const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+  <div className="pf-chatbot__message-ordered-list">
+    <List component={ListComponent.ol} type={OrderType.number}>
+      {children}
+    </List>
+  </div>
+);
+
+export default OrderedListMessage;

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -0,0 +1,15 @@
+// ============================================================================
+// Chatbot Main - Message - Content - List
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { List } from '@patternfly/react-core';
+
+const UnorderedListMessage = ({ children }: JSX.IntrinsicElements['ul'] & ExtraProps) => (
+  <div className="pf-chatbot__message-unordered-list">
+    <List>{children}</List>
+  </div>
+);
+
+export default UnorderedListMessage;

package/src/Message/Message.scss

@@ -0,0 +1,118 @@
+// ============================================================================
+// 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);
+  padding-bottom: var(--pf-t--global--spacer--2xl);
+
+  // Name
+  // --------------------------------------------------------------------------
+  .pf-v6-c-truncate {
+    --pf-v6-c-truncate--MinWidth: 0ch;
+    --pf-v6-c-truncate__start--MinWidth: 0ch;
+  }
+  // Avatar
+  // --------------------------------------------------------------------------
+  .pf-v6-c-avatar {
+    --pf-v6-c-avatar--Width: 3rem;
+    --pf-v6-c-avatar--Height: 3rem;
+    position: sticky;
+    top: var(--pf-t--global--spacer--md);
+    object-fit: cover;
+    pointer-events: none; // prevent dragging - interferes with FileDropZone
+  }
+
+  // Contents
+  // --------------------------------------------------------------------------
+  &-contents {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--sm);
+    width: 100%;
+  }
+
+  // Meta data
+  // --------------------------------------------------------------------------
+  &-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-t--global--spacer--sm);
+
+    // Author name
+    .pf-chatbot__message-name {
+      font-family: var(--pf-t--chatbot--heading--font-family);
+      font-weight: 600;
+      font-size: var(--pf-t--global--font--size--sm);
+    }
+
+    // Badge
+    .pf-v6-c-label {
+      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
+      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
+      font-weight: 500;
+
+      .pf-v6-c-label__content {
+        --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
+      }
+    }
+
+    // Timestamp
+    .pf-v6-c-timestamp {
+      flex: 1 0 max-content;
+    }
+    time {
+      font-size: var(--pf-t--global--font--size--xs);
+    }
+  }
+
+  // Response content
+  // --------------------------------------------------------------------------
+  &-response {
+    display: flex;
+    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);
+  }
+
+  &-and-actions {
+    display: grid;
+    gap: var(--pf-t--global--spacer--sm);
+  }
+
+  &-quick-response {
+    .pf-v6-c-label {
+      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+
+      @media screen and (min-width: 401px) and (max-width: 600px) {
+        --pf-v6-c-label__text--MaxWidth: 20ch;
+      }
+
+      @media screen and (max-width: 400px) {
+        --pf-v6-c-label__text--MaxWidth: 15ch;
+      }
+    }
+  }
+}
+
+// Attachments
+// --------------------------------------------------------------------------
+.pf-chatbot__message-attachments-container {
+  display: flex;
+  gap: var(--pf-t--global--spacer--md);
+  flex-wrap: wrap;
+}
+
+@import './MessageLoading';
+@import './CodeBlockMessage/CodeBlockMessage';
+@import './TextMessage/TextMessage';

package/src/Message/Message.test.tsx

@@ -0,0 +1,281 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Message from './Message';
+import userEvent from '@testing-library/user-event';
+
+const ALL_ACTIONS = [
+  { label: /Good response/i },
+  { label: /Bad response/i },
+  { label: /Copy/i },
+  { label: /Share/i },
+  { label: /Listen/i }
+];
+
+const UNORDERED_LIST = `
+  Here is an unordered list:
+
+  * Item 1
+  * Item 2
+  * Item 3
+`;
+
+const ORDERED_LIST = `
+  Here is an ordered list:
+
+  1. Item 1
+  2. Item 2
+  3. Item 3
+`;
+
+const CODE_MESSAGE = `
+Here is some YAML code:
+
+~~~yaml
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+~~~`;
+
+const CODE = `
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+`;
+
+const INLINE_CODE = `Here is an inline code - \`() => void\``;
+
+const checkListItemsRendered = () => {
+  const items = ['Item 1', 'Item 2', 'Item 3'];
+  expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  items.forEach((item) => {
+    // list item text gets wrapped in a span by the third-party library so we can't just check the listitem
+    expect(screen.getByText(item)).toBeTruthy();
+  });
+};
+
+describe('Message', () => {
+  it('should render user messages correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content="Hi" />);
+    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(<Message avatar="./img" role="bot" name="Bot" content="Hi" />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('AI')).toBeTruthy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+    const date = new Date();
+    expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+  });
+  it('should render avatar correctly', () => {
+    render(<Message avatar="./testImg" role="bot" name="Bot" content="Hi" />);
+    expect(screen.getByRole('img')).toHaveAttribute('src', './testImg');
+  });
+  it('should render botWord correctly', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" botWord="人工知能" />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('人工知能')).toBeTruthy();
+    expect(screen.queryByText('AI')).toBeFalsy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+  });
+  it('should render timestamps', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" timestamp="2 hours ago" />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('AI')).toBeTruthy();
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('2 hours ago')).toBeTruthy();
+    const date = new Date();
+    expect(screen.queryByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeFalsy();
+  });
+  it('should render attachments', () => {
+    render(<Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment' }]} />);
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('testAttachment')).toBeTruthy();
+  });
+  it('should be able to click attachments', async () => {
+    const spy = jest.fn();
+    render(
+      <Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment', onClick: spy }]} />
+    );
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('testAttachment')).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: /testAttachment/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to close attachments', async () => {
+    const spy = jest.fn();
+    render(
+      <Message avatar="./img" role="user" content="Hi" attachments={[{ name: 'testAttachment', onClose: spy }]} />
+    );
+    expect(screen.getByText('Hi')).toBeTruthy();
+    expect(screen.getByText('testAttachment')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /close testAttachment/i })).toBeTruthy();
+    await userEvent.click(screen.getByRole('button', { name: /close testAttachment/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should render loading state', () => {
+    render(<Message avatar="./img" role="bot" name="Bot" content="Hi" isLoading />);
+    expect(screen.getByText('Bot')).toBeTruthy();
+    expect(screen.getByText('AI')).toBeTruthy();
+    expect(screen.queryByText('Hi')).toBeFalsy();
+    const date = new Date();
+    expect(screen.getByText(`${date.toLocaleDateString()}, ${date.toLocaleTimeString()}`)).toBeTruthy();
+    expect(screen.getByText('Loading message')).toBeTruthy();
+  });
+  it('should be able to show sources', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            }
+          ]
+        }}
+      />
+    );
+    expect(screen.getByText('Getting started with Red Hat OpenShift')).toBeTruthy();
+  });
+  it('should not show sources if loading', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isLoading
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+            }
+          ]
+        }}
+      />
+    );
+    expect(screen.getByText('Loading message')).toBeTruthy();
+    expect(screen.queryByText('Getting started with Red Hat OpenShift')).toBeFalsy();
+  });
+  it('should be able to show actions', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        actions={{
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.getByRole('button', { name: label })).toBeTruthy();
+    });
+  });
+  it('should not show actions if loading', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isLoading
+        actions={{
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }}
+      />
+    );
+    expect(screen.getByText('Loading message')).toBeTruthy();
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+    });
+  });
+  it('should render unordered lists correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={UNORDERED_LIST} />);
+    expect(screen.getByText('Here is an unordered list:')).toBeTruthy();
+    checkListItemsRendered();
+  });
+  it('should render ordered lists correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST} />);
+    expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
+    checkListItemsRendered();
+  });
+  it('should render inline code', () => {
+    render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
+    expect(screen.getByText(/() => void/i)).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Copy code button' })).toBeFalsy();
+  });
+  it('should render code correctly', () => {
+    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(/metadata:/i)).toBeTruthy();
+    expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/spec/i)).toBeTruthy();
+    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(
+      screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+    ).toBeTruthy();
+  });
+  it('can click copy code button', async () => {
+    // need explicit setup since RTL stubs clipboard if you do this
+    const user = userEvent.setup();
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
+    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(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        codeBlockProps={{ 'aria-label': 'test' }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
+  });
+});