@patternfly/chatbot 6.3.0-prerelease.1 → 6.3.0-prerelease.11
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 +2 -0
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +3 -3
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +4 -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/CodeBlockMessage/CodeBlockMessage.js +1 -1
- package/dist/cjs/Message/Message.d.ts +2 -0
- package/dist/cjs/Message/Message.js +6 -6
- package/dist/cjs/Message/Message.test.js +15 -3
- 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 +11 -7
- package/dist/cjs/MessageBar/MessageBar.d.ts +5 -0
- package/dist/cjs/MessageBar/MessageBar.js +14 -13
- package/dist/cjs/MessageBar/MessageBar.test.js +41 -28
- package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -0
- package/dist/cjs/MessageBar/MicrophoneButton.js +3 -3
- package/dist/cjs/MessageBar/SendButton.d.ts +1 -0
- package/dist/cjs/MessageBar/SendButton.js +3 -3
- package/dist/cjs/MessageBar/SendButton.test.js +9 -5
- package/dist/cjs/MessageBar/StopButton.d.ts +1 -0
- package/dist/cjs/MessageBar/StopButton.js +3 -3
- package/dist/cjs/MessageBar/StopButton.test.js +9 -5
- package/dist/cjs/MessageBox/JumpButton.js +1 -1
- package/dist/cjs/MessageBox/JumpButton.test.js +4 -4
- package/dist/cjs/MessageBox/MessageBox.d.ts +4 -0
- package/dist/cjs/MessageBox/MessageBox.js +16 -2
- 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.js +2 -2
- package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +2 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.js +5 -5
- package/dist/css/main.css +218 -15
- 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 +2 -0
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +3 -3
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +4 -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/CodeBlockMessage/CodeBlockMessage.js +1 -1
- package/dist/esm/Message/Message.d.ts +2 -0
- package/dist/esm/Message/Message.js +6 -6
- package/dist/esm/Message/Message.test.js +15 -3
- 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 +11 -7
- package/dist/esm/MessageBar/MessageBar.d.ts +5 -0
- package/dist/esm/MessageBar/MessageBar.js +14 -13
- package/dist/esm/MessageBar/MessageBar.test.js +41 -28
- package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -0
- package/dist/esm/MessageBar/MicrophoneButton.js +3 -3
- package/dist/esm/MessageBar/SendButton.d.ts +1 -0
- package/dist/esm/MessageBar/SendButton.js +3 -3
- package/dist/esm/MessageBar/SendButton.test.js +9 -5
- package/dist/esm/MessageBar/StopButton.d.ts +1 -0
- package/dist/esm/MessageBar/StopButton.js +3 -3
- package/dist/esm/MessageBar/StopButton.test.js +9 -5
- package/dist/esm/MessageBox/JumpButton.js +1 -1
- package/dist/esm/MessageBox/JumpButton.test.js +4 -4
- package/dist/esm/MessageBox/MessageBox.d.ts +4 -0
- package/dist/esm/MessageBox/MessageBox.js +16 -2
- 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.js +2 -2
- package/dist/esm/TermsOfUse/TermsOfUse.d.ts +2 -0
- package/dist/esm/TermsOfUse/TermsOfUse.js +5 -5
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx +10 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +33 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +24 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +21 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/PreviewAttachment.tsx +10 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +9 -0
- 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 +14 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +8 -1
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx +481 -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 +18 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +9 -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/CodeBlockMessage/CodeBlockMessage.tsx +1 -1
- package/src/Message/Message.scss +27 -0
- package/src/Message/Message.test.tsx +24 -3
- package/src/Message/Message.tsx +10 -3
- 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 +11 -7
- package/src/MessageBar/AttachButton.tsx +6 -3
- package/src/MessageBar/MessageBar.scss +17 -0
- package/src/MessageBar/MessageBar.test.tsx +41 -28
- package/src/MessageBar/MessageBar.tsx +23 -8
- package/src/MessageBar/MicrophoneButton.scss +10 -0
- package/src/MessageBar/MicrophoneButton.tsx +7 -3
- package/src/MessageBar/SendButton.scss +10 -0
- package/src/MessageBar/SendButton.test.tsx +10 -6
- package/src/MessageBar/SendButton.tsx +6 -3
- package/src/MessageBar/StopButton.scss +10 -0
- package/src/MessageBar/StopButton.test.tsx +10 -6
- package/src/MessageBar/StopButton.tsx +6 -3
- package/src/MessageBox/JumpButton.test.tsx +4 -4
- package/src/MessageBox/JumpButton.tsx +1 -1
- package/src/MessageBox/MessageBox.scss +6 -0
- package/src/MessageBox/MessageBox.test.tsx +45 -1
- package/src/MessageBox/MessageBox.tsx +11 -1
- 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 +8 -0
- package/src/SourcesCard/SourcesCard.tsx +2 -1
- package/src/TermsOfUse/TermsOfUse.scss +20 -0
- package/src/TermsOfUse/TermsOfUse.tsx +9 -4
@@ -40,6 +40,8 @@ export interface CodeModalProps {
|
|
40
40
|
title: string;
|
41
41
|
/** Display mode for the Chatbot parent; this influences the styles applied */
|
42
42
|
displayMode?: ChatbotDisplayMode;
|
43
|
+
/** Sets modal to compact styling. */
|
44
|
+
isCompact?: boolean;
|
43
45
|
}
|
44
46
|
|
45
47
|
export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
|
@@ -57,6 +59,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
|
|
57
59
|
secondaryActionBtn,
|
58
60
|
title,
|
59
61
|
displayMode = ChatbotDisplayMode.default,
|
62
|
+
isCompact,
|
60
63
|
...props
|
61
64
|
}: CodeModalProps) => {
|
62
65
|
const [newCode, setNewCode] = React.useState(code);
|
@@ -94,8 +97,9 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
|
|
94
97
|
ouiaId="CodeModal"
|
95
98
|
aria-labelledby="code-modal-title"
|
96
99
|
aria-describedby="code-modal"
|
97
|
-
className={`pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`}
|
100
|
+
className={`pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`}
|
98
101
|
displayMode={displayMode}
|
102
|
+
isCompact={isCompact}
|
99
103
|
>
|
100
104
|
<ModalHeader title={title} labelId="code-modal-title" />
|
101
105
|
<ModalBody id="code-modal-body">
|
@@ -103,7 +107,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
|
|
103
107
|
<StackItem className="pf-chatbot__code-modal-file-details">
|
104
108
|
<FileDetails fileName={fileName} />
|
105
109
|
</StackItem>
|
106
|
-
<StackItem className="pf-chatbot__code-modal-
|
110
|
+
<StackItem className="pf-chatbot__code-modal-editor">
|
107
111
|
<CodeEditor
|
108
112
|
isDarkTheme
|
109
113
|
isLineNumbersVisible={isLineNumbersVisible}
|
@@ -946,7 +946,7 @@ export const FileDetails = ({
|
|
946
946
|
}: PropsWithChildren<FileDetailsProps>) => {
|
947
947
|
const language = extensionToLanguage[path.extname(fileName).slice(1)]?.toUpperCase();
|
948
948
|
return (
|
949
|
-
<Flex className={`pf-chatbot__file-details ${className}`} gap={{ default: 'gapSm' }}>
|
949
|
+
<Flex className={`pf-chatbot__file-details ${className ? className : ''}`} gap={{ default: 'gapSm' }}>
|
950
950
|
<Flex
|
951
951
|
className="pf-chatbot__code-icon"
|
952
952
|
justifyContent={{ default: 'justifyContentCenter' }}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
exports[`FileDetails should render file details 1`] = `
|
4
4
|
<div>
|
5
5
|
<div
|
6
|
-
class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details
|
6
|
+
class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
|
7
7
|
>
|
8
8
|
<div
|
9
9
|
class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
|
@@ -15,7 +15,7 @@ exports[`FileDetailsLabel should render file details label 1`] = `
|
|
15
15
|
class="pf-chatbot__file-label-contents"
|
16
16
|
>
|
17
17
|
<div
|
18
|
-
class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details
|
18
|
+
class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
|
19
19
|
>
|
20
20
|
<div
|
21
21
|
class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
|
@@ -56,7 +56,7 @@ const CodeBlockMessage = ({
|
|
56
56
|
{language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
|
57
57
|
<Button
|
58
58
|
ref={buttonRef}
|
59
|
-
aria-label={ariaLabel ?? 'Copy code
|
59
|
+
aria-label={ariaLabel ?? 'Copy code'}
|
60
60
|
variant="plain"
|
61
61
|
className="pf-chatbot__button--copy"
|
62
62
|
onClick={(event) => handleCopy(event, children)}
|
package/src/Message/Message.scss
CHANGED
@@ -104,3 +104,30 @@
|
|
104
104
|
@import './MessageLoading';
|
105
105
|
@import './CodeBlockMessage/CodeBlockMessage';
|
106
106
|
@import './TextMessage/TextMessage';
|
107
|
+
|
108
|
+
// ============================================================================
|
109
|
+
// Information density styles
|
110
|
+
// ============================================================================
|
111
|
+
.pf-chatbot.pf-m-compact {
|
112
|
+
.pf-chatbot__message {
|
113
|
+
gap: var(--pf-t--global--spacer--md);
|
114
|
+
padding-bottom: var(--pf-t--global--spacer--sm);
|
115
|
+
|
116
|
+
.pf-chatbot__message-contents {
|
117
|
+
gap: var(--pf-t--global--spacer--xs);
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
.pf-chatbot__message-name {
|
122
|
+
font-size: var(--pf-t--global--font--size--xs);
|
123
|
+
}
|
124
|
+
|
125
|
+
.pf-chatbot__message-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
|
126
|
+
--pf-v6-c-avatar--Width: 2rem;
|
127
|
+
--pf-v6-c-avatar--Height: 2rem;
|
128
|
+
}
|
129
|
+
|
130
|
+
.pf-chatbot__message-contents {
|
131
|
+
gap: var(--pf-t--global--spacer--xs);
|
132
|
+
}
|
133
|
+
}
|
@@ -334,6 +334,27 @@ describe('Message', () => {
|
|
334
334
|
await userEvent.click(quickResponse);
|
335
335
|
expect(spy).toHaveBeenCalledTimes(1);
|
336
336
|
});
|
337
|
+
it('should be able to handle isCompact', async () => {
|
338
|
+
render(
|
339
|
+
<Message
|
340
|
+
avatar="./img"
|
341
|
+
role="bot"
|
342
|
+
name="Bot"
|
343
|
+
content="Hi"
|
344
|
+
quickResponses={[
|
345
|
+
{
|
346
|
+
id: '1',
|
347
|
+
content: 'Yes',
|
348
|
+
onClick: jest.fn(),
|
349
|
+
className: 'test'
|
350
|
+
}
|
351
|
+
]}
|
352
|
+
isCompact
|
353
|
+
/>
|
354
|
+
);
|
355
|
+
const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
|
356
|
+
expect(parent).toHaveClass('pf-m-compact');
|
357
|
+
});
|
337
358
|
it('should be able to show more than 1 quick response', async () => {
|
338
359
|
const spy = jest.fn();
|
339
360
|
render(
|
@@ -464,7 +485,7 @@ describe('Message', () => {
|
|
464
485
|
it('should render code correctly', () => {
|
465
486
|
render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
|
466
487
|
expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
|
467
|
-
expect(screen.getByRole('button', { name: 'Copy code
|
488
|
+
expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
|
468
489
|
expect(screen.getByText(/yaml/)).toBeTruthy();
|
469
490
|
expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
|
470
491
|
expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
|
@@ -482,8 +503,8 @@ describe('Message', () => {
|
|
482
503
|
// need explicit setup since RTL stubs clipboard if you do this
|
483
504
|
const user = userEvent.setup();
|
484
505
|
render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
|
485
|
-
expect(screen.getByRole('button', { name: 'Copy code
|
486
|
-
await user.click(screen.getByRole('button', { name: 'Copy code
|
506
|
+
expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
|
507
|
+
await user.click(screen.getByRole('button', { name: 'Copy code' }));
|
487
508
|
const clipboardText = await navigator.clipboard.readText();
|
488
509
|
expect(clipboardText.trim()).toEqual(CODE.trim());
|
489
510
|
});
|
package/src/Message/Message.tsx
CHANGED
@@ -164,6 +164,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
|
|
164
164
|
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
165
165
|
/** Props for edit form */
|
166
166
|
editFormProps?: FormProps;
|
167
|
+
/** Sets message to compact styling. */
|
168
|
+
isCompact?: boolean;
|
167
169
|
}
|
168
170
|
|
169
171
|
export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
@@ -201,6 +203,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
201
203
|
onEditUpdate,
|
202
204
|
onEditCancel,
|
203
205
|
editFormProps,
|
206
|
+
isCompact,
|
204
207
|
...props
|
205
208
|
}: MessageProps) => {
|
206
209
|
const [messageText, setMessageText] = React.useState(content);
|
@@ -336,7 +339,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
336
339
|
<div className="pf-chatbot__message-and-actions">
|
337
340
|
{renderMessage()}
|
338
341
|
{afterMainContent && <>{afterMainContent}</>}
|
339
|
-
{!isLoading && sources && <SourcesCard {...sources} />}
|
342
|
+
{!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
|
340
343
|
{quickStarts && quickStarts.quickStart && (
|
341
344
|
<QuickStartTile
|
342
345
|
quickStart={quickStarts.quickStart}
|
@@ -346,15 +349,19 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
|
|
346
349
|
prerequisiteWord={quickStarts.prerequisiteWord}
|
347
350
|
prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
|
348
351
|
quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
|
352
|
+
isCompact={isCompact}
|
349
353
|
/>
|
350
354
|
)}
|
351
355
|
{!isLoading && actions && <ResponseActions actions={actions} />}
|
352
|
-
{userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
|
353
|
-
{userFeedbackComplete &&
|
356
|
+
{userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
|
357
|
+
{userFeedbackComplete && (
|
358
|
+
<UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
|
359
|
+
)}
|
354
360
|
{!isLoading && quickResponses && (
|
355
361
|
<QuickResponse
|
356
362
|
quickResponses={quickResponses}
|
357
363
|
quickResponseContainerProps={quickResponseContainerProps}
|
364
|
+
isCompact={isCompact}
|
358
365
|
/>
|
359
366
|
)}
|
360
367
|
</div>
|
@@ -15,12 +15,15 @@ export interface QuickResponseProps {
|
|
15
15
|
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
|
16
16
|
/** Callback when a response is clicked; used in feedback cards */
|
17
17
|
onSelect?: (id: string) => void;
|
18
|
+
/** Sets the quick responses to compact styling */
|
19
|
+
isCompact?: boolean;
|
18
20
|
}
|
19
21
|
|
20
22
|
export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
|
21
23
|
quickResponses,
|
22
24
|
quickResponseContainerProps = { numLabels: 5 },
|
23
|
-
onSelect
|
25
|
+
onSelect,
|
26
|
+
isCompact
|
24
27
|
}: QuickResponseProps) => {
|
25
28
|
const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
|
26
29
|
|
@@ -42,6 +45,7 @@ export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
|
|
42
45
|
key={id}
|
43
46
|
onClick={() => handleQuickResponseClick(id, onClick)}
|
44
47
|
className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
|
48
|
+
isCompact={isCompact}
|
45
49
|
{...props}
|
46
50
|
>
|
47
51
|
{content}
|
@@ -49,6 +49,8 @@ export interface QuickStartTileProps {
|
|
49
49
|
prerequisiteWordPlural?: string;
|
50
50
|
/** Aria-label for the quick start description button */
|
51
51
|
quickStartButtonAriaLabel?: string;
|
52
|
+
/** Sets the tile to compact styling */
|
53
|
+
isCompact?: boolean;
|
52
54
|
}
|
53
55
|
|
54
56
|
const QuickStartTile: React.FC<QuickStartTileProps> = ({
|
@@ -61,7 +63,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
|
|
61
63
|
prerequisiteWord,
|
62
64
|
prerequisiteWordPlural,
|
63
65
|
quickStartButtonAriaLabel,
|
64
|
-
action
|
66
|
+
action,
|
67
|
+
isCompact
|
65
68
|
}) => {
|
66
69
|
const {
|
67
70
|
metadata: { name: id },
|
@@ -105,6 +108,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
|
|
105
108
|
id={`${id}-chatbot-qs-tile`}
|
106
109
|
style={{ height: '100%' }}
|
107
110
|
data-testid={`chatbot-qs-card-${camelize(displayName)}`}
|
111
|
+
isCompact={isCompact}
|
108
112
|
>
|
109
113
|
<CardHeader
|
110
114
|
{...(action && {
|
@@ -58,3 +58,28 @@
|
|
58
58
|
}
|
59
59
|
}
|
60
60
|
}
|
61
|
+
|
62
|
+
// ============================================================================
|
63
|
+
// Information density styles
|
64
|
+
// ============================================================================
|
65
|
+
.pf-chatbot.pf-m-compact {
|
66
|
+
// Need to inline shorter text
|
67
|
+
.pf-chatbot__message-text {
|
68
|
+
.pf-v6-c-button.pf-m-link {
|
69
|
+
font-size: var(--pf-t--global--font--size--sm);
|
70
|
+
}
|
71
|
+
|
72
|
+
.pf-v6-c-content,
|
73
|
+
.pf-v6-c-content--small,
|
74
|
+
.pf-v6-c-content--blockquote,
|
75
|
+
p,
|
76
|
+
a {
|
77
|
+
--pf-v6-c-content--FontSize: var(--pf-t--global--font--size--sm);
|
78
|
+
}
|
79
|
+
|
80
|
+
.pf-v6-c-content--blockquote {
|
81
|
+
--pf-v6-c-content--blockquote--PaddingBlockStart: 0;
|
82
|
+
--pf-v6-c-content--blockquote--PaddingBlockEnd: 0;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
}
|
@@ -11,6 +11,7 @@
|
|
11
11
|
flex-direction: column;
|
12
12
|
gap: var(--pf-t--global--spacer--lg);
|
13
13
|
align-items: center;
|
14
|
+
text-align: center;
|
14
15
|
}
|
15
16
|
.pf-chatbot__feedback-complete-text {
|
16
17
|
display: flex;
|
@@ -26,9 +27,6 @@
|
|
26
27
|
align-items: center;
|
27
28
|
justify-content: center;
|
28
29
|
}
|
29
|
-
.pf-chatbot__feedback-complete-body {
|
30
|
-
text-align: center;
|
31
|
-
}
|
32
30
|
.pf-chatbot__feedback-complete-title {
|
33
31
|
font-family: var(--pf-t--global--font--family--heading);
|
34
32
|
font-size: var(--pf-t--global--font--size--lg);
|
@@ -51,3 +49,26 @@
|
|
51
49
|
.pf-chatbot__feedback-card-optional {
|
52
50
|
font-weight: initial;
|
53
51
|
}
|
52
|
+
|
53
|
+
// Compact styles
|
54
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
|
55
|
+
.pf-chatbot__feedback-card-form.pf-m-compact {
|
56
|
+
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete {
|
61
|
+
div.pf-chatbot__feedback-complete-body {
|
62
|
+
gap: var(--pf-t--global--spacer--sm);
|
63
|
+
}
|
64
|
+
|
65
|
+
.pf-chatbot__feedback-complete-image {
|
66
|
+
width: 40px;
|
67
|
+
}
|
68
|
+
|
69
|
+
.pf-chatbot__feedback-card-complete-empty-header {
|
70
|
+
.pf-v6-c-card__header:first-child {
|
71
|
+
--pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
@@ -233,4 +233,17 @@ describe('UserFeedback', () => {
|
|
233
233
|
);
|
234
234
|
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
235
235
|
});
|
236
|
+
it('should handle isCompact', () => {
|
237
|
+
render(
|
238
|
+
<UserFeedback
|
239
|
+
timestamp="12/12/12"
|
240
|
+
onClose={jest.fn}
|
241
|
+
onSubmit={jest.fn}
|
242
|
+
quickResponses={MOCK_RESPONSES}
|
243
|
+
data-testid="card"
|
244
|
+
isCompact
|
245
|
+
/>
|
246
|
+
);
|
247
|
+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
248
|
+
});
|
236
249
|
});
|
@@ -71,6 +71,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
|
|
71
71
|
id,
|
72
72
|
headingLevel: HeadingLevel = 'h1',
|
73
73
|
focusOnLoad = true,
|
74
|
+
isCompact,
|
74
75
|
...props
|
75
76
|
}: UserFeedbackProps) => {
|
76
77
|
const [selectedResponse, setSelectedResponse] = React.useState<string>();
|
@@ -86,7 +87,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
|
|
86
87
|
return (
|
87
88
|
/* card does not have ref forwarding; hence wrapper div */
|
88
89
|
<div ref={divRef} id={id} tabIndex={0} aria-label={title}>
|
89
|
-
<Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
|
90
|
+
<Card isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
|
90
91
|
<CardHeader
|
91
92
|
actions={{
|
92
93
|
actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
|
@@ -95,12 +96,13 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
|
|
95
96
|
<HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
|
96
97
|
</CardHeader>
|
97
98
|
<CardBody>
|
98
|
-
<Form className=
|
99
|
+
<Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
|
99
100
|
{quickResponses && (
|
100
101
|
<QuickResponse
|
101
102
|
quickResponses={quickResponses}
|
102
103
|
quickResponseContainerProps={quickResponseContainerProps}
|
103
104
|
onSelect={(id) => setSelectedResponse(id)}
|
105
|
+
isCompact={isCompact}
|
104
106
|
/>
|
105
107
|
)}
|
106
108
|
{hasTextArea && (
|
@@ -252,4 +252,8 @@ describe('UserFeedbackComplete', () => {
|
|
252
252
|
render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
|
253
253
|
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
|
254
254
|
});
|
255
|
+
it('should handle isCompact', () => {
|
256
|
+
render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" isCompact />);
|
257
|
+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
|
258
|
+
});
|
255
259
|
});
|
@@ -63,6 +63,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
|
|
63
63
|
isLiveRegion,
|
64
64
|
id,
|
65
65
|
focusOnLoad = true,
|
66
|
+
isCompact,
|
66
67
|
...props
|
67
68
|
}: UserFeedbackCompleteProps) => {
|
68
69
|
const [timedOut, setTimedOut] = React.useState(false);
|
@@ -143,8 +144,15 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
|
|
143
144
|
aria-label={title}
|
144
145
|
{...ouiaProps}
|
145
146
|
>
|
146
|
-
<Card
|
147
|
+
<Card
|
148
|
+
isCompact={isCompact}
|
149
|
+
className={`pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}`}
|
150
|
+
{...props}
|
151
|
+
>
|
147
152
|
<CardHeader
|
153
|
+
className={
|
154
|
+
onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header'
|
155
|
+
}
|
148
156
|
actions={
|
149
157
|
/* eslint-disable indent */
|
150
158
|
onClose
|
@@ -200,7 +208,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
|
|
200
208
|
</div>
|
201
209
|
<div className="pf-chatbot__feedback-complete-text">
|
202
210
|
<CardTitle className="pf-chatbot__feedback-complete-title">{title}</CardTitle>
|
203
|
-
<CardBody className={`pf-chatbot__feedback-complete-body`}>{body}</CardBody>
|
211
|
+
<CardBody className={`pf-chatbot__feedback-complete-card-body`}>{body}</CardBody>
|
204
212
|
</div>
|
205
213
|
</div>
|
206
214
|
</Card>
|
@@ -34,3 +34,13 @@
|
|
34
34
|
}
|
35
35
|
}
|
36
36
|
}
|
37
|
+
|
38
|
+
// ============================================================================
|
39
|
+
// Information density styles
|
40
|
+
// ============================================================================
|
41
|
+
.pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
|
42
|
+
width: 1.5rem;
|
43
|
+
height: 1.5rem;
|
44
|
+
padding: var(--pf-t--global--spacer--sm);
|
45
|
+
align-items: center;
|
46
|
+
}
|
@@ -7,11 +7,11 @@ import { AttachButton } from './AttachButton';
|
|
7
7
|
describe('Attach button', () => {
|
8
8
|
it('should render button correctly', () => {
|
9
9
|
render(<AttachButton />);
|
10
|
-
expect(screen.getByRole('button', { name: 'Attach
|
10
|
+
expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
|
11
11
|
});
|
12
12
|
it('should handle isDisabled prop', () => {
|
13
13
|
render(<AttachButton isDisabled />);
|
14
|
-
expect(screen.getByRole('button', { name: 'Attach
|
14
|
+
expect(screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
|
15
15
|
});
|
16
16
|
it('should handle spread props, including aria-label', () => {
|
17
17
|
render(<AttachButton aria-label="test" />);
|
@@ -20,22 +20,22 @@ describe('Attach button', () => {
|
|
20
20
|
it('should handle onClick', async () => {
|
21
21
|
const spy = jest.fn();
|
22
22
|
render(<AttachButton onClick={spy} />);
|
23
|
-
await userEvent.click(screen.getByRole('button', { name: 'Attach
|
23
|
+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
|
24
24
|
expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
|
25
25
|
expect(spy).toHaveBeenCalledTimes(1);
|
26
26
|
});
|
27
27
|
it('should handle className prop', () => {
|
28
28
|
render(<AttachButton className="test" />);
|
29
|
-
expect(screen.getByRole('button', { name: 'Attach
|
29
|
+
expect(screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
|
30
30
|
});
|
31
31
|
it('should handle custom tooltip correctly', async () => {
|
32
32
|
render(<AttachButton onClick={jest.fn} tooltipContent="Test" />);
|
33
|
-
await userEvent.click(screen.getByRole('button', { name: 'Attach
|
33
|
+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
|
34
34
|
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
|
35
35
|
});
|
36
36
|
it('should handle tooltipProps prop', async () => {
|
37
37
|
render(<AttachButton tooltipProps={{ id: 'test' }} />);
|
38
|
-
await userEvent.click(screen.getByRole('button', { name: 'Attach
|
38
|
+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
|
39
39
|
expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
|
40
40
|
});
|
41
41
|
// Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
|
@@ -43,11 +43,15 @@ describe('Attach button', () => {
|
|
43
43
|
it('should handle onAttachAccepted prop', async () => {
|
44
44
|
const spy = jest.fn();
|
45
45
|
render(<AttachButton onAttachAccepted={spy} inputTestId="input" />);
|
46
|
-
await userEvent.click(screen.getByRole('button', { name: 'Attach
|
46
|
+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
|
47
47
|
const file = new File(['test'], 'test.json');
|
48
48
|
const input = screen.getByTestId('input') as HTMLInputElement;
|
49
49
|
await userEvent.upload(input, file);
|
50
50
|
expect(input.files).toHaveLength(1);
|
51
51
|
expect(spy).toHaveBeenCalledTimes(1);
|
52
52
|
});
|
53
|
+
it('should handle isCompact', () => {
|
54
|
+
render(<AttachButton isCompact data-testid="button" />);
|
55
|
+
expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
|
56
|
+
});
|
53
57
|
});
|
@@ -25,6 +25,7 @@ export interface AttachButtonProps extends ButtonProps {
|
|
25
25
|
tooltipContent?: string;
|
26
26
|
/** Test id applied to input */
|
27
27
|
inputTestId?: string;
|
28
|
+
isCompact?: boolean;
|
28
29
|
}
|
29
30
|
|
30
31
|
const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
|
@@ -36,6 +37,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
|
|
36
37
|
innerRef,
|
37
38
|
tooltipContent = 'Attach',
|
38
39
|
inputTestId,
|
40
|
+
isCompact,
|
39
41
|
...props
|
40
42
|
}: AttachButtonProps) => {
|
41
43
|
const { open, getInputProps } = useDropzone({
|
@@ -62,15 +64,16 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
|
|
62
64
|
<Button
|
63
65
|
variant="plain"
|
64
66
|
ref={innerRef}
|
65
|
-
className={`pf-chatbot__button--attach ${className ?? ''}`}
|
66
|
-
aria-label={props['aria-label'] || 'Attach
|
67
|
+
className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
|
68
|
+
aria-label={props['aria-label'] || 'Attach'}
|
67
69
|
isDisabled={isDisabled}
|
68
70
|
onClick={onClick ?? open}
|
69
71
|
icon={
|
70
|
-
<Icon iconSize=
|
72
|
+
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
|
71
73
|
<PaperclipIcon />
|
72
74
|
</Icon>
|
73
75
|
}
|
76
|
+
size={isCompact ? 'sm' : undefined}
|
74
77
|
{...props}
|
75
78
|
/>
|
76
79
|
</Tooltip>
|
@@ -110,3 +110,20 @@
|
|
110
110
|
}
|
111
111
|
}
|
112
112
|
}
|
113
|
+
|
114
|
+
// ============================================================================
|
115
|
+
// Information density styles
|
116
|
+
// ============================================================================
|
117
|
+
.pf-chatbot__message-bar-input.pf-m-compact {
|
118
|
+
padding-block-start: 0;
|
119
|
+
padding-block-end: 0;
|
120
|
+
|
121
|
+
.pf-chatbot__message-textarea {
|
122
|
+
font-size: var(--pf-t--global--font--size--sm) !important;
|
123
|
+
}
|
124
|
+
|
125
|
+
.pf-chatbot__message-bar-actions {
|
126
|
+
padding-block-start: var(--pf-t--global--spacer--md);
|
127
|
+
padding-block-end: var(--pf-t--global--spacer--md);
|
128
|
+
}
|
129
|
+
}
|