@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.
Files changed (259) hide show
  1. package/dist/cjs/AttachmentEdit/AttachmentEdit.d.ts +2 -0
  2. package/dist/cjs/AttachmentEdit/AttachmentEdit.js +2 -2
  3. package/dist/cjs/Chatbot/Chatbot.d.ts +2 -0
  4. package/dist/cjs/Chatbot/Chatbot.js +2 -2
  5. package/dist/cjs/Chatbot/Chatbot.test.js +4 -0
  6. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +2 -0
  7. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +3 -3
  8. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +4 -0
  9. package/dist/cjs/ChatbotFooter/ChatbotFooter.d.ts +1 -0
  10. package/dist/cjs/ChatbotFooter/ChatbotFooter.js +2 -2
  11. package/dist/cjs/ChatbotFooter/ChatbotFooter.test.d.ts +1 -1
  12. package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js +5 -0
  13. package/dist/cjs/ChatbotHeader/ChatbotHeader.js +1 -1
  14. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +4 -2
  15. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +20 -6
  16. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -1
  17. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js +5 -0
  18. package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.js +1 -1
  19. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts +3 -2
  20. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +20 -6
  21. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -1
  22. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js +5 -0
  23. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts +1 -0
  24. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -3
  25. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -1
  26. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +5 -0
  27. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts +1 -0
  28. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +2 -2
  29. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -1
  30. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +5 -0
  31. package/dist/cjs/ChatbotModal/ChatbotModal.d.ts +3 -0
  32. package/dist/cjs/ChatbotModal/ChatbotModal.js +2 -2
  33. package/dist/cjs/ChatbotModal/ChatbotModal.test.d.ts +1 -0
  34. package/dist/cjs/ChatbotModal/ChatbotModal.test.js +28 -0
  35. package/dist/cjs/ChatbotPopover/ChatbotPopover.js +1 -1
  36. package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts +1 -0
  37. package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js +3 -3
  38. package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +4 -0
  39. package/dist/cjs/CodeModal/CodeModal.d.ts +2 -0
  40. package/dist/cjs/CodeModal/CodeModal.js +3 -3
  41. package/dist/cjs/CodeModal/CodeModal.test.d.ts +1 -0
  42. package/dist/cjs/CodeModal/CodeModal.test.js +15 -0
  43. package/dist/cjs/FileDetails/FileDetails.js +1 -1
  44. package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js +1 -1
  45. package/dist/cjs/Message/Message.d.ts +2 -0
  46. package/dist/cjs/Message/Message.js +6 -6
  47. package/dist/cjs/Message/Message.test.js +15 -3
  48. package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +2 -0
  49. package/dist/cjs/Message/QuickResponse/QuickResponse.js +2 -2
  50. package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +2 -0
  51. package/dist/cjs/Message/QuickStarts/QuickStartTile.js +2 -2
  52. package/dist/cjs/Message/UserFeedback/UserFeedback.js +4 -4
  53. package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +4 -0
  54. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +4 -4
  55. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
  56. package/dist/cjs/MessageBar/AttachButton.d.ts +1 -0
  57. package/dist/cjs/MessageBar/AttachButton.js +3 -3
  58. package/dist/cjs/MessageBar/AttachButton.test.js +11 -7
  59. package/dist/cjs/MessageBar/MessageBar.d.ts +5 -0
  60. package/dist/cjs/MessageBar/MessageBar.js +14 -13
  61. package/dist/cjs/MessageBar/MessageBar.test.js +41 -28
  62. package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -0
  63. package/dist/cjs/MessageBar/MicrophoneButton.js +3 -3
  64. package/dist/cjs/MessageBar/SendButton.d.ts +1 -0
  65. package/dist/cjs/MessageBar/SendButton.js +3 -3
  66. package/dist/cjs/MessageBar/SendButton.test.js +9 -5
  67. package/dist/cjs/MessageBar/StopButton.d.ts +1 -0
  68. package/dist/cjs/MessageBar/StopButton.js +3 -3
  69. package/dist/cjs/MessageBar/StopButton.test.js +9 -5
  70. package/dist/cjs/MessageBox/JumpButton.js +1 -1
  71. package/dist/cjs/MessageBox/JumpButton.test.js +4 -4
  72. package/dist/cjs/MessageBox/MessageBox.d.ts +4 -0
  73. package/dist/cjs/MessageBox/MessageBox.js +16 -2
  74. package/dist/cjs/MessageBox/MessageBox.test.js +43 -0
  75. package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts +2 -0
  76. package/dist/cjs/PreviewAttachment/PreviewAttachment.js +2 -2
  77. package/dist/cjs/Settings/SettingsForm.d.ts +2 -0
  78. package/dist/cjs/Settings/SettingsForm.js +2 -2
  79. package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -1
  80. package/dist/cjs/Settings/SettingsForm.test.js +12 -0
  81. package/dist/cjs/SourcesCard/SourcesCard.js +2 -2
  82. package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +2 -0
  83. package/dist/cjs/TermsOfUse/TermsOfUse.js +5 -5
  84. package/dist/css/main.css +218 -15
  85. package/dist/css/main.css.map +1 -1
  86. package/dist/esm/AttachmentEdit/AttachmentEdit.d.ts +2 -0
  87. package/dist/esm/AttachmentEdit/AttachmentEdit.js +2 -2
  88. package/dist/esm/Chatbot/Chatbot.d.ts +2 -0
  89. package/dist/esm/Chatbot/Chatbot.js +2 -2
  90. package/dist/esm/Chatbot/Chatbot.test.js +4 -0
  91. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +2 -0
  92. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +3 -3
  93. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +4 -0
  94. package/dist/esm/ChatbotFooter/ChatbotFooter.d.ts +1 -0
  95. package/dist/esm/ChatbotFooter/ChatbotFooter.js +2 -2
  96. package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -1
  97. package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +5 -0
  98. package/dist/esm/ChatbotHeader/ChatbotHeader.js +1 -1
  99. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +4 -2
  100. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +20 -6
  101. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -1
  102. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +5 -0
  103. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.js +1 -1
  104. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +3 -2
  105. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +20 -6
  106. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -1
  107. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +5 -0
  108. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts +1 -0
  109. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -3
  110. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -1
  111. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +5 -0
  112. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts +1 -0
  113. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +2 -2
  114. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -1
  115. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +5 -0
  116. package/dist/esm/ChatbotModal/ChatbotModal.d.ts +3 -0
  117. package/dist/esm/ChatbotModal/ChatbotModal.js +2 -2
  118. package/dist/esm/ChatbotModal/ChatbotModal.test.d.ts +1 -0
  119. package/dist/esm/ChatbotModal/ChatbotModal.test.js +23 -0
  120. package/dist/esm/ChatbotPopover/ChatbotPopover.js +1 -1
  121. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts +1 -0
  122. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js +3 -3
  123. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +4 -0
  124. package/dist/esm/CodeModal/CodeModal.d.ts +2 -0
  125. package/dist/esm/CodeModal/CodeModal.js +3 -3
  126. package/dist/esm/CodeModal/CodeModal.test.d.ts +1 -0
  127. package/dist/esm/CodeModal/CodeModal.test.js +10 -0
  128. package/dist/esm/FileDetails/FileDetails.js +1 -1
  129. package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js +1 -1
  130. package/dist/esm/Message/Message.d.ts +2 -0
  131. package/dist/esm/Message/Message.js +6 -6
  132. package/dist/esm/Message/Message.test.js +15 -3
  133. package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +2 -0
  134. package/dist/esm/Message/QuickResponse/QuickResponse.js +2 -2
  135. package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +2 -0
  136. package/dist/esm/Message/QuickStarts/QuickStartTile.js +2 -2
  137. package/dist/esm/Message/UserFeedback/UserFeedback.js +4 -4
  138. package/dist/esm/Message/UserFeedback/UserFeedback.test.js +4 -0
  139. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +4 -4
  140. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
  141. package/dist/esm/MessageBar/AttachButton.d.ts +1 -0
  142. package/dist/esm/MessageBar/AttachButton.js +3 -3
  143. package/dist/esm/MessageBar/AttachButton.test.js +11 -7
  144. package/dist/esm/MessageBar/MessageBar.d.ts +5 -0
  145. package/dist/esm/MessageBar/MessageBar.js +14 -13
  146. package/dist/esm/MessageBar/MessageBar.test.js +41 -28
  147. package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -0
  148. package/dist/esm/MessageBar/MicrophoneButton.js +3 -3
  149. package/dist/esm/MessageBar/SendButton.d.ts +1 -0
  150. package/dist/esm/MessageBar/SendButton.js +3 -3
  151. package/dist/esm/MessageBar/SendButton.test.js +9 -5
  152. package/dist/esm/MessageBar/StopButton.d.ts +1 -0
  153. package/dist/esm/MessageBar/StopButton.js +3 -3
  154. package/dist/esm/MessageBar/StopButton.test.js +9 -5
  155. package/dist/esm/MessageBox/JumpButton.js +1 -1
  156. package/dist/esm/MessageBox/JumpButton.test.js +4 -4
  157. package/dist/esm/MessageBox/MessageBox.d.ts +4 -0
  158. package/dist/esm/MessageBox/MessageBox.js +16 -2
  159. package/dist/esm/MessageBox/MessageBox.test.js +44 -1
  160. package/dist/esm/PreviewAttachment/PreviewAttachment.d.ts +2 -0
  161. package/dist/esm/PreviewAttachment/PreviewAttachment.js +2 -2
  162. package/dist/esm/Settings/SettingsForm.d.ts +2 -0
  163. package/dist/esm/Settings/SettingsForm.js +2 -2
  164. package/dist/esm/Settings/SettingsForm.test.d.ts +1 -1
  165. package/dist/esm/Settings/SettingsForm.test.js +12 -0
  166. package/dist/esm/SourcesCard/SourcesCard.js +2 -2
  167. package/dist/esm/TermsOfUse/TermsOfUse.d.ts +2 -0
  168. package/dist/esm/TermsOfUse/TermsOfUse.js +5 -5
  169. package/dist/tsconfig.tsbuildinfo +1 -1
  170. package/package.json +1 -1
  171. package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx +10 -1
  172. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +33 -0
  173. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +24 -0
  174. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +11 -0
  175. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +21 -0
  176. package/patternfly-docs/content/extensions/chatbot/examples/Messages/PreviewAttachment.tsx +10 -1
  177. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +9 -0
  178. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithActions.tsx +9 -0
  179. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx +11 -2
  180. package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.tsx +289 -0
  181. package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx +136 -0
  182. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +14 -0
  183. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +8 -1
  184. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx +481 -0
  185. package/src/AttachmentEdit/AttachmentEdit.tsx +5 -1
  186. package/src/Chatbot/Chatbot.scss +7 -0
  187. package/src/Chatbot/Chatbot.test.tsx +9 -0
  188. package/src/Chatbot/Chatbot.tsx +4 -1
  189. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +38 -3
  190. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +18 -0
  191. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +9 -2
  192. package/src/ChatbotFooter/ChatbotFooter.scss +5 -0
  193. package/src/ChatbotFooter/ChatbotFooter.test.tsx +10 -0
  194. package/src/ChatbotFooter/ChatbotFooter.tsx +3 -1
  195. package/src/ChatbotHeader/ChatbotHeader.scss +25 -0
  196. package/src/ChatbotHeader/ChatbotHeader.tsx +1 -1
  197. package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +6 -0
  198. package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +12 -6
  199. package/src/ChatbotHeader/ChatbotHeaderMain.tsx +3 -1
  200. package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +8 -0
  201. package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +10 -5
  202. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +6 -0
  203. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +5 -2
  204. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +10 -0
  205. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +4 -0
  206. package/src/ChatbotModal/ChatbotModal.scss +15 -4
  207. package/src/ChatbotModal/ChatbotModal.test.tsx +59 -0
  208. package/src/ChatbotModal/ChatbotModal.tsx +5 -1
  209. package/src/ChatbotPopover/ChatbotPopover.scss +9 -5
  210. package/src/ChatbotPopover/ChatbotPopover.tsx +1 -1
  211. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss +9 -1
  212. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx +13 -0
  213. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx +13 -2
  214. package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap +1 -1
  215. package/src/CodeModal/CodeModal.scss +11 -3
  216. package/src/CodeModal/CodeModal.test.tsx +24 -0
  217. package/src/CodeModal/CodeModal.tsx +6 -2
  218. package/src/FileDetails/FileDetails.tsx +1 -1
  219. package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap +1 -1
  220. package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap +1 -1
  221. package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +1 -1
  222. package/src/Message/Message.scss +27 -0
  223. package/src/Message/Message.test.tsx +24 -3
  224. package/src/Message/Message.tsx +10 -3
  225. package/src/Message/QuickResponse/QuickResponse.tsx +5 -1
  226. package/src/Message/QuickStarts/QuickStartTile.tsx +5 -1
  227. package/src/Message/TextMessage/TextMessage.scss +25 -0
  228. package/src/Message/UserFeedback/UserFeedback.scss +24 -3
  229. package/src/Message/UserFeedback/UserFeedback.test.tsx +13 -0
  230. package/src/Message/UserFeedback/UserFeedback.tsx +4 -2
  231. package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +4 -0
  232. package/src/Message/UserFeedback/UserFeedbackComplete.tsx +10 -2
  233. package/src/MessageBar/AttachButton.scss +10 -0
  234. package/src/MessageBar/AttachButton.test.tsx +11 -7
  235. package/src/MessageBar/AttachButton.tsx +6 -3
  236. package/src/MessageBar/MessageBar.scss +17 -0
  237. package/src/MessageBar/MessageBar.test.tsx +41 -28
  238. package/src/MessageBar/MessageBar.tsx +23 -8
  239. package/src/MessageBar/MicrophoneButton.scss +10 -0
  240. package/src/MessageBar/MicrophoneButton.tsx +7 -3
  241. package/src/MessageBar/SendButton.scss +10 -0
  242. package/src/MessageBar/SendButton.test.tsx +10 -6
  243. package/src/MessageBar/SendButton.tsx +6 -3
  244. package/src/MessageBar/StopButton.scss +10 -0
  245. package/src/MessageBar/StopButton.test.tsx +10 -6
  246. package/src/MessageBar/StopButton.tsx +6 -3
  247. package/src/MessageBox/JumpButton.test.tsx +4 -4
  248. package/src/MessageBox/JumpButton.tsx +1 -1
  249. package/src/MessageBox/MessageBox.scss +6 -0
  250. package/src/MessageBox/MessageBox.test.tsx +45 -1
  251. package/src/MessageBox/MessageBox.tsx +11 -1
  252. package/src/PreviewAttachment/PreviewAttachment.tsx +5 -1
  253. package/src/Settings/Settings.scss +11 -0
  254. package/src/Settings/SettingsForm.test.tsx +17 -0
  255. package/src/Settings/SettingsForm.tsx +12 -2
  256. package/src/SourcesCard/SourcesCard.scss +8 -0
  257. package/src/SourcesCard/SourcesCard.tsx +2 -1
  258. package/src/TermsOfUse/TermsOfUse.scss +20 -0
  259. 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-body">
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 undefined"
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 undefined"
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 button'}
59
+ aria-label={ariaLabel ?? 'Copy code'}
60
60
  variant="plain"
61
61
  className="pf-chatbot__button--copy"
62
62
  onClick={(event) => handleCopy(event, children)}
@@ -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 button' })).toBeTruthy();
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 button' })).toBeTruthy();
486
- await user.click(screen.getByRole('button', { name: 'Copy code button' }));
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
  });
@@ -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 && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
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="pf-chatbot__feedback-card-form">
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 className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
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 button' })).toBeTruthy();
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 button' })).toBeDisabled();
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 button' }));
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 button' })).toHaveClass('test');
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 button' }));
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 button' }));
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 button' }));
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 button'}
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="xl" isInline>
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
+ }