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