@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AttachmentEdit/AttachmentEdit.test.d.ts +1 -0
- package/dist/cjs/AttachmentEdit/AttachmentEdit.test.js +52 -0
- package/dist/cjs/Chatbot/Chatbot.test.d.ts +1 -0
- package/dist/cjs/Chatbot/Chatbot.test.js +28 -0
- package/dist/cjs/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
- package/dist/cjs/ChatbotAlert/ChatbotAlert.test.js +27 -0
- package/dist/cjs/ChatbotContent/ChatbotContent.test.d.ts +1 -0
- package/dist/cjs/ChatbotContent/ChatbotContent.test.js +18 -0
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +17 -1
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -9
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +39 -3
- package/dist/cjs/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
- package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js +18 -0
- package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
- package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.js +87 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeader.test.js +18 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.js +18 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +16 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js +20 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.js +18 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +4 -2
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js +20 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +43 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +3 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +41 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.js +47 -0
- package/dist/cjs/ChatbotHeader/index.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/index.js +1 -0
- package/dist/cjs/ChatbotToggle/ChatbotToggle.js +3 -1
- package/dist/cjs/CodeModal/CodeModal.js +2 -12
- package/dist/cjs/Compare/Compare.d.ts +17 -0
- package/dist/cjs/Compare/Compare.js +50 -0
- package/dist/cjs/Compare/Compare.test.d.ts +1 -0
- package/dist/cjs/Compare/Compare.test.js +20 -0
- package/dist/cjs/Compare/index.d.ts +2 -0
- package/dist/cjs/Compare/index.js +23 -0
- package/dist/cjs/Message/ListMessage/OrderedListMessage.d.ts +1 -1
- package/dist/cjs/Message/ListMessage/OrderedListMessage.js +2 -2
- package/dist/cjs/Message/Message.d.ts +31 -7
- package/dist/cjs/Message/Message.js +47 -15
- package/dist/cjs/Message/Message.test.js +183 -3
- package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +17 -0
- package/dist/cjs/Message/QuickResponse/QuickResponse.js +34 -0
- package/dist/cjs/Message/QuickStarts/FallbackImg.d.ts +13 -0
- package/dist/cjs/Message/QuickStarts/FallbackImg.js +34 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +27 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTile.js +82 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.js +64 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.js +76 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.js +30 -0
- package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
- package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +77 -0
- package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
- package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.js +77 -0
- package/dist/cjs/Message/QuickStarts/types.d.ts +132 -0
- package/dist/cjs/Message/QuickStarts/types.js +17 -0
- package/dist/cjs/Message/TableMessage/TableMessage.d.ts +20 -0
- package/dist/cjs/Message/TableMessage/TableMessage.js +67 -0
- package/dist/cjs/Message/TableMessage/TbodyMessage.d.ts +7 -0
- package/dist/cjs/Message/TableMessage/TbodyMessage.js +33 -0
- package/dist/cjs/Message/TableMessage/TdMessage.d.ts +5 -0
- package/dist/cjs/Message/TableMessage/TdMessage.js +26 -0
- package/dist/cjs/Message/TableMessage/ThMessage.d.ts +5 -0
- package/dist/cjs/Message/TableMessage/ThMessage.js +26 -0
- package/dist/cjs/Message/TableMessage/TheadMessage.d.ts +5 -0
- package/dist/cjs/Message/TableMessage/TheadMessage.js +26 -0
- package/dist/cjs/Message/TableMessage/TrMessage.d.ts +7 -0
- package/dist/cjs/Message/TableMessage/TrMessage.js +37 -0
- package/dist/cjs/Message/TextMessage/TextMessage.d.ts +2 -1
- package/dist/cjs/Message/TextMessage/TextMessage.js +2 -2
- package/dist/cjs/Message/UserFeedback/CloseButton.d.ts +10 -0
- package/dist/cjs/Message/UserFeedback/CloseButton.js +14 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts +39 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.js +55 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +146 -0
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +117 -0
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +249 -0
- package/dist/cjs/MessageBar/AttachButton.js +4 -2
- package/dist/cjs/MessageBar/MessageBar.js +9 -12
- package/dist/cjs/MessageBar/MessageBar.test.js +4 -4
- package/dist/cjs/MessageBar/SendButton.js +3 -1
- package/dist/cjs/MessageBar/StopButton.js +3 -1
- package/dist/cjs/MessageBox/MessageBox.test.d.ts +1 -0
- package/dist/cjs/MessageBox/MessageBox.test.js +22 -0
- package/dist/cjs/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
- package/dist/cjs/PreviewAttachment/PreviewAttachment.test.js +28 -0
- package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +10 -1
- package/dist/cjs/ResponseActions/ResponseActionButton.js +28 -5
- package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts +1 -0
- package/dist/cjs/ResponseActions/ResponseActionButton.test.js +54 -0
- package/dist/cjs/ResponseActions/ResponseActions.d.ts +12 -2
- package/dist/cjs/ResponseActions/ResponseActions.js +26 -9
- package/dist/cjs/ResponseActions/ResponseActions.test.js +79 -5
- package/dist/cjs/Settings/SettingsForm.d.ts +13 -0
- package/dist/cjs/Settings/SettingsForm.js +27 -0
- package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -0
- package/dist/cjs/Settings/SettingsForm.test.js +26 -0
- package/dist/cjs/Settings/index.d.ts +2 -0
- package/dist/cjs/Settings/index.js +23 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +34 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.js +49 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.test.d.ts +1 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.test.js +79 -0
- package/dist/cjs/TermsOfUse/index.d.ts +2 -0
- package/dist/cjs/TermsOfUse/index.js +23 -0
- package/dist/cjs/index.d.ts +6 -0
- package/dist/cjs/index.js +10 -1
- package/dist/css/main.css +400 -102
- package/dist/css/main.css.map +1 -1
- package/dist/dynamic/Compare/package.json +1 -0
- package/dist/dynamic/Settings/package.json +1 -0
- package/dist/dynamic/TermsOfUse/package.json +1 -0
- package/dist/esm/AttachmentEdit/AttachmentEdit.test.d.ts +1 -0
- package/dist/esm/AttachmentEdit/AttachmentEdit.test.js +47 -0
- package/dist/esm/Chatbot/Chatbot.test.d.ts +1 -0
- package/dist/esm/Chatbot/Chatbot.test.js +23 -0
- package/dist/esm/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
- package/dist/esm/ChatbotAlert/ChatbotAlert.test.js +22 -0
- package/dist/esm/ChatbotContent/ChatbotContent.test.d.ts +1 -0
- package/dist/esm/ChatbotContent/ChatbotContent.test.js +13 -0
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +17 -1
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -9
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +39 -3
- package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
- package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +13 -0
- package/dist/esm/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
- package/dist/esm/ChatbotFooter/ChatbotFooternote.test.js +82 -0
- package/dist/esm/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeader.test.js +13 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.js +13 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +10 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +15 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.js +13 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +4 -2
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +15 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +38 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +3 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +36 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +42 -0
- package/dist/esm/ChatbotHeader/index.d.ts +1 -0
- package/dist/esm/ChatbotHeader/index.js +1 -0
- package/dist/esm/ChatbotToggle/ChatbotToggle.js +3 -1
- package/dist/esm/CodeModal/CodeModal.js +2 -12
- package/dist/esm/Compare/Compare.d.ts +17 -0
- package/dist/esm/Compare/Compare.js +43 -0
- package/dist/esm/Compare/Compare.test.d.ts +1 -0
- package/dist/esm/Compare/Compare.test.js +15 -0
- package/dist/esm/Compare/index.d.ts +2 -0
- package/dist/esm/Compare/index.js +2 -0
- package/dist/esm/Message/ListMessage/OrderedListMessage.d.ts +1 -1
- package/dist/esm/Message/ListMessage/OrderedListMessage.js +2 -2
- package/dist/esm/Message/Message.d.ts +31 -7
- package/dist/esm/Message/Message.js +45 -13
- package/dist/esm/Message/Message.test.js +183 -3
- package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +17 -0
- package/dist/esm/Message/QuickResponse/QuickResponse.js +27 -0
- package/dist/esm/Message/QuickStarts/FallbackImg.d.ts +13 -0
- package/dist/esm/Message/QuickStarts/FallbackImg.js +9 -0
- package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +27 -0
- package/dist/esm/Message/QuickStarts/QuickStartTile.js +52 -0
- package/dist/esm/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
- package/dist/esm/Message/QuickStarts/QuickStartTileDescription.js +35 -0
- package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
- package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.js +48 -0
- package/dist/esm/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
- package/dist/esm/Message/QuickStarts/QuickStartTileHeader.js +5 -0
- package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
- package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +74 -0
- package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
- package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.js +74 -0
- package/dist/esm/Message/QuickStarts/types.d.ts +132 -0
- package/dist/esm/Message/QuickStarts/types.js +14 -0
- package/dist/esm/Message/TableMessage/TableMessage.d.ts +20 -0
- package/dist/esm/Message/TableMessage/TableMessage.js +62 -0
- package/dist/esm/Message/TableMessage/TbodyMessage.d.ts +7 -0
- package/dist/esm/Message/TableMessage/TbodyMessage.js +28 -0
- package/dist/esm/Message/TableMessage/TdMessage.d.ts +5 -0
- package/dist/esm/Message/TableMessage/TdMessage.js +21 -0
- package/dist/esm/Message/TableMessage/ThMessage.d.ts +5 -0
- package/dist/esm/Message/TableMessage/ThMessage.js +21 -0
- package/dist/esm/Message/TableMessage/TheadMessage.d.ts +5 -0
- package/dist/esm/Message/TableMessage/TheadMessage.js +21 -0
- package/dist/esm/Message/TableMessage/TrMessage.d.ts +7 -0
- package/dist/esm/Message/TableMessage/TrMessage.js +32 -0
- package/dist/esm/Message/TextMessage/TextMessage.d.ts +2 -1
- package/dist/esm/Message/TextMessage/TextMessage.js +3 -3
- package/dist/esm/Message/UserFeedback/CloseButton.d.ts +10 -0
- package/dist/esm/Message/UserFeedback/CloseButton.js +9 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.d.ts +39 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.js +50 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.test.js +141 -0
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +112 -0
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +244 -0
- package/dist/esm/MessageBar/AttachButton.js +4 -2
- package/dist/esm/MessageBar/MessageBar.js +9 -12
- package/dist/esm/MessageBar/MessageBar.test.js +4 -4
- package/dist/esm/MessageBar/SendButton.js +3 -1
- package/dist/esm/MessageBar/StopButton.js +3 -1
- package/dist/esm/MessageBox/MessageBox.test.d.ts +1 -0
- package/dist/esm/MessageBox/MessageBox.test.js +17 -0
- package/dist/esm/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
- package/dist/esm/PreviewAttachment/PreviewAttachment.test.js +23 -0
- package/dist/esm/ResponseActions/ResponseActionButton.d.ts +10 -1
- package/dist/esm/ResponseActions/ResponseActionButton.js +25 -2
- package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts +1 -0
- package/dist/esm/ResponseActions/ResponseActionButton.test.js +49 -0
- package/dist/esm/ResponseActions/ResponseActions.d.ts +12 -2
- package/dist/esm/ResponseActions/ResponseActions.js +26 -9
- package/dist/esm/ResponseActions/ResponseActions.test.js +79 -5
- package/dist/esm/Settings/SettingsForm.d.ts +13 -0
- package/dist/esm/Settings/SettingsForm.js +20 -0
- package/dist/esm/Settings/SettingsForm.test.d.ts +1 -0
- package/dist/esm/Settings/SettingsForm.test.js +21 -0
- package/dist/esm/Settings/index.d.ts +2 -0
- package/dist/esm/Settings/index.js +2 -0
- package/dist/esm/TermsOfUse/TermsOfUse.d.ts +34 -0
- package/dist/esm/TermsOfUse/TermsOfUse.js +42 -0
- package/dist/esm/TermsOfUse/TermsOfUse.test.d.ts +1 -0
- package/dist/esm/TermsOfUse/TermsOfUse.test.js +74 -0
- package/dist/esm/TermsOfUse/index.d.ts +2 -0
- package/dist/esm/TermsOfUse/index.js +2 -0
- package/dist/esm/index.d.ts +6 -0
- package/dist/esm/index.js +6 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -13
- package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +5 -2
- package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +41 -4
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +168 -13
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +4 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +71 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedbackTimeout.tsx +27 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +31 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +63 -11
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +208 -12
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts +65 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx +67 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx +94 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-TermsAndConditionsHeader.svg +148 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx +289 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUse.tsx +147 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +49 -6
- package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +14 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +26 -3
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +20 -19
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +206 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +104 -0
- package/patternfly-docs/content/extensions/chatbot/img/attached-file.svg +24 -29
- package/patternfly-docs/content/extensions/chatbot/img/attachment-menu.svg +4 -4
- package/patternfly-docs/content/extensions/chatbot/img/attachment-unsent.svg +30 -57
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +5 -5
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-quickstarts-tile.svg +58 -0
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-settings.svg +83 -0
- package/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +6 -29
- package/patternfly-docs/content/extensions/chatbot/img/docked.svg +68 -49
- package/patternfly-docs/content/extensions/chatbot/img/footnote.svg +1 -1
- package/patternfly-docs/content/extensions/chatbot/img/fullscreen.svg +25 -16
- package/patternfly-docs/content/extensions/chatbot/img/listening.svg +1 -1
- package/patternfly-docs/content/extensions/chatbot/img/message-bar-elements.svg +3 -3
- package/patternfly-docs/content/extensions/chatbot/img/message-elements.svg +85 -142
- package/patternfly-docs/content/extensions/chatbot/img/overlay.svg +52 -36
- package/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg +122 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-tile.svg +62 -0
- package/patternfly-docs/content/extensions/chatbot/img/toggle-customizations.svg +12 -0
- package/src/AttachMenu/AttachMenu.scss +1 -1
- package/src/AttachmentEdit/AttachmentEdit.test.tsx +55 -0
- package/src/Chatbot/Chatbot.test.tsx +31 -0
- package/src/ChatbotAlert/ChatbotAlert.test.tsx +31 -0
- package/src/ChatbotContent/ChatbotContent.test.tsx +15 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +7 -1
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +8 -1
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +112 -3
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +41 -8
- package/src/ChatbotFooter/ChatbotFooter.scss +2 -6
- package/src/ChatbotFooter/ChatbotFooter.test.tsx +15 -0
- package/src/ChatbotFooter/ChatbotFooternote.test.tsx +84 -0
- package/src/ChatbotHeader/ChatbotHeader.scss +2 -5
- package/src/ChatbotHeader/ChatbotHeader.test.tsx +15 -0
- package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx +17 -0
- package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +20 -0
- package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +57 -0
- package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx +17 -0
- package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +19 -0
- package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +11 -2
- package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +45 -0
- package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +8 -1
- package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +43 -0
- package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +8 -1
- package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +59 -0
- package/src/ChatbotHeader/index.ts +1 -0
- package/src/ChatbotModal/ChatbotModal.scss +1 -1
- package/src/ChatbotToggle/ChatbotToggle.tsx +6 -1
- package/src/CodeModal/CodeModal.scss +9 -1
- package/src/CodeModal/CodeModal.tsx +2 -13
- package/src/Compare/Compare.scss +72 -0
- package/src/Compare/Compare.test.tsx +31 -0
- package/src/Compare/Compare.tsx +98 -0
- package/src/Compare/index.ts +2 -0
- package/src/FileDetails/FileDetails.scss +1 -1
- package/src/FileDropZone/__snapshots__/FileDropZone.test.tsx.snap +1 -1
- package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +4 -4
- package/src/Message/ListMessage/ListMessage.scss +5 -5
- package/src/Message/ListMessage/OrderedListMessage.tsx +2 -2
- package/src/Message/Message.scss +4 -26
- package/src/Message/Message.test.tsx +215 -3
- package/src/Message/Message.tsx +94 -23
- package/src/Message/MessageLoading.scss +2 -2
- package/src/Message/QuickResponse/QuickResponse.scss +33 -0
- package/src/Message/QuickResponse/QuickResponse.tsx +54 -0
- package/src/Message/QuickStarts/FallbackImg.tsx +24 -0
- package/src/Message/QuickStarts/QuickStartTile.scss +24 -0
- package/src/Message/QuickStarts/QuickStartTile.tsx +147 -0
- package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx +57 -0
- package/src/Message/QuickStarts/QuickStartTileDescription.tsx +81 -0
- package/src/Message/QuickStarts/QuickStartTileHeader.tsx +21 -0
- package/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts +75 -0
- package/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts +75 -0
- package/src/Message/QuickStarts/types.ts +154 -0
- package/src/Message/TableMessage/TableMessage.scss +23 -0
- package/src/Message/TableMessage/TableMessage.tsx +83 -0
- package/src/Message/TableMessage/TbodyMessage.tsx +20 -0
- package/src/Message/TableMessage/TdMessage.tsx +11 -0
- package/src/Message/TableMessage/ThMessage.tsx +11 -0
- package/src/Message/TableMessage/TheadMessage.tsx +11 -0
- package/src/Message/TableMessage/TrMessage.tsx +27 -0
- package/src/Message/TextMessage/TextMessage.scss +13 -11
- package/src/Message/TextMessage/TextMessage.tsx +3 -3
- package/src/Message/UserFeedback/CloseButton.tsx +21 -0
- package/src/Message/UserFeedback/UserFeedback.scss +53 -0
- package/src/Message/UserFeedback/UserFeedback.test.tsx +257 -0
- package/src/Message/UserFeedback/UserFeedback.tsx +132 -0
- package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +255 -0
- package/src/Message/UserFeedback/UserFeedbackComplete.tsx +211 -0
- package/src/MessageBar/AttachButton.scss +19 -3
- package/src/MessageBar/AttachButton.tsx +3 -1
- package/src/MessageBar/MessageBar.scss +3 -2
- package/src/MessageBar/MessageBar.test.tsx +4 -4
- package/src/MessageBar/MessageBar.tsx +9 -12
- package/src/MessageBar/MicrophoneButton.scss +8 -8
- package/src/MessageBar/SendButton.tsx +2 -0
- package/src/MessageBar/StopButton.scss +17 -3
- package/src/MessageBar/StopButton.tsx +2 -0
- package/src/MessageBox/JumpButton.scss +6 -6
- package/src/MessageBox/MessageBox.test.tsx +26 -0
- package/src/PreviewAttachment/PreviewAttachment.test.tsx +51 -0
- package/src/ResponseActions/ResponseActionButton.test.tsx +52 -0
- package/src/ResponseActions/ResponseActionButton.tsx +59 -28
- package/src/ResponseActions/ResponseActions.scss +11 -9
- package/src/ResponseActions/ResponseActions.test.tsx +103 -5
- package/src/ResponseActions/ResponseActions.tsx +80 -9
- package/src/Settings/Settings.scss +34 -0
- package/src/Settings/SettingsForm.test.tsx +28 -0
- package/src/Settings/SettingsForm.tsx +25 -0
- package/src/Settings/index.ts +3 -0
- package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss +1 -1
- package/src/SourcesCard/SourcesCard.scss +2 -2
- package/src/TermsOfUse/TermsOfUse.scss +66 -0
- package/src/TermsOfUse/TermsOfUse.test.tsx +138 -0
- package/src/TermsOfUse/TermsOfUse.tsx +117 -0
- package/src/TermsOfUse/index.ts +3 -0
- package/src/index.ts +9 -0
- package/src/main.scss +7 -4
@@ -0,0 +1,38 @@
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
8
|
+
});
|
9
|
+
};
|
10
|
+
import React from 'react';
|
11
|
+
import { DropdownItem } from '@patternfly/react-core';
|
12
|
+
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
13
|
+
import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
|
14
|
+
describe('ChatbotHeaderOptionsDropdown', () => {
|
15
|
+
const dropdownItems = (React.createElement(React.Fragment, null,
|
16
|
+
React.createElement(DropdownItem, null, "Option 1"),
|
17
|
+
React.createElement(DropdownItem, null, "Option 2"),
|
18
|
+
React.createElement(DropdownItem, null, "Option 3")));
|
19
|
+
it('should render ChatbotHeaderOptionsDropdown', () => {
|
20
|
+
render(React.createElement(ChatbotHeaderOptionsDropdown, null, dropdownItems));
|
21
|
+
expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
|
22
|
+
});
|
23
|
+
it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
|
24
|
+
const onSelect = jest.fn();
|
25
|
+
const { container } = render(React.createElement(ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
|
26
|
+
act(() => {
|
27
|
+
fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
|
28
|
+
});
|
29
|
+
yield waitFor(() => {
|
30
|
+
expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
|
31
|
+
expect(screen.getByText('Option 1'));
|
32
|
+
expect(screen.getByText('Option 2'));
|
33
|
+
expect(screen.getByText('Option 3'));
|
34
|
+
fireEvent.click(screen.getByText('Option 3'));
|
35
|
+
expect(onSelect).toHaveBeenCalled();
|
36
|
+
});
|
37
|
+
}));
|
38
|
+
});
|
@@ -15,7 +15,9 @@ export const ChatbotHeaderSelectorDropdown = (_a) => {
|
|
15
15
|
var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Chatbot selector', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
|
16
16
|
const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
|
17
17
|
const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
|
18
|
-
const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom"
|
18
|
+
const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom",
|
19
|
+
// prevents VO announcements of both aria label and tooltip
|
20
|
+
aria: "none" }, tooltipProps),
|
19
21
|
React.createElement(MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
|
20
22
|
return (React.createElement(Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
|
21
23
|
onSelect && onSelect(e, value);
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,36 @@
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
8
|
+
});
|
9
|
+
};
|
10
|
+
import React from 'react';
|
11
|
+
import { DropdownItem } from '@patternfly/react-core';
|
12
|
+
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
13
|
+
import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
|
14
|
+
describe('ChatbotHeaderSelectorDropdown', () => {
|
15
|
+
const dropdownItems = (React.createElement(React.Fragment, null,
|
16
|
+
React.createElement(DropdownItem, null, "Option 1"),
|
17
|
+
React.createElement(DropdownItem, null, "Option 2"),
|
18
|
+
React.createElement(DropdownItem, null, "Option 3")));
|
19
|
+
it('should render ChatbotHeaderSelectorDropdown', () => {
|
20
|
+
render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
|
21
|
+
expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
|
22
|
+
});
|
23
|
+
it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
|
24
|
+
const onSelect = jest.fn();
|
25
|
+
const { container } = render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
|
26
|
+
act(() => {
|
27
|
+
fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
|
28
|
+
});
|
29
|
+
yield waitFor(() => {
|
30
|
+
expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
|
31
|
+
expect(screen.getByText('Option 3'));
|
32
|
+
fireEvent.click(screen.getByText('Option 3'));
|
33
|
+
expect(onSelect).toHaveBeenCalled();
|
34
|
+
});
|
35
|
+
}));
|
36
|
+
});
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render, screen } from '@testing-library/react';
|
3
|
+
import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
|
4
|
+
import ChatbotHeaderTitle from './ChatbotHeaderTitle';
|
5
|
+
describe('ChatbotHeaderTitle', () => {
|
6
|
+
it('should render ChatbotHeaderTitle with children', () => {
|
7
|
+
render(React.createElement(ChatbotHeaderTitle, null, "Chatbot Header Title"));
|
8
|
+
expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
|
9
|
+
});
|
10
|
+
it('should render ChatbotHeaderTitle with custom classname', () => {
|
11
|
+
const { container } = render(React.createElement(ChatbotHeaderTitle, { className: "custom-header-class" }, "Chatbot Header Title"));
|
12
|
+
expect(container.querySelector('.custom-header-class')).toBeTruthy();
|
13
|
+
});
|
14
|
+
it('should render title for default display mode', () => {
|
15
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
|
16
|
+
expect(screen.getByText('Default header title')).toBeTruthy();
|
17
|
+
});
|
18
|
+
it('should render title for docked display mode', () => {
|
19
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
|
20
|
+
expect(screen.getByText('Docked header title')).toBeTruthy();
|
21
|
+
});
|
22
|
+
it('should fallback to default title when docked display mode title is not configured', () => {
|
23
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
|
24
|
+
expect(screen.getByText('Default header title')).toBeTruthy();
|
25
|
+
});
|
26
|
+
it('should render title for embedded display mode', () => {
|
27
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
|
28
|
+
expect(screen.getByText('Embedded header title')).toBeTruthy();
|
29
|
+
});
|
30
|
+
it('should fallback to default title when embedded display mode title is not configured', () => {
|
31
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
|
32
|
+
expect(screen.getByText('Default header title')).toBeTruthy();
|
33
|
+
});
|
34
|
+
it('should render title for fullscreen display mode', () => {
|
35
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
|
36
|
+
expect(screen.getByText('Fullscreen header title')).toBeTruthy();
|
37
|
+
});
|
38
|
+
it('should fallback to default title when fullscreen display mode title is not configured', () => {
|
39
|
+
render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
|
40
|
+
expect(screen.getByText('Default header title')).toBeTruthy();
|
41
|
+
});
|
42
|
+
});
|
@@ -23,7 +23,9 @@ const ChatbotToggleBase = (_a) => {
|
|
23
23
|
// Configure icon
|
24
24
|
const closedIcon = ClosedToggleIcon ? React.createElement(ClosedToggleIcon, null) : React.createElement(ChatIcon, null);
|
25
25
|
const icon = isChatbotVisible ? React.createElement(AngleDownIcon, { "data-testid": openIconTestId }) : closedIcon;
|
26
|
-
return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel
|
26
|
+
return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel,
|
27
|
+
// prevents VO announcements of both aria label and tooltip
|
28
|
+
aria: "none" }, tooltipProps),
|
27
29
|
React.createElement(Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: React.createElement(Icon, { isInline: true }, icon), ref: innerRef }, props))));
|
28
30
|
};
|
29
31
|
const ChatbotToggle = React.forwardRef((props, ref) => (React.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));
|
@@ -46,24 +46,14 @@ export const CodeModal = (_a) => {
|
|
46
46
|
setNewCode(value);
|
47
47
|
}
|
48
48
|
};
|
49
|
-
/* eslint-disable indent */
|
50
|
-
const getHeight = (displayMode) => {
|
51
|
-
switch (displayMode) {
|
52
|
-
case ChatbotDisplayMode.docked:
|
53
|
-
return '100vh';
|
54
|
-
default:
|
55
|
-
return '45vh';
|
56
|
-
}
|
57
|
-
};
|
58
|
-
/* eslint-enable indent */
|
59
49
|
const modal = (React.createElement(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
|
60
50
|
React.createElement(ModalHeader, { title: title, labelId: "code-modal-title" }),
|
61
51
|
React.createElement(ModalBody, { id: "code-modal-body" },
|
62
52
|
React.createElement(Stack, { className: "pf-chatbot__code-modal-body" },
|
63
53
|
React.createElement(StackItem, { className: "pf-chatbot__code-modal-file-details" },
|
64
54
|
React.createElement(FileDetails, { fileName: fileName })),
|
65
|
-
React.createElement(StackItem,
|
66
|
-
React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName,
|
55
|
+
React.createElement(StackItem, { className: "pf-chatbot__code-modal-body" },
|
56
|
+
React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
|
67
57
|
glyphMargin: false,
|
68
58
|
folding: false
|
69
59
|
} }, props))))),
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
2
|
+
interface CompareProps {
|
3
|
+
/** First of two children to render */
|
4
|
+
firstChild: React.ReactNode;
|
5
|
+
/** Second of two children to render */
|
6
|
+
secondChild: React.ReactNode;
|
7
|
+
/** Display name for first child, used in mobile toggle */
|
8
|
+
firstChildDisplayName: string;
|
9
|
+
/** Display name for second child, used in mobile toggle */
|
10
|
+
secondChildDisplayName: string;
|
11
|
+
/** Aria label for mobile toggle group */
|
12
|
+
toggleGroupAriaLabel?: string;
|
13
|
+
/** Callback for when mobile toggle is used */
|
14
|
+
onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
|
15
|
+
}
|
16
|
+
export declare const Compare: ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel }: PropsWithChildren<CompareProps>) => React.JSX.Element;
|
17
|
+
export default Compare;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
|
3
|
+
export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
|
4
|
+
const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
|
5
|
+
const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
|
6
|
+
const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
|
7
|
+
React.useEffect(() => {
|
8
|
+
// we want to show the first if we switch to the mobile toggle view
|
9
|
+
// and reset/switch back to normal otherwise
|
10
|
+
const updateChatbotVisibility = () => {
|
11
|
+
if (window.innerWidth >= 901) {
|
12
|
+
setShowFirstChatbot(true);
|
13
|
+
setShowSecondChatbot(true);
|
14
|
+
}
|
15
|
+
else {
|
16
|
+
setShowFirstChatbot(true);
|
17
|
+
setShowSecondChatbot(false);
|
18
|
+
setIsSelected('toggle-group-chatbot-1');
|
19
|
+
}
|
20
|
+
};
|
21
|
+
window.addEventListener('resize', updateChatbotVisibility);
|
22
|
+
return () => {
|
23
|
+
window.removeEventListener('resize', updateChatbotVisibility);
|
24
|
+
};
|
25
|
+
}, []);
|
26
|
+
// this only happens on mobile
|
27
|
+
const handleChildToggleClick = (event) => {
|
28
|
+
const id = event.currentTarget.id;
|
29
|
+
setIsSelected(id);
|
30
|
+
setShowSecondChatbot(!showSecondChatbot);
|
31
|
+
setShowFirstChatbot(!showFirstChatbot);
|
32
|
+
onToggleClick && onToggleClick(event);
|
33
|
+
};
|
34
|
+
return (React.createElement(React.Fragment, null,
|
35
|
+
React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
|
36
|
+
React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
|
37
|
+
React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
|
38
|
+
React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
|
39
|
+
React.createElement("div", { className: "pf-chatbot__compare" },
|
40
|
+
React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
|
41
|
+
React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
|
42
|
+
};
|
43
|
+
export default Compare;
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@testing-library/jest-dom';
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render, screen } from '@testing-library/react';
|
3
|
+
import '@testing-library/jest-dom';
|
4
|
+
import Compare from './Compare';
|
5
|
+
const firstChild = (React.createElement("div", null,
|
6
|
+
React.createElement("h1", null, "Child 1")));
|
7
|
+
const secondChild = (React.createElement("div", null,
|
8
|
+
React.createElement("h1", null, "Child 2")));
|
9
|
+
describe('Compare', () => {
|
10
|
+
it('should render compare correctly', () => {
|
11
|
+
render(React.createElement(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
|
12
|
+
expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
|
13
|
+
expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
|
14
|
+
});
|
15
|
+
});
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { ExtraProps } from 'react-markdown';
|
3
|
-
declare const OrderedListMessage: ({ children }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
|
3
|
+
declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
|
4
4
|
export default OrderedListMessage;
|
@@ -3,6 +3,6 @@
|
|
3
3
|
// ============================================================================
|
4
4
|
import React from 'react';
|
5
5
|
import { List, ListComponent, OrderType } from '@patternfly/react-core';
|
6
|
-
const OrderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
|
7
|
-
React.createElement(List, { component: ListComponent.ol, type: OrderType.number }, children)));
|
6
|
+
const OrderedListMessage = ({ children, start }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
|
7
|
+
React.createElement(List, { component: ListComponent.ol, type: OrderType.number, start: start }, children)));
|
8
8
|
export default OrderedListMessage;
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { AvatarProps, LabelGroupProps
|
2
|
+
import { AvatarProps, LabelGroupProps } from '@patternfly/react-core';
|
3
3
|
import { ActionProps } from '../ResponseActions/ResponseActions';
|
4
4
|
import { SourcesCardProps } from '../SourcesCard';
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
}
|
5
|
+
import { QuickStart, QuickstartAction } from './QuickStarts/types';
|
6
|
+
import QuickResponse from './QuickResponse/QuickResponse';
|
7
|
+
import { UserFeedbackProps } from './UserFeedback/UserFeedback';
|
8
|
+
import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
|
9
|
+
import { TableProps } from '@patternfly/react-table';
|
10
10
|
export interface MessageAttachment {
|
11
11
|
/** Name of file attached to the message */
|
12
12
|
name: string;
|
@@ -60,10 +60,34 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
60
60
|
quickResponses?: QuickResponse[];
|
61
61
|
/** Props for quick responses container */
|
62
62
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
63
|
+
/** Props for user feedback card */
|
64
|
+
userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
|
65
|
+
/** Props for user feedback response */
|
66
|
+
userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
|
63
67
|
/** Whether avatar is round */
|
64
68
|
hasRoundAvatar?: boolean;
|
65
69
|
/** Any additional props applied to the avatar, for additional customization */
|
66
70
|
avatarProps?: Omit<AvatarProps, 'alt'>;
|
71
|
+
/** Props for QuickStart card */
|
72
|
+
quickStarts?: {
|
73
|
+
quickStart: QuickStart;
|
74
|
+
onSelectQuickStart: (id?: string) => void;
|
75
|
+
minuteWord?: string;
|
76
|
+
minuteWordPlural?: string;
|
77
|
+
prerequisiteWord?: string;
|
78
|
+
prerequisiteWordPlural?: string;
|
79
|
+
quickStartButtonAriaLabel?: string;
|
80
|
+
className?: string;
|
81
|
+
onClick?: () => void;
|
82
|
+
action?: QuickstartAction;
|
83
|
+
};
|
84
|
+
/** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
|
85
|
+
isLiveRegion?: boolean;
|
86
|
+
/** Ref applied to message */
|
87
|
+
innerRef?: React.Ref<HTMLDivElement>;
|
88
|
+
/** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
|
89
|
+
tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
|
67
90
|
}
|
68
|
-
export declare const
|
91
|
+
export declare const MessageBase: React.FunctionComponent<MessageProps>;
|
92
|
+
declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
69
93
|
export default Message;
|
@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
15
15
|
import React from 'react';
|
16
16
|
import Markdown from 'react-markdown';
|
17
17
|
import remarkGfm from 'remark-gfm';
|
18
|
-
import { Avatar,
|
18
|
+
import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
|
19
19
|
import MessageLoading from './MessageLoading';
|
20
20
|
import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
|
21
21
|
import TextMessage from './TextMessage/TextMessage';
|
@@ -25,8 +25,18 @@ import SourcesCard from '../SourcesCard';
|
|
25
25
|
import ListItemMessage from './ListMessage/ListItemMessage';
|
26
26
|
import UnorderedListMessage from './ListMessage/UnorderedListMessage';
|
27
27
|
import OrderedListMessage from './ListMessage/OrderedListMessage';
|
28
|
-
|
29
|
-
|
28
|
+
import QuickStartTile from './QuickStarts/QuickStartTile';
|
29
|
+
import QuickResponse from './QuickResponse/QuickResponse';
|
30
|
+
import UserFeedback from './UserFeedback/UserFeedback';
|
31
|
+
import UserFeedbackComplete from './UserFeedback/UserFeedbackComplete';
|
32
|
+
import TableMessage from './TableMessage/TableMessage';
|
33
|
+
import TrMessage from './TableMessage/TrMessage';
|
34
|
+
import TdMessage from './TableMessage/TdMessage';
|
35
|
+
import TbodyMessage from './TableMessage/TbodyMessage';
|
36
|
+
import TheadMessage from './TableMessage/TheadMessage';
|
37
|
+
import ThMessage from './TableMessage/ThMessage';
|
38
|
+
export const MessageBase = (_a) => {
|
39
|
+
var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
|
30
40
|
let avatarClassName;
|
31
41
|
if (avatarProps && 'className' in avatarProps) {
|
32
42
|
const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
|
@@ -36,7 +46,7 @@ export const Message = (_a) => {
|
|
36
46
|
// Keep timestamps consistent between Timestamp component and aria-label
|
37
47
|
const date = new Date();
|
38
48
|
const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
|
39
|
-
return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}
|
49
|
+
return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
|
40
50
|
React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
|
41
51
|
React.createElement("div", { className: "pf-chatbot__message-contents" },
|
42
52
|
React.createElement("div", { className: "pf-chatbot__message-meta" },
|
@@ -47,22 +57,44 @@ export const Message = (_a) => {
|
|
47
57
|
React.createElement("div", { className: "pf-chatbot__message-response" },
|
48
58
|
React.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
49
59
|
isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
|
50
|
-
p: TextMessage,
|
51
|
-
code: (
|
52
|
-
|
53
|
-
|
54
|
-
|
60
|
+
p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
|
61
|
+
code: (_a) => {
|
62
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
63
|
+
return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
|
64
|
+
},
|
65
|
+
h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
|
66
|
+
h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
|
67
|
+
h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
|
68
|
+
h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
|
69
|
+
h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
|
70
|
+
h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
|
71
|
+
blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
|
72
|
+
ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
|
73
|
+
ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
|
74
|
+
li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
|
75
|
+
table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
|
76
|
+
tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
|
77
|
+
thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
|
78
|
+
tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
|
79
|
+
td: (props) => {
|
80
|
+
// Conflicts with Td type
|
81
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
82
|
+
const { width } = props, rest = __rest(props, ["width"]);
|
83
|
+
return React.createElement(TdMessage, Object.assign({}, rest));
|
84
|
+
},
|
85
|
+
th: (props) => React.createElement(ThMessage, Object.assign({}, props))
|
55
86
|
}, remarkPlugins: [remarkGfm] }, content)),
|
56
87
|
!isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
|
88
|
+
quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
57
89
|
!isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
})))),
|
90
|
+
userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
|
91
|
+
userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
|
92
|
+
!isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
|
62
93
|
attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
|
63
94
|
var _a;
|
64
95
|
return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
65
96
|
React.createElement(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
|
66
97
|
})))))));
|
67
98
|
};
|
99
|
+
const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
|
68
100
|
export default Message;
|