@patternfly/chatbot 6.3.2 → 6.4.0-prerelease.11

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -9,7 +9,7 @@
   grid-template-columns: 1fr auto;
   gap: var(--pf-t--global--spacer--sm);
   position: relative; // this is so focus ring on parent chatbot doesn't include header
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   justify-content: space-between;
   padding: var(--pf-t--global--spacer--lg);
 
@@ -76,7 +76,7 @@
 .pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
-    background-color: var(--pf-t--chatbot--background);
+    background-color: var(--pf-t--global--background--color--secondary--default);
   }
 }
 
@@ -144,7 +144,7 @@
 .pf-chatbot.pf-m-compact {
   .pf-chatbot__header {
     gap: var(--pf-t--global--spacer--sm);
-    padding: var(--pf-t--global--spacer--sm);
+    padding: var(--pf-t--global--spacer--md);
   }
 
   .pf-chatbot__header .pf-chatbot__title img {

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -12,7 +12,7 @@ describe('ChatbotHeaderMenu', () => {
   it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
     const onMenuToggle = jest.fn();
     render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
 
     expect(onMenuToggle).toHaveBeenCalled();
   });

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -25,9 +25,9 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
-  menuAriaLabel = 'Toggle menu',
+  menuAriaLabel = 'Chat history menu',
   innerRef,
-  tooltipContent = 'Menu',
+  tooltipContent = 'Chat history menu',
   isCompact,
   ...props
 }: ChatbotHeaderMenuProps) => (

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx

@@ -0,0 +1,25 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderNewChatButton } from './ChatbotHeaderNewChatButton';
+import '@testing-library/jest-dom';
+
+describe('ChatbotHeaderNewChatButton', () => {
+  it('should render ChatbotHeaderNewChatButton', () => {
+    const { container } = render(
+      <ChatbotHeaderNewChatButton className="custom-header-new-chat-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-new-chat-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when new chat button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderNewChatButton className="custom-header-new-chat-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'New chat' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should render button with isCompact', () => {
+    render(<ChatbotHeaderNewChatButton data-testid="new-chat-button" onClick={jest.fn()} isCompact />);
+    expect(screen.getByTestId('new-chat-button')).toHaveClass('pf-m-compact');
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx

@@ -0,0 +1,64 @@
+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';
+
+export interface ChatbotHeaderNewChatButtonProps extends ButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => void;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+  tooltipProps?: TooltipProps;
+  /** Aria label for menu */
+  menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+  /** Sets button to compact styling. */
+  isCompact?: boolean;
+}
+
+const ChatbotHeaderNewChatButtonBase: FunctionComponent<ChatbotHeaderNewChatButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'New chat',
+  innerRef,
+  tooltipContent = 'New chat',
+  isCompact,
+  ...props
+}: ChatbotHeaderNewChatButtonProps) => (
+  <div className={`pf-chatbot__menu${className ? ` ${className}` : ''}`}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
+            <PenToSquareIcon />
+          </Icon>
+        }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderNewChatButton = forwardRef(
+  (props: ChatbotHeaderNewChatButtonProps, ref: Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderNewChatButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/index.ts

@@ -8,3 +8,4 @@ export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
 export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';

package/src/ChatbotModal/ChatbotModal.scss

@@ -20,7 +20,7 @@
     padding-block-end: var(--pf-t--global--spacer--xl);
   }
   .pf-v6-c-modal-box__header {
-    padding-block-end: var(--pf-t--global--spacer--lg);
+    padding-block-end: var(--pf-t--global--spacer--sm);
   }
 }
 

package/src/ChatbotToggle/ChatbotToggle.scss

@@ -6,12 +6,12 @@
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
   background-color: var(--pf-t--global--background--color--inverse--default);
-  --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
   padding: var(--pf-t--global--spacer--md);
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot-toggle--background--hover);
+    background-color: var(--pf-t--color--gray--70);
   }
 
   .pf-v6-c-button__icon {

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -48,19 +48,16 @@ exports[`FileDetails should render file details 1`] = `
         <span
           class="pf-chatbot__code-fileName"
         >
-          <div
-            style="display: contents;"
+          <span
+            class="pf-v6-c-truncate"
+            tabindex="0"
           >
             <span
-              class="pf-v6-c-truncate"
+              class="pf-v6-c-truncate__start"
             >
-              <span
-                class="pf-v6-c-truncate__start"
-              >
-                test
-              </span>
+              test
             </span>
-          </div>
+          </span>
         </span>
       </div>
       <div

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -60,19 +60,16 @@ exports[`FileDetailsLabel should render file details label 1`] = `
                 <span
                   class="pf-chatbot__code-fileName"
                 >
-                  <div
-                    style="display: contents;"
+                  <span
+                    class="pf-v6-c-truncate"
+                    tabindex="0"
                   >
                     <span
-                      class="pf-v6-c-truncate"
+                      class="pf-v6-c-truncate__start"
                     >
-                      <span
-                        class="pf-v6-c-truncate__start"
-                      >
-                        test
-                      </span>
+                      test
                     </span>
-                  </div>
+                  </span>
                 </span>
               </div>
               <div

package/src/FileDropZone/FileDropZone.tsx

@@ -1,9 +1,9 @@
-import { DropEvent, MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
+import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-core';
 import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
-import { Accept, FileError, FileRejection } from 'react-dropzone/.';
+import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */

package/src/Message/Message.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
-  padding-bottom: var(--pf-t--global--spacer--2xl);
+  padding-bottom: var(--pf-t--global--spacer--xl);
 
   // Avatar
   // --------------------------------------------------------------------------
@@ -48,20 +48,22 @@
 
     // Author name
     .pf-chatbot__message-name {
-      font-family: var(--pf-t--chatbot--heading--font-family);
+      font-family: var(
+        --pf-v6-c-content--heading--FontFamily,
+        redhatdisplayvf,
+        redhatdisplay,
+        helvetica,
+        arial,
+        sans-serif
+      );
       font-weight: 600;
       font-size: var(--pf-t--global--font--size--sm);
     }
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
       font-weight: var(--pf-t--global--font--weight--body--bold);
-
-      .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
-      }
     }
 
     // Timestamp

package/src/Message/Message.test.tsx

@@ -12,6 +12,7 @@ const ALL_ACTIONS = [
   { label: /Good response/i },
   { label: /Bad response/i },
   { label: /Copy/i },
+  { label: /Edit/i },
   { label: /Share/i },
   { label: /Listen/i }
 ];
@@ -426,6 +427,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
           download: { onClick: () => console.log('Download') },
@@ -454,6 +457,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           copy: { onClick: () => console.log('Copy') },
           // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
           download: { onClick: () => console.log('Download') },
@@ -467,6 +472,36 @@ describe('Message', () => {
       expect(screen.queryByRole('button', { name: label })).toBeFalsy();
     });
   });
+  it('should not show actions if isEditable is true', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        isEditable
+        actions={{
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          edit: { onClick: () => console.log('Edit') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }}
+      />
+    );
+    ALL_ACTIONS.forEach(({ label }) => {
+      expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+    });
+  });
   it('should render unordered lists correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={UNORDERED_LIST} />);
     expect(screen.getByText('Here is an unordered list:')).toBeTruthy();
@@ -927,4 +962,23 @@ describe('Message', () => {
     const form = container.querySelector('form');
     expect(form).toHaveClass('test');
   });
+  it('should be able to disable markdown parsing', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} isMarkdownDisabled />);
+    // this is looking for markdown syntax that is ordinarily stripped
+    expect(screen.getByText(/~~~yaml/i)).toBeTruthy();
+  });
+  it('should be able to pass props to react-markdown, such as disabling tags', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        reactMarkdownProps={{ disallowedElements: ['code'] }}
+      />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    // code block isn't rendering
+    expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+  });
 });

package/src/Message/Message.tsx

@@ -3,7 +3,7 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown from 'react-markdown';
+import Markdown, { Options } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
   AlertProps,
@@ -44,7 +44,7 @@ import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
-import { PluggableList } from 'react-markdown/lib';
+import { PluggableList } from 'unified';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
@@ -99,7 +99,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   isLoading?: boolean;
   /** Array of attachments attached to a message */
   attachments?: MessageAttachment[];
-  /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+  /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen */
   actions?: {
     [key: string]: ActionProps;
   };
@@ -179,10 +179,16 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /** Callback functionf or when edit cancel update button is clicked */
   onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Ref applied to editable message input */
+  inputRef?: Ref<HTMLTextAreaElement>;
   /** Props for edit form */
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
   isCompact?: boolean;
+  /** Disables markdown parsing for message, allowing only text input */
+  isMarkdownDisabled?: boolean;
+  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+  reactMarkdownProps?: Options;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -219,8 +225,11 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   cancelWord = 'Cancel',
   onEditUpdate,
   onEditCancel,
+  inputRef,
   editFormProps,
   isCompact,
+  isMarkdownDisabled,
+  reactMarkdownProps,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -247,6 +256,60 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
+  const handleMarkdown = () => {
+    if (isMarkdownDisabled) {
+      return (
+        <TextMessage component={ContentVariants.p} {...props}>
+          {messageText}
+        </TextMessage>
+      );
+    }
+    return (
+      <Markdown
+        components={{
+          p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+          code: ({ children, ...props }) => (
+            <CodeBlockMessage {...props} {...codeBlockProps}>
+              {children}
+            </CodeBlockMessage>
+          ),
+          h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+          h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+          h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+          h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+          h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+          h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+          blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+          ul: (props) => <UnorderedListMessage {...props} />,
+          ol: (props) => <OrderedListMessage {...props} />,
+          li: (props) => <ListItemMessage {...props} />,
+          table: (props) => <TableMessage {...props} {...tableProps} />,
+          tbody: (props) => <TbodyMessage {...props} />,
+          thead: (props) => <TheadMessage {...props} />,
+          tr: (props) => <TrMessage {...props} />,
+          td: (props) => {
+            // Conflicts with Td type
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { width, ...rest } = props;
+            return <TdMessage {...rest} />;
+          },
+          th: (props) => <ThMessage {...props} />,
+          img: (props) => <ImageMessage {...props} />,
+          a: (props) => (
+            <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
+              {props.children}
+            </LinkMessage>
+          )
+        }}
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={rehypePlugins}
+        {...reactMarkdownProps}
+      >
+        {messageText}
+      </Markdown>
+    );
+  };
+
   const renderMessage = () => {
     if (isLoading) {
       return <MessageLoading loadingWord={loadingWord} />;
@@ -256,7 +319,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
         <>
           {beforeMainContent && <>{beforeMainContent}</>}
           <MessageInput
-            content={content}
+            content={messageText}
             editPlaceholder={editPlaceholder}
             updateWord={updateWord}
             cancelWord={cancelWord}
@@ -265,6 +328,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
               setMessageText(value);
             }}
             onEditCancel={onEditCancel}
+            inputRef={inputRef}
             {...editFormProps}
           />
         </>
@@ -273,51 +337,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
     return (
       <>
         {beforeMainContent && <>{beforeMainContent}</>}
-        {error ? (
-          <ErrorMessage {...error} />
-        ) : (
-          <Markdown
-            components={{
-              p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-              code: ({ children, ...props }) => (
-                <CodeBlockMessage {...props} {...codeBlockProps}>
-                  {children}
-                </CodeBlockMessage>
-              ),
-              h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-              h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-              h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-              h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-              h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-              h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-              blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-              ul: (props) => <UnorderedListMessage {...props} />,
-              ol: (props) => <OrderedListMessage {...props} />,
-              li: (props) => <ListItemMessage {...props} />,
-              table: (props) => <TableMessage {...props} {...tableProps} />,
-              tbody: (props) => <TbodyMessage {...props} />,
-              thead: (props) => <TheadMessage {...props} />,
-              tr: (props) => <TrMessage {...props} />,
-              td: (props) => {
-                // Conflicts with Td type
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { width, ...rest } = props;
-                return <TdMessage {...rest} />;
-              },
-              th: (props) => <ThMessage {...props} />,
-              img: (props) => <ImageMessage {...props} />,
-              a: (props) => (
-                <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
-                  {props.children}
-                </LinkMessage>
-              )
-            }}
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={rehypePlugins}
-          >
-            {messageText}
-          </Markdown>
-        )}
+        {error ? <ErrorMessage {...error} /> : handleMarkdown()}
       </>
     );
   };
@@ -369,7 +389,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
                 isCompact={isCompact}
               />
             )}
-            {!isLoading && actions && <ResponseActions actions={actions} />}
+            {!isLoading && !isEditable && actions && <ResponseActions actions={actions} />}
             {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
             {userFeedbackComplete && (
               <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />

package/src/Message/MessageInput.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Message Input
 // ============================================================================
-import type { FormEvent, FunctionComponent } from 'react';
+import type { FormEvent, FunctionComponent, Ref } from 'react';
 import { useState } from 'react';
 import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
 
@@ -16,6 +16,8 @@ export interface MessageInputProps extends FormProps {
   onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
   /** Callback functionf or when edit cancel update button is clicked */
   onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Ref applied to editable message input */
+  inputRef?: Ref<HTMLTextAreaElement>;
   /** Message text */
   content?: string;
 }
@@ -26,6 +28,7 @@ const MessageInput: FunctionComponent<MessageInputProps> = ({
   cancelWord = 'Cancel',
   onEditUpdate,
   onEditCancel,
+  inputRef,
   content,
   ...props
 }: MessageInputProps) => {
@@ -43,6 +46,7 @@ const MessageInput: FunctionComponent<MessageInputProps> = ({
         onChange={onChange}
         aria-label={editPlaceholder}
         autoResize
+        ref={inputRef}
       />
       <ActionGroup className="pf-chatbot__message-edit-buttons">
         <Button variant="primary" onClick={(event) => onEditUpdate && onEditUpdate(event, messageText)}>

package/src/MessageBar/AttachButton.tsx

@@ -6,8 +6,8 @@ import type { Ref, FunctionComponent } from 'react';
 import { forwardRef } from 'react';
 
 // Import PatternFly components
-import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { Accept, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {

package/src/MessageBar/MessageBar.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
-import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';

package/src/MessageBar/SendButton.scss

@@ -13,11 +13,11 @@
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
     color: var(--pf-t--global--color--brand--hover);
 
     .pf-v6-c-button__icon {
-      color: var(--pf-t--chatbot--blue-icon--fill--hover);
+      color: var(--pf-t--global--color--brand--hover);
     }
   }
 }
@@ -37,7 +37,7 @@
 
   .pf-v6-c-button.pf-chatbot__button--send:hover,
   .pf-v6-c-button.pf-chatbot__button--send:focus {
-    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
   }
 }
 

package/src/MessageBox/JumpButton.scss

@@ -14,7 +14,7 @@
   border-radius: var(--pf-t--global--border--radius--pill) !important;
   --pf-v6-c-button--MinWidth: 2rem !important;
   background-color: var(--pf-t--global--background--color--primary--default) !important;
-  border: 1px solid var(--pf-t--chatbot--border) !important;
+  border: 1px solid var(--pf-t--global--border--color--default) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
   color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;