@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -592,6 +592,101 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
   });
 
+  it('Does not render search actions by default', () => {
+    const handleSearch = jest.fn();
+    const groupedConversations: { [key: string]: Conversation[] } = {
+      Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+    };
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        conversations={groupedConversations}
+        handleTextInputChange={handleSearch}
+      />
+    );
+
+    const searchInput = screen.getByPlaceholderText(/Search/i);
+
+    expect(searchInput.parentElement?.previousElementSibling).toBeNull();
+    expect(searchInput.parentElement?.nextElementSibling).toBeNull();
+  });
+
+  it('Renders with action at start when searchActionStart is passed', () => {
+    const handleSearch = jest.fn();
+    const groupedConversations: { [key: string]: Conversation[] } = {
+      Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+    };
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        conversations={groupedConversations}
+        handleTextInputChange={handleSearch}
+        searchActionStart={<div>Search action start test</div>}
+      />
+    );
+
+    expect(screen.getByText('Search action start test')).toBeVisible();
+  });
+
+  it('Renders with action at end when searchActionEnd is passed', () => {
+    const handleSearch = jest.fn();
+    const groupedConversations: { [key: string]: Conversation[] } = {
+      Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+    };
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={handleSearch}
+        conversations={groupedConversations}
+        searchActionEnd={<div>Search action end test</div>}
+      />
+    );
+
+    expect(screen.getByText('Search action end test')).toBeVisible();
+  });
+
+  it('Overrides default search input and actions when searchToolbar is passed', () => {
+    const handleSearch = jest.fn();
+    const groupedConversations: { [key: string]: Conversation[] } = {
+      Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+    };
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        conversations={groupedConversations}
+        handleTextInputChange={handleSearch}
+        searchActionStart={<div>Search action start test</div>}
+        searchActionEnd={<div>Search action end test</div>}
+        searchToolbar={<div>Custom toolbar</div>}
+      />
+    );
+
+    expect(screen.queryByPlaceholderText(/Search/i)).not.toBeInTheDocument();
+    expect(screen.queryByText('Search action start test')).not.toBeInTheDocument();
+    expect(screen.queryByText('Search action end test')).not.toBeInTheDocument();
+    expect(screen.getByText('Custom toolbar')).toBeInTheDocument();
+  });
+
   it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
     render(
       <ChatbotConversationHistoryNav

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -8,6 +8,7 @@ import { useRef, Fragment } from 'react';
 import {
   Button,
   ButtonProps,
+  Divider,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -17,6 +18,8 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerContentBody,
+  InputGroup,
+  InputGroupItem,
   SearchInput,
   Title,
   DrawerPanelContentProps,
@@ -28,10 +31,10 @@ import {
   DrawerPanelBodyProps,
   SkeletonProps,
   Icon,
-  MenuProps,
   TitleProps,
-  MenuListProps,
   SearchInputProps,
+  MenuProps,
+  MenuListProps,
   MenuList,
   MenuGroup,
   MenuItem,
@@ -125,6 +128,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   drawerCloseButtonProps?: DrawerCloseButtonProps;
   /** Additional props appleid to drawer panel body */
   drawerPanelBodyProps?: DrawerPanelBodyProps;
+  /** Flag indicating whether a divider should render between the drawer head and title. */
+  hasDrawerHeadDivider?: boolean;
   /** Whether to show drawer loading state */
   isLoading?: boolean;
   /** Additional props for loading state */
@@ -145,6 +150,12 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   navTitleProps?: Partial<TitleProps>;
   /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
   searchInputScreenReaderText?: string;
+  /** Custom action rendered before the search input. */
+  searchActionStart?: React.ReactNode;
+  /** Custom action rendered after the search input. */
+  searchActionEnd?: React.ReactNode;
+  /** A custom search toolbar to render below the title. This will override the default search actions and/or search input. */
+  searchToolbar?: React.ReactNode;
   /** Additional props passed to MenuContent */
   menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }
@@ -175,6 +186,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   drawerActionsProps,
   drawerCloseButtonProps,
   drawerPanelBodyProps,
+  hasDrawerHeadDivider,
   isLoading,
   loadingState,
   errorState,
@@ -185,6 +197,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   navTitleProps,
   navTitleIcon = <OutlinedClockIcon />,
   searchInputScreenReaderText,
+  searchActionStart,
+  searchActionEnd,
+  searchToolbar,
   menuProps,
   menuGroupProps,
   menuContentProps,
@@ -287,6 +302,38 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     </>
   );
 
+  const searchInputContainer = handleTextInputChange && (
+    <div className="pf-chatbot__input">
+      <SearchInput
+        aria-label={searchInputAriaLabel}
+        onChange={(_event, value) => handleTextInputChange(value)}
+        placeholder={searchInputPlaceholder}
+        {...searchInputProps}
+      />
+      {searchInputScreenReaderText && (
+        <div className="pf-chatbot__filter-announcement pf-chatbot-m-hidden">{searchInputScreenReaderText}</div>
+      )}
+    </div>
+  );
+
+  const renderSearchAndActions = () => {
+    if (searchToolbar) {
+      return searchToolbar;
+    }
+
+    return searchActionStart || searchActionEnd ? (
+      <div className="pf-chatbot__history-search-actions">
+        <InputGroup>
+          {searchActionStart && <InputGroupItem>{searchActionStart}</InputGroupItem>}
+          {searchInputContainer && <InputGroupItem isFill>{searchInputContainer}</InputGroupItem>}
+          {searchActionEnd && <InputGroupItem>{searchActionEnd}</InputGroupItem>}
+        </InputGroup>
+      </div>
+    ) : (
+      searchInputContainer
+    );
+  };
+
   const renderPanelContent = () => {
     const drawer = (
       <>
@@ -309,6 +356,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
             )}
           </DrawerActions>
         </DrawerHead>
+        {hasDrawerHeadDivider && <Divider className="pf-chatbot__heading-divider" />}
         <div className="pf-chatbot__heading-container">
           <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
@@ -318,19 +366,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
               {title}
             </Title>
           </div>
-          {!isLoading && handleTextInputChange && (
-            <div className="pf-chatbot__input">
-              <SearchInput
-                aria-label={searchInputAriaLabel}
-                onChange={(_event, value) => handleTextInputChange(value)}
-                placeholder={searchInputPlaceholder}
-                {...searchInputProps}
-              />
-              {searchInputScreenReaderText && (
-                <div className="pf-chatbot__filter-announcement pf-chatbot-m-hidden">{searchInputScreenReaderText}</div>
-              )}
-            </div>
-          )}
+          {!isLoading && renderSearchAndActions()}
         </div>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
       </>

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -11,6 +11,10 @@
   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-m-primary {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 .pf-chatbot__footer-container {
   padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
@@ -62,3 +66,20 @@
   padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   row-gap: var(--pf-t--global--spacer--sm);
 }
+
+// ============================================================================
+// High contrast
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  // Chatbot Display Mode - Fullscreen and Embedded
+  @media screen and (min-width: 64rem) {
+    .pf-chatbot--embedded,
+    .pf-chatbot--fullscreen {
+      .pf-chatbot__footer {
+        .pf-v6-c-divider {
+          display: var(--pf-v6-hidden-visible--Display);
+        }
+      }
+    }
+  }
+}

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -15,10 +15,19 @@ describe('ChatbotFooter', () => {
 
   it('should handle isCompact', () => {
     render(
-      <ChatbotFooter className="custom-class" isCompact data-testid="footer">
+      <ChatbotFooter isCompact data-testid="footer">
         Chatbot Content
       </ChatbotFooter>
     );
     expect(screen.getByTestId('footer')).toHaveClass('pf-m-compact');
   });
+
+  it('should handle isPrimary', () => {
+    render(
+      <ChatbotFooter isPrimary data-testid="footer">
+        Chatbot Content
+      </ChatbotFooter>
+    );
+    expect(screen.getByTestId('footer')).toHaveClass('pf-m-primary');
+  });
 });

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -13,20 +13,27 @@ import type { HTMLProps, FunctionComponent } from 'react';
 import { Divider } from '@patternfly/react-core';
 
 export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
-  /** Children for the Footer that supports MessageBar and FootNote components*/
+  /** Children for the footer - supports MessageBar and FootNote components*/
   children?: React.ReactNode;
-  /** Custom classname for the Footer component */
+  /** Custom classname for the footer component */
   className?: string;
+  /** Sets footer to compact styling. */
   isCompact?: boolean;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
 }
 
 export const ChatbotFooter: FunctionComponent<ChatbotFooterProps> = ({
   children,
   className,
   isCompact,
+  isPrimary,
   ...props
 }: ChatbotFooterProps) => (
-  <div className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`} {...props}>
+  <div
+    className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}
+    {...props}
+  >
     <Divider />
     <div className="pf-chatbot__footer-container">{children}</div>
   </div>

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -91,6 +91,10 @@
   align-items: center;
   justify-content: center;
 
+  &::before {
+    border-radius: inherit;
+  }
+
   .pf-v6-c-button__icon,
   .pf-v6-c-menu-toggle__icon,
   .pf-v6-c-icon__content {
@@ -162,3 +166,18 @@
 .pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact {
   width: initial;
 }
+
+// ============================================================================
+// High contrast
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  // Chatbot Display Mode - Fullscreen and Embedded
+  @media screen and (min-width: 64rem) {
+    .pf-chatbot--fullscreen,
+    .pf-chatbot--embedded {
+      .pf-chatbot__header__divider {
+        display: var(--pf-v6-hidden-visible--Display);
+      }
+    }
+  }
+}

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -1,5 +1,5 @@
 import type { Ref, FunctionComponent } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -30,21 +30,43 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   tooltipContent = 'Chat history menu',
   isCompact,
   ...props
-}: ChatbotHeaderMenuProps) => (
-  <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip
-      content={tooltipContent}
-      position="bottom"
-      // prevents VO announcements of both aria label and tooltip
-      aria="none"
-      {...tooltipProps}
-    >
+}: ChatbotHeaderMenuProps) => {
+  const [isDrawerAnimating, setIsDrawerAnimating] = useState(false);
+  // I'd like to use a prop here later if this works
+  const drawerState = props['aria-expanded'];
+  const isDrawerOpen = drawerState === true;
+  const prevDrawerStateRef = useRef<boolean | undefined>(isDrawerOpen);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (drawerState !== undefined) {
+      const wasDrawerOpen = prevDrawerStateRef.current === true;
+      const isDrawerClosing = wasDrawerOpen && !isDrawerOpen;
+
+      setIsDrawerAnimating(true);
+      const timeout = setTimeout(() => {
+        setIsDrawerAnimating(false);
+
+        if (isDrawerClosing) {
+          requestAnimationFrame(() => {
+            buttonRef.current?.focus();
+          });
+        }
+      }, 350);
+
+      prevDrawerStateRef.current = isDrawerOpen;
+      return () => clearTimeout(timeout);
+    }
+  }, [drawerState, isDrawerOpen]);
+
+  const button = useMemo(
+    () => (
       <Button
         className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         onClick={onMenuToggle}
         aria-label={menuAriaLabel}
-        ref={innerRef}
+        ref={innerRef ?? buttonRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <BarsIcon />
@@ -53,9 +75,29 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
         size={isCompact ? 'sm' : undefined}
         {...props}
       />
-    </Tooltip>
-  </div>
-);
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]
+  );
+
+  return (
+    <div className={`pf-chatbot__menu ${className}`}>
+      {isDrawerAnimating ? (
+        button
+      ) : (
+        <Tooltip
+          content={tooltipContent}
+          position="bottom"
+          // prevents VO announcements of both aria label and tooltip
+          aria="none"
+          {...tooltipProps}
+        >
+          {button}
+        </Tooltip>
+      )}
+    </div>
+  );
+};
 
 export const ChatbotHeaderMenu = forwardRef((props: ChatbotHeaderMenuProps, ref: Ref<HTMLButtonElement>) => (
   <ChatbotHeaderMenuBase innerRef={ref} {...props} />

package/src/ChatbotModal/ChatbotModal.scss

@@ -18,7 +18,10 @@
   .pf-v6-c-modal-box__footer {
     padding-block-start: var(--pf-t--global--spacer--xl);
     padding-block-end: var(--pf-t--global--spacer--xl);
+    border-top: var(--pf-t--global--border--width--high-contrast--regular) solid
+      var(--pf-t--global--border--color--high-contrast);
   }
+
   .pf-v6-c-modal-box__header {
     padding-block-end: var(--pf-t--global--spacer--sm);
   }

package/src/CodeModal/CodeModal.tsx

@@ -5,16 +5,17 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useState, useEffect, useRef } from 'react';
 import path from 'path-browserify';
-import type monaco from 'monaco-editor';
 
 // Import PatternFly components
 import { CodeEditor } from '@patternfly/react-code-editor';
 import {
+  Bullseye,
   Button,
   getResizeObserver,
   ModalBody,
   ModalFooter,
   ModalHeader,
+  Spinner,
   Stack,
   StackItem
 } from '@patternfly/react-core';
@@ -22,6 +23,17 @@ import FileDetails, { extensionToLanguage } from '../FileDetails';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
 
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance: typeof import('monaco-editor') | null = null;
+const loadMonaco = async () => {
+  if (!monacoInstance) {
+    const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
+    monacoInstance = monaco;
+    loader.config({ monaco });
+  }
+  return monacoInstance;
+};
+
 export interface CodeModalProps {
   /** Class applied to code editor */
   codeEditorControlClassName?: string;
@@ -59,6 +71,8 @@ export interface CodeModalProps {
   modalBodyClassName?: string;
   /** Class applied to modal footer */
   modalFooterClassName?: string;
+  /** Aria label applied to spinner when loading Monaco */
+  spinnerAriaLabel?: string;
 }
 
 export const CodeModal: FunctionComponent<CodeModalProps> = ({
@@ -80,13 +94,32 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
   modalHeaderClassName,
   modalBodyClassName,
   modalFooterClassName,
+  spinnerAriaLabel = 'Loading',
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = useState(code);
-  const [editorInstance, setEditorInstance] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [editorInstance, setEditorInstance] = useState<any>(null);
   const [isEditorReady, setIsEditorReady] = useState(false);
+  const [isMonacoLoading, setIsMonacoLoading] = useState(false);
+  const [isMonacoLoaded, setIsMonacoLoaded] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+      setIsMonacoLoading(true);
+      loadMonaco()
+        .then(() => {
+          setIsMonacoLoaded(true);
+          setIsMonacoLoading(false);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error('Failed to load Monaco editor:', error);
+          setIsMonacoLoading(false);
+        });
+    }
+  }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+
   useEffect(() => {
     if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
       return;
@@ -144,6 +177,42 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
     }
   };
 
+  const renderMonacoEditor = () => {
+    if (isMonacoLoading) {
+      return (
+        <Bullseye>
+          <Spinner aria-label={spinnerAriaLabel} />
+        </Bullseye>
+      );
+    }
+    if (isMonacoLoaded) {
+      return (
+        <CodeEditor
+          isDarkTheme
+          isLineNumbersVisible={isLineNumbersVisible}
+          isLanguageLabelVisible
+          isCopyEnabled={isCopyEnabled}
+          isReadOnly={isReadOnly}
+          code={newCode}
+          language={extensionToLanguage[path.extname(fileName).slice(1)]}
+          onEditorDidMount={onEditorDidMount}
+          onCodeChange={onCodeChange}
+          className={codeEditorClassName}
+          isFullHeight
+          options={{
+            glyphMargin: false,
+            folding: false,
+            // prevents Monaco from handling resizing itself
+            // was causing ResizeObserver issues
+            automaticLayout: false
+          }}
+          {...props}
+        />
+      );
+    }
+    return null;
+  };
+
   const modal = (
     <ChatbotModal
       isOpen={isModalOpen}
@@ -162,27 +231,7 @@ export const CodeModal: FunctionComponent<CodeModalProps> = ({
             <FileDetails fileName={fileName} />
           </StackItem>
           <div className="pf-v6-l-stack__item pf-chatbot__code-modal-editor" ref={containerRef}>
-            <CodeEditor
-              isDarkTheme
-              isLineNumbersVisible={isLineNumbersVisible}
-              isLanguageLabelVisible
-              isCopyEnabled={isCopyEnabled}
-              isReadOnly={isReadOnly}
-              code={newCode}
-              language={extensionToLanguage[path.extname(fileName).slice(1)]}
-              onEditorDidMount={onEditorDidMount}
-              onCodeChange={onCodeChange}
-              className={codeEditorClassName}
-              isFullHeight
-              options={{
-                glyphMargin: false,
-                folding: false,
-                // prevents Monaco from handling resizing itself
-                // was causing ResizeObserver issues
-                automaticLayout: false
-              }}
-              {...props}
-            />
+            {renderMonacoEditor()}
           </div>
         </Stack>
       </ModalBody>

package/src/DeepThinking/DeepThinking.scss

@@ -1,5 +1,5 @@
 .pf-chatbot__deep-thinking {
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   overflow: unset;
 }