@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10
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.d.ts +2 -0
- package/dist/cjs/AttachmentEdit/AttachmentEdit.js +2 -2
- package/dist/cjs/Chatbot/Chatbot.d.ts +2 -0
- package/dist/cjs/Chatbot/Chatbot.js +2 -2
- package/dist/cjs/Chatbot/Chatbot.test.js +4 -0
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +6 -0
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -3
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +27 -0
- package/dist/cjs/ChatbotFooter/ChatbotFooter.d.ts +1 -0
- package/dist/cjs/ChatbotFooter/ChatbotFooter.js +2 -2
- package/dist/cjs/ChatbotFooter/ChatbotFooter.test.d.ts +1 -1
- package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js +5 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeader.js +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +4 -2
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +20 -6
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js +5 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.js +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts +3 -2
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +20 -6
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js +5 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -3
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +5 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +2 -2
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +5 -0
- package/dist/cjs/ChatbotModal/ChatbotModal.d.ts +3 -0
- package/dist/cjs/ChatbotModal/ChatbotModal.js +2 -2
- package/dist/cjs/ChatbotModal/ChatbotModal.test.d.ts +1 -0
- package/dist/cjs/ChatbotModal/ChatbotModal.test.js +28 -0
- package/dist/cjs/ChatbotPopover/ChatbotPopover.js +1 -1
- package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts +1 -0
- package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js +3 -3
- package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +4 -0
- package/dist/cjs/CodeModal/CodeModal.d.ts +2 -0
- package/dist/cjs/CodeModal/CodeModal.js +3 -3
- package/dist/cjs/CodeModal/CodeModal.test.d.ts +1 -0
- package/dist/cjs/CodeModal/CodeModal.test.js +15 -0
- package/dist/cjs/FileDetails/FileDetails.js +1 -1
- package/dist/cjs/Message/Message.d.ts +19 -1
- package/dist/cjs/Message/Message.js +58 -39
- package/dist/cjs/Message/Message.test.js +64 -0
- package/dist/cjs/Message/MessageInput.d.ts +18 -0
- package/dist/cjs/Message/MessageInput.js +34 -0
- package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +2 -0
- package/dist/cjs/Message/QuickResponse/QuickResponse.js +2 -2
- package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +2 -0
- package/dist/cjs/Message/QuickStarts/QuickStartTile.js +2 -2
- package/dist/cjs/Message/UserFeedback/UserFeedback.js +4 -4
- package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +4 -0
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +4 -4
- package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
- package/dist/cjs/MessageBar/AttachButton.d.ts +1 -0
- package/dist/cjs/MessageBar/AttachButton.js +3 -3
- package/dist/cjs/MessageBar/AttachButton.test.js +4 -0
- package/dist/cjs/MessageBar/MessageBar.d.ts +5 -0
- package/dist/cjs/MessageBar/MessageBar.js +14 -13
- package/dist/cjs/MessageBar/MessageBar.test.js +13 -0
- package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -0
- package/dist/cjs/MessageBar/MicrophoneButton.js +4 -4
- package/dist/cjs/MessageBar/SendButton.d.ts +1 -0
- package/dist/cjs/MessageBar/SendButton.js +3 -3
- package/dist/cjs/MessageBar/SendButton.test.js +4 -0
- package/dist/cjs/MessageBar/StopButton.d.ts +1 -0
- package/dist/cjs/MessageBar/StopButton.js +3 -3
- package/dist/cjs/MessageBar/StopButton.test.js +4 -0
- package/dist/cjs/MessageBox/MessageBox.d.ts +4 -0
- package/dist/cjs/MessageBox/MessageBox.js +21 -7
- package/dist/cjs/MessageBox/MessageBox.test.js +43 -0
- package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts +2 -0
- package/dist/cjs/PreviewAttachment/PreviewAttachment.js +2 -2
- package/dist/cjs/Settings/SettingsForm.d.ts +2 -0
- package/dist/cjs/Settings/SettingsForm.js +2 -2
- package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -1
- package/dist/cjs/Settings/SettingsForm.test.js +12 -0
- package/dist/cjs/SourcesCard/SourcesCard.d.ts +7 -1
- package/dist/cjs/SourcesCard/SourcesCard.js +17 -11
- package/dist/cjs/SourcesCard/SourcesCard.test.js +25 -15
- package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +2 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.js +5 -5
- package/dist/cjs/tracking/console_tracking_provider.d.ts +4 -5
- package/dist/cjs/tracking/console_tracking_provider.js +22 -15
- package/dist/cjs/tracking/posthog_tracking_provider.d.ts +2 -2
- package/dist/cjs/tracking/posthog_tracking_provider.js +21 -12
- package/dist/cjs/tracking/segment_tracking_provider.d.ts +2 -2
- package/dist/cjs/tracking/segment_tracking_provider.js +21 -12
- package/dist/cjs/tracking/trackingProviderProxy.d.ts +1 -1
- package/dist/cjs/tracking/trackingProviderProxy.js +2 -2
- package/dist/cjs/tracking/tracking_api.d.ts +1 -1
- package/dist/cjs/tracking/tracking_registry.js +46 -12
- package/dist/cjs/tracking/tracking_spi.d.ts +15 -5
- package/dist/cjs/tracking/tracking_spi.js +9 -0
- package/dist/cjs/tracking/umami_tracking_provider.d.ts +6 -2
- package/dist/cjs/tracking/umami_tracking_provider.js +66 -22
- package/dist/css/main.css +225 -22
- package/dist/css/main.css.map +1 -1
- package/dist/esm/AttachmentEdit/AttachmentEdit.d.ts +2 -0
- package/dist/esm/AttachmentEdit/AttachmentEdit.js +2 -2
- package/dist/esm/Chatbot/Chatbot.d.ts +2 -0
- package/dist/esm/Chatbot/Chatbot.js +2 -2
- package/dist/esm/Chatbot/Chatbot.test.js +4 -0
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +6 -0
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -3
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +27 -0
- package/dist/esm/ChatbotFooter/ChatbotFooter.d.ts +1 -0
- package/dist/esm/ChatbotFooter/ChatbotFooter.js +2 -2
- package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -1
- package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +5 -0
- package/dist/esm/ChatbotHeader/ChatbotHeader.js +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +4 -2
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +20 -6
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +5 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMain.js +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +3 -2
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +20 -6
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +5 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -3
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +5 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +2 -2
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +5 -0
- package/dist/esm/ChatbotModal/ChatbotModal.d.ts +3 -0
- package/dist/esm/ChatbotModal/ChatbotModal.js +2 -2
- package/dist/esm/ChatbotModal/ChatbotModal.test.d.ts +1 -0
- package/dist/esm/ChatbotModal/ChatbotModal.test.js +23 -0
- package/dist/esm/ChatbotPopover/ChatbotPopover.js +1 -1
- package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts +1 -0
- package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js +3 -3
- package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +4 -0
- package/dist/esm/CodeModal/CodeModal.d.ts +2 -0
- package/dist/esm/CodeModal/CodeModal.js +3 -3
- package/dist/esm/CodeModal/CodeModal.test.d.ts +1 -0
- package/dist/esm/CodeModal/CodeModal.test.js +10 -0
- package/dist/esm/FileDetails/FileDetails.js +1 -1
- package/dist/esm/Message/Message.d.ts +19 -1
- package/dist/esm/Message/Message.js +58 -39
- package/dist/esm/Message/Message.test.js +64 -0
- package/dist/esm/Message/MessageInput.d.ts +18 -0
- package/dist/esm/Message/MessageInput.js +29 -0
- package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +2 -0
- package/dist/esm/Message/QuickResponse/QuickResponse.js +2 -2
- package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +2 -0
- package/dist/esm/Message/QuickStarts/QuickStartTile.js +2 -2
- package/dist/esm/Message/UserFeedback/UserFeedback.js +4 -4
- package/dist/esm/Message/UserFeedback/UserFeedback.test.js +4 -0
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +4 -4
- package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
- package/dist/esm/MessageBar/AttachButton.d.ts +1 -0
- package/dist/esm/MessageBar/AttachButton.js +3 -3
- package/dist/esm/MessageBar/AttachButton.test.js +4 -0
- package/dist/esm/MessageBar/MessageBar.d.ts +5 -0
- package/dist/esm/MessageBar/MessageBar.js +14 -13
- package/dist/esm/MessageBar/MessageBar.test.js +13 -0
- package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -0
- package/dist/esm/MessageBar/MicrophoneButton.js +4 -4
- package/dist/esm/MessageBar/SendButton.d.ts +1 -0
- package/dist/esm/MessageBar/SendButton.js +3 -3
- package/dist/esm/MessageBar/SendButton.test.js +4 -0
- package/dist/esm/MessageBar/StopButton.d.ts +1 -0
- package/dist/esm/MessageBar/StopButton.js +3 -3
- package/dist/esm/MessageBar/StopButton.test.js +4 -0
- package/dist/esm/MessageBox/MessageBox.d.ts +4 -0
- package/dist/esm/MessageBox/MessageBox.js +21 -7
- package/dist/esm/MessageBox/MessageBox.test.js +44 -1
- package/dist/esm/PreviewAttachment/PreviewAttachment.d.ts +2 -0
- package/dist/esm/PreviewAttachment/PreviewAttachment.js +2 -2
- package/dist/esm/Settings/SettingsForm.d.ts +2 -0
- package/dist/esm/Settings/SettingsForm.js +2 -2
- package/dist/esm/Settings/SettingsForm.test.d.ts +1 -1
- package/dist/esm/Settings/SettingsForm.test.js +12 -0
- package/dist/esm/SourcesCard/SourcesCard.d.ts +7 -1
- package/dist/esm/SourcesCard/SourcesCard.js +18 -12
- package/dist/esm/SourcesCard/SourcesCard.test.js +25 -15
- package/dist/esm/TermsOfUse/TermsOfUse.d.ts +2 -0
- package/dist/esm/TermsOfUse/TermsOfUse.js +5 -5
- package/dist/esm/tracking/console_tracking_provider.d.ts +4 -5
- package/dist/esm/tracking/console_tracking_provider.js +22 -15
- package/dist/esm/tracking/posthog_tracking_provider.d.ts +2 -2
- package/dist/esm/tracking/posthog_tracking_provider.js +21 -12
- package/dist/esm/tracking/segment_tracking_provider.d.ts +2 -2
- package/dist/esm/tracking/segment_tracking_provider.js +21 -12
- package/dist/esm/tracking/trackingProviderProxy.d.ts +1 -1
- package/dist/esm/tracking/trackingProviderProxy.js +2 -2
- package/dist/esm/tracking/tracking_api.d.ts +1 -1
- package/dist/esm/tracking/tracking_registry.js +46 -12
- package/dist/esm/tracking/tracking_spi.d.ts +15 -5
- package/dist/esm/tracking/tracking_spi.js +8 -1
- package/dist/esm/tracking/umami_tracking_provider.d.ts +6 -2
- package/dist/esm/tracking/umami_tracking_provider.js +66 -22
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +18 -14
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx +10 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +74 -104
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx +48 -37
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +33 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +34 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +71 -13
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +3 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/PreviewAttachment.tsx +10 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +80 -104
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +44 -2
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx +13 -2
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithActions.tsx +9 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx +11 -2
- package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.tsx +289 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx +136 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +15 -1
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +8 -1
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +6 -3
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +2 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +2 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx +481 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +2 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +2 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +62 -57
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +2 -0
- package/src/AttachmentEdit/AttachmentEdit.tsx +5 -1
- package/src/Chatbot/Chatbot.scss +7 -0
- package/src/Chatbot/Chatbot.test.tsx +9 -0
- package/src/Chatbot/Chatbot.tsx +4 -1
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +38 -3
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +71 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +23 -2
- package/src/ChatbotFooter/ChatbotFooter.scss +5 -0
- package/src/ChatbotFooter/ChatbotFooter.test.tsx +10 -0
- package/src/ChatbotFooter/ChatbotFooter.tsx +3 -1
- package/src/ChatbotHeader/ChatbotHeader.scss +25 -0
- package/src/ChatbotHeader/ChatbotHeader.tsx +1 -1
- package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +6 -0
- package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +12 -6
- package/src/ChatbotHeader/ChatbotHeaderMain.tsx +3 -1
- package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +8 -0
- package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +10 -5
- package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +6 -0
- package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +5 -2
- package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +10 -0
- package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +4 -0
- package/src/ChatbotModal/ChatbotModal.scss +15 -4
- package/src/ChatbotModal/ChatbotModal.test.tsx +59 -0
- package/src/ChatbotModal/ChatbotModal.tsx +5 -1
- package/src/ChatbotPopover/ChatbotPopover.scss +9 -5
- package/src/ChatbotPopover/ChatbotPopover.tsx +1 -1
- package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss +9 -1
- package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx +13 -0
- package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx +13 -2
- package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap +1 -1
- package/src/CodeModal/CodeModal.scss +11 -3
- package/src/CodeModal/CodeModal.test.tsx +24 -0
- package/src/CodeModal/CodeModal.tsx +6 -2
- package/src/FileDetails/FileDetails.tsx +1 -1
- package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap +1 -1
- package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap +1 -1
- package/src/Message/Message.scss +31 -0
- package/src/Message/Message.test.tsx +83 -0
- package/src/Message/Message.tsx +121 -56
- package/src/Message/MessageInput.tsx +59 -0
- package/src/Message/QuickResponse/QuickResponse.tsx +5 -1
- package/src/Message/QuickStarts/QuickStartTile.tsx +5 -1
- package/src/Message/TextMessage/TextMessage.scss +25 -0
- package/src/Message/UserFeedback/UserFeedback.scss +24 -3
- package/src/Message/UserFeedback/UserFeedback.test.tsx +13 -0
- package/src/Message/UserFeedback/UserFeedback.tsx +4 -2
- package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +4 -0
- package/src/Message/UserFeedback/UserFeedbackComplete.tsx +10 -2
- package/src/MessageBar/AttachButton.scss +10 -0
- package/src/MessageBar/AttachButton.test.tsx +4 -0
- package/src/MessageBar/AttachButton.tsx +5 -2
- package/src/MessageBar/MessageBar.scss +17 -0
- package/src/MessageBar/MessageBar.test.tsx +13 -0
- package/src/MessageBar/MessageBar.tsx +23 -8
- package/src/MessageBar/MicrophoneButton.scss +10 -0
- package/src/MessageBar/MicrophoneButton.tsx +6 -3
- package/src/MessageBar/SendButton.scss +10 -0
- package/src/MessageBar/SendButton.test.tsx +5 -1
- package/src/MessageBar/SendButton.tsx +5 -2
- package/src/MessageBar/StopButton.scss +10 -0
- package/src/MessageBar/StopButton.test.tsx +5 -1
- package/src/MessageBar/StopButton.tsx +5 -2
- package/src/MessageBox/MessageBox.scss +6 -0
- package/src/MessageBox/MessageBox.test.tsx +45 -1
- package/src/MessageBox/MessageBox.tsx +16 -6
- package/src/PreviewAttachment/PreviewAttachment.tsx +5 -1
- package/src/Settings/Settings.scss +11 -0
- package/src/Settings/SettingsForm.test.tsx +17 -0
- package/src/Settings/SettingsForm.tsx +12 -2
- package/src/SourcesCard/SourcesCard.scss +11 -7
- package/src/SourcesCard/SourcesCard.test.tsx +30 -22
- package/src/SourcesCard/SourcesCard.tsx +56 -13
- package/src/TermsOfUse/TermsOfUse.scss +20 -0
- package/src/TermsOfUse/TermsOfUse.tsx +9 -4
- package/src/tracking/console_tracking_provider.ts +21 -17
- package/src/tracking/posthog_tracking_provider.ts +20 -13
- package/src/tracking/segment_tracking_provider.ts +20 -13
- package/src/tracking/trackingProviderProxy.ts +2 -2
- package/src/tracking/tracking_api.ts +1 -1
- package/src/tracking/tracking_registry.ts +46 -13
- package/src/tracking/tracking_spi.ts +18 -7
- package/src/tracking/umami_tracking_provider.ts +76 -20
- package/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap +0 -34
@@ -21,13 +21,13 @@ exports.ChatbotWelcomePrompt = void 0;
|
|
21
21
|
const react_1 = __importDefault(require("react"));
|
22
22
|
const react_core_1 = require("@patternfly/react-core");
|
23
23
|
const ChatbotWelcomePrompt = (_a) => {
|
24
|
-
var { title, description, prompts, className, testId } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId"]);
|
25
|
-
return (react_1.default.createElement("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${className !== null && className !== void 0 ? className : ''}` }, props),
|
24
|
+
var { title, description, prompts, className, testId, isCompact = false } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId", "isCompact"]);
|
25
|
+
return (react_1.default.createElement("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props),
|
26
26
|
react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.h1 },
|
27
27
|
react_1.default.createElement("span", { className: "pf-chatbot__hello" }, title),
|
28
28
|
react_1.default.createElement("br", null),
|
29
29
|
react_1.default.createElement("span", { className: "pf-chatbot__question" }, description)),
|
30
|
-
prompts && (react_1.default.createElement("div", { className: "pf-chatbot__prompt-suggestions" }, prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (react_1.default.createElement(react_core_1.Card, { key: `welcome-prompt-${index}`, className: "pf-chatbot__prompt-suggestion", isClickable: true },
|
30
|
+
prompts && (react_1.default.createElement("div", { className: "pf-chatbot__prompt-suggestions" }, prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => (react_1.default.createElement(react_core_1.Card, { key: `welcome-prompt-${index}`, className: "pf-chatbot__prompt-suggestion", isClickable: true, isCompact: isCompact },
|
31
31
|
react_1.default.createElement(react_core_1.CardHeader, { selectableActions: {
|
32
32
|
onClickAction: prompt.onClick,
|
33
33
|
selectableActionId: `welcome-prompt-input-${index}`,
|
@@ -54,4 +54,8 @@ describe('ChatbotWelcomePrompt', () => {
|
|
54
54
|
const element = react_2.screen.getByTestId('welcome-prompt');
|
55
55
|
expect(element).toHaveClass('test');
|
56
56
|
});
|
57
|
+
it('should handle isCompact', () => {
|
58
|
+
(0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt", isCompact: true }));
|
59
|
+
expect(react_2.screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
|
60
|
+
});
|
57
61
|
});
|
@@ -29,6 +29,8 @@ export interface CodeModalProps {
|
|
29
29
|
title: string;
|
30
30
|
/** Display mode for the Chatbot parent; this influences the styles applied */
|
31
31
|
displayMode?: ChatbotDisplayMode;
|
32
|
+
/** Sets modal to compact styling. */
|
33
|
+
isCompact?: boolean;
|
32
34
|
}
|
33
35
|
export declare const CodeModal: React.FunctionComponent<CodeModalProps>;
|
34
36
|
export default CodeModal;
|
@@ -50,7 +50,7 @@ const FileDetails_1 = __importStar(require("../FileDetails"));
|
|
50
50
|
const Chatbot_1 = require("../Chatbot");
|
51
51
|
const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
|
52
52
|
const CodeModal = (_a) => {
|
53
|
-
var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode"]);
|
53
|
+
var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact"]);
|
54
54
|
const [newCode, setNewCode] = react_1.default.useState(code);
|
55
55
|
const handlePrimaryAction = (_event) => {
|
56
56
|
handleModalToggle(_event);
|
@@ -75,13 +75,13 @@ const CodeModal = (_a) => {
|
|
75
75
|
setNewCode(value);
|
76
76
|
}
|
77
77
|
};
|
78
|
-
const modal = (react_1.default.createElement(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
|
78
|
+
const modal = (react_1.default.createElement(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact },
|
79
79
|
react_1.default.createElement(react_core_1.ModalHeader, { title: title, labelId: "code-modal-title" }),
|
80
80
|
react_1.default.createElement(react_core_1.ModalBody, { id: "code-modal-body" },
|
81
81
|
react_1.default.createElement(react_core_1.Stack, { className: "pf-chatbot__code-modal-body" },
|
82
82
|
react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details" },
|
83
83
|
react_1.default.createElement(FileDetails_1.default, { fileName: fileName })),
|
84
|
-
react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-
|
84
|
+
react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-editor" },
|
85
85
|
react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
|
86
86
|
glyphMargin: false,
|
87
87
|
folding: false
|
@@ -0,0 +1 @@
|
|
1
|
+
import '@testing-library/jest-dom';
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
const react_1 = __importDefault(require("react"));
|
7
|
+
const react_2 = require("@testing-library/react");
|
8
|
+
require("@testing-library/jest-dom");
|
9
|
+
const CodeModal_1 = __importDefault(require("./CodeModal"));
|
10
|
+
describe('ChatbotModal', () => {
|
11
|
+
it('should render compact modal', () => {
|
12
|
+
(0, react_2.render)(react_1.default.createElement(CodeModal_1.default, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel" }));
|
13
|
+
expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-m-compact');
|
14
|
+
});
|
15
|
+
});
|
@@ -935,7 +935,7 @@ exports.extensionToLanguage = {
|
|
935
935
|
const FileDetails = ({ className, fileName, fileNameClassName, languageTestId }) => {
|
936
936
|
var _a;
|
937
937
|
const language = (_a = exports.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
|
938
|
-
return (react_1.default.createElement(react_core_1.Flex, { className: `pf-chatbot__file-details ${className}`, gap: { default: 'gapSm' } },
|
938
|
+
return (react_1.default.createElement(react_core_1.Flex, { className: `pf-chatbot__file-details ${className ? className : ''}`, gap: { default: 'gapSm' } },
|
939
939
|
react_1.default.createElement(react_core_1.Flex, { className: "pf-chatbot__code-icon", justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
|
940
940
|
react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
|
941
941
|
react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }),
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { ReactNode } from 'react';
|
2
|
-
import { AlertProps, AvatarProps, LabelGroupProps } from '@patternfly/react-core';
|
2
|
+
import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
|
3
3
|
import { ActionProps } from '../ResponseActions/ResponseActions';
|
4
4
|
import { SourcesCardProps } from '../SourcesCard';
|
5
5
|
import { QuickStart, QuickstartAction } from './QuickStarts/types';
|
@@ -104,6 +104,24 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
104
104
|
openLinkInNewTab?: boolean;
|
105
105
|
/** Optional inline error message that can be displayed in the message */
|
106
106
|
error?: AlertProps;
|
107
|
+
/** Props for links */
|
108
|
+
linkProps?: ButtonProps;
|
109
|
+
/** Whether message is in edit mode */
|
110
|
+
isEditable?: boolean;
|
111
|
+
/** Placeholder for edit input */
|
112
|
+
editPlaceholder?: string;
|
113
|
+
/** Label for the English word "Update" used in edit mode. */
|
114
|
+
updateWord?: string;
|
115
|
+
/** Label for the English word "Cancel" used in edit mode. */
|
116
|
+
cancelWord?: string;
|
117
|
+
/** Callback function for when edit mode update button is clicked */
|
118
|
+
onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
119
|
+
/** Callback functionf or when edit cancel update button is clicked */
|
120
|
+
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
121
|
+
/** Props for edit form */
|
122
|
+
editFormProps?: FormProps;
|
123
|
+
/** Sets message to compact styling. */
|
124
|
+
isCompact?: boolean;
|
107
125
|
}
|
108
126
|
export declare const MessageBase: React.FunctionComponent<MessageProps>;
|
109
127
|
declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
@@ -47,8 +47,13 @@ const rehype_external_links_1 = __importDefault(require("rehype-external-links")
|
|
47
47
|
const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
|
48
48
|
const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
|
49
49
|
const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
|
50
|
+
const MessageInput_1 = __importDefault(require("./MessageInput"));
|
50
51
|
const MessageBase = (_a) => {
|
51
|
-
var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], error } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "error"]);
|
52
|
+
var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps", "isCompact"]);
|
53
|
+
const [messageText, setMessageText] = react_1.default.useState(content);
|
54
|
+
react_1.default.useEffect(() => {
|
55
|
+
setMessageText(content);
|
56
|
+
}, [content]);
|
52
57
|
const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
|
53
58
|
let rehypePlugins = [rehype_unwrap_images_1.default];
|
54
59
|
if (openLinkInNewTab) {
|
@@ -66,6 +71,51 @@ const MessageBase = (_a) => {
|
|
66
71
|
// Keep timestamps consistent between Timestamp component and aria-label
|
67
72
|
const date = new Date();
|
68
73
|
const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
|
74
|
+
const renderMessage = () => {
|
75
|
+
if (isLoading) {
|
76
|
+
return react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord });
|
77
|
+
}
|
78
|
+
if (isEditable) {
|
79
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
80
|
+
beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
|
81
|
+
react_1.default.createElement(MessageInput_1.default, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
|
82
|
+
onEditUpdate && onEditUpdate(event);
|
83
|
+
setMessageText(text);
|
84
|
+
}, onEditCancel: onEditCancel }, editFormProps))));
|
85
|
+
}
|
86
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
87
|
+
beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
|
88
|
+
error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
|
89
|
+
p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
|
90
|
+
code: (_a) => {
|
91
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
92
|
+
return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
|
93
|
+
},
|
94
|
+
h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
|
95
|
+
h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
|
96
|
+
h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
|
97
|
+
h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
|
98
|
+
h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
|
99
|
+
h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
|
100
|
+
blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
|
101
|
+
ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
|
102
|
+
ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
|
103
|
+
li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
|
104
|
+
table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
|
105
|
+
tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
|
106
|
+
thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
|
107
|
+
tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
|
108
|
+
td: (props) => {
|
109
|
+
// Conflicts with Td type
|
110
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
111
|
+
const { width } = props, rest = __rest(props, ["width"]);
|
112
|
+
return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
|
113
|
+
},
|
114
|
+
th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
|
115
|
+
img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
|
116
|
+
a: (props) => (react_1.default.createElement(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
|
117
|
+
}, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, messageText))));
|
118
|
+
};
|
69
119
|
return (react_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
|
70
120
|
react_1.default.createElement(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
|
71
121
|
react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
|
@@ -76,45 +126,14 @@ const MessageBase = (_a) => {
|
|
76
126
|
react_1.default.createElement(react_core_1.Timestamp, { date: date }, timestamp)),
|
77
127
|
react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
|
78
128
|
react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
code: (_a) => {
|
84
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
85
|
-
return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
|
86
|
-
},
|
87
|
-
h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
|
88
|
-
h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
|
89
|
-
h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
|
90
|
-
h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
|
91
|
-
h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
|
92
|
-
h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
|
93
|
-
blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
|
94
|
-
ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
|
95
|
-
ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
|
96
|
-
li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
|
97
|
-
table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
|
98
|
-
tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
|
99
|
-
thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
|
100
|
-
tr: (props) => react_1.default.createElement(TrMessage_1.default, Object.assign({}, props)),
|
101
|
-
td: (props) => {
|
102
|
-
// Conflicts with Td type
|
103
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
104
|
-
const { width } = props, rest = __rest(props, ["width"]);
|
105
|
-
return react_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
|
106
|
-
},
|
107
|
-
th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
|
108
|
-
img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
|
109
|
-
a: (props) => (react_1.default.createElement(LinkMessage_1.default, { href: props.href, rel: props.rel, target: props.target }, props.children))
|
110
|
-
}, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, content)),
|
111
|
-
afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent))),
|
112
|
-
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
|
113
|
-
quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
|
129
|
+
renderMessage(),
|
130
|
+
afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent),
|
131
|
+
!isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })),
|
132
|
+
quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })),
|
114
133
|
!isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
|
115
|
-
userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
|
116
|
-
userFeedbackComplete && react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
|
117
|
-
!isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
|
134
|
+
userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
|
135
|
+
userFeedbackComplete && (react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
|
136
|
+
!isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
|
118
137
|
attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
|
119
138
|
var _a;
|
120
139
|
return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
|
@@ -287,6 +287,18 @@ describe('Message', () => {
|
|
287
287
|
yield user_event_1.default.click(quickResponse);
|
288
288
|
expect(spy).toHaveBeenCalledTimes(1);
|
289
289
|
}));
|
290
|
+
it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
|
291
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
|
292
|
+
{
|
293
|
+
id: '1',
|
294
|
+
content: 'Yes',
|
295
|
+
onClick: jest.fn(),
|
296
|
+
className: 'test'
|
297
|
+
}
|
298
|
+
], isCompact: true }));
|
299
|
+
const parent = react_2.screen.getByRole('button', { name: /Yes/i }).parentNode;
|
300
|
+
expect(parent).toHaveClass('pf-m-compact');
|
301
|
+
}));
|
290
302
|
it('should be able to show more than 1 quick response', () => __awaiter(void 0, void 0, void 0, function* () {
|
291
303
|
const spy = jest.fn();
|
292
304
|
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
|
@@ -602,6 +614,12 @@ describe('Message', () => {
|
|
602
614
|
// we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
|
603
615
|
expect(rehype_external_links_1.default).not.toHaveBeenCalled();
|
604
616
|
});
|
617
|
+
it('should handle extra link props correctly', () => __awaiter(void 0, void 0, void 0, function* () {
|
618
|
+
const spy = jest.fn();
|
619
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, linkProps: { onClick: spy } }));
|
620
|
+
yield user_event_1.default.click(react_2.screen.getByRole('link', { name: /PatternFly/i }));
|
621
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
622
|
+
}));
|
605
623
|
it('should handle error correctly', () => {
|
606
624
|
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", error: ERROR }));
|
607
625
|
expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
|
@@ -619,4 +637,50 @@ describe('Message', () => {
|
|
619
637
|
expect(react_2.screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
|
620
638
|
expect(react_2.screen.queryByText('Test')).toBeFalsy();
|
621
639
|
});
|
640
|
+
it('should handle isEditable when there is message content', () => {
|
641
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
|
642
|
+
expect(react_2.screen.getByRole('textbox')).toBeTruthy();
|
643
|
+
expect(react_2.screen.getByRole('textbox')).toHaveValue('Test');
|
644
|
+
expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
|
645
|
+
expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
|
646
|
+
});
|
647
|
+
it('should handle isEditable when there is no message content', () => {
|
648
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true }));
|
649
|
+
expect(react_2.screen.getByRole('textbox')).toBeTruthy();
|
650
|
+
expect(react_2.screen.getByRole('textbox')).toHaveValue('');
|
651
|
+
expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
|
652
|
+
expect(react_2.screen.getByRole('button', { name: /Update/i })).toBeTruthy();
|
653
|
+
expect(react_2.screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
|
654
|
+
});
|
655
|
+
it('should be able to change edit placeholder', () => {
|
656
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
|
657
|
+
expect(react_2.screen.getByRole('textbox')).toBeTruthy();
|
658
|
+
expect(react_2.screen.getByRole('textbox')).toHaveValue('');
|
659
|
+
expect(react_2.screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
|
660
|
+
});
|
661
|
+
it('should be able to change updateWord', () => {
|
662
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
|
663
|
+
expect(react_2.screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
|
664
|
+
});
|
665
|
+
it('should be able to change cancelWord', () => {
|
666
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
|
667
|
+
expect(react_2.screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
|
668
|
+
});
|
669
|
+
it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
|
670
|
+
const spy = jest.fn();
|
671
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
|
672
|
+
yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Update/i }));
|
673
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
674
|
+
}));
|
675
|
+
it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
|
676
|
+
const spy = jest.fn();
|
677
|
+
(0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
|
678
|
+
yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Cancel/i }));
|
679
|
+
expect(spy).toHaveBeenCalledTimes(1);
|
680
|
+
}));
|
681
|
+
it('should be able to add editFormProps', () => {
|
682
|
+
const { container } = (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
|
683
|
+
const form = container.querySelector('form');
|
684
|
+
expect(form).toHaveClass('test');
|
685
|
+
});
|
622
686
|
});
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { FormProps } from '@patternfly/react-core';
|
3
|
+
export interface MessageInputProps extends FormProps {
|
4
|
+
/** Placeholder for edit input */
|
5
|
+
editPlaceholder?: string;
|
6
|
+
/** Label for the English word "Update" used in edit mode. */
|
7
|
+
updateWord?: string;
|
8
|
+
/** Label for the English word "Cancel" used in edit mode. */
|
9
|
+
cancelWord?: string;
|
10
|
+
/** Callback function for when edit mode update button is clicked */
|
11
|
+
onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
|
12
|
+
/** Callback functionf or when edit cancel update button is clicked */
|
13
|
+
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
14
|
+
/** Message text */
|
15
|
+
content?: string;
|
16
|
+
}
|
17
|
+
declare const MessageInput: React.FunctionComponent<MessageInputProps>;
|
18
|
+
export default MessageInput;
|
@@ -0,0 +1,34 @@
|
|
1
|
+
"use strict";
|
2
|
+
// ============================================================================
|
3
|
+
// Chatbot Main - Message Input
|
4
|
+
// ============================================================================
|
5
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
6
|
+
var t = {};
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
8
|
+
t[p] = s[p];
|
9
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
10
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
12
|
+
t[p[i]] = s[p[i]];
|
13
|
+
}
|
14
|
+
return t;
|
15
|
+
};
|
16
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
17
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
18
|
+
};
|
19
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
20
|
+
const react_1 = __importDefault(require("react"));
|
21
|
+
const react_core_1 = require("@patternfly/react-core");
|
22
|
+
const MessageInput = (_a) => {
|
23
|
+
var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
|
24
|
+
const [messageText, setMessageText] = react_1.default.useState(content !== null && content !== void 0 ? content : '');
|
25
|
+
const onChange = (event, value) => {
|
26
|
+
setMessageText(value);
|
27
|
+
};
|
28
|
+
return (react_1.default.createElement(react_core_1.Form, Object.assign({}, props),
|
29
|
+
react_1.default.createElement(react_core_1.TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
|
30
|
+
react_1.default.createElement(react_core_1.ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
|
31
|
+
react_1.default.createElement(react_core_1.Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
|
32
|
+
react_1.default.createElement(react_core_1.Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
|
33
|
+
};
|
34
|
+
exports.default = MessageInput;
|
@@ -12,6 +12,8 @@ export interface QuickResponseProps {
|
|
12
12
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
13
13
|
/** Callback when a response is clicked; used in feedback cards */
|
14
14
|
onSelect?: (id: string) => void;
|
15
|
+
/** Sets the quick responses to compact styling */
|
16
|
+
isCompact?: boolean;
|
15
17
|
}
|
16
18
|
export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
|
17
19
|
export default QuickResponse;
|
@@ -18,7 +18,7 @@ exports.QuickResponse = void 0;
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
19
19
|
const react_core_1 = require("@patternfly/react-core");
|
20
20
|
const react_icons_1 = require("@patternfly/react-icons");
|
21
|
-
const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
|
21
|
+
const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
|
22
22
|
const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
|
23
23
|
const handleQuickResponseClick = (id, onClick) => {
|
24
24
|
setSelectedQuickResponse(id);
|
@@ -27,7 +27,7 @@ const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabe
|
|
27
27
|
};
|
28
28
|
return (react_1.default.createElement(react_core_1.LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
|
29
29
|
var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
|
30
|
-
return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}
|
30
|
+
return (react_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props), content));
|
31
31
|
})));
|
32
32
|
};
|
33
33
|
exports.QuickResponse = QuickResponse;
|
@@ -22,6 +22,8 @@ export interface QuickStartTileProps {
|
|
22
22
|
prerequisiteWordPlural?: string;
|
23
23
|
/** Aria-label for the quick start description button */
|
24
24
|
quickStartButtonAriaLabel?: string;
|
25
|
+
/** Sets the tile to compact styling */
|
26
|
+
isCompact?: boolean;
|
25
27
|
}
|
26
28
|
declare const QuickStartTile: React.FC<QuickStartTileProps>;
|
27
29
|
export default QuickStartTile;
|
@@ -42,7 +42,7 @@ const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match
|
|
42
42
|
return index === 0 ? match.toLowerCase() : match.toUpperCase();
|
43
43
|
});
|
44
44
|
exports.camelize = camelize;
|
45
|
-
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action }) => {
|
45
|
+
const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
|
46
46
|
const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
|
47
47
|
let quickStartIcon;
|
48
48
|
if (typeof icon === 'object') {
|
@@ -63,7 +63,7 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
|
|
63
63
|
};
|
64
64
|
const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || outlined_bookmark_icon_1.default;
|
65
65
|
const additionalAction = action ? (React.createElement(react_core_1.Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
|
66
|
-
return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}
|
66
|
+
return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}`, isCompact: isCompact },
|
67
67
|
React.createElement(react_core_1.CardHeader, Object.assign({}, (action && {
|
68
68
|
actions: { actions: additionalAction }
|
69
69
|
})), quickStartIcon),
|
@@ -23,7 +23,7 @@ const react_core_1 = require("@patternfly/react-core");
|
|
23
23
|
const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
|
24
24
|
const CloseButton_1 = __importDefault(require("./CloseButton"));
|
25
25
|
const UserFeedback = (_a) => {
|
26
|
-
var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad"]);
|
26
|
+
var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
|
27
27
|
const [selectedResponse, setSelectedResponse] = react_1.default.useState();
|
28
28
|
const [value, setValue] = react_1.default.useState('');
|
29
29
|
const divRef = react_1.default.useRef(null);
|
@@ -36,14 +36,14 @@ const UserFeedback = (_a) => {
|
|
36
36
|
return (
|
37
37
|
/* card does not have ref forwarding; hence wrapper div */
|
38
38
|
react_1.default.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
|
39
|
-
react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
39
|
+
react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
40
40
|
react_1.default.createElement(react_core_1.CardHeader, { actions: {
|
41
41
|
actions: react_1.default.createElement(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
|
42
42
|
} },
|
43
43
|
react_1.default.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
|
44
44
|
react_1.default.createElement(react_core_1.CardBody, null,
|
45
|
-
react_1.default.createElement(react_core_1.Form, { className:
|
46
|
-
quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
|
45
|
+
react_1.default.createElement(react_core_1.Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
|
46
|
+
quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
|
47
47
|
hasTextArea && (react_1.default.createElement(react_core_1.TextArea, { value: value, onChange: (_event, value) => {
|
48
48
|
setValue(value);
|
49
49
|
onTextAreaChange && onTextAreaChange(_event, value);
|
@@ -130,4 +130,8 @@ describe('UserFeedback', () => {
|
|
130
130
|
(0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
|
131
131
|
expect(react_2.screen.getByTestId('card').parentElement).not.toHaveFocus();
|
132
132
|
});
|
133
|
+
it('should handle isCompact', () => {
|
134
|
+
(0, react_2.render)(react_1.default.createElement(UserFeedback_1.default, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
|
135
|
+
expect(react_2.screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
136
|
+
});
|
133
137
|
});
|
@@ -22,7 +22,7 @@ const react_1 = __importDefault(require("react"));
|
|
22
22
|
const react_core_1 = require("@patternfly/react-core");
|
23
23
|
const CloseButton_1 = __importDefault(require("./CloseButton"));
|
24
24
|
const UserFeedbackComplete = (_a) => {
|
25
|
-
var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad"]);
|
25
|
+
var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad", "isCompact"]);
|
26
26
|
const [timedOut, setTimedOut] = react_1.default.useState(false);
|
27
27
|
const [timedOutAnimation, setTimedOutAnimation] = react_1.default.useState(true);
|
28
28
|
const [isMouseOver, setIsMouseOver] = react_1.default.useState();
|
@@ -85,8 +85,8 @@ const UserFeedbackComplete = (_a) => {
|
|
85
85
|
'aria-live': 'polite',
|
86
86
|
'aria-atomic': 'false'
|
87
87
|
}), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps),
|
88
|
-
react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
|
89
|
-
react_1.default.createElement(react_core_1.CardHeader, { actions:
|
88
|
+
react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props),
|
89
|
+
react_1.default.createElement(react_core_1.CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions:
|
90
90
|
/* eslint-disable indent */
|
91
91
|
onClose
|
92
92
|
? {
|
@@ -112,6 +112,6 @@ const UserFeedbackComplete = (_a) => {
|
|
112
112
|
react_1.default.createElement("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" }))),
|
113
113
|
react_1.default.createElement("div", { className: "pf-chatbot__feedback-complete-text" },
|
114
114
|
react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__feedback-complete-title" }, title),
|
115
|
-
react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-body` }, body))))));
|
115
|
+
react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-card-body` }, body))))));
|
116
116
|
};
|
117
117
|
exports.default = UserFeedbackComplete;
|
@@ -246,4 +246,8 @@ describe('UserFeedbackComplete', () => {
|
|
246
246
|
(0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
|
247
247
|
expect(react_2.screen.getByTestId('card').parentElement).not.toHaveFocus();
|
248
248
|
});
|
249
|
+
it('should handle isCompact', () => {
|
250
|
+
(0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", isCompact: true }));
|
251
|
+
expect(react_2.screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
252
|
+
});
|
249
253
|
});
|
@@ -17,5 +17,6 @@ export interface AttachButtonProps extends ButtonProps {
|
|
17
17
|
tooltipContent?: string;
|
18
18
|
/** Test id applied to input */
|
19
19
|
inputTestId?: string;
|
20
|
+
isCompact?: boolean;
|
20
21
|
}
|
21
22
|
export declare const AttachButton: React.ForwardRefExoticComponent<AttachButtonProps & React.RefAttributes<any>>;
|
@@ -24,7 +24,7 @@ const react_core_1 = require("@patternfly/react-core");
|
|
24
24
|
const react_dropzone_1 = require("react-dropzone");
|
25
25
|
const paperclip_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paperclip-icon");
|
26
26
|
const AttachButtonBase = (_a) => {
|
27
|
-
var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId"]);
|
27
|
+
var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact"]);
|
28
28
|
const { open, getInputProps } = (0, react_dropzone_1.useDropzone)({
|
29
29
|
multiple: true,
|
30
30
|
onDropAccepted: onAttachAccepted
|
@@ -34,7 +34,7 @@ const AttachButtonBase = (_a) => {
|
|
34
34
|
react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0,
|
35
35
|
// prevents VO announcements of both aria label and tooltip
|
36
36
|
aria: "none" }, tooltipProps),
|
37
|
-
react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: react_1.default.createElement(react_core_1.Icon, { iconSize:
|
38
|
-
react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)) }, props)))));
|
37
|
+
react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
|
38
|
+
react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
|
39
39
|
};
|
40
40
|
exports.AttachButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));
|
@@ -63,4 +63,8 @@ describe('Attach button', () => {
|
|
63
63
|
expect(input.files).toHaveLength(1);
|
64
64
|
expect(spy).toHaveBeenCalledTimes(1);
|
65
65
|
}));
|
66
|
+
it('should handle isCompact', () => {
|
67
|
+
(0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isCompact: true, "data-testid": "button" }));
|
68
|
+
expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
|
69
|
+
});
|
66
70
|
});
|