Allow user to pass custom icon to loadingMessage

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"
 

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>
 );

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")} >