Merge pull request #8 from aferd/RHCLOUD-31244

RHCLOUD-31244 add conversation alert

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md

@@ -20,6 +20,7 @@ import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMes
 import LoadingMessage from '@patternfly/virtual-assistant/dist/dynamic/LoadingMessage';
 import { GrinIcon } from '@patternfly/react-icons';
 import { AngleDownIcon } from '@patternfly/react-icons';
+import ConversationAlert from '@patternfly/virtual-assistant/dist/esm/ConversationAlert'
 
 The **virtual assistant** component renders body of the virtual assistant window.
 
@@ -65,6 +66,16 @@ Custom actions can be added to the assistant body using the `actions` property.
 
 ```
 
+
+
+### Conversation Alert
+
+You can configure a custom title and variant input value using `title` and `variant` props.
+
+```js file="./VirtualAssistantConversationAlert.tsx"
+
+```
+
 ### System Message Entry
 
 The `SystemMessageEntry` component provides a simple system message with an option for text links.

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantConversationAlert.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
+import ConversationAlert from '@patternfly/virtual-assistant/dist/esm/ConversationAlert'
+
+export const BasicExample: React.FunctionComponent = () => (
+  <VirtualAssistant >
+    <ConversationAlert title="You can start a new conversation at any time by typing below." />
+  </VirtualAssistant>
+);

packages/module/src/ConversationAlert/ConversationAlert.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Alert, TextContent } from '@patternfly/react-core';
+
+import { createUseStyles } from 'react-jss';
+
+export interface ConversationAlertProps {
+    /** Text for conversation alert */
+  title: string;
+  /** Variant type for conversation alert */
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';
+}
+
+const useStyles = createUseStyles({
+  banner: {
+    paddingTop: "0",
+    paddingBottom: "var(--pf-v5-global--spacer--md)",
+  },
+  bannerAlert: {
+    "& .pf-v5-c-alert__title": {
+      marginTop: "0",
+      fontSize: "var(--pf-v5-global--FontSize--sm)",
+    }
+  }
+})
+
+export const ConversationAlert:React.FunctionComponent<ConversationAlertProps> = ({
+  variant= 'info',
+  title
+}: ConversationAlertProps) => {
+  const classes = useStyles();
+  return (
+    <TextContent className={classes.banner}>
+      <Alert className={classes.bannerAlert} variant={variant} isInline title={title} component="h6" />
+    </TextContent>
+  );
+};
+
+export default ConversationAlert;

packages/module/src/ConversationAlert/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ConversationAlert';
+
+export * from './ConversationAlert';