From 191ffbafa86e84347011033f24b21388b2b19c1c Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 6 Aug 2025 13:05:00 -0400 Subject: [PATCH 1/4] feat(docs): add ISO download card demo --- .../Customizing Messages.md | 29 +++++++ .../Customizing Messages/ISODownloadCard.tsx | 79 +++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/ISODownloadCard.tsx diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md index 47323efdc..9cae33af6 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md @@ -13,6 +13,28 @@ source: Customizing messages sortValue: 60 --- +import { FunctionComponent } from 'react'; +import Message from '@patternfly/chatbot/dist/dynamic/Message'; +import { + Button, + ButtonVariant, + Card, + CardBody, + CardFooter, + CardHeader, + CardTitle, + Content, + ContentVariants, + Flex, + FlexItem, + Icon, + Stack, + StackItem +} from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon'; +import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; + ## Modifying static content The ChatBot extension `` component transforms Markdown to PatternFly React components via [react-markdown](https://github.com/remarkjs/react-markdown), which supports both [rehype](https://unifiedjs.com/explore/package/rehype/) and [remark](https://unifiedjs.com/explore/package/remark/) plugins for further output customization. @@ -49,3 +71,10 @@ Continuing with our link modification example, let's say you also wanted to add Instead, you can utilize ChatBot features to customize dynamic content. We offer many `` props that allow you to implement custom behavior. For example, you can use `linkProps` to pass `onClick` events and other PatternFly ` + + + + 1.2 GB • Expires in 24 hours + + + + + + + Next step: After downloading, boot your bare metal hosts from this ISO image. + + + + ); + + return ( + + ); +}; From 7b4c7ac895d43b68f7f5f44defe6399445d9ddde Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 6 Aug 2025 15:00:44 -0400 Subject: [PATCH 2/4] Move ISO download card demo to Messages custom message content examples Also tweak some styling to better align the example with the design --- .../Customizing Messages.md | 29 ------- .../Customizing Messages/ISODownloadCard.tsx | 79 ------------------- .../chatbot/examples/Messages/Messages.md | 2 + .../Messages/UserMessageWithExtraContent.tsx | 71 ++++++++++++++++- 4 files changed, 72 insertions(+), 109 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/ISODownloadCard.tsx diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md index 9cae33af6..47323efdc 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md @@ -13,28 +13,6 @@ source: Customizing messages sortValue: 60 --- -import { FunctionComponent } from 'react'; -import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import { - Button, - ButtonVariant, - Card, - CardBody, - CardFooter, - CardHeader, - CardTitle, - Content, - ContentVariants, - Flex, - FlexItem, - Icon, - Stack, - StackItem -} from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon'; -import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; - ## Modifying static content The ChatBot extension `` component transforms Markdown to PatternFly React components via [react-markdown](https://github.com/remarkjs/react-markdown), which supports both [rehype](https://unifiedjs.com/explore/package/rehype/) and [remark](https://unifiedjs.com/explore/package/remark/) plugins for further output customization. @@ -71,10 +49,3 @@ Continuing with our link modification example, let's say you also wanted to add Instead, you can utilize ChatBot features to customize dynamic content. We offer many `` props that allow you to implement custom behavior. For example, you can use `linkProps` to pass `onClick` events and other PatternFly ` - - - - 1.2 GB • Expires in 24 hours - - - - - - - Next step: After downloading, boot your bare metal hosts from this ISO image. - - - - ); - - return ( - - ); -}; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md index 981464fdf..e23bfe268 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md @@ -38,6 +38,8 @@ import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon'; import patternflyAvatar from './patternfly_avatar.jpg'; import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit'; import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails'; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx index db5acf761..3f31ffec7 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx @@ -2,7 +2,25 @@ import { Fragment, FunctionComponent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; import userAvatar from './user_avatar.svg'; -import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core'; +import { + Alert, + Badge, + Button, + ButtonVariant, + Card, + CardBody, + CardFooter, + CardHeader, + CardTitle, + Content, + ContentVariants, + Flex, + FlexItem, + Icon +} from '@patternfly/react-core'; +import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; const UserActionEndContent = () => { // eslint-disable-next-line no-console @@ -36,6 +54,48 @@ const BeforeMainContent = () => ( ); +const downloadCard = ( + + + + + + + Your discovery ISO is ready + + + + + + + + To begin adding hosts to your bare metal cluster, you first need to boot them with the generated Discovery + ISO. This allows the installation program to see and manage your hardware. + + + + + + + + + + 1.2 GB • Expires in 24 hours + + + + + + + + Next step: After downloading, boot your bare metal hosts from this ISO image. + + + +); + export const UserMessageWithExtraContent: FunctionComponent = () => ( <> ( endContent: }} /> + ); From 1865a3ced34977471ae462da8e8b25fea0ebc9da Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 7 Aug 2025 09:51:51 -0400 Subject: [PATCH 3/4] Update packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../chatbot/examples/Messages/UserMessageWithExtraContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx index 3f31ffec7..92774d13e 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx @@ -114,7 +114,7 @@ export const UserMessageWithExtraContent: FunctionComponent = () => ( avatar={patternflyAvatar} name="Bot" role="bot" - content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you below" + content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you:" extraContent={{ endContent: downloadCard }} From ef7bb56d7d883d20038ecda909296003344212fc Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 12 Aug 2025 14:42:26 -0400 Subject: [PATCH 4/4] Set spacing between icon and text in card header --- .../Messages/UserMessageWithExtraContent.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx index 84469c696..d3b351434 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx @@ -75,10 +75,14 @@ const downloadCard = ( - - - - Your discovery ISO is ready + + + + + + + Your discovery ISO is ready +