Virtual Assistant sample

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

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 ChatbotIcon from './icon-chatbot';
+
+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 (
+    <div className="pf-v5-u-mb-md">
+      <Split className={classes.chatbot}>
+        <SplitItem>
+          <Icon size="lg" className="pf-v5-u-mr-sm pf-v5-u-pt-md">
+            <ChatbotIcon />
+          </Icon>
+        </SplitItem>
+        <SplitItem className={classnames(classes.bubble," pf-u-background-color-200")}>
+          <TextContent className="pf-v5-u-font-size-sm">
+            How many I help you today? Do you have some question for me?
+          </TextContent>
+        </SplitItem>
+      </Split>
+      {/* Options*/}
+      <Split>
+        <SplitItem className={classnames(classes.chatbot,"pf-v5-u-ml-xl pf-v5-u-mt-md")}>
+          <Label className={classnames(classes.label,"pf-v5-u-m-xs")} color="red">
+            Option #1
+          </Label>
+          <Label className={classnames(classes.label,"pf-v5-u-m-xs")} color="red">
+            Option #2
+          </Label>
+          <Label className={classnames(classes.label,"pf-v5-u-m-xs")} color="red">
+            Option #3
+          </Label>
+        </SplitItem>
+      </Split>
+      {/* Options*/}
+    </div>
+  );
+};

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 (
+    <>
+      <TextContent className={classes.banner}>
+        <Alert className={classes.bannerAlert} variant="info"  isInline title="You can start a new conversation at anytime by typing below." component="h6" />
+      </TextContent>
+    </>
+  );
+};

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 ChatbotIcon from './icon-chatbot';
+
+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<unknown> = () => {
+  const classes = useStyles();
+  return (
+    <Split className={classes.chatbot}>
+      <SplitItem>
+        <Icon size="lg" className="pf-v5-u-mr-sm pf-v5-u-pt-md">
+          <ChatbotIcon />
+        </Icon>
+      </SplitItem>
+      <SplitItem className={classnames(classes.bubble," pf-u-background-color-200")} >
+        <div className={classnames(classes.typing,"pf-v5-u-display-flex pf-u-align-items-center")}>
+          <div className={classes.dot}></div>
+          <div className={classes.dot}></div>
+          <div className={classes.dot}></div>
+        </div>
+      </SplitItem>
+    </Split>
+  );
+};

packages/module/src/VirtualAssistant/SystemMessageEntry.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+
+export const SystemMessageEntry = () => (
+  <>
+    <TextContent className="system-message">
+      <Text component={TextVariants.small} className="system-message-text">
+          Your browser may block pop-ups. Please allow pop-ups or click [here]
+      </Text>
+    </TextContent>
+  </>
+);

packages/module/src/VirtualAssistant/UserMessageEntry.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent } from 'react';
+import { Icon, Split, SplitItem, TextContent } from '@patternfly/react-core';
+import OutlinedUserIcon from '@patternfly/react-icons/dist/js/icons/outlined-user-icon';
+// import { MessageProps } from './MessageProps';
+// import { UserMessage } from '../../types/Message';
+
+import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
+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 (
+    <>
+      <Split className={classnames(classes.user,"pf-v5-u-mb-md pf-v5-u-align-items-flex-start pf-v5-u-justify-content-flex-end")}>
+        <SplitItem className={classes.bubbleUser}>
+          <TextContent className="pf-v5-u-color-300 pf-v5-u-font-size-sm">
+            Hello, Can you help me?
+          </TextContent>
+        </SplitItem>
+        <SplitItem>
+          <Icon size="lg" className="pf-v5-u-ml-sm pf-v5-u-pt-xs">
+            <OutlinedUserIcon />
+          </Icon>
+        </SplitItem>
+      </Split>
+    </>
+  );
+};
+
+export default UserMessageEntry;

packages/module/src/VirtualAssistant/VirtualAssistant.tsx

@@ -1,14 +1,93 @@
 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<VirtualAssistantProps> = ({ text, ...props }: VirtualAssistantProps) => (
-  <Text {...props}>{text ?? 'Virtual assistant content'}</Text>
-);
+const useStyles = createUseStyles({
+  card: {
+    width: "350px",
+    height: "550px",
+    overflow: "hidden", 
+    "@media screen and (max-width: 768px)": {
+      height: "420px",
+      width: "100%",
+    },
+  },
+  cardHeader: {
+    background: "url(../../assets/header-background-01.svg) var(--pf-v5-global--palette--red-200)",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "75% 0%",
+  },
+  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<VirtualAssistantProps> = ({ title, ...props }: VirtualAssistantProps) => {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.card}>
+      <CardHeader className={classes.cardHeader}>
+        <CardTitle className={classnames(classes.cardTitle,"pf-v5-u-font-size-xl")} {...props}>
+          {title ?? 'Virtual Assistant'}
+        </CardTitle>
+      </CardHeader>
+      <CardBody className={classes.cardBody}>
+        <AssistantMessageEntry />
+        <UserMessageEntry />
+        <LoadingMessageEntry />
+        <ConversationEndBanner />
+        <SystemMessageEntry />
+      </CardBody>
+      <CardFooter className={classes.cardFooter}>      
+        <InputGroup className={classes.inputGroup}>
+          <TextArea
+            className={classes.textArea}
+            placeholder="Type a message..."
+            name="user-query"
+            type="text"
+            aria-label="User question"
+          />
+          <InputGroupText id="username">
+            <Button variant="plain" className="pf-v5-u-px-sm">
+              <PlaneIcon />
+            </Button>
+          </InputGroupText>
+        </InputGroup>
+      </CardFooter>
+    </Card>
+  );
+};
 
 export default VirtualAssistant;

packages/module/src/VirtualAssistant/icon-chatbot.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const ChatBotIcon = () => {
+  return (
+    <svg width="34" height="34" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.st0{fill:#A30000;}`}</style>
+      </defs>
+      <path
+        className="st0"
+        d="M22.2,8.4h-0.6l0.8-2.9l-0.9-0.3l-0.9,3.1H9.7L8.3,5.3L7.4,5.7l1.2,2.7H7.9c-1.9,0-3.4,1.5-3.4,3.4v12.8
+    c0,1.9,1.5,3.4,3.4,3.4h14.3c1.9,0,3.4-1.5,3.4-3.4V11.8C25.5,9.9,24,8.4,22.2,8.4z M24,23.6L24,23.6c0,1.6-1.3,2.9-2.9,2.9H8.9
+    c-1.6,0-2.9-1.3-2.9-2.9V12.7c0-1.6,1.3-2.9,2.9-2.9h12.2c1.6,0,2.9,1.3,2.9,2.9V23.6z"
+      />
+      <circle className="st0" cx="10.5" cy="15.9" r="1.9" />
+      <circle className="st0" cx="19.5" cy="15.9" r="1.9" />
+      <g>
+        <g>
+          <path
+            className="st0"
+            d="M13.9,24.3c-1.9,0-2.1-0.1-2.2-0.2c-0.4-0.2-0.9-0.6-1.6-1.3c-0.3-0.2-0.8-0.7-0.8-0.7s0-0.7,0.2-0.9
+        c0.2-0.2,0.8-0.3,0.8-0.3s0.2,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.4,0.4c0.4,0.4,1,0.9,1.3,1c0.7,0.1,4.5,0,7.9-0.1c0,0,0.4,0,0.4,0.8
+        c0,0.5-0.3,0.7-0.3,0.7c-1.7,0-3,0.1-3.9,0.1C15.3,24.3,14.5,24.3,13.9,24.3z M12.2,22.7L12.2,22.7z"
+          />
+        </g>
+      </g>
+      <path className="st0" d="M2.3,14.4H3v9H2.3c-1.2,0-2.3-1-2.3-2.3v-4.5C0,15.4,1,14.4,2.3,14.4z" />
+      <path className="st0" d="M27.8,14.4c1.2,0,2.3,1,2.3,2.3v4.5c0,1.2-1,2.3-2.3,2.3H27v-9L27.8,14.4L27.8,14.4z" />
+      <circle className="st0" cx="7.6" cy="4.5" r="1.6" />
+      <circle className="st0" cx="22.4" cy="4.5" r="1.6" />
+      <g>
+        <polygon className="st0" points="18.7,5 16.1,5 14.2,2.8 13,5 11,5 11,4 12.4,4 14,1.1 16.5,4 18.7,4  " />
+      </g>
+    </svg>
+  );
+};
+export default ChatBotIcon;