diff --git a/packages/module/package.json b/packages/module/package.json
index 2cbccee7..8f32b031 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -33,17 +33,17 @@
"dependencies": {
"@patternfly/react-core": "^5.1.2",
"@patternfly/react-icons": "^5.1.2",
- "react-jss": "^10.10.0",
- "clsx": "^2.1.0"
+ "clsx": "^2.1.0",
+ "react-jss": "^10.10.0"
},
"peerDependencies": {
"react": "^17 || ^18",
"react-dom": "^17 || ^18"
},
"devDependencies": {
- "@patternfly/patternfly-a11y": "^4.3.1",
"@patternfly/documentation-framework": "^2.0.0-alpha.57",
"@patternfly/patternfly": "^5.1.0",
+ "@patternfly/patternfly-a11y": "^4.3.1",
"@types/react": "^18.2.61",
"@types/react-dom": "^18.2.19",
"@types/react-router-dom": "^5.3.3",
@@ -52,6 +52,8 @@
"react-router": "^6.22.2",
"react-router-dom": "^6.22.2",
"rimraf": "^2.7.1",
+ "sass": "^1.71.1",
+ "sass-loader": "^14.1.1",
"typescript": "^5.3.3"
}
}
diff --git a/packages/module/src/VirtualAssistant/AssistantMessageEntry.tsx b/packages/module/src/VirtualAssistant/AssistantMessageEntry.tsx
new file mode 100644
index 00000000..2dbaff86
--- /dev/null
+++ b/packages/module/src/VirtualAssistant/AssistantMessageEntry.tsx
@@ -0,0 +1,60 @@
+
+import React from 'react';
+import { Icon, Label, Split, SplitItem, TextContent } 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: {
+ 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",
+ },
+ label: {
+ // not working
+ "BorderColor": "var(--pf-v5-c-label--m-red__icon--Color)",
+ }
+})
+
+export const AssistantMessageEntry = () => {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+ How many I help you today? Do you have some question for me?
+
+
+
+ {/* Options*/}
+
+
+
+
+
+
+
+ {/* Options*/}
+
+ );
+};
diff --git a/packages/module/src/VirtualAssistant/ConversationEndBanner.tsx b/packages/module/src/VirtualAssistant/ConversationEndBanner.tsx
new file mode 100644
index 00000000..e72b458a
--- /dev/null
+++ b/packages/module/src/VirtualAssistant/ConversationEndBanner.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Alert, TextContent } from '@patternfly/react-core';
+
+import { createUseStyles } from 'react-jss';
+
+const useStyles = createUseStyles({
+ banner: {
+ paddingTop: "0",
+ paddingBottom: "var(--pf-v5-global--spacer--md)",
+ },
+ bannerAlert: {
+ "& .pf-v5-c-alert__title": {
+ marginTop: "0",
+ fontSize: "var(--pf-v5-global--FontSize--sm)",
+ }
+ }
+})
+
+export const ConversationEndBanner: React.FunctionComponent = () => {
+ const classes = useStyles();
+
+ return (
+ <>
+
+
+
+ >
+ );
+};
diff --git a/packages/module/src/VirtualAssistant/LoadingMessageEntry.tsx b/packages/module/src/VirtualAssistant/LoadingMessageEntry.tsx
new file mode 100644
index 00000000..3887eb4a
--- /dev/null
+++ b/packages/module/src/VirtualAssistant/LoadingMessageEntry.tsx
@@ -0,0 +1,80 @@
+import React, { FunctionComponent } 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 const LoadingMessageEntry: FunctionComponent = () => {
+ const classes = useStyles();
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/module/src/VirtualAssistant/SystemMessageEntry.tsx b/packages/module/src/VirtualAssistant/SystemMessageEntry.tsx
new file mode 100644
index 00000000..8df2910f
--- /dev/null
+++ b/packages/module/src/VirtualAssistant/SystemMessageEntry.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+import classnames from "clsx";
+
+const useStyles = createUseStyles({
+ systemMessageText: {
+ paddingBottom: "var(--pf-v5-global--spacer--md)",
+ textAlign: "center",
+ }
+})
+
+export const SystemMessageEntry = () => {
+ const classes = useStyles();
+ return (
+
+
+ End of conversation
+
+
+ );
+};
diff --git a/packages/module/src/VirtualAssistant/UserMessageEntry.tsx b/packages/module/src/VirtualAssistant/UserMessageEntry.tsx
new file mode 100644
index 00000000..a3559f77
--- /dev/null
+++ b/packages/module/src/VirtualAssistant/UserMessageEntry.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Icon, Split, SplitItem, TextContent } from '@patternfly/react-core';
+import OutlinedUserIcon from '@patternfly/react-icons/dist/js/icons/outlined-user-icon';
+import { createUseStyles } from 'react-jss';
+import classnames from "clsx";
+
+const useStyles = createUseStyles({
+ user: {
+ margin: "0 0 12px 40px",
+ },
+ bubbleUser: {
+ 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",
+ }
+})
+
+const UserMessageEntry: React.FunctionComponent = () => {
+ const classes = useStyles();
+
+ return (
+ <>
+
+
+
+ Hello, Can you help me?
+
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default UserMessageEntry;
diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
index 3cbb865a..a223046a 100644
--- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
+++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
@@ -1,14 +1,91 @@
import React from 'react';
-import { Text } from '@patternfly/react-core'
+import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, InputGroup, InputGroupText, TextArea } from '@patternfly/react-core'
+import PlaneIcon from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
+
+import { LoadingMessageEntry } from './LoadingMessageEntry';
+import { AssistantMessageEntry } from './AssistantMessageEntry';
+import UserMessageEntry from './UserMessageEntry';
+import { ConversationEndBanner } from './ConversationEndBanner';
+import { SystemMessageEntry } from './SystemMessageEntry';
+
+import { createUseStyles } from 'react-jss';
+import classnames from "clsx";
export interface VirtualAssistantProps {
/** Content text */
- text?: string;
+ title?: string;
};
-const VirtualAssistant: React.FunctionComponent = ({ text, ...props }: VirtualAssistantProps) => (
- {text ?? 'Virtual assistant content'}
-);
+const useStyles = createUseStyles({
+ card: {
+ width: "350px",
+ height: "550px",
+ overflow: "hidden",
+ "@media screen and (max-width: 768px)": {
+ height: "420px",
+ width: "100%",
+ },
+ },
+ cardHeader: {
+ background: "var(--pf-v5-global--BackgroundColor--dark-400)",
+ },
+ cardTitle: {
+ color: "var(--pf-v5-global--Color--light-100)",
+ },
+ cardBody: {
+ backgroundColor: "var(--pf-v5-global--BackgroundColor--100)",
+ paddingLeft: "var(--pf-v5-global--spacer--md)",
+ paddingRight: "var(--pf-v5-global--spacer--md)",
+ paddingTop: "var(--pf-v5-global--spacer--lg)",
+ overflowY: "scroll",
+ "&::-webkit-scrollbar": "display: none",
+ },
+ cardFooter: {
+ padding: "0",
+ },
+ inputGroup: {
+ height: "60px",
+ },
+ textArea: {
+ resize: "none",
+ }
+})
+const VirtualAssistant: React.FunctionComponent = ({ title, ...props }: VirtualAssistantProps) => {
+ const classes = useStyles();
+
+ return (
+
+
+
+ {title ?? 'Virtual Assistant'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
export default VirtualAssistant;