@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.
Files changed (310) 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 +6 -0
  7. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -3
  8. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +27 -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/Message.d.ts +19 -1
  45. package/dist/cjs/Message/Message.js +58 -39
  46. package/dist/cjs/Message/Message.test.js +64 -0
  47. package/dist/cjs/Message/MessageInput.d.ts +18 -0
  48. package/dist/cjs/Message/MessageInput.js +34 -0
  49. package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +2 -0
  50. package/dist/cjs/Message/QuickResponse/QuickResponse.js +2 -2
  51. package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +2 -0
  52. package/dist/cjs/Message/QuickStarts/QuickStartTile.js +2 -2
  53. package/dist/cjs/Message/UserFeedback/UserFeedback.js +4 -4
  54. package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +4 -0
  55. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +4 -4
  56. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
  57. package/dist/cjs/MessageBar/AttachButton.d.ts +1 -0
  58. package/dist/cjs/MessageBar/AttachButton.js +3 -3
  59. package/dist/cjs/MessageBar/AttachButton.test.js +4 -0
  60. package/dist/cjs/MessageBar/MessageBar.d.ts +5 -0
  61. package/dist/cjs/MessageBar/MessageBar.js +14 -13
  62. package/dist/cjs/MessageBar/MessageBar.test.js +13 -0
  63. package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -0
  64. package/dist/cjs/MessageBar/MicrophoneButton.js +4 -4
  65. package/dist/cjs/MessageBar/SendButton.d.ts +1 -0
  66. package/dist/cjs/MessageBar/SendButton.js +3 -3
  67. package/dist/cjs/MessageBar/SendButton.test.js +4 -0
  68. package/dist/cjs/MessageBar/StopButton.d.ts +1 -0
  69. package/dist/cjs/MessageBar/StopButton.js +3 -3
  70. package/dist/cjs/MessageBar/StopButton.test.js +4 -0
  71. package/dist/cjs/MessageBox/MessageBox.d.ts +4 -0
  72. package/dist/cjs/MessageBox/MessageBox.js +21 -7
  73. package/dist/cjs/MessageBox/MessageBox.test.js +43 -0
  74. package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts +2 -0
  75. package/dist/cjs/PreviewAttachment/PreviewAttachment.js +2 -2
  76. package/dist/cjs/Settings/SettingsForm.d.ts +2 -0
  77. package/dist/cjs/Settings/SettingsForm.js +2 -2
  78. package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -1
  79. package/dist/cjs/Settings/SettingsForm.test.js +12 -0
  80. package/dist/cjs/SourcesCard/SourcesCard.d.ts +7 -1
  81. package/dist/cjs/SourcesCard/SourcesCard.js +17 -11
  82. package/dist/cjs/SourcesCard/SourcesCard.test.js +25 -15
  83. package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +2 -0
  84. package/dist/cjs/TermsOfUse/TermsOfUse.js +5 -5
  85. package/dist/cjs/tracking/console_tracking_provider.d.ts +4 -5
  86. package/dist/cjs/tracking/console_tracking_provider.js +22 -15
  87. package/dist/cjs/tracking/posthog_tracking_provider.d.ts +2 -2
  88. package/dist/cjs/tracking/posthog_tracking_provider.js +21 -12
  89. package/dist/cjs/tracking/segment_tracking_provider.d.ts +2 -2
  90. package/dist/cjs/tracking/segment_tracking_provider.js +21 -12
  91. package/dist/cjs/tracking/trackingProviderProxy.d.ts +1 -1
  92. package/dist/cjs/tracking/trackingProviderProxy.js +2 -2
  93. package/dist/cjs/tracking/tracking_api.d.ts +1 -1
  94. package/dist/cjs/tracking/tracking_registry.js +46 -12
  95. package/dist/cjs/tracking/tracking_spi.d.ts +15 -5
  96. package/dist/cjs/tracking/tracking_spi.js +9 -0
  97. package/dist/cjs/tracking/umami_tracking_provider.d.ts +6 -2
  98. package/dist/cjs/tracking/umami_tracking_provider.js +66 -22
  99. package/dist/css/main.css +225 -22
  100. package/dist/css/main.css.map +1 -1
  101. package/dist/esm/AttachmentEdit/AttachmentEdit.d.ts +2 -0
  102. package/dist/esm/AttachmentEdit/AttachmentEdit.js +2 -2
  103. package/dist/esm/Chatbot/Chatbot.d.ts +2 -0
  104. package/dist/esm/Chatbot/Chatbot.js +2 -2
  105. package/dist/esm/Chatbot/Chatbot.test.js +4 -0
  106. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +6 -0
  107. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -3
  108. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +27 -0
  109. package/dist/esm/ChatbotFooter/ChatbotFooter.d.ts +1 -0
  110. package/dist/esm/ChatbotFooter/ChatbotFooter.js +2 -2
  111. package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -1
  112. package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +5 -0
  113. package/dist/esm/ChatbotHeader/ChatbotHeader.js +1 -1
  114. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +4 -2
  115. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +20 -6
  116. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -1
  117. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +5 -0
  118. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.js +1 -1
  119. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +3 -2
  120. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +20 -6
  121. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -1
  122. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +5 -0
  123. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.d.ts +1 -0
  124. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -3
  125. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -1
  126. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +5 -0
  127. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts +1 -0
  128. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +2 -2
  129. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -1
  130. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +5 -0
  131. package/dist/esm/ChatbotModal/ChatbotModal.d.ts +3 -0
  132. package/dist/esm/ChatbotModal/ChatbotModal.js +2 -2
  133. package/dist/esm/ChatbotModal/ChatbotModal.test.d.ts +1 -0
  134. package/dist/esm/ChatbotModal/ChatbotModal.test.js +23 -0
  135. package/dist/esm/ChatbotPopover/ChatbotPopover.js +1 -1
  136. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts +1 -0
  137. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js +3 -3
  138. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +4 -0
  139. package/dist/esm/CodeModal/CodeModal.d.ts +2 -0
  140. package/dist/esm/CodeModal/CodeModal.js +3 -3
  141. package/dist/esm/CodeModal/CodeModal.test.d.ts +1 -0
  142. package/dist/esm/CodeModal/CodeModal.test.js +10 -0
  143. package/dist/esm/FileDetails/FileDetails.js +1 -1
  144. package/dist/esm/Message/Message.d.ts +19 -1
  145. package/dist/esm/Message/Message.js +58 -39
  146. package/dist/esm/Message/Message.test.js +64 -0
  147. package/dist/esm/Message/MessageInput.d.ts +18 -0
  148. package/dist/esm/Message/MessageInput.js +29 -0
  149. package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +2 -0
  150. package/dist/esm/Message/QuickResponse/QuickResponse.js +2 -2
  151. package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +2 -0
  152. package/dist/esm/Message/QuickStarts/QuickStartTile.js +2 -2
  153. package/dist/esm/Message/UserFeedback/UserFeedback.js +4 -4
  154. package/dist/esm/Message/UserFeedback/UserFeedback.test.js +4 -0
  155. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +4 -4
  156. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +4 -0
  157. package/dist/esm/MessageBar/AttachButton.d.ts +1 -0
  158. package/dist/esm/MessageBar/AttachButton.js +3 -3
  159. package/dist/esm/MessageBar/AttachButton.test.js +4 -0
  160. package/dist/esm/MessageBar/MessageBar.d.ts +5 -0
  161. package/dist/esm/MessageBar/MessageBar.js +14 -13
  162. package/dist/esm/MessageBar/MessageBar.test.js +13 -0
  163. package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -0
  164. package/dist/esm/MessageBar/MicrophoneButton.js +4 -4
  165. package/dist/esm/MessageBar/SendButton.d.ts +1 -0
  166. package/dist/esm/MessageBar/SendButton.js +3 -3
  167. package/dist/esm/MessageBar/SendButton.test.js +4 -0
  168. package/dist/esm/MessageBar/StopButton.d.ts +1 -0
  169. package/dist/esm/MessageBar/StopButton.js +3 -3
  170. package/dist/esm/MessageBar/StopButton.test.js +4 -0
  171. package/dist/esm/MessageBox/MessageBox.d.ts +4 -0
  172. package/dist/esm/MessageBox/MessageBox.js +21 -7
  173. package/dist/esm/MessageBox/MessageBox.test.js +44 -1
  174. package/dist/esm/PreviewAttachment/PreviewAttachment.d.ts +2 -0
  175. package/dist/esm/PreviewAttachment/PreviewAttachment.js +2 -2
  176. package/dist/esm/Settings/SettingsForm.d.ts +2 -0
  177. package/dist/esm/Settings/SettingsForm.js +2 -2
  178. package/dist/esm/Settings/SettingsForm.test.d.ts +1 -1
  179. package/dist/esm/Settings/SettingsForm.test.js +12 -0
  180. package/dist/esm/SourcesCard/SourcesCard.d.ts +7 -1
  181. package/dist/esm/SourcesCard/SourcesCard.js +18 -12
  182. package/dist/esm/SourcesCard/SourcesCard.test.js +25 -15
  183. package/dist/esm/TermsOfUse/TermsOfUse.d.ts +2 -0
  184. package/dist/esm/TermsOfUse/TermsOfUse.js +5 -5
  185. package/dist/esm/tracking/console_tracking_provider.d.ts +4 -5
  186. package/dist/esm/tracking/console_tracking_provider.js +22 -15
  187. package/dist/esm/tracking/posthog_tracking_provider.d.ts +2 -2
  188. package/dist/esm/tracking/posthog_tracking_provider.js +21 -12
  189. package/dist/esm/tracking/segment_tracking_provider.d.ts +2 -2
  190. package/dist/esm/tracking/segment_tracking_provider.js +21 -12
  191. package/dist/esm/tracking/trackingProviderProxy.d.ts +1 -1
  192. package/dist/esm/tracking/trackingProviderProxy.js +2 -2
  193. package/dist/esm/tracking/tracking_api.d.ts +1 -1
  194. package/dist/esm/tracking/tracking_registry.js +46 -12
  195. package/dist/esm/tracking/tracking_spi.d.ts +15 -5
  196. package/dist/esm/tracking/tracking_spi.js +8 -1
  197. package/dist/esm/tracking/umami_tracking_provider.d.ts +6 -2
  198. package/dist/esm/tracking/umami_tracking_provider.js +66 -22
  199. package/dist/tsconfig.tsbuildinfo +1 -1
  200. package/package.json +1 -1
  201. package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +18 -14
  202. package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx +10 -1
  203. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +74 -104
  204. package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx +48 -37
  205. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +33 -0
  206. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +34 -0
  207. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +11 -0
  208. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +71 -13
  209. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +3 -1
  210. package/patternfly-docs/content/extensions/chatbot/examples/Messages/PreviewAttachment.tsx +10 -1
  211. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +80 -104
  212. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +44 -2
  213. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx +13 -2
  214. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithActions.tsx +9 -0
  215. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx +11 -2
  216. package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.tsx +289 -0
  217. package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx +136 -0
  218. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +15 -1
  219. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +8 -1
  220. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +6 -3
  221. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +2 -0
  222. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +2 -0
  223. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx +481 -0
  224. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +2 -0
  225. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +2 -0
  226. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +62 -57
  227. package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +2 -0
  228. package/src/AttachmentEdit/AttachmentEdit.tsx +5 -1
  229. package/src/Chatbot/Chatbot.scss +7 -0
  230. package/src/Chatbot/Chatbot.test.tsx +9 -0
  231. package/src/Chatbot/Chatbot.tsx +4 -1
  232. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +38 -3
  233. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +71 -0
  234. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +23 -2
  235. package/src/ChatbotFooter/ChatbotFooter.scss +5 -0
  236. package/src/ChatbotFooter/ChatbotFooter.test.tsx +10 -0
  237. package/src/ChatbotFooter/ChatbotFooter.tsx +3 -1
  238. package/src/ChatbotHeader/ChatbotHeader.scss +25 -0
  239. package/src/ChatbotHeader/ChatbotHeader.tsx +1 -1
  240. package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +6 -0
  241. package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +12 -6
  242. package/src/ChatbotHeader/ChatbotHeaderMain.tsx +3 -1
  243. package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +8 -0
  244. package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +10 -5
  245. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +6 -0
  246. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +5 -2
  247. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +10 -0
  248. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +4 -0
  249. package/src/ChatbotModal/ChatbotModal.scss +15 -4
  250. package/src/ChatbotModal/ChatbotModal.test.tsx +59 -0
  251. package/src/ChatbotModal/ChatbotModal.tsx +5 -1
  252. package/src/ChatbotPopover/ChatbotPopover.scss +9 -5
  253. package/src/ChatbotPopover/ChatbotPopover.tsx +1 -1
  254. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss +9 -1
  255. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx +13 -0
  256. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx +13 -2
  257. package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap +1 -1
  258. package/src/CodeModal/CodeModal.scss +11 -3
  259. package/src/CodeModal/CodeModal.test.tsx +24 -0
  260. package/src/CodeModal/CodeModal.tsx +6 -2
  261. package/src/FileDetails/FileDetails.tsx +1 -1
  262. package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap +1 -1
  263. package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap +1 -1
  264. package/src/Message/Message.scss +31 -0
  265. package/src/Message/Message.test.tsx +83 -0
  266. package/src/Message/Message.tsx +121 -56
  267. package/src/Message/MessageInput.tsx +59 -0
  268. package/src/Message/QuickResponse/QuickResponse.tsx +5 -1
  269. package/src/Message/QuickStarts/QuickStartTile.tsx +5 -1
  270. package/src/Message/TextMessage/TextMessage.scss +25 -0
  271. package/src/Message/UserFeedback/UserFeedback.scss +24 -3
  272. package/src/Message/UserFeedback/UserFeedback.test.tsx +13 -0
  273. package/src/Message/UserFeedback/UserFeedback.tsx +4 -2
  274. package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +4 -0
  275. package/src/Message/UserFeedback/UserFeedbackComplete.tsx +10 -2
  276. package/src/MessageBar/AttachButton.scss +10 -0
  277. package/src/MessageBar/AttachButton.test.tsx +4 -0
  278. package/src/MessageBar/AttachButton.tsx +5 -2
  279. package/src/MessageBar/MessageBar.scss +17 -0
  280. package/src/MessageBar/MessageBar.test.tsx +13 -0
  281. package/src/MessageBar/MessageBar.tsx +23 -8
  282. package/src/MessageBar/MicrophoneButton.scss +10 -0
  283. package/src/MessageBar/MicrophoneButton.tsx +6 -3
  284. package/src/MessageBar/SendButton.scss +10 -0
  285. package/src/MessageBar/SendButton.test.tsx +5 -1
  286. package/src/MessageBar/SendButton.tsx +5 -2
  287. package/src/MessageBar/StopButton.scss +10 -0
  288. package/src/MessageBar/StopButton.test.tsx +5 -1
  289. package/src/MessageBar/StopButton.tsx +5 -2
  290. package/src/MessageBox/MessageBox.scss +6 -0
  291. package/src/MessageBox/MessageBox.test.tsx +45 -1
  292. package/src/MessageBox/MessageBox.tsx +16 -6
  293. package/src/PreviewAttachment/PreviewAttachment.tsx +5 -1
  294. package/src/Settings/Settings.scss +11 -0
  295. package/src/Settings/SettingsForm.test.tsx +17 -0
  296. package/src/Settings/SettingsForm.tsx +12 -2
  297. package/src/SourcesCard/SourcesCard.scss +11 -7
  298. package/src/SourcesCard/SourcesCard.test.tsx +30 -22
  299. package/src/SourcesCard/SourcesCard.tsx +56 -13
  300. package/src/TermsOfUse/TermsOfUse.scss +20 -0
  301. package/src/TermsOfUse/TermsOfUse.tsx +9 -4
  302. package/src/tracking/console_tracking_provider.ts +21 -17
  303. package/src/tracking/posthog_tracking_provider.ts +20 -13
  304. package/src/tracking/segment_tracking_provider.ts +20 -13
  305. package/src/tracking/trackingProviderProxy.ts +2 -2
  306. package/src/tracking/tracking_api.ts +1 -1
  307. package/src/tracking/tracking_registry.ts +46 -13
  308. package/src/tracking/tracking_spi.ts +18 -7
  309. package/src/tracking/umami_tracking_provider.ts +76 -20
  310. 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-body" },
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
- isLoading ? (react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord })) : (react_1.default.createElement(react_1.default.Fragment, null,
80
- beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
81
- error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
82
- p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
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 : ''}` }, props), content));
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: "pf-chatbot__feedback-card-form" },
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: "xl", isInline: true },
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
  });