@patternfly/chatbot 2.1.0-prerelease.17

package/src/MessageBar/MicrophoneButton.tsx

@@ -0,0 +1,114 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Microphone
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
+
+// Import FontAwesome icons
+import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
+
+export interface MicrophoneButtonProps extends ButtonProps {
+  /** Boolean check if the browser is listening to speech or not */
+  isListening: boolean;
+  /** Class name for MicrophoneButton */
+  className?: string;
+  /** Callback to update the value of isListening */
+  onIsListeningChange: React.Dispatch<React.SetStateAction<boolean>>;
+  /** Callback to update the message value once speech recognition is complete */
+  onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: TooltipProps;
+  /** English text "Use microphone" and "Stop listening" used in the tooltip */
+  tooltipContent?: { active?: string; inactive?: string };
+}
+
+export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
+  isListening,
+  onIsListeningChange,
+  onSpeechRecognition,
+  className,
+  tooltipProps,
+  tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
+  ...props
+}: MicrophoneButtonProps) => {
+  // Microphone
+  // --------------------------------------------------------------------------
+  const [speechRecognition, setSpeechRecognition] = React.useState<SpeechRecognition>();
+
+  // Listen for speech
+  const startListening = React.useCallback(() => {
+    if (speechRecognition) {
+      speechRecognition.start();
+      onIsListeningChange(true);
+    }
+  }, [onIsListeningChange, speechRecognition]);
+
+  // Stop listening for speech
+  const stopListening = React.useCallback(() => {
+    if (speechRecognition && isListening) {
+      speechRecognition.stop();
+      onIsListeningChange(false);
+    }
+  }, [isListening, onIsListeningChange, speechRecognition]);
+
+  // Detect speech recognition browser support
+  React.useEffect(() => {
+    if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+      // Initialize SpeechRecognition
+      const recognition: SpeechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+      recognition.lang = 'en-US';
+
+      recognition.onresult = (event) => {
+        const result = event.results[0][0].transcript;
+        onSpeechRecognition(result);
+        recognition.stop();
+      };
+
+      recognition.onerror = (event) => {
+        // eslint-disable-next-line no-console
+        console.error('Speech recognition error:', event.error);
+        recognition.stop();
+      };
+
+      setSpeechRecognition(recognition);
+    }
+  }, [onSpeechRecognition]);
+
+  if (!speechRecognition) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      aria="none"
+      aria-live="polite"
+      id="pf-chatbot__tooltip--use-microphone"
+      content={isListening ? tooltipContent.active : tooltipContent.inactive}
+      position={tooltipProps?.position || 'top'}
+      entryDelay={tooltipProps?.entryDelay || 0}
+      exitDelay={tooltipProps?.exitDelay || 0}
+      distance={tooltipProps?.distance || 8}
+      animationDuration={tooltipProps?.animationDuration || 0}
+      {...tooltipProps}
+    >
+      <Button
+        variant="plain"
+        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className ?? ''}`}
+        aria-label={props['aria-label'] || 'Microphone button'}
+        onClick={isListening ? stopListening : startListening}
+        icon={
+          <Icon iconSize="xl" isInline>
+            <MicrophoneIcon />
+          </Icon>
+        }
+        {...props}
+      />
+    </Tooltip>
+  );
+};
+
+export default MicrophoneButton;

package/src/MessageBar/SendButton.scss

@@ -0,0 +1,29 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Send
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--send {
+  border-radius: var(--pf-t--global--border--radius--pill);
+  padding: var(--pf-t--global--spacer--md);
+  width: 3rem;
+  height: 3rem;
+
+  &:hover,
+  &:focus {
+    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--chatbot--blue-icon--fill--hover);
+    }
+  }
+}
+
+@keyframes motionSendButton {
+  0% {
+    opacity: 0;
+    transform: translate3d(-8px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

package/src/MessageBar/SendButton.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { SendButton } from './SendButton';
+import { TooltipProps } from '@patternfly/react-core';
+
+const renderSend = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+  const spy = jest.fn();
+  render(<SendButton onClick={spy} {...props} />);
+};
+describe('Send button', () => {
+  it('should render button correctly', () => {
+    renderSend();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+  });
+  it('should handle onClick correctly', async () => {
+    const spy = jest.fn();
+    render(<SendButton onClick={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle custom tooltip correctly', async () => {
+    render(<SendButton onClick={jest.fn} tooltipContent="Test" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('should handle className prop', () => {
+    renderSend({ className: 'test' });
+    expect(screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+  });
+
+  it('should handle spread props, including aria-label', () => {
+    renderSend({ 'aria-label': 'test' });
+    expect(screen.getByRole('button', { name: 'test' }));
+  });
+  it('should handle tooltipProps prop', async () => {
+    renderSend({ tooltipProps: { id: 'test' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
+  });
+});

package/src/MessageBar/SendButton.tsx

@@ -0,0 +1,54 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Send
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
+
+import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
+
+export interface SendButtonProps extends ButtonProps {
+  /** Callback for when button is clicked */
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Class Name for SendButton */
+  className?: string;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** English text "Send" used in the tooltip */
+  tooltipContent?: string;
+}
+
+export const SendButton: React.FunctionComponent<SendButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  tooltipContent = 'Send',
+  ...props
+}: SendButtonProps) => (
+  <Tooltip
+    id="pf-chatbot__tooltip--send"
+    content={tooltipContent}
+    position={tooltipProps?.position || 'top'}
+    entryDelay={tooltipProps?.entryDelay || 0}
+    exitDelay={tooltipProps?.exitDelay || 0}
+    distance={tooltipProps?.distance || 8}
+    animationDuration={tooltipProps?.animationDuration || 0}
+    {...tooltipProps}
+  >
+    <Button
+      className={`pf-chatbot__button--send ${className ?? ''}`}
+      variant="link"
+      aria-label={props['aria-label'] || 'Send button'}
+      onClick={onClick}
+      icon={
+        <Icon iconSize="xl" isInline>
+          <PaperPlaneIcon />
+        </Icon>
+      }
+      {...props}
+    />
+  </Tooltip>
+);
+
+export default SendButton;

package/src/MessageBar/StopButton.scss

@@ -0,0 +1,22 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Stop
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--stop {
+  background-color: var(--pf-t--global--color--brand--default);
+  border-radius: var(--pf-t--global--border--radius--pill);
+  padding: var(--pf-t--global--spacer--md);
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .pf-v6-c-button__icon {
+    color: var(--pf-t--global--icon--color--inverse);
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--pf-t--global--color--brand--hover);
+  }
+}

package/src/MessageBar/StopButton.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { StopButton } from './StopButton';
+import { TooltipProps } from '@patternfly/react-core';
+
+const renderStop = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+  const spy = jest.fn();
+  render(<StopButton onClick={spy} {...props} />);
+};
+describe('Stop button', () => {
+  it('should render button correctly', () => {
+    renderStop();
+    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+  });
+  it('should handle onClick correctly', async () => {
+    const spy = jest.fn();
+    render(<StopButton onClick={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should handle custom tooltip correctly', async () => {
+    render(<StopButton onClick={jest.fn} tooltipContent="Test" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('should handle className prop', () => {
+    renderStop({ className: 'test' });
+    expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+  });
+  it('should handle spread props, including aria-label', () => {
+    renderStop({ 'aria-label': 'test' });
+    expect(screen.getByRole('button', { name: 'test' }));
+  });
+  it('should handle tooltipProps prop', async () => {
+    renderStop({ tooltipProps: { id: 'test' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
+  });
+});

package/src/MessageBar/StopButton.tsx

@@ -0,0 +1,57 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Stop
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
+
+export interface StopButtonProps extends ButtonProps {
+  /** Callback for when button is clicked */
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Class name for StopButton */
+  className?: string;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** English text "Stop" used in the tooltip */
+  tooltipContent?: string;
+}
+
+export const StopButton: React.FunctionComponent<StopButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  tooltipContent = 'Stop',
+  ...props
+}: StopButtonProps) => (
+  <Tooltip
+    id="pf-chatbot__tooltip--stop"
+    content={tooltipContent}
+    position={tooltipProps?.position || 'top'}
+    entryDelay={tooltipProps?.entryDelay || 0}
+    exitDelay={tooltipProps?.exitDelay || 0}
+    distance={tooltipProps?.distance || 8}
+    animationDuration={tooltipProps?.animationDuration || 0}
+    {...tooltipProps}
+  >
+    <Button
+      className={`pf-chatbot__button--stop ${className ?? ''}`}
+      variant="link"
+      aria-label={props['aria-label'] || 'Stop button'}
+      onClick={onClick}
+      icon={
+        <Icon iconSize="xl" isInline>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z"
+              fill="currentColor"
+            />
+          </svg>
+        </Icon>
+      }
+      {...props}
+    />
+  </Tooltip>
+);
+
+export default StopButton;

package/src/MessageBar/index.ts

@@ -0,0 +1,6 @@
+export { default } from './MessageBar';
+
+export * from './MessageBar';
+export * from './AttachButton';
+export * from './MicrophoneButton';
+export * from './SendButton';

package/src/MessageBox/JumpButton.scss

@@ -0,0 +1,46 @@
+// ============================================================================
+// Chatbot Jump Button
+// ============================================================================
+// importants are temporary until we can find a workaround for the way Backstage is pulling in style sheets
+.pf-chatbot__jump {
+  position: absolute !important;
+  inset-inline-start: 75% !important;
+  width: 2rem !important;
+  height: 2rem !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--pf-t--global--spacer--md) !important;
+  border-radius: var(--pf-t--global--border--radius--pill) !important;
+  --pf-v6-c-button--MinWidth: 2rem;
+  background-color: var(--pf-t--global--background--color--primary--default) !important;
+  border: 1px solid var(--pf-t--chatbot--border) !important;
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+  color: var(--pf-t--chatbot--icon--fill) !important;
+  transform: translate3d(-50%, 0, 0) !important;
+  transition:
+    background-color var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
+    box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
+    transform var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md),
+    opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
+  z-index: var(--pf-t--global--z-index--md) !important;
+
+  .pf-v6-c-button__text {
+    line-height: 1rem;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--pf-t--global--background--color--primary--hover) !important;
+    box-shadow: var(--pf-t--global--box-shadow--md) !important;
+    color: var(--pf-t--chatbot--icon--fill--hover) !important;
+  }
+
+  &--top {
+    inset-block-start: var(--pf-t--global--spacer--md) !important;
+  }
+
+  &--bottom {
+    inset-block-end: var(--pf-t--global--spacer--md) !important;
+  }
+}

package/src/MessageBox/JumpButton.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import JumpButton from './JumpButton';
+import userEvent from '@testing-library/user-event';
+
+describe('JumpButton', () => {
+  it('should render top button correctly', () => {
+    render(<JumpButton position="top" onClick={jest.fn()} />);
+    expect(screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+  });
+  it('should render bottom button correctly', () => {
+    render(<JumpButton position="bottom" onClick={jest.fn()} />);
+    expect(screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+  });
+  it('should call onClick appropriately', async () => {
+    const spy = jest.fn();
+    render(<JumpButton position="bottom" onClick={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be hidden if isHidden prop is used', async () => {
+    render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
+    expect(screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+  });
+});

package/src/MessageBox/JumpButton.tsx

@@ -0,0 +1,37 @@
+// ============================================================================
+// Chatbot Main - Messages - Jump to Top
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { Button, Tooltip, Icon } from '@patternfly/react-core';
+
+import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
+import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
+
+export interface JumpButtonProps {
+  /** Position of the Jump Button(top/bottom) */
+  position: 'top' | 'bottom';
+  /** Callback for the onClick event */
+  onClick: () => void;
+  /** Flag to change the visibilty of the button */
+  isHidden?: boolean;
+}
+
+const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+  isHidden ? null : (
+    <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
+      <Button
+        variant="plain"
+        className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
+        aria-label={`Jump ${position} button`}
+        onClick={onClick}
+      >
+        <Icon iconSize="lg" isInline>
+          {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        </Icon>
+      </Button>
+    </Tooltip>
+  );
+
+export default JumpButton;

package/src/MessageBox/MessageBox.scss

@@ -0,0 +1,36 @@
+@import './JumpButton';
+
+.pf-chatbot__messagebox {
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--pf-t--global--spacer--sm);
+  padding: var(--pf-t--global--spacer--lg);
+}
+
+.pf-chatbot__messagebox--bottom {
+  justify-content: flex-end;
+}
+
+// hide from view but not assistive technologies
+// https://css-tricks.com/inclusively-hidden/
+.pf-chatbot__messagebox-announcement {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--embedded,
+  .pf-chatbot--fullscreen {
+    .pf-chatbot__messagebox {
+      max-width: 60rem;
+      width: 100%;
+    }
+  }
+}

package/src/MessageBox/MessageBox.tsx

@@ -0,0 +1,114 @@
+// ============================================================================
+// Chatbot Main - Messages
+// ============================================================================
+import React from 'react';
+import JumpButton from './JumpButton';
+
+export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content that can be announced, such as a new message, for screen readers */
+  announcement?: string;
+  /** Custom aria-label for scrollable portion of message box */
+  ariaLabel?: string;
+  /** Content to be displayed in the message box */
+  children: React.ReactNode;
+  /** Custom classname for the MessageBox component */
+  className?: string;
+  /** Ref applied to message box */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** Modifier that controls how content in MessageBox is positioned within the container */
+  position?: 'top' | 'bottom';
+}
+
+const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
+  announcement,
+  ariaLabel = 'Scrollable message log',
+  children,
+  innerRef,
+  className,
+  position = 'top'
+}: MessageBoxProps) => {
+  const [atTop, setAtTop] = React.useState(false);
+  const [atBottom, setAtBottom] = React.useState(true);
+  const [isOverflowing, setIsOverflowing] = React.useState(false);
+  const defaultRef = React.useRef<HTMLDivElement>(null);
+  let messageBoxRef;
+  if (innerRef) {
+    messageBoxRef = innerRef;
+  } else {
+    messageBoxRef = defaultRef;
+  }
+
+  // Configure handlers
+  const handleScroll = React.useCallback(() => {
+    const element = messageBoxRef.current;
+    if (element) {
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      setAtTop(scrollTop === 0);
+      setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
+    }
+  }, []);
+
+  const checkOverflow = React.useCallback(() => {
+    const element = messageBoxRef.current;
+    if (element) {
+      const { scrollHeight, clientHeight } = element;
+      setIsOverflowing(scrollHeight >= clientHeight);
+    }
+  }, []);
+
+  const scrollToTop = React.useCallback(() => {
+    const element = messageBoxRef.current;
+    if (element) {
+      element.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, []);
+
+  const scrollToBottom = React.useCallback(() => {
+    const element = messageBoxRef.current;
+    if (element) {
+      element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
+    }
+  }, []);
+
+  // Detect scroll position
+  React.useEffect(() => {
+    const element = messageBoxRef.current;
+    if (element) {
+      // Listen for scroll events
+      element.addEventListener('scroll', handleScroll);
+
+      // Check initial position and overflow
+      handleScroll();
+      checkOverflow();
+
+      return () => {
+        element.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [checkOverflow, handleScroll]);
+
+  return (
+    <>
+      <JumpButton position="top" isHidden={isOverflowing && atTop} onClick={scrollToTop} />
+      <div
+        role="region"
+        tabIndex={0}
+        aria-label={ariaLabel}
+        className={`pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className ?? ''}`}
+        ref={innerRef ?? messageBoxRef}
+      >
+        {children}
+        <div className="pf-chatbot__messagebox-announcement" aria-live="polite">
+          {announcement}
+        </div>
+      </div>
+      <JumpButton position="bottom" isHidden={isOverflowing && atBottom} onClick={scrollToBottom} />
+    </>
+  );
+};
+
+export const MessageBox = React.forwardRef((props: MessageBoxProps, ref: React.Ref<any>) => (
+  <MessageBoxBase innerRef={ref} {...props} />
+));
+
+export default MessageBox;

package/src/MessageBox/index.ts

@@ -0,0 +1,4 @@
+export { default } from './MessageBox';
+
+export * from './MessageBox';
+export * from './JumpButton';