feat(MessageBar): pulled in compass styles

feat(MessageBar): pulled in compass styles

Author: mcoker

package-lock.json

@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@octokit/rest": "^18.0.0",
-    "@patternfly/documentation-framework": "6.28.6",
+    "@patternfly/documentation-framework": "6.28.9",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/react-icons": "^6.1.0",
     "@patternfly/react-table": "^6.1.0",

package.json

@@ -37,6 +37,7 @@
     "@patternfly/react-core": "^6.1.0",
     "@patternfly/react-icons": "^6.1.0",
     "@patternfly/react-table": "^6.1.0",
+    "@patternfly/react-styles": "^6.1.0",
     "@segment/analytics-next": "^1.76.0",
     "clsx": "^2.1.0",
     "monaco-editor": "^0.54.0",
@@ -56,7 +57,7 @@
   },
   "devDependencies": {
     "@octokit/rest": "^18.0.0",
-    "@patternfly/documentation-framework": "6.28.6",
+    "@patternfly/documentation-framework": "6.28.9",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",

packages/module/package.json

@@ -0,0 +1,15 @@
+import { FunctionComponent, useState } from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+
+export const ChatbotMessageBarIndicatorThinking: FunctionComponent = () => {
+  const [isThinking, setIsThinking] = useState(false);
+  const handleSend = (_message: string | number) => {
+    setIsThinking(true);
+
+    setTimeout(() => {
+      setIsThinking(false);
+    }, 10000);
+  };
+
+  return <MessageBar onSendMessage={handleSend} hasAiIndicator isThinking={isThinking} />;
+};

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarIndicatorThinking.tsx

@@ -314,6 +314,16 @@ To enable the stop button, set `hasStopButton` to `true` and pass in a `handleSt
 
 ```
 
+### Message bar with AI indicator styles
+
+To add a more pronounced AI indicator style to the message bar, pass `hasAiIndicator` to the `<MessageBar>` component. You can also enable a "thinking" animation by passing in `isThinking`.
+
+This example shows a simplified method of handling the "thinking" animation: after a user sends a message, the `isThinking` property is set to `true` to trigger the animation, then returns to `false` after 10 seconds to halt the animation.
+
+```ts file="./ChatbotMessageBarIndicatorThinking.tsx" isBeta
+
+```
+
 ## Navigation
 
 ### Side nav in a drawer

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -26,16 +26,18 @@
 
   overflow: hidden;
 
-  &.pf-m-primary {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
-  }
+  &:not(.pf-v6-m-thinking) {
+    &.pf-m-primary {
+      box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    }
 
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
-  }
+    &:hover {
+      box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    }
 
-  &:focus-within {
-    box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+    &:focus-within {
+      box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+    }
   }
 
   &-actions {

packages/module/src/MessageBar/MessageBar.scss

@@ -476,4 +476,16 @@ describe('Message bar', () => {
     const { container } = render(<MessageBar isPrimary onSendMessage={jest.fn} />);
     expect(container.querySelector('.pf-m-primary')).toBeTruthy();
   });
+
+  it('Renders with class pf-v6-m-ai-indicator when hasAiIndicator is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasAiIndicator />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-ai-indicator');
+  });
+
+  it('Renders with class pf-v6-m-thinking when isThinking is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} isThinking />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
+  });
 });

packages/module/src/MessageBar/MessageBar.test.tsx

@@ -10,6 +10,7 @@ import {
   TextAreaProps,
   TooltipProps
 } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -115,6 +116,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   innerRef?: React.Ref<HTMLTextAreaElement>;
   /** Sets background color to primary */
   isPrimary?: boolean;
+  /** @beta Flag indicating whether the message bar has an AI indicator border. */
+  hasAiIndicator?: boolean;
+  /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
+  isThinking?: boolean;
 }
 
 export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
@@ -146,6 +151,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   dropzoneProps,
   innerRef,
   isPrimary,
+  hasAiIndicator,
+  isThinking,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -468,7 +475,15 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   }
 
   return (
-    <div className={`pf-chatbot__message-bar ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`}>
+    <div
+      className={css(
+        'pf-chatbot__message-bar',
+        isPrimary && 'pf-m-primary',
+        hasAiIndicator && 'pf-v6-m-ai-indicator',
+        isThinking && 'pf-v6-m-thinking',
+        className
+      )}
+    >
       {messageBarContents}
     </div>
   );