Merge branch 'main' into tree-shaking

Author: rebeccaalpert

packages/module/src/MessageBox/MessageBox.scss

@@ -24,14 +24,28 @@
 }
 
 @media screen and (min-width: 64rem) {
-  .pf-chatbot--embedded,
   .pf-chatbot--drawer,
   .pf-chatbot--fullscreen {
     .pf-chatbot__messagebox {
       max-width: 60rem;
       width: 100%;
     }
   }
+
+  /*
+   * Moves the scrollbar; see https://github.com/opendatahub-io/odh-dashboard/pull/8199
+   */
+   .pf-chatbot--embedded .pf-chatbot__messagebox.pf-chatbot__messagebox--outer-scroll {
+    width: 100%;
+    max-width: unset;
+    align-items: center;
+  }
+
+  .pf-chatbot--embedded .pf-chatbot__messagebox.pf-chatbot__messagebox--outer-scroll > *:not(.pf-chatbot__messagebox-announcement) {
+    max-width: 60rem;
+    width: 100%;
+  }
+
 }
 
 .pf-chatbot.pf-m-compact {

packages/module/src/MessageBox/MessageBox.tsx

@@ -19,6 +19,7 @@ import {
 } from 'react';
 import JumpButton from './JumpButton';
 import { ButtonProps, getResizeObserver, TooltipProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
@@ -47,6 +48,8 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   jumpButtonTopTooltipProps?: TooltipProps;
   /** Props passed to top jump button tooltip */
   jumpButtonBottomTooltipProps?: TooltipProps;
+  /** Whether scrollbar is on the page or message box in embedded mode */
+  hasOuterScrollbar?: boolean;
 }
 
 export interface MessageBoxHandle extends HTMLDivElement {
@@ -115,6 +118,7 @@ export const MessageBox = forwardRef(
       jumpButtonBottomProps,
       jumpButtonBottomTooltipProps,
       jumpButtonTopTooltipProps,
+      hasOuterScrollbar = false,
       ...props
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
@@ -433,7 +437,12 @@ export const MessageBox = forwardRef(
           role="region"
           tabIndex={0}
           aria-label={ariaLabel}
-          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className ?? ''}`}
+          className={css(
+            'pf-chatbot__messagebox',
+            position === 'bottom' && 'pf-chatbot__messagebox--bottom',
+            hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll',
+            className
+          )}
           ref={messageBoxRef}
           {...props}
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}