From 3f99e1ba595d9c5c56a6ac3fea6728cc3aca5d44 Mon Sep 17 00:00:00 2001 From: ewinchel Date: Thu, 11 Jul 2024 10:59:19 -0400 Subject: [PATCH 01/39] fix: header styling updates --- .../src/VirtualAssistant/VirtualAssistant.tsx | 51 +++++++++++++++++-- .../src/VirtualAssistant/icon-chatbot.tsx | 37 ++++++++++++++ 2 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 packages/module/src/VirtualAssistant/icon-chatbot.tsx diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 8d9104008..060a2670d 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -6,34 +6,70 @@ import { CardFooter, CardHeader, CardTitle, + Icon, InputGroup, InputGroupText, + Flex, TextArea } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; import classnames from "clsx"; import { PaperPlaneIcon } from '@patternfly/react-icons'; +import ChatbotIcon from './icon-chatbot'; const useStyles = createUseStyles({ card: { width: "350px", height: "550px", overflow: "hidden", + borderRadius: "20px 20px 0 0", "@media screen and (max-width: 768px)": { height: "420px", width: "100%", }, }, cardHeader: { - background: "var(--pf-v5-global--BackgroundColor--dark-400)", + background: "linear-gradient(180deg, #C9190B 0%, #A30000 100%, #3D0000 100.01%)", + boxShadow: "0px 3px 5px 0px rgba(0,0,0,0.40) !important", + height: "74px", + marginBottom: "6px", + "&:first-child": { + paddingBlockStart: "10px", + paddingInlineEnd: "10px", + }, "& .pf-v5-c-button.pf-m-plain": { color: "var(--pf-v5-global--Color--light-100)", paddingLeft: "0", paddingRight: "0", + "& .pf-v5-svg": { + width: ".8em", + height: ".8em", + verticalAlign: "1em", + } } }, cardTitle: { + alignSelf: "center", color: "var(--pf-v5-global--Color--light-100)", + fontSize: "18px", + fontWeight: "400", + lineHeight: "27px", + paddingLeft: "var(--pf-v5-global--spacer--sm)", + }, + titleIcon: { + marginLeft: "8px", + marginTop: "10px", + fontSize: "28px", + color: "#C9190B", + }, + titleIconWrapper: { + display: "block", + float: "left", + width: "38px", + height: "38px", + background: "#fff", + borderRadius: "20px", + marginRight: "7px", /*space between*/ }, cardBody: { backgroundColor: "var(--pf-v5-global--BackgroundColor--100)", @@ -105,9 +141,16 @@ export const VirtualAssistant: React.FunctionComponent = - - {title} - + +
+ + + +
+
+ {title} +
+ {children} diff --git a/packages/module/src/VirtualAssistant/icon-chatbot.tsx b/packages/module/src/VirtualAssistant/icon-chatbot.tsx new file mode 100644 index 000000000..110ce5f64 --- /dev/null +++ b/packages/module/src/VirtualAssistant/icon-chatbot.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +const ChatBotIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; +export default ChatBotIcon; From 90e84999b2fc77a70fa43a58074a4c96e5a83861 Mon Sep 17 00:00:00 2001 From: epwinchell <1287144+epwinchell@users.noreply.github.com> Date: Thu, 11 Jul 2024 11:18:51 -0400 Subject: [PATCH 02/39] lint fixes --- packages/module/src/VirtualAssistant/VirtualAssistant.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 060a2670d..b777e5b63 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -5,7 +5,6 @@ import { CardBody, CardFooter, CardHeader, - CardTitle, Icon, InputGroup, InputGroupText, @@ -13,7 +12,6 @@ import { TextArea } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; -import classnames from "clsx"; import { PaperPlaneIcon } from '@patternfly/react-icons'; import ChatbotIcon from './icon-chatbot'; From 3fadcbb778000f43da2656f69f3b12920f698c0d Mon Sep 17 00:00:00 2001 From: epwinchell <1287144+epwinchell@users.noreply.github.com> Date: Fri, 12 Jul 2024 11:45:48 -0400 Subject: [PATCH 03/39] lint fix #2 --- packages/module/src/VirtualAssistant/VirtualAssistant.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index b777e5b63..965171e4e 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -67,7 +67,7 @@ const useStyles = createUseStyles({ height: "38px", background: "#fff", borderRadius: "20px", - marginRight: "7px", /*space between*/ + marginRight: "7px", }, cardBody: { backgroundColor: "var(--pf-v5-global--BackgroundColor--100)", From 8a3209925606488aadb6376937c11d55acb09997 Mon Sep 17 00:00:00 2001 From: ewinchel Date: Mon, 15 Jul 2024 12:58:44 -0400 Subject: [PATCH 04/39] fix: user message styling update --- .../src/UserMessageEntry/UserMessageEntry.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx index 551c34b2d..55b89fcd4 100644 --- a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx +++ b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx @@ -1,6 +1,5 @@ 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 { Split, SplitItem, TextContent } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; import classnames from "clsx"; @@ -9,8 +8,9 @@ const useStyles = createUseStyles({ margin: "0 0 12px 40px", }, bubbleUser: { - border: "1px solid var(--pf-v5-global--BackgroundColor--dark-400)", + backgroundColor: "var(--pf-v5-global--danger-color--100)", borderRadius: "14px", + 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", @@ -21,22 +21,17 @@ interface UserMessageEntryProps { icon?: React.ComponentClass; } -const UserMessageEntry = ({ children, icon: IconComponent = OutlinedUserIcon }: PropsWithChildren) => { +const UserMessageEntry = ({ children }: PropsWithChildren) => { const classes = useStyles(); return ( <> - + {children} - - - - - ); From a0e501af359b14dd1ff5f1b7444d1f6434ec7a9d Mon Sep 17 00:00:00 2001 From: ewinchel Date: Mon, 15 Jul 2024 12:58:44 -0400 Subject: [PATCH 05/39] fix: user message styling update --- .../examples/VirtualAssistant/VirtualAssistant.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 06c5fb0c1..3da6cd2aa 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 @@ -112,7 +112,7 @@ This is an example of a message sent by assistant with follow-up options. Follow ### User Message -This is an example of a message sent by user. Additionally, it allows for the use of a custom icon through the `icon` property. +This is an example of a message sent by user. ```js file="./UserMessage.tsx" From c89ba40b922fb430e1a0f5b5396160c96e566742 Mon Sep 17 00:00:00 2001 From: ewinchel Date: Mon, 15 Jul 2024 14:03:00 -0400 Subject: [PATCH 06/39] fix: increase default size of virtual assistant --- packages/module/src/VirtualAssistant/VirtualAssistant.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 8d9104008..aedd2cde6 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -16,8 +16,8 @@ import { PaperPlaneIcon } from '@patternfly/react-icons'; const useStyles = createUseStyles({ card: { - width: "350px", - height: "550px", + width: "400px", + height: "600px", overflow: "hidden", "@media screen and (max-width: 768px)": { height: "420px", From b273aafc8b8994f8b59fa3fb151eaa828b1270a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Josejulio=20Mart=C3=ADnez?= Date: Wed, 17 Jul 2024 11:22:01 -0600 Subject: [PATCH 07/39] fix: Using custom icon for VirtualAssistant component --- .../VirtualAssistant.test.tsx | 8 ++ .../src/VirtualAssistant/VirtualAssistant.tsx | 5 +- .../VirtualAssistant.test.tsx.snap | 89 +++++++++++++++++-- .../src/VirtualAssistant/icon-chatbot.tsx | 54 ++++++----- 4 files changed, 121 insertions(+), 35 deletions(-) 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( = ({ @@ -119,6 +121,7 @@ export const VirtualAssistant: React.FunctionComponent = onSendMessage, isInputDisabled = false, isSendButtonDisabled = false, + icon: VAIcon = undefined, }: VirtualAssistantProps) => { const classes = useStyles(); @@ -142,7 +145,7 @@ export const VirtualAssistant: React.FunctionComponent =
- + {VAIcon ? : }
diff --git a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap index 05b140308..2b68e5c70 100644 --- a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap +++ b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap @@ -16,10 +16,87 @@ exports[`VirtualAssistant should render assistant 1`] = ` class="pf-v5-c-card__header-main" >
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
Virtual Assistant @@ -28,16 +105,16 @@ exports[`VirtualAssistant should render assistant 1`] = `
+ ); From d8c13c7994ddce7e3be88083ad3cfda42f500e37 Mon Sep 17 00:00:00 2001 From: ewinchel Date: Tue, 23 Jul 2024 16:04:33 -0400 Subject: [PATCH 14/39] fix: restyle VA footer --- .../src/VirtualAssistant/VirtualAssistant.tsx | 87 ++++++++++++------- .../VirtualAssistant.test.tsx.snap | 79 ++++++++--------- 2 files changed, 90 insertions(+), 76 deletions(-) diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 32feee328..19b48e588 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 f31a1ffe1..5132e2325 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`] = `
-
+ + - From db58e907cfd64a2dfac8420cc6a62071d9c3e77e Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Sun, 18 Aug 2024 23:01:44 +0200 Subject: [PATCH 25/39] feat(inscope): Introduce citations --- .../VirtualAssistant/VirtualAssistant.md | 11 ++++- .../VirtualAssistantCitationsExample.tsx | 48 +++++++++++++++++++ packages/module/src/Citation/Citation.tsx | 45 +++++++++++++++++ packages/module/src/Citation/index.ts | 3 ++ packages/module/src/Citations/Citations.tsx | 40 ++++++++++++++++ packages/module/src/Citations/index.ts | 3 ++ packages/module/src/index.ts | 6 +++ 7 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantCitationsExample.tsx create mode 100644 packages/module/src/Citation/Citation.tsx create mode 100644 packages/module/src/Citation/index.ts create mode 100644 packages/module/src/Citations/Citations.tsx create mode 100644 packages/module/src/Citations/index.ts 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 ca253fe4b..2c68b1662 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 @@ -10,7 +10,7 @@ id: Virtual assistant source: react # If you use typescript, the name of the interface to display props for # These are found through the sourceProps function provided in patternfly-docs.source.js -propComponents: ['VirtualAssistant'] +propComponents: ['VirtualAssistant', 'VirtualAssistantAction', 'SystemMessageEntry', 'LoadingMessage', 'ConversationAlert', 'AssistantMessageEntry', 'UserMessageEntry', 'Citation', 'Citations'] sourceLink: https://github.com/patternfly/virtual-assistant/blob/main/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md --- @@ -23,6 +23,7 @@ import { GrinIcon, AngleDownIcon, UserIcon } from '@patternfly/react-icons'; import ConversationAlert from '@patternfly/virtual-assistant/dist/dynamic/ConversationAlert'; import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/AssistantMessageEntry'; import UserMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/UserMessageEntry'; +import Citations from '@patternfly/virtual-assistant/dist/dynamic/Citations'; The **virtual assistant** component renders body of the virtual assistant window. @@ -150,3 +151,11 @@ This is an example of a message sent by user. ```js file="./UserMessage.tsx" ``` + +### Citations + +You can use the citations component to render an accordion of sources as a part of the assistant response. + +```js file="./VirtualAssistantCitationsExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantCitationsExample.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantCitationsExample.tsx new file mode 100644 index 000000000..6d23a7a4f --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantCitationsExample.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; +import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/AssistantMessageEntry'; +import UserMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/UserMessageEntry'; +import Citations from '@patternfly/virtual-assistant/dist/dynamic/Citations'; + +const citations = [ + { + id: 'citation-1', + title: 'Using Flex Layout in PatternFly', + content: 'Flex layout is a powerful utility in PatternFly that allows you to easily create responsive, flexible grid layouts. It provides various options for direction, alignment, and spacing of grid items.', + ouiaId: 'ouia-citation-1', + }, + { + id: 'citation-2', + title: 'PatternFly Grid System', + content: 'The PatternFly grid system is built on a flexible 12-column layout, providing consistency and alignment for different screen sizes and device types. It helps in building complex layouts with ease.', + ouiaId: 'ouia-citation-2', + }, + { + id: 'citation-3', + title: 'Understanding PatternFly Spacing', + content: 'PatternFly provides a comprehensive set of spacing utilities to help control the margin and padding around elements. These utilities follow a consistent scale to ensure visual rhythm and harmony.', + ouiaId: 'ouia-citation-3', + }, + { + id: 'citation-4', + title: 'PatternFly Vertical Navigation', + content: 'Vertical navigation in PatternFly is a crucial layout component for creating side navigation menus. It supports collapsible sections, icons, and badges, making it ideal for hierarchical structures.', + ouiaId: 'ouia-citation-4', + }, + { + id: 'citation-5', + title: 'Responsive Design with PatternFly', + content: 'PatternFly ensures responsiveness across different devices by using fluid grids, flexible layouts, and media queries. It allows developers to build layouts that adapt to various screen sizes seamlessly.', + ouiaId: 'ouia-citation-5', + }, +]; + +export const BasicExample: React.FunctionComponent = () => ( + + Hello, where can find information about PatternFly layouts? + + Here are resources you may find useful + + + +); diff --git a/packages/module/src/Citation/Citation.tsx b/packages/module/src/Citation/Citation.tsx new file mode 100644 index 000000000..c0579e66d --- /dev/null +++ b/packages/module/src/Citation/Citation.tsx @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import { + AccordionItem, + AccordionToggle, + AccordionContent, + AccordionItemProps, +} from '@patternfly/react-core'; + +export interface CitationProps extends AccordionItemProps { + /** Citation ID passed to the toggle */ + id?: string; + /** Citation title */ + title: React.ReactNode; + /** Citation content */ + content: React.ReactNode; + /** Citation OUIA ID */ + ouiaId?: string; +} + +export const Citation:React.FunctionComponent = ({ + id, + title, + content, + ouiaId = 'Citation', + ...props +}: CitationProps) => { + const [ expanded, setExpanded ] = useState(false); + return ( + + setExpanded(!expanded)} + isExpanded={expanded} + > + {title} + + + { expanded ? content : null } + + + ); +}; + +export default Citation; diff --git a/packages/module/src/Citation/index.ts b/packages/module/src/Citation/index.ts new file mode 100644 index 000000000..e95b35087 --- /dev/null +++ b/packages/module/src/Citation/index.ts @@ -0,0 +1,3 @@ +export { default } from './Citation'; + +export * from './Citation'; \ No newline at end of file diff --git a/packages/module/src/Citations/Citations.tsx b/packages/module/src/Citations/Citations.tsx new file mode 100644 index 000000000..8c5406b1d --- /dev/null +++ b/packages/module/src/Citations/Citations.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react'; +import { + Accordion, + AccordionProps, + ExpandableSection, + ExpandableSectionProps, +} from '@patternfly/react-core'; +import Citation, { CitationProps } from '../Citation'; + +export interface CitationsProps extends Omit { + /** Citations to be displayed in an accordion */ + citations: CitationProps[]; + /** Citations OUIA ID */ + ouiaId?: string; + /** Citations accordion props */ + accordionProps?: AccordionProps; +} + +export const Citations:React.FunctionComponent = ({ + toggleText = "Citations", + citations, + ouiaId, + accordionProps, + ...props +}: CitationsProps) => { + const [ expanded, setExpanded ] = useState(false); + return ( + setExpanded(!expanded)} + toggleText={toggleText} + {...props} + > + {citations.map((citation, index) => )} + + ); +}; + +export default Citations; diff --git a/packages/module/src/Citations/index.ts b/packages/module/src/Citations/index.ts new file mode 100644 index 000000000..bae731575 --- /dev/null +++ b/packages/module/src/Citations/index.ts @@ -0,0 +1,3 @@ +export { default } from './Citations'; + +export * from './Citations'; \ No newline at end of file diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index a87ea99fa..72e850e1f 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -3,6 +3,12 @@ export { default as AssistantMessageEntry } from './AssistantMessageEntry'; export * from './AssistantMessageEntry'; +export { default as Citation } from './Citation'; +export * from './Citation'; + +export { default as Citations } from './Citations'; +export * from './Citations'; + export { default as ConversationAlert } from './ConversationAlert'; export * from './ConversationAlert'; From 4d0b9d7af1bddb24f9c92537c2a2a87e7a7172cb Mon Sep 17 00:00:00 2001 From: Filip Hlavac Date: Sun, 18 Aug 2024 23:10:01 +0200 Subject: [PATCH 26/39] feat(inscope): Enhance tests --- cypress/component/Citations.cy.tsx | 58 +++++++++++++++++++ cypress/component/VirtualAssistant.cy.tsx | 44 ++++++++++---- .../src/VirtualAssistant/VirtualAssistant.tsx | 9 ++- .../VirtualAssistant.test.tsx.snap | 8 +-- 4 files changed, 101 insertions(+), 18 deletions(-) create mode 100644 cypress/component/Citations.cy.tsx diff --git a/cypress/component/Citations.cy.tsx b/cypress/component/Citations.cy.tsx new file mode 100644 index 000000000..ad008b084 --- /dev/null +++ b/cypress/component/Citations.cy.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Citations, { CitationsProps } from '../../packages/module/src/Citations'; + +const testCitations: CitationsProps['citations'] = [ + { + id: 'citation-1', + title: 'Understanding PatternFly Layouts', + content: 'Content explaining the use of various layouts in PatternFly.', + ouiaId: 'citation-1', + }, + { + id: 'citation-2', + title: 'PatternFly Design Guidelines', + content: 'Content about design guidelines.', + ouiaId: 'citation-2', + }, + { + id: 'citation-3', + title: 'Accessibility in PatternFly', + content: 'Content about accessibility practices.', + ouiaId: 'citation-3', + }, +]; + +describe('Citations', () => { + it('renders expandable section with citations', () => { + cy.mount(); + + cy.get('[data-ouia-component-id="test-citations-expandable-section"]').should('have.length', 1); + cy.get('[data-ouia-component-id="test-citations-accordion"]').should('not.be.visible'); + }); + + it('expands and displays citations on toggle', () => { + cy.mount(); + + cy.get('[data-ouia-component-id="test-citations-expandable-section"] button').first().click(); + cy.get('[data-ouia-component-id="test-citations-accordion"]').should('be.visible'); + + cy.get('[data-ouia-component-id="citation-1-toggle"]').should('have.length', 1); + cy.get('[data-ouia-component-id="citation-2-toggle"]').should('have.length', 1); + cy.get('[data-ouia-component-id="citation-3-toggle"]').should('have.length', 1); + }); + + it('toggles citations within the accordion', () => { + cy.mount(); + + cy.get('[data-ouia-component-id="test-citations-expandable-section"] button').first().click(); + + cy.get('[data-ouia-component-id="citation-1-toggle"]').click(); + cy.get('[data-ouia-component-id="citation-1-content"]').should('be.visible'); + + cy.get('[data-ouia-component-id="citation-2-toggle"]').click(); + cy.get('[data-ouia-component-id="citation-1-content"]').should('be.visible'); + cy.get('[data-ouia-component-id="citation-1-toggle"]').click(); + cy.get('[data-ouia-component-id="citation-1-content"]').should('not.be.visible'); + cy.get('[data-ouia-component-id="citation-2-content"]').should('be.visible'); + }); +}); \ No newline at end of file diff --git a/cypress/component/VirtualAssistant.cy.tsx b/cypress/component/VirtualAssistant.cy.tsx index 2d644ddfd..9c95c5e19 100644 --- a/cypress/component/VirtualAssistant.cy.tsx +++ b/cypress/component/VirtualAssistant.cy.tsx @@ -1,34 +1,56 @@ import React from 'react'; +import { CardHeader } from '@patternfly/react-core'; import VirtualAssistant from '../../packages/module/src/VirtualAssistant'; -describe('VirtualAssistant', () => { +describe('VirtualAssistant', () => { it('renders virtual assistant body', () => { cy.mount(); - - cy.get('[data-test-id="assistant-title"]').first().should('contain', 'Virtual Assistant'); + + cy.get('[data-ouia-component-id="VirtualAssistant-title"]').first().should('contain', 'Virtual Assistant'); 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'); - }) + }); it('renders a customized title and placeholder', () => { cy.mount(); - - cy.get('[data-test-id="assistant-title"]').should('contain', 'PatternFly assistant'); + + cy.get('[data-ouia-component-id="VirtualAssistant-title"]').should('contain', 'PatternFly assistant'); cy.get('[data-test-id="assistant-text-input"]').should('have.attr', 'placeholder', 'You can ask anything in here.'); cy.get('[data-test-id="assistant-send-button"]').should('not.be.disabled'); - }) + }); it('listens to messages', () => { cy.mount(); - + cy.get('[data-test-id="assistant-text-input"]').type('my message'); cy.get('[data-test-id="assistant-send-button"]').click(); cy.get('@change').should('have.been.called'); cy.get('@send').should('have.been.called'); - }) + }); it('renders header with disabled send button', () => { cy.mount(); + cy.get('[data-test-id="assistant-send-button"]').should('be.disabled'); - }) -}) \ No newline at end of file + }); + + it('renders in full-page mode', () => { + cy.mount(); + + cy.get('[data-ouia-component-id="VirtualAssistant-title"]').should('contain', 'Full Page Assistant'); + cy.get('.fullPage').should('exist'); + }); + + it('renders a custom header', () => { + const customHeader = Custom Header; + cy.mount(); + + cy.get('[data-ouia-component-id="custom-header"]').should('contain', 'Custom Header'); + }); + + it('adjusts styles based on removeBorderRadius prop', () => { + cy.mount(); + + cy.get('[data-ouia-component-id="VirtualAssistant-body"]').should('have.css', 'border-radius', '0px'); + }); +}); \ No newline at end of file diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 7f6ed189c..91d11d2ad 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -145,6 +145,8 @@ export interface VirtualAssistantProps { customHeader?: React.ReactNode; /** Removes border radius from the component and its children */ removeBorderRadius?: boolean; + /** VirtualAssistant OUIA ID */ + ouiaId?: string; } const isReactElement = (child: React.ReactNode): child is React.ReactElement => React.isValidElement(child); @@ -162,7 +164,8 @@ export const VirtualAssistant: React.FunctionComponent = icon: VAIcon = undefined, isFullPage = false, customHeader = null, - removeBorderRadius = false + removeBorderRadius = false, + ouiaId = 'VirtualAssistant' }: VirtualAssistantProps) => { const classes = useStyles({ removeBorderRadius }); @@ -179,7 +182,7 @@ export const VirtualAssistant: React.FunctionComponent = }; return ( - + {customHeader ? customHeader : ( @@ -188,7 +191,7 @@ export const VirtualAssistant: React.FunctionComponent = {VAIcon ? : }
-
+
{title}
diff --git a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap index 5132e2325..44ec96794 100644 --- a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap +++ b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap @@ -3,8 +3,8 @@ exports[`VirtualAssistant should render assistant 1`] = `
Virtual Assistant
@@ -62,7 +62,7 @@ exports[`VirtualAssistant should render assistant 1`] = ` class="pf-v5-c-divider pf-v5-u-pb-md" />