@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.20
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 +28 -7
- package/dist/cjs/Message/Message.js +29 -14
- package/dist/cjs/Message/Message.test.js +89 -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/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 +372 -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 +28 -7
- package/dist/esm/Message/Message.js +27 -12
- package/dist/esm/Message/Message.test.js +89 -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/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 +142 -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 +182 -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 +116 -3
- package/src/Message/Message.tsx +72 -22
- 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/TextMessage/TextMessage.scss +8 -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 +6 -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,11 @@
|
|
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';
|
10
9
|
export interface MessageAttachment {
|
11
10
|
/** Name of file attached to the message */
|
12
11
|
name: string;
|
@@ -60,10 +59,32 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
60
59
|
quickResponses?: QuickResponse[];
|
61
60
|
/** Props for quick responses container */
|
62
61
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
62
|
+
/** Props for user feedback card */
|
63
|
+
userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
|
64
|
+
/** Props for user feedback response */
|
65
|
+
userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
|
63
66
|
/** Whether avatar is round */
|
64
67
|
hasRoundAvatar?: boolean;
|
65
68
|
/** Any additional props applied to the avatar, for additional customization */
|
66
69
|
avatarProps?: Omit<AvatarProps, 'alt'>;
|
70
|
+
/** Props for QuickStart card */
|
71
|
+
quickStarts?: {
|
72
|
+
quickStart: QuickStart;
|
73
|
+
onSelectQuickStart: (id?: string) => void;
|
74
|
+
minuteWord?: string;
|
75
|
+
minuteWordPlural?: string;
|
76
|
+
prerequisiteWord?: string;
|
77
|
+
prerequisiteWordPlural?: string;
|
78
|
+
quickStartButtonAriaLabel?: string;
|
79
|
+
className?: string;
|
80
|
+
onClick?: () => void;
|
81
|
+
action?: QuickstartAction;
|
82
|
+
};
|
83
|
+
/** 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. */
|
84
|
+
isLiveRegion?: boolean;
|
85
|
+
/** Ref applied to message */
|
86
|
+
innerRef?: React.Ref<HTMLDivElement>;
|
67
87
|
}
|
68
|
-
export declare const
|
88
|
+
export declare const MessageBase: React.FunctionComponent<MessageProps>;
|
89
|
+
declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
69
90
|
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,12 @@ 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
|
+
export const MessageBase = (_a) => {
|
33
|
+
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 } = _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"]);
|
30
34
|
let avatarClassName;
|
31
35
|
if (avatarProps && 'className' in avatarProps) {
|
32
36
|
const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
|
@@ -36,7 +40,7 @@ export const Message = (_a) => {
|
|
36
40
|
// Keep timestamps consistent between Timestamp component and aria-label
|
37
41
|
const date = new Date();
|
38
42
|
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}
|
43
|
+
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
44
|
React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
|
41
45
|
React.createElement("div", { className: "pf-chatbot__message-contents" },
|
42
46
|
React.createElement("div", { className: "pf-chatbot__message-meta" },
|
@@ -47,22 +51,33 @@ export const Message = (_a) => {
|
|
47
51
|
React.createElement("div", { className: "pf-chatbot__message-response" },
|
48
52
|
React.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
49
53
|
isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
|
50
|
-
p: TextMessage,
|
51
|
-
code: (
|
54
|
+
p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
|
55
|
+
code: (_a) => {
|
56
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
57
|
+
return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
|
58
|
+
},
|
52
59
|
ul: UnorderedListMessage,
|
53
|
-
ol: OrderedListMessage,
|
54
|
-
li: ListItemMessage
|
60
|
+
ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
|
61
|
+
li: ListItemMessage,
|
62
|
+
h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
|
63
|
+
h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
|
64
|
+
h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
|
65
|
+
h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
|
66
|
+
h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
|
67
|
+
h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
|
68
|
+
blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props))
|
55
69
|
}, remarkPlugins: [remarkGfm] }, content)),
|
56
70
|
!isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
|
71
|
+
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
72
|
!isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
})))),
|
73
|
+
userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
|
74
|
+
userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
|
75
|
+
!isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
|
62
76
|
attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
|
63
77
|
var _a;
|
64
78
|
return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
65
79
|
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
80
|
})))))));
|
67
81
|
};
|
82
|
+
const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
|
68
83
|
export default Message;
|
@@ -12,6 +12,8 @@ import { render, screen } from '@testing-library/react';
|
|
12
12
|
import '@testing-library/jest-dom';
|
13
13
|
import Message from './Message';
|
14
14
|
import userEvent from '@testing-library/user-event';
|
15
|
+
import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
|
16
|
+
import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
|
15
17
|
const ALL_ACTIONS = [
|
16
18
|
{ label: /Good response/i },
|
17
19
|
{ label: /Bad response/i },
|
@@ -55,6 +57,37 @@ spec:
|
|
55
57
|
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
|
56
58
|
`;
|
57
59
|
const INLINE_CODE = `Here is an inline code - \`() => void\``;
|
60
|
+
const ORDERED_LIST_WITH_CODE = `
|
61
|
+
1. Item 1
|
62
|
+
2. Item 2
|
63
|
+
|
64
|
+
\`\`\`yaml
|
65
|
+
- name: Hello World Playbook
|
66
|
+
hosts: localhost
|
67
|
+
tasks:
|
68
|
+
- name: Print Hello World
|
69
|
+
ansible.builtin.debug:
|
70
|
+
msg: "Hello, World!"
|
71
|
+
\`\`\`
|
72
|
+
|
73
|
+
3. Item 3
|
74
|
+
`;
|
75
|
+
const HEADING = `
|
76
|
+
# h1 Heading
|
77
|
+
|
78
|
+
## h2 Heading
|
79
|
+
|
80
|
+
### h3 Heading
|
81
|
+
|
82
|
+
#### h4 Heading
|
83
|
+
|
84
|
+
##### h5 Heading
|
85
|
+
|
86
|
+
###### h6 Heading
|
87
|
+
`;
|
88
|
+
const BLOCK_QUOTES = `> Blockquotes can also be nested...
|
89
|
+
>> ...by using additional greater-than signs (>) right next to each other...
|
90
|
+
> > > ...or with spaces between each sign.`;
|
58
91
|
const checkListItemsRendered = () => {
|
59
92
|
const items = ['Item 1', 'Item 2', 'Item 3'];
|
60
93
|
expect(screen.getAllByRole('listitem')).toHaveLength(3);
|
@@ -275,6 +308,12 @@ describe('Message', () => {
|
|
275
308
|
expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
|
276
309
|
checkListItemsRendered();
|
277
310
|
});
|
311
|
+
it('should render ordered lists correctly if there is interstitial content', () => {
|
312
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
|
313
|
+
checkListItemsRendered();
|
314
|
+
const list = screen.getAllByRole('list')[1];
|
315
|
+
expect(list).toHaveAttribute('start', '3');
|
316
|
+
});
|
278
317
|
it('should render inline code', () => {
|
279
318
|
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
|
280
319
|
expect(screen.getByText(/() => void/i)).toBeTruthy();
|
@@ -284,12 +323,16 @@ describe('Message', () => {
|
|
284
323
|
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
|
285
324
|
expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
|
286
325
|
expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
|
287
|
-
expect(screen.getByText(/
|
326
|
+
expect(screen.getByText(/yaml/)).toBeTruthy();
|
327
|
+
expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
|
328
|
+
expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
|
288
329
|
expect(screen.getByText(/metadata:/i)).toBeTruthy();
|
289
|
-
expect(screen.getByText(/name
|
330
|
+
expect(screen.getByText(/name:/i)).toBeTruthy();
|
331
|
+
expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
|
290
332
|
expect(screen.getByText(/spec/i)).toBeTruthy();
|
291
333
|
expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
|
292
|
-
expect(screen.getByText(/url
|
334
|
+
expect(screen.getByText(/url:/i)).toBeTruthy();
|
335
|
+
expect(screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
|
293
336
|
});
|
294
337
|
it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
|
295
338
|
// need explicit setup since RTL stubs clipboard if you do this
|
@@ -327,4 +370,47 @@ describe('Message', () => {
|
|
327
370
|
expect(screen.getByRole('img')).toHaveClass('test');
|
328
371
|
expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
|
329
372
|
});
|
373
|
+
it('should handle QuickStart tile correctly', () => {
|
374
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
|
375
|
+
quickStart: monitorSampleAppQuickStart,
|
376
|
+
onSelectQuickStart: (id) => alert(id)
|
377
|
+
} }));
|
378
|
+
expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
|
379
|
+
expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
|
380
|
+
expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
|
381
|
+
expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
|
382
|
+
});
|
383
|
+
it('should handle click on QuickStart tile correctly', () => __awaiter(void 0, void 0, void 0, function* () {
|
384
|
+
const spy = jest.fn();
|
385
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
|
386
|
+
quickStart: monitorSampleAppQuickStart,
|
387
|
+
onSelectQuickStart: (id) => spy(id)
|
388
|
+
} }));
|
389
|
+
yield userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
|
390
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
391
|
+
expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
|
392
|
+
}));
|
393
|
+
it('should handle QuickStart tile with image correctly', () => __awaiter(void 0, void 0, void 0, function* () {
|
394
|
+
const spy = jest.fn();
|
395
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
|
396
|
+
quickStart: monitorSampleAppQuickStartWithImage,
|
397
|
+
onSelectQuickStart: (id) => spy(id)
|
398
|
+
} }));
|
399
|
+
expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
|
400
|
+
}));
|
401
|
+
it('should handle block quote correctly', () => {
|
402
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
|
403
|
+
expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
|
404
|
+
expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
|
405
|
+
expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
|
406
|
+
});
|
407
|
+
it('should handle heading correctly', () => {
|
408
|
+
render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: HEADING }));
|
409
|
+
expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
|
410
|
+
expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
|
411
|
+
expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
|
412
|
+
expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
|
413
|
+
expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
|
414
|
+
expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
|
415
|
+
});
|
330
416
|
});
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
|
3
|
+
export interface QuickResponse extends Omit<LabelProps, 'children'> {
|
4
|
+
content: string;
|
5
|
+
id: string;
|
6
|
+
onClick?: () => void;
|
7
|
+
}
|
8
|
+
export interface QuickResponseProps {
|
9
|
+
/** Props for quick responses */
|
10
|
+
quickResponses: QuickResponse[];
|
11
|
+
/** Props for quick responses container */
|
12
|
+
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
13
|
+
/** Callback when a response is clicked; used in feedback cards */
|
14
|
+
onSelect?: (id: string) => void;
|
15
|
+
}
|
16
|
+
export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
|
17
|
+
export default QuickResponse;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import React from 'react';
|
13
|
+
import { Label, LabelGroup } from '@patternfly/react-core';
|
14
|
+
import { CheckIcon } from '@patternfly/react-icons';
|
15
|
+
export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
|
16
|
+
const [selectedQuickResponse, setSelectedQuickResponse] = React.useState();
|
17
|
+
const handleQuickResponseClick = (id, onClick) => {
|
18
|
+
setSelectedQuickResponse(id);
|
19
|
+
onClick && onClick();
|
20
|
+
onSelect && onSelect(id);
|
21
|
+
};
|
22
|
+
return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
|
23
|
+
var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
|
24
|
+
return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
|
25
|
+
})));
|
26
|
+
};
|
27
|
+
export default QuickResponse;
|