diff --git a/.github/workflows/check-pr.yml b/.github/workflows/check-pr.yml index e193a8cd..cad05a76 100644 --- a/.github/workflows/check-pr.yml +++ b/.github/workflows/check-pr.yml @@ -2,8 +2,7 @@ name: check-pr on: pull_request: branches: - - main - - v4 + - v6 jobs: call-build-lint-test-workflow: uses: ./.github/workflows/build-lint-test.yml diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml index 04f9ddfe..8a2a6ae5 100644 --- a/.github/workflows/pr-preview.yml +++ b/.github/workflows/pr-preview.yml @@ -17,10 +17,10 @@ jobs: git checkout tmp - run: | - git rev-parse origin/main + git rev-parse origin/v6 git rev-parse HEAD - git rev-parse origin/main..HEAD - git log origin/main..HEAD --format="%b" + git rev-parse origin/v6..HEAD + git log origin/v6..HEAD --format="%b" # Yes, we really want to checkout the PR # Injected by generate-workflows.js @@ -52,4 +52,4 @@ jobs: name: a11y tests - run: node .github/upload-preview.js packages/module/coverage name: Upload a11y report - if: always() \ No newline at end of file + if: always() diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index eee03e2d..fad974ac 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -2,8 +2,7 @@ name: release on: push: branches: - - main - - v4 + - v6 jobs: call-build-lint-test-workflow: uses: ./.github/workflows/build-lint-test.yml diff --git a/packages/module/package.json b/packages/module/package.json index a151dba0..988f61dd 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -28,11 +28,11 @@ "homepage": "https://github.com/patternfly/virtual-assistant#readme", "publishConfig": { "access": "public", - "tag": "prerelease" + "tag": "alpha" }, "dependencies": { - "@patternfly/react-core": "^5.1.2", - "@patternfly/react-icons": "^5.1.2", + "@patternfly/react-core": "6.0.0-alpha.79", + "@patternfly/react-icons": "6.0.0-alpha.29", "react-jss": "^10.10.0", "react-markdown": "^9.0.1", "clsx": "^2.1.0" @@ -43,8 +43,10 @@ }, "devDependencies": { "@patternfly/patternfly-a11y": "^4.3.1", - "@patternfly/documentation-framework": "^2.0.0-alpha.57", - "@patternfly/patternfly": "^5.1.0", + "@patternfly/documentation-framework": "6.0.0-alpha.54", + "@patternfly/react-table": "6.0.0-alpha.80", + "@patternfly/react-code-editor": "6.0.0-alpha.79", + "@patternfly/patternfly": "6.0.0-alpha.181", "@types/react": "^18.2.61", "@types/react-dom": "^18.2.19", "@types/react-router-dom": "^5.3.3", diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md index 77806080..846e59d6 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/about-virtual-assistant.md @@ -1,6 +1,6 @@ --- section: extensions -subsection: Virtual assistant +subsection: Chat bots / AI id: About virtual assistant sortValue: 1 --- @@ -12,3 +12,5 @@ Virtual assistant lives in its own package [`@patternfly/virtual-assistant`](htt The virtual assistant extension contains implementation of the react virtual assistant. If you notice a bug or have a suggestion for the virtual assistant, feel free to file an issue in our [GitHub repository](https://github.com/patternfly/virtual-assistant/issues)! Please make sure to check if there is already a pre-existing issue before creating a new issue. + +To view a working demo of the virtual assistant, view them under the react-demos tab of [Virtual assistant docs](/extensions/chat-bots--ai/virtual-assistant/react-demos). diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlert.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlert.md new file mode 100644 index 00000000..3f1c86f3 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlert.md @@ -0,0 +1,27 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Chat bots / AI +# Sidenav secondary level section +# should be the same for all markdown files +id: Conversation alert +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +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: ['ConversationAlert'] +sourceLink: https://github.com/patternfly/virtual-assistant/blob/main/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlert.md +--- + +import ConversationAlert from '@patternfly/virtual-assistant/dist/dynamic/ConversationAlert'; + +The **conversation alert** component renders an alert to be used in the body of the virtual assistant. + +### Conversation Alert + +You can configure a custom title and variant input value using `title` and `variant` props. + +```js file="./ConversationAlertBasic.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlertBasic.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlertBasic.tsx new file mode 100644 index 00000000..a017beff --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ConversationAlert/ConversationAlertBasic.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import ConversationAlert from '@patternfly/virtual-assistant/dist/esm/ConversationAlert' + +export const BasicExample: React.FunctionComponent = () => ( + + You can add any body content + +); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/AssistantMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessage.tsx similarity index 79% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/AssistantMessage.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessage.tsx index 3a48b928..919a96cb 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/AssistantMessage.tsx +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessage.tsx @@ -1,15 +1,14 @@ import React from 'react'; -import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/AssistantMessageEntry'; import GrinIcon from '@patternfly/react-icons/dist/js/icons/bacon-icon'; export const AssistantMessage: React.FunctionComponent = () => ( - + <> How may I help you today? Do you have some question for me? Assistant message example with custom icon - + ); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessageWithFollowup.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessageWithFollowup.tsx new file mode 100644 index 00000000..7443a621 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/AssistantMessageWithFollowup.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/AssistantMessageEntry'; + +export const AssistantMessage: React.FunctionComponent = () => ( + {console.log('This is an example of onClick event')} } }, { title: "Option #2" }, { title: "Option #3" } ]} + > + How may I help you today? Do you have some question for me? + +); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md new file mode 100644 index 00000000..e15e8bcd --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md @@ -0,0 +1,65 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Chat bots / AI +# Sidenav secondary level section +# should be the same for all markdown files +id: Messages +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +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: ['UserMessageEntry', 'AssistantMessageEntry', 'LoadingMessage', 'SystemMessageEntry',] +sourceLink: https://github.com/patternfly/virtual-assistant/blob/main/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/Messages.md +--- + +import SystemMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/SystemMessageEntry'; +import LoadingMessage from '@patternfly/virtual-assistant/dist/dynamic/LoadingMessage'; +import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/AssistantMessageEntry'; +import UserMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/UserMessageEntry'; +import { GrinIcon } from '@patternfly/react-icons'; +import { AngleDownIcon } from '@patternfly/react-icons'; + + +### System Message Entry + +The `SystemMessageEntry` component provides a simple system message with an option for text links. + + +```js file="./VirtualAssistantSystemMessageEntry.tsx" + +``` + +### Loading Messages + +The `LoadingMessage` component shows a typing indicator for messages still being processed, introducing an intentional delay to simulate a smoother flow of conversation. Additionally, it allows for the use of a custom icon through the `icon` property. + + +```js file="./VirtualAssistantLoadingMessage.tsx" + +``` + +### Assistant Message + +This is an example of a message sent by assistant. Additionally, it allows for the use of a custom icon through the `icon` property. + +```js file="./AssistantMessage.tsx" + +``` + +### Assistant Message with follow-up options + +This is an example of a message sent by assistant with follow-up options. Follow-up options are defined within `options` property. + +```js file="./AssistantMessageWithFollowup.tsx" + +``` + +### 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. + +```js file="./UserMessage.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/UserMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx similarity index 75% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/UserMessage.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx index 57cda4aa..520525fa 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/UserMessage.tsx +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/UserMessage.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; import UserMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/UserMessageEntry'; import GrinIcon from '@patternfly/react-icons/dist/js/icons/bacon-icon'; export const UserMessage: React.FunctionComponent = () => ( - + <> Hello, can you help me? User message example with custom icon - + ); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantLoadingMessage.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantLoadingMessage.tsx similarity index 69% rename from packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantLoadingMessage.tsx rename to packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantLoadingMessage.tsx index c032b755..8a604c03 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantLoadingMessage.tsx +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantLoadingMessage.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; import LoadingMessage from '@patternfly/virtual-assistant/dist/esm/LoadingMessage' import GrinIcon from '@patternfly/react-icons/dist/js/icons/bacon-icon'; export const BasicExample: React.FunctionComponent = () => ( - + <> - + ); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantSystemMessageEntry.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantSystemMessageEntry.tsx new file mode 100644 index 00000000..9213a96d --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Messages/VirtualAssistantSystemMessageEntry.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMessageEntry' + +export const BasicExample: React.FunctionComponent = () => ( + End of conversation. +); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/AssistantMessageWithFollowup.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/AssistantMessageWithFollowup.tsx deleted file mode 100644 index 969be110..00000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/AssistantMessageWithFollowup.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; -import AssistantMessageEntry from '@patternfly/virtual-assistant/dist/dynamic/AssistantMessageEntry'; - -export const AssistantMessage: React.FunctionComponent = () => ( - - {console.log('This is an example of onClick event')} } }, { title: "Option #2" }, { title: "Option #3" } ]} - > - How may I help you today? Do you have some question for me? - - -); 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 06c5fb0c..df83b962 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 @@ -2,7 +2,7 @@ # Sidenav top-level section # should be the same for all markdown files section: extensions -subsection: Virtual assistant +subsection: Chat bots / AI # Sidenav secondary level section # should be the same for all markdown files id: Virtual assistant @@ -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'] sourceLink: https://github.com/patternfly/virtual-assistant/blob/main/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md --- @@ -67,53 +67,3 @@ Custom actions can be added to the assistant body using the `actions` property. ```js file="./VirtualAssistantWithActions.tsx" ``` - -### Conversation Alert - -You can configure a custom title and variant input value using `title` and `variant` props. - -```js file="./VirtualAssistantConversationAlert.tsx" - -``` - -### System Message Entry - -The `SystemMessageEntry` component provides a simple system message with an option for text links. - - -```js file="./VirtualAssistantSystemMessageEntry.tsx" - -``` - -### Loading Messages - -The `LoadingMessage` component shows a typing indicator for messages still being processed, introducing an intentional delay to simulate a smoother flow of conversation. Additionally, it allows for the use of a custom icon through the `icon` property. - - -```js file="./VirtualAssistantLoadingMessage.tsx" - -``` - -### Assistant Message - -This is an example of a message sent by assistant. Additionally, it allows for the use of a custom icon through the `icon` property. - -```js file="./AssistantMessage.tsx" - -``` - -### Assistant Message with follow-up options - -This is an example of a message sent by assistant with follow-up options. Follow-up options are defined within `options` property. - -```js file="./AssistantMessageWithFollowup.tsx" - -``` - -### 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. - -```js file="./UserMessage.tsx" - -``` diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantConversationAlert.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantConversationAlert.tsx deleted file mode 100644 index 0420b289..00000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantConversationAlert.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; -import ConversationAlert from '@patternfly/virtual-assistant/dist/esm/ConversationAlert' - -export const BasicExample: React.FunctionComponent = () => ( - - - You can add any body content - - -); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantSystemMessageEntry.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantSystemMessageEntry.tsx deleted file mode 100644 index 5e571c63..00000000 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistantSystemMessageEntry.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; -import SystemMessageEntry from '@patternfly/virtual-assistant/dist/esm/SystemMessageEntry' - -export const BasicExample: React.FunctionComponent = () => ( - - End of conversation. - -); \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/VirtualAssistantDemo.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/VirtualAssistantDemo.tsx new file mode 100644 index 00000000..39f46cf5 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/VirtualAssistantDemo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; + +export const BasicDemo: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/demos.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/demos.md new file mode 100644 index 00000000..e0abd8d1 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/demos.md @@ -0,0 +1,25 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Chat bots / AI +# Sidenav secondary level section +# should be the same for all markdown files +id: Virtual assistant +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react-demos +sourceLink: https://github.com/patternfly/virtual-assistant/blob/main/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/demos.md +--- + +import VirtualAssistant from '@patternfly/virtual-assistant/dist/dynamic/VirtualAssistant'; + +# Demos + +### Basic example + +A blank example of the virtual assistant body. + +```js file="./VirtualAssistantDemo.tsx" isFullscreen + +``` + diff --git a/packages/module/release.config.js b/packages/module/release.config.js index 87f67383..f59985c2 100644 --- a/packages/module/release.config.js +++ b/packages/module/release.config.js @@ -1,5 +1,9 @@ module.exports = { - branches: [ 'do-not-delete', { name: 'main', channel: 'prerelease', prerelease: 'prerelease' } ], + branches: [ + 'do-not-delete', + { name: 'main', channel: 'prerelease', prerelease: 'prerelease' }, + { name: 'v6', channel: 'alpha', prerelease: 'alpha' } + ], analyzeCommits: { preset: 'angular' }, @@ -10,5 +14,5 @@ module.exports = { '@semantic-release/npm' ], tagFormat: 'prerelease-v${version}', - dryRun: false -}; \ No newline at end of file + dryRun: true +}; diff --git a/packages/module/src/AssistantMessageEntry/AssistantMessageEntry.tsx b/packages/module/src/AssistantMessageEntry/AssistantMessageEntry.tsx index b1989ec1..089a5b59 100644 --- a/packages/module/src/AssistantMessageEntry/AssistantMessageEntry.tsx +++ b/packages/module/src/AssistantMessageEntry/AssistantMessageEntry.tsx @@ -1,22 +1,8 @@ import React, { PropsWithChildren } from 'react'; import { Icon, Label, Split, SplitItem, TextContent, LabelProps } 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: { - 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", - } -}) - interface AssistantMessageEntryProps { options?: { title: React.ReactNode; @@ -25,36 +11,33 @@ interface AssistantMessageEntryProps { icon?: React.ComponentType; } -export const AssistantMessageEntry = ({ children, options, icon: IconComponent = RobotIcon }: PropsWithChildren) => { - const classes = useStyles(); - return ( -
- - - - - - - - - {children} - +export const AssistantMessageEntry = ({ children, options, icon: IconComponent = RobotIcon }: PropsWithChildren) => ( +
+ + + + + + + + + {children} + + + + {options ? ( + + + {options.map((option, index) => ( + + ))} - {options ? ( - - - {options.map((option, index) => ( - - ))} - - - ) : null - } -
- ); -}; + ) : null + } +
+); -export default AssistantMessageEntry; \ No newline at end of file +export default AssistantMessageEntry; diff --git a/packages/module/src/ConversationAlert/ConversationAlert.tsx b/packages/module/src/ConversationAlert/ConversationAlert.tsx index f25d36fd..bc77e840 100644 --- a/packages/module/src/ConversationAlert/ConversationAlert.tsx +++ b/packages/module/src/ConversationAlert/ConversationAlert.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Alert, TextContent } from '@patternfly/react-core'; -import { createUseStyles } from 'react-jss'; export interface ConversationAlertProps { /** Content for conversation alert */ @@ -11,32 +10,16 @@ export interface ConversationAlertProps { children?: React.ReactNode; } -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 ConversationAlert:React.FunctionComponent = ({ variant= 'info', title, children = '' -}: ConversationAlertProps) => { - const classes = useStyles(); - return ( - - - {children} - - - ); -}; +}: ConversationAlertProps) => ( + + + {children} + + +); export default ConversationAlert; diff --git a/packages/module/src/LoadingMessage/LoadingMessage.tsx b/packages/module/src/LoadingMessage/LoadingMessage.tsx index ded2532b..360cbc8f 100644 --- a/packages/module/src/LoadingMessage/LoadingMessage.tsx +++ b/packages/module/src/LoadingMessage/LoadingMessage.tsx @@ -1,85 +1,27 @@ import React 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: { - 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 interface LoadingMessageProps { icon?: React.ComponentType; } -export const LoadingMessage: React.FunctionComponent = ({ icon: IconComponent = RobotIcon }) => { - const classes = useStyles(); - return ( - - - - - - - -
-
-
-
-
- - - ); -}; +export const LoadingMessage: React.FunctionComponent = ({ icon: IconComponent = RobotIcon }) => ( + + + + + + + +
+
.
+
.
+
.
+
+ + +); export default LoadingMessage; diff --git a/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx b/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx index b0e0c413..cbee48f8 100644 --- a/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx +++ b/packages/module/src/SystemMessageEntry/SystemMessageEntry.tsx @@ -1,28 +1,17 @@ import React from 'react'; import { Text, TextContent, TextVariants } from '@patternfly/react-core'; -import { createUseStyles } from 'react-jss'; export interface SystemMessageEntryProps { /** Message rendered within the system message entry */ children: React.ReactNode; } -const useStyles = createUseStyles({ - systemMessageText: { - paddingBottom: "var(--pf-v5-global--spacer--md)", - textAlign: "center", - } -}) +export const SystemMessageEntry: React.FunctionComponent = (props) => ( + + + {props.children} + + +); -export const SystemMessageEntry: React.FunctionComponent = (props) => { - const classes = useStyles(); - return ( - - - {props.children} - - - ); -}; - -export default SystemMessageEntry; \ No newline at end of file +export default SystemMessageEntry; diff --git a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx index 5939f908..fe40207c 100644 --- a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx +++ b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx @@ -1,45 +1,26 @@ 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"; - -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", - } -}) interface UserMessageEntryProps { icon?: React.ComponentType; } -const UserMessageEntry = ({ children, icon: IconComponent = OutlinedUserIcon }: PropsWithChildren) => { - const classes = useStyles(); - - return ( - <> - - - - {children} - - - - - - - - - - ); -}; +const UserMessageEntry = ({ children, icon: IconComponent = OutlinedUserIcon }: PropsWithChildren) => ( + <> + + + + {children} + + + + + + + + + +); -export default UserMessageEntry; \ No newline at end of file +export default UserMessageEntry; diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 19a906e2..e7964270 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -10,50 +10,8 @@ import { InputGroupText, TextArea } from '@patternfly/react-core'; -import { createUseStyles } from 'react-jss'; -import classnames from "clsx"; import { PaperPlaneIcon } from '@patternfly/react-icons'; -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)", - "& .pf-v5-c-button.pf-m-plain": { - color: "var(--pf-v5-global--Color--light-100)", - paddingLeft: "0", - paddingRight: "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", - } -}) - export interface VirtualAssistantProps { /** Messages rendered within the assistant */ children?: React.ReactNode; @@ -86,7 +44,6 @@ export const VirtualAssistant: React.FunctionComponent = isInputDisabled = false, isSendButtonDisabled = false, }: VirtualAssistantProps) => { - const classes = useStyles(); const handleKeyPress: KeyboardEventHandler = (event) => { if (event.key === 'Enter' || event.keyCode === 13) { @@ -101,21 +58,20 @@ export const VirtualAssistant: React.FunctionComponent = }; return ( - - + - + {title} - + {children} - - + +