@patternfly/chatbot 6.8.0-prerelease.3 → 6.8.0-prerelease.5

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx

@@ -43,10 +43,12 @@ import ChatbotHeader, {
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
-import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
-import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
-import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
+import {
+  RhUiMenuBarsIcon,
+  RhUiExpandIcon,
+  RhUiOpenDrawerRightIcon,
+  RhUiRestoreWindowIcon
+} from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -263,7 +265,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
@@ -365,7 +367,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
                       <DropdownItem
                         value={ChatbotDisplayMode.default}
                         key="switchDisplayOverlay"
-                        icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                        icon={<RhUiRestoreWindowIcon aria-hidden />}
                         isSelected={displayMode === ChatbotDisplayMode.default}
                       >
                         <span>Overlay</span>
@@ -373,7 +375,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
                       <DropdownItem
                         value={ChatbotDisplayMode.drawer}
                         key="switchDisplayDock"
-                        icon={<OpenDrawerRightIcon aria-hidden />}
+                        icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                         isSelected={displayMode === ChatbotDisplayMode.drawer}
                       >
                         <span>Drawer</span>
@@ -381,7 +383,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
                       <DropdownItem
                         value={ChatbotDisplayMode.fullscreen}
                         key="switchDisplayFullscreen"
-                        icon={<ExpandIcon aria-hidden />}
+                        icon={<RhUiExpandIcon aria-hidden />}
                         isSelected={displayMode === ChatbotDisplayMode.fullscreen}
                       >
                         <span>Fullscreen</span>

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx

@@ -39,7 +39,7 @@ import ChatbotHeader, {
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -290,7 +290,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx

@@ -21,11 +21,7 @@ import ChatbotHeader, {
   ChatbotHeaderSelectorDropdown,
   ChatbotHeaderOptionsDropdown
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
-
-import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
-import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
-import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
-
+import { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
@@ -450,7 +446,7 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => {
                         <DropdownItem
                           value={ChatbotDisplayMode.default}
                           key="switchDisplayOverlay"
-                          icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                          icon={<RhUiRestoreWindowIcon aria-hidden />}
                           isSelected={displayMode === ChatbotDisplayMode.default}
                         >
                           <span>Overlay</span>
@@ -458,7 +454,7 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => {
                         <DropdownItem
                           value={ChatbotDisplayMode.docked}
                           key="switchDisplayDock"
-                          icon={<OpenDrawerRightIcon aria-hidden />}
+                          icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                           isSelected={displayMode === ChatbotDisplayMode.docked}
                         >
                           <span>Dock to window</span>
@@ -466,7 +462,7 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => {
                         <DropdownItem
                           value={ChatbotDisplayMode.fullscreen}
                           key="switchDisplayFullscreen"
-                          icon={<ExpandIcon aria-hidden />}
+                          icon={<RhUiExpandIcon aria-hidden />}
                           isSelected={displayMode === ChatbotDisplayMode.fullscreen}
                         >
                           <span>Fullscreen</span>

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx

@@ -21,10 +21,7 @@ import ChatbotHeader, {
   ChatbotHeaderOptionsDropdown
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 
-import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
-import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
-import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
-
+import { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
@@ -470,7 +467,7 @@ export const ChatbotDemo: FunctionComponent = () => {
                         <DropdownItem
                           value={ChatbotDisplayMode.default}
                           key="switchDisplayOverlay"
-                          icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                          icon={<RhUiRestoreWindowIcon aria-hidden />}
                           isSelected={displayMode === ChatbotDisplayMode.default}
                         >
                           <span>Overlay</span>
@@ -478,7 +475,7 @@ export const ChatbotDemo: FunctionComponent = () => {
                         <DropdownItem
                           value={ChatbotDisplayMode.docked}
                           key="switchDisplayDock"
-                          icon={<OpenDrawerRightIcon aria-hidden />}
+                          icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                           isSelected={displayMode === ChatbotDisplayMode.docked}
                         >
                           <span>Dock to window</span>
@@ -486,7 +483,7 @@ export const ChatbotDemo: FunctionComponent = () => {
                         <DropdownItem
                           value={ChatbotDisplayMode.fullscreen}
                           key="switchDisplayFullscreen"
-                          icon={<ExpandIcon aria-hidden />}
+                          icon={<RhUiExpandIcon aria-hidden />}
                           isSelected={displayMode === ChatbotDisplayMode.fullscreen}
                         >
                           <span>Fullscreen</span>

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -37,7 +37,7 @@ import ChatbotHeader, {
 
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -282,7 +282,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -20,7 +20,7 @@ import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
 import ChatbotHeader, { ChatbotHeaderMain, ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -155,7 +155,7 @@ export const EmbeddedComparisonChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>

package/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx

@@ -37,7 +37,7 @@ import ChatbotHeader, {
 
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
-import { BarsIcon } from '@patternfly/react-icons';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -296,7 +296,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
             onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
             id="fill-nav-toggle"
           >
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -7,8 +7,7 @@ import { useState } 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';
+import { RhUiEllipsisVerticalFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
   /** Dropdown items rendered in conversation settings dropdown */
@@ -53,7 +52,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         id={id}
         role="menuitem"
       >
-        <EllipsisIcon />
+        <RhUiEllipsisVerticalFillIcon />
       </MenuToggle>
     </Tooltip>
   );

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -45,7 +45,7 @@ import {
   MenuContentProps
 } from '@patternfly/react-core';
 
-import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
+import { RhUiClockIcon, RhUiCommentIcon, RhUiEditFillIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
@@ -195,7 +195,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   isCompact,
   title = 'Chat history',
   navTitleProps,
-  navTitleIcon = <OutlinedClockIcon />,
+  navTitleIcon = <RhUiClockIcon />,
   searchInputScreenReaderText,
   searchActionStart,
   searchActionEnd,
@@ -218,7 +218,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     <MenuItem
       className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
-      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
+      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <RhUiCommentIcon /> })}
       /* eslint-disable indent */
       {...(conversation.menuItems
         ? {
@@ -354,7 +354,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
               <Button
                 size={isCompact ? 'sm' : undefined}
                 onClick={onNewChat}
-                icon={<PenToSquareIcon />}
+                icon={<RhUiEditFillIcon />}
                 {...newChatButtonProps}
               >
                 {newChatButtonText}

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -2,7 +2,7 @@ import type { Ref, FunctionComponent } from 'react';
 import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { CloseIcon } from '@patternfly/react-icons';
+import { RhMicronsCloseIcon } from '@patternfly/react-icons';
 
 export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
   /** Callback function for when button is clicked */
@@ -47,7 +47,7 @@ const ChatbotHeaderCloseButtonBase: FunctionComponent<ChatbotHeaderCloseButtonPr
         ref={innerRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
-            <CloseIcon />
+            <RhMicronsCloseIcon />
           </Icon>
         }
         size={isCompact ? 'sm' : undefined}

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -2,7 +2,7 @@ import type { Ref, FunctionComponent } 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';
+import { RhUiMenuBarsIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
 
 export interface ChatbotHeaderMenuProps extends ButtonProps {
   /** Callback function to attach to menu toggle on top right of chatbot header. */
@@ -69,7 +69,7 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
         ref={innerRef ?? buttonRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </Icon>
         }
         size={isCompact ? 'sm' : undefined}

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx

@@ -2,8 +2,7 @@ import type { Ref, FunctionComponent } from 'react';
 import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { PenToSquareIcon } from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
-
+import { RhUiEditFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
 export interface ChatbotHeaderNewChatButtonProps extends ButtonProps {
   /** Callback function for when button is clicked */
   onClick: () => void;
@@ -47,7 +46,7 @@ const ChatbotHeaderNewChatButtonBase: FunctionComponent<ChatbotHeaderNewChatButt
         ref={innerRef}
         icon={
           <Icon size={isCompact ? 'lg' : 'xl'} isInline>
-            <PenToSquareIcon />
+            <RhUiEditFillIcon />
           </Icon>
         }
         size={isCompact ? 'sm' : undefined}

package/src/FileDropZone/FileDropZone.tsx

@@ -2,7 +2,7 @@ import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-co
 import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
-import { UploadIcon } from '@patternfly/react-icons';
+import { RhUiUploadIcon } from '@patternfly/react-icons';
 import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 
 export interface FileDropZoneProps {
@@ -59,7 +59,7 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   const renderDropZone = () => (
     <>
       <MultipleFileUploadMain
-        titleIcon={<UploadIcon />}
+        titleIcon={<RhUiUploadIcon />}
         titleText="Drag and drop your file here"
         infoText={infoText}
         isUploadButtonHidden

package/src/MarkdownContent/MarkdownContent.tsx

@@ -257,6 +257,20 @@ export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
       remarkRehypeOptions={{
         // removes sr-only class from footnote labels applied by default
         footnoteLabelProperties: { className: [''] },
+        // omit default ↩ text; backref icon is rendered in LinkMessage
+        footnoteBackContent: (_referenceIndex, rereferenceIndex) => {
+          if (rereferenceIndex > 1) {
+            return [
+              {
+                type: 'element',
+                tagName: 'sup',
+                properties: {},
+                children: [{ type: 'text', value: String(rereferenceIndex) }]
+              }
+            ];
+          }
+          return [];
+        },
         ...reactMarkdownProps?.remarkRehypeOptions
       }}
       disallowedElements={disallowedElements}

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -18,8 +18,8 @@ import {
 } from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { css } from '@patternfly/react-styles';
+import { RhUiCopyFillIcon } from '@patternfly/react-icons';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
@@ -142,7 +142,7 @@ const CodeBlockMessage = ({
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}
         >
-          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? <CheckIcon /> : <RhUiCopyFillIcon />}
         </Button>
         <Tooltip id={tooltipID} content="Copy" position="top" triggerRef={buttonRef} />
       </CodeBlockAction>

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -3,10 +3,12 @@
 // ============================================================================
 
 import { Button, ButtonProps } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { RhMicronsExternalLinkIcon, RhUiBackwardsIcon } from '@patternfly/react-icons';
 import { ExtraProps } from 'react-markdown';
 import { css } from '@patternfly/react-styles';
 
+const isFootnoteBackref = (className?: string) => className?.includes('data-footnote-backref');
+
 export interface LinkMessageProps {
   /** Flag indicating that the content should retain message styles when using Markdown. */
   shouldRetainStyles?: boolean;
@@ -26,7 +28,7 @@ const LinkMessage = ({
         component="a"
         variant="link"
         href={href}
-        icon={<ExternalLinkSquareAltIcon />}
+        icon={<RhMicronsExternalLinkIcon />}
         iconPosition="end"
         isInline
         target={target}
@@ -40,6 +42,23 @@ const LinkMessage = ({
     );
   }
 
+  if (isFootnoteBackref(props.className)) {
+    return (
+      <Button
+        isInline
+        component="a"
+        href={href}
+        variant="link"
+        id={id}
+        icon={<RhUiBackwardsIcon />}
+        {...props}
+        className={css(shouldRetainStyles && 'pf-m-markdown', props?.className)}
+      >
+        {children}
+      </Button>
+    );
+  }
+
   return (
     // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
     <Button

package/src/Message/Message.test.tsx

@@ -11,6 +11,7 @@ import { DeepThinkingProps } from '../DeepThinking';
 
 // Mock the icon components
 jest.mock('@patternfly/react-icons', () => ({
+  ...jest.requireActual('@patternfly/react-icons'),
   RhUiLikeIcon: () => <div>RhUiLikeIcon</div>,
   RhUiLikeFillIcon: () => <div>RhUiLikeFillIcon</div>,
   RhUiDislikeIcon: () => <div>RhUiDislikeIcon</div>,
@@ -23,10 +24,9 @@ jest.mock('@patternfly/react-icons', () => ({
   RhUiVolumeUpFillIcon: () => <div>RhUiVolumeUpFillIcon</div>,
   RhUiExportIcon: () => <div>RhUiExportIcon</div>,
   RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
-  CheckIcon: () => <div>CheckIcon</div>,
-  CloseIcon: () => <div>CloseIcon</div>,
-  ExternalLinkSquareAltIcon: () => <div>ExternalLinkSquareAltIcon</div>,
-  TimesIcon: () => <div>TimesIcon</div>
+  RhMicronsInformationFillIcon: () => <div>RhMicronsInformationFillIcon</div>,
+  RhUiBackwardsIcon: () => <div>RhUiBackwardsIcon</div>,
+  RhMicronsExternalLinkIcon: () => <div>RhMicronsExternalLinkIcon</div>
 }));
 
 const ALL_ACTIONS = [

package/src/Message/QuickStarts/QuickStartTileDescription.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useRef } from 'react';
 import { Button, Flex, pluralize, Popover } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { RhMicronsInformationFillIcon } from '@patternfly/react-icons';
 
 interface QuickStartTileDescriptionProps {
   /** QuickStart description */
@@ -57,7 +57,7 @@ const QuickStartTileDescription: FC<QuickStartTileDescriptionProps> = ({
             }}
             aria-label={quickStartButtonAriaLabel}
           >
-            <InfoCircleIcon />
+            <RhMicronsInformationFillIcon />
           </Button>
           <Popover
             aria-label={pluralizedPrereq}

package/src/MessageBar/MessageBar.test.tsx

@@ -6,7 +6,7 @@ import {
   MenuSearchInputProps,
   MenuSearchProps
 } from '@patternfly/react-core';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
@@ -43,19 +43,19 @@ const ATTACH_MENU_ITEMS = [
   </DropdownList>,
   <DropdownGroup key="group2">
     <DropdownList>
-      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
+      <DropdownItem value="Alerts" id="1" icon={<RhUiAttentionBellIcon />}>
         Alerts
       </DropdownItem>
-      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
+      <DropdownItem value="Events" id="2" icon={<RhUiCalendarIcon />}>
         Events
       </DropdownItem>
-      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
+      <DropdownItem value="Logs" id="3" icon={<RhUiClipboardIcon />}>
         Logs
       </DropdownItem>
-      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
+      <DropdownItem value="YAML - Status" id="4" icon={<RhUiCodeIcon />}>
         YAML - Status
       </DropdownItem>
-      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
+      <DropdownItem value="YAML - All contents" id="5" icon={<RhUiCodeIcon />}>
         YAML - All contents
       </DropdownItem>
     </DropdownList>

package/src/MessageBox/JumpButton.test.tsx

@@ -18,7 +18,7 @@ describe('JumpButton', () => {
     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 () => {
+  it('should be hidden if isHidden prop is used', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
     expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
   });

package/src/MessageBox/MessageBox.test.tsx

@@ -1,5 +1,6 @@
 import { createRef } from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { MessageBox, MessageBoxHandle } from './MessageBox';
 import userEvent from '@testing-library/user-event';
 
@@ -313,4 +314,94 @@ describe('MessageBox', () => {
 
     expect(ref.current?.isSmartScrollActive()).toBe(true);
   });
+
+  it('should keep auto-scroll active during programmatic scroll to bottom', async () => {
+    const ref = createRef<MessageBoxHandle>();
+    render(
+      <MessageBox ref={ref} enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const element = ref.current!;
+    Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(element, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    act(() => {
+      ref.current?.scrollToBottom({ behavior: 'smooth' });
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+
+    act(() => {
+      element.scrollTop = 500;
+      element.dispatchEvent(new Event('scroll', { bubbles: true }));
+    });
+
+    expect(ref.current?.isSmartScrollActive()).toBe(true);
+  });
+
+  it('should not scroll to bottom on initial layout when the message box is at the top', () => {
+    render(
+      <MessageBox enableSmartScroll>
+        <div>Tall message content</div>
+      </MessageBox>
+    );
+
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(region.scrollTop).toBe(0);
+  });
+
+  it('should show the bottom jump button at the top on initial load when overflowing', async () => {
+    render(
+      <MessageBox enableSmartScroll>
+        <div>Tall message content</div>
+      </MessageBox>
+    );
+
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0, writable: true });
+
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: /Back to top/i })).toBeFalsy();
+      expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
+    });
+  });
+
+  it('should hide the bottom jump button while smart scroll is actively following content', async () => {
+    render(
+      <MessageBox enableSmartScroll>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 640, writable: true });
+
+    act(() => {
+      region.dispatchEvent(new Event('scroll'));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
+      expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
+    });
+  });
 });