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

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { RhUiQuestionMarkCircleIcon } from '@patternfly/react-icons';
 
 export const MessageWithSourcesExample: FunctionComponent = () => {
   const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
@@ -51,7 +51,7 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
                           headerContent={
                             <Flex gap={{ default: 'gapXs' }}>
                               <FlexItem>
-                                <OutlinedQuestionCircleIcon />
+                                <RhUiQuestionMarkCircleIcon />
                               </FlexItem>
                               <FlexItem>Why this confidence score?</FlexItem>
                             </Flex>
@@ -64,7 +64,7 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
                             </>
                           }
                         >
-                          <Button variant="link" icon={<OutlinedQuestionCircleIcon />}>
+                          <Button variant="link" icon={<RhUiQuestionMarkCircleIcon />}>
                             Learn about this score
                           </Button>
                         </Popover>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx

@@ -1,6 +1,6 @@
 import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
+import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons';
 import {
   Button,
   DescriptionList,
@@ -41,7 +41,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
                   <FlexItem grow={{ default: 'grow' }}>
                     <Flex gap={{ default: 'gapXs' }}>
                       <FlexItem>
-                        <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
+                        <RhUiBuildFillIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
                       </FlexItem>
                       <FlexItem>toolName</FlexItem>
                     </Flex>
@@ -58,7 +58,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
                 <Button
                   variant="plain"
                   aria-label="Copy tool response to clipboard"
-                  icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
+                  icon={<RhUiCopyFillIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
                 ></Button>
               </FlexItem>
             </Flex>
@@ -152,7 +152,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
                   <FlexItem grow={{ default: 'grow' }}>
                     <Flex gap={{ default: 'gapXs' }}>
                       <FlexItem>
-                        <WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
+                        <RhUiBuildFillIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
                       </FlexItem>
                       <FlexItem>toolName</FlexItem>
                     </Flex>
@@ -169,7 +169,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
                 <Button
                   variant="plain"
                   aria-label="Copy tool response to clipboard"
-                  icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
+                  icon={<RhUiCopyFillIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
                 ></Button>
               </FlexItem>
             </Flex>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -50,7 +50,7 @@ import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist
 import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
-import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
+import { RhUiArrowCircleDownFillIcon, RhUiArrowRightIcon, RhUiCheckCircleFillIcon, RhUiCopyFillIcon, RhUiExportIcon, RhMicronsInformationFillIcon, OutlinedQuestionCircleIcon, RhUiRedoIcon, RhUiBuildFillIcon, RhUiQuestionMarkCircleIcon } from '@patternfly/react-icons';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

@@ -39,7 +39,7 @@ import {
   TabTitleText,
   Spinner
 } from '@patternfly/react-core';
-import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon } from '@patternfly/react-icons';
+import { RhUiArrowCircleDownFillIcon, RhUiArrowRightIcon, RhUiCheckCircleFillIcon } from '@patternfly/react-icons';
 
 const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
@@ -143,7 +143,7 @@ const LiveProgressSummaryCard = () => {
     const status = getStageStatus(stage);
 
     if (status === 'completed') {
-      return <CheckCircleIcon color="green" aria-label="Complete" />;
+      return <RhUiCheckCircleFillIcon color="green" aria-label="Complete" />;
     } else if (status === 'in-progress') {
       return <Spinner size="sm" aria-valuetext="In progress" />;
     } else {
@@ -374,7 +374,7 @@ Setting up cluster console...`;
           </CardBody>
         </CardExpandableContent>
         <CardFooter>
-          <Button isBlock variant="tertiary" icon={<ArrowRightIcon />} iconPosition="end">
+          <Button isBlock variant="tertiary" icon={<RhUiArrowRightIcon />} iconPosition="end">
             Open in console
           </Button>
         </CardFooter>
@@ -536,34 +536,10 @@ const VersionSelectorCard = () => {
         style={{ '--pf-v6-c-card--child--PaddingBlockEnd': 'var(--pf-t--global--spacer--md)' } as React.CSSProperties}
       >
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Architecture" role="region" isFilled>
-          <Tab
-            eventKey={0}
-            title={
-              <TabTitleText>
-                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
-                  <FlexItem>
-                    <CubeIcon />
-                  </FlexItem>
-                  <FlexItem>Single arch</FlexItem>
-                </Flex>
-              </TabTitleText>
-            }
-          >
+          <Tab eventKey={0} title={<TabTitleText>Single arch</TabTitleText>}>
             {generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')}
           </Tab>
-          <Tab
-            eventKey={1}
-            title={
-              <TabTitleText>
-                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
-                  <FlexItem>
-                    <CubesIcon />
-                  </FlexItem>
-                  <FlexItem>Multi arch</FlexItem>
-                </Flex>
-              </TabTitleText>
-            }
-          >
+          <Tab eventKey={1} title={<TabTitleText>Multi arch</TabTitleText>}>
             {generateTabContent('Multi arch', 'Standard deployments')}
           </Tab>
         </Tabs>
@@ -584,7 +560,7 @@ const DownloadCard = () => (
         <Flex spaceItems={{ default: 'spaceItemsSm' }}>
           <FlexItem>
             <Icon size="lg" status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           </FlexItem>
           <FlexItem>Your discovery ISO is ready</FlexItem>
@@ -602,7 +578,7 @@ const DownloadCard = () => (
 
         <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
           <FlexItem>
-            <Button variant={ButtonVariant.primary} icon={<ArrowCircleDownIcon />} isBlock>
+            <Button variant={ButtonVariant.primary} icon={<RhUiArrowCircleDownFillIcon />} isBlock>
               Download Discovery ISO
             </Button>
           </FlexItem>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -21,9 +21,7 @@ import {
   ChatbotHeaderNewChatButton
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
-import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
-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 { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
 
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
@@ -170,21 +168,21 @@ export const BasicDemo: FunctionComponent = () => {
                     <DropdownItem
                       value={ChatbotDisplayMode.default}
                       key="switchDisplayOverlay"
-                      icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                      icon={<RhUiRestoreWindowIcon aria-hidden />}
                     >
                       <span>Overlay</span>
                     </DropdownItem>
                     <DropdownItem
                       value={ChatbotDisplayMode.docked}
                       key="switchDisplayDock"
-                      icon={<OpenDrawerRightIcon aria-hidden />}
+                      icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                     >
                       <span>Dock to window</span>
                     </DropdownItem>
                     <DropdownItem
                       value={ChatbotDisplayMode.fullscreen}
                       key="switchDisplayFullscreen"
-                      icon={<ExpandIcon aria-hidden />}
+                      icon={<RhUiExpandIcon aria-hidden />}
                     >
                       <span>Fullscreen</span>
                     </DropdownItem>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx

@@ -4,7 +4,7 @@ import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Checkbox, EmptyStateStatus, Spinner } from '@patternfly/react-core';
-import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { RhUiCommentsIcon, RhUiSearchIcon } from '@patternfly/react-icons';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -50,13 +50,13 @@ const ERROR = {
 const NO_RESULTS = {
   bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
   titleText: 'No results found',
-  icon: SearchIcon
+  icon: RhUiSearchIcon
 };
 
 const EMPTY_STATE = {
   bodyText: 'Access timely assistance by starting a conversation with an AI model.',
   titleText: 'Start a new chat',
-  icon: OutlinedCommentsIcon
+  icon: RhUiCommentsIcon
 };
 
 export const ChatbotHeaderTitleDemo: FunctionComponent = () => {

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx

@@ -4,7 +4,7 @@ import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Checkbox } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { RhUiSearchIcon } from '@patternfly/react-icons';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -35,7 +35,7 @@ const initialConversations: { [key: string]: Conversation[] } = {
 const NO_RESULTS = {
   bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
   titleText: 'No results found',
-  icon: SearchIcon
+  icon: RhUiSearchIcon
 };
 
 export const ChatbotHeaderDrawerResizableDemo: FunctionComponent = () => {

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx

@@ -5,7 +5,7 @@ import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
-import { ThumbtackIcon } from '@patternfly/react-icons';
+import { RhUiThumbtackFillIcon } from '@patternfly/react-icons';
 
 // Sample conversations
 const initialConversations: { [key: string]: Conversation[] } = {
@@ -144,7 +144,7 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
           pinnedItems.push({
             ...conv,
             menuItems: createMenuItems(conv.id),
-            icon: <ThumbtackIcon />,
+            icon: <RhUiThumbtackFillIcon />,
             dropdownId: `pin-demo-${conv.id}-dropdown`
           });
         }

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSearchActions.tsx

@@ -13,7 +13,7 @@ import {
   SelectOption,
   Tooltip
 } from '@patternfly/react-core';
-import { FilterIcon, SortAmountDownIcon } from '@patternfly/react-icons';
+import { RhUiFilterFillIcon, RhMicronsSortDownLargeToSmallIcon } from '@patternfly/react-icons';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -148,7 +148,7 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
                 aria-label="Filter options"
                 // eslint-disable-next-line no-console
                 onClick={() => console.log('Filter button clicked')}
-                icon={<FilterIcon />}
+                icon={<RhUiFilterFillIcon />}
               />
             </Tooltip>
           ) : undefined
@@ -171,7 +171,7 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
                     variant="plain"
                     aria-label={`${sortLabels[selectedSort]}, Sort conversations`}
                     icon={
-                      <SortAmountDownIcon
+                      <RhMicronsSortDownLargeToSmallIcon
                         style={{
                           transform:
                             selectedSort === 'oldest' || selectedSort === 'alphabetical-asc' ? 'scaleY(-1)' : 'none'

package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.tsx

@@ -20,7 +20,12 @@ import ChatbotHeader, {
   ChatbotHeaderOptionsDropdown,
   ChatbotHeaderTitle
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
-import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+import {
+  RhUiExpandIcon,
+  RhUiOpenDrawerRightIcon,
+  RhUiRestoreWindowIcon,
+  RhUiSettingsFillIcon
+} from '@patternfly/react-icons';
 
 export const CompactSettingsDemo: FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState<boolean>(true);
@@ -222,7 +227,7 @@ export const CompactSettingsDemo: FunctionComponent = () => {
               <DropdownItem
                 value={ChatbotDisplayMode.default}
                 key="switchDisplayOverlay"
-                icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                icon={<RhUiRestoreWindowIcon aria-hidden />}
                 isSelected={displayMode === ChatbotDisplayMode.default}
               >
                 <span>Overlay</span>
@@ -230,7 +235,7 @@ export const CompactSettingsDemo: FunctionComponent = () => {
               <DropdownItem
                 value={ChatbotDisplayMode.docked}
                 key="switchDisplayDock"
-                icon={<OpenDrawerRightIcon aria-hidden />}
+                icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                 isSelected={displayMode === ChatbotDisplayMode.docked}
               >
                 <span>Dock to window</span>
@@ -238,7 +243,7 @@ export const CompactSettingsDemo: FunctionComponent = () => {
               <DropdownItem
                 value={ChatbotDisplayMode.fullscreen}
                 key="switchDisplayFullscreen"
-                icon={<ExpandIcon aria-hidden />}
+                icon={<RhUiExpandIcon aria-hidden />}
                 isSelected={displayMode === ChatbotDisplayMode.fullscreen}
               >
                 <span>Fullscreen</span>
@@ -247,7 +252,7 @@ export const CompactSettingsDemo: FunctionComponent = () => {
           </DropdownGroup>
           <Divider />
           <DropdownList>
-            <DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
+            <DropdownItem value="Settings" key="switchSettings" icon={<RhUiSettingsFillIcon aria-hidden />}>
               <span>Settings</span>
             </DropdownItem>
           </DropdownList>

package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx

@@ -20,7 +20,12 @@ import ChatbotHeader, {
   ChatbotHeaderOptionsDropdown,
   ChatbotHeaderTitle
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
-import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+import {
+  RhUiExpandIcon,
+  RhUiOpenDrawerRightIcon,
+  RhUiRestoreWindowIcon,
+  RhUiSettingsFillIcon
+} from '@patternfly/react-icons';
 
 export const SettingsDemo: FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState<boolean>(true);
@@ -222,7 +227,7 @@ export const SettingsDemo: FunctionComponent = () => {
               <DropdownItem
                 value={ChatbotDisplayMode.default}
                 key="switchDisplayOverlay"
-                icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                icon={<RhUiRestoreWindowIcon aria-hidden />}
                 isSelected={displayMode === ChatbotDisplayMode.default}
               >
                 <span>Overlay</span>
@@ -230,7 +235,7 @@ export const SettingsDemo: FunctionComponent = () => {
               <DropdownItem
                 value={ChatbotDisplayMode.docked}
                 key="switchDisplayDock"
-                icon={<OpenDrawerRightIcon aria-hidden />}
+                icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                 isSelected={displayMode === ChatbotDisplayMode.docked}
               >
                 <span>Dock to window</span>
@@ -238,7 +243,7 @@ export const SettingsDemo: FunctionComponent = () => {
               <DropdownItem
                 value={ChatbotDisplayMode.fullscreen}
                 key="switchDisplayFullscreen"
-                icon={<ExpandIcon aria-hidden />}
+                icon={<RhUiExpandIcon aria-hidden />}
                 isSelected={displayMode === ChatbotDisplayMode.fullscreen}
               >
                 <span>Fullscreen</span>
@@ -247,7 +252,7 @@ export const SettingsDemo: FunctionComponent = () => {
           </DropdownGroup>
           <Divider />
           <DropdownList>
-            <DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
+            <DropdownItem value="Settings" key="switchSettings" icon={<RhUiSettingsFillIcon aria-hidden />}>
               <span>Settings</span>
             </DropdownItem>
           </DropdownList>

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -70,30 +70,16 @@ import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
 import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
-import RhUiAttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-icon';
-import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
-import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon';
-import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
-import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
-import { ThumbtackIcon } from '@patternfly/react-icons';
-import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 import { useDropzone } from 'react-dropzone';
-
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Button, Label, DropdownItem, DropdownList, Checkbox, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
-
-import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
-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 CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import PenToSquareIcon from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 import onboardingHeader from './RH-Hat-Image.svg';
-import { CloseIcon, SearchIcon, OutlinedCommentsIcon, FilterIcon, SortAmountDownIcon } from '@patternfly/react-icons';
+import { RhMicronsSortDownLargeToSmallIcon, RhUiAddIcon, RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon, RhUiCommentsIcon, RhUiEditFillIcon, RhUiExpandIcon, RhUiFilterFillIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon, RhUiSearchIcon, RhUiSettingsFillIcon, RhUiThumbtackFillIcon, RhUiUploadIcon } from '@patternfly/react-icons';
 import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties, useEffect} from 'react';
 import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
 

package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

@@ -24,7 +24,7 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon, RhUiUploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
@@ -37,9 +37,7 @@ ChatbotHeaderSelectorDropdown,
 ChatbotHeaderOptionsDropdown
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
-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 PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -48,12 +48,9 @@ ChatbotHeaderOptionsDropdown,
 ChatbotHeaderCloseButton,
 } 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, RhUiMenuBarsIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
 import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
+import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons';
 import {
 Button,
 DescriptionList,

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.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';
@@ -393,7 +390,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>
@@ -401,7 +398,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>
@@ -409,7 +406,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/ChatbotAttachment.tsx

@@ -20,9 +20,7 @@ import ChatbotHeader, {
   ChatbotHeaderMain
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
-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';
@@ -197,7 +195,7 @@ export const BasicDemo: FunctionComponent = () => {
                   <DropdownItem
                     value={ChatbotDisplayMode.default}
                     key="switchDisplayOverlay"
-                    icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                    icon={<RhUiRestoreWindowIcon aria-hidden />}
                     isSelected={displayMode === ChatbotDisplayMode.default}
                   >
                     <span>Overlay</span>
@@ -205,7 +203,7 @@ export const BasicDemo: FunctionComponent = () => {
                   <DropdownItem
                     value={ChatbotDisplayMode.docked}
                     key="switchDisplayDock"
-                    icon={<OpenDrawerRightIcon aria-hidden />}
+                    icon={<RhUiOpenDrawerRightIcon aria-hidden />}
                     isSelected={displayMode === ChatbotDisplayMode.docked}
                   >
                     <span>Dock to window</span>
@@ -213,7 +211,7 @@ export const BasicDemo: 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/ChatbotAttachmentMenu.tsx

@@ -11,7 +11,13 @@ import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetail
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 import { Divider, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@patternfly/react-core';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import {
+  RhUiAttentionBellIcon,
+  RhUiCalendarIcon,
+  RhUiClipboardIcon,
+  RhUiCodeIcon,
+  RhUiUploadIcon
+} from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 import userAvatar from '../Messages/user_avatar.svg';
 import '@patternfly/react-core/dist/styles/base.css';
@@ -48,19 +54,19 @@ const initialMenuItems = [
   </DropdownList>,
   <DropdownGroup key="attachment-menu-example-initial-group">
     <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>
@@ -150,7 +156,7 @@ export const AttachmentMenuDemo: FunctionComponent = () => {
         key="upload"
         value="upload"
         id="upload"
-        icon={<UploadIcon />}
+        icon={<RhUiUploadIcon />}
       >
         Upload from computer
       </DropdownItem>

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.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';
@@ -381,7 +378,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>
@@ -389,7 +386,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>
@@ -397,7 +394,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>