From 645840338da1b4a3fb4267554d763600ef9df474 Mon Sep 17 00:00:00 2001
From: Cody Mitchell <comitche@redhat.com>
Date: Fri, 29 Mar 2024 10:06:24 -0400
Subject: [PATCH] Allow user to pass custom icon to loadingMessage

---
 .../examples/VirtualAssistant/VirtualAssistant.md         | 4 +++-
 .../VirtualAssistant/VirtualAssistantLoadingMessage.tsx   | 2 ++
 packages/module/src/LoadingMessage/LoadingMessage.tsx     | 8 ++++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

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 8c73798c..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
@@ -17,6 +17,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 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.
@@ -65,7 +66,8 @@ Custom actions can be added to the assistant body using the `actions` property.
 
 ### Loading Messages
 
-The LoadingMessage component displays a typing indicator for messages that are still processing, adding an artificial delay to create a more natural conversation flow.
+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
index f8204121..c032b755 100644
--- 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
@@ -1,9 +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 = () => (
   <VirtualAssistant >
     <LoadingMessage />
+    <LoadingMessage icon={GrinIcon} />
   </VirtualAssistant>
 );
diff --git a/packages/module/src/LoadingMessage/LoadingMessage.tsx b/packages/module/src/LoadingMessage/LoadingMessage.tsx
index fe7a0f9e..dfede7ea 100644
--- a/packages/module/src/LoadingMessage/LoadingMessage.tsx
+++ b/packages/module/src/LoadingMessage/LoadingMessage.tsx
@@ -59,13 +59,17 @@ const useStyles = createUseStyles({
   }
 })
 
-export const LoadingMessage = () => {
+export interface LoadingMessageProps {
+  icon?: React.ComponentClass;
+}
+
+export const LoadingMessage: React.FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => {
   const classes = useStyles();
   return (
     <Split className={classes.chatbot}>
       <SplitItem>
         <Icon size="lg" className="pf-v5-u-mr-sm pf-v5-u-pt-md">
-          <RobotIcon />
+          <IconComponent />
         </Icon>
       </SplitItem>
       <SplitItem className={classnames(classes.bubble," pf-u-background-color-200")} >