RHCLOUD-31243 add system message entry

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

@@ -16,6 +16,7 @@ sourceLink: https://github.com/patternfly/virtual-assistant/blob/main/packages/m
 
 import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
 import VirtualAssistantAction from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistantAction';
+import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMessageEntry'
 import LoadingMessage from '@patternfly/virtual-assistant/dist/dynamic/LoadingMessage';
 import { GrinIcon } from '@patternfly/react-icons';
 import { AngleDownIcon } from '@patternfly/react-icons';
@@ -64,6 +65,15 @@ Custom actions can be added to the assistant body using the `actions` property.
 
 ```
 
+### System Message Entry
+
+The `SystemMessageEntry` component provides a simple system message with an option for text links.
+
+
+```js file="./VirtualAssistantSystemMessageEntry.tsx"
+
+```
+
 ### Loading Messages
 
 The `LoadingMessage` component shows a typing indicator for messages still being processed, introducing an intentional delay to simulate a smoother flow of conversation. Additionally, it allows for the use of a custom icon through the `icon` property.
@@ -72,3 +82,4 @@ The `LoadingMessage` component shows a typing indicator for messages still being
 ```js file="./VirtualAssistantLoadingMessage.tsx"
 
 ```
+

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
+import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMessageEntry'
+
+export const BasicExample: React.FunctionComponent = () => (
+  <VirtualAssistant >
+    <SystemMessageEntry>End of conversation.</SystemMessageEntry>
+  </VirtualAssistant>
+);

packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+
+export interface SystemMessageEntryProps {
+    /** Message rendered within the system message entry */
+  children: React.ReactNode;
+}
+
+const useStyles = createUseStyles({
+  systemMessageText: {
+    paddingBottom: "var(--pf-v5-global--spacer--md)",
+    textAlign: "center",
+  }
+})
+
+export const SystemMessageEntry: React.FunctionComponent<SystemMessageEntryProps> = (props) => {
+  const classes = useStyles();
+  return (
+    <TextContent>
+      <Text component={TextVariants.small} className={classes.systemMessageText}>
+        {props.children}
+      </Text>
+    </TextContent>
+  );
+};
+
+export default SystemMessageEntry;

packages/module/src/SystemMessageEntry/index.ts

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