feat(MessageBar): pulled in compass styles

Author: thatblindgeye

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

@@ -55,7 +55,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,16 @@
+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) => {
+    console.log('handling');
+    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 indicator and animation
+
+You can pass the `hasAiIndicator` property to the `<MessageBar>` to give it a more pronounced AI indicator style. You can also pass the `isThinking` property to enable a "thinking" animation.
+
+The following example shows a simplified way of how you might hanbdle the "thinking" animation: when you send a message, the `isThinking` property is set to `true`, then after 10 seconds it is set back to false to disable the animation again.
+
+```ts file="./ChatbotMessageBarIndicatorThinking.tsx"
+
+```
+
 ## 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

@@ -448,4 +448,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 '../utils/css';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -120,6 +121,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   innerRef?: React.Ref<HTMLTextAreaElement>;
   /** Sets background color to primary */
   isPrimary?: boolean;
+  /** Flag indicating whether the message bar has an AI indicator border. */
+  hasAiIndicator?: boolean;
+  /** 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> = ({
@@ -151,6 +156,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   dropzoneProps,
   innerRef,
   isPrimary,
+  hasAiIndicator,
+  isThinking,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -472,7 +479,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>
   );

packages/module/src/MessageBar/MessageBar.tsx

@@ -0,0 +1,27 @@
+export function css(...args: any): string {
+  // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
+  // Copied from patternfly/react-styles
+  const classes = [] as string[];
+  const hasOwn = {}.hasOwnProperty;
+
+  args.filter(Boolean).forEach((arg: any) => {
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      const inner = css(...(arg as any));
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (const key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  });
+
+  return classes.join(' ');
+}