@patternfly/chatbot 2.2.0-prerelease.9 → 2.2.1
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 +35 -8
- package/dist/cjs/Message/Message.js +68 -18
- package/dist/cjs/Message/Message.test.js +239 -3
- package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +17 -0
- package/dist/cjs/Message/QuickResponse/QuickResponse.js +34 -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 +420 -148
- 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 +35 -8
- package/dist/esm/Message/Message.js +66 -16
- package/dist/esm/Message/Message.test.js +239 -3
- package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +17 -0
- package/dist/esm/Message/QuickResponse/QuickResponse.js +27 -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 -3
- 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 +2 -2
- 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 +49 -8
- 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/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/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/FileDropZone/__snapshots__/FileDropZone.test.tsx.snap +1 -0
- 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 +313 -3
- package/src/Message/Message.tsx +130 -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/QuickStartTile.scss +0 -1
- 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 +5 -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
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
|
3
|
+
import { CheckIcon } from '@patternfly/react-icons';
|
4
|
+
|
5
|
+
export interface QuickResponse extends Omit<LabelProps, 'children'> {
|
6
|
+
content: string;
|
7
|
+
id: string;
|
8
|
+
onClick?: () => void;
|
9
|
+
}
|
10
|
+
|
11
|
+
export interface QuickResponseProps {
|
12
|
+
/** Props for quick responses */
|
13
|
+
quickResponses: QuickResponse[];
|
14
|
+
/** Props for quick responses container */
|
15
|
+
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
16
|
+
/** Callback when a response is clicked; used in feedback cards */
|
17
|
+
onSelect?: (id: string) => void;
|
18
|
+
}
|
19
|
+
|
20
|
+
export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
|
21
|
+
quickResponses,
|
22
|
+
quickResponseContainerProps = { numLabels: 5 },
|
23
|
+
onSelect
|
24
|
+
}: QuickResponseProps) => {
|
25
|
+
const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
|
26
|
+
|
27
|
+
const handleQuickResponseClick = (id: string, onClick?: () => void) => {
|
28
|
+
setSelectedQuickResponse(id);
|
29
|
+
onClick && onClick();
|
30
|
+
onSelect && onSelect(id);
|
31
|
+
};
|
32
|
+
return (
|
33
|
+
<LabelGroup
|
34
|
+
className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className ? quickResponseContainerProps?.className : ''}`}
|
35
|
+
{...quickResponseContainerProps}
|
36
|
+
>
|
37
|
+
{quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
|
38
|
+
<Label
|
39
|
+
variant={id === selectedQuickResponse ? undefined : 'outline'}
|
40
|
+
icon={id === selectedQuickResponse ? <CheckIcon /> : undefined}
|
41
|
+
color="blue"
|
42
|
+
key={id}
|
43
|
+
onClick={() => handleQuickResponseClick(id, onClick)}
|
44
|
+
className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
|
45
|
+
{...props}
|
46
|
+
>
|
47
|
+
{content}
|
48
|
+
</Label>
|
49
|
+
))}
|
50
|
+
</LabelGroup>
|
51
|
+
);
|
52
|
+
};
|
53
|
+
|
54
|
+
export default QuickResponse;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.pf-chatbot__message-table {
|
2
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
3
|
+
--pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--tertiary--default) !important;
|
4
|
+
--pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default) !important;
|
5
|
+
padding: 0 var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
|
6
|
+
|
7
|
+
&.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
|
8
|
+
border-block-start: 0;
|
9
|
+
}
|
10
|
+
|
11
|
+
tbody {
|
12
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
13
|
+
}
|
14
|
+
|
15
|
+
tr {
|
16
|
+
--pf-v6-c-table__tr--responsive--PaddingInlineEnd: 0;
|
17
|
+
--pf-v6-c-table__tr--responsive--PaddingInlineStart: 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
.pf-v6-c-table__tr:last-of-type {
|
21
|
+
border-block-end: 0;
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,83 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Message - Content - Table
|
3
|
+
// ============================================================================
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import { ExtraProps } from 'react-markdown';
|
7
|
+
import { Table, TableProps } from '@patternfly/react-table';
|
8
|
+
|
9
|
+
interface Properties {
|
10
|
+
line: number;
|
11
|
+
column: number;
|
12
|
+
offset: number;
|
13
|
+
}
|
14
|
+
export interface TableNode {
|
15
|
+
children?: TableNode[];
|
16
|
+
value?: string;
|
17
|
+
position: { start: Properties; end: Properties };
|
18
|
+
tagName: string;
|
19
|
+
type: string;
|
20
|
+
}
|
21
|
+
|
22
|
+
const TableMessage = ({ children, ...props }: TableProps & ExtraProps) => {
|
23
|
+
const { className, ...rest } = props;
|
24
|
+
|
25
|
+
// This allows us to parse the nested data we get back from the 3rd party Markdown parser
|
26
|
+
// Open to feedback here if there is a better way to do this
|
27
|
+
// This looks for ths and spits them all out so we can filter them later, looking for text values
|
28
|
+
const findHeaders = (array?: TableNode[]) => {
|
29
|
+
const headers: TableNode[] = [];
|
30
|
+
if (!array) {
|
31
|
+
return headers;
|
32
|
+
}
|
33
|
+
const traverse = (items: TableNode[]) => {
|
34
|
+
for (const item of items) {
|
35
|
+
if (item.tagName === 'th') {
|
36
|
+
headers.push(item);
|
37
|
+
}
|
38
|
+
if (item.children) {
|
39
|
+
traverse(item.children);
|
40
|
+
}
|
41
|
+
}
|
42
|
+
};
|
43
|
+
|
44
|
+
traverse(array);
|
45
|
+
return headers;
|
46
|
+
};
|
47
|
+
|
48
|
+
const headers = findHeaders(rest.node?.children as TableNode[] | undefined);
|
49
|
+
const headerTextValues = headers.map((header) => header?.children?.filter((c) => c?.type === 'text')[0]?.value);
|
50
|
+
|
51
|
+
// We are sending these header text values down to child tds by passing them through children, since mobile view for tables expects a dataLabel prop
|
52
|
+
// The data structure does not otherwise know this information at that level
|
53
|
+
// This is somewhat opinionated and may break if 3rd party library changes
|
54
|
+
// See Tr and Tbody for other usage
|
55
|
+
const modifyChildren = (children) =>
|
56
|
+
React.Children.map(children, (child) => {
|
57
|
+
if (child && headerTextValues?.length > 0) {
|
58
|
+
return React.cloneElement(child, { extraHeaders: headerTextValues });
|
59
|
+
}
|
60
|
+
return child;
|
61
|
+
});
|
62
|
+
|
63
|
+
if (!props['aria-label']) {
|
64
|
+
// eslint-disable-next-line no-console
|
65
|
+
console.warn(
|
66
|
+
'For accessibility reasons an aria-label should be specified for the Table via the <Message /> tableProps prop'
|
67
|
+
);
|
68
|
+
}
|
69
|
+
|
70
|
+
return (
|
71
|
+
// gridBreakPoint is so we show mobile-styled-PF table
|
72
|
+
<Table
|
73
|
+
aria-label={props['aria-label']}
|
74
|
+
gridBreakPoint="grid"
|
75
|
+
className={`pf-chatbot__message-table ${className ? className : ''}`}
|
76
|
+
{...rest}
|
77
|
+
>
|
78
|
+
{modifyChildren(children)}
|
79
|
+
</Table>
|
80
|
+
);
|
81
|
+
};
|
82
|
+
|
83
|
+
export default TableMessage;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Message - Content - Table
|
3
|
+
// ============================================================================
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import { ExtraProps } from 'react-markdown';
|
7
|
+
import { Tbody, TbodyProps } from '@patternfly/react-table';
|
8
|
+
|
9
|
+
const TbodyProps = ({ children, ...props }: TbodyProps & ExtraProps & { extraHeaders?: string[] }) => {
|
10
|
+
// passthrough so we can place dataLabel on tds
|
11
|
+
const modifyChildren = (children) => {
|
12
|
+
if (children && props.extraHeaders) {
|
13
|
+
return React.Children.map(children, (child) => React.cloneElement(child, { extraHeaders: props.extraHeaders }));
|
14
|
+
}
|
15
|
+
return children;
|
16
|
+
};
|
17
|
+
|
18
|
+
return <Tbody {...props}>{modifyChildren(children)}</Tbody>;
|
19
|
+
};
|
20
|
+
export default TbodyProps;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Message - Content - Table
|
3
|
+
// ============================================================================
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import { ExtraProps } from 'react-markdown';
|
7
|
+
import { Td, TdProps } from '@patternfly/react-table';
|
8
|
+
|
9
|
+
const TdMessage = ({ children, ...props }: TdProps & ExtraProps) => <Td {...props}>{children}</Td>;
|
10
|
+
|
11
|
+
export default TdMessage;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Message - Content - Table
|
3
|
+
// ============================================================================
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import { ExtraProps } from 'react-markdown';
|
7
|
+
import { Th, ThProps } from '@patternfly/react-table';
|
8
|
+
|
9
|
+
const ThMessage = ({ children, ...props }: ThProps & ExtraProps) => <Th {...props}>{children}</Th>;
|
10
|
+
|
11
|
+
export default ThMessage;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Message - Content - Table
|
3
|
+
// ============================================================================
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import { ExtraProps } from 'react-markdown';
|
7
|
+
import { Thead, TheadProps } from '@patternfly/react-table';
|
8
|
+
|
9
|
+
const TheadMessage = ({ children, ...props }: TheadProps & ExtraProps) => <Thead {...props}>{children}</Thead>;
|
10
|
+
|
11
|
+
export default TheadMessage;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Message - Content - Table
|
3
|
+
// ============================================================================
|
4
|
+
|
5
|
+
import React from 'react';
|
6
|
+
import { ExtraProps } from 'react-markdown';
|
7
|
+
import { Tr, TrProps } from '@patternfly/react-table';
|
8
|
+
|
9
|
+
const TrMessage = ({ children, ...props }: TrProps & ExtraProps & { extraHeaders?: string[] }) => {
|
10
|
+
let tdIndex = 0;
|
11
|
+
|
12
|
+
// passthrough so we can place dataLabel on tds
|
13
|
+
// places column name on correct child
|
14
|
+
const modifyChildren = (children) =>
|
15
|
+
React.Children.map(children, (child) => {
|
16
|
+
if (child.type.name === 'td' && props.extraHeaders) {
|
17
|
+
const clonedChild = React.cloneElement(child, { dataLabel: props.extraHeaders[tdIndex] });
|
18
|
+
tdIndex = tdIndex + 1;
|
19
|
+
return clonedChild;
|
20
|
+
}
|
21
|
+
return child;
|
22
|
+
});
|
23
|
+
|
24
|
+
return <Tr {...props}>{modifyChildren(children)}</Tr>;
|
25
|
+
};
|
26
|
+
|
27
|
+
export default TrMessage;
|
@@ -10,42 +10,51 @@
|
|
10
10
|
}
|
11
11
|
}
|
12
12
|
|
13
|
+
// make it full width when there's a table, so the table can grow as needed
|
14
|
+
.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
|
15
|
+
width: 100%;
|
16
|
+
}
|
17
|
+
|
13
18
|
// Need to inline shorter text
|
14
19
|
.pf-chatbot__message-text {
|
15
20
|
width: fit-content;
|
16
|
-
padding: var(--pf-t--
|
17
|
-
border-radius: var(--pf-t--
|
21
|
+
padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
|
22
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
23
|
+
|
24
|
+
.pf-v6-c-button.pf-m-link {
|
25
|
+
font-size: var(--pf-t--global--font--size--md);
|
26
|
+
}
|
18
27
|
|
19
28
|
.pf-v6-c-content,
|
20
29
|
.pf-v6-c-content--small,
|
21
30
|
.pf-v6-c-content--blockquote,
|
22
31
|
p,
|
23
32
|
a {
|
24
|
-
--pf-v6-c-content--FontSize: var(--pf-t--
|
33
|
+
--pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
|
25
34
|
}
|
26
35
|
|
27
36
|
code {
|
28
|
-
background-color: var(--pf-t--
|
37
|
+
background-color: var(--pf-t--global--background--color--tertiary--default);
|
29
38
|
font-size: var(--pf-t--global--font--size--body--default);
|
30
39
|
}
|
31
40
|
}
|
32
41
|
|
33
42
|
.pf-chatbot__message--user {
|
34
43
|
.pf-chatbot__message-text {
|
35
|
-
background-color: var(--pf-t--
|
36
|
-
color: var(--pf-t--
|
37
|
-
|
44
|
+
background-color: var(--pf-t--global--color--brand--default);
|
45
|
+
color: var(--pf-t--global--text--color--on-brand--default);
|
46
|
+
--pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
|
47
|
+
padding: var(--pf-t--global--spacer--sm);
|
48
|
+
.pf-v6-c-button__icon {
|
49
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--on-brand--default);
|
50
|
+
}
|
38
51
|
|
39
52
|
.pf-v6-c-content,
|
40
53
|
.pf-v6-c-content--small,
|
41
54
|
.pf-v6-c-content--blockquote,
|
42
55
|
p,
|
43
56
|
a {
|
44
|
-
color: var(--pf-t--
|
45
|
-
}
|
46
|
-
|
47
|
-
code {
|
48
|
-
background-color: initial;
|
57
|
+
color: var(--pf-t--global--text--color--on-brand--default);
|
49
58
|
}
|
50
59
|
}
|
51
60
|
}
|
@@ -4,11 +4,11 @@
|
|
4
4
|
|
5
5
|
import React from 'react';
|
6
6
|
import { ExtraProps } from 'react-markdown';
|
7
|
-
import { Content,
|
7
|
+
import { Content, ContentProps } from '@patternfly/react-core';
|
8
8
|
|
9
|
-
const TextMessage = ({ children, ...props }:
|
9
|
+
const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
|
10
10
|
<span className="pf-chatbot__message-text">
|
11
|
-
<Content component={
|
11
|
+
<Content component={component} {...props}>
|
12
12
|
{children}
|
13
13
|
</Content>
|
14
14
|
</span>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// ============================================================================
|
2
|
+
// Chatbot Main - Messages - Close Button
|
3
|
+
// ============================================================================
|
4
|
+
import React from 'react';
|
5
|
+
|
6
|
+
// Import PatternFly components
|
7
|
+
import { Button, ButtonProps } from '@patternfly/react-core';
|
8
|
+
import { CloseIcon } from '@patternfly/react-icons';
|
9
|
+
|
10
|
+
export interface CloseButtonProps extends ButtonProps {
|
11
|
+
/** Callback function for when close button is clicked */
|
12
|
+
onClose?: () => void;
|
13
|
+
/** Aria-label for button */
|
14
|
+
ariaLabel?: string;
|
15
|
+
}
|
16
|
+
|
17
|
+
const CloseButton: React.FunctionComponent<CloseButtonProps> = ({ onClose, ariaLabel }: CloseButtonProps) => (
|
18
|
+
<Button variant="plain" onClick={onClose} icon={<CloseIcon />} aria-label={ariaLabel} />
|
19
|
+
);
|
20
|
+
|
21
|
+
export default CloseButton;
|
@@ -0,0 +1,53 @@
|
|
1
|
+
// shared
|
2
|
+
.pf-chatbot__feedback-card {
|
3
|
+
box-shadow: var(--pf-t--global--box-shadow--sm);
|
4
|
+
--pf-v6-c-card--BorderWidth: 0;
|
5
|
+
max-width: 27.5rem; // fixme address mobile vs desktop
|
6
|
+
}
|
7
|
+
|
8
|
+
// complete card
|
9
|
+
.pf-chatbot__feedback-complete-body {
|
10
|
+
display: flex;
|
11
|
+
flex-direction: column;
|
12
|
+
gap: var(--pf-t--global--spacer--lg);
|
13
|
+
align-items: center;
|
14
|
+
}
|
15
|
+
.pf-chatbot__feedback-complete-text {
|
16
|
+
display: flex;
|
17
|
+
align-items: center;
|
18
|
+
justify-content: center;
|
19
|
+
flex-direction: column;
|
20
|
+
gap: var(--pf-t--global--spacer--sm);
|
21
|
+
--pf-v6-c-card--first-child--PaddingBlockStart: 0;
|
22
|
+
--pf-v6-c-card__title--not--last-child--PaddingBlockEnd: 0;
|
23
|
+
}
|
24
|
+
.pf-chatbot__feedback-complete-image {
|
25
|
+
display: flex;
|
26
|
+
align-items: center;
|
27
|
+
justify-content: center;
|
28
|
+
}
|
29
|
+
.pf-chatbot__feedback-complete-body {
|
30
|
+
text-align: center;
|
31
|
+
}
|
32
|
+
.pf-chatbot__feedback-complete-title {
|
33
|
+
font-family: var(--pf-t--global--font--family--heading);
|
34
|
+
font-size: var(--pf-t--global--font--size--lg);
|
35
|
+
font-weight: var(--pf-t--global--font--weight--body--bold);
|
36
|
+
line-height: var(--pf-t--global--font--line-height--heading);
|
37
|
+
}
|
38
|
+
|
39
|
+
// feedback card
|
40
|
+
.pf-chatbot__feedback-card-title {
|
41
|
+
font-family: var(--pf-t--global--font--family--heading);
|
42
|
+
font-size: var(--pf-t--global--font--size--md);
|
43
|
+
font-weight: var(--pf-t--global--font--weight--body--bold);
|
44
|
+
line-height: var(--pf-t--global--font--line-height--heading);
|
45
|
+
}
|
46
|
+
|
47
|
+
.pf-chatbot__feedback-card-form {
|
48
|
+
--pf-v6-c-form__group--m-action--MarginBlockStart: 0 !important;
|
49
|
+
}
|
50
|
+
|
51
|
+
.pf-chatbot__feedback-card-optional {
|
52
|
+
font-weight: initial;
|
53
|
+
}
|
@@ -0,0 +1,236 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render, screen } from '@testing-library/react';
|
3
|
+
import '@testing-library/jest-dom';
|
4
|
+
import userEvent from '@testing-library/user-event';
|
5
|
+
import UserFeedback from './UserFeedback';
|
6
|
+
|
7
|
+
const MOCK_RESPONSES = [
|
8
|
+
{ id: '1', content: 'Helpful information', onClick: () => alert('Clicked helpful information') },
|
9
|
+
{ id: '2', content: 'Easy to understand', onClick: () => alert('Clicked easy to understand') },
|
10
|
+
{ id: '3', content: 'Resolved my issue', onClick: () => alert('Clicked resolved my issue') }
|
11
|
+
];
|
12
|
+
|
13
|
+
describe('UserFeedback', () => {
|
14
|
+
it('should render correctly', () => {
|
15
|
+
render(<UserFeedback onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} timestamp="12/12/12" />);
|
16
|
+
expect(screen.getByRole('heading', { name: /Why did you choose this rating?/i })).toBeTruthy();
|
17
|
+
expect(screen.getByRole('list', { name: 'Quick feedback for message received at 12/12/12' })).toBeTruthy();
|
18
|
+
expect(screen.getByRole('button', { name: /Helpful information/i })).toBeTruthy();
|
19
|
+
expect(screen.getByRole('button', { name: /Easy to understand/i })).toBeTruthy();
|
20
|
+
expect(screen.getByRole('button', { name: /Resolved my issue/i })).toBeTruthy();
|
21
|
+
expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
|
22
|
+
expect(screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' })).toBeTruthy();
|
23
|
+
expect(screen.queryByRole('textbox', { name: /Provide optional additional feedback/i })).toBeFalsy();
|
24
|
+
});
|
25
|
+
it('should render different title correctly', () => {
|
26
|
+
render(
|
27
|
+
<UserFeedback
|
28
|
+
timestamp="12/12/12"
|
29
|
+
onClose={jest.fn}
|
30
|
+
onSubmit={jest.fn}
|
31
|
+
quickResponses={MOCK_RESPONSES}
|
32
|
+
title="Thanks! Why?"
|
33
|
+
/>
|
34
|
+
);
|
35
|
+
expect(screen.getByText('Thanks! Why?')).toBeTruthy();
|
36
|
+
});
|
37
|
+
it('should render different submit button text correctly', () => {
|
38
|
+
render(
|
39
|
+
<UserFeedback
|
40
|
+
timestamp="12/12/12"
|
41
|
+
onClose={jest.fn}
|
42
|
+
onSubmit={jest.fn}
|
43
|
+
quickResponses={MOCK_RESPONSES}
|
44
|
+
submitWord="Give feedback"
|
45
|
+
/>
|
46
|
+
);
|
47
|
+
expect(screen.getByRole('button', { name: /Give feedback/i })).toBeTruthy();
|
48
|
+
});
|
49
|
+
it('should render text area correctly', () => {
|
50
|
+
render(
|
51
|
+
<UserFeedback
|
52
|
+
timestamp="12/12/12"
|
53
|
+
onClose={jest.fn}
|
54
|
+
onSubmit={jest.fn}
|
55
|
+
quickResponses={MOCK_RESPONSES}
|
56
|
+
hasTextArea
|
57
|
+
/>
|
58
|
+
);
|
59
|
+
expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toBeTruthy();
|
60
|
+
});
|
61
|
+
it('should call onTextAreaChange correctly', async () => {
|
62
|
+
const spy = jest.fn();
|
63
|
+
render(
|
64
|
+
<UserFeedback
|
65
|
+
timestamp="12/12/12"
|
66
|
+
onClose={jest.fn}
|
67
|
+
onSubmit={jest.fn}
|
68
|
+
quickResponses={MOCK_RESPONSES}
|
69
|
+
hasTextArea
|
70
|
+
onTextAreaChange={spy}
|
71
|
+
/>
|
72
|
+
);
|
73
|
+
const textbox = screen.getByRole('textbox', { name: /Provide optional additional feedback/i });
|
74
|
+
await userEvent.type(textbox, 'test');
|
75
|
+
expect(spy).toHaveBeenCalledTimes(4);
|
76
|
+
});
|
77
|
+
it('should render different placeholder correctly', () => {
|
78
|
+
render(
|
79
|
+
<UserFeedback
|
80
|
+
timestamp="12/12/12"
|
81
|
+
onClose={jest.fn}
|
82
|
+
onSubmit={jest.fn}
|
83
|
+
quickResponses={MOCK_RESPONSES}
|
84
|
+
hasTextArea
|
85
|
+
textAreaPlaceholder="Provide any other information"
|
86
|
+
/>
|
87
|
+
);
|
88
|
+
expect(screen.getByRole('textbox', { name: /Provide optional additional feedback/i })).toHaveAttribute(
|
89
|
+
'placeholder',
|
90
|
+
'Provide any other information'
|
91
|
+
);
|
92
|
+
});
|
93
|
+
it('should render different text area label correctly', () => {
|
94
|
+
render(
|
95
|
+
<UserFeedback
|
96
|
+
timestamp="12/12/12"
|
97
|
+
onClose={jest.fn}
|
98
|
+
onSubmit={jest.fn}
|
99
|
+
quickResponses={MOCK_RESPONSES}
|
100
|
+
hasTextArea
|
101
|
+
textAreaAriaLabel="Provide more details"
|
102
|
+
/>
|
103
|
+
);
|
104
|
+
expect(screen.getByRole('textbox', { name: /Provide more details/i })).toBeTruthy();
|
105
|
+
});
|
106
|
+
it('should handle onClose correctly when close button is clicked', async () => {
|
107
|
+
const spy = jest.fn();
|
108
|
+
render(<UserFeedback onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} onClose={spy} timestamp="12/12/12" />);
|
109
|
+
const closeButton = screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
|
110
|
+
expect(closeButton).toBeTruthy();
|
111
|
+
await userEvent.click(closeButton);
|
112
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
113
|
+
});
|
114
|
+
it('should be able to change close button aria label', () => {
|
115
|
+
const spy = jest.fn();
|
116
|
+
render(
|
117
|
+
<UserFeedback
|
118
|
+
timestamp="12/12/12"
|
119
|
+
onSubmit={jest.fn}
|
120
|
+
quickResponses={MOCK_RESPONSES}
|
121
|
+
onClose={spy}
|
122
|
+
closeButtonAriaLabel="Ima button"
|
123
|
+
/>
|
124
|
+
);
|
125
|
+
expect(screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
|
126
|
+
});
|
127
|
+
it('should handle className', async () => {
|
128
|
+
render(
|
129
|
+
<UserFeedback
|
130
|
+
timestamp="12/12/12"
|
131
|
+
onClose={jest.fn}
|
132
|
+
onSubmit={jest.fn}
|
133
|
+
quickResponses={MOCK_RESPONSES}
|
134
|
+
className="test"
|
135
|
+
data-testid="card"
|
136
|
+
/>
|
137
|
+
);
|
138
|
+
expect(screen.getByTestId('card')).toHaveClass('test');
|
139
|
+
});
|
140
|
+
it('should apply id', async () => {
|
141
|
+
render(
|
142
|
+
<UserFeedback
|
143
|
+
timestamp="12/12/12"
|
144
|
+
onClose={jest.fn}
|
145
|
+
onSubmit={jest.fn}
|
146
|
+
quickResponses={MOCK_RESPONSES}
|
147
|
+
id="test"
|
148
|
+
data-testid="card"
|
149
|
+
/>
|
150
|
+
);
|
151
|
+
expect(screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
|
152
|
+
});
|
153
|
+
it('should handle submit correctly when nothing is selected', async () => {
|
154
|
+
const spy = jest.fn();
|
155
|
+
render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
|
156
|
+
await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
|
157
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
158
|
+
expect(spy).toHaveBeenCalledWith(undefined, '');
|
159
|
+
});
|
160
|
+
it('should handle submit correctly when item is selected', async () => {
|
161
|
+
const spy = jest.fn();
|
162
|
+
render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} />);
|
163
|
+
await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
|
164
|
+
await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
|
165
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
166
|
+
expect(spy).toHaveBeenCalledWith('2', '');
|
167
|
+
});
|
168
|
+
it('should handle submit correctly when there is just text input', async () => {
|
169
|
+
const spy = jest.fn();
|
170
|
+
render(
|
171
|
+
<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
|
172
|
+
);
|
173
|
+
await userEvent.type(
|
174
|
+
screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
|
175
|
+
'What a great experience!'
|
176
|
+
);
|
177
|
+
await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
|
178
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
179
|
+
expect(spy).toHaveBeenCalledWith(undefined, 'What a great experience!');
|
180
|
+
});
|
181
|
+
it('should handle submit correctly when item is selected and there is text input', async () => {
|
182
|
+
const spy = jest.fn();
|
183
|
+
render(
|
184
|
+
<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={spy} quickResponses={MOCK_RESPONSES} hasTextArea />
|
185
|
+
);
|
186
|
+
await userEvent.click(screen.getByRole('button', { name: /Easy to understand/i }));
|
187
|
+
await userEvent.type(
|
188
|
+
screen.getByRole('textbox', { name: /Provide optional additional feedback/i }),
|
189
|
+
'What a great experience!'
|
190
|
+
);
|
191
|
+
await userEvent.click(screen.getByRole('button', { name: /Submit/i }));
|
192
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
193
|
+
expect(spy).toHaveBeenCalledWith('2', 'What a great experience!');
|
194
|
+
});
|
195
|
+
it('should default title heading level to h1', () => {
|
196
|
+
render(<UserFeedback timestamp="12/12/12" onClose={jest.fn} onSubmit={jest.fn} quickResponses={MOCK_RESPONSES} />);
|
197
|
+
expect(screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i })).toBeTruthy();
|
198
|
+
});
|
199
|
+
it('should be able to change title heading level', () => {
|
200
|
+
render(
|
201
|
+
<UserFeedback
|
202
|
+
timestamp="12/12/12"
|
203
|
+
onClose={jest.fn}
|
204
|
+
onSubmit={jest.fn}
|
205
|
+
quickResponses={MOCK_RESPONSES}
|
206
|
+
headingLevel="h6"
|
207
|
+
/>
|
208
|
+
);
|
209
|
+
expect(screen.getByRole('heading', { level: 6, name: /Why did you choose this rating?/i })).toBeTruthy();
|
210
|
+
});
|
211
|
+
it('should focus on load by default', () => {
|
212
|
+
render(
|
213
|
+
<UserFeedback
|
214
|
+
timestamp="12/12/12"
|
215
|
+
onClose={jest.fn}
|
216
|
+
onSubmit={jest.fn}
|
217
|
+
quickResponses={MOCK_RESPONSES}
|
218
|
+
data-testid="card"
|
219
|
+
/>
|
220
|
+
);
|
221
|
+
expect(screen.getByTestId('card').parentElement).toHaveFocus();
|
222
|
+
});
|
223
|
+
it('should not focus on load if focusOnLoad = false', () => {
|
224
|
+
render(
|
225
|
+
<UserFeedback
|
226
|
+
timestamp="12/12/12"
|
227
|
+
onClose={jest.fn}
|
228
|
+
onSubmit={jest.fn}
|
229
|
+
quickResponses={MOCK_RESPONSES}
|
230
|
+
data-testid="card"
|
231
|
+
focusOnLoad={false}
|
232
|
+
/>
|
233
|
+
);
|
234
|
+
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
235
|
+
});
|
236
|
+
});
|