diff --git a/cypress/component/VirtualAssistant.cy.tsx b/cypress/component/VirtualAssistant.cy.tsx
index 0ec9221f..2d644ddf 100644
--- a/cypress/component/VirtualAssistant.cy.tsx
+++ b/cypress/component/VirtualAssistant.cy.tsx
@@ -6,7 +6,7 @@ describe('VirtualAssistant', () => {
cy.mount();
cy.get('[data-test-id="assistant-title"]').first().should('contain', 'Virtual Assistant');
- cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Type a message...');
+ cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Send a message...');
cy.get('[data-test-id="assistant-send-button"]').first().should('not.be.disabled');
})
diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
index 32feee32..19b48e58 100644
--- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
+++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx
@@ -5,10 +5,9 @@ import {
CardBody,
CardFooter,
CardHeader,
- Icon,
- InputGroup,
- InputGroupText,
+ Divider,
Flex,
+ Icon,
TextArea
} from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';
@@ -50,7 +49,7 @@ const useStyles = createUseStyles({
cardTitle: {
alignSelf: "center",
color: "var(--pf-v5-global--Color--light-100)",
- fontSize: "18px",
+ fontSize: "var(--pf-v5-global--FontSize--lg)",
fontWeight: "400",
lineHeight: "27px",
paddingLeft: "var(--pf-v5-global--spacer--sm)",
@@ -59,14 +58,14 @@ const useStyles = createUseStyles({
marginLeft: "5px",
marginTop: "4px",
fontSize: "28px",
- color: "#C9190B",
+ color: "var(--pf-v5-global--danger-color--100)",
},
titleIconWrapper: {
display: "block",
float: "left",
width: "38px",
height: "38px",
- background: "#fff",
+ background: "var(--pf-v5-global--BackgroundColor--100)",
borderRadius: "20px",
marginRight: "7px",
},
@@ -79,14 +78,40 @@ const useStyles = createUseStyles({
"&::-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: "var(--pf-v5-global--danger-color--100)",
+ },
+ "& .pf-v5-c-form-control": {
+ "--pf-v5-c-form-control--after--BorderBottomWidth": "0",
+ },
+ "& .pf-v5-svg": {
+ width: "27px",
+ height: "27px",
+ }
},
textArea: {
resize: "none",
- }
+ backgroundColor: "var(--pf-v5-global--BackgroundColor--200)",
+ borderRadius: "50px 50px 50px 50px",
+ color: "var(--pf-v5-global--Color--light-100)",
+ paddingRight: "50px",
+ paddingLeft: "20px",
+
+ },
+ sendButton: {
+ position: "absolute",
+ bottom: "22px",
+ right: "14px",
+ },
})
export interface VirtualAssistantProps {
@@ -115,7 +140,7 @@ export interface VirtualAssistantProps {
export const VirtualAssistant: React.FunctionComponent = ({
children,
title = 'Virtual Assistant',
- inputPlaceholder = 'Type a message...',
+ inputPlaceholder = 'Send a message...',
message = '',
actions,
onChangeMessage,
@@ -158,26 +183,24 @@ export const VirtualAssistant: React.FunctionComponent =
{children}
-
-
-
-
-
-
+
+
+
);
diff --git a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap
index f31a1ffe..5132e232 100644
--- a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap
+++ b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap
@@ -58,53 +58,44 @@ exports[`VirtualAssistant should render assistant 1`] = `
+
+