@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21

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 (401) 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.test.d.ts +1 -0
  4. package/dist/cjs/Chatbot/Chatbot.test.js +28 -0
  5. package/dist/cjs/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
  6. package/dist/cjs/ChatbotAlert/ChatbotAlert.test.js +27 -0
  7. package/dist/cjs/ChatbotContent/ChatbotContent.test.d.ts +1 -0
  8. package/dist/cjs/ChatbotContent/ChatbotContent.test.js +18 -0
  9. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
  10. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +17 -1
  11. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -9
  12. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +39 -3
  13. package/dist/cjs/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
  14. package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js +18 -0
  15. package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
  16. package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.js +87 -0
  17. package/dist/cjs/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
  18. package/dist/cjs/ChatbotHeader/ChatbotHeader.test.js +18 -0
  19. package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
  20. package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.test.js +18 -0
  21. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
  22. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +16 -0
  23. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
  24. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js +20 -0
  25. package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
  26. package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.test.js +18 -0
  27. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
  28. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +4 -2
  29. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
  30. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.test.js +20 -0
  31. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
  32. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
  33. package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +43 -0
  34. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +3 -1
  35. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
  36. package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +41 -0
  37. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
  38. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.js +47 -0
  39. package/dist/cjs/ChatbotHeader/index.d.ts +1 -0
  40. package/dist/cjs/ChatbotHeader/index.js +1 -0
  41. package/dist/cjs/ChatbotToggle/ChatbotToggle.js +3 -1
  42. package/dist/cjs/CodeModal/CodeModal.js +2 -12
  43. package/dist/cjs/Compare/Compare.d.ts +17 -0
  44. package/dist/cjs/Compare/Compare.js +50 -0
  45. package/dist/cjs/Compare/Compare.test.d.ts +1 -0
  46. package/dist/cjs/Compare/Compare.test.js +20 -0
  47. package/dist/cjs/Compare/index.d.ts +2 -0
  48. package/dist/cjs/Compare/index.js +23 -0
  49. package/dist/cjs/Message/ListMessage/OrderedListMessage.d.ts +1 -1
  50. package/dist/cjs/Message/ListMessage/OrderedListMessage.js +2 -2
  51. package/dist/cjs/Message/Message.d.ts +31 -7
  52. package/dist/cjs/Message/Message.js +47 -15
  53. package/dist/cjs/Message/Message.test.js +183 -3
  54. package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts +17 -0
  55. package/dist/cjs/Message/QuickResponse/QuickResponse.js +34 -0
  56. package/dist/cjs/Message/QuickStarts/FallbackImg.d.ts +13 -0
  57. package/dist/cjs/Message/QuickStarts/FallbackImg.js +34 -0
  58. package/dist/cjs/Message/QuickStarts/QuickStartTile.d.ts +27 -0
  59. package/dist/cjs/Message/QuickStarts/QuickStartTile.js +82 -0
  60. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
  61. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.js +64 -0
  62. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
  63. package/dist/cjs/Message/QuickStarts/QuickStartTileDescription.test.js +76 -0
  64. package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
  65. package/dist/cjs/Message/QuickStarts/QuickStartTileHeader.js +30 -0
  66. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
  67. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +77 -0
  68. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
  69. package/dist/cjs/Message/QuickStarts/monitor-sampleapp-quickstart.js +77 -0
  70. package/dist/cjs/Message/QuickStarts/types.d.ts +132 -0
  71. package/dist/cjs/Message/QuickStarts/types.js +17 -0
  72. package/dist/cjs/Message/TableMessage/TableMessage.d.ts +20 -0
  73. package/dist/cjs/Message/TableMessage/TableMessage.js +67 -0
  74. package/dist/cjs/Message/TableMessage/TbodyMessage.d.ts +7 -0
  75. package/dist/cjs/Message/TableMessage/TbodyMessage.js +33 -0
  76. package/dist/cjs/Message/TableMessage/TdMessage.d.ts +5 -0
  77. package/dist/cjs/Message/TableMessage/TdMessage.js +26 -0
  78. package/dist/cjs/Message/TableMessage/ThMessage.d.ts +5 -0
  79. package/dist/cjs/Message/TableMessage/ThMessage.js +26 -0
  80. package/dist/cjs/Message/TableMessage/TheadMessage.d.ts +5 -0
  81. package/dist/cjs/Message/TableMessage/TheadMessage.js +26 -0
  82. package/dist/cjs/Message/TableMessage/TrMessage.d.ts +7 -0
  83. package/dist/cjs/Message/TableMessage/TrMessage.js +37 -0
  84. package/dist/cjs/Message/TextMessage/TextMessage.d.ts +2 -1
  85. package/dist/cjs/Message/TextMessage/TextMessage.js +2 -2
  86. package/dist/cjs/Message/UserFeedback/CloseButton.d.ts +10 -0
  87. package/dist/cjs/Message/UserFeedback/CloseButton.js +14 -0
  88. package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts +39 -0
  89. package/dist/cjs/Message/UserFeedback/UserFeedback.js +55 -0
  90. package/dist/cjs/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
  91. package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +146 -0
  92. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
  93. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +117 -0
  94. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
  95. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +249 -0
  96. package/dist/cjs/MessageBar/AttachButton.js +4 -2
  97. package/dist/cjs/MessageBar/MessageBar.js +9 -12
  98. package/dist/cjs/MessageBar/MessageBar.test.js +4 -4
  99. package/dist/cjs/MessageBar/SendButton.js +3 -1
  100. package/dist/cjs/MessageBar/StopButton.js +3 -1
  101. package/dist/cjs/MessageBox/MessageBox.test.d.ts +1 -0
  102. package/dist/cjs/MessageBox/MessageBox.test.js +22 -0
  103. package/dist/cjs/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
  104. package/dist/cjs/PreviewAttachment/PreviewAttachment.test.js +28 -0
  105. package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +10 -1
  106. package/dist/cjs/ResponseActions/ResponseActionButton.js +28 -5
  107. package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  108. package/dist/cjs/ResponseActions/ResponseActionButton.test.js +54 -0
  109. package/dist/cjs/ResponseActions/ResponseActions.d.ts +12 -2
  110. package/dist/cjs/ResponseActions/ResponseActions.js +26 -9
  111. package/dist/cjs/ResponseActions/ResponseActions.test.js +79 -5
  112. package/dist/cjs/Settings/SettingsForm.d.ts +13 -0
  113. package/dist/cjs/Settings/SettingsForm.js +27 -0
  114. package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -0
  115. package/dist/cjs/Settings/SettingsForm.test.js +26 -0
  116. package/dist/cjs/Settings/index.d.ts +2 -0
  117. package/dist/cjs/Settings/index.js +23 -0
  118. package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +34 -0
  119. package/dist/cjs/TermsOfUse/TermsOfUse.js +49 -0
  120. package/dist/cjs/TermsOfUse/TermsOfUse.test.d.ts +1 -0
  121. package/dist/cjs/TermsOfUse/TermsOfUse.test.js +79 -0
  122. package/dist/cjs/TermsOfUse/index.d.ts +2 -0
  123. package/dist/cjs/TermsOfUse/index.js +23 -0
  124. package/dist/cjs/index.d.ts +6 -0
  125. package/dist/cjs/index.js +10 -1
  126. package/dist/css/main.css +400 -102
  127. package/dist/css/main.css.map +1 -1
  128. package/dist/dynamic/Compare/package.json +1 -0
  129. package/dist/dynamic/Settings/package.json +1 -0
  130. package/dist/dynamic/TermsOfUse/package.json +1 -0
  131. package/dist/esm/AttachmentEdit/AttachmentEdit.test.d.ts +1 -0
  132. package/dist/esm/AttachmentEdit/AttachmentEdit.test.js +47 -0
  133. package/dist/esm/Chatbot/Chatbot.test.d.ts +1 -0
  134. package/dist/esm/Chatbot/Chatbot.test.js +23 -0
  135. package/dist/esm/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
  136. package/dist/esm/ChatbotAlert/ChatbotAlert.test.js +22 -0
  137. package/dist/esm/ChatbotContent/ChatbotContent.test.d.ts +1 -0
  138. package/dist/esm/ChatbotContent/ChatbotContent.test.js +13 -0
  139. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
  140. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +17 -1
  141. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -9
  142. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +39 -3
  143. package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
  144. package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +13 -0
  145. package/dist/esm/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
  146. package/dist/esm/ChatbotFooter/ChatbotFooternote.test.js +82 -0
  147. package/dist/esm/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
  148. package/dist/esm/ChatbotHeader/ChatbotHeader.test.js +13 -0
  149. package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
  150. package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.js +13 -0
  151. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
  152. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +10 -0
  153. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
  154. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +15 -0
  155. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
  156. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.js +13 -0
  157. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
  158. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +4 -2
  159. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
  160. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +15 -0
  161. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
  162. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
  163. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +38 -0
  164. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +3 -1
  165. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
  166. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +36 -0
  167. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
  168. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +42 -0
  169. package/dist/esm/ChatbotHeader/index.d.ts +1 -0
  170. package/dist/esm/ChatbotHeader/index.js +1 -0
  171. package/dist/esm/ChatbotToggle/ChatbotToggle.js +3 -1
  172. package/dist/esm/CodeModal/CodeModal.js +2 -12
  173. package/dist/esm/Compare/Compare.d.ts +17 -0
  174. package/dist/esm/Compare/Compare.js +43 -0
  175. package/dist/esm/Compare/Compare.test.d.ts +1 -0
  176. package/dist/esm/Compare/Compare.test.js +15 -0
  177. package/dist/esm/Compare/index.d.ts +2 -0
  178. package/dist/esm/Compare/index.js +2 -0
  179. package/dist/esm/Message/ListMessage/OrderedListMessage.d.ts +1 -1
  180. package/dist/esm/Message/ListMessage/OrderedListMessage.js +2 -2
  181. package/dist/esm/Message/Message.d.ts +31 -7
  182. package/dist/esm/Message/Message.js +45 -13
  183. package/dist/esm/Message/Message.test.js +183 -3
  184. package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +17 -0
  185. package/dist/esm/Message/QuickResponse/QuickResponse.js +27 -0
  186. package/dist/esm/Message/QuickStarts/FallbackImg.d.ts +13 -0
  187. package/dist/esm/Message/QuickStarts/FallbackImg.js +9 -0
  188. package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +27 -0
  189. package/dist/esm/Message/QuickStarts/QuickStartTile.js +52 -0
  190. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
  191. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.js +35 -0
  192. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
  193. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.js +48 -0
  194. package/dist/esm/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
  195. package/dist/esm/Message/QuickStarts/QuickStartTileHeader.js +5 -0
  196. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
  197. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +74 -0
  198. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
  199. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.js +74 -0
  200. package/dist/esm/Message/QuickStarts/types.d.ts +132 -0
  201. package/dist/esm/Message/QuickStarts/types.js +14 -0
  202. package/dist/esm/Message/TableMessage/TableMessage.d.ts +20 -0
  203. package/dist/esm/Message/TableMessage/TableMessage.js +62 -0
  204. package/dist/esm/Message/TableMessage/TbodyMessage.d.ts +7 -0
  205. package/dist/esm/Message/TableMessage/TbodyMessage.js +28 -0
  206. package/dist/esm/Message/TableMessage/TdMessage.d.ts +5 -0
  207. package/dist/esm/Message/TableMessage/TdMessage.js +21 -0
  208. package/dist/esm/Message/TableMessage/ThMessage.d.ts +5 -0
  209. package/dist/esm/Message/TableMessage/ThMessage.js +21 -0
  210. package/dist/esm/Message/TableMessage/TheadMessage.d.ts +5 -0
  211. package/dist/esm/Message/TableMessage/TheadMessage.js +21 -0
  212. package/dist/esm/Message/TableMessage/TrMessage.d.ts +7 -0
  213. package/dist/esm/Message/TableMessage/TrMessage.js +32 -0
  214. package/dist/esm/Message/TextMessage/TextMessage.d.ts +2 -1
  215. package/dist/esm/Message/TextMessage/TextMessage.js +3 -3
  216. package/dist/esm/Message/UserFeedback/CloseButton.d.ts +10 -0
  217. package/dist/esm/Message/UserFeedback/CloseButton.js +9 -0
  218. package/dist/esm/Message/UserFeedback/UserFeedback.d.ts +39 -0
  219. package/dist/esm/Message/UserFeedback/UserFeedback.js +50 -0
  220. package/dist/esm/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
  221. package/dist/esm/Message/UserFeedback/UserFeedback.test.js +141 -0
  222. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
  223. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +112 -0
  224. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
  225. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +244 -0
  226. package/dist/esm/MessageBar/AttachButton.js +4 -2
  227. package/dist/esm/MessageBar/MessageBar.js +9 -12
  228. package/dist/esm/MessageBar/MessageBar.test.js +4 -4
  229. package/dist/esm/MessageBar/SendButton.js +3 -1
  230. package/dist/esm/MessageBar/StopButton.js +3 -1
  231. package/dist/esm/MessageBox/MessageBox.test.d.ts +1 -0
  232. package/dist/esm/MessageBox/MessageBox.test.js +17 -0
  233. package/dist/esm/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
  234. package/dist/esm/PreviewAttachment/PreviewAttachment.test.js +23 -0
  235. package/dist/esm/ResponseActions/ResponseActionButton.d.ts +10 -1
  236. package/dist/esm/ResponseActions/ResponseActionButton.js +25 -2
  237. package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  238. package/dist/esm/ResponseActions/ResponseActionButton.test.js +49 -0
  239. package/dist/esm/ResponseActions/ResponseActions.d.ts +12 -2
  240. package/dist/esm/ResponseActions/ResponseActions.js +26 -9
  241. package/dist/esm/ResponseActions/ResponseActions.test.js +79 -5
  242. package/dist/esm/Settings/SettingsForm.d.ts +13 -0
  243. package/dist/esm/Settings/SettingsForm.js +20 -0
  244. package/dist/esm/Settings/SettingsForm.test.d.ts +1 -0
  245. package/dist/esm/Settings/SettingsForm.test.js +21 -0
  246. package/dist/esm/Settings/index.d.ts +2 -0
  247. package/dist/esm/Settings/index.js +2 -0
  248. package/dist/esm/TermsOfUse/TermsOfUse.d.ts +34 -0
  249. package/dist/esm/TermsOfUse/TermsOfUse.js +42 -0
  250. package/dist/esm/TermsOfUse/TermsOfUse.test.d.ts +1 -0
  251. package/dist/esm/TermsOfUse/TermsOfUse.test.js +74 -0
  252. package/dist/esm/TermsOfUse/index.d.ts +2 -0
  253. package/dist/esm/TermsOfUse/index.js +2 -0
  254. package/dist/esm/index.d.ts +6 -0
  255. package/dist/esm/index.js +6 -0
  256. package/dist/tsconfig.tsbuildinfo +1 -1
  257. package/package.json +7 -13
  258. package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +5 -2
  259. package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +41 -4
  260. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +168 -13
  261. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +4 -0
  262. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +71 -0
  263. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedbackTimeout.tsx +27 -0
  264. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +31 -0
  265. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +63 -11
  266. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +208 -12
  267. package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts +65 -0
  268. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx +1 -1
  269. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx +2 -2
  270. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +2 -2
  271. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx +67 -0
  272. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx +94 -0
  273. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx +1 -1
  274. package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-TermsAndConditionsHeader.svg +148 -0
  275. package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx +289 -0
  276. package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx +1 -1
  277. package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUse.tsx +147 -0
  278. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +49 -6
  279. package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +14 -0
  280. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +26 -3
  281. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +2 -2
  282. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +20 -19
  283. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +2 -2
  284. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +2 -2
  285. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +206 -0
  286. package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +104 -0
  287. package/patternfly-docs/content/extensions/chatbot/img/attached-file.svg +24 -29
  288. package/patternfly-docs/content/extensions/chatbot/img/attachment-menu.svg +4 -4
  289. package/patternfly-docs/content/extensions/chatbot/img/attachment-unsent.svg +30 -57
  290. package/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +5 -5
  291. package/patternfly-docs/content/extensions/chatbot/img/chatbot-quickstarts-tile.svg +58 -0
  292. package/patternfly-docs/content/extensions/chatbot/img/chatbot-settings.svg +83 -0
  293. package/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +6 -29
  294. package/patternfly-docs/content/extensions/chatbot/img/docked.svg +68 -49
  295. package/patternfly-docs/content/extensions/chatbot/img/footnote.svg +1 -1
  296. package/patternfly-docs/content/extensions/chatbot/img/fullscreen.svg +25 -16
  297. package/patternfly-docs/content/extensions/chatbot/img/listening.svg +1 -1
  298. package/patternfly-docs/content/extensions/chatbot/img/message-bar-elements.svg +3 -3
  299. package/patternfly-docs/content/extensions/chatbot/img/message-elements.svg +85 -142
  300. package/patternfly-docs/content/extensions/chatbot/img/overlay.svg +52 -36
  301. package/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg +122 -0
  302. package/patternfly-docs/content/extensions/chatbot/img/source-tile.svg +62 -0
  303. package/patternfly-docs/content/extensions/chatbot/img/toggle-customizations.svg +12 -0
  304. package/src/AttachMenu/AttachMenu.scss +1 -1
  305. package/src/AttachmentEdit/AttachmentEdit.test.tsx +55 -0
  306. package/src/Chatbot/Chatbot.test.tsx +31 -0
  307. package/src/ChatbotAlert/ChatbotAlert.test.tsx +31 -0
  308. package/src/ChatbotContent/ChatbotContent.test.tsx +15 -0
  309. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +7 -1
  310. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +8 -1
  311. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +112 -3
  312. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +41 -8
  313. package/src/ChatbotFooter/ChatbotFooter.scss +2 -6
  314. package/src/ChatbotFooter/ChatbotFooter.test.tsx +15 -0
  315. package/src/ChatbotFooter/ChatbotFooternote.test.tsx +84 -0
  316. package/src/ChatbotHeader/ChatbotHeader.scss +2 -5
  317. package/src/ChatbotHeader/ChatbotHeader.test.tsx +15 -0
  318. package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx +17 -0
  319. package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +20 -0
  320. package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +57 -0
  321. package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx +17 -0
  322. package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +19 -0
  323. package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +11 -2
  324. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +45 -0
  325. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +8 -1
  326. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +43 -0
  327. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +8 -1
  328. package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +59 -0
  329. package/src/ChatbotHeader/index.ts +1 -0
  330. package/src/ChatbotModal/ChatbotModal.scss +1 -1
  331. package/src/ChatbotToggle/ChatbotToggle.tsx +6 -1
  332. package/src/CodeModal/CodeModal.scss +9 -1
  333. package/src/CodeModal/CodeModal.tsx +2 -13
  334. package/src/Compare/Compare.scss +72 -0
  335. package/src/Compare/Compare.test.tsx +31 -0
  336. package/src/Compare/Compare.tsx +98 -0
  337. package/src/Compare/index.ts +2 -0
  338. package/src/FileDetails/FileDetails.scss +1 -1
  339. package/src/FileDropZone/__snapshots__/FileDropZone.test.tsx.snap +1 -1
  340. package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +4 -4
  341. package/src/Message/ListMessage/ListMessage.scss +5 -5
  342. package/src/Message/ListMessage/OrderedListMessage.tsx +2 -2
  343. package/src/Message/Message.scss +4 -26
  344. package/src/Message/Message.test.tsx +215 -3
  345. package/src/Message/Message.tsx +94 -23
  346. package/src/Message/MessageLoading.scss +2 -2
  347. package/src/Message/QuickResponse/QuickResponse.scss +33 -0
  348. package/src/Message/QuickResponse/QuickResponse.tsx +54 -0
  349. package/src/Message/QuickStarts/FallbackImg.tsx +24 -0
  350. package/src/Message/QuickStarts/QuickStartTile.scss +24 -0
  351. package/src/Message/QuickStarts/QuickStartTile.tsx +147 -0
  352. package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx +57 -0
  353. package/src/Message/QuickStarts/QuickStartTileDescription.tsx +81 -0
  354. package/src/Message/QuickStarts/QuickStartTileHeader.tsx +21 -0
  355. package/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts +75 -0
  356. package/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts +75 -0
  357. package/src/Message/QuickStarts/types.ts +154 -0
  358. package/src/Message/TableMessage/TableMessage.scss +23 -0
  359. package/src/Message/TableMessage/TableMessage.tsx +83 -0
  360. package/src/Message/TableMessage/TbodyMessage.tsx +20 -0
  361. package/src/Message/TableMessage/TdMessage.tsx +11 -0
  362. package/src/Message/TableMessage/ThMessage.tsx +11 -0
  363. package/src/Message/TableMessage/TheadMessage.tsx +11 -0
  364. package/src/Message/TableMessage/TrMessage.tsx +27 -0
  365. package/src/Message/TextMessage/TextMessage.scss +13 -11
  366. package/src/Message/TextMessage/TextMessage.tsx +3 -3
  367. package/src/Message/UserFeedback/CloseButton.tsx +21 -0
  368. package/src/Message/UserFeedback/UserFeedback.scss +53 -0
  369. package/src/Message/UserFeedback/UserFeedback.test.tsx +257 -0
  370. package/src/Message/UserFeedback/UserFeedback.tsx +132 -0
  371. package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +255 -0
  372. package/src/Message/UserFeedback/UserFeedbackComplete.tsx +211 -0
  373. package/src/MessageBar/AttachButton.scss +19 -3
  374. package/src/MessageBar/AttachButton.tsx +3 -1
  375. package/src/MessageBar/MessageBar.scss +3 -2
  376. package/src/MessageBar/MessageBar.test.tsx +4 -4
  377. package/src/MessageBar/MessageBar.tsx +9 -12
  378. package/src/MessageBar/MicrophoneButton.scss +8 -8
  379. package/src/MessageBar/SendButton.tsx +2 -0
  380. package/src/MessageBar/StopButton.scss +17 -3
  381. package/src/MessageBar/StopButton.tsx +2 -0
  382. package/src/MessageBox/JumpButton.scss +6 -6
  383. package/src/MessageBox/MessageBox.test.tsx +26 -0
  384. package/src/PreviewAttachment/PreviewAttachment.test.tsx +51 -0
  385. package/src/ResponseActions/ResponseActionButton.test.tsx +52 -0
  386. package/src/ResponseActions/ResponseActionButton.tsx +59 -28
  387. package/src/ResponseActions/ResponseActions.scss +11 -9
  388. package/src/ResponseActions/ResponseActions.test.tsx +103 -5
  389. package/src/ResponseActions/ResponseActions.tsx +80 -9
  390. package/src/Settings/Settings.scss +34 -0
  391. package/src/Settings/SettingsForm.test.tsx +28 -0
  392. package/src/Settings/SettingsForm.tsx +25 -0
  393. package/src/Settings/index.ts +3 -0
  394. package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss +1 -1
  395. package/src/SourcesCard/SourcesCard.scss +2 -2
  396. package/src/TermsOfUse/TermsOfUse.scss +66 -0
  397. package/src/TermsOfUse/TermsOfUse.test.tsx +138 -0
  398. package/src/TermsOfUse/TermsOfUse.tsx +117 -0
  399. package/src/TermsOfUse/index.ts +3 -0
  400. package/src/index.ts +9 -0
  401. package/src/main.scss +7 -4
@@ -0,0 +1,38 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import React from 'react';
11
+ import { DropdownItem } from '@patternfly/react-core';
12
+ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
13
+ import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
14
+ describe('ChatbotHeaderOptionsDropdown', () => {
15
+ const dropdownItems = (React.createElement(React.Fragment, null,
16
+ React.createElement(DropdownItem, null, "Option 1"),
17
+ React.createElement(DropdownItem, null, "Option 2"),
18
+ React.createElement(DropdownItem, null, "Option 3")));
19
+ it('should render ChatbotHeaderOptionsDropdown', () => {
20
+ render(React.createElement(ChatbotHeaderOptionsDropdown, null, dropdownItems));
21
+ expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
22
+ });
23
+ it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
24
+ const onSelect = jest.fn();
25
+ const { container } = render(React.createElement(ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
26
+ act(() => {
27
+ fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
28
+ });
29
+ yield waitFor(() => {
30
+ expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
31
+ expect(screen.getByText('Option 1'));
32
+ expect(screen.getByText('Option 2'));
33
+ expect(screen.getByText('Option 3'));
34
+ fireEvent.click(screen.getByText('Option 3'));
35
+ expect(onSelect).toHaveBeenCalled();
36
+ });
37
+ }));
38
+ });
@@ -15,7 +15,9 @@ export const ChatbotHeaderSelectorDropdown = (_a) => {
15
15
  var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Chatbot selector', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
16
16
  const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
17
17
  const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
18
- const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom" }, tooltipProps),
18
+ const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom",
19
+ // prevents VO announcements of both aria label and tooltip
20
+ aria: "none" }, tooltipProps),
19
21
  React.createElement(MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
20
22
  return (React.createElement(Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
21
23
  onSelect && onSelect(e, value);
@@ -0,0 +1,36 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import React from 'react';
11
+ import { DropdownItem } from '@patternfly/react-core';
12
+ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
13
+ import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
14
+ describe('ChatbotHeaderSelectorDropdown', () => {
15
+ const dropdownItems = (React.createElement(React.Fragment, null,
16
+ React.createElement(DropdownItem, null, "Option 1"),
17
+ React.createElement(DropdownItem, null, "Option 2"),
18
+ React.createElement(DropdownItem, null, "Option 3")));
19
+ it('should render ChatbotHeaderSelectorDropdown', () => {
20
+ render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
21
+ expect(screen.getByRole('button', { name: 'Chatbot selector' })).toBeTruthy();
22
+ });
23
+ it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
24
+ const onSelect = jest.fn();
25
+ const { container } = render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
26
+ act(() => {
27
+ fireEvent.click(screen.getByRole('button', { name: 'Chatbot selector' }));
28
+ });
29
+ yield waitFor(() => {
30
+ expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
31
+ expect(screen.getByText('Option 3'));
32
+ fireEvent.click(screen.getByText('Option 3'));
33
+ expect(onSelect).toHaveBeenCalled();
34
+ });
35
+ }));
36
+ });
@@ -0,0 +1,42 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+ import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
4
+ import ChatbotHeaderTitle from './ChatbotHeaderTitle';
5
+ describe('ChatbotHeaderTitle', () => {
6
+ it('should render ChatbotHeaderTitle with children', () => {
7
+ render(React.createElement(ChatbotHeaderTitle, null, "Chatbot Header Title"));
8
+ expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
9
+ });
10
+ it('should render ChatbotHeaderTitle with custom classname', () => {
11
+ const { container } = render(React.createElement(ChatbotHeaderTitle, { className: "custom-header-class" }, "Chatbot Header Title"));
12
+ expect(container.querySelector('.custom-header-class')).toBeTruthy();
13
+ });
14
+ it('should render title for default display mode', () => {
15
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
16
+ expect(screen.getByText('Default header title')).toBeTruthy();
17
+ });
18
+ it('should render title for docked display mode', () => {
19
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
20
+ expect(screen.getByText('Docked header title')).toBeTruthy();
21
+ });
22
+ it('should fallback to default title when docked display mode title is not configured', () => {
23
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
24
+ expect(screen.getByText('Default header title')).toBeTruthy();
25
+ });
26
+ it('should render title for embedded display mode', () => {
27
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
28
+ expect(screen.getByText('Embedded header title')).toBeTruthy();
29
+ });
30
+ it('should fallback to default title when embedded display mode title is not configured', () => {
31
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
32
+ expect(screen.getByText('Default header title')).toBeTruthy();
33
+ });
34
+ it('should render title for fullscreen display mode', () => {
35
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
36
+ expect(screen.getByText('Fullscreen header title')).toBeTruthy();
37
+ });
38
+ it('should fallback to default title when fullscreen display mode title is not configured', () => {
39
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
40
+ expect(screen.getByText('Default header title')).toBeTruthy();
41
+ });
42
+ });
@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
6
6
  export * from './ChatbotHeaderTitle';
7
7
  export * from './ChatbotHeaderOptionsDropdown';
8
8
  export * from './ChatbotHeaderSelectorDropdown';
9
+ export * from './ChatbotHeaderCloseButton';
@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
6
6
  export * from './ChatbotHeaderTitle';
7
7
  export * from './ChatbotHeaderOptionsDropdown';
8
8
  export * from './ChatbotHeaderSelectorDropdown';
9
+ export * from './ChatbotHeaderCloseButton';
@@ -23,7 +23,9 @@ const ChatbotToggleBase = (_a) => {
23
23
  // Configure icon
24
24
  const closedIcon = ClosedToggleIcon ? React.createElement(ClosedToggleIcon, null) : React.createElement(ChatIcon, null);
25
25
  const icon = isChatbotVisible ? React.createElement(AngleDownIcon, { "data-testid": openIconTestId }) : closedIcon;
26
- return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
26
+ return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel,
27
+ // prevents VO announcements of both aria label and tooltip
28
+ aria: "none" }, tooltipProps),
27
29
  React.createElement(Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: React.createElement(Icon, { isInline: true }, icon), ref: innerRef }, props))));
28
30
  };
29
31
  const ChatbotToggle = React.forwardRef((props, ref) => (React.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));
@@ -46,24 +46,14 @@ export const CodeModal = (_a) => {
46
46
  setNewCode(value);
47
47
  }
48
48
  };
49
- /* eslint-disable indent */
50
- const getHeight = (displayMode) => {
51
- switch (displayMode) {
52
- case ChatbotDisplayMode.docked:
53
- return '100vh';
54
- default:
55
- return '45vh';
56
- }
57
- };
58
- /* eslint-enable indent */
59
49
  const modal = (React.createElement(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
60
50
  React.createElement(ModalHeader, { title: title, labelId: "code-modal-title" }),
61
51
  React.createElement(ModalBody, { id: "code-modal-body" },
62
52
  React.createElement(Stack, { className: "pf-chatbot__code-modal-body" },
63
53
  React.createElement(StackItem, { className: "pf-chatbot__code-modal-file-details" },
64
54
  React.createElement(FileDetails, { fileName: fileName })),
65
- React.createElement(StackItem, null,
66
- React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, height: getHeight(displayMode), options: {
55
+ React.createElement(StackItem, { className: "pf-chatbot__code-modal-body" },
56
+ React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
67
57
  glyphMargin: false,
68
58
  folding: false
69
59
  } }, props))))),
@@ -0,0 +1,17 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ interface CompareProps {
3
+ /** First of two children to render */
4
+ firstChild: React.ReactNode;
5
+ /** Second of two children to render */
6
+ secondChild: React.ReactNode;
7
+ /** Display name for first child, used in mobile toggle */
8
+ firstChildDisplayName: string;
9
+ /** Display name for second child, used in mobile toggle */
10
+ secondChildDisplayName: string;
11
+ /** Aria label for mobile toggle group */
12
+ toggleGroupAriaLabel?: string;
13
+ /** Callback for when mobile toggle is used */
14
+ onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
15
+ }
16
+ export declare const Compare: ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel }: PropsWithChildren<CompareProps>) => React.JSX.Element;
17
+ export default Compare;
@@ -0,0 +1,43 @@
1
+ import React from 'react';
2
+ import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
3
+ export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
4
+ const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
5
+ const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
6
+ const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
7
+ React.useEffect(() => {
8
+ // we want to show the first if we switch to the mobile toggle view
9
+ // and reset/switch back to normal otherwise
10
+ const updateChatbotVisibility = () => {
11
+ if (window.innerWidth >= 901) {
12
+ setShowFirstChatbot(true);
13
+ setShowSecondChatbot(true);
14
+ }
15
+ else {
16
+ setShowFirstChatbot(true);
17
+ setShowSecondChatbot(false);
18
+ setIsSelected('toggle-group-chatbot-1');
19
+ }
20
+ };
21
+ window.addEventListener('resize', updateChatbotVisibility);
22
+ return () => {
23
+ window.removeEventListener('resize', updateChatbotVisibility);
24
+ };
25
+ }, []);
26
+ // this only happens on mobile
27
+ const handleChildToggleClick = (event) => {
28
+ const id = event.currentTarget.id;
29
+ setIsSelected(id);
30
+ setShowSecondChatbot(!showSecondChatbot);
31
+ setShowFirstChatbot(!showFirstChatbot);
32
+ onToggleClick && onToggleClick(event);
33
+ };
34
+ return (React.createElement(React.Fragment, null,
35
+ React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
36
+ React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
37
+ React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
38
+ React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
39
+ React.createElement("div", { className: "pf-chatbot__compare" },
40
+ React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
41
+ React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
42
+ };
43
+ export default Compare;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { render, screen } from '@testing-library/react';
3
+ import '@testing-library/jest-dom';
4
+ import Compare from './Compare';
5
+ const firstChild = (React.createElement("div", null,
6
+ React.createElement("h1", null, "Child 1")));
7
+ const secondChild = (React.createElement("div", null,
8
+ React.createElement("h1", null, "Child 2")));
9
+ describe('Compare', () => {
10
+ it('should render compare correctly', () => {
11
+ render(React.createElement(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
12
+ expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
13
+ expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
14
+ });
15
+ });
@@ -0,0 +1,2 @@
1
+ export { default } from './Compare';
2
+ export * from './Compare';
@@ -0,0 +1,2 @@
1
+ export { default } from './Compare';
2
+ export * from './Compare';
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { ExtraProps } from 'react-markdown';
3
- declare const OrderedListMessage: ({ children }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
3
+ declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
4
4
  export default OrderedListMessage;
@@ -3,6 +3,6 @@
3
3
  // ============================================================================
4
4
  import React from 'react';
5
5
  import { List, ListComponent, OrderType } from '@patternfly/react-core';
6
- const OrderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
7
- React.createElement(List, { component: ListComponent.ol, type: OrderType.number }, children)));
6
+ const OrderedListMessage = ({ children, start }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
7
+ React.createElement(List, { component: ListComponent.ol, type: OrderType.number, start: start }, children)));
8
8
  export default OrderedListMessage;
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
- import { AvatarProps, LabelGroupProps, LabelProps } from '@patternfly/react-core';
2
+ import { AvatarProps, LabelGroupProps } from '@patternfly/react-core';
3
3
  import { ActionProps } from '../ResponseActions/ResponseActions';
4
4
  import { SourcesCardProps } from '../SourcesCard';
5
- export interface QuickResponse extends Omit<LabelProps, 'children'> {
6
- content: string;
7
- id: string;
8
- onClick: () => void;
9
- }
5
+ import { QuickStart, QuickstartAction } from './QuickStarts/types';
6
+ import QuickResponse from './QuickResponse/QuickResponse';
7
+ import { UserFeedbackProps } from './UserFeedback/UserFeedback';
8
+ import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
9
+ import { TableProps } from '@patternfly/react-table';
10
10
  export interface MessageAttachment {
11
11
  /** Name of file attached to the message */
12
12
  name: string;
@@ -60,10 +60,34 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
60
60
  quickResponses?: QuickResponse[];
61
61
  /** Props for quick responses container */
62
62
  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
63
+ /** Props for user feedback card */
64
+ userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
65
+ /** Props for user feedback response */
66
+ userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
63
67
  /** Whether avatar is round */
64
68
  hasRoundAvatar?: boolean;
65
69
  /** Any additional props applied to the avatar, for additional customization */
66
70
  avatarProps?: Omit<AvatarProps, 'alt'>;
71
+ /** Props for QuickStart card */
72
+ quickStarts?: {
73
+ quickStart: QuickStart;
74
+ onSelectQuickStart: (id?: string) => void;
75
+ minuteWord?: string;
76
+ minuteWordPlural?: string;
77
+ prerequisiteWord?: string;
78
+ prerequisiteWordPlural?: string;
79
+ quickStartButtonAriaLabel?: string;
80
+ className?: string;
81
+ onClick?: () => void;
82
+ action?: QuickstartAction;
83
+ };
84
+ /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
85
+ isLiveRegion?: boolean;
86
+ /** Ref applied to message */
87
+ innerRef?: React.Ref<HTMLDivElement>;
88
+ /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
89
+ tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
67
90
  }
68
- export declare const Message: React.FunctionComponent<MessageProps>;
91
+ export declare const MessageBase: React.FunctionComponent<MessageProps>;
92
+ declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
69
93
  export default Message;
@@ -15,7 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
15
15
  import React from 'react';
16
16
  import Markdown from 'react-markdown';
17
17
  import remarkGfm from 'remark-gfm';
18
- import { Avatar, Label, LabelGroup, Timestamp, Truncate } from '@patternfly/react-core';
18
+ import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
19
19
  import MessageLoading from './MessageLoading';
20
20
  import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
21
21
  import TextMessage from './TextMessage/TextMessage';
@@ -25,8 +25,18 @@ import SourcesCard from '../SourcesCard';
25
25
  import ListItemMessage from './ListMessage/ListItemMessage';
26
26
  import UnorderedListMessage from './ListMessage/UnorderedListMessage';
27
27
  import OrderedListMessage from './ListMessage/OrderedListMessage';
28
- export const Message = (_a) => {
29
- var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps"]);
28
+ import QuickStartTile from './QuickStarts/QuickStartTile';
29
+ import QuickResponse from './QuickResponse/QuickResponse';
30
+ import UserFeedback from './UserFeedback/UserFeedback';
31
+ import UserFeedbackComplete from './UserFeedback/UserFeedbackComplete';
32
+ import TableMessage from './TableMessage/TableMessage';
33
+ import TrMessage from './TableMessage/TrMessage';
34
+ import TdMessage from './TableMessage/TdMessage';
35
+ import TbodyMessage from './TableMessage/TbodyMessage';
36
+ import TheadMessage from './TableMessage/TheadMessage';
37
+ import ThMessage from './TableMessage/ThMessage';
38
+ export const MessageBase = (_a) => {
39
+ var { role, content, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps } = _a, props = __rest(_a, ["role", "content", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
30
40
  let avatarClassName;
31
41
  if (avatarProps && 'className' in avatarProps) {
32
42
  const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -36,7 +46,7 @@ export const Message = (_a) => {
36
46
  // Keep timestamps consistent between Timestamp component and aria-label
37
47
  const date = new Date();
38
48
  const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
39
- return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}` }, props),
49
+ return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
40
50
  React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
41
51
  React.createElement("div", { className: "pf-chatbot__message-contents" },
42
52
  React.createElement("div", { className: "pf-chatbot__message-meta" },
@@ -47,22 +57,44 @@ export const Message = (_a) => {
47
57
  React.createElement("div", { className: "pf-chatbot__message-response" },
48
58
  React.createElement("div", { className: "pf-chatbot__message-and-actions" },
49
59
  isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
50
- p: TextMessage,
51
- code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
52
- ul: UnorderedListMessage,
53
- ol: OrderedListMessage,
54
- li: ListItemMessage
60
+ p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
61
+ code: (_a) => {
62
+ var { children } = _a, props = __rest(_a, ["children"]);
63
+ return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
64
+ },
65
+ h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
66
+ h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
67
+ h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
68
+ h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
69
+ h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
70
+ h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
71
+ blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
72
+ ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
73
+ ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
74
+ li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
75
+ table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
76
+ tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
77
+ thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
78
+ tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
79
+ td: (props) => {
80
+ // Conflicts with Td type
81
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
82
+ const { width } = props, rest = __rest(props, ["width"]);
83
+ return React.createElement(TdMessage, Object.assign({}, rest));
84
+ },
85
+ th: (props) => React.createElement(ThMessage, Object.assign({}, props))
55
86
  }, remarkPlugins: [remarkGfm] }, content)),
56
87
  !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
88
+ quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
57
89
  !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
58
- !isLoading && quickResponses && (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
59
- var { id, onClick, content } = _a, props = __rest(_a, ["id", "onClick", "content"]);
60
- return (React.createElement(Label, Object.assign({ variant: "outline", color: "blue", key: id, onClick: onClick }, props), content));
61
- })))),
90
+ userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
91
+ userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
92
+ !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
62
93
  attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
63
94
  var _a;
64
95
  return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
65
96
  React.createElement(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
66
97
  })))))));
67
98
  };
99
+ const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
68
100
  export default Message;