@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
@@ -0,0 +1,481 @@
1
+ import React from 'react';
2
+
3
+ import { Bullseye, Brand, DropdownList, DropdownItem, DropdownGroup, SkipToContent } from '@patternfly/react-core';
4
+
5
+ import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
6
+ import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
7
+ import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
8
+ import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
9
+ import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
10
+ import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
11
+ import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
12
+ import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
13
+ import ChatbotConversationHistoryNav, {
14
+ Conversation
15
+ } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
16
+ import ChatbotHeader, {
17
+ ChatbotHeaderMenu,
18
+ ChatbotHeaderMain,
19
+ ChatbotHeaderTitle,
20
+ ChatbotHeaderActions,
21
+ ChatbotHeaderSelectorDropdown,
22
+ ChatbotHeaderOptionsDropdown
23
+ } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
24
+
25
+ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
26
+ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
27
+ import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
28
+
29
+ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
30
+ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
31
+ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
32
+ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
33
+ import userAvatar from '../Messages/user_avatar.svg';
34
+ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
35
+
36
+ const footnoteProps = {
37
+ label: 'ChatBot uses AI. Check for mistakes.',
38
+ popover: {
39
+ title: 'Verify information',
40
+ description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
41
+ bannerImage: {
42
+ src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
43
+ alt: 'Example image for footnote popover'
44
+ },
45
+ cta: {
46
+ label: 'Dismiss',
47
+ onClick: () => {
48
+ alert('Do something!');
49
+ }
50
+ },
51
+ link: {
52
+ label: 'View AI policy',
53
+ url: 'https://www.redhat.com/'
54
+ }
55
+ }
56
+ };
57
+
58
+ const markdown = `A paragraph with *emphasis* and **strong importance**.
59
+
60
+ > A block quote with ~strikethrough~ and a URL: https://reactjs.org.
61
+
62
+ Here is an inline code - \`() => void\`
63
+
64
+ Here is some YAML code:
65
+
66
+ ~~~yaml
67
+ apiVersion: helm.openshift.io/v1beta1/
68
+ kind: HelmChartRepository
69
+ metadata:
70
+ name: azure-sample-repo0oooo00ooo
71
+ spec:
72
+ connectionConfig:
73
+ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
74
+ ~~~
75
+
76
+ Here is some JavaScript code:
77
+
78
+ ~~~js
79
+ import React from 'react';
80
+
81
+ const MessageLoading = () => (
82
+ <div className="pf-chatbot__message-loading">
83
+ <span className="pf-chatbot__message-loading-dots">
84
+ <span className="pf-v6-screen-reader">Loading message</span>
85
+ </span>
86
+ </div>
87
+ );
88
+
89
+ export default MessageLoading;
90
+
91
+ ~~~
92
+ `;
93
+
94
+ // It's important to set a date and timestamp prop since the Message components re-render.
95
+ // The timestamps re-render with them.
96
+ const date = new Date();
97
+
98
+ const initialMessages: MessageProps[] = [
99
+ {
100
+ id: '1',
101
+ role: 'user',
102
+ content: 'Hello, can you give me an example of what you can do?',
103
+ name: 'User',
104
+ avatar: userAvatar,
105
+ timestamp: date.toLocaleString(),
106
+ avatarProps: { isBordered: true }
107
+ },
108
+ {
109
+ id: '2',
110
+ role: 'bot',
111
+ content: markdown,
112
+ name: 'Bot',
113
+ avatar: patternflyAvatar,
114
+ timestamp: date.toLocaleString(),
115
+ actions: {
116
+ // eslint-disable-next-line no-console
117
+ positive: { onClick: () => console.log('Good response') },
118
+ // eslint-disable-next-line no-console
119
+ negative: { onClick: () => console.log('Bad response') },
120
+ // eslint-disable-next-line no-console
121
+ copy: { onClick: () => console.log('Copy') },
122
+ // eslint-disable-next-line no-console
123
+ share: { onClick: () => console.log('Share') },
124
+ // eslint-disable-next-line no-console
125
+ listen: { onClick: () => console.log('Listen') }
126
+ }
127
+ }
128
+ ];
129
+
130
+ const welcomePrompts = [
131
+ {
132
+ title: 'Set up account',
133
+ message: 'Choose the necessary settings and preferences for your account.'
134
+ },
135
+ {
136
+ title: 'Troubleshoot issue',
137
+ message: 'Find documentation and instructions to resolve your issue.'
138
+ }
139
+ ];
140
+
141
+ const initialConversations = {
142
+ Today: [{ id: '1', text: 'Hello, can you give me an example of what you can do?' }],
143
+ 'This month': [
144
+ {
145
+ id: '2',
146
+ text: 'Enterprise Linux installation and setup'
147
+ },
148
+ { id: '3', text: 'Troubleshoot system crash' }
149
+ ],
150
+ March: [
151
+ { id: '4', text: 'Ansible security and updates' },
152
+ { id: '5', text: 'Red Hat certification' },
153
+ { id: '6', text: 'Lightspeed user documentation' }
154
+ ],
155
+ February: [
156
+ { id: '7', text: 'Crashing pod assistance' },
157
+ { id: '8', text: 'OpenShift AI pipelines' },
158
+ { id: '9', text: 'Updating subscription plan' },
159
+ { id: '10', text: 'Red Hat licensing options' }
160
+ ],
161
+ January: [
162
+ { id: '11', text: 'RHEL system performance' },
163
+ { id: '12', text: 'Manage user accounts' }
164
+ ]
165
+ };
166
+
167
+ export const ChatbotDemo: React.FunctionComponent = () => {
168
+ const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
169
+ const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
170
+ const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
171
+ const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
172
+ const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
173
+ const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
174
+ const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
175
+ initialConversations
176
+ );
177
+ const [announcement, setAnnouncement] = React.useState<string>();
178
+ const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
179
+ const toggleRef = React.useRef<HTMLButtonElement>(null);
180
+ const chatbotRef = React.useRef<HTMLDivElement>(null);
181
+ const historyRef = React.useRef<HTMLButtonElement>(null);
182
+
183
+ // Auto-scrolls to the latest message
184
+ React.useEffect(() => {
185
+ // don't scroll the first load - in this demo, we know we start with two messages
186
+ if (messages.length > 2) {
187
+ scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
188
+ }
189
+ }, [messages]);
190
+
191
+ const onSelectModel = (
192
+ _event: React.MouseEvent<Element, MouseEvent> | undefined,
193
+ value: string | number | undefined
194
+ ) => {
195
+ setSelectedModel(value as string);
196
+ };
197
+
198
+ const onSelectDisplayMode = (
199
+ _event: React.MouseEvent<Element, MouseEvent> | undefined,
200
+ value: string | number | undefined
201
+ ) => {
202
+ setDisplayMode(value as ChatbotDisplayMode);
203
+ };
204
+
205
+ // you will likely want to come up with your own unique id function; this is for demo purposes only
206
+ const generateId = () => {
207
+ const id = Date.now() + Math.random();
208
+ return id.toString();
209
+ };
210
+
211
+ const handleSend = (message: string) => {
212
+ setIsSendButtonDisabled(true);
213
+ const newMessages: MessageProps[] = [];
214
+ // We can't use structuredClone since messages contains functions, but we can't mutate
215
+ // items that are going into state or the UI won't update correctly
216
+ messages.forEach((message) => newMessages.push(message));
217
+ // It's important to set a timestamp prop since the Message components re-render.
218
+ // The timestamps re-render with them.
219
+ const date = new Date();
220
+ newMessages.push({
221
+ id: generateId(),
222
+ role: 'user',
223
+ content: message,
224
+ name: 'User',
225
+ avatar: userAvatar,
226
+ timestamp: date.toLocaleString(),
227
+ avatarProps: { isBordered: true }
228
+ });
229
+ newMessages.push({
230
+ id: generateId(),
231
+ role: 'bot',
232
+ content: 'API response goes here',
233
+ name: 'Bot',
234
+ isLoading: true,
235
+ avatar: patternflyAvatar,
236
+ timestamp: date.toLocaleString()
237
+ });
238
+ setMessages(newMessages);
239
+ // make announcement to assistive devices that new messages have been added
240
+ setAnnouncement(`Message from User: ${message}. Message from Bot is loading.`);
241
+
242
+ // this is for demo purposes only; in a real situation, there would be an API response we would wait for
243
+ setTimeout(() => {
244
+ const loadedMessages: MessageProps[] = [];
245
+ // We can't use structuredClone since messages contains functions, but we can't mutate
246
+ // items that are going into state or the UI won't update correctly
247
+ newMessages.forEach((message) => loadedMessages.push(message));
248
+ loadedMessages.pop();
249
+ loadedMessages.push({
250
+ id: generateId(),
251
+ role: 'bot',
252
+ content: 'API response goes here',
253
+ name: 'Bot',
254
+ isLoading: false,
255
+ avatar: patternflyAvatar,
256
+ timestamp: date.toLocaleString(),
257
+ actions: {
258
+ // eslint-disable-next-line no-console
259
+ positive: { onClick: () => console.log('Good response') },
260
+ // eslint-disable-next-line no-console
261
+ negative: { onClick: () => console.log('Bad response') },
262
+ // eslint-disable-next-line no-console
263
+ copy: { onClick: () => console.log('Copy') },
264
+ // eslint-disable-next-line no-console
265
+ share: { onClick: () => console.log('Share') },
266
+ // eslint-disable-next-line no-console
267
+ listen: { onClick: () => console.log('Listen') }
268
+ }
269
+ });
270
+ setMessages(loadedMessages);
271
+ // make announcement to assistive devices that new message has loaded
272
+ setAnnouncement(`Message from Bot: API response goes here`);
273
+ setIsSendButtonDisabled(false);
274
+ }, 5000);
275
+ };
276
+
277
+ const findMatchingItems = (targetValue: string) => {
278
+ let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
279
+ const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
280
+ if (filteredItems.length > 0) {
281
+ acc[key] = filteredItems;
282
+ }
283
+ return acc;
284
+ }, {});
285
+
286
+ // append message if no items are found
287
+ if (Object.keys(filteredConversations).length === 0) {
288
+ filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
289
+ }
290
+ return filteredConversations;
291
+ };
292
+
293
+ const horizontalLogo = (
294
+ <Bullseye>
295
+ <Brand className="show-light" src={PFHorizontalLogoColor} alt="PatternFly" />
296
+ <Brand className="show-dark" src={PFHorizontalLogoReverse} alt="PatternFly" />
297
+ </Bullseye>
298
+ );
299
+
300
+ const iconLogo = (
301
+ <>
302
+ <Brand className="show-light" src={PFIconLogoColor} alt="PatternFly" />
303
+ <Brand className="show-dark" src={PFIconLogoReverse} alt="PatternFly" />
304
+ </>
305
+ );
306
+
307
+ const handleSkipToContent = (e) => {
308
+ e.preventDefault();
309
+ /* eslint-disable indent */
310
+ switch (displayMode) {
311
+ case ChatbotDisplayMode.default:
312
+ if (!chatbotVisible && toggleRef.current) {
313
+ toggleRef.current.focus();
314
+ }
315
+ if (chatbotVisible && chatbotRef.current) {
316
+ chatbotRef.current.focus();
317
+ }
318
+ break;
319
+
320
+ case ChatbotDisplayMode.docked:
321
+ if (chatbotRef.current) {
322
+ chatbotRef.current.focus();
323
+ }
324
+ break;
325
+ default:
326
+ if (historyRef.current) {
327
+ historyRef.current.focus();
328
+ }
329
+ break;
330
+ }
331
+ /* eslint-enable indent */
332
+ };
333
+
334
+ return (
335
+ <>
336
+ <SkipToContent onClick={handleSkipToContent} href="#">
337
+ Skip to chatbot
338
+ </SkipToContent>
339
+ <ChatbotToggle
340
+ tooltipLabel="Chatbot"
341
+ isChatbotVisible={chatbotVisible}
342
+ onToggleChatbot={function () {
343
+ setChatbotVisible(!chatbotVisible);
344
+ }}
345
+ id="chatbot-toggle"
346
+ ref={toggleRef}
347
+ />
348
+ <Chatbot isCompact isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
349
+ <ChatbotConversationHistoryNav
350
+ displayMode={displayMode}
351
+ onDrawerToggle={() => {
352
+ setIsDrawerOpen(!isDrawerOpen);
353
+ setConversations(initialConversations);
354
+ }}
355
+ isDrawerOpen={isDrawerOpen}
356
+ setIsDrawerOpen={setIsDrawerOpen}
357
+ activeItemId="1"
358
+ // eslint-disable-next-line no-console
359
+ onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
360
+ conversations={conversations}
361
+ onNewChat={() => {
362
+ setIsDrawerOpen(!isDrawerOpen);
363
+ setMessages([]);
364
+ setConversations(initialConversations);
365
+ }}
366
+ handleTextInputChange={(value: string) => {
367
+ if (value === '') {
368
+ setConversations(initialConversations);
369
+ }
370
+ // this is where you would perform search on the items in the drawer
371
+ // and update the state
372
+ const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
373
+ setConversations(newConversations);
374
+ }}
375
+ isCompact
376
+ drawerContent={
377
+ <>
378
+ <ChatbotHeader>
379
+ <ChatbotHeaderMain>
380
+ <ChatbotHeaderMenu
381
+ ref={historyRef}
382
+ aria-expanded={isDrawerOpen}
383
+ onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
384
+ isCompact
385
+ />
386
+ <ChatbotHeaderTitle
387
+ displayMode={displayMode}
388
+ showOnFullScreen={horizontalLogo}
389
+ showOnDefault={iconLogo}
390
+ ></ChatbotHeaderTitle>
391
+ </ChatbotHeaderMain>
392
+ <ChatbotHeaderActions>
393
+ <ChatbotHeaderSelectorDropdown value={selectedModel} onSelect={onSelectModel} isCompact>
394
+ <DropdownList>
395
+ <DropdownItem value="Granite 7B" key="granite">
396
+ Granite 7B
397
+ </DropdownItem>
398
+ <DropdownItem value="Llama 3.0" key="llama">
399
+ Llama 3.0
400
+ </DropdownItem>
401
+ <DropdownItem value="Mistral 3B" key="mistral">
402
+ Mistral 3B
403
+ </DropdownItem>
404
+ </DropdownList>
405
+ </ChatbotHeaderSelectorDropdown>
406
+ <ChatbotHeaderOptionsDropdown onSelect={onSelectDisplayMode} isCompact>
407
+ <DropdownGroup label="Display mode">
408
+ <DropdownList>
409
+ <DropdownItem
410
+ value={ChatbotDisplayMode.default}
411
+ key="switchDisplayOverlay"
412
+ icon={<OutlinedWindowRestoreIcon aria-hidden />}
413
+ isSelected={displayMode === ChatbotDisplayMode.default}
414
+ >
415
+ <span>Overlay</span>
416
+ </DropdownItem>
417
+ <DropdownItem
418
+ value={ChatbotDisplayMode.docked}
419
+ key="switchDisplayDock"
420
+ icon={<OpenDrawerRightIcon aria-hidden />}
421
+ isSelected={displayMode === ChatbotDisplayMode.docked}
422
+ >
423
+ <span>Dock to window</span>
424
+ </DropdownItem>
425
+ <DropdownItem
426
+ value={ChatbotDisplayMode.fullscreen}
427
+ key="switchDisplayFullscreen"
428
+ icon={<ExpandIcon aria-hidden />}
429
+ isSelected={displayMode === ChatbotDisplayMode.fullscreen}
430
+ >
431
+ <span>Fullscreen</span>
432
+ </DropdownItem>
433
+ </DropdownList>
434
+ </DropdownGroup>
435
+ </ChatbotHeaderOptionsDropdown>
436
+ </ChatbotHeaderActions>
437
+ </ChatbotHeader>
438
+ <ChatbotContent>
439
+ {/* Update the announcement prop on MessageBox whenever a new message is sent
440
+ so that users of assistive devices receive sufficient context */}
441
+ <MessageBox announcement={announcement}>
442
+ <ChatbotWelcomePrompt
443
+ title="Hi, ChatBot User!"
444
+ description="How can I help you today?"
445
+ prompts={welcomePrompts}
446
+ isCompact
447
+ />
448
+ {/* This code block enables scrolling to the top of the last message.
449
+ You can instead choose to move the div with scrollToBottomRef on it below
450
+ the map of messages, so that users are forced to scroll to the bottom.
451
+ If you are using streaming, you will want to take a different approach;
452
+ see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
453
+ {messages.map((message, index) => {
454
+ if (index === messages.length - 1) {
455
+ return (
456
+ <>
457
+ <div ref={scrollToBottomRef}></div>
458
+ <Message key={message.id} {...message} />
459
+ </>
460
+ );
461
+ }
462
+ return <Message key={message.id} {...message} />;
463
+ })}
464
+ </MessageBox>
465
+ </ChatbotContent>
466
+ <ChatbotFooter isCompact>
467
+ <MessageBar
468
+ onSendMessage={handleSend}
469
+ hasMicrophoneButton
470
+ isSendButtonDisabled={isSendButtonDisabled}
471
+ isCompact
472
+ />
473
+ <ChatbotFootnote {...footnoteProps} />
474
+ </ChatbotFooter>
475
+ </>
476
+ }
477
+ ></ChatbotConversationHistoryNav>
478
+ </Chatbot>
479
+ </>
480
+ );
481
+ };
@@ -42,6 +42,8 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
42
42
  import { BarsIcon } from '@patternfly/react-icons';
43
43
  import userAvatar from '../Messages/user_avatar.svg';
44
44
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
45
+ import '@patternfly/react-core/dist/styles/base.css';
46
+ import '@patternfly/chatbot/dist/css/main.css';
45
47
 
46
48
  const footnoteProps = {
47
49
  label: 'ChatBot uses AI. Check for mistakes.',
@@ -40,6 +40,8 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
40
40
  import { BarsIcon } from '@patternfly/react-icons';
41
41
  import userAvatar from '../Messages/user_avatar.svg';
42
42
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
43
+ import '@patternfly/react-core/dist/styles/base.css';
44
+ import '@patternfly/chatbot/dist/css/main.css';
43
45
 
44
46
  const footnoteProps = {
45
47
  label: 'ChatBot uses AI. Check for mistakes.',
@@ -23,6 +23,8 @@ import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
23
23
  import { BarsIcon } from '@patternfly/react-icons';
24
24
  import userAvatar from '../Messages/user_avatar.svg';
25
25
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
26
+ import '@patternfly/react-core/dist/styles/base.css';
27
+ import '@patternfly/chatbot/dist/css/main.css';
26
28
 
27
29
  export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled }) => {
28
30
  const [messages, setMessages] = React.useState<MessageProps[]>([]);
@@ -36,71 +38,74 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
36
38
  return id.toString();
37
39
  };
38
40
 
39
- const handleSend = (input: string) => {
40
- const date = new Date();
41
- const newMessages: MessageProps[] = [];
42
- messages.forEach((message) => newMessages.push(message));
43
- newMessages.push({
44
- avatar: userAvatar,
45
- avatarProps: { isBordered: true },
46
- id: generateId(),
47
- name: 'You',
48
- role: 'user',
49
- content: input,
50
- timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
51
- });
52
- newMessages.push({
53
- avatar: patternflyAvatar,
54
- id: generateId(),
55
- name,
56
- role: 'bot',
57
- timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
58
- isLoading: true
59
- });
60
- setMessages(newMessages);
61
- // make announcement to assistive devices that new messages have been added
62
- setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
63
-
64
- // this is for demo purposes only; in a real situation, there would be an API response we would wait for
65
- setTimeout(() => {
66
- const loadedMessages: MessageProps[] = [];
67
- // we can't use structuredClone since messages contains functions, but we can't mutate
68
- // items that are going into state or the UI won't update correctly
69
- newMessages.forEach((message) => loadedMessages.push(message));
70
- loadedMessages.pop();
71
- loadedMessages.push({
41
+ const handleSend = React.useCallback(
42
+ (input: string) => {
43
+ const date = new Date();
44
+ const newMessages: MessageProps[] = [];
45
+ messages.forEach((message) => newMessages.push(message));
46
+ newMessages.push({
47
+ avatar: userAvatar,
48
+ avatarProps: { isBordered: true },
72
49
  id: generateId(),
73
- role: 'bot',
74
- content: `API response from ${name} goes here`,
75
- name,
50
+ name: 'You',
51
+ role: 'user',
52
+ content: input,
53
+ timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
54
+ });
55
+ newMessages.push({
76
56
  avatar: patternflyAvatar,
77
- isLoading: false,
78
- actions: {
79
- // eslint-disable-next-line no-console
80
- positive: { onClick: () => console.log('Good response') },
81
- // eslint-disable-next-line no-console
82
- negative: { onClick: () => console.log('Bad response') },
83
- // eslint-disable-next-line no-console
84
- copy: { onClick: () => console.log('Copy') },
85
- // eslint-disable-next-line no-console
86
- share: { onClick: () => console.log('Share') },
87
- // eslint-disable-next-line no-console
88
- listen: { onClick: () => console.log('Listen') }
89
- },
90
- timestamp: date.toLocaleString()
57
+ id: generateId(),
58
+ name,
59
+ role: 'bot',
60
+ timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
61
+ isLoading: true
91
62
  });
92
- setMessages(loadedMessages);
93
- // make announcement to assistive devices that new message has loaded
94
- setAnnouncement(`Message from ${name}: API response goes here`);
95
- setIsSendButtonDisabled(false);
96
- }, 5000);
97
- };
63
+ setMessages(newMessages);
64
+ // make announcement to assistive devices that new messages have been added
65
+ setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
66
+
67
+ // this is for demo purposes only; in a real situation, there would be an API response we would wait for
68
+ setTimeout(() => {
69
+ const loadedMessages: MessageProps[] = [];
70
+ // we can't use structuredClone since messages contains functions, but we can't mutate
71
+ // items that are going into state or the UI won't update correctly
72
+ newMessages.forEach((message) => loadedMessages.push(message));
73
+ loadedMessages.pop();
74
+ loadedMessages.push({
75
+ id: generateId(),
76
+ role: 'bot',
77
+ content: `API response from ${name} goes here`,
78
+ name,
79
+ avatar: patternflyAvatar,
80
+ isLoading: false,
81
+ actions: {
82
+ // eslint-disable-next-line no-console
83
+ positive: { onClick: () => console.log('Good response') },
84
+ // eslint-disable-next-line no-console
85
+ negative: { onClick: () => console.log('Bad response') },
86
+ // eslint-disable-next-line no-console
87
+ copy: { onClick: () => console.log('Copy') },
88
+ // eslint-disable-next-line no-console
89
+ share: { onClick: () => console.log('Share') },
90
+ // eslint-disable-next-line no-console
91
+ listen: { onClick: () => console.log('Listen') }
92
+ },
93
+ timestamp: date.toLocaleString()
94
+ });
95
+ setMessages(loadedMessages);
96
+ // make announcement to assistive devices that new message has loaded
97
+ setAnnouncement(`Message from ${name}: API response goes here`);
98
+ setIsSendButtonDisabled(false);
99
+ }, 5000);
100
+ },
101
+ [messages, name, setIsSendButtonDisabled]
102
+ );
98
103
 
99
104
  React.useEffect(() => {
100
105
  if (input) {
101
106
  handleSend(input);
102
107
  }
103
- }, [hasNewInput]);
108
+ }, [hasNewInput, input]);
104
109
 
105
110
  // Auto-scrolls to the latest message
106
111
  React.useEffect(() => {
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  import Message from '@patternfly/chatbot/dist/dynamic/Message';
3
3
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
4
+ import '@patternfly/react-core/dist/styles/base.css';
5
+ import '@patternfly/chatbot/dist/css/main.css';
4
6
 
5
7
  export const MessageWithFeedbackExample: React.FunctionComponent = () => {
6
8
  const [showUserFeedbackForm, setShowUserFeedbackForm] = React.useState(false);
@@ -22,6 +22,8 @@ export interface AttachmentEditProps {
22
22
  title?: string;
23
23
  /** Display mode for the Chatbot parent; this influences the styles applied */
24
24
  displayMode?: ChatbotDisplayMode;
25
+ /** Sets modal to compact styling. */
26
+ isCompact?: boolean;
25
27
  }
26
28
 
27
29
  export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
@@ -32,7 +34,8 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
32
34
  onCancel,
33
35
  onSave,
34
36
  title = 'Edit attachment',
35
- displayMode = ChatbotDisplayMode.default
37
+ displayMode = ChatbotDisplayMode.default,
38
+ isCompact
36
39
  }: AttachmentEditProps) => {
37
40
  const handleSave = (_event: React.MouseEvent | MouseEvent | KeyboardEvent, code) => {
38
41
  handleModalToggle(_event);
@@ -56,6 +59,7 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
56
59
  secondaryActionBtn="Cancel"
57
60
  title={title}
58
61
  displayMode={displayMode}
62
+ isCompact={isCompact}
59
63
  />
60
64
  );
61
65
  };