@patternfly/chatbot 2.1.0-prerelease.17

package/src/AttachmentEdit/AttachmentEdit.tsx

@@ -0,0 +1,63 @@
+// ============================================================================
+// Attachment Edit - Chatbot Code Snippet Editor
+// ============================================================================
+import React from 'react';
+import CodeModal from '../CodeModal';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+export interface AttachmentEditProps {
+  /** Text shown in code editor */
+  code: string;
+  /** Filename, including extension, of file shown in editor */
+  fileName: string;
+  /** Function that runs when cancel button is clicked  */
+  onCancel: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function that runs when save button is clicked; allows consumers to use the edited code string  */
+  onSave: (event: React.MouseEvent | MouseEvent | KeyboardEvent, code: string) => void;
+  /** Function that opens and closes modal */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+}
+
+export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
+  fileName,
+  code,
+  handleModalToggle,
+  isModalOpen,
+  onCancel,
+  onSave,
+  title = 'Edit attachment',
+  displayMode = ChatbotDisplayMode.default
+}: AttachmentEditProps) => {
+  const handleSave = (_event: React.MouseEvent | MouseEvent | KeyboardEvent, code) => {
+    handleModalToggle(_event);
+    onSave(_event, code);
+  };
+
+  const handleCancel = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onCancel(_event);
+  };
+
+  return (
+    <CodeModal
+      code={code}
+      fileName={fileName}
+      handleModalToggle={handleModalToggle}
+      isModalOpen={isModalOpen}
+      onPrimaryAction={handleSave}
+      onSecondaryAction={handleCancel}
+      primaryActionBtn="Save"
+      secondaryActionBtn="Cancel"
+      title={title}
+      displayMode={displayMode}
+    />
+  );
+};
+
+export default AttachmentEdit;

package/src/AttachmentEdit/index.ts

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

package/src/Chatbot/Chatbot.scss

@@ -0,0 +1,89 @@
+// ============================================================================
+// Chatbot
+// ============================================================================
+.pf-chatbot {
+  position: fixed;
+  inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
+  inset-inline-end: var(--pf-t--global--spacer--lg);
+  display: flex;
+  flex-direction: column;
+  width: 30rem;
+  height: 70vh;
+  background-color: var(--pf-t--chatbot--background);
+  border-radius: var(--pf-t--global--border--radius--medium);
+  box-shadow: var(--pf-t--global--box-shadow--lg);
+  font-size: var(--pf-t--chatbot--font-size);
+  z-index: var(--pf-t--global--z-index--md);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  // Hide chatbot
+  &--hidden {
+    pointer-events: none;
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot--docked {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  padding: 0;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: var(--pf-t--global--box-shadow--lg--left);
+  overflow: inherit;
+}
+
+html.pf-chatbot-allow--docked {
+  padding-right: 480px;
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen
+// ============================================================================
+.pf-chatbot--fullscreen {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+// ============================================================================
+// Chatbot Display Mode - Embedded
+// ============================================================================
+.pf-chatbot--embedded {
+  position: static;
+  width: 100%;
+  min-height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.pf-chatbot-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--pf-t--global--border--radius--medium);
+  overflow: hidden;
+
+  // Hide chatbot
+  &--hidden {
+    pointer-events: none;
+  }
+}
+
+.pf-chatbot-container--embedded {
+  min-height: 100%;
+}
+
+.pf-chatbot-container--docked,
+.pf-chatbot-container--embedded,
+.pf-chatbot-container--fullscreen {
+  border-radius: unset;
+}

package/src/Chatbot/Chatbot.tsx

@@ -0,0 +1,81 @@
+// ============================================================================
+// Chatbot
+// ============================================================================
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export interface ChatbotProps {
+  /** Content to be displayed in the chatbot */
+  children: React.ReactNode;
+  /** Display Mode for the Chatbot */
+  displayMode?: ChatbotDisplayMode;
+  /** Visibility flag for the chatbot */
+  isVisible?: boolean;
+  /** Custom classname for the Chatbot component */
+  className?: string;
+  /** Ref applied to chatbot  */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** Custom aria label applied to focusable container */
+  ariaLabel?: string;
+}
+
+export enum ChatbotDisplayMode {
+  default = 'default',
+  embedded = 'embedded',
+  docked = 'docked',
+  fullscreen = 'fullscreen'
+}
+
+const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
+  children,
+  displayMode = ChatbotDisplayMode.default,
+  isVisible = true,
+  className,
+  innerRef,
+  ariaLabel,
+  ...props
+}: ChatbotProps) => {
+  // Configure docked mode
+  React.useEffect(() => {
+    if (displayMode === ChatbotDisplayMode.docked) {
+      document.documentElement.classList.add('pf-chatbot-allow--docked');
+    } else {
+      document.documentElement.classList.remove('pf-chatbot-allow--docked');
+    }
+  }, [displayMode]);
+
+  // Configure animations
+  const motionChatbot = {
+    visible: { opacity: 1, y: 0 },
+    hidden: { opacity: 0, y: '16px' }
+  };
+
+  return (
+    <motion.div
+      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className ?? ''}`}
+      variants={motionChatbot}
+      initial="hidden"
+      animate={isVisible ? 'visible' : 'hidden'}
+      {...props}
+    >
+      {/* Ref is intended for use with skip to chatbot links, etc. */}
+      {/* Motion.div does not accept refs */}
+      {isVisible ? (
+        <section
+          aria-label={ariaLabel ?? 'Chatbot'}
+          className={`pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`}
+          tabIndex={-1}
+          ref={innerRef}
+        >
+          {children}
+        </section>
+      ) : undefined}
+    </motion.div>
+  );
+};
+
+const Chatbot = React.forwardRef((props: ChatbotProps, ref: React.Ref<HTMLDivElement>) => (
+  <ChatbotBase innerRef={ref} {...props} />
+));
+
+export default Chatbot;

package/src/Chatbot/index.ts

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

package/src/ChatbotAlert/ChatbotAlert.scss

@@ -0,0 +1,5 @@
+.pf-chatbot__alert {
+  position: sticky;
+  top: var(--pf-t--global--spacer--lg);
+  z-index: var(--pf-t--global--z-index--sm);
+}

package/src/ChatbotAlert/ChatbotAlert.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Alert, AlertActionCloseButton, AlertProps } from '@patternfly/react-core';
+
+export interface ChatbotAlert extends AlertProps {
+  /** Callback for when close button is clicked; if none is provided, there will be no way to dismiss the alert */
+  onClose?: () => void;
+}
+
+export const ChatbotAlert: React.FunctionComponent<ChatbotAlert> = ({
+  variant = 'info',
+  title,
+  children = '',
+  onClose,
+  ...props
+}: ChatbotAlert) => (
+  <div className="pf-chatbot__alert">
+    <Alert
+      variant={variant}
+      isInline
+      title={title}
+      component="h6"
+      {...(onClose && {
+        actionClose: <AlertActionCloseButton onClose={onClose} />
+      })}
+      {...props}
+    >
+      {children}
+    </Alert>
+  </div>
+);
+
+export default ChatbotAlert;

package/src/ChatbotAlert/index.ts

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

package/src/ChatbotContent/ChatbotContent.scss

@@ -0,0 +1,23 @@
+// ============================================================================
+// Chatbot Content
+// ============================================================================
+.pf-chatbot__content {
+  position: relative;
+  background-color: var(--pf-t--chatbot--background);
+  overflow-y: auto;
+  overflow: hidden; // needed in Red Hat Developer Hub workspace
+  flex: 1; // needed in Composer AI
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen and Embedded
+// ============================================================================
+@media screen and (min-width: 64rem) {
+  .pf-chatbot--fullscreen,
+  .pf-chatbot--embedded {
+    .pf-chatbot__content {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}

package/src/ChatbotContent/ChatbotContent.tsx

@@ -0,0 +1,23 @@
+// ============================================================================
+// Chatbot Main
+// ============================================================================
+import React from 'react';
+
+export interface ChatbotContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to be displayed in the chatbot */
+  children: React.ReactNode;
+  /** Custom classname for the ChatbotContent component */
+  className?: string;
+}
+
+export const ChatbotContent: React.FunctionComponent<ChatbotContentProps> = ({
+  children,
+  className,
+  ...props
+}: ChatbotContentProps) => (
+  <div className={`pf-chatbot__content ${className ?? ''}`} {...props}>
+    {children}
+  </div>
+);
+
+export default ChatbotContent;

package/src/ChatbotContent/index.ts

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

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -0,0 +1,62 @@
+// ============================================================================
+// Chatbot Header - Chatbot Conversation History Nav
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
+
+import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
+  /** 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 const ChatbotConversationHistoryDropdown: React.FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
+  menuItems,
+  menuClassName,
+  onSelect,
+  label
+}: ChatbotConversationHistoryDropdownProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <Tooltip className="pf-chatbot__tooltip" content={label ?? 'Conversation options'} position="bottom">
+      <MenuToggle
+        className="pf-chatbot__history-actions"
+        variant="plain"
+        aria-label={label ?? 'Conversation options'}
+        ref={toggleRef}
+        isExpanded={isOpen}
+        onClick={() => setIsOpen(!isOpen)}
+        role="menuitem"
+      >
+        <EllipsisIcon />
+      </MenuToggle>
+    </Tooltip>
+  );
+
+  return (
+    <Dropdown
+      className={`pf-chatbot__selections ${menuClassName ?? ''}`}
+      isOpen={isOpen}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      popperProps={{ position: 'right' }}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      toggle={toggle}
+    >
+      {menuItems}
+    </Dropdown>
+  );
+};
+
+export default ChatbotConversationHistoryDropdown;

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -0,0 +1,166 @@
+// ============================================================================
+// Chatbot Header - Menu
+// ============================================================================
+.pf-chatbot__history {
+  .pf-chatbot__drawer-backdrop {
+    position: absolute;
+    border-radius: var(--pf-t--global--border--radius--medium);
+  }
+  // Drawer input
+  // ----------------------------------------------------------------------------
+  .pf-chatbot__input {
+    padding-inline-start: var(--pf-t--global--spacer--xl);
+    padding-inline-end: var(--pf-t--global--spacer--xl);
+  }
+
+  // Drawer menu
+  // ----------------------------------------------------------------------------
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--PaddingBlockStart: 0;
+    --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    overflow: initial;
+    position: relative;
+  }
+  .pf-v6-c-menu__item-main {
+    --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
+  }
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
+    color: var(--pf-t--global--text--color--subtle);
+    font-weight: 500;
+    font-size: var(--pf-t--global--icon--size--font--sm);
+    --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    background-color: var(--pf-t--global--background--color--floating--default);
+    z-index: var(--pf-t--global--z-index--md);
+  }
+  .pf-chatbot__menu-item {
+    --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    color: var(--pf-t--global--text--color--regular);
+    font-size: var(--pf-t--global--font--size--body--lg);
+    font-weight: var(--pf-t--global--font--weight--body--default);
+  }
+  .pf-chatbot__history-actions {
+    transform: rotate(90deg);
+  }
+}
+
+// Chatbot Header - Drawer
+// ----------------------------------------------------------------------------
+.pf-chatbot__history.pf-v6-c-drawer {
+  --pf-v6-c-drawer__panel--MinWidth: 24rem;
+  --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
+  height: 70vh;
+
+  // Drawer panel
+  .pf-v6-c-drawer__panel {
+    --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--lg);
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+
+  // Drawer head
+  .pf-v6-c-drawer__head {
+    --pf-v6-c-drawer__head--PaddingBlockStart: 0;
+    --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
+    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--pf-t--global--spacer--2xl);
+  }
+
+  // Drawer actions
+  .pf-v6-c-drawer__actions {
+    --pf-v6-c-drawer__actions--MarginBlockStart: 0;
+    --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    align-self: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  // Close drawer
+  .pf-v6-c-drawer__close {
+    .pf-v6-c-button {
+      width: var(--pf-t--global--spacer--2xl);
+      height: var(--pf-t--global--spacer--2xl);
+      border-radius: var(--pf-t--global--border--radius--pill);
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  // Drawer body
+  .pf-v6-c-drawer__body {
+    --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
+    --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
+    --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    height: 70vh;
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Docked
+// ============================================================================
+.pf-chatbot--docked {
+  .pf-chatbot__history.pf-v6-c-drawer {
+    height: 100vh;
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen
+// ============================================================================
+.pf-chatbot--fullscreen {
+  .pf-chatbot__history.pf-v6-c-drawer {
+    height: 100vh;
+    .pf-v6-c-drawer__body {
+      width: 100%;
+    }
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - embedded
+// ============================================================================
+.pf-chatbot--embedded {
+  .pf-chatbot__history.pf-v6-c-drawer {
+    height: 100%;
+    .pf-v6-c-drawer__body {
+      width: 100%;
+      height: 100%;
+    }
+    .pf-v6-c-drawer__panel {
+      height: 100%;
+    }
+  }
+}
+
+.pf-chatbot--docked,
+.pf-chatbot--embedded,
+.pf-chatbot--fullscreen {
+  .pf-chatbot__history {
+    .pf-chatbot__drawer-backdrop {
+      border-radius: unset;
+    }
+  }
+}