@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0
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.d.ts +2 -1
- package/dist/cjs/Chatbot/Chatbot.js +1 -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.d.ts +3 -3
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +27 -4
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +24 -12
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +99 -3
- package/dist/cjs/ChatbotConversationHistoryNav/EmptyState.d.ts +11 -0
- package/dist/cjs/ChatbotConversationHistoryNav/EmptyState.js +29 -0
- package/dist/cjs/ChatbotConversationHistoryNav/LoadingState.d.ts +4 -0
- package/dist/cjs/ChatbotConversationHistoryNav/LoadingState.js +45 -0
- 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/ChatbotFooter/ChatbotFootnote.d.ts +1 -1
- package/dist/cjs/ChatbotFooter/ChatbotFootnote.js +1 -1
- 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.js +3 -1
- 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.js +3 -1
- 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 +6 -4
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +41 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.js +55 -0
- package/dist/cjs/ChatbotToggle/ChatbotToggle.js +3 -1
- package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +19 -11
- 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/ErrorMessage/ErrorMessage.d.ts +4 -0
- package/dist/cjs/Message/ErrorMessage/ErrorMessage.js +26 -0
- package/dist/cjs/Message/ImageMessage/ImageMessage.d.ts +4 -0
- package/dist/cjs/Message/ImageMessage/ImageMessage.js +25 -0
- package/dist/cjs/Message/LinkMessage/LinkMessage.d.ts +4 -0
- package/dist/cjs/Message/LinkMessage/LinkMessage.js +30 -0
- package/dist/cjs/Message/Message.d.ts +49 -8
- package/dist/cjs/Message/Message.js +70 -18
- package/dist/cjs/Message/Message.test.js +269 -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 +54 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +133 -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.d.ts +11 -4
- package/dist/cjs/MessageBar/MessageBar.js +127 -46
- package/dist/cjs/MessageBar/MessageBar.test.js +12 -4
- package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -1
- 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 +4 -1
- package/dist/cjs/ResponseActions/ResponseActionButton.js +21 -6
- package/dist/cjs/ResponseActions/ResponseActions.d.ts +8 -2
- package/dist/cjs/ResponseActions/ResponseActions.js +7 -7
- package/dist/cjs/ResponseActions/ResponseActions.test.js +2 -2
- package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -0
- package/dist/cjs/Settings/SettingsForm.test.js +26 -0
- package/dist/cjs/__mocks__/rehype-external-links.d.ts +2 -0
- package/dist/cjs/__mocks__/rehype-external-links.js +4 -0
- package/dist/cjs/__mocks__/rehype-sanitize.d.ts +2 -0
- package/dist/cjs/__mocks__/rehype-sanitize.js +4 -0
- package/dist/cjs/__mocks__/rehype-unwrap-images.d.ts +2 -0
- package/dist/cjs/__mocks__/rehype-unwrap-images.js +4 -0
- package/dist/cjs/index.d.ts +4 -0
- package/dist/cjs/index.js +7 -1
- package/dist/cjs/tracking/console_tracking_provider.d.ts +10 -0
- package/dist/cjs/tracking/console_tracking_provider.js +27 -0
- package/dist/cjs/tracking/index.d.ts +2 -0
- package/dist/cjs/tracking/index.js +23 -0
- package/dist/cjs/tracking/posthog_tracking_provider.d.ts +9 -0
- package/dist/cjs/tracking/posthog_tracking_provider.js +37 -0
- package/dist/cjs/tracking/segment_tracking_provider.d.ts +10 -0
- package/dist/cjs/tracking/segment_tracking_provider.js +50 -0
- package/dist/cjs/tracking/trackingProviderProxy.d.ts +9 -0
- package/dist/cjs/tracking/trackingProviderProxy.js +24 -0
- package/dist/cjs/tracking/tracking_api.d.ts +8 -0
- package/dist/cjs/tracking/tracking_api.js +2 -0
- package/dist/cjs/tracking/tracking_registry.d.ts +4 -0
- package/dist/cjs/tracking/tracking_registry.js +33 -0
- package/dist/cjs/tracking/tracking_spi.d.ts +9 -0
- package/dist/cjs/tracking/tracking_spi.js +2 -0
- package/dist/cjs/tracking/umami_tracking_provider.d.ts +14 -0
- package/dist/cjs/tracking/umami_tracking_provider.js +44 -0
- package/dist/css/main.css +438 -147
- package/dist/css/main.css.map +1 -1
- package/dist/dynamic/Compare/package.json +1 -0
- package/dist/dynamic/tracking/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.d.ts +2 -1
- package/dist/esm/Chatbot/Chatbot.js +1 -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.d.ts +3 -3
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +27 -4
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +24 -12
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +99 -3
- package/dist/esm/ChatbotConversationHistoryNav/EmptyState.d.ts +11 -0
- package/dist/esm/ChatbotConversationHistoryNav/EmptyState.js +22 -0
- package/dist/esm/ChatbotConversationHistoryNav/LoadingState.d.ts +4 -0
- package/dist/esm/ChatbotConversationHistoryNav/LoadingState.js +38 -0
- 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/ChatbotFooter/ChatbotFootnote.d.ts +1 -1
- package/dist/esm/ChatbotFooter/ChatbotFootnote.js +1 -1
- 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.js +3 -1
- 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.js +3 -1
- 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 +6 -4
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +36 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +50 -0
- package/dist/esm/ChatbotToggle/ChatbotToggle.js +3 -1
- package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +19 -11
- 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/ErrorMessage/ErrorMessage.d.ts +4 -0
- package/dist/esm/Message/ErrorMessage/ErrorMessage.js +21 -0
- package/dist/esm/Message/ImageMessage/ImageMessage.d.ts +4 -0
- package/dist/esm/Message/ImageMessage/ImageMessage.js +20 -0
- package/dist/esm/Message/LinkMessage/LinkMessage.d.ts +4 -0
- package/dist/esm/Message/LinkMessage/LinkMessage.js +25 -0
- package/dist/esm/Message/Message.d.ts +49 -8
- package/dist/esm/Message/Message.js +68 -16
- package/dist/esm/Message/Message.test.js +269 -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 +49 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.test.js +128 -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.d.ts +11 -4
- package/dist/esm/MessageBar/MessageBar.js +127 -46
- package/dist/esm/MessageBar/MessageBar.test.js +12 -4
- package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -1
- 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 +4 -1
- package/dist/esm/ResponseActions/ResponseActionButton.js +18 -3
- package/dist/esm/ResponseActions/ResponseActions.d.ts +8 -2
- package/dist/esm/ResponseActions/ResponseActions.js +7 -7
- package/dist/esm/ResponseActions/ResponseActions.test.js +2 -2
- package/dist/esm/Settings/SettingsForm.test.d.ts +1 -0
- package/dist/esm/Settings/SettingsForm.test.js +21 -0
- package/dist/esm/__mocks__/rehype-external-links.d.ts +2 -0
- package/dist/esm/__mocks__/rehype-external-links.js +2 -0
- package/dist/esm/__mocks__/rehype-sanitize.d.ts +2 -0
- package/dist/esm/__mocks__/rehype-sanitize.js +2 -0
- package/dist/esm/__mocks__/rehype-unwrap-images.d.ts +2 -0
- package/dist/esm/__mocks__/rehype-unwrap-images.js +2 -0
- package/dist/esm/index.d.ts +4 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/tracking/console_tracking_provider.d.ts +10 -0
- package/dist/esm/tracking/console_tracking_provider.js +23 -0
- package/dist/esm/tracking/index.d.ts +2 -0
- package/dist/esm/tracking/index.js +2 -0
- package/dist/esm/tracking/posthog_tracking_provider.d.ts +9 -0
- package/dist/esm/tracking/posthog_tracking_provider.js +33 -0
- package/dist/esm/tracking/segment_tracking_provider.d.ts +10 -0
- package/dist/esm/tracking/segment_tracking_provider.js +46 -0
- package/dist/esm/tracking/trackingProviderProxy.d.ts +9 -0
- package/dist/esm/tracking/trackingProviderProxy.js +22 -0
- package/dist/esm/tracking/tracking_api.d.ts +8 -0
- package/dist/esm/tracking/tracking_api.js +1 -0
- package/dist/esm/tracking/tracking_registry.d.ts +4 -0
- package/dist/esm/tracking/tracking_registry.js +26 -0
- package/dist/esm/tracking/tracking_spi.d.ts +9 -0
- package/dist/esm/tracking/tracking_spi.js +1 -0
- package/dist/esm/tracking/umami_tracking_provider.d.ts +14 -0
- package/dist/esm/tracking/umami_tracking_provider.js +40 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -9
- package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +8 -2
- package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +192 -15
- package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +219 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentError.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +214 -12
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDropZone.tsx +2 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithAttachment.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +1 -1
- 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/MessageWithQuickResponses.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +31 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +61 -9
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +244 -14
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +54 -0
- 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 +5 -5
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +36 -3
- 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/ChatbotWelcomeInteraction.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomePrompt.tsx +7 -7
- package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +21 -6
- package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +14 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +39 -1
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +48 -35
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +2 -2
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +3 -3
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +453 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +11 -11
- 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/ai-action-inpage.svg +85 -0
- package/patternfly-docs/content/extensions/chatbot/img/ai-action-message.svg +63 -0
- package/patternfly-docs/content/extensions/chatbot/img/analytics-example.svg +127 -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 -58
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-analytics.svg +51 -0
- package/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +11 -12
- 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/comparison.svg +45 -0
- package/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +6 -29
- package/patternfly-docs/content/extensions/chatbot/img/docked.svg +259 -241
- package/patternfly-docs/content/extensions/chatbot/img/drawer.svg +255 -0
- package/patternfly-docs/content/extensions/chatbot/img/error-state.svg +30 -0
- package/patternfly-docs/content/extensions/chatbot/img/feedback-form.svg +88 -0
- 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-pulse.svg +22 -0
- package/patternfly-docs/content/extensions/chatbot/img/listening.svg +1 -1
- package/patternfly-docs/content/extensions/chatbot/img/loading-state.svg +28 -0
- package/patternfly-docs/content/extensions/chatbot/img/masthead-toggle-notification.svg +49 -0
- package/patternfly-docs/content/extensions/chatbot/img/masthead-toggle.svg +75 -0
- package/patternfly-docs/content/extensions/chatbot/img/message-bar-elements.svg +3 -3
- package/patternfly-docs/content/extensions/chatbot/img/message-elements.svg +84 -142
- package/patternfly-docs/content/extensions/chatbot/img/message-feedback.svg +52 -0
- package/patternfly-docs/content/extensions/chatbot/img/message-responses.svg +54 -0
- package/patternfly-docs/content/extensions/chatbot/img/new-chat-emptystate.svg +27 -0
- package/patternfly-docs/content/extensions/chatbot/img/no-results-emptystate.svg +27 -0
- package/patternfly-docs/content/extensions/chatbot/img/overlay.svg +54 -39
- package/patternfly-docs/content/extensions/chatbot/img/posthog.svg +30 -0
- package/patternfly-docs/content/extensions/chatbot/img/segment.svg +36 -0
- 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/thank-you-card.svg +81 -0
- package/patternfly-docs/content/extensions/chatbot/img/toggle-customizations.svg +12 -0
- package/patternfly-docs/content/extensions/chatbot/img/toggle-tooltips.svg +38 -0
- package/patternfly-docs/content/extensions/chatbot/img/umami.svg +30 -0
- package/patternfly-docs/content/extensions/chatbot/img/welcome-elements.svg +82 -0
- package/patternfly-docs/content/extensions/chatbot/img/welcome-message.svg +94 -0
- package/src/AttachMenu/AttachMenu.scss +1 -1
- package/src/AttachmentEdit/AttachmentEdit.test.tsx +55 -0
- package/src/Chatbot/Chatbot.scss +20 -1
- package/src/Chatbot/Chatbot.test.tsx +31 -0
- package/src/Chatbot/Chatbot.tsx +2 -1
- package/src/ChatbotAlert/ChatbotAlert.test.tsx +31 -0
- package/src/ChatbotContent/ChatbotContent.scss +1 -0
- package/src/ChatbotContent/ChatbotContent.test.tsx +15 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +10 -4
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +24 -1
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +242 -3
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +94 -26
- package/src/ChatbotConversationHistoryNav/EmptyState.tsx +44 -0
- package/src/ChatbotConversationHistoryNav/LoadingState.tsx +38 -0
- package/src/ChatbotFooter/ChatbotFooter.scss +8 -4
- package/src/ChatbotFooter/ChatbotFooter.test.tsx +15 -0
- package/src/ChatbotFooter/ChatbotFooternote.test.tsx +84 -0
- package/src/ChatbotFooter/ChatbotFootnote.tsx +2 -2
- package/src/ChatbotHeader/ChatbotHeader.scss +5 -6
- 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 +7 -1
- package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx +17 -0
- package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +19 -0
- package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +7 -1
- 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 +11 -4
- package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +75 -0
- package/src/ChatbotHeader/ChatbotHeaderTitle.tsx +7 -2
- package/src/ChatbotModal/ChatbotModal.scss +12 -12
- package/src/ChatbotToggle/ChatbotToggle.tsx +6 -1
- package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss +2 -0
- package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx +26 -18
- package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap +2 -2
- package/src/CodeModal/CodeModal.scss +7 -4
- 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/FileDetailsLabel/FileDetailsLabel.scss +2 -2
- package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +4 -4
- package/src/Message/ErrorMessage/ErrorMessage.tsx +14 -0
- package/src/Message/ImageMessage/ImageMessage.scss +9 -0
- package/src/Message/ImageMessage/ImageMessage.tsx +14 -0
- package/src/Message/LinkMessage/LinkMessage.tsx +34 -0
- package/src/Message/ListMessage/ListMessage.scss +6 -6
- package/src/Message/Message.scss +4 -26
- package/src/Message/Message.test.tsx +367 -3
- package/src/Message/Message.tsx +157 -31
- 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 +21 -12
- 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 +236 -0
- package/src/Message/UserFeedback/UserFeedback.tsx +128 -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 +58 -24
- package/src/MessageBar/MessageBar.test.tsx +12 -4
- package/src/MessageBar/MessageBar.tsx +164 -65
- package/src/MessageBar/MicrophoneButton.scss +8 -8
- package/src/MessageBar/MicrophoneButton.tsx +1 -1
- 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.scss +1 -0
- package/src/MessageBox/MessageBox.test.tsx +26 -0
- package/src/PreviewAttachment/PreviewAttachment.test.tsx +51 -0
- package/src/ResponseActions/ResponseActionButton.tsx +14 -2
- package/src/ResponseActions/ResponseActions.scss +2 -2
- package/src/ResponseActions/ResponseActions.test.tsx +4 -2
- package/src/ResponseActions/ResponseActions.tsx +26 -2
- package/src/Settings/Settings.scss +2 -2
- package/src/Settings/SettingsForm.test.tsx +28 -0
- package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss +2 -2
- package/src/SourcesCard/SourcesCard.scss +9 -3
- package/src/TermsOfUse/TermsOfUse.scss +1 -1
- package/src/__mocks__/rehype-external-links.ts +3 -0
- package/src/__mocks__/rehype-sanitize.ts +3 -0
- package/src/__mocks__/rehype-unwrap-images.tsx +3 -0
- package/src/index.ts +6 -0
- package/src/main.scss +6 -6
- package/src/tracking/console_tracking_provider.ts +30 -0
- package/src/tracking/index.ts +3 -0
- package/src/tracking/posthog_tracking_provider.ts +42 -0
- package/src/tracking/segment_tracking_provider.ts +62 -0
- package/src/tracking/trackingProviderProxy.ts +28 -0
- package/src/tracking/tracking_api.ts +11 -0
- package/src/tracking/tracking_registry.ts +33 -0
- package/src/tracking/tracking_spi.ts +14 -0
- package/src/tracking/umami_tracking_provider.ts +54 -0
package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx
ADDED
@@ -0,0 +1,94 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
|
3
|
+
import ChatbotConversationHistoryNav, {
|
4
|
+
Conversation
|
5
|
+
} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
|
6
|
+
import { Checkbox } from '@patternfly/react-core';
|
7
|
+
|
8
|
+
const initialConversations: { [key: string]: Conversation[] } = {
|
9
|
+
Today: [{ id: '1', text: 'Red Hat products and services' }],
|
10
|
+
'This month': [
|
11
|
+
{
|
12
|
+
id: '2',
|
13
|
+
text: 'Enterprise Linux installation and setup'
|
14
|
+
},
|
15
|
+
{ id: '3', text: 'Troubleshoot system crash' }
|
16
|
+
],
|
17
|
+
March: [
|
18
|
+
{ id: '4', text: 'Ansible security and updates' },
|
19
|
+
{ id: '5', text: 'Red Hat certification' },
|
20
|
+
{ id: '6', text: 'Lightspeed user documentation' }
|
21
|
+
],
|
22
|
+
February: [
|
23
|
+
{ id: '7', text: 'Crashing pod assistance' },
|
24
|
+
{ id: '8', text: 'OpenShift AI pipelines' },
|
25
|
+
{ id: '9', text: 'Updating subscription plan' },
|
26
|
+
{ id: '10', text: 'Red Hat licensing options' }
|
27
|
+
],
|
28
|
+
January: [
|
29
|
+
{ id: '11', text: 'RHEL system performance' },
|
30
|
+
{ id: '12', text: 'Manage user accounts' }
|
31
|
+
]
|
32
|
+
};
|
33
|
+
|
34
|
+
export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
|
35
|
+
const [isOpen, setIsOpen] = React.useState(true);
|
36
|
+
const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
|
37
|
+
initialConversations
|
38
|
+
);
|
39
|
+
const displayMode = ChatbotDisplayMode.embedded;
|
40
|
+
|
41
|
+
const findMatchingItems = (targetValue: string) => {
|
42
|
+
let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
|
43
|
+
const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
|
44
|
+
if (filteredItems.length > 0) {
|
45
|
+
acc[key] = filteredItems;
|
46
|
+
}
|
47
|
+
return acc;
|
48
|
+
}, {});
|
49
|
+
|
50
|
+
// append message if no items are found
|
51
|
+
if (Object.keys(filteredConversations).length === 0) {
|
52
|
+
filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
|
53
|
+
}
|
54
|
+
return filteredConversations;
|
55
|
+
};
|
56
|
+
|
57
|
+
return (
|
58
|
+
<>
|
59
|
+
<Checkbox
|
60
|
+
label="Display drawer"
|
61
|
+
isChecked={isOpen}
|
62
|
+
onChange={() => {
|
63
|
+
setIsOpen(!isOpen);
|
64
|
+
setConversations(initialConversations);
|
65
|
+
}}
|
66
|
+
id="drawer-visible"
|
67
|
+
name="drawer-visible"
|
68
|
+
/>
|
69
|
+
<ChatbotConversationHistoryNav
|
70
|
+
displayMode={displayMode}
|
71
|
+
onDrawerToggle={() => setIsOpen(!isOpen)}
|
72
|
+
isDrawerOpen={isOpen}
|
73
|
+
setIsDrawerOpen={setIsOpen}
|
74
|
+
// eslint-disable-next-line no-console
|
75
|
+
onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
|
76
|
+
conversations={conversations}
|
77
|
+
onNewChat={() => {
|
78
|
+
setIsOpen(!isOpen);
|
79
|
+
}}
|
80
|
+
handleTextInputChange={(value: string) => {
|
81
|
+
if (value === '') {
|
82
|
+
setConversations(initialConversations);
|
83
|
+
}
|
84
|
+
// this is where you would perform search on the items in the drawer
|
85
|
+
// and update the state
|
86
|
+
const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
|
87
|
+
setConversations(newConversations);
|
88
|
+
}}
|
89
|
+
drawerContent={<div>Drawer content</div>}
|
90
|
+
drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
|
91
|
+
/>
|
92
|
+
</>
|
93
|
+
);
|
94
|
+
};
|
@@ -126,7 +126,7 @@ export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = ()
|
|
126
126
|
return (
|
127
127
|
<>
|
128
128
|
{/* this is required for react-dropzone to work in Safari and Firefox */}
|
129
|
-
<input {...getInputProps()} />
|
129
|
+
<input {...getInputProps()} hidden />
|
130
130
|
<MessageBar
|
131
131
|
onSendMessage={handleSend}
|
132
132
|
attachMenuProps={{
|
package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx
CHANGED
@@ -116,7 +116,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
|
|
116
116
|
so that users of assistive devices receive sufficient context */}
|
117
117
|
<MessageBox announcement={announcement} position={position}>
|
118
118
|
{messages.length === 0 && (
|
119
|
-
<ChatbotWelcomePrompt title="
|
119
|
+
<ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
|
120
120
|
)}
|
121
121
|
{/* This code block enables scrolling to the top of the last message.
|
122
122
|
You can instead choose to move the div with scrollToBottomRef on it below
|
@@ -1,19 +1,19 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
|
3
3
|
import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
|
4
|
-
import Checkbox from '@patternfly/react-core';
|
4
|
+
import { Checkbox } from '@patternfly/react-core';
|
5
5
|
|
6
6
|
export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
|
7
7
|
const [showWelcomePrompts, setShowWelcomePrompts] = React.useState(true);
|
8
8
|
|
9
9
|
const welcomePrompts = [
|
10
10
|
{
|
11
|
-
title: '
|
12
|
-
message: '
|
11
|
+
title: 'Set up account',
|
12
|
+
message: 'Choose the necessary settings and preferences for your account.'
|
13
13
|
},
|
14
14
|
{
|
15
|
-
title: '
|
16
|
-
message: '
|
15
|
+
title: 'Troubleshoot issue',
|
16
|
+
message: 'Find documentation and instructions to resolve your issue.'
|
17
17
|
}
|
18
18
|
];
|
19
19
|
|
@@ -29,8 +29,8 @@ export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
|
|
29
29
|
id="showWelcomePrompts"
|
30
30
|
/>
|
31
31
|
<ChatbotWelcomePrompt
|
32
|
-
title="
|
33
|
-
description="How
|
32
|
+
title="Hi, ChatBot User!"
|
33
|
+
description="How can I help you today?"
|
34
34
|
{...(showWelcomePrompts && { prompts: welcomePrompts })}
|
35
35
|
/>
|
36
36
|
</>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import ChatbotToggle from '@patternfly/
|
2
|
+
import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
|
3
3
|
|
4
4
|
export const SquareChatbotToggle: React.FunctionComponent = () => {
|
5
5
|
const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
|
@@ -102,11 +102,9 @@ The "embedded" display mode is meant to be used within a [PatternFly page](/comp
|
|
102
102
|
### Content and message box
|
103
103
|
|
104
104
|
The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) and [`<ChatbotFooter>`.](/patternfly-ai/chatbot/ui#footer)
|
105
|
-
|
106
|
-
<br />
|
105
|
+
|
107
106
|
`<ChatbotContent>` usually contains a `<ChatbotMessageBox>` for displaying messages.
|
108
|
-
|
109
|
-
<br />
|
107
|
+
|
110
108
|
Your code structure should look like this:
|
111
109
|
|
112
110
|
```noLive
|
@@ -144,8 +142,7 @@ To provide users with a more specific direction, you can also include optional w
|
|
144
142
|
### Skip to content
|
145
143
|
|
146
144
|
To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
|
147
|
-
|
148
|
-
<br />
|
145
|
+
|
149
146
|
When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
|
150
147
|
|
151
148
|
```js file="./SkipToContent.tsx" isFullscreen
|
@@ -371,6 +368,24 @@ If you're showing a conversation that is already active, you can set the `active
|
|
371
368
|
|
372
369
|
```
|
373
370
|
|
371
|
+
### Resizable drawer
|
372
|
+
|
373
|
+
By default, the conversation history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their conversation history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
|
374
|
+
|
375
|
+
In this example, the drawer can be resized up to the max size of the parent and resized down to 200px wide. To customize this behavior further (including width, style, and focus behavior) use PatternFly [`<Drawer>` props](/components/drawer#props), [`<DrawerPanelContent>` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
|
376
|
+
|
377
|
+
```js file="./ChatbotHeaderDrawerResizable.tsx"
|
378
|
+
|
379
|
+
```
|
380
|
+
|
381
|
+
### Drawer with simple menu
|
382
|
+
|
383
|
+
The drawer can also be used to display a list of basic menu items.
|
384
|
+
|
385
|
+
```js file="./ChatbotHeaderDrawerNavigation.tsx"
|
386
|
+
|
387
|
+
```
|
388
|
+
|
374
389
|
### Terms of use
|
375
390
|
|
376
391
|
Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
|
@@ -47,6 +47,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
|
|
47
47
|
|
48
48
|
## Demos
|
49
49
|
|
50
|
+
### Message feedback
|
51
|
+
|
52
|
+
When a user selects a positive or negative message action, you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be configured to time out automatically.
|
53
|
+
|
54
|
+
The following example demonstrates a full feedback flow, which accepts written feedback submission and displays a thank you card.
|
55
|
+
|
56
|
+
It also demonstrates how to handle focus appropriately for accessibility. The card will be focused when it appears in the DOM. When the card closes, place the focus back on the launching button. To provide additional context on what the button controls, you can also add `aria-expanded` and `aria-controls` attributes to the feedback buttons.
|
57
|
+
|
58
|
+
It is also important to announce when new content appears onscreen for accessibility purposes. `isLiveRegion` is set to true by default on `<Message>` so it will make appropriate announcements for you when the feedback card appears.
|
59
|
+
|
60
|
+
```js file="./Feedback.tsx"
|
61
|
+
|
62
|
+
```
|
63
|
+
|
50
64
|
### Attach via upload button in message bar
|
51
65
|
|
52
66
|
This demo displays unique attachment features, including:
|
@@ -21,7 +21,8 @@ propComponents:
|
|
21
21
|
'ChatbotFootnote',
|
22
22
|
'MessageBox',
|
23
23
|
'Message',
|
24
|
-
'MessageBarWithAttachMenuProps'
|
24
|
+
'MessageBarWithAttachMenuProps',
|
25
|
+
'CompareProps'
|
25
26
|
]
|
26
27
|
sortValue: 2
|
27
28
|
---
|
@@ -34,6 +35,7 @@ import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
|
|
34
35
|
import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
|
35
36
|
import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
|
36
37
|
import Message from '@patternfly/chatbot/dist/dynamic/Message';
|
38
|
+
import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
|
37
39
|
import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
|
38
40
|
|
39
41
|
import ChatbotHeader, {
|
@@ -55,6 +57,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
|
|
55
57
|
import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
|
56
58
|
import userAvatar from '../Messages/user_avatar.svg';
|
57
59
|
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
|
60
|
+
import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
|
61
|
+
|
58
62
|
|
59
63
|
### Basic ChatBot
|
60
64
|
|
@@ -103,3 +107,37 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
|
|
103
107
|
```js file="./EmbeddedChatbot.tsx" isFullscreen
|
104
108
|
|
105
109
|
```
|
110
|
+
|
111
|
+
### Inline drawer ChatBot
|
112
|
+
|
113
|
+
This demo displays a ChatBot in a static, inline drawer. This demo includes:
|
114
|
+
|
115
|
+
1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
|
116
|
+
2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
|
117
|
+
|
118
|
+
**Note:** The inline drawer ChatBot is built to fit and perform within a drawer, but the implementation of the drawer is up to you. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.
|
119
|
+
|
120
|
+
```js file="./ChatbotInDrawer.tsx" isFullscreen
|
121
|
+
|
122
|
+
```
|
123
|
+
|
124
|
+
### Comparing ChatBots
|
125
|
+
|
126
|
+
To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.
|
127
|
+
<br /><br />
|
128
|
+
Your code structure should look like this:
|
129
|
+
|
130
|
+
```noLive
|
131
|
+
<Page ... >
|
132
|
+
<div className="pf-chatbot__compare-container">
|
133
|
+
<Compare ... />
|
134
|
+
<ChatbotFooter ... >
|
135
|
+
<MessageBar ... />
|
136
|
+
</ChatbotFooter>
|
137
|
+
</div>
|
138
|
+
</Page>
|
139
|
+
```
|
140
|
+
|
141
|
+
```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen
|
142
|
+
|
143
|
+
```
|
@@ -32,24 +32,26 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
|
|
32
32
|
import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
|
33
33
|
import userAvatar from '../Messages/user_avatar.svg';
|
34
34
|
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
|
35
|
+
import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
|
36
|
+
import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
|
35
37
|
|
36
38
|
const footnoteProps = {
|
37
|
-
label: '
|
39
|
+
label: 'ChatBot uses AI. Check for mistakes.',
|
38
40
|
popover: {
|
39
|
-
title: 'Verify
|
40
|
-
description: `While
|
41
|
+
title: 'Verify information',
|
42
|
+
description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
|
41
43
|
bannerImage: {
|
42
44
|
src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
|
43
45
|
alt: 'Example image for footnote popover'
|
44
46
|
},
|
45
47
|
cta: {
|
46
|
-
label: '
|
48
|
+
label: 'Dismiss',
|
47
49
|
onClick: () => {
|
48
50
|
alert('Do something!');
|
49
51
|
}
|
50
52
|
},
|
51
53
|
link: {
|
52
|
-
label: '
|
54
|
+
label: 'View AI policy',
|
53
55
|
url: 'https://www.redhat.com/'
|
54
56
|
}
|
55
57
|
}
|
@@ -95,6 +97,20 @@ export default MessageLoading;
|
|
95
97
|
// The timestamps re-render with them.
|
96
98
|
const date = new Date();
|
97
99
|
|
100
|
+
const initProps: InitProps = {
|
101
|
+
segmentKey: 'TODO-key', // TODO add your key here
|
102
|
+
posthogKey: 'TODO-key',
|
103
|
+
umamiKey: 'TODO-key',
|
104
|
+
umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
|
105
|
+
console: true,
|
106
|
+
something: 'test'
|
107
|
+
};
|
108
|
+
|
109
|
+
const tracking = getTrackingProviders(initProps);
|
110
|
+
tracking.identify('user-123'); // TODO get real user id
|
111
|
+
tracking.trackPageView(window.document.documentURI);
|
112
|
+
|
113
|
+
const actionEventName = 'MessageAction';
|
98
114
|
const initialMessages: MessageProps[] = [
|
99
115
|
{
|
100
116
|
id: '1',
|
@@ -113,28 +129,23 @@ const initialMessages: MessageProps[] = [
|
|
113
129
|
avatar: patternflyAvatar,
|
114
130
|
timestamp: date.toLocaleString(),
|
115
131
|
actions: {
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
copy: { onClick: () => console.log('Copy') },
|
122
|
-
// eslint-disable-next-line no-console
|
123
|
-
share: { onClick: () => console.log('Share') },
|
124
|
-
// eslint-disable-next-line no-console
|
125
|
-
listen: { onClick: () => console.log('Listen') }
|
132
|
+
positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
|
133
|
+
negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },
|
134
|
+
copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },
|
135
|
+
share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },
|
136
|
+
listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }
|
126
137
|
}
|
127
138
|
}
|
128
139
|
];
|
129
140
|
|
130
141
|
const welcomePrompts = [
|
131
142
|
{
|
132
|
-
title: '
|
133
|
-
message: '
|
143
|
+
title: 'Set up account',
|
144
|
+
message: 'Choose the necessary settings and preferences for your account.'
|
134
145
|
},
|
135
146
|
{
|
136
|
-
title: '
|
137
|
-
message: '
|
147
|
+
title: 'Troubleshoot issue',
|
148
|
+
message: 'Find documentation and instructions to resolve your issue.'
|
138
149
|
}
|
139
150
|
];
|
140
151
|
|
@@ -164,6 +175,7 @@ const initialConversations = {
|
|
164
175
|
]
|
165
176
|
};
|
166
177
|
|
178
|
+
const actionEvent2 = 'ActionEvent2';
|
167
179
|
export const ChatbotDemo: React.FunctionComponent = () => {
|
168
180
|
const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
|
169
181
|
const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
|
@@ -180,7 +192,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
|
|
180
192
|
const chatbotRef = React.useRef<HTMLDivElement>(null);
|
181
193
|
const historyRef = React.useRef<HTMLButtonElement>(null);
|
182
194
|
|
183
|
-
//
|
195
|
+
// Auto-scrolls to the latest message
|
184
196
|
React.useEffect(() => {
|
185
197
|
// don't scroll the first load - in this demo, we know we start with two messages
|
186
198
|
if (messages.length > 2) {
|
@@ -193,6 +205,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
|
|
193
205
|
value: string | number | undefined
|
194
206
|
) => {
|
195
207
|
setSelectedModel(value as string);
|
208
|
+
tracking.trackSingleItem('ModelSelected', { model: value });
|
196
209
|
};
|
197
210
|
|
198
211
|
const onSelectDisplayMode = (
|
@@ -210,6 +223,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
|
|
210
223
|
|
211
224
|
const handleSend = (message: string) => {
|
212
225
|
setIsSendButtonDisabled(true);
|
226
|
+
tracking.trackSingleItem('UserInputReceived', { text: message });
|
213
227
|
const newMessages: MessageProps[] = [];
|
214
228
|
// We can't use structuredClone since messages contains functions, but we can't mutate
|
215
229
|
// items that are going into state or the UI won't update correctly
|
@@ -255,21 +269,17 @@ export const ChatbotDemo: React.FunctionComponent = () => {
|
|
255
269
|
avatar: patternflyAvatar,
|
256
270
|
timestamp: date.toLocaleString(),
|
257
271
|
actions: {
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
copy: { onClick: () => console.log('Copy') },
|
264
|
-
// eslint-disable-next-line no-console
|
265
|
-
share: { onClick: () => console.log('Share') },
|
266
|
-
// eslint-disable-next-line no-console
|
267
|
-
listen: { onClick: () => console.log('Listen') }
|
272
|
+
positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },
|
273
|
+
negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },
|
274
|
+
copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },
|
275
|
+
share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },
|
276
|
+
listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }
|
268
277
|
}
|
269
278
|
});
|
270
279
|
setMessages(loadedMessages);
|
271
280
|
// make announcement to assistive devices that new message has loaded
|
272
281
|
setAnnouncement(`Message from Bot: API response goes here`);
|
282
|
+
tracking.trackSingleItem('BotResponded', { undefined });
|
273
283
|
setIsSendButtonDisabled(false);
|
274
284
|
}, 5000);
|
275
285
|
};
|
@@ -339,7 +349,10 @@ export const ChatbotDemo: React.FunctionComponent = () => {
|
|
339
349
|
<ChatbotToggle
|
340
350
|
tooltipLabel="Chatbot"
|
341
351
|
isChatbotVisible={chatbotVisible}
|
342
|
-
onToggleChatbot={()
|
352
|
+
onToggleChatbot={function () {
|
353
|
+
setChatbotVisible(!chatbotVisible);
|
354
|
+
tracking.trackSingleItem('Chatbot Visible', { isVisible: !chatbotVisible }); // TODO correct?
|
355
|
+
}}
|
343
356
|
id="chatbot-toggle"
|
344
357
|
ref={toggleRef}
|
345
358
|
/>
|
@@ -436,14 +449,14 @@ export const ChatbotDemo: React.FunctionComponent = () => {
|
|
436
449
|
so that users of assistive devices receive sufficient context */}
|
437
450
|
<MessageBox announcement={announcement}>
|
438
451
|
<ChatbotWelcomePrompt
|
439
|
-
title="
|
440
|
-
description="How
|
452
|
+
title="Hi, ChatBot User!"
|
453
|
+
description="How can I help you today?"
|
441
454
|
prompts={welcomePrompts}
|
442
455
|
/>
|
443
456
|
{/* This code block enables scrolling to the top of the last message.
|
444
|
-
You can instead choose to move the div with scrollToBottomRef on it below
|
457
|
+
You can instead choose to move the div with scrollToBottomRef on it below
|
445
458
|
the map of messages, so that users are forced to scroll to the bottom.
|
446
|
-
If you are using streaming, you will want to take a different approach;
|
459
|
+
If you are using streaming, you will want to take a different approach;
|
447
460
|
see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
|
448
461
|
{messages.map((message, index) => {
|
449
462
|
if (index === messages.length - 1) {
|
@@ -231,7 +231,7 @@ export const BasicDemo: React.FunctionComponent = () => {
|
|
231
231
|
{error}
|
232
232
|
</ChatbotAlert>
|
233
233
|
)}
|
234
|
-
<ChatbotWelcomePrompt title="
|
234
|
+
<ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
|
235
235
|
{messages.map((message) => (
|
236
236
|
<Message key={message.name} {...message} />
|
237
237
|
))}
|
@@ -244,7 +244,7 @@ export const BasicDemo: React.FunctionComponent = () => {
|
|
244
244
|
</div>
|
245
245
|
)}
|
246
246
|
<MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
|
247
|
-
<ChatbotFootnote label="
|
247
|
+
<ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
|
248
248
|
</ChatbotFooter>
|
249
249
|
</FileDropZone>
|
250
250
|
</Chatbot>
|
@@ -209,7 +209,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
|
|
209
209
|
return (
|
210
210
|
<>
|
211
211
|
{/* this is required for react-dropzone to work in Safari and Firefox */}
|
212
|
-
<input {...getInputProps()} />
|
212
|
+
<input {...getInputProps()} hidden />
|
213
213
|
<ChatbotToggle
|
214
214
|
tooltipLabel="Chatbot"
|
215
215
|
isChatbotVisible={chatbotVisible}
|
@@ -232,7 +232,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
|
|
232
232
|
{error}
|
233
233
|
</ChatbotAlert>
|
234
234
|
)}
|
235
|
-
<ChatbotWelcomePrompt title="
|
235
|
+
<ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
|
236
236
|
{messages.map((message) => (
|
237
237
|
<Message key={message.name} {...message} />
|
238
238
|
))}
|
@@ -259,7 +259,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
|
|
259
259
|
onAttachMenuToggleClick: onToggleClick
|
260
260
|
}}
|
261
261
|
/>
|
262
|
-
<ChatbotFootnote label="
|
262
|
+
<ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
|
263
263
|
</ChatbotFooter>
|
264
264
|
</>
|
265
265
|
</FileDropZone>
|