@patternfly/chatbot 2.1.0-prerelease.17

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -0,0 +1,217 @@
+// ============================================================================
+// Chatbot Header - Chatbot Conversation History Nav
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import {
+  Button,
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerPanelBody,
+  DrawerProps,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContentBody,
+  SearchInput,
+  Menu,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+  MenuContent
+} from '@patternfly/react-core';
+
+import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
+
+export interface Conversation {
+  /** Conversation id */
+  id: string;
+  /** Conversation icon */
+  icon?: React.ReactNode;
+  /** Flag for no icon */
+  noIcon?: boolean;
+  /** Conversation */
+  text: string;
+  /** Dropdown items rendered in conversation options dropdown */
+  menuItems?: React.ReactNode;
+  /** Optional classname applied to conversation options dropdown */
+  menuClassName?: string;
+  /** Tooltip content and aria-label applied to conversation options dropdown */
+  label?: string;
+  /** Callback for when user selects item. */
+  onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+}
+export interface ChatbotConversationHistoryNavProps extends DrawerProps {
+  /** Function called to toggle drawer */
+  onDrawerToggle: (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Flag to indicate whether drawer is open */
+  isDrawerOpen: boolean;
+  /** Function called to close drawer */
+  setIsDrawerOpen: (bool: boolean) => void;
+  /* itemId of the currently active item. */
+  activeItemId?: string | number;
+  /** Callback function for when an item is selected */
+  onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
+  /** Items shown in conversation history */
+  conversations: Conversation[] | { [key: string]: Conversation[] };
+  /** Text shown in blue button */
+  newChatButtonText?: string;
+  /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
+  onNewChat?: () => void;
+  /** Content wrapped by conversation history nav */
+  drawerContent?: React.ReactNode;
+  /** Placeholder for search input */
+  searchInputPlaceholder?: string;
+  /** Aria label for search input */
+  searchInputAriaLabel?: string;
+  /** A callback for when the input value changes. Omit to hide input field */
+  handleTextInputChange?: (value: string) => void;
+  /** Display mode of chatbot */
+  displayMode: ChatbotDisplayMode;
+}
+
+export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
+  onDrawerToggle,
+  isDrawerOpen,
+  setIsDrawerOpen,
+  activeItemId,
+  onSelectActiveItem,
+  conversations,
+  newChatButtonText = 'New chat',
+  drawerContent,
+  onNewChat,
+  searchInputPlaceholder = 'Search...',
+  searchInputAriaLabel = 'Filter menu items',
+  handleTextInputChange,
+  displayMode,
+  ...props
+}: ChatbotConversationHistoryNavProps) => {
+  const drawerRef = React.useRef<HTMLDivElement>(null);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const getNavItem = (conversation: Conversation) => (
+    <MenuItem
+      className="pf-chatbot__menu-item"
+      itemId={conversation.id}
+      key={conversation.id}
+      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
+      /* eslint-disable indent */
+      {...(conversation.menuItems
+        ? {
+            actions: (
+              <ConversationHistoryDropdown
+                menuClassName={conversation.menuClassName}
+                onSelect={conversation.onSelect}
+                menuItems={conversation.menuItems}
+                label={conversation.label}
+              />
+            )
+          }
+        : {})}
+      /* eslint-enable indent */
+    >
+      {conversation.text}
+    </MenuItem>
+  );
+
+  const buildMenu = () => {
+    if (Array.isArray(conversations)) {
+      // Render for array of MenuItemObject
+      return (
+        <MenuList>
+          {conversations.map((conversation) => (
+            <React.Fragment key={conversation.id}>{getNavItem(conversation)}</React.Fragment>
+          ))}
+        </MenuList>
+      );
+    } else {
+      // Render for object with NavItemObject arrays as values
+      return (
+        <>
+          {Object.keys(conversations).map((navGroup) => (
+            <MenuGroup className="pf-chatbot__menu-item-header" label={navGroup} key={navGroup}>
+              <MenuList>
+                {conversations[navGroup].map((conversation) => (
+                  <React.Fragment key={conversation.id}>{getNavItem(conversation)}</React.Fragment>
+                ))}
+              </MenuList>
+            </MenuGroup>
+          ))}
+        </>
+      );
+    }
+  };
+
+  // Menu Content
+  // - Consumers should pass an array to <Chatbot> of the list of conversations
+  // - Groups could be optional, but items need to be ordered by date
+  const menuContent = (
+    <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId}>
+      <MenuContent>{buildMenu()}</MenuContent>
+    </Menu>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent focusTrap={{ enabled: true }} minSize="384px" maxSize="384px">
+      <DrawerHead>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onDrawerToggle} />
+          {onNewChat && <Button onClick={onNewChat}>{newChatButtonText}</Button>}
+        </DrawerActions>
+      </DrawerHead>
+      {handleTextInputChange && (
+        <div className="pf-chatbot__input">
+          <SearchInput
+            aria-label={searchInputAriaLabel}
+            onChange={(_event, value) => handleTextInputChange(value)}
+            placeholder={searchInputPlaceholder}
+          />
+        </div>
+      )}
+      <DrawerPanelBody>{menuContent}</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  // An onKeyDown property must be passed to the Drawer component to handle closing
+  // the drawer panel and deactivating the focus trap via the Escape key.
+  const onEscape = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
+      if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {
+        setIsDrawerOpen(false);
+      }
+    }
+  };
+
+  return (
+    <Drawer
+      className="pf-chatbot__history"
+      isExpanded={isDrawerOpen}
+      onExpand={onExpand}
+      position="start"
+      onKeyDown={onEscape}
+      isInline={displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded}
+      {...props}
+    >
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>
+          <>
+            <div
+              className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}
+            ></div>
+            {drawerContent}
+          </>
+        </DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default ChatbotConversationHistoryNav;

package/src/ChatbotConversationHistoryNav/index.ts

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

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -0,0 +1,54 @@
+// Import related component scss files.
+@import './ChatbotFootnote';
+
+// ============================================================================
+// Chatbot Footer
+// ============================================================================
+.pf-chatbot__footer {
+  --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
+  background-color: var(--pf-t--chatbot--background);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--pf-chatbot__footer--RowGap);
+  position: relative; // this is so focus ring on parent chatbot doesn't include footer
+}
+.pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  row-gap: var(--pf-chatbot__footer--RowGap);
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen and Embedded
+// ============================================================================
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--embedded,
+  .pf-chatbot--fullscreen {
+    .pf-chatbot__footer {
+      align-items: center;
+      .pf-v6-c-divider {
+        display: none;
+      }
+    }
+    .pf-chatbot__footer-container {
+      width: 60rem;
+      padding: var(--pf-t--global--spacer--sm) 0;
+    }
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot--docked {
+  .pf-chatbot__footer {
+    .pf-v6-c-divider {
+      display: none;
+    }
+  }
+  .pf-chatbot__footer-container {
+    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+  }
+}

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -0,0 +1,33 @@
+// ============================================================================
+// Chatbot Footer
+// ============================================================================
+
+// Global footer component
+// Supports:
+// - Message bar
+// - Footnote
+// - Footnote popover
+
+import React from 'react';
+
+import { Divider } from '@patternfly/react-core';
+
+export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
+  /** Children for the Footer that supports MessageBar and FootNote components*/
+  children?: React.ReactNode;
+  /** Custom classname for the Footer component */
+  className?: string;
+}
+
+export const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps> = ({
+  children,
+  className,
+  ...props
+}: ChatbotFooterProps) => (
+  <div className={`pf-chatbot__footer ${className ?? ''}`} {...props}>
+    <Divider />
+    <div className="pf-chatbot__footer-container">{children}</div>
+  </div>
+);
+
+export default ChatbotFooter;

package/src/ChatbotFooter/ChatbotFootnote.scss

@@ -0,0 +1,12 @@
+// ============================================================================
+// Chatbot Footer - Footnote
+// ============================================================================
+
+.pf-chatbot__footnote {
+  align-self: center;
+
+  .pf-v6-c-button {
+    --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
+    --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--xs);
+  }
+}

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -0,0 +1,135 @@
+// ============================================================================
+// Chatbot Footer - Footnote
+// ============================================================================
+
+import React from 'react';
+
+// Import Patternfly components
+import { Button, Content, ContentVariants, Flex, PopoverProps } from '@patternfly/react-core';
+
+// Import Patternfly icons
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+
+// Import Chatbot components
+import ChatbotPopover from '../ChatbotPopover/ChatbotPopover';
+
+export interface ChatbotFootnoteProps extends React.HTMLProps<HTMLDivElement> {
+  /** Label to show for the footnote */
+  label: string;
+  /** Config for the popover which opens up when footnote is clicked */
+  popover?: ChatbotFootnotePopover;
+  /** Custom classname for the Footnote component */
+  className?: string;
+}
+
+export interface ChatbotFootnotePopover {
+  /** Title for the Footnote popover */
+  title: string;
+  /** Description for the Footnote popover */
+  description: string;
+  /** Optional Banner Image that can be shown in the Footnote Popover */
+  bannerImage?: ChatbotFootnotePopoverBannerImage;
+  /** Optional CTA button that can be used to trigger an action and close the popover */
+  cta?: ChatbotFootnotePopoverCTA;
+  /** Optional link that can be used to show and external link like **Learn More** */
+  link?: ChatbotFootnotePopoverLink;
+  /** Props for PF Popover */
+  popoverProps?: PopoverProps;
+}
+
+export interface ChatbotFootnotePopoverCTA {
+  /** Label for the CTA */
+  label: string;
+  /** Callback for the CTA */
+  onClick: () => void;
+}
+
+export interface ChatbotFootnotePopoverBannerImage {
+  /** Source for the banner image */
+  src: string;
+  /** Alternate text for the banner image */
+  alt: string;
+}
+export interface ChatbotFootnotePopoverLink {
+  /** Label for the Link */
+  label: string;
+  /** URL for the Link */
+  url: string;
+}
+
+export const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps> = ({
+  label,
+  popover,
+  className,
+  ...props
+}: ChatbotFootnoteProps) => {
+  // Popover visibility state
+  const [isVisible, setIsVisible] = React.useState<boolean>(false);
+
+  // Define popover body content
+  const popoverBodyContent = (
+    <>
+      {popover?.bannerImage && <img src={popover.bannerImage.src} alt={popover.bannerImage.alt} />}
+      <Content component={ContentVariants.h3}>{popover?.title}</Content>
+      <Content component={ContentVariants.p}>{popover?.description}</Content>
+    </>
+  );
+
+  // Define popover footer content
+  const popoverFooterContent = (
+    <Flex gap={{ default: 'gapSm' }}>
+      {popover?.cta && (
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setIsVisible(false);
+            popover.cta?.onClick();
+          }}
+        >
+          {popover.cta?.label || 'Got it'}
+        </Button>
+      )}
+      {popover?.link && (
+        <Button
+          variant="link"
+          component="a"
+          href={popover.link.url}
+          target="_blank"
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="end"
+        >
+          {popover.link.label}
+        </Button>
+      )}
+    </Flex>
+  );
+
+  return (
+    <div className={`pf-chatbot__footnote ${className ?? ''}`} {...props}>
+      {popover && (
+        <ChatbotPopover
+          className="pf-chatbot__popover--footnote"
+          aria-label={popover.popoverProps?.['aria-label'] || 'More information'}
+          isVisible={isVisible}
+          shouldOpen={(_event, _fn) => setIsVisible(true)}
+          shouldClose={(_event, _fn) => setIsVisible(false)}
+          bodyContent={popoverBodyContent}
+          footerContent={popoverFooterContent}
+          minWidth={popover.popoverProps?.minWidth || '432'}
+          maxWidth={popover.popoverProps?.maxWidth || '432'}
+          distance={popover.popoverProps?.distance || 16}
+          showClose={false}
+          {...popover.popoverProps}
+        >
+          <Button variant="link" size="sm">
+            {label} <InfoCircleIcon />
+          </Button>
+        </ChatbotPopover>
+      )}
+      {!popover && <Content component={ContentVariants.small}>{label}</Content>}
+    </div>
+  );
+};
+
+export default ChatbotFootnote;

package/src/ChatbotFooter/index.ts

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

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -0,0 +1,140 @@
+// ============================================================================
+// Chatbot Header
+// ============================================================================
+.pf-chatbot__header-container {
+  display: grid;
+}
+.pf-chatbot__header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--pf-t--global--spacer--sm);
+  position: relative; // this is so focus ring on parent chatbot doesn't include header
+  background-color: var(--pf-t--chatbot--background);
+  justify-content: space-between;
+  padding: var(--pf-t--global--spacer--lg);
+
+  .pf-chatbot__header-main {
+    display: flex;
+    gap: var(--pf-t--global--spacer--sm);
+
+    img {
+      pointer-events: none; // prevent dragging on any brand images - interferes with FileDropZone
+    }
+  }
+
+  // Title -or- Brand
+  .pf-chatbot__title {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    .pf-v6-l-bullseye {
+      width: 100%;
+    }
+
+    img {
+      max-height: 40px;
+      vertical-align: middle;
+    }
+  }
+
+  .pf-chatbot__menu {
+    justify-self: start;
+  }
+
+  .pf-chatbot__actions {
+    justify-self: end;
+    display: flex;
+    gap: var(--pf-t--global--spacer--sm);
+    justify-content: flex-end;
+    align-items: center;
+    .pf-v6-c-menu-toggle.pf-m-secondary {
+      width: 160px;
+    }
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen and Embedded
+// ============================================================================
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--fullscreen,
+  .pf-chatbot--embedded {
+    .pf-chatbot__header {
+      background-color: var(--pf-t--global--background--color--primary--default);
+    }
+    .pf-chatbot__header__divider {
+      display: none;
+    }
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot--docked {
+  .pf-chatbot__header {
+    background-color: var(--pf-t--chatbot--background);
+  }
+  .pf-chatbot__header__divider {
+    display: none;
+  }
+}
+
+// ============================================================================
+// Toggle Options
+// ============================================================================
+.pf-chatbot__button--toggle-options,
+.pf-chatbot__button--toggle-menu {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--pf-t--global--border--radius--pill);
+  align-items: center;
+  justify-content: center;
+
+  .pf-v6-c-button__icon,
+  .pf-v6-c-menu-toggle__icon,
+  .pf-v6-c-icon__content {
+    color: var(--pf-t--chatbot--icon--fill);
+  }
+
+  .pf-v6-c-button__icon,
+  .pf-v6-c-menu-toggle__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // Interactive states
+  &:hover,
+  &:focus {
+    .pf-v6-c-button__icon,
+    .pf-v6-c-menu-toggle__icon,
+    .pf-v6-c-icon__content {
+      color: var(--pf-t--chatbot--icon--fill--hover);
+    }
+  }
+}
+
+// Rotate icon
+.pf-chatbot__button--toggle-options {
+  svg {
+    transform: rotate(90deg);
+  }
+}
+
+// ============================================================================
+// Examples
+// ============================================================================
+.show-dark,
+:where(.pf-v6-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v6-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

package/src/ChatbotHeader/ChatbotHeader.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Divider } from '@patternfly/react-core';
+
+export interface ChatbotHeaderProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to be displayed in the chatbot header */
+  children: React.ReactNode;
+  /** Custom classname for the header component */
+  className?: string;
+}
+
+export const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps> = ({
+  className,
+  children
+}: ChatbotHeaderProps) => (
+  <div className="pf-chatbot__header-container">
+    <div className={`pf-chatbot__header ${className ?? ''}`}>{children}</div>
+    <Divider className="pf-chatbot__header__divider" />
+  </div>
+);
+
+export default ChatbotHeader;

package/src/ChatbotHeader/ChatbotHeaderActions.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface ChatbotHeaderActionsProps {
+  /** Content to be displayed in the chatbot header */
+  children: React.ReactNode;
+  /** Custom classname for the header component */
+  className?: string;
+}
+
+export const ChatbotHeaderActions: React.FunctionComponent<ChatbotHeaderActionsProps> = ({
+  className,
+  children
+}: ChatbotHeaderActionsProps) => <div className={`pf-chatbot__actions ${className || ''}`}>{children}</div>;
+
+export default ChatbotHeaderActions;

package/src/ChatbotHeader/ChatbotHeaderMain.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface ChatbotHeaderMainProps {
+  /** Custom classname for the header component */
+  className?: string;
+  /** Menu and/or chatbot header components */
+  children: React.ReactNode;
+}
+
+export const ChatbotHeaderMain: React.FunctionComponent<ChatbotHeaderMainProps> = ({
+  className,
+  children
+}: ChatbotHeaderMainProps) => <div className={`pf-chatbot__header-main ${className}`}>{children}</div>;
+
+export default ChatbotHeaderMain;