diff --git a/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx b/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx
index b0e0c413c..59217cca9 100644
--- a/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx
+++ b/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx
@@ -1,20 +1,20 @@
import React from 'react';
import { Text, TextContent, TextVariants } from '@patternfly/react-core';
-import { createUseStyles } from 'react-jss';
+import { createVaStyles } from '../VirtualAssistantTheme';
export interface SystemMessageEntryProps {
/** Message rendered within the system message entry */
children: React.ReactNode;
}
-const useStyles = createUseStyles({
+const useStyles = createVaStyles({
systemMessageText: {
paddingBottom: "var(--pf-v5-global--spacer--md)",
textAlign: "center",
}
})
-export const SystemMessageEntry: React.FunctionComponent
= (props) => {
+export const SystemMessageEntry: React.FunctionComponent = (props: SystemMessageEntryProps) => {
const classes = useStyles();
return (
diff --git a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx
index 5939f9088..2803489ef 100644
--- a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx
+++ b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx
@@ -1,45 +1,39 @@
import React, { PropsWithChildren } 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";
+import { Split, SplitItem, TextContent } from '@patternfly/react-core';
+import clsx from "clsx";
+import { createVaStyles } from '../VirtualAssistantTheme';
-const useStyles = createUseStyles({
+const useStyles = createVaStyles((theme) => ({
user: {
margin: "0 0 12px 40px",
},
bubbleUser: {
- border: "1px solid var(--pf-v5-global--BackgroundColor--dark-400)",
- borderRadius: "14px",
+ backgroundColor: theme.global.colors.primary,
+ borderRadius: theme.global.borderRadiusBubble,
+ color: "#fff",
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",
}
-})
+}));
interface UserMessageEntryProps {
+ /** User message entry icon */
icon?: React.ComponentType;
}
-const UserMessageEntry = ({ children, icon: IconComponent = OutlinedUserIcon }: PropsWithChildren) => {
+const UserMessageEntry = ({ children }: PropsWithChildren) => {
const classes = useStyles();
return (
- <>
-
-
-
- {children}
-
-
-
-
-
-
-
-
-
+
+
+
+ {children}
+
+
+
);
};
-export default UserMessageEntry;
\ No newline at end of file
+export default UserMessageEntry;
diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.test.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.test.tsx
index 16d78cd34..6d4cdf035 100644
--- a/packages/module/src/VirtualAssistant/VirtualAssistant.test.tsx
+++ b/packages/module/src/VirtualAssistant/VirtualAssistant.test.tsx
@@ -37,6 +37,14 @@ describe('VirtualAssistant', () => {
expect(screen.getByText('I am the message')).toBeTruthy();
});
+ it('should use custom icon', () => {
+ const MyIcon: React.FunctionComponent = () => FakeIcon;
+ render();
+ expect(screen.getByText('FakeIcon')).toBeTruthy();
+ });
+
it('should listen to message changes', async () => {
const listener = jest.fn();
render((target: T, ...sources: Partial[]): T {
+ if (!sources.length) {return target;}
+ const source = sources.shift();
+
+ if (isObject(target) && isObject(source)) {
+ for (const key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ const sourceValue = source[key];
+ if (isObject(sourceValue) && isObject(target[key])) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ target[key] = deepMerge(target[key] as any, sourceValue as any);
+ } else {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (target as any)[key] = sourceValue;
+ }
+ }
+ }
+ }
+ // To avoid cross-modification of themes when using multiple instances on the same screen, a new object has to be returned here.
+ return deepMerge({ ...target }, ...sources);
+}
+
+const useStyles = createVaStyles((theme) => ({
card: {
- width: "350px",
- height: "550px",
+ width: "400px",
+ height: "600px",
overflow: "hidden",
+ borderRadius: theme.components.VirtualAssistant.card.borderRadius,
"@media screen and (max-width: 768px)": {
height: "420px",
width: "100%",
},
- },
- cardHeader: {
- background: "var(--pf-v5-global--BackgroundColor--dark-400)",
- "& .pf-v5-c-button.pf-m-plain": {
- color: "var(--pf-v5-global--Color--light-100)",
- paddingLeft: "0",
- paddingRight: "0",
+ "&.fullPage": {
+ width: "100%",
+ height: "100%",
+ borderRadius: "0",
}
},
- cardTitle: {
- color: "var(--pf-v5-global--Color--light-100)",
- },
cardBody: {
- backgroundColor: "var(--pf-v5-global--BackgroundColor--100)",
+ backgroundColor: theme.global.colors.background100,
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",
+ "&::-webkit-scrollbar": {
+ display: "none"
+ }
},
cardFooter: {
- padding: "0",
- },
- inputGroup: {
- height: "60px",
+ padding: "10px",
+ paddingBottom: "16px",
+ "& :focus-visible": {
+ outline: "none",
+ },
+ "& .pf-v5-c-button.pf-m-disabled": {
+ color: "transparent !important",
+ },
+ "& .pf-v5-c-button.pf-m-plain": {
+ "--pf-v5-c-button--disabled--Color": "transparent",
+ color: theme.global.colors.primary,
+ },
+ "& .pf-v5-c-form-control": {
+ "--pf-v5-c-form-control--after--BorderBottomWidth": "0",
+ },
+ "& .pf-v5-svg": {
+ width: "27px",
+ height: "27px",
+ }
},
textArea: {
resize: "none",
- }
-})
+ backgroundColor: theme.global.colors.background200,
+ borderRadius: theme.components.VirtualAssistant.textArea.borderRadius,
+ color: theme.global.colors.light100,
+ paddingRight: "50px",
+ paddingLeft: "20px",
+ },
+ sendButton: {
+ position: "absolute",
+ bottom: "22px",
+ right: "14px",
+ },
+}));
-export interface VirtualAssistantProps {
+export interface VirtualAssistantProps extends Omit {
/** Messages rendered within the assistant */
children?: React.ReactNode;
- /** Header title for the assistant */
- title?: React.ReactNode;
/** Input's placeholder for the assistant */
inputPlaceholder?: string;
/** Input's content */
message?: string;
- /** Header actions of the assistant */
- actions?: React.ReactNode;
/** Input's content change */
onChangeMessage?: (event: React.ChangeEvent, value: string) => void;
/** Fire when clicking the Send (Plane) icon */
@@ -73,18 +118,30 @@ export interface VirtualAssistantProps {
isInputDisabled?: boolean;
/** Disables the send button */
isSendButtonDisabled?: boolean;
+ /** Expands the assistant to fill the entire page */
+ isFullPage?: boolean;
+ /** Allows to overwrite the default header with a custom one */
+ header?: React.ReactNode;
+ /** VirtualAssistant OUIA ID */
+ ouiaId?: string;
+ /** VirtualAssistant theme */
+ theme?: DefaultTheme;
}
-export const VirtualAssistant: React.FunctionComponent = ({
+const VirtualAssistantImplementation: React.FunctionComponent = ({
children,
- title = 'Virtual Assistant',
- inputPlaceholder = 'Type a message...',
+ inputPlaceholder = 'Send a message...',
message = '',
actions,
onChangeMessage,
onSendMessage,
isInputDisabled = false,
isSendButtonDisabled = false,
+ title,
+ icon = RobotIcon,
+ isFullPage = false,
+ header = null,
+ ouiaId = 'VirtualAssistant'
}: VirtualAssistantProps) => {
const classes = useStyles();
@@ -101,19 +158,21 @@ export const VirtualAssistant: React.FunctionComponent =
};
return (
-
-
-
- {title}
-
-
-
- {children}
-
-
-
+
+
+ { header ?? }
+
+ {children}
+
+
+