@patternfly/chatbot 1.0.0

package/src/MessageBar/MicrophoneButton.tsx

@@ -0,0 +1,125 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Microphone
+// ============================================================================
+import type { FunctionComponent } from 'react';
+
+import { useState, useCallback, useEffect } 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?: Omit<TooltipProps, 'content'>;
+  /** English text "Use microphone" and "Stop listening" used in the tooltip */
+  tooltipContent?: { active?: string; inactive?: string };
+  /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
+  language?: string;
+  isCompact?: boolean;
+}
+
+export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
+  isListening,
+  onIsListeningChange,
+  onSpeechRecognition,
+  className,
+  tooltipProps,
+  tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
+  language = 'en-US',
+  isCompact,
+  ...props
+}: MicrophoneButtonProps) => {
+  // Microphone
+  // --------------------------------------------------------------------------
+  const [speechRecognition, setSpeechRecognition] = useState<SpeechRecognition>();
+
+  // Listen for speech
+  const startListening = useCallback(() => {
+    if (speechRecognition) {
+      speechRecognition.start();
+      onIsListeningChange(true);
+    }
+  }, [onIsListeningChange, speechRecognition]);
+
+  // Stop listening for speech
+  const stopListening = useCallback(() => {
+    if (speechRecognition && isListening) {
+      speechRecognition.stop();
+      onIsListeningChange(false);
+    }
+  }, [isListening, onIsListeningChange, speechRecognition]);
+
+  // Detect speech recognition browser support
+  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 = language;
+
+      recognition.onresult = (event) => {
+        const result = event.results[0][0].transcript;
+        onSpeechRecognition(result);
+        recognition.stop();
+        // turn button off
+        onIsListeningChange(false);
+      };
+
+      recognition.onerror = (event) => {
+        // eslint-disable-next-line no-console
+        console.error('Speech recognition error:', event.error);
+        recognition.stop();
+      };
+
+      setSpeechRecognition(recognition);
+    }
+  }, [onSpeechRecognition, language, onIsListeningChange]);
+
+  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' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+        aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
+        aria-pressed={isListening}
+        onClick={isListening ? stopListening : startListening}
+        icon={
+          <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
+            <MicrophoneIcon />
+          </Icon>
+        }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
+      />
+    </Tooltip>
+  );
+};
+
+export default MicrophoneButton;

package/src/MessageBar/SendButton.scss

@@ -0,0 +1,62 @@
+// ============================================================================
+// 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;
+
+  .pf-v6-c-button__icon {
+    --pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
+  }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
+    color: var(--pf-t--global--color--brand--hover);
+
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--global--color--brand--hover);
+    }
+  }
+}
+
+.pf-v6-theme-dark {
+  .pf-v6-c-button.pf-chatbot__button--send {
+    background-color: var(--pf-t--global--color--brand--default);
+    .pf-v6-c-button__icon {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
+    }
+  }
+
+  .pf-v6-c-button:disabled.pf-chatbot__button--send:disabled {
+    --pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled);
+    background-color: var(--pf-t--global--background--color--disabled--default);
+  }
+
+  .pf-v6-c-button.pf-chatbot__button--send:hover,
+  .pf-v6-c-button.pf-chatbot__button--send:focus {
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
+  }
+}
+
+@keyframes motionSendButton {
+  0% {
+    opacity: 0;
+    transform: translate3d(-8px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  align-items: center;
+}

package/src/MessageBar/SendButton.test.tsx

@@ -0,0 +1,46 @@
+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 | boolean | 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' })).toBeTruthy();
+  });
+  it('should handle onClick correctly', async () => {
+    const spy = jest.fn();
+    render(<SendButton onClick={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
+    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' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('should handle className prop', () => {
+    renderSend({ className: 'test' });
+    expect(screen.getByRole('button', { name: 'Send' })).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' }));
+    expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
+  });
+  it('should handle isCompact', () => {
+    renderSend({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
+});

package/src/MessageBar/SendButton.tsx

@@ -0,0 +1,60 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Send
+// ============================================================================
+import type { FunctionComponent } 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;
+  /** Whether send button has compact styling */
+  isCompact?: boolean;
+}
+
+export const SendButton: FunctionComponent<SendButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  tooltipContent = 'Send',
+  isCompact,
+  ...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}
+    // prevents VO announcements of both aria label and tooltip
+    aria="none"
+    {...tooltipProps}
+  >
+    <Button
+      variant="plain"
+      className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+      aria-label={props['aria-label'] || 'Send'}
+      onClick={onClick}
+      icon={
+        <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
+          <PaperPlaneIcon />
+        </Icon>
+      }
+      size={isCompact ? 'sm' : undefined}
+      {...props}
+    />
+  </Tooltip>
+);
+
+export default SendButton;

package/src/MessageBar/StopButton.scss

@@ -0,0 +1,45 @@
+// ============================================================================
+// 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--on-brand--default);
+  }
+
+  &:hover {
+    background-color: var(--pf-t--global--color--brand--hover);
+  }
+
+  &:focus {
+    background-color: var(--pf-t--global--color--brand--clicked);
+
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--global--icon--color--on-brand--default);
+    }
+
+    &:hover,
+    &:focus {
+      .pf-v6-c-button__icon {
+        color: var(--pf-t--global--icon--color--on-brand--default);
+      }
+    }
+  }
+}
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  align-items: center;
+}

package/src/MessageBar/StopButton.test.tsx

@@ -0,0 +1,45 @@
+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 | boolean | 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' })).toBeTruthy();
+  });
+  it('should handle onClick correctly', async () => {
+    const spy = jest.fn();
+    render(<StopButton onClick={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
+    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' }));
+    expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+  });
+  it('should handle className prop', () => {
+    renderStop({ className: 'test' });
+    expect(screen.getByRole('button', { name: 'Stop' })).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' }));
+    expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
+  });
+  it('should handle isCompact', () => {
+    renderStop({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
+});

package/src/MessageBar/StopButton.tsx

@@ -0,0 +1,63 @@
+// ============================================================================
+// Chatbot Footer - Message Bar - Stop
+// ============================================================================
+import type { FunctionComponent } 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;
+  /** Whether stop button has compact styling */
+  isCompact?: boolean;
+}
+
+export const StopButton: FunctionComponent<StopButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  tooltipContent = 'Stop',
+  isCompact,
+  ...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}
+    // prevents VO announcements of both aria label and tooltip
+    aria="none"
+    {...tooltipProps}
+  >
+    <Button
+      className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+      variant="link"
+      aria-label={props['aria-label'] || 'Stop'}
+      onClick={onClick}
+      icon={
+        <Icon iconSize={isCompact ? 'lg' : '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>
+      }
+      size={isCompact ? 'sm' : undefined}
+      {...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,51 @@
+// ============================================================================
+// 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 !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: var(--pf-t--global--spacer--md) !important;
+  border-radius: var(--pf-t--global--border--radius--pill) !important;
+  --pf-v6-c-button--MinWidth: 2rem !important;
+  background-color: var(--pf-t--global--background--color--primary--default) !important;
+  border: 1px solid var(--pf-t--global--border--color--default) !important;
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+  color: var(--pf-t--global--icon--color--subtle) !important;
+  transform: translate3d(-50%, 0, 0) !important;
+  transition:
+    background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+    box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+    transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md),
+    opacity var(--pf-t--global--motion--timing-function--accelerate) 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--global--icon--color--regular) !important;
+  }
+
+  &--top {
+    inset-block-start: var(--pf-t--global--spacer--md) !important;
+  }
+
+  &--bottom {
+    inset-block-end: var(--pf-t--global--spacer--md) !important;
+  }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    display: none;
+  }
+}

package/src/MessageBox/JumpButton.test.tsx

@@ -0,0 +1,25 @@
+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: /Back to top/i })).toBeTruthy();
+  });
+  it('should render bottom button correctly', () => {
+    render(<JumpButton position="bottom" onClick={jest.fn()} />);
+    expect(screen.getByRole('button', { name: /Back to bottom/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: /Back to bottom/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: /Back to bottom/i })).toBeFalsy();
+  });
+});

package/src/MessageBox/JumpButton.tsx

@@ -0,0 +1,53 @@
+// ============================================================================
+// Chatbot Main - Messages - Jump to Top
+// ============================================================================
+import type { FunctionComponent } from 'react';
+
+// Import PatternFly components
+import { Button, Tooltip, Icon, TooltipProps, ButtonProps } 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;
+  /** Additional props passed to jump buttons */
+  jumpButtonProps?: ButtonProps;
+  /** Additional props passed to tooltip */
+  jumpButtonTooltipProps?: TooltipProps;
+}
+
+const JumpButton: FunctionComponent<JumpButtonProps> = ({
+  position,
+  isHidden,
+  onClick,
+  jumpButtonProps,
+  jumpButtonTooltipProps
+}: JumpButtonProps) =>
+  isHidden ? null : (
+    <Tooltip
+      id={`pf-chatbot__tooltip--jump-${position}`}
+      content={`Back to ${position}`}
+      position="top"
+      {...jumpButtonTooltipProps}
+    >
+      <Button
+        variant="plain"
+        className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
+        aria-label={`Back to ${position}`}
+        onClick={onClick}
+        {...jumpButtonProps}
+      >
+        <Icon iconSize="lg" isInline>
+          {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+        </Icon>
+      </Button>
+    </Tooltip>
+  );
+
+export default JumpButton;

package/src/MessageBox/MessageBox.scss

@@ -0,0 +1,41 @@
+@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);
+
+  // 32 rem is the width of the overlay chatbot plus the insets
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 32rem) {
+    width: 100%;
+  }
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow-y: visible;
+  }
+}
+
+.pf-chatbot__messagebox--bottom > :first-child {
+  margin-top: auto !important;
+}
+
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--embedded,
+  .pf-chatbot--drawer,
+  .pf-chatbot--fullscreen {
+    .pf-chatbot__messagebox {
+      max-width: 60rem;
+      width: 100%;
+    }
+  }
+}
+
+.pf-chatbot.pf-m-compact {
+  .pf-chatbot__messagebox {
+    padding: var(--pf-t--global--spacer--md);
+  }
+}