@patternfly/chatbot 1.0.0

package/src/Message/MessageInput.tsx

@@ -0,0 +1,63 @@
+// ============================================================================
+// Chatbot Main - Message Input
+// ============================================================================
+import type { FormEvent, FunctionComponent, Ref } from 'react';
+import { useState } from 'react';
+import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
+
+export interface MessageInputProps extends FormProps {
+  /** Placeholder for edit input */
+  editPlaceholder?: string;
+  /** Label for the English word "Update" used in edit mode. */
+  updateWord?: string;
+  /** Label for the English word "Cancel" used in edit mode. */
+  cancelWord?: string;
+  /** Callback function for when edit mode update button is clicked */
+  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+  /** Callback functionf or when edit cancel update button is clicked */
+  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Ref applied to editable message input */
+  inputRef?: Ref<HTMLTextAreaElement>;
+  /** Message text */
+  content?: string;
+}
+
+export const MessageInput: FunctionComponent<MessageInputProps> = ({
+  editPlaceholder = 'Edit prompt message...',
+  updateWord = 'Update',
+  cancelWord = 'Cancel',
+  onEditUpdate,
+  onEditCancel,
+  inputRef,
+  content,
+  ...props
+}: MessageInputProps) => {
+  const [messageText, setMessageText] = useState(content ?? '');
+
+  const onChange = (_event: FormEvent<HTMLTextAreaElement>, value: string) => {
+    setMessageText(value);
+  };
+
+  return (
+    <Form {...props}>
+      <TextArea
+        placeholder={editPlaceholder}
+        value={messageText}
+        onChange={onChange}
+        aria-label={editPlaceholder}
+        autoResize
+        ref={inputRef}
+      />
+      <ActionGroup className="pf-chatbot__message-edit-buttons">
+        <Button variant="primary" onClick={(event) => onEditUpdate && onEditUpdate(event, messageText)}>
+          {updateWord}
+        </Button>
+        <Button variant="secondary" onClick={onEditCancel}>
+          {cancelWord}
+        </Button>
+      </ActionGroup>
+    </Form>
+  );
+};
+
+export default MessageInput;

package/src/Message/MessageLoading.scss

@@ -0,0 +1,60 @@
+// ============================================================================
+// Chatbot Main - Message - Loading
+// ============================================================================
+.pf-chatbot__message-loading {
+  width: 36px;
+  padding: var(--pf-t--global--spacer--sm);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
+  border-radius: var(--pf-t--global--border--radius--small);
+  // for high contrast support
+  border: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast);
+
+  &-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);
+    }
+  }
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--secondary--default);
+  }
+}

package/src/Message/MessageLoading.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageLoading from './MessageLoading';
+
+test('Renders with pf-chatbot__message-loading class by default', () => {
+  render(<MessageLoading data-testid="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading', { exact: true });
+});
+
+test('Renders with pf-m-primary class when isPrimary is true', () => {
+  render(<MessageLoading data-testid="test-id" isPrimary />);
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading pf-m-primary');
+});
+
+test('Renders loading word when loadingWord is passed', () => {
+  render(<MessageLoading loadingWord="Loading message" />);
+  expect(screen.getByText('Loading message')).toBeInTheDocument();
+});
+
+test('Spreads additional props', () => {
+  render(<MessageLoading data-testid="test-id" id="custom-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'custom-id');
+});

package/src/Message/MessageLoading.tsx

@@ -0,0 +1,28 @@
+// ============================================================================
+// Chatbot Main - Message - Processing
+// ============================================================================
+
+import { FunctionComponent } from 'react';
+import type { HTMLProps } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * MessageLoading displays a loading animation for messages.
+ * Use this component when passing children to Message to show a loading state.
+ */
+export interface MessageLoadingProps extends HTMLProps<HTMLDivElement> {
+  /** Text announced to screen readers during loading. */
+  loadingWord?: string;
+  /** Flag indicating whether primary styling is applied */
+  isPrimary?: boolean;
+}
+
+export const MessageLoading: FunctionComponent<MessageLoadingProps> = ({ loadingWord, isPrimary, ...props }) => (
+  <div className={css('pf-chatbot__message-loading', isPrimary && 'pf-m-primary')} {...props}>
+    <span className="pf-chatbot__message-loading-dots">
+      <span className="pf-v6-screen-reader">{loadingWord}</span>
+    </span>
+  </div>
+);
+
+export default MessageLoading;

package/src/Message/Plugins/index.ts

@@ -0,0 +1 @@
+export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';

package/src/Message/Plugins/rehypeCodeBlockToggle.ts

@@ -0,0 +1,24 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to add language information to code block props
+// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
+// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
+export const rehypeCodeBlockToggle = () => (tree: Node) => {
+  visit(tree, 'element', (node: Element) => {
+    if (node.tagName === 'code' && node.properties?.className) {
+      const className = node.properties.className as string[];
+      const languageMatch = className.find((cls) => cls.startsWith('language-'));
+
+      if (languageMatch) {
+        const language = languageMatch.replace('language-', '').toUpperCase();
+
+        // Add the language and toggle text as data attributes
+        node.properties['data-language'] = language;
+        node.properties['data-expanded-text'] = `Show less ${language} code`;
+        node.properties['data-collapsed-text'] = `Show more ${language} code`;
+      }
+    }
+  });
+};

package/src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts

@@ -0,0 +1,53 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to remove images from within p tags and put them as separate block-level elements.
+// This allows us to avoid having a blue background on images - this is something Kayla requested.
+export const rehypeMoveImagesOutOfParagraphs = () => (tree: Node) => {
+  const nodesToRemove: { parent: Element; index: number; node: Element }[] = [];
+
+  visit(tree, 'element', (node: Element, index: number | null, parent: Element | null) => {
+    if (node.tagName === 'p' && node.children) {
+      const imagesInParagraph: { node: Element; index: number }[] = [];
+
+      node.children.forEach((child: Node, childIndex: number) => {
+        if (child.type === 'element' && (child as Element).tagName === 'img') {
+          imagesInParagraph.push({ node: child as Element, index: childIndex });
+        }
+      });
+
+      if (imagesInParagraph.length > 0 && parent && index !== null) {
+        imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
+          nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
+        });
+
+        // To avoid issues with index shifting during removal, we process in reverse
+        for (let i = nodesToRemove.length - 1; i >= 0; i--) {
+          const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
+          if (pTag.children) {
+            pTag.children.splice(imgIndexToRemove, 1);
+          }
+        }
+
+        // Insert the removed images after the paragraph
+        const paragraphIndexInParent = parent.children.indexOf(node);
+        if (paragraphIndexInParent !== -1) {
+          imagesInParagraph.forEach(({ node: imgNode }) => {
+            parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
+          });
+        }
+
+        // Remove paragraph if it's now empty after image removal
+        if (node.children.length === 0) {
+          const paragraphIndexInParent = parent.children.indexOf(node);
+          if (paragraphIndexInParent !== -1) {
+            parent.children.splice(paragraphIndexInParent, 1);
+          }
+        }
+
+        nodesToRemove.length = 0;
+      }
+    }
+  });
+};

package/src/Message/QuickResponse/QuickResponse.scss

@@ -0,0 +1,35 @@
+.pf-chatbot__message-quick-response {
+  .pf-v6-c-label {
+    &:not(.pf-m-compact) {
+      --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;
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected {
+    .pf-v6-c-label__content:is(:hover, :focus) {
+      --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+      --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected:hover,
+  .pf-chatbot__message-quick-response--selected:focus {
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+  }
+
+  // active state right before selection
+  .pf-v6-c-label.pf-m-blue.pf-m-clickable .pf-v6-c-label__content:is(:active) {
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+  }
+}

package/src/Message/QuickResponse/QuickResponse.test.tsx

@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import QuickResponse from './QuickResponse';
+
+test('Renders with quick responses', () => {
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' },
+    { id: '3', content: 'Response 3' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  expect(screen.getByText('Response 1')).toBeVisible();
+  expect(screen.getByText('Response 2')).toBeVisible();
+  expect(screen.getByText('Response 3')).toBeVisible();
+});
+
+test('Renders with compact styling', () => {
+  const quickResponses = [{ id: '1', content: 'Compact response' }];
+  render(<QuickResponse quickResponses={quickResponses} isCompact />);
+
+  expect(screen.getByText('Compact response').closest('.pf-v6-c-label')).toHaveClass('pf-m-compact');
+});
+
+test('Renders with custom className on response', () => {
+  const quickResponses = [{ id: '1', content: 'Custom class response', className: 'custom-response-class' }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  expect(screen.getByText('Custom class response').closest('.pf-v6-c-label')).toHaveClass('custom-response-class');
+});
+
+test('Renders with custom container className', () => {
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(
+    <QuickResponse
+      quickResponses={quickResponses}
+      quickResponseContainerProps={{ className: 'custom-container-class' }}
+    />
+  );
+
+  expect(screen.getByText('Response 1').closest('.pf-v6-c-label-group')).toHaveClass('custom-container-class');
+});
+
+test('Spreads additional custom container props', () => {
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} quickResponseContainerProps={{ id: 'custom-container-id' }} />);
+
+  expect(screen.getByText('Response 1').closest('.pf-v6-c-label-group__list')).toHaveAttribute(
+    'id',
+    'custom-container-id'
+  );
+});
+
+test('Renders with pf-chatbot__message-quick-response--selected class after click', async () => {
+  const user = userEvent.setup();
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Response 1'));
+
+  expect(screen.getByText('Response 1').closest('.pf-v6-c-label')).toHaveClass(
+    'pf-chatbot__message-quick-response--selected'
+  );
+});
+
+test('Does not calls onClick handler when not passed', async () => {
+  const user = userEvent.setup();
+  const handleClick = jest.fn();
+  const quickResponses = [{ id: '1', content: 'Clickable response' }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Clickable response'));
+
+  expect(handleClick).not.toHaveBeenCalled();
+});
+
+test('Calls onClick handler when passed', async () => {
+  const user = userEvent.setup();
+  const handleClick = jest.fn();
+  const quickResponses = [{ id: '1', content: 'Clickable response', onClick: handleClick }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Clickable response'));
+
+  expect(handleClick).toHaveBeenCalled();
+});
+
+test('Does not call onSelect when not passed', async () => {
+  const user = userEvent.setup();
+  const handleSelect = jest.fn();
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Response 2'));
+
+  expect(handleSelect).not.toHaveBeenCalled();
+});
+
+test('Calls onSelect when passed', async () => {
+  const user = userEvent.setup();
+  const handleSelect = jest.fn();
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} onSelect={handleSelect} />);
+
+  await user.click(screen.getByText('Response 2'));
+
+  expect(handleSelect).toHaveBeenCalledWith('2');
+});
+
+test('Spreads additional response props', () => {
+  const quickResponses = [{ id: '1', content: 'Response with props', isCompact: true, 'aria-label': 'Test label' }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  expect(screen.getByText('Response with props').closest('.pf-v6-c-label')).toHaveAttribute('aria-label', 'Test label');
+});

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -0,0 +1,60 @@
+import type { FunctionComponent } from 'react';
+import { useState } from 'react';
+import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
+
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+  content: string;
+  id: string;
+  onClick?: () => void;
+}
+
+export interface QuickResponseProps {
+  /** Props for quick responses */
+  quickResponses: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+  /** Callback when a response is clicked; used in feedback cards */
+  onSelect?: (id: string) => void;
+  /** Sets the quick responses to compact styling */
+  isCompact?: boolean;
+}
+
+export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 },
+  onSelect,
+  isCompact
+}: QuickResponseProps) => {
+  const [selectedQuickResponse, setSelectedQuickResponse] = useState<string>();
+
+  const handleQuickResponseClick = (id: string, onClick?: () => void) => {
+    setSelectedQuickResponse(id);
+    onClick && onClick();
+    onSelect && onSelect(id);
+  };
+  return (
+    <LabelGroup
+      className={css('pf-chatbot__message-quick-response', quickResponseContainerProps?.className)}
+      {...quickResponseContainerProps}
+    >
+      {quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
+        <Label
+          variant={id === selectedQuickResponse ? undefined : 'outline'}
+          icon={id === selectedQuickResponse ? <CheckIcon /> : undefined}
+          color="blue"
+          key={id}
+          onClick={() => handleQuickResponseClick(id, onClick)}
+          className={css(id === selectedQuickResponse && 'pf-chatbot__message-quick-response--selected', className)}
+          isCompact={isCompact}
+          {...props}
+        >
+          {content}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
+
+export default QuickResponse;

package/src/Message/QuickResponse/index.ts

@@ -0,0 +1 @@
+export * from './QuickResponse';

package/src/Message/QuickStarts/FallbackImg.tsx

@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+import { useState } from 'react';
+
+interface FallbackImgProps {
+  /** Image source */
+  src: string;
+  /** Alt text for image */
+  alt?: string;
+  /** ClassName applied to image */
+  className?: string;
+  /** Fallback */
+  fallback?: React.ReactNode;
+}
+
+const FallbackImg: FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

package/src/Message/QuickStarts/QuickStartTile.scss

@@ -0,0 +1,24 @@
+.pf-chatbot__quickstarts-tile {
+  max-width: 650px;
+  width: 100%;
+
+  @media screen and (max-width: 700px) {
+    max-width: 100%;
+    min-width: initial;
+  }
+  // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
+  // the icons would have a height and width of 0.
+  .pf-v6-c-card__header-main {
+    .pf-v6-c-icon__content {
+      display: contents;
+    }
+  }
+}
+
+.pf-v6-theme-dark {
+  .pf-chatbot__quickstarts-tile {
+    .pfext-catalog-item-icon__img {
+      filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+    }
+  }
+}