@patternfly/chatbot 6.7.1 → 6.8.0-prerelease.2

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

@@ -10,7 +10,10 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import { PlusIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-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 RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 import { useDropzone } from 'react-dropzone';
 
 export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
@@ -45,43 +48,51 @@ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
   };
 
   const firstMenuItems: ReactNode = (
-    <DropdownList>
-      <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
-        Logs
-      </DropdownItem>
-      <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
-        YAML - Status
-      </DropdownItem>
-      <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
-        YAML - All contents
-      </DropdownItem>
+    <>
+      <DropdownList>
+        <DropdownItem value="Logs" id="logs" icon={<RhUiClipboardIcon />}>
+          Logs
+        </DropdownItem>
+        <DropdownItem value="YAML - Status" id="yaml-status" icon={<RhUiCodeIcon />}>
+          YAML - Status
+        </DropdownItem>
+        <DropdownItem value="YAML - All contents" id="yaml-all" icon={<RhUiCodeIcon />}>
+          YAML - All contents
+        </DropdownItem>
+      </DropdownList>
       <Divider key="divider" />
-      <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
-        Upload from computer
-      </DropdownItem>
-    </DropdownList>
+      <DropdownList>
+        <DropdownItem value="Upload from computer" id="upload" icon={<RhUiUploadIcon />} onClick={open}>
+          Upload from computer
+        </DropdownItem>
+      </DropdownList>
+    </>
   );
 
   const secondMenuItems: ReactNode = (
-    <DropdownList>
-      <DropdownItem value="canvas" id="canvas">
-        {showCanvasLabel ? 'Disable' : 'Enable'} Canvas
-      </DropdownItem>
-      <Divider key="divider-1" />
-      <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
-        Logs
-      </DropdownItem>
-      <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
-        YAML - Status
-      </DropdownItem>
-      <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
-        YAML - All contents
-      </DropdownItem>
+    <>
+      <DropdownList>
+        <DropdownItem value="canvas" id="canvas">
+          {showCanvasLabel ? 'Disable' : 'Enable'} Canvas
+        </DropdownItem>
+        <Divider key="divider-1" />
+        <DropdownItem value="Logs" id="logs" icon={<RhUiClipboardIcon />}>
+          Logs
+        </DropdownItem>
+        <DropdownItem value="YAML - Status" id="yaml-status" icon={<RhUiCodeIcon />}>
+          YAML - Status
+        </DropdownItem>
+        <DropdownItem value="YAML - All contents" id="yaml-all" icon={<RhUiCodeIcon />}>
+          YAML - All contents
+        </DropdownItem>
+      </DropdownList>
       <Divider key="divider-2" />
-      <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
-        Upload from computer
-      </DropdownItem>
-    </DropdownList>
+      <DropdownList>
+        <DropdownItem value="Upload from computer" id="upload" icon={<RhUiUploadIcon />} onClick={open}>
+          Upload from computer
+        </DropdownItem>
+      </DropdownList>
+    </>
   );
 
   const modelOptions = ['GPT-4', 'GPT-3.5', 'Claude', 'Llama 2'];
@@ -110,7 +121,7 @@ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
           }}
           buttonProps={{
             attach: {
-              icon: <PlusIcon />,
+              icon: <RhUiAddIcon />,
               tooltipContent: 'Message actions',
               'aria-label': 'Message actions'
             }
@@ -140,7 +151,7 @@ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
           }}
           buttonProps={{
             attach: {
-              icon: <PlusIcon />,
+              icon: <RhUiAddIcon />,
               tooltipContent: 'Message actions',
               'aria-label': 'Message actions'
             }

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

@@ -70,7 +70,13 @@ 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 { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, PlusIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
+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';

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

@@ -18,7 +18,7 @@ import ChatbotFooter from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
-import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+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 userAvatar from '../Messages/user_avatar.svg';
@@ -115,7 +115,9 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
   return (
     <Chatbot displayMode={displayMode}>
       <ChatbotHeader>
-        <ChatbotHeaderMain>{name}</ChatbotHeaderMain>
+        <ChatbotHeaderMain>
+          <ChatbotHeaderTitle>{name}</ChatbotHeaderTitle>
+        </ChatbotHeaderMain>
       </ChatbotHeader>
       <ChatbotContent>
         <MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>

package/src/AttachMenu/AttachMenu.scss

@@ -1,5 +1,4 @@
 .pf-chatbot__menu.pf-v6-c-menu {
-  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 }
 
@@ -31,10 +30,6 @@
     --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
   }
 
-  .pf-v6-c-menu__list {
-    padding: 0rem var(--pf-t--global--spacer--md) 0rem var(--pf-t--global--spacer--md);
-  }
-
   /* handles hover state, which uses a background */
   .pf-v6-c-menu__list-item {
     border-radius: var(--pf-t--global--border--radius--small);
@@ -55,8 +50,4 @@
   .pf-v6-c-menu__item-description {
     font-weight: var(--pf-t--global--font--weight--body--bold);
   }
-
-  .pf-v6-c-divider {
-    padding: 0 var(--pf-t--global--spacer--md) 0 var(--pf-t--global--spacer--md);
-  }
 }

package/src/Chatbot/Chatbot.scss

@@ -12,7 +12,6 @@
   background-color: var(--pf-t--global--background--color--floating--secondary--default);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
-  font-size: var(--pf-t--global--font--size--md);
   z-index: var(--pf-t--global--z-index--md);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -178,9 +177,3 @@
   }
 }
 
-// ============================================================================
-// Information density styles
-// ============================================================================
-.pf-chatbot.pf-m-compact {
-  font-size: var(--pf-t--global--font--size--sm);
-}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -48,7 +48,7 @@
 
   // Drawer menu
   // ----------------------------------------------------------------------------
-  .pf-v6-c-menu {
+  .pf-v6-c-menu.pf-chatbot__history-menu {
     --pf-v6-c-menu--PaddingBlockStart: 0;
     --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
     // override high contrast style

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -290,7 +290,13 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
       return <HistoryEmptyState {...noResultsState} />;
     }
     return (
-      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
+      <Menu
+        className="pf-chatbot__history-menu"
+        isPlain
+        onSelect={onSelectActiveItem}
+        activeItemId={activeItemId}
+        {...menuProps}
+      >
         <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
       </Menu>
     );

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -24,6 +24,7 @@
 
   // Title -or- Brand
   .pf-chatbot__title {
+    font-size:  var(--pf-t--global--font--size--body--lg);
     display: flex;
     align-items: center;
     flex: 1;

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -32,7 +32,7 @@
   }
 
   &--secondary {
-    --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
     --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
     --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
 

package/src/Message/Message.test.tsx

@@ -11,15 +11,18 @@ import { DeepThinkingProps } from '../DeepThinking';
 
 // Mock the icon components
 jest.mock('@patternfly/react-icons', () => ({
-  OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
-  ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
-  OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
-  ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
-  OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
-  DownloadIcon: () => <div>DownloadIcon</div>,
-  ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
-  VolumeUpIcon: () => <div>VolumeUpIcon</div>,
-  PencilAltIcon: () => <div>PencilAltIcon</div>,
+  RhUiLikeIcon: () => <div>RhUiLikeIcon</div>,
+  RhUiLikeFillIcon: () => <div>RhUiLikeFillIcon</div>,
+  RhUiDislikeIcon: () => <div>RhUiDislikeIcon</div>,
+  RhUiDislikeFillIcon: () => <div>RhUiDislikeFillIcon</div>,
+  RhUiCopyIcon: () => <div>RhUiCopyIcon</div>,
+  RhUiCopyFillIcon: () => <div>RhUiCopyFillIcon</div>,
+  RhUiEditIcon: () => <div>RhUiEditIcon</div>,
+  RhUiEditFillIcon: () => <div>RhUiEditFillIcon</div>,
+  RhUiVolumeUpIcon: () => <div>RhUiVolumeUpIcon</div>,
+  RhUiVolumeUpFillIcon: () => <div>RhUiVolumeUpFillIcon</div>,
+  RhUiExportIcon: () => <div>RhUiExportIcon</div>,
+  RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
   CheckIcon: () => <div>CheckIcon</div>,
   CloseIcon: () => <div>CloseIcon</div>,
   ExternalLinkSquareAltIcon: () => <div>ExternalLinkSquareAltIcon</div>,
@@ -118,6 +121,13 @@ const TABLE = `
 
  `;
 
+const TABLE_WITH_INLINE_CODE = `
+| Status | Finding |
+|---|---|
+| \`1/1 Running\`, 0 restarts | Healthy — no crashes |
+| \`1/1 Ready\` | Desired replicas met |
+`;
+
 const ONE_COLUMN_TABLE = `
 
  | Column 1 |
@@ -1041,6 +1051,24 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
     expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
   });
+  it('should wrap table cell content so inline code does not break grid layout', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={TABLE_WITH_INLINE_CODE}
+        tableProps={{ 'aria-label': 'Inline code table' }}
+      />
+    );
+    const statusCell = screen.getByRole('cell', { name: /1\/1 Running/i });
+    expect(statusCell.querySelector(':scope > .pf-chatbot__message-table-cell-content')).toBeTruthy();
+    expect(statusCell.querySelector(':scope > code')).toBeFalsy();
+    expect(statusCell.querySelector('.pf-chatbot__message-inline-code')).toBeTruthy();
+    expect(
+      screen.getByRole('columnheader', { name: /Status/i }).querySelector('.pf-chatbot__message-table-cell-content')
+    ).toBeTruthy();
+  });
   it('should render footnote correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={FOOTNOTE} />);
     expect(screen.getByText(/This is some text with a footnote/i)).toBeTruthy();
@@ -1398,12 +1426,12 @@ describe('Message', () => {
       />
     );
 
-    expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+    expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
 
     await user.click(screen.getByRole('button', { name: /Good response/i }));
 
-    expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
-    expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+    expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
+    expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
   });
 
   it('should swap icons when useFilledIconsOnClick is true', async () => {
@@ -1424,8 +1452,8 @@ describe('Message', () => {
 
     await user.click(screen.getByRole('button', { name: /Good response/i }));
 
-    expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
-    expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+    expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
+    expect(screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
   });
 
   it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {

package/src/Message/TableMessage/TableCellContent.tsx

@@ -0,0 +1,9 @@
+/**
+ * Wraps table cell content in a single element so phrasing content (e.g. inline
+ * code mixed with text) is not a direct child of td/th.
+ */
+const TableCellContent = ({ children }: { children?: React.ReactNode }) => (
+  <span className="pf-chatbot__message-table-cell-content">{children}</span>
+);
+
+export default TableCellContent;

package/src/Message/TableMessage/TdMessage.tsx

@@ -4,7 +4,12 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Td, TdProps } from '@patternfly/react-table';
+import TableCellContent from './TableCellContent';
 
-const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => <Td {...props}>{children}</Td>;
+const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => (
+  <Td {...props}>
+    <TableCellContent>{children}</TableCellContent>
+  </Td>
+);
 
 export default TdMessage;

package/src/Message/TableMessage/ThMessage.tsx

@@ -4,7 +4,12 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
+import TableCellContent from './TableCellContent';
 
-const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => (
+  <Th {...props}>
+    <TableCellContent>{children}</TableCellContent>
+  </Th>
+);
 
 export default ThMessage;

package/src/ResponseActions/ResponseActions.test.tsx

@@ -7,17 +7,21 @@ import Message from '../Message';
 
 // Mock the icon components
 jest.mock('@patternfly/react-icons', () => ({
-  OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
-  ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
-  OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
-  ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
-  OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
+  RhUiLikeIcon: () => <div>RhUiLikeIcon</div>,
+  RhUiLikeFillIcon: () => <div>RhUiLikeFillIcon</div>,
+  RhUiDislikeIcon: () => <div>RhUiDislikeIcon</div>,
+  RhUiDislikeFillIcon: () => <div>RhUiDislikeFillIcon</div>,
+  RhUiCopyIcon: () => <div>RhUiCopyIcon</div>,
+  RhUiCopyFillIcon: () => <div>RhUiCopyFillIcon</div>,
+  RhUiEditIcon: () => <div>RhUiEditIcon</div>,
+  RhUiEditFillIcon: () => <div>RhUiEditFillIcon</div>,
+  RhUiVolumeUpIcon: () => <div>RhUiVolumeUpIcon</div>,
+  RhUiVolumeUpFillIcon: () => <div>RhUiVolumeUpFillIcon</div>,
+  RhUiExportIcon: () => <div>RhUiExportIcon</div>,
+  RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
   DownloadIcon: () => <div>DownloadIcon</div>,
   InfoCircleIcon: () => <div>InfoCircleIcon</div>,
-  RedoIcon: () => <div>RedoIcon</div>,
-  ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
-  VolumeUpIcon: () => <div>VolumeUpIcon</div>,
-  PencilAltIcon: () => <div>PencilAltIcon</div>
+  RedoIcon: () => <div>RedoIcon</div>
 }));
 
 const ALL_ACTIONS = [
@@ -507,11 +511,11 @@ describe('ResponseActions', () => {
         />
       );
 
-      expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
-      expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+      expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
+      expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
 
-      expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
-      expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+      expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
+      expect(screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
     });
 
     describe('positive actions', () => {
@@ -529,8 +533,8 @@ describe('ResponseActions', () => {
 
         await user.click(screen.getByRole('button', { name: 'Good response' }));
 
-        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
-        expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+        expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
+        expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
       });
 
       it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', async () => {
@@ -547,8 +551,8 @@ describe('ResponseActions', () => {
 
         await user.click(screen.getByRole('button', { name: 'Good response' }));
 
-        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
-        expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+        expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
+        expect(screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
       });
 
       it('should revert positive icon to outline icon when clicking outside', async () => {
@@ -567,10 +571,10 @@ describe('ResponseActions', () => {
         );
 
         await user.click(screen.getByRole('button', { name: 'Good response' }));
-        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
 
         await user.click(screen.getByTestId('outside'));
-        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
       });
 
       it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', async () => {
@@ -590,10 +594,10 @@ describe('ResponseActions', () => {
         );
 
         await user.click(screen.getByRole('button', { name: 'Good response' }));
-        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
 
         await user.click(screen.getByTestId('outside'));
-        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
       });
 
       describe('negative actions', () => {
@@ -611,8 +615,8 @@ describe('ResponseActions', () => {
 
           await user.click(screen.getByRole('button', { name: 'Bad response' }));
 
-          expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
-          expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+          expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
+          expect(screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
         });
 
         it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', async () => {
@@ -629,8 +633,8 @@ describe('ResponseActions', () => {
 
           await user.click(screen.getByRole('button', { name: 'Bad response' }));
 
-          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
-          expect(screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
+          expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
+          expect(screen.queryByText('RhUiDislikeIcon')).not.toBeInTheDocument();
         });
 
         it('should revert negative icon to outline when clicking outside', async () => {
@@ -649,10 +653,10 @@ describe('ResponseActions', () => {
           );
 
           await user.click(screen.getByRole('button', { name: 'Bad response' }));
-          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+          expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
 
           await user.click(screen.getByTestId('outside'));
-          expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+          expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
         });
 
         it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', async () => {
@@ -672,10 +676,10 @@ describe('ResponseActions', () => {
           );
 
           await user.click(screen.getByRole('button', { name: 'Bad response' }));
-          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+          expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
 
           await user.click(screen.getByTestId('outside'));
-          expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+          expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
         });
       });
     });

package/src/ResponseActions/ResponseActions.tsx

@@ -1,15 +1,18 @@
 import type { FunctionComponent, MouseEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import {
-  ExternalLinkAltIcon,
-  VolumeUpIcon,
-  OutlinedThumbsUpIcon,
-  ThumbsUpIcon,
-  OutlinedThumbsDownIcon,
-  ThumbsDownIcon,
-  OutlinedCopyIcon,
-  DownloadIcon,
-  PencilAltIcon
+  RhUiLikeIcon,
+  RhUiLikeFillIcon,
+  RhUiDislikeIcon,
+  RhUiDislikeFillIcon,
+  RhUiCopyIcon,
+  RhUiCopyFillIcon,
+  RhUiEditIcon,
+  RhUiEditFillIcon,
+  RhUiVolumeUpIcon,
+  RhUiVolumeUpFillIcon,
+  RhUiExportIcon,
+  RhUiExportFillIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -164,12 +167,28 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
 
   const iconMap = {
     positive: {
-      filled: <ThumbsUpIcon />,
-      outlined: <OutlinedThumbsUpIcon />
+      filled: <RhUiLikeFillIcon />,
+      outlined: <RhUiLikeIcon />
     },
     negative: {
-      filled: <ThumbsDownIcon />,
-      outlined: <OutlinedThumbsDownIcon />
+      filled: <RhUiDislikeFillIcon />,
+      outlined: <RhUiDislikeIcon />
+    },
+    listen: {
+      filled: <RhUiVolumeUpFillIcon />,
+      outlined: <RhUiVolumeUpIcon />
+    },
+    copy: {
+      filled: <RhUiCopyFillIcon />,
+      outlined: <RhUiCopyIcon />
+    },
+    edit: {
+      filled: <RhUiEditFillIcon />,
+      outlined: <RhUiEditIcon />
+    },
+    download: {
+      filled: <RhUiExportFillIcon />,
+      outlined: <RhUiExportIcon />
     }
   };
 
@@ -247,7 +266,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           tooltipContent={copy.tooltipContent ?? 'Copy'}
           clickedTooltipContent={copy.clickedTooltipContent ?? 'Copied'}
           tooltipProps={getTooltipProps(copy.tooltipProps)}
-          icon={<OutlinedCopyIcon />}
+          icon={getIcon('copy')}
           isClicked={activeButton === 'copy'}
           ref={copy.ref}
           aria-expanded={copy['aria-expanded']}
@@ -265,7 +284,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           tooltipContent={edit.tooltipContent ?? 'Edit '}
           clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
           tooltipProps={getTooltipProps(edit.tooltipProps)}
-          icon={<PencilAltIcon />}
+          icon={getIcon('edit')}
           isClicked={activeButton === 'edit'}
           ref={edit.ref}
           aria-expanded={edit['aria-expanded']}
@@ -283,7 +302,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           tooltipContent={share.tooltipContent ?? 'Share'}
           clickedTooltipContent={share.clickedTooltipContent ?? 'Shared'}
           tooltipProps={getTooltipProps(share.tooltipProps)}
-          icon={<ExternalLinkAltIcon />}
+          icon={getIcon('download')}
           isClicked={activeButton === 'share'}
           ref={share.ref}
           aria-expanded={share['aria-expanded']}
@@ -301,7 +320,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           tooltipContent={download.tooltipContent ?? 'Download'}
           clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
           tooltipProps={getTooltipProps(download.tooltipProps)}
-          icon={<DownloadIcon />}
+          icon={getIcon('download')}
           isClicked={activeButton === 'download'}
           ref={download.ref}
           aria-expanded={download['aria-expanded']}
@@ -319,7 +338,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
           tooltipContent={listen.tooltipContent ?? 'Listen'}
           clickedTooltipContent={listen.clickedTooltipContent ?? 'Listening'}
           tooltipProps={getTooltipProps(listen.tooltipProps)}
-          icon={<VolumeUpIcon />}
+          icon={getIcon('listen')}
           isClicked={activeButton === 'listen'}
           ref={listen.ref}
           aria-expanded={listen['aria-expanded']}

package/src/SourcesCard/SourcesCard.scss

@@ -25,6 +25,11 @@
     list-style: none;
     gap: var(--pf-t--global--spacer--xs);
   }
+
+  .pf-chatbot__sources-list-item {
+   width: 100%;
+   max-width: var(--pf-chatbot-sources-card-max-width);
+  }
 }
 
 .pf-chatbot__sources-card {