@patternfly/chatbot 2.1.0-prerelease.17

package/src/Message/Message.tsx

@@ -0,0 +1,181 @@
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+
+import React from 'react';
+
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Avatar, Label, LabelGroup, LabelGroupProps, LabelProps, Timestamp, Truncate } from '@patternfly/react-core';
+import MessageLoading from './MessageLoading';
+import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
+import TextMessage from './TextMessage/TextMessage';
+import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
+import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
+import SourcesCard, { SourcesCardProps } from '../SourcesCard';
+import ListItemMessage from './ListMessage/ListItemMessage';
+import UnorderedListMessage from './ListMessage/UnorderedListMessage';
+import OrderedListMessage from './ListMessage/OrderedListMessage';
+
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+  content: string;
+  id: string;
+  onClick: () => void;
+}
+export interface MessageAttachment {
+  /** Name of file attached to the message */
+  name: string;
+  /** Unique identifier of file attached to the message */
+  id?: string | number;
+  /** Callback for when attachment label is clicked */
+  onClick?: (event: React.MouseEvent, name: string, id?: string | number) => void;
+  /** Callback for when attachment label is closed */
+  onClose?: (event: React.MouseEvent, name: string, id?: string | number) => void;
+  /** Whether file is loading */
+  isLoading?: boolean;
+  /** Aria label for attachment close button */
+  closeButtonAriaLabel?: string;
+  /** Custom test id for the language in the attachment component */
+  languageTestId?: string;
+  /** Custom test id for the loading spinner in the attachment component */
+  spinnerTestId?: string;
+}
+
+export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
+  /** Unique id for message */
+  id?: string;
+  /** Role of the user sending the message */
+  role: 'user' | 'bot';
+  /** Message content */
+  content?: string;
+  /** Name of the user */
+  name?: string;
+  /** Avatar src for the user */
+  avatar: string;
+  /** Timestamp for the message */
+  timestamp?: string;
+  /** Set this to true if message is being loaded */
+  isLoading?: boolean;
+  /** Array of attachments attached to a message */
+  attachments?: MessageAttachment[];
+  /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+  actions?: {
+    [key: string]: ActionProps;
+  };
+  /** Sources for message */
+  sources?: SourcesCardProps;
+  /** Label for the English word "AI," used to tag messages with role "bot" */
+  botWord?: string;
+  /** Label for the English "Loading message," displayed to screenreaders when loading a message */
+  loadingWord?: string;
+  codeBlockProps?: {
+    'aria-label'?: string;
+    className?: string;
+  };
+  /** Props for quick responses */
+  quickResponses?: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+}
+
+export const Message: React.FunctionComponent<MessageProps> = ({
+  role,
+  content,
+  name,
+  avatar,
+  timestamp,
+  isLoading,
+  actions,
+  sources,
+  botWord = 'AI',
+  loadingWord = 'Loading message',
+  codeBlockProps,
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 },
+  attachments,
+  ...props
+}: MessageProps) => {
+  // Keep timestamps consistent between Timestamp component and aria-label
+  const date = new Date();
+  const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  return (
+    <section
+      aria-label={`Message from ${role} - ${dateString}`}
+      className={`pf-chatbot__message pf-chatbot__message--${role}`}
+      {...props}
+    >
+      {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
+      <Avatar src={avatar} alt="" />
+      <div className="pf-chatbot__message-contents">
+        <div className="pf-chatbot__message-meta">
+          {name && (
+            <span className="pf-chatbot__message-name">
+              <Truncate content={name} />
+            </span>
+          )}
+          {role === 'bot' && (
+            <Label variant="outline" isCompact>
+              {botWord}
+            </Label>
+          )}
+          <Timestamp date={date}>{timestamp}</Timestamp>
+        </div>
+        <div className="pf-chatbot__message-response">
+          <div className="pf-chatbot__message-and-actions">
+            {isLoading ? (
+              <MessageLoading loadingWord={loadingWord} />
+            ) : (
+              <Markdown
+                components={{
+                  p: TextMessage,
+                  code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
+                  ul: UnorderedListMessage,
+                  ol: OrderedListMessage,
+                  li: ListItemMessage
+                }}
+                remarkPlugins={[remarkGfm]}
+              >
+                {content}
+              </Markdown>
+            )}
+            {!isLoading && sources && <SourcesCard {...sources} />}
+            {!isLoading && actions && <ResponseActions actions={actions} />}
+            {!isLoading && quickResponses && (
+              <LabelGroup
+                className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
+                {...quickResponseContainerProps}
+              >
+                {quickResponses.map(({ id, onClick, content, ...props }: QuickResponse) => (
+                  <Label variant="outline" color="blue" key={id} onClick={onClick} {...props}>
+                    {content}
+                  </Label>
+                ))}
+              </LabelGroup>
+            )}
+          </div>
+          {attachments && (
+            <div className="pf-chatbot__message-attachments-container">
+              {attachments.map((attachment) => (
+                <div key={attachment.id ?? attachment.name} className="pf-chatbot__message-attachment">
+                  <FileDetailsLabel
+                    fileName={attachment.name}
+                    fileId={attachment.id}
+                    onClose={attachment.onClose}
+                    onClick={attachment.onClick}
+                    isLoading={attachment.isLoading}
+                    closeButtonAriaLabel={attachment.closeButtonAriaLabel}
+                    languageTestId={attachment.languageTestId}
+                    spinnerTestId={attachment.spinnerTestId}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Message;

package/src/Message/MessageLoading.scss

@@ -0,0 +1,53 @@
+// ============================================================================
+// Chatbot Main - Message - Loading
+// ============================================================================
+.pf-chatbot__message-loading {
+  width: 36px;
+  padding: var(--pf-t--chatbot-message--type--padding);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
+  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+
+  &-dots {
+    position: relative;
+    display: flex;
+    width: 4px;
+    height: 4px;
+    margin-left: var(--pf-t--global--spacer--sm);
+    border-radius: var(--pf-t--global--border--radius--pill);
+    animation: dot-flashing var(--pf-t--global--motion--duration--2xl) infinite linear alternate;
+    animation-delay: calc(var(--pf-t--global--motion--duration--2xl) * 0.33333333333);
+  }
+  &-dots::before,
+  &-dots::after {
+    content: '';
+    display: flex;
+    position: absolute;
+    inset-block-start: 0;
+  }
+  &-dots::before {
+    inset-inline-start: calc(var(--pf-t--global--spacer--sm) * -1);
+    width: 4px;
+    height: 4px;
+    border-radius: var(--pf-t--global--border--radius--pill);
+    animation: dot-flashing var(--pf-t--global--motion--duration--2xl) infinite alternate;
+    animation-delay: var(--pf-t--global--motion--delay--none);
+  }
+  &-dots::after {
+    inset-inline-start: var(--pf-t--global--spacer--sm);
+    width: 4px;
+    height: 4px;
+    border-radius: var(--pf-t--global--border--radius--pill);
+    animation: dot-flashing var(--pf-t--global--motion--duration--2xl) infinite alternate;
+    animation-delay: calc(var(--pf-t--global--motion--duration--2xl) * 0.66666666666);
+  }
+
+  @keyframes dot-flashing {
+    0% {
+      background-color: var(--pf-t--global--background--color--inverse--default);
+    }
+    50%,
+    100% {
+      background-color: rgba(41, 41, 41, 0.25);
+    }
+  }
+}

package/src/Message/MessageLoading.tsx

@@ -0,0 +1,15 @@
+// ============================================================================
+// Chatbot Main - Message - Processing
+// ============================================================================
+
+import React from 'react';
+
+const MessageLoading = ({ loadingWord }) => (
+  <div className="pf-chatbot__message-loading">
+    <span className="pf-chatbot__message-loading-dots">
+      <span className="pf-v6-screen-reader">{loadingWord}</span>
+    </span>
+  </div>
+);
+
+export default MessageLoading;

package/src/Message/TextMessage/TextMessage.scss

@@ -0,0 +1,51 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Text
+// ============================================================================
+
+.pf-chatbot__message-and-actions {
+  blockquote {
+    .pf-chatbot__message-text {
+      display: inline-block;
+    }
+  }
+}
+
+// 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);
+
+  .pf-v6-c-content,
+  .pf-v6-c-content--small,
+  .pf-v6-c-content--blockquote,
+  p,
+  a {
+    --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
+  }
+
+  code {
+    background-color: var(--pf-t--chatbot-message--type--background--color--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);
+
+    .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;
+    }
+  }
+}

package/src/Message/TextMessage/TextMessage.tsx

@@ -0,0 +1,17 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Text
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
+  <span className="pf-chatbot__message-text">
+    <Content component={ContentVariants.p} {...props}>
+      {children}
+    </Content>
+  </span>
+);
+
+export default TextMessage;

package/src/Message/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Message';
+
+export * from './Message';

package/src/MessageBar/AttachButton.scss

@@ -0,0 +1,20 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Attach
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--attach {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  padding: var(--pf-t--global--spacer--md);
+  width: 3rem;
+  height: 3rem;
+
+  .pf-v6-c-button__icon {
+    color: var(--pf-t--chatbot--icon--fill);
+  }
+
+  // Interactive states
+  &:hover, &:focus {
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--chatbot--icon--fill--hover);
+    }
+  }
+}

package/src/MessageBar/AttachButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { AttachButton } from './AttachButton';
+
+describe('Attach button', () => {
+  it('should render button correctly', () => {
+    render(<AttachButton />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+  });
+  it('should handle isDisabled prop', () => {
+    render(<AttachButton isDisabled />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+  });
+  it('should handle spread props, including aria-label', () => {
+    render(<AttachButton aria-label="test" />);
+    expect(screen.getByRole('button', { name: 'test' }));
+  });
+  it('should handle onClick', async () => {
+    const spy = jest.fn();
+    render(<AttachButton onClick={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle className prop', () => {
+    render(<AttachButton className="test" />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+  });
+  it('should handle custom tooltip correctly', async () => {
+    render(<AttachButton onClick={jest.fn} tooltipContent="Test" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('should handle tooltipProps prop', async () => {
+    render(<AttachButton tooltipProps={{ id: 'test' }} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
+  });
+  // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
+  // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
+  it('should handle onAttachAccepted prop', async () => {
+    const spy = jest.fn();
+    render(<AttachButton onAttachAccepted={spy} inputTestId="input" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    const file = new File(['test'], 'test.json');
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    await userEvent.upload(input, file);
+    expect(input.files).toHaveLength(1);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/MessageBar/AttachButton.tsx

@@ -0,0 +1,81 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Attach
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { useDropzone } from 'react-dropzone';
+import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
+
+export interface AttachButtonProps extends ButtonProps {
+  /** Callback for when button is clicked */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Callback function for AttachButton when an attachment is made */
+  onAttachAccepted?: (data: File[], event: DropEvent) => void;
+  /** Class name for AttachButton */
+  className?: string;
+  /** Props to control if the AttachButton should be disabled */
+  isDisabled?: boolean;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** Ref applied to AttachButton and used in tooltip */
+  innerRef?: React.Ref<any>;
+  /** English text "Attach" used in the tooltip */
+  tooltipContent?: string;
+  /** Test id applied to input */
+  inputTestId?: string;
+}
+
+const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
+  onAttachAccepted,
+  onClick,
+  isDisabled,
+  className,
+  tooltipProps,
+  innerRef,
+  tooltipContent = 'Attach',
+  inputTestId,
+  ...props
+}: AttachButtonProps) => {
+  const { open, getInputProps } = useDropzone({
+    multiple: true,
+    onDropAccepted: onAttachAccepted
+  });
+
+  return (
+    <>
+      {/* this is required for react-dropzone to work in Safari and Firefox */}
+      <input data-testid={inputTestId} {...getInputProps()} />
+      <Tooltip
+        id="pf-chatbot__tooltip--attach"
+        content={tooltipContent}
+        position="top"
+        entryDelay={tooltipProps?.entryDelay || 0}
+        exitDelay={tooltipProps?.exitDelay || 0}
+        distance={tooltipProps?.distance || 8}
+        animationDuration={tooltipProps?.animationDuration || 0}
+        {...tooltipProps}
+      >
+        <Button
+          variant="plain"
+          ref={innerRef}
+          className={`pf-chatbot__button--attach ${className ?? ''}`}
+          aria-label={props['aria-label'] || 'Attach button'}
+          isDisabled={isDisabled}
+          onClick={onClick ?? open}
+          icon={
+            <Icon iconSize="xl" isInline>
+              <PaperclipIcon />
+            </Icon>
+          }
+          {...props}
+        />
+      </Tooltip>
+    </>
+  );
+};
+
+export const AttachButton = React.forwardRef((props: AttachButtonProps, ref: React.Ref<any>) => (
+  <AttachButtonBase innerRef={ref} {...props} />
+));

package/src/MessageBar/MessageBar.scss

@@ -0,0 +1,77 @@
+// Import related component scss files.
+@import './AttachButton';
+@import './MicrophoneButton';
+@import './SendButton';
+@import './StopButton';
+
+// ============================================================================
+// Chatbot Footer - Message Bar
+// ============================================================================
+
+.pf-chatbot__message-bar {
+  --pf-chatbot__message-bar-child--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-chatbot__message-bar-child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+
+  padding-inline-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  background-color: var(--pf-t--global--background--color--primary--default);
+  border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
+  transition: box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm);
+
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+  }
+
+  &:focus-within {
+    box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+  }
+
+  &-actions {
+    display: flex;
+    justify-content: end;
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    gap: var(--pf-t--global--spacer--xs);
+  }
+
+  &-input {
+    flex: 1 1 auto;
+    padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
+    padding-block-end: var(--pf-chatbot__message-bar-child--PaddingBlockEnd);
+    overflow: hidden;
+    position: relative;
+  }
+
+  &-placeholder {
+    position: absolute;
+    top: 20px;
+    left: 16px;
+    color: var(--pf-t--global--text--color--placeholder);
+    pointer-events: none;
+  }
+}
+
+.pf-chatbot__message-textarea {
+  padding-block-start: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
+  font-size: var(--pf-t--global--font--size--md);
+  line-height: 1.5rem;
+  max-height: 12rem;
+  overflow-y: auto;
+  outline: none;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  height: 100%;
+  width: 100%;
+  display: block !important;
+  position: relative;
+}