@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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 (501) hide show
  1. package/dist/cjs/AttachmentEdit/AttachmentEdit.test.d.ts +1 -0
  2. package/dist/cjs/AttachmentEdit/AttachmentEdit.test.js +52 -0
  3. package/dist/cjs/Chatbot/Chatbot.d.ts +2 -1
  4. package/dist/cjs/Chatbot/Chatbot.js +1 -0
  5. package/dist/cjs/Chatbot/Chatbot.test.d.ts +1 -0
  6. package/dist/cjs/Chatbot/Chatbot.test.js +28 -0
  7. package/dist/cjs/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
  8. package/dist/cjs/ChatbotAlert/ChatbotAlert.test.js +27 -0
  9. package/dist/cjs/ChatbotContent/ChatbotContent.test.d.ts +1 -0
  10. package/dist/cjs/ChatbotContent/ChatbotContent.test.js +18 -0
  11. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts +3 -3
  12. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
  13. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +27 -4
  14. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +24 -12
  15. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +99 -3
  16. package/dist/cjs/ChatbotConversationHistoryNav/EmptyState.d.ts +11 -0
  17. package/dist/cjs/ChatbotConversationHistoryNav/EmptyState.js +29 -0
  18. package/dist/cjs/ChatbotConversationHistoryNav/LoadingState.d.ts +4 -0
  19. package/dist/cjs/ChatbotConversationHistoryNav/LoadingState.js +45 -0
  20. package/dist/cjs/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
  21. package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js +18 -0
  22. package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
  23. package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.js +87 -0
  24. package/dist/cjs/ChatbotFooter/ChatbotFootnote.d.ts +1 -1
  25. package/dist/cjs/ChatbotFooter/ChatbotFootnote.js +1 -1
  26. package/dist/cjs/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
  27. package/dist/cjs/ChatbotHeader/ChatbotHeader.test.js +18 -0
  28. package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
  29. package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.js +18 -0
  30. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +3 -1
  31. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
  32. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js +20 -0
  33. package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
  34. package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.js +18 -0
  35. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +3 -1
  36. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
  37. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js +20 -0
  38. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
  39. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
  40. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +43 -0
  41. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +6 -4
  42. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
  43. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +41 -0
  44. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
  45. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
  46. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
  47. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.js +55 -0
  48. package/dist/cjs/ChatbotToggle/ChatbotToggle.js +3 -1
  49. package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +19 -11
  50. package/dist/cjs/Compare/Compare.d.ts +17 -0
  51. package/dist/cjs/Compare/Compare.js +50 -0
  52. package/dist/cjs/Compare/Compare.test.d.ts +1 -0
  53. package/dist/cjs/Compare/Compare.test.js +20 -0
  54. package/dist/cjs/Compare/index.d.ts +2 -0
  55. package/dist/cjs/Compare/index.js +23 -0
  56. package/dist/cjs/Message/ErrorMessage/ErrorMessage.d.ts +4 -0
  57. package/dist/cjs/Message/ErrorMessage/ErrorMessage.js +26 -0
  58. package/dist/cjs/Message/ImageMessage/ImageMessage.d.ts +4 -0
  59. package/dist/cjs/Message/ImageMessage/ImageMessage.js +25 -0
  60. package/dist/cjs/Message/LinkMessage/LinkMessage.d.ts +4 -0
  61. package/dist/cjs/Message/LinkMessage/LinkMessage.js +30 -0
  62. package/dist/cjs/Message/Message.d.ts +49 -8
  63. package/dist/cjs/Message/Message.js +70 -18
  64. package/dist/cjs/Message/Message.test.js +269 -3
  65. package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +17 -0
  66. package/dist/cjs/Message/QuickResponse/QuickResponse.js +34 -0
  67. package/dist/cjs/Message/QuickStarts/FallbackImg.d.ts +13 -0
  68. package/dist/cjs/Message/QuickStarts/FallbackImg.js +34 -0
  69. package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +27 -0
  70. package/dist/cjs/Message/QuickStarts/QuickStartTile.js +82 -0
  71. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
  72. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.js +64 -0
  73. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
  74. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.js +76 -0
  75. package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
  76. package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.js +30 -0
  77. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
  78. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +77 -0
  79. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
  80. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.js +77 -0
  81. package/dist/cjs/Message/QuickStarts/types.d.ts +132 -0
  82. package/dist/cjs/Message/QuickStarts/types.js +17 -0
  83. package/dist/cjs/Message/TableMessage/TableMessage.d.ts +20 -0
  84. package/dist/cjs/Message/TableMessage/TableMessage.js +67 -0
  85. package/dist/cjs/Message/TableMessage/TbodyMessage.d.ts +7 -0
  86. package/dist/cjs/Message/TableMessage/TbodyMessage.js +33 -0
  87. package/dist/cjs/Message/TableMessage/TdMessage.d.ts +5 -0
  88. package/dist/cjs/Message/TableMessage/TdMessage.js +26 -0
  89. package/dist/cjs/Message/TableMessage/ThMessage.d.ts +5 -0
  90. package/dist/cjs/Message/TableMessage/ThMessage.js +26 -0
  91. package/dist/cjs/Message/TableMessage/TheadMessage.d.ts +5 -0
  92. package/dist/cjs/Message/TableMessage/TheadMessage.js +26 -0
  93. package/dist/cjs/Message/TableMessage/TrMessage.d.ts +7 -0
  94. package/dist/cjs/Message/TableMessage/TrMessage.js +37 -0
  95. package/dist/cjs/Message/TextMessage/TextMessage.d.ts +2 -1
  96. package/dist/cjs/Message/TextMessage/TextMessage.js +2 -2
  97. package/dist/cjs/Message/UserFeedback/CloseButton.d.ts +10 -0
  98. package/dist/cjs/Message/UserFeedback/CloseButton.js +14 -0
  99. package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts +39 -0
  100. package/dist/cjs/Message/UserFeedback/UserFeedback.js +54 -0
  101. package/dist/cjs/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
  102. package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +133 -0
  103. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
  104. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +117 -0
  105. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
  106. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +249 -0
  107. package/dist/cjs/MessageBar/AttachButton.js +4 -2
  108. package/dist/cjs/MessageBar/MessageBar.d.ts +11 -4
  109. package/dist/cjs/MessageBar/MessageBar.js +127 -46
  110. package/dist/cjs/MessageBar/MessageBar.test.js +12 -4
  111. package/dist/cjs/MessageBar/MicrophoneButton.d.ts +1 -1
  112. package/dist/cjs/MessageBar/SendButton.js +3 -1
  113. package/dist/cjs/MessageBar/StopButton.js +3 -1
  114. package/dist/cjs/MessageBox/MessageBox.test.d.ts +1 -0
  115. package/dist/cjs/MessageBox/MessageBox.test.js +22 -0
  116. package/dist/cjs/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
  117. package/dist/cjs/PreviewAttachment/PreviewAttachment.test.js +28 -0
  118. package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +4 -1
  119. package/dist/cjs/ResponseActions/ResponseActionButton.js +21 -6
  120. package/dist/cjs/ResponseActions/ResponseActions.d.ts +8 -2
  121. package/dist/cjs/ResponseActions/ResponseActions.js +7 -7
  122. package/dist/cjs/ResponseActions/ResponseActions.test.js +2 -2
  123. package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -0
  124. package/dist/cjs/Settings/SettingsForm.test.js +26 -0
  125. package/dist/cjs/__mocks__/rehype-external-links.d.ts +2 -0
  126. package/dist/cjs/__mocks__/rehype-external-links.js +4 -0
  127. package/dist/cjs/__mocks__/rehype-sanitize.d.ts +2 -0
  128. package/dist/cjs/__mocks__/rehype-sanitize.js +4 -0
  129. package/dist/cjs/__mocks__/rehype-unwrap-images.d.ts +2 -0
  130. package/dist/cjs/__mocks__/rehype-unwrap-images.js +4 -0
  131. package/dist/cjs/index.d.ts +4 -0
  132. package/dist/cjs/index.js +7 -1
  133. package/dist/cjs/tracking/console_tracking_provider.d.ts +10 -0
  134. package/dist/cjs/tracking/console_tracking_provider.js +27 -0
  135. package/dist/cjs/tracking/index.d.ts +2 -0
  136. package/dist/cjs/tracking/index.js +23 -0
  137. package/dist/cjs/tracking/posthog_tracking_provider.d.ts +9 -0
  138. package/dist/cjs/tracking/posthog_tracking_provider.js +37 -0
  139. package/dist/cjs/tracking/segment_tracking_provider.d.ts +10 -0
  140. package/dist/cjs/tracking/segment_tracking_provider.js +50 -0
  141. package/dist/cjs/tracking/trackingProviderProxy.d.ts +9 -0
  142. package/dist/cjs/tracking/trackingProviderProxy.js +24 -0
  143. package/dist/cjs/tracking/tracking_api.d.ts +8 -0
  144. package/dist/cjs/tracking/tracking_api.js +2 -0
  145. package/dist/cjs/tracking/tracking_registry.d.ts +4 -0
  146. package/dist/cjs/tracking/tracking_registry.js +33 -0
  147. package/dist/cjs/tracking/tracking_spi.d.ts +9 -0
  148. package/dist/cjs/tracking/tracking_spi.js +2 -0
  149. package/dist/cjs/tracking/umami_tracking_provider.d.ts +14 -0
  150. package/dist/cjs/tracking/umami_tracking_provider.js +44 -0
  151. package/dist/css/main.css +438 -147
  152. package/dist/css/main.css.map +1 -1
  153. package/dist/dynamic/Compare/package.json +1 -0
  154. package/dist/dynamic/tracking/package.json +1 -0
  155. package/dist/esm/AttachmentEdit/AttachmentEdit.test.d.ts +1 -0
  156. package/dist/esm/AttachmentEdit/AttachmentEdit.test.js +47 -0
  157. package/dist/esm/Chatbot/Chatbot.d.ts +2 -1
  158. package/dist/esm/Chatbot/Chatbot.js +1 -0
  159. package/dist/esm/Chatbot/Chatbot.test.d.ts +1 -0
  160. package/dist/esm/Chatbot/Chatbot.test.js +23 -0
  161. package/dist/esm/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
  162. package/dist/esm/ChatbotAlert/ChatbotAlert.test.js +22 -0
  163. package/dist/esm/ChatbotContent/ChatbotContent.test.d.ts +1 -0
  164. package/dist/esm/ChatbotContent/ChatbotContent.test.js +13 -0
  165. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts +3 -3
  166. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
  167. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +27 -4
  168. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +24 -12
  169. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +99 -3
  170. package/dist/esm/ChatbotConversationHistoryNav/EmptyState.d.ts +11 -0
  171. package/dist/esm/ChatbotConversationHistoryNav/EmptyState.js +22 -0
  172. package/dist/esm/ChatbotConversationHistoryNav/LoadingState.d.ts +4 -0
  173. package/dist/esm/ChatbotConversationHistoryNav/LoadingState.js +38 -0
  174. package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
  175. package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +13 -0
  176. package/dist/esm/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
  177. package/dist/esm/ChatbotFooter/ChatbotFooternote.test.js +82 -0
  178. package/dist/esm/ChatbotFooter/ChatbotFootnote.d.ts +1 -1
  179. package/dist/esm/ChatbotFooter/ChatbotFootnote.js +1 -1
  180. package/dist/esm/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
  181. package/dist/esm/ChatbotHeader/ChatbotHeader.test.js +13 -0
  182. package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
  183. package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.js +13 -0
  184. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +3 -1
  185. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
  186. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +15 -0
  187. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
  188. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.js +13 -0
  189. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +3 -1
  190. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
  191. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +15 -0
  192. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
  193. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
  194. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +38 -0
  195. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +6 -4
  196. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
  197. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +36 -0
  198. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
  199. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
  200. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
  201. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +50 -0
  202. package/dist/esm/ChatbotToggle/ChatbotToggle.js +3 -1
  203. package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js +19 -11
  204. package/dist/esm/Compare/Compare.d.ts +17 -0
  205. package/dist/esm/Compare/Compare.js +43 -0
  206. package/dist/esm/Compare/Compare.test.d.ts +1 -0
  207. package/dist/esm/Compare/Compare.test.js +15 -0
  208. package/dist/esm/Compare/index.d.ts +2 -0
  209. package/dist/esm/Compare/index.js +2 -0
  210. package/dist/esm/Message/ErrorMessage/ErrorMessage.d.ts +4 -0
  211. package/dist/esm/Message/ErrorMessage/ErrorMessage.js +21 -0
  212. package/dist/esm/Message/ImageMessage/ImageMessage.d.ts +4 -0
  213. package/dist/esm/Message/ImageMessage/ImageMessage.js +20 -0
  214. package/dist/esm/Message/LinkMessage/LinkMessage.d.ts +4 -0
  215. package/dist/esm/Message/LinkMessage/LinkMessage.js +25 -0
  216. package/dist/esm/Message/Message.d.ts +49 -8
  217. package/dist/esm/Message/Message.js +68 -16
  218. package/dist/esm/Message/Message.test.js +269 -3
  219. package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +17 -0
  220. package/dist/esm/Message/QuickResponse/QuickResponse.js +27 -0
  221. package/dist/esm/Message/QuickStarts/FallbackImg.d.ts +13 -0
  222. package/dist/esm/Message/QuickStarts/FallbackImg.js +9 -0
  223. package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +27 -0
  224. package/dist/esm/Message/QuickStarts/QuickStartTile.js +52 -0
  225. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
  226. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.js +35 -0
  227. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
  228. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.js +48 -0
  229. package/dist/esm/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
  230. package/dist/esm/Message/QuickStarts/QuickStartTileHeader.js +5 -0
  231. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
  232. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +74 -0
  233. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
  234. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.js +74 -0
  235. package/dist/esm/Message/QuickStarts/types.d.ts +132 -0
  236. package/dist/esm/Message/QuickStarts/types.js +14 -0
  237. package/dist/esm/Message/TableMessage/TableMessage.d.ts +20 -0
  238. package/dist/esm/Message/TableMessage/TableMessage.js +62 -0
  239. package/dist/esm/Message/TableMessage/TbodyMessage.d.ts +7 -0
  240. package/dist/esm/Message/TableMessage/TbodyMessage.js +28 -0
  241. package/dist/esm/Message/TableMessage/TdMessage.d.ts +5 -0
  242. package/dist/esm/Message/TableMessage/TdMessage.js +21 -0
  243. package/dist/esm/Message/TableMessage/ThMessage.d.ts +5 -0
  244. package/dist/esm/Message/TableMessage/ThMessage.js +21 -0
  245. package/dist/esm/Message/TableMessage/TheadMessage.d.ts +5 -0
  246. package/dist/esm/Message/TableMessage/TheadMessage.js +21 -0
  247. package/dist/esm/Message/TableMessage/TrMessage.d.ts +7 -0
  248. package/dist/esm/Message/TableMessage/TrMessage.js +32 -0
  249. package/dist/esm/Message/TextMessage/TextMessage.d.ts +2 -1
  250. package/dist/esm/Message/TextMessage/TextMessage.js +3 -3
  251. package/dist/esm/Message/UserFeedback/CloseButton.d.ts +10 -0
  252. package/dist/esm/Message/UserFeedback/CloseButton.js +9 -0
  253. package/dist/esm/Message/UserFeedback/UserFeedback.d.ts +39 -0
  254. package/dist/esm/Message/UserFeedback/UserFeedback.js +49 -0
  255. package/dist/esm/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
  256. package/dist/esm/Message/UserFeedback/UserFeedback.test.js +128 -0
  257. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
  258. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +112 -0
  259. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
  260. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +244 -0
  261. package/dist/esm/MessageBar/AttachButton.js +4 -2
  262. package/dist/esm/MessageBar/MessageBar.d.ts +11 -4
  263. package/dist/esm/MessageBar/MessageBar.js +127 -46
  264. package/dist/esm/MessageBar/MessageBar.test.js +12 -4
  265. package/dist/esm/MessageBar/MicrophoneButton.d.ts +1 -1
  266. package/dist/esm/MessageBar/SendButton.js +3 -1
  267. package/dist/esm/MessageBar/StopButton.js +3 -1
  268. package/dist/esm/MessageBox/MessageBox.test.d.ts +1 -0
  269. package/dist/esm/MessageBox/MessageBox.test.js +17 -0
  270. package/dist/esm/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
  271. package/dist/esm/PreviewAttachment/PreviewAttachment.test.js +23 -0
  272. package/dist/esm/ResponseActions/ResponseActionButton.d.ts +4 -1
  273. package/dist/esm/ResponseActions/ResponseActionButton.js +18 -3
  274. package/dist/esm/ResponseActions/ResponseActions.d.ts +8 -2
  275. package/dist/esm/ResponseActions/ResponseActions.js +7 -7
  276. package/dist/esm/ResponseActions/ResponseActions.test.js +2 -2
  277. package/dist/esm/Settings/SettingsForm.test.d.ts +1 -0
  278. package/dist/esm/Settings/SettingsForm.test.js +21 -0
  279. package/dist/esm/__mocks__/rehype-external-links.d.ts +2 -0
  280. package/dist/esm/__mocks__/rehype-external-links.js +2 -0
  281. package/dist/esm/__mocks__/rehype-sanitize.d.ts +2 -0
  282. package/dist/esm/__mocks__/rehype-sanitize.js +2 -0
  283. package/dist/esm/__mocks__/rehype-unwrap-images.d.ts +2 -0
  284. package/dist/esm/__mocks__/rehype-unwrap-images.js +2 -0
  285. package/dist/esm/index.d.ts +4 -0
  286. package/dist/esm/index.js +4 -0
  287. package/dist/esm/tracking/console_tracking_provider.d.ts +10 -0
  288. package/dist/esm/tracking/console_tracking_provider.js +23 -0
  289. package/dist/esm/tracking/index.d.ts +2 -0
  290. package/dist/esm/tracking/index.js +2 -0
  291. package/dist/esm/tracking/posthog_tracking_provider.d.ts +9 -0
  292. package/dist/esm/tracking/posthog_tracking_provider.js +33 -0
  293. package/dist/esm/tracking/segment_tracking_provider.d.ts +10 -0
  294. package/dist/esm/tracking/segment_tracking_provider.js +46 -0
  295. package/dist/esm/tracking/trackingProviderProxy.d.ts +9 -0
  296. package/dist/esm/tracking/trackingProviderProxy.js +22 -0
  297. package/dist/esm/tracking/tracking_api.d.ts +8 -0
  298. package/dist/esm/tracking/tracking_api.js +1 -0
  299. package/dist/esm/tracking/tracking_registry.d.ts +4 -0
  300. package/dist/esm/tracking/tracking_registry.js +26 -0
  301. package/dist/esm/tracking/tracking_spi.d.ts +9 -0
  302. package/dist/esm/tracking/tracking_spi.js +1 -0
  303. package/dist/esm/tracking/umami_tracking_provider.d.ts +14 -0
  304. package/dist/esm/tracking/umami_tracking_provider.js +40 -0
  305. package/dist/tsconfig.tsbuildinfo +1 -1
  306. package/package.json +8 -9
  307. package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +8 -2
  308. package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +192 -15
  309. package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +219 -0
  310. package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentError.tsx +2 -2
  311. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +214 -12
  312. package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDropZone.tsx +2 -1
  313. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithAttachment.tsx +2 -2
  314. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +1 -1
  315. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +71 -0
  316. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedbackTimeout.tsx +27 -0
  317. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx +1 -1
  318. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +31 -0
  319. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx +1 -1
  320. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +1 -1
  321. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +61 -9
  322. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +244 -14
  323. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +54 -0
  324. package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts +65 -0
  325. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx +1 -1
  326. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx +5 -5
  327. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx +1 -1
  328. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +36 -3
  329. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx +67 -0
  330. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx +94 -0
  331. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx +1 -1
  332. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx +1 -1
  333. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomePrompt.tsx +7 -7
  334. package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx +1 -1
  335. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +21 -6
  336. package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +14 -0
  337. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +39 -1
  338. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +48 -35
  339. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +2 -2
  340. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +3 -3
  341. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +453 -0
  342. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +11 -11
  343. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +206 -0
  344. package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +104 -0
  345. package/patternfly-docs/content/extensions/chatbot/img/ai-action-inpage.svg +85 -0
  346. package/patternfly-docs/content/extensions/chatbot/img/ai-action-message.svg +63 -0
  347. package/patternfly-docs/content/extensions/chatbot/img/analytics-example.svg +127 -0
  348. package/patternfly-docs/content/extensions/chatbot/img/attached-file.svg +24 -29
  349. package/patternfly-docs/content/extensions/chatbot/img/attachment-menu.svg +4 -4
  350. package/patternfly-docs/content/extensions/chatbot/img/attachment-unsent.svg +30 -58
  351. package/patternfly-docs/content/extensions/chatbot/img/chatbot-analytics.svg +51 -0
  352. package/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +11 -12
  353. package/patternfly-docs/content/extensions/chatbot/img/chatbot-quickstarts-tile.svg +58 -0
  354. package/patternfly-docs/content/extensions/chatbot/img/chatbot-settings.svg +83 -0
  355. package/patternfly-docs/content/extensions/chatbot/img/comparison.svg +45 -0
  356. package/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +6 -29
  357. package/patternfly-docs/content/extensions/chatbot/img/docked.svg +259 -241
  358. package/patternfly-docs/content/extensions/chatbot/img/drawer.svg +255 -0
  359. package/patternfly-docs/content/extensions/chatbot/img/error-state.svg +30 -0
  360. package/patternfly-docs/content/extensions/chatbot/img/feedback-form.svg +88 -0
  361. package/patternfly-docs/content/extensions/chatbot/img/footnote.svg +1 -1
  362. package/patternfly-docs/content/extensions/chatbot/img/fullscreen.svg +25 -16
  363. package/patternfly-docs/content/extensions/chatbot/img/listening-pulse.svg +22 -0
  364. package/patternfly-docs/content/extensions/chatbot/img/listening.svg +1 -1
  365. package/patternfly-docs/content/extensions/chatbot/img/loading-state.svg +28 -0
  366. package/patternfly-docs/content/extensions/chatbot/img/masthead-toggle-notification.svg +49 -0
  367. package/patternfly-docs/content/extensions/chatbot/img/masthead-toggle.svg +75 -0
  368. package/patternfly-docs/content/extensions/chatbot/img/message-bar-elements.svg +3 -3
  369. package/patternfly-docs/content/extensions/chatbot/img/message-elements.svg +84 -142
  370. package/patternfly-docs/content/extensions/chatbot/img/message-feedback.svg +52 -0
  371. package/patternfly-docs/content/extensions/chatbot/img/message-responses.svg +54 -0
  372. package/patternfly-docs/content/extensions/chatbot/img/new-chat-emptystate.svg +27 -0
  373. package/patternfly-docs/content/extensions/chatbot/img/no-results-emptystate.svg +27 -0
  374. package/patternfly-docs/content/extensions/chatbot/img/overlay.svg +54 -39
  375. package/patternfly-docs/content/extensions/chatbot/img/posthog.svg +30 -0
  376. package/patternfly-docs/content/extensions/chatbot/img/segment.svg +36 -0
  377. package/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg +122 -0
  378. package/patternfly-docs/content/extensions/chatbot/img/source-tile.svg +62 -0
  379. package/patternfly-docs/content/extensions/chatbot/img/thank-you-card.svg +81 -0
  380. package/patternfly-docs/content/extensions/chatbot/img/toggle-customizations.svg +12 -0
  381. package/patternfly-docs/content/extensions/chatbot/img/toggle-tooltips.svg +38 -0
  382. package/patternfly-docs/content/extensions/chatbot/img/umami.svg +30 -0
  383. package/patternfly-docs/content/extensions/chatbot/img/welcome-elements.svg +82 -0
  384. package/patternfly-docs/content/extensions/chatbot/img/welcome-message.svg +94 -0
  385. package/src/AttachMenu/AttachMenu.scss +1 -1
  386. package/src/AttachmentEdit/AttachmentEdit.test.tsx +55 -0
  387. package/src/Chatbot/Chatbot.scss +20 -1
  388. package/src/Chatbot/Chatbot.test.tsx +31 -0
  389. package/src/Chatbot/Chatbot.tsx +2 -1
  390. package/src/ChatbotAlert/ChatbotAlert.test.tsx +31 -0
  391. package/src/ChatbotContent/ChatbotContent.scss +1 -0
  392. package/src/ChatbotContent/ChatbotContent.test.tsx +15 -0
  393. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +10 -4
  394. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +24 -1
  395. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +242 -3
  396. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +94 -26
  397. package/src/ChatbotConversationHistoryNav/EmptyState.tsx +44 -0
  398. package/src/ChatbotConversationHistoryNav/LoadingState.tsx +38 -0
  399. package/src/ChatbotFooter/ChatbotFooter.scss +8 -4
  400. package/src/ChatbotFooter/ChatbotFooter.test.tsx +15 -0
  401. package/src/ChatbotFooter/ChatbotFooternote.test.tsx +84 -0
  402. package/src/ChatbotFooter/ChatbotFootnote.tsx +2 -2
  403. package/src/ChatbotHeader/ChatbotHeader.scss +5 -6
  404. package/src/ChatbotHeader/ChatbotHeader.test.tsx +15 -0
  405. package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx +17 -0
  406. package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +20 -0
  407. package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +7 -1
  408. package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx +17 -0
  409. package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +19 -0
  410. package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +7 -1
  411. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +45 -0
  412. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +8 -1
  413. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +43 -0
  414. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +11 -4
  415. package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +75 -0
  416. package/src/ChatbotHeader/ChatbotHeaderTitle.tsx +7 -2
  417. package/src/ChatbotModal/ChatbotModal.scss +12 -12
  418. package/src/ChatbotToggle/ChatbotToggle.tsx +6 -1
  419. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss +2 -0
  420. package/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx +26 -18
  421. package/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap +2 -2
  422. package/src/CodeModal/CodeModal.scss +7 -4
  423. package/src/Compare/Compare.scss +72 -0
  424. package/src/Compare/Compare.test.tsx +31 -0
  425. package/src/Compare/Compare.tsx +98 -0
  426. package/src/Compare/index.ts +2 -0
  427. package/src/FileDetails/FileDetails.scss +1 -1
  428. package/src/FileDetailsLabel/FileDetailsLabel.scss +2 -2
  429. package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +4 -4
  430. package/src/Message/ErrorMessage/ErrorMessage.tsx +14 -0
  431. package/src/Message/ImageMessage/ImageMessage.scss +9 -0
  432. package/src/Message/ImageMessage/ImageMessage.tsx +14 -0
  433. package/src/Message/LinkMessage/LinkMessage.tsx +34 -0
  434. package/src/Message/ListMessage/ListMessage.scss +6 -6
  435. package/src/Message/Message.scss +4 -26
  436. package/src/Message/Message.test.tsx +367 -3
  437. package/src/Message/Message.tsx +157 -31
  438. package/src/Message/MessageLoading.scss +2 -2
  439. package/src/Message/QuickResponse/QuickResponse.scss +33 -0
  440. package/src/Message/QuickResponse/QuickResponse.tsx +54 -0
  441. package/src/Message/QuickStarts/FallbackImg.tsx +24 -0
  442. package/src/Message/QuickStarts/QuickStartTile.scss +24 -0
  443. package/src/Message/QuickStarts/QuickStartTile.tsx +147 -0
  444. package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx +57 -0
  445. package/src/Message/QuickStarts/QuickStartTileDescription.tsx +81 -0
  446. package/src/Message/QuickStarts/QuickStartTileHeader.tsx +21 -0
  447. package/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts +75 -0
  448. package/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts +75 -0
  449. package/src/Message/QuickStarts/types.ts +154 -0
  450. package/src/Message/TableMessage/TableMessage.scss +23 -0
  451. package/src/Message/TableMessage/TableMessage.tsx +83 -0
  452. package/src/Message/TableMessage/TbodyMessage.tsx +20 -0
  453. package/src/Message/TableMessage/TdMessage.tsx +11 -0
  454. package/src/Message/TableMessage/ThMessage.tsx +11 -0
  455. package/src/Message/TableMessage/TheadMessage.tsx +11 -0
  456. package/src/Message/TableMessage/TrMessage.tsx +27 -0
  457. package/src/Message/TextMessage/TextMessage.scss +21 -12
  458. package/src/Message/TextMessage/TextMessage.tsx +3 -3
  459. package/src/Message/UserFeedback/CloseButton.tsx +21 -0
  460. package/src/Message/UserFeedback/UserFeedback.scss +53 -0
  461. package/src/Message/UserFeedback/UserFeedback.test.tsx +236 -0
  462. package/src/Message/UserFeedback/UserFeedback.tsx +128 -0
  463. package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +255 -0
  464. package/src/Message/UserFeedback/UserFeedbackComplete.tsx +211 -0
  465. package/src/MessageBar/AttachButton.scss +19 -3
  466. package/src/MessageBar/AttachButton.tsx +3 -1
  467. package/src/MessageBar/MessageBar.scss +58 -24
  468. package/src/MessageBar/MessageBar.test.tsx +12 -4
  469. package/src/MessageBar/MessageBar.tsx +164 -65
  470. package/src/MessageBar/MicrophoneButton.scss +8 -8
  471. package/src/MessageBar/MicrophoneButton.tsx +1 -1
  472. package/src/MessageBar/SendButton.tsx +2 -0
  473. package/src/MessageBar/StopButton.scss +17 -3
  474. package/src/MessageBar/StopButton.tsx +2 -0
  475. package/src/MessageBox/JumpButton.scss +6 -6
  476. package/src/MessageBox/MessageBox.scss +1 -0
  477. package/src/MessageBox/MessageBox.test.tsx +26 -0
  478. package/src/PreviewAttachment/PreviewAttachment.test.tsx +51 -0
  479. package/src/ResponseActions/ResponseActionButton.tsx +14 -2
  480. package/src/ResponseActions/ResponseActions.scss +2 -2
  481. package/src/ResponseActions/ResponseActions.test.tsx +4 -2
  482. package/src/ResponseActions/ResponseActions.tsx +26 -2
  483. package/src/Settings/Settings.scss +2 -2
  484. package/src/Settings/SettingsForm.test.tsx +28 -0
  485. package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss +2 -2
  486. package/src/SourcesCard/SourcesCard.scss +9 -3
  487. package/src/TermsOfUse/TermsOfUse.scss +1 -1
  488. package/src/__mocks__/rehype-external-links.ts +3 -0
  489. package/src/__mocks__/rehype-sanitize.ts +3 -0
  490. package/src/__mocks__/rehype-unwrap-images.tsx +3 -0
  491. package/src/index.ts +6 -0
  492. package/src/main.scss +6 -6
  493. package/src/tracking/console_tracking_provider.ts +30 -0
  494. package/src/tracking/index.ts +3 -0
  495. package/src/tracking/posthog_tracking_provider.ts +42 -0
  496. package/src/tracking/segment_tracking_provider.ts +62 -0
  497. package/src/tracking/trackingProviderProxy.ts +28 -0
  498. package/src/tracking/tracking_api.ts +11 -0
  499. package/src/tracking/tracking_registry.ts +33 -0
  500. package/src/tracking/tracking_spi.ts +14 -0
  501. package/src/tracking/umami_tracking_provider.ts +54 -0
@@ -0,0 +1,94 @@
1
+ import React from 'react';
2
+ import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
3
+ import ChatbotConversationHistoryNav, {
4
+ Conversation
5
+ } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
6
+ import { Checkbox } from '@patternfly/react-core';
7
+
8
+ const initialConversations: { [key: string]: Conversation[] } = {
9
+ Today: [{ id: '1', text: 'Red Hat products and services' }],
10
+ 'This month': [
11
+ {
12
+ id: '2',
13
+ text: 'Enterprise Linux installation and setup'
14
+ },
15
+ { id: '3', text: 'Troubleshoot system crash' }
16
+ ],
17
+ March: [
18
+ { id: '4', text: 'Ansible security and updates' },
19
+ { id: '5', text: 'Red Hat certification' },
20
+ { id: '6', text: 'Lightspeed user documentation' }
21
+ ],
22
+ February: [
23
+ { id: '7', text: 'Crashing pod assistance' },
24
+ { id: '8', text: 'OpenShift AI pipelines' },
25
+ { id: '9', text: 'Updating subscription plan' },
26
+ { id: '10', text: 'Red Hat licensing options' }
27
+ ],
28
+ January: [
29
+ { id: '11', text: 'RHEL system performance' },
30
+ { id: '12', text: 'Manage user accounts' }
31
+ ]
32
+ };
33
+
34
+ export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
35
+ const [isOpen, setIsOpen] = React.useState(true);
36
+ const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
37
+ initialConversations
38
+ );
39
+ const displayMode = ChatbotDisplayMode.embedded;
40
+
41
+ const findMatchingItems = (targetValue: string) => {
42
+ let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
43
+ const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
44
+ if (filteredItems.length > 0) {
45
+ acc[key] = filteredItems;
46
+ }
47
+ return acc;
48
+ }, {});
49
+
50
+ // append message if no items are found
51
+ if (Object.keys(filteredConversations).length === 0) {
52
+ filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
53
+ }
54
+ return filteredConversations;
55
+ };
56
+
57
+ return (
58
+ <>
59
+ <Checkbox
60
+ label="Display drawer"
61
+ isChecked={isOpen}
62
+ onChange={() => {
63
+ setIsOpen(!isOpen);
64
+ setConversations(initialConversations);
65
+ }}
66
+ id="drawer-visible"
67
+ name="drawer-visible"
68
+ />
69
+ <ChatbotConversationHistoryNav
70
+ displayMode={displayMode}
71
+ onDrawerToggle={() => setIsOpen(!isOpen)}
72
+ isDrawerOpen={isOpen}
73
+ setIsDrawerOpen={setIsOpen}
74
+ // eslint-disable-next-line no-console
75
+ onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
76
+ conversations={conversations}
77
+ onNewChat={() => {
78
+ setIsOpen(!isOpen);
79
+ }}
80
+ handleTextInputChange={(value: string) => {
81
+ if (value === '') {
82
+ setConversations(initialConversations);
83
+ }
84
+ // this is where you would perform search on the items in the drawer
85
+ // and update the state
86
+ const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
87
+ setConversations(newConversations);
88
+ }}
89
+ drawerContent={<div>Drawer content</div>}
90
+ drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
91
+ />
92
+ </>
93
+ );
94
+ };
@@ -126,7 +126,7 @@ export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = ()
126
126
  return (
127
127
  <>
128
128
  {/* this is required for react-dropzone to work in Safari and Firefox */}
129
- <input {...getInputProps()} />
129
+ <input {...getInputProps()} hidden />
130
130
  <MessageBar
131
131
  onSendMessage={handleSend}
132
132
  attachMenuProps={{
@@ -116,7 +116,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
116
116
  so that users of assistive devices receive sufficient context */}
117
117
  <MessageBox announcement={announcement} position={position}>
118
118
  {messages.length === 0 && (
119
- <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
119
+ <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
120
120
  )}
121
121
  {/* This code block enables scrolling to the top of the last message.
122
122
  You can instead choose to move the div with scrollToBottomRef on it below
@@ -1,19 +1,19 @@
1
1
  import React from 'react';
2
2
 
3
3
  import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
4
- import Checkbox from '@patternfly/react-core';
4
+ import { Checkbox } from '@patternfly/react-core';
5
5
 
6
6
  export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
7
7
  const [showWelcomePrompts, setShowWelcomePrompts] = React.useState(true);
8
8
 
9
9
  const welcomePrompts = [
10
10
  {
11
- title: 'Topic 1',
12
- message: 'Helpful prompt for Topic 1'
11
+ title: 'Set up account',
12
+ message: 'Choose the necessary settings and preferences for your account.'
13
13
  },
14
14
  {
15
- title: 'Topic 2',
16
- message: 'Helpful prompt for Topic 2'
15
+ title: 'Troubleshoot issue',
16
+ message: 'Find documentation and instructions to resolve your issue.'
17
17
  }
18
18
  ];
19
19
 
@@ -29,8 +29,8 @@ export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
29
29
  id="showWelcomePrompts"
30
30
  />
31
31
  <ChatbotWelcomePrompt
32
- title="Hello, Chatbot User"
33
- description="How may I help you today?"
32
+ title="Hi, ChatBot User!"
33
+ description="How can I help you today?"
34
34
  {...(showWelcomePrompts && { prompts: welcomePrompts })}
35
35
  />
36
36
  </>
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
2
+ import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
3
3
 
4
4
  export const SquareChatbotToggle: React.FunctionComponent = () => {
5
5
  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
@@ -102,11 +102,9 @@ The "embedded" display mode is meant to be used within a [PatternFly page](/comp
102
102
  ### Content and message box
103
103
 
104
104
  The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) and [`<ChatbotFooter>`.](/patternfly-ai/chatbot/ui#footer)
105
- <br />
106
- <br />
105
+
107
106
  `<ChatbotContent>` usually contains a `<ChatbotMessageBox>` for displaying messages.
108
- <br />
109
- <br />
107
+
110
108
  Your code structure should look like this:
111
109
 
112
110
  ```noLive
@@ -144,8 +142,7 @@ To provide users with a more specific direction, you can also include optional w
144
142
  ### Skip to content
145
143
 
146
144
  To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
147
- <br />
148
- <br />
145
+
149
146
  When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
150
147
 
151
148
  ```js file="./SkipToContent.tsx" isFullscreen
@@ -371,6 +368,24 @@ If you're showing a conversation that is already active, you can set the `active
371
368
 
372
369
  ```
373
370
 
371
+ ### Resizable drawer
372
+
373
+ By default, the conversation history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their conversation history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
374
+
375
+ In this example, the drawer can be resized up to the max size of the parent and resized down to 200px wide. To customize this behavior further (including width, style, and focus behavior) use PatternFly [`<Drawer>` props](/components/drawer#props), [`<DrawerPanelContent>` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
376
+
377
+ ```js file="./ChatbotHeaderDrawerResizable.tsx"
378
+
379
+ ```
380
+
381
+ ### Drawer with simple menu
382
+
383
+ The drawer can also be used to display a list of basic menu items.
384
+
385
+ ```js file="./ChatbotHeaderDrawerNavigation.tsx"
386
+
387
+ ```
388
+
374
389
  ### Terms of use
375
390
 
376
391
  Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
@@ -47,6 +47,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
47
47
 
48
48
  ## Demos
49
49
 
50
+ ### Message feedback
51
+
52
+ When a user selects a positive or negative message action, you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be configured to time out automatically.
53
+
54
+ The following example demonstrates a full feedback flow, which accepts written feedback submission and displays a thank you card.
55
+
56
+ It also demonstrates how to handle focus appropriately for accessibility. The card will be focused when it appears in the DOM. When the card closes, place the focus back on the launching button. To provide additional context on what the button controls, you can also add `aria-expanded` and `aria-controls` attributes to the feedback buttons.
57
+
58
+ It is also important to announce when new content appears onscreen for accessibility purposes. `isLiveRegion` is set to true by default on `<Message>` so it will make appropriate announcements for you when the feedback card appears.
59
+
60
+ ```js file="./Feedback.tsx"
61
+
62
+ ```
63
+
50
64
  ### Attach via upload button in message bar
51
65
 
52
66
  This demo displays unique attachment features, including:
@@ -21,7 +21,8 @@ propComponents:
21
21
  'ChatbotFootnote',
22
22
  'MessageBox',
23
23
  'Message',
24
- 'MessageBarWithAttachMenuProps'
24
+ 'MessageBarWithAttachMenuProps',
25
+ 'CompareProps'
25
26
  ]
26
27
  sortValue: 2
27
28
  ---
@@ -34,6 +35,7 @@ import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
34
35
  import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
35
36
  import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
36
37
  import Message from '@patternfly/chatbot/dist/dynamic/Message';
38
+ import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
37
39
  import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
38
40
 
39
41
  import ChatbotHeader, {
@@ -55,6 +57,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
55
57
  import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
56
58
  import userAvatar from '../Messages/user_avatar.svg';
57
59
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
60
+ import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
61
+
58
62
 
59
63
  ### Basic ChatBot
60
64
 
@@ -103,3 +107,37 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
103
107
  ```js file="./EmbeddedChatbot.tsx" isFullscreen
104
108
 
105
109
  ```
110
+
111
+ ### Inline drawer ChatBot
112
+
113
+ This demo displays a ChatBot in a static, inline drawer. This demo includes:
114
+
115
+ 1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
116
+ 2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
117
+
118
+ **Note:** The inline drawer ChatBot is built to fit and perform within a drawer, but the implementation of the drawer is up to you. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.
119
+
120
+ ```js file="./ChatbotInDrawer.tsx" isFullscreen
121
+
122
+ ```
123
+
124
+ ### Comparing ChatBots
125
+
126
+ To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.
127
+ <br /><br />
128
+ Your code structure should look like this:
129
+
130
+ ```noLive
131
+ <Page ... >
132
+ <div className="pf-chatbot__compare-container">
133
+ <Compare ... />
134
+ <ChatbotFooter ... >
135
+ <MessageBar ... />
136
+ </ChatbotFooter>
137
+ </div>
138
+ </Page>
139
+ ```
140
+
141
+ ```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen
142
+
143
+ ```
@@ -32,24 +32,26 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
32
32
  import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
33
33
  import userAvatar from '../Messages/user_avatar.svg';
34
34
  import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
35
+ import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
36
+ import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
35
37
 
36
38
  const footnoteProps = {
37
- label: 'Lightspeed uses AI. Check for mistakes.',
39
+ label: 'ChatBot uses AI. Check for mistakes.',
38
40
  popover: {
39
- title: 'Verify accuracy',
40
- description: `While Lightspeed strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
41
+ title: 'Verify information',
42
+ 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
43
  bannerImage: {
42
44
  src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
43
45
  alt: 'Example image for footnote popover'
44
46
  },
45
47
  cta: {
46
- label: 'Got it',
48
+ label: 'Dismiss',
47
49
  onClick: () => {
48
50
  alert('Do something!');
49
51
  }
50
52
  },
51
53
  link: {
52
- label: 'Learn more',
54
+ label: 'View AI policy',
53
55
  url: 'https://www.redhat.com/'
54
56
  }
55
57
  }
@@ -95,6 +97,20 @@ export default MessageLoading;
95
97
  // The timestamps re-render with them.
96
98
  const date = new Date();
97
99
 
100
+ const initProps: InitProps = {
101
+ segmentKey: 'TODO-key', // TODO add your key here
102
+ posthogKey: 'TODO-key',
103
+ umamiKey: 'TODO-key',
104
+ umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
105
+ console: true,
106
+ something: 'test'
107
+ };
108
+
109
+ const tracking = getTrackingProviders(initProps);
110
+ tracking.identify('user-123'); // TODO get real user id
111
+ tracking.trackPageView(window.document.documentURI);
112
+
113
+ const actionEventName = 'MessageAction';
98
114
  const initialMessages: MessageProps[] = [
99
115
  {
100
116
  id: '1',
@@ -113,28 +129,23 @@ const initialMessages: MessageProps[] = [
113
129
  avatar: patternflyAvatar,
114
130
  timestamp: date.toLocaleString(),
115
131
  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') }
132
+ positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
133
+ negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },
134
+ copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },
135
+ share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },
136
+ listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }
126
137
  }
127
138
  }
128
139
  ];
129
140
 
130
141
  const welcomePrompts = [
131
142
  {
132
- title: 'Topic 1',
133
- message: 'Helpful prompt for Topic 1'
143
+ title: 'Set up account',
144
+ message: 'Choose the necessary settings and preferences for your account.'
134
145
  },
135
146
  {
136
- title: 'Topic 2',
137
- message: 'Helpful prompt for Topic 2'
147
+ title: 'Troubleshoot issue',
148
+ message: 'Find documentation and instructions to resolve your issue.'
138
149
  }
139
150
  ];
140
151
 
@@ -164,6 +175,7 @@ const initialConversations = {
164
175
  ]
165
176
  };
166
177
 
178
+ const actionEvent2 = 'ActionEvent2';
167
179
  export const ChatbotDemo: React.FunctionComponent = () => {
168
180
  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
169
181
  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
@@ -180,7 +192,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
180
192
  const chatbotRef = React.useRef<HTMLDivElement>(null);
181
193
  const historyRef = React.useRef<HTMLButtonElement>(null);
182
194
 
183
- // Autu-scrolls to the latest message
195
+ // Auto-scrolls to the latest message
184
196
  React.useEffect(() => {
185
197
  // don't scroll the first load - in this demo, we know we start with two messages
186
198
  if (messages.length > 2) {
@@ -193,6 +205,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
193
205
  value: string | number | undefined
194
206
  ) => {
195
207
  setSelectedModel(value as string);
208
+ tracking.trackSingleItem('ModelSelected', { model: value });
196
209
  };
197
210
 
198
211
  const onSelectDisplayMode = (
@@ -210,6 +223,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
210
223
 
211
224
  const handleSend = (message: string) => {
212
225
  setIsSendButtonDisabled(true);
226
+ tracking.trackSingleItem('UserInputReceived', { text: message });
213
227
  const newMessages: MessageProps[] = [];
214
228
  // We can't use structuredClone since messages contains functions, but we can't mutate
215
229
  // items that are going into state or the UI won't update correctly
@@ -255,21 +269,17 @@ export const ChatbotDemo: React.FunctionComponent = () => {
255
269
  avatar: patternflyAvatar,
256
270
  timestamp: date.toLocaleString(),
257
271
  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') }
272
+ positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },
273
+ negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },
274
+ copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },
275
+ share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },
276
+ listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }
268
277
  }
269
278
  });
270
279
  setMessages(loadedMessages);
271
280
  // make announcement to assistive devices that new message has loaded
272
281
  setAnnouncement(`Message from Bot: API response goes here`);
282
+ tracking.trackSingleItem('BotResponded', { undefined });
273
283
  setIsSendButtonDisabled(false);
274
284
  }, 5000);
275
285
  };
@@ -339,7 +349,10 @@ export const ChatbotDemo: React.FunctionComponent = () => {
339
349
  <ChatbotToggle
340
350
  tooltipLabel="Chatbot"
341
351
  isChatbotVisible={chatbotVisible}
342
- onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
352
+ onToggleChatbot={function () {
353
+ setChatbotVisible(!chatbotVisible);
354
+ tracking.trackSingleItem('Chatbot Visible', { isVisible: !chatbotVisible }); // TODO correct?
355
+ }}
343
356
  id="chatbot-toggle"
344
357
  ref={toggleRef}
345
358
  />
@@ -436,14 +449,14 @@ export const ChatbotDemo: React.FunctionComponent = () => {
436
449
  so that users of assistive devices receive sufficient context */}
437
450
  <MessageBox announcement={announcement}>
438
451
  <ChatbotWelcomePrompt
439
- title="Hello, Chatbot User"
440
- description="How may I help you today?"
452
+ title="Hi, ChatBot User!"
453
+ description="How can I help you today?"
441
454
  prompts={welcomePrompts}
442
455
  />
443
456
  {/* This code block enables scrolling to the top of the last message.
444
- You can instead choose to move the div with scrollToBottomRef on it below
457
+ You can instead choose to move the div with scrollToBottomRef on it below
445
458
  the map of messages, so that users are forced to scroll to the bottom.
446
- If you are using streaming, you will want to take a different approach;
459
+ If you are using streaming, you will want to take a different approach;
447
460
  see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
448
461
  {messages.map((message, index) => {
449
462
  if (index === messages.length - 1) {
@@ -231,7 +231,7 @@ export const BasicDemo: React.FunctionComponent = () => {
231
231
  {error}
232
232
  </ChatbotAlert>
233
233
  )}
234
- <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
234
+ <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
235
235
  {messages.map((message) => (
236
236
  <Message key={message.name} {...message} />
237
237
  ))}
@@ -244,7 +244,7 @@ export const BasicDemo: React.FunctionComponent = () => {
244
244
  </div>
245
245
  )}
246
246
  <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
247
- <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
247
+ <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
248
248
  </ChatbotFooter>
249
249
  </FileDropZone>
250
250
  </Chatbot>
@@ -209,7 +209,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
209
209
  return (
210
210
  <>
211
211
  {/* this is required for react-dropzone to work in Safari and Firefox */}
212
- <input {...getInputProps()} />
212
+ <input {...getInputProps()} hidden />
213
213
  <ChatbotToggle
214
214
  tooltipLabel="Chatbot"
215
215
  isChatbotVisible={chatbotVisible}
@@ -232,7 +232,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
232
232
  {error}
233
233
  </ChatbotAlert>
234
234
  )}
235
- <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
235
+ <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
236
236
  {messages.map((message) => (
237
237
  <Message key={message.name} {...message} />
238
238
  ))}
@@ -259,7 +259,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
259
259
  onAttachMenuToggleClick: onToggleClick
260
260
  }}
261
261
  />
262
- <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
262
+ <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
263
263
  </ChatbotFooter>
264
264
  </>
265
265
  </FileDropZone>