diff --git a/package-lock.json b/package-lock.json index c56b9562..e999a563 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,10 +22,10 @@ "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@octokit/rest": "^18.0.0", - "@patternfly/documentation-framework": "^6.44.0", - "@patternfly/patternfly": "^6.5.2", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-table": "^6.5.1", + "@patternfly/documentation-framework": "^6.47.0", + "@patternfly/patternfly": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-table": "^6.6.0", "@swc/core": "1.3.96", "@testing-library/dom": "^9.3.4", "@testing-library/jest-dom": "^6.4.2", @@ -4426,9 +4426,9 @@ "link": true }, "node_modules/@patternfly/documentation-framework": { - "version": "6.44.3", - "resolved": "https://registry.npmjs.org/@patternfly/documentation-framework/-/documentation-framework-6.44.3.tgz", - "integrity": "sha512-XFfKPu4I85nLP1X0vCV2ljjc6KWEWgFxt1tbnxtAxItapDqDN87LoYraDaJjipRhqngNF6X7J9H8GovjLOarhg==", + "version": "6.47.0", + "resolved": "https://registry.npmjs.org/@patternfly/documentation-framework/-/documentation-framework-6.47.0.tgz", + "integrity": "sha512-IO2cBZtohrQCElX4UugBAS0ChdxuaGDSeQPWPtN0AUIus0V+n+CO6aIDQRL1cGjqJI7A4E9LPvhA92+ndOkDMw==", "dev": true, "license": "MIT", "dependencies": { @@ -4495,11 +4495,11 @@ "pf-docs-framework": "scripts/cli/cli.js" }, "peerDependencies": { - "@patternfly/patternfly": "^6.5.2", - "@patternfly/react-code-editor": "^6.5.1", - "@patternfly/react-core": "^6.5.1", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-table": "^6.5.1", + "@patternfly/patternfly": "^6.6.0", + "@patternfly/react-code-editor": "^6.6.0", + "@patternfly/react-core": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-table": "^6.6.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" } @@ -4714,9 +4714,9 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.5.2.tgz", - "integrity": "sha512-yZ71+1gt1VGzUN5amjDNd9NvttTnSOm9M0JeBL0YX1KaWXW1bmDPzTWEM+vQXuC4LVK0msHmR5hKB7KVpamAkA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.6.0.tgz", + "integrity": "sha512-drZ4wYFQdhYY+VxLIl8PqbYnJoEa0UrNhiUkMCKkgMVNPxmCfNa1d2eEA97tnp2aYew15jQp+MaZcQIQIG8wVg==", "dev": true, "license": "MIT" }, @@ -4761,15 +4761,15 @@ } }, "node_modules/@patternfly/react-code-editor": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-code-editor/-/react-code-editor-6.5.1.tgz", - "integrity": "sha512-Epd4iAX7/Uzo+Vl+6gX6f1BjhoX06DVV7pnZnQK4N4uknyXbfIGkmOJcE0Eq06z1cxiITV/h/JHI6WqzbOSaGA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-code-editor/-/react-code-editor-6.6.0.tgz", + "integrity": "sha512-WzR2tRI/KeAz2XZNgR2FmO8E06+n652bga0Bt/vDoNuWK3nTTCyO+1KYKRH06huGk3aIEjXDcBGCJQNt7LUJkA==", "license": "MIT", "dependencies": { "@monaco-editor/react": "^4.7.0", - "@patternfly/react-core": "^6.5.1", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-styles": "^6.5.1", + "@patternfly/react-core": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-styles": "^6.6.0", "react-dropzone": "14.3.5", "tslib": "^2.8.1" }, @@ -4796,14 +4796,14 @@ } }, "node_modules/@patternfly/react-core": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.5.1.tgz", - "integrity": "sha512-fFZ0hcIyHJO27hxbf53W3m2R11l0O9WxR7CusJXuCEaNMP31ULrhf5Pv6ROdTrrs39Kl/yPv+2QuxQfe/4e72g==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.6.0.tgz", + "integrity": "sha512-MLYPcJvdDWHZqWcvEH2QhKtCg6APRfrDJ4o192/wc2LUaf4ViGVsVLKDMbaKCamhbGauv7KpffNCSy3fjRy4Bw==", "license": "MIT", "dependencies": { - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-styles": "^6.5.1", - "@patternfly/react-tokens": "^6.5.1", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-styles": "^6.6.0", + "@patternfly/react-tokens": "^6.6.0", "focus-trap": "7.6.6", "react-dropzone": "^14.3.5", "tslib": "^2.8.1" @@ -4814,31 +4814,34 @@ } }, "node_modules/@patternfly/react-icons": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.5.1.tgz", - "integrity": "sha512-CnuPvTTs4MMWx8CAUkmnY690ouN1bbHjunsyXu3QxvGOmzbztP+wS4BdiLS8TIXOIH80Yb7KPhnF8VkA+CduOA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.6.0.tgz", + "integrity": "sha512-cDDUm4PFxqeBo4PS08xO1eFd6CMTOppn5RS4fs2hAgu/vRFkPXuL0zZCkxgRg5asd/W4olEN7WrIAbvjKbHKiQ==", "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + }, "peerDependencies": { "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" } }, "node_modules/@patternfly/react-styles": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.5.1.tgz", - "integrity": "sha512-yQMzUbbf6qYM/v3JbPvaCJTgxRbOKoEw229XZmnnM8gDvp8ECiI7LqihrAOK/NA6T6M3DDgsRMd2JurUBhPDEw==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.6.0.tgz", + "integrity": "sha512-u/HzJ48Cg6Nb12dIVbj4g31lMDVHPHVKRXkRuPBcuK6MQyAsxSfcyWVivW7Lga8TsNhFW26JWB5ay+IW5xpZ8A==", "license": "MIT" }, "node_modules/@patternfly/react-table": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.5.1.tgz", - "integrity": "sha512-JpX66ctLsg5snRRheDhuF2fHvXDG4UDKYfP5403kCAQ4Dz2dPu3PhlHi4AJol+egEBD2HfS/U37j7noQ1Y7mpA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.6.0.tgz", + "integrity": "sha512-aOVSAbtXagey1xRI8oIkK3I/csh6S00p42qqOkh6G1s5vMZM7oVQH/Nvvq8gIwx4lZ3f1m7IkdD7My8nml0Bsw==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^6.5.1", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-styles": "^6.5.1", - "@patternfly/react-tokens": "^6.5.1", + "@patternfly/react-core": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-styles": "^6.6.0", + "@patternfly/react-tokens": "^6.6.0", "lodash": "^4.18.1", "tslib": "^2.8.1" }, @@ -4848,9 +4851,9 @@ } }, "node_modules/@patternfly/react-tokens": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.5.1.tgz", - "integrity": "sha512-zwepLsIQTL0Lf4R2/PIBOk1m+pm0hYVT3lktf2H4+Y87eRIifwMRb19c+pr4hj4ckGvHs+WxwjTfTj2Qqwn5rw==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.6.0.tgz", + "integrity": "sha512-oRUFYJAM9LKYTM9YRnd7rz3wB6ZoaBWit/Eu+EK22J4o5AhZRjLt0+ewXQ7I99dBP4c8BbnPEUFnxQYAroqNLg==", "license": "MIT" }, "node_modules/@peculiar/asn1-cms": { @@ -24961,9 +24964,9 @@ } }, "node_modules/tabbable": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz", - "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.5.0.tgz", + "integrity": "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==", "license": "MIT" }, "node_modules/tapable": { @@ -28117,11 +28120,11 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@patternfly/react-code-editor": "^6.5.1", - "@patternfly/react-core": "^6.5.1", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-styles": "^6.5.1", - "@patternfly/react-table": "^6.5.1", + "@patternfly/react-code-editor": "^6.6.0", + "@patternfly/react-core": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-styles": "^6.6.0", + "@patternfly/react-table": "^6.6.0", "@segment/analytics-next": "^1.76.0", "clsx": "^2.1.0", "path-browserify": "^1.0.1", @@ -28136,8 +28139,8 @@ }, "devDependencies": { "@octokit/rest": "^18.0.0", - "@patternfly/documentation-framework": "^6.44.0", - "@patternfly/patternfly": "^6.5.2", + "@patternfly/documentation-framework": "^6.47.0", + "@patternfly/patternfly": "^6.6.0", "@patternfly/patternfly-a11y": "^5.0.0", "@types/dom-speech-recognition": "^0.0.4", "@types/react": "^18.2.61", diff --git a/package.json b/package.json index 5ba3d9a7..787f669a 100644 --- a/package.json +++ b/package.json @@ -39,10 +39,10 @@ "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@octokit/rest": "^18.0.0", - "@patternfly/documentation-framework": "^6.44.0", - "@patternfly/patternfly": "^6.5.2", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-table": "^6.5.1", + "@patternfly/documentation-framework": "^6.47.0", + "@patternfly/patternfly": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-table": "^6.6.0", "@swc/core": "1.3.96", "@testing-library/dom": "^9.3.4", "@testing-library/jest-dom": "^6.4.2", @@ -92,6 +92,5 @@ }, "dependencies": { "react-dropzone": "^14.3.8" - }, - "packageManager": "yarn@4.5.0+sha512.837566d24eec14ec0f5f1411adb544e892b3454255e61fdef8fd05f3429480102806bac7446bc9daff3896b01ae4b62d00096c7e989f1596f2af10b927532f39" + } } diff --git a/packages/module/package.json b/packages/module/package.json index 27770304..cdd88a1b 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -33,11 +33,11 @@ "tag": "prerelease" }, "dependencies": { - "@patternfly/react-code-editor": "^6.5.1", - "@patternfly/react-core": "^6.5.1", - "@patternfly/react-icons": "^6.5.1", - "@patternfly/react-styles": "^6.5.1", - "@patternfly/react-table": "^6.5.1", + "@patternfly/react-code-editor": "^6.6.0", + "@patternfly/react-core": "^6.6.0", + "@patternfly/react-icons": "^6.6.0", + "@patternfly/react-styles": "^6.6.0", + "@patternfly/react-table": "^6.6.0", "@segment/analytics-next": "^1.76.0", "clsx": "^2.1.0", "path-browserify": "^1.0.1", @@ -66,8 +66,8 @@ }, "devDependencies": { "@octokit/rest": "^18.0.0", - "@patternfly/documentation-framework": "^6.44.0", - "@patternfly/patternfly": "^6.5.2", + "@patternfly/documentation-framework": "^6.47.0", + "@patternfly/patternfly": "^6.6.0", "@patternfly/patternfly-a11y": "^5.0.0", "@types/dom-speech-recognition": "^0.0.4", "@types/react": "^18.2.61", diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx index 58a74018..78198441 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx @@ -8,7 +8,6 @@ import { Ref } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import patternflyAvatar from './patternfly_avatar.jpg'; import squareImg from './PF-social-color-square.svg'; import { AlertActionLink, @@ -290,25 +289,18 @@ _Italic text, formatted with single underscores_ return ( <> + - - - + + @@ -355,7 +346,6 @@ _Italic text, formatted with single underscores_ ( ( { @@ -36,7 +35,7 @@ const handleListen = () => { export const MessageWithCustomStructure: FunctionComponent = () => ( <> - + ( <> ( ( ( <> - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx index 39ec8a6a..efb430f0 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx @@ -1,6 +1,5 @@ import { useState, FunctionComponent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import patternflyAvatar from './patternfly_avatar.jpg'; import { Checkbox, FormGroup, Flex, FlexItem } from '@patternfly/react-core'; export const MessageWithFeedbackExample: FunctionComponent = () => { @@ -50,7 +49,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => { { { { { @@ -17,7 +16,6 @@ export const MessageWithFeedbackTimeoutExample: FunctionComponent = () => { setHasFeedback(false) } : undefined} isLiveRegion diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithIconSwapping.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithIconSwapping.tsx index 7d9cb9b1..8e3db94e 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithIconSwapping.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithIconSwapping.tsx @@ -1,13 +1,11 @@ import { FunctionComponent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import patternflyAvatar from './patternfly_avatar.jpg'; export const IconSwappingExample: FunctionComponent = () => ( ( ( { ( <> ( ( ( @@ -8,7 +7,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( alert('Clicked yes') }, @@ -18,7 +16,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( alert('Clicked Edge') }, @@ -31,7 +28,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( alert('Clicked id 1') }, @@ -44,7 +40,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( ( alert('Clicked id 1') }, @@ -67,7 +61,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( alert('Clicked id 1') }, @@ -78,7 +71,6 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( alert('Clicked yes'), icon: }, diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx index 93195ba1..4d21dc9f 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx @@ -1,6 +1,5 @@ import { FunctionComponent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import patternflyAvatar from './patternfly_avatar.jpg'; import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts'; import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts'; import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types'; @@ -10,7 +9,6 @@ export const MessageWithQuickStartExample: FunctionComponent = () => ( ( ( ( <> ( name="Bot" role="bot" showActionsOnInteraction - avatar={patternflyAvatar} content="This message has response actions visually hidden until you hover over the message via mouse, or an action would receive focus via keyboard." actions={{ // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx index 0f8dd8c2..8b310af7 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx @@ -1,6 +1,5 @@ import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import patternflyAvatar from './patternfly_avatar.jpg'; import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core'; import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'; @@ -31,7 +30,6 @@ export const MessageWithSourcesExample: FunctionComponent = () => { { { { { { { { { { @@ -19,7 +18,6 @@ export const MessageWithToolCallExample: FunctionComponent = () => { { { { { + ( }} /> ( }} /> ( }} /> { @@ -50,7 +49,6 @@ export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: true, - avatar: patternflyAvatar, timestamp: date.toLocaleString() }); setMessages(newMessages); @@ -70,7 +68,6 @@ export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: false, - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx index eb1ff5de..bac6b0cb 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx @@ -30,7 +30,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking'; import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking'; import '@patternfly/react-core/dist/styles/base.css'; @@ -108,7 +107,6 @@ const initialMessages: MessageProps[] = [ role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) }, @@ -225,7 +223,6 @@ export const ChatbotDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: true, - avatar: patternflyAvatar, timestamp: date.toLocaleString() }); setMessages(newMessages); @@ -245,7 +242,6 @@ export const ChatbotDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: false, - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) }, diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx index 01bd49d2..843b8693 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx @@ -28,7 +28,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -70,7 +69,6 @@ export const BasicDemo: FunctionComponent = () => { { role: 'bot', content: 'Great, I can reference this attachment throughout our conversation.', - avatar: patternflyAvatar, name: 'Bot' } ]; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx index b3320ec6..86d59d46 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx @@ -14,7 +14,6 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel' import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons'; import { useDropzone } from 'react-dropzone'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; import { cloneElement, FunctionComponent, isValidElement, ReactNode, useState, Children } from 'react'; @@ -79,8 +78,7 @@ const messages: MessageProps[] = [ { role: 'bot', content: 'I sure can!', - name: 'Bot', - avatar: patternflyAvatar + name: 'Bot' } ]; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx index 3245ff5b..a6ecfbf4 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx @@ -30,7 +30,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; const footnoteProps = { label: 'Always review AI-generated content prior to use.' @@ -89,7 +88,6 @@ const initialMessages: MessageProps[] = [ role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console @@ -208,7 +206,6 @@ export const ChatbotDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: true, - avatar: patternflyAvatar, timestamp: date.toLocaleString() }); setMessages(newMessages); @@ -228,7 +225,6 @@ export const ChatbotDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: false, - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx index 06db70f1..27108189 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx @@ -48,7 +48,6 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon'; import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -75,7 +74,6 @@ const initialMessages: MessageProps[] = [ role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console @@ -198,7 +196,6 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: true, timestamp: date.toLocaleString() }); @@ -213,7 +210,6 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: false, actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx index 629fa2fb..4c7c88dd 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx @@ -41,7 +41,6 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import { BarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -102,7 +101,6 @@ const initialMessages: MessageProps[] = [ role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console @@ -218,7 +216,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: true, timestamp: date.toLocaleString() }); @@ -238,7 +235,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: false, actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx index 2722d4cb..20be2b9f 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx @@ -31,7 +31,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -94,7 +93,6 @@ const initialMessages: MessageProps[] = [ role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console @@ -233,7 +231,6 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: true, - avatar: patternflyAvatar, timestamp: date.toLocaleString() }); setMessages(newMessages); @@ -255,7 +252,6 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => { content: 'API response goes here.', name: 'Bot', isLoading: false, - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx index c169b6df..a824f2f8 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx @@ -30,7 +30,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; import saveAs from 'file-saver'; @@ -182,7 +181,6 @@ export const ChatbotDemo: FunctionComponent = () => { role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { download: { @@ -193,7 +191,6 @@ export const ChatbotDemo: FunctionComponent = () => { role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString() }, selectedModel @@ -292,7 +289,6 @@ export const ChatbotDemo: FunctionComponent = () => { content: 'API response goes here', name: 'Bot', isLoading: true, - avatar: patternflyAvatar, timestamp: date.toLocaleString() }); setMessages(newMessages); @@ -308,7 +304,6 @@ export const ChatbotDemo: FunctionComponent = () => { loadedMessages.pop(); const id = generateId(); const timestamp = date.toLocaleString(); - const avatar = patternflyAvatar; const name = 'Bot'; const content = 'API response goes here'; const role = 'bot'; @@ -318,7 +313,6 @@ export const ChatbotDemo: FunctionComponent = () => { content, name, isLoading: false, - avatar, timestamp, actions: { download: { @@ -329,7 +323,6 @@ export const ChatbotDemo: FunctionComponent = () => { role, content, name, - avatar, timestamp }, selectedModel diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx index fff5e6d9..5e5cf562 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx @@ -39,7 +39,6 @@ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg'; import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; import { BarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -100,7 +99,6 @@ const initialMessages: MessageProps[] = [ role: 'bot', content: markdown, name: 'Bot', - avatar: patternflyAvatar, timestamp: date.toLocaleString(), actions: { // eslint-disable-next-line no-console @@ -209,7 +207,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: true, timestamp: date.toLocaleString() }); @@ -229,7 +226,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: false, actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx index 8acfdff4..a3201ec3 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx @@ -22,7 +22,6 @@ import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynam import Compare from '@patternfly/chatbot/dist/dynamic/Compare'; import { BarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -53,7 +52,6 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}` }); newMessages.push({ - avatar: patternflyAvatar, id: generateId(), name, role: 'bot', @@ -76,7 +74,6 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled role: 'bot', content: `API response from ${name} goes here`, name, - avatar: patternflyAvatar, isLoading: false, actions: { // eslint-disable-next-line no-console diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx index 4ee8478e..dd2289b8 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx @@ -1,6 +1,5 @@ import { FunctionComponent, useState, useRef } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -37,7 +36,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => { { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: true, timestamp: date.toLocaleString(), isPrimary: true @@ -242,7 +239,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { role: 'bot', content: 'API response goes here', name: 'Bot', - avatar: patternflyAvatar, isLoading: false, actions: { // eslint-disable-next-line no-console diff --git a/packages/module/src/Message/Message.scss b/packages/module/src/Message/Message.scss index 82249e88..b0f02c56 100644 --- a/packages/module/src/Message/Message.scss +++ b/packages/module/src/Message/Message.scss @@ -11,12 +11,17 @@ // -------------------------------------------------------------------------- &-avatar.pf-v6-c-avatar { --pf-v6-c-avatar--BorderRadius: 0; + flex-shrink: 0; position: sticky; top: var(--pf-t--global--spacer--md); object-fit: cover; pointer-events: none; // prevent dragging - interferes with FileDropZone } + &-avatar.pf-v6-c-avatar:not(.pf-m-colorful) { + --pf-v6-c-avatar--BackgroundColor: var(--pf-t--global--background--color--floating--default); + } + &-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar { &:not(.pf-m-xl, .pf-m-lg, .pf-m-md, .pf-m-sm) { --pf-v6-c-avatar--Width: 3rem; diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx index ab76ec7d..b1e22895 100644 --- a/packages/module/src/Message/Message.test.tsx +++ b/packages/module/src/Message/Message.test.tsx @@ -242,11 +242,23 @@ describe('Message', () => { ).toBeInTheDocument(); }); it('should render avatar correctly', () => { - render(); + render(); expect(screen.getByRole('img')).toHaveAttribute('src', './testImg'); }); it('should not render avatar if no avatar prop is passed', () => { + render(); + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + }); + it('should render bot avatar if no avatar prop is passed', () => { render(); + expect(screen.queryAllByRole('img', { hidden: true })[0]).toBeVisible(); + }); + it('should not render avatar if isAvatarHidden is passed', () => { + render(); + expect(screen.queryByRole('img')).not.toBeInTheDocument(); + }); + it('should not render bot avatar if isAvatarHidden is passed', () => { + render(); expect(screen.queryByRole('img')).not.toBeInTheDocument(); }); it('should render botWord correctly', () => { diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx index fab7f614..3bd3fc92 100644 --- a/packages/module/src/Message/Message.tsx +++ b/packages/module/src/Message/Message.tsx @@ -36,6 +36,7 @@ import DeepThinking, { DeepThinkingProps } from '../DeepThinking'; import ToolCall, { ToolCallProps } from '../ToolCall'; import MarkdownContent from '../MarkdownContent'; import { css } from '@patternfly/react-styles'; +import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-chatbot-icon'; export interface MessageAttachment { /** Name of file attached to the message */ @@ -84,8 +85,10 @@ export interface MessageProps extends Omit, 'role'> { extraContent?: MessageExtraContent; /** Name of the user */ name?: string; - /** Avatar src for the user */ - avatar?: string; + /** Avatar for the user. Pass a string for an image src, or a ReactNode for custom content like an svg or icon. Avatars for Messages with role="bot" are pre-defined and not customizable. */ + avatar?: string | ReactNode; + /** Flag indicating whether the avatar is hidden */ + isAvatarHidden?: boolean; /** Timestamp for the message */ timestamp?: string; /** Set this to true if message is being loaded */ @@ -214,6 +217,7 @@ export const MessageBase: FunctionComponent = ({ extraContent, name, avatar, + isAvatarHidden = false, timestamp, isLoading, actions, @@ -326,6 +330,36 @@ export const MessageBase: FunctionComponent = ({ ); }; + const avatarClasses = css( + `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}` + ); + + /* We are using an empty alt tag intentionally in order to reduce noise on screen readers */ + const botAvatar = ( + + + + ); + + let _avatar: ReactNode | undefined; + + if (!isAvatarHidden) { + if (role === 'bot') { + _avatar = botAvatar; + } else if (avatar) { + _avatar = + typeof avatar === 'string' ? ( + + ) : ( + + {avatar} + + ); + } else if (avatarProps?.initials) { + _avatar = ; + } + } + return (
= ({ ref={innerRef} {...props} > - {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */} - {avatar && ( - - )} + {_avatar && _avatar}
{isMetadataVisible && (