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 0b7ad3a9..a2efaf16 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,8 @@ 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 LoadingMessage from '@patternfly/virtual-assistant/dist/dynamic/LoadingMessage';
+import { GrinIcon } from '@patternfly/react-icons';
import { AngleDownIcon } from '@patternfly/react-icons';
The **virtual assistant** component renders body of the virtual assistant window.
@@ -61,3 +63,12 @@ Custom actions can be added to the assistant body using the `actions` property.
```js file="./VirtualAssistantWithActions.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.
+
+
+```js file="./VirtualAssistantLoadingMessage.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantLoadingMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantLoadingMessage.tsx
new file mode 100644
index 00000000..c032b755
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantLoadingMessage.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant';
+import LoadingMessage from '@patternfly/virtual-assistant/dist/esm/LoadingMessage'
+import GrinIcon from '@patternfly/react-icons/dist/js/icons/bacon-icon';
+
+export const BasicExample: React.FunctionComponent = () => (
+
+
+
+
+);
diff --git a/packages/module/src/LoadingMessage/LoadingMessage.tsx b/packages/module/src/LoadingMessage/LoadingMessage.tsx
new file mode 100644
index 00000000..dfede7ea
--- /dev/null
+++ b/packages/module/src/LoadingMessage/LoadingMessage.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Icon, Split, SplitItem } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+import classnames from "clsx";
+
+import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
+
+const useStyles = createUseStyles({
+ chatbot: {
+ marginBottom: "var(--pf-v5-global--spacer--md)",
+ marginRight: "40px",
+ },
+ bubble: {
+ border: "1px solid var(--pf-v5-global--BackgroundColor--dark-400)",
+ borderRadius: "14px",
+ padding: "var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md)",
+ maxWidth: "100%",
+ wordWrap: "break-word",
+ },
+ "@keyframes mercuryTypingAnimation": {
+ "0%": {
+ transform: "translateY(0px)",
+ backgroundColor: "var(--pf-v5-global--palette--black-600)",
+ },
+ "28%": {
+ transform: "translateY(-7px)",
+ backgroundColor: "var(--pf-v5-global--palette--black-400)",
+ },
+ "44%": {
+ transform: "translateY(0px)",
+ backgroundColor: "var(--pf-v5-global--palette--black-200)",
+ }
+ },
+ dot: {},
+ typing: {
+ height: "17px",
+ "& $dot": {
+ animation: "$mercuryTypingAnimation 1.8s infinite ease-in-out",
+ borderRadius: "50%",
+ display: "inline-block",
+ height: "7px",
+ marginRight: "4px",
+ marginTop: "6px",
+ verticalAlign: "middle",
+ width: "7px",
+ "&:nth-child(1)": {
+ animationDelay: "200ms",
+ },
+ "&:nth-child(2)": {
+ animationDelay: "300ms",
+ },
+ "&:nth-child(3)": {
+ animationDelay: "400ms",
+ },
+ "&:last-child": {
+ marginRight: "0",
+ },
+ }
+ }
+})
+
+export interface LoadingMessageProps {
+ icon?: React.ComponentClass;
+}
+
+export const LoadingMessage: React.FunctionComponent = ({ icon: IconComponent = RobotIcon }) => {
+ const classes = useStyles();
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LoadingMessage;
diff --git a/packages/module/src/LoadingMessage/index.ts b/packages/module/src/LoadingMessage/index.ts
new file mode 100644
index 00000000..8386e1b3
--- /dev/null
+++ b/packages/module/src/LoadingMessage/index.ts
@@ -0,0 +1,3 @@
+export { default } from './LoadingMessage';
+
+export * from './LoadingMessage';
\ No newline at end of file
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index 477c6c40..40c2a25c 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -1,5 +1,8 @@
// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+export { default as LoadingMessage } from './LoadingMessage';
+export * from './LoadingMessage';
+
export { default as VirtualAssistant } from './VirtualAssistant';
export * from './VirtualAssistant';