diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md index a2efaf16..040c36f5 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md +++ b/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" ``` + diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantSystemMessageEntry.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantSystemMessageEntry.tsx new file mode 100644 index 00000000..5e571c63 --- /dev/null +++ b/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 = () => ( + + End of conversation. + +); \ No newline at end of file diff --git a/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx b/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx new file mode 100644 index 00000000..36c66b21 --- /dev/null +++ b/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 = (props) => { + const classes = useStyles(); + return ( + + + {props.children} + + + ); +}; + +export default SystemMessageEntry; \ No newline at end of file diff --git a/packages/module/src/SystemMessageEntry/index.ts b/packages/module/src/SystemMessageEntry/index.ts new file mode 100644 index 00000000..72d283e2 --- /dev/null +++ b/packages/module/src/SystemMessageEntry/index.ts @@ -0,0 +1,3 @@ +export { default } from './SystemMessageEntry'; + +export * from './SystemMessageEntry'; \ No newline at end of file