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

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 (370) 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 +28 -7
  52. package/dist/cjs/Message/Message.js +29 -14
  53. package/dist/cjs/Message/Message.test.js +89 -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/TextMessage/TextMessage.d.ts +2 -1
  73. package/dist/cjs/Message/TextMessage/TextMessage.js +2 -2
  74. package/dist/cjs/Message/UserFeedback/CloseButton.d.ts +10 -0
  75. package/dist/cjs/Message/UserFeedback/CloseButton.js +14 -0
  76. package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts +39 -0
  77. package/dist/cjs/Message/UserFeedback/UserFeedback.js +55 -0
  78. package/dist/cjs/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
  79. package/dist/cjs/Message/UserFeedback/UserFeedback.test.js +146 -0
  80. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
  81. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.js +117 -0
  82. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
  83. package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js +249 -0
  84. package/dist/cjs/MessageBar/AttachButton.js +4 -2
  85. package/dist/cjs/MessageBar/MessageBar.js +9 -12
  86. package/dist/cjs/MessageBar/MessageBar.test.js +4 -4
  87. package/dist/cjs/MessageBar/SendButton.js +3 -1
  88. package/dist/cjs/MessageBar/StopButton.js +3 -1
  89. package/dist/cjs/MessageBox/MessageBox.test.d.ts +1 -0
  90. package/dist/cjs/MessageBox/MessageBox.test.js +22 -0
  91. package/dist/cjs/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
  92. package/dist/cjs/PreviewAttachment/PreviewAttachment.test.js +28 -0
  93. package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +10 -1
  94. package/dist/cjs/ResponseActions/ResponseActionButton.js +28 -5
  95. package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  96. package/dist/cjs/ResponseActions/ResponseActionButton.test.js +54 -0
  97. package/dist/cjs/ResponseActions/ResponseActions.d.ts +12 -2
  98. package/dist/cjs/ResponseActions/ResponseActions.js +26 -9
  99. package/dist/cjs/ResponseActions/ResponseActions.test.js +79 -5
  100. package/dist/cjs/Settings/SettingsForm.d.ts +13 -0
  101. package/dist/cjs/Settings/SettingsForm.js +27 -0
  102. package/dist/cjs/Settings/SettingsForm.test.d.ts +1 -0
  103. package/dist/cjs/Settings/SettingsForm.test.js +26 -0
  104. package/dist/cjs/Settings/index.d.ts +2 -0
  105. package/dist/cjs/Settings/index.js +23 -0
  106. package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +34 -0
  107. package/dist/cjs/TermsOfUse/TermsOfUse.js +49 -0
  108. package/dist/cjs/TermsOfUse/TermsOfUse.test.d.ts +1 -0
  109. package/dist/cjs/TermsOfUse/TermsOfUse.test.js +79 -0
  110. package/dist/cjs/TermsOfUse/index.d.ts +2 -0
  111. package/dist/cjs/TermsOfUse/index.js +23 -0
  112. package/dist/cjs/index.d.ts +6 -0
  113. package/dist/cjs/index.js +10 -1
  114. package/dist/css/main.css +372 -102
  115. package/dist/css/main.css.map +1 -1
  116. package/dist/dynamic/Compare/package.json +1 -0
  117. package/dist/dynamic/Settings/package.json +1 -0
  118. package/dist/dynamic/TermsOfUse/package.json +1 -0
  119. package/dist/esm/AttachmentEdit/AttachmentEdit.test.d.ts +1 -0
  120. package/dist/esm/AttachmentEdit/AttachmentEdit.test.js +47 -0
  121. package/dist/esm/Chatbot/Chatbot.test.d.ts +1 -0
  122. package/dist/esm/Chatbot/Chatbot.test.js +23 -0
  123. package/dist/esm/ChatbotAlert/ChatbotAlert.test.d.ts +1 -0
  124. package/dist/esm/ChatbotAlert/ChatbotAlert.test.js +22 -0
  125. package/dist/esm/ChatbotContent/ChatbotContent.test.d.ts +1 -0
  126. package/dist/esm/ChatbotContent/ChatbotContent.test.js +13 -0
  127. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js +3 -1
  128. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +17 -1
  129. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +9 -9
  130. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js +39 -3
  131. package/dist/esm/ChatbotFooter/ChatbotFooter.test.d.ts +1 -0
  132. package/dist/esm/ChatbotFooter/ChatbotFooter.test.js +13 -0
  133. package/dist/esm/ChatbotFooter/ChatbotFooternote.test.d.ts +1 -0
  134. package/dist/esm/ChatbotFooter/ChatbotFooternote.test.js +82 -0
  135. package/dist/esm/ChatbotHeader/ChatbotHeader.test.d.ts +1 -0
  136. package/dist/esm/ChatbotHeader/ChatbotHeader.test.js +13 -0
  137. package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.d.ts +1 -0
  138. package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.js +13 -0
  139. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
  140. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +10 -0
  141. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts +1 -0
  142. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js +15 -0
  143. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.d.ts +1 -0
  144. package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.js +13 -0
  145. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
  146. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +4 -2
  147. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.d.ts +1 -0
  148. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js +15 -0
  149. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js +3 -1
  150. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.d.ts +1 -0
  151. package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.js +38 -0
  152. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js +3 -1
  153. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts +1 -0
  154. package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.js +36 -0
  155. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.d.ts +1 -0
  156. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +42 -0
  157. package/dist/esm/ChatbotHeader/index.d.ts +1 -0
  158. package/dist/esm/ChatbotHeader/index.js +1 -0
  159. package/dist/esm/ChatbotToggle/ChatbotToggle.js +3 -1
  160. package/dist/esm/CodeModal/CodeModal.js +2 -12
  161. package/dist/esm/Compare/Compare.d.ts +17 -0
  162. package/dist/esm/Compare/Compare.js +43 -0
  163. package/dist/esm/Compare/Compare.test.d.ts +1 -0
  164. package/dist/esm/Compare/Compare.test.js +15 -0
  165. package/dist/esm/Compare/index.d.ts +2 -0
  166. package/dist/esm/Compare/index.js +2 -0
  167. package/dist/esm/Message/ListMessage/OrderedListMessage.d.ts +1 -1
  168. package/dist/esm/Message/ListMessage/OrderedListMessage.js +2 -2
  169. package/dist/esm/Message/Message.d.ts +28 -7
  170. package/dist/esm/Message/Message.js +27 -12
  171. package/dist/esm/Message/Message.test.js +89 -3
  172. package/dist/esm/Message/QuickResponse/QuickResponse.d.ts +17 -0
  173. package/dist/esm/Message/QuickResponse/QuickResponse.js +27 -0
  174. package/dist/esm/Message/QuickStarts/FallbackImg.d.ts +13 -0
  175. package/dist/esm/Message/QuickStarts/FallbackImg.js +9 -0
  176. package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts +27 -0
  177. package/dist/esm/Message/QuickStarts/QuickStartTile.js +52 -0
  178. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.d.ts +23 -0
  179. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.js +35 -0
  180. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.d.ts +1 -0
  181. package/dist/esm/Message/QuickStarts/QuickStartTileDescription.test.js +48 -0
  182. package/dist/esm/Message/QuickStarts/QuickStartTileHeader.d.ts +11 -0
  183. package/dist/esm/Message/QuickStarts/QuickStartTileHeader.js +5 -0
  184. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.d.ts +30 -0
  185. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.js +74 -0
  186. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.d.ts +30 -0
  187. package/dist/esm/Message/QuickStarts/monitor-sampleapp-quickstart.js +74 -0
  188. package/dist/esm/Message/QuickStarts/types.d.ts +132 -0
  189. package/dist/esm/Message/QuickStarts/types.js +14 -0
  190. package/dist/esm/Message/TextMessage/TextMessage.d.ts +2 -1
  191. package/dist/esm/Message/TextMessage/TextMessage.js +3 -3
  192. package/dist/esm/Message/UserFeedback/CloseButton.d.ts +10 -0
  193. package/dist/esm/Message/UserFeedback/CloseButton.js +9 -0
  194. package/dist/esm/Message/UserFeedback/UserFeedback.d.ts +39 -0
  195. package/dist/esm/Message/UserFeedback/UserFeedback.js +50 -0
  196. package/dist/esm/Message/UserFeedback/UserFeedback.test.d.ts +1 -0
  197. package/dist/esm/Message/UserFeedback/UserFeedback.test.js +141 -0
  198. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.d.ts +42 -0
  199. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js +112 -0
  200. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.d.ts +1 -0
  201. package/dist/esm/Message/UserFeedback/UserFeedbackComplete.test.js +244 -0
  202. package/dist/esm/MessageBar/AttachButton.js +4 -2
  203. package/dist/esm/MessageBar/MessageBar.js +9 -12
  204. package/dist/esm/MessageBar/MessageBar.test.js +4 -4
  205. package/dist/esm/MessageBar/SendButton.js +3 -1
  206. package/dist/esm/MessageBar/StopButton.js +3 -1
  207. package/dist/esm/MessageBox/MessageBox.test.d.ts +1 -0
  208. package/dist/esm/MessageBox/MessageBox.test.js +17 -0
  209. package/dist/esm/PreviewAttachment/PreviewAttachment.test.d.ts +1 -0
  210. package/dist/esm/PreviewAttachment/PreviewAttachment.test.js +23 -0
  211. package/dist/esm/ResponseActions/ResponseActionButton.d.ts +10 -1
  212. package/dist/esm/ResponseActions/ResponseActionButton.js +25 -2
  213. package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  214. package/dist/esm/ResponseActions/ResponseActionButton.test.js +49 -0
  215. package/dist/esm/ResponseActions/ResponseActions.d.ts +12 -2
  216. package/dist/esm/ResponseActions/ResponseActions.js +26 -9
  217. package/dist/esm/ResponseActions/ResponseActions.test.js +79 -5
  218. package/dist/esm/Settings/SettingsForm.d.ts +13 -0
  219. package/dist/esm/Settings/SettingsForm.js +20 -0
  220. package/dist/esm/Settings/SettingsForm.test.d.ts +1 -0
  221. package/dist/esm/Settings/SettingsForm.test.js +21 -0
  222. package/dist/esm/Settings/index.d.ts +2 -0
  223. package/dist/esm/Settings/index.js +2 -0
  224. package/dist/esm/TermsOfUse/TermsOfUse.d.ts +34 -0
  225. package/dist/esm/TermsOfUse/TermsOfUse.js +42 -0
  226. package/dist/esm/TermsOfUse/TermsOfUse.test.d.ts +1 -0
  227. package/dist/esm/TermsOfUse/TermsOfUse.test.js +74 -0
  228. package/dist/esm/TermsOfUse/index.d.ts +2 -0
  229. package/dist/esm/TermsOfUse/index.js +2 -0
  230. package/dist/esm/index.d.ts +6 -0
  231. package/dist/esm/index.js +6 -0
  232. package/dist/tsconfig.tsbuildinfo +1 -1
  233. package/package.json +7 -13
  234. package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +5 -2
  235. package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +41 -4
  236. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +142 -13
  237. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +4 -0
  238. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +71 -0
  239. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedbackTimeout.tsx +27 -0
  240. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx +31 -0
  241. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +63 -11
  242. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +182 -12
  243. package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts +65 -0
  244. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx +1 -1
  245. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx +2 -2
  246. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx +2 -2
  247. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx +67 -0
  248. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx +94 -0
  249. package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx +1 -1
  250. package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-TermsAndConditionsHeader.svg +148 -0
  251. package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx +289 -0
  252. package/patternfly-docs/content/extensions/chatbot/examples/UI/SquareChatbotToggle.tsx +1 -1
  253. package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUse.tsx +147 -0
  254. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +49 -6
  255. package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +14 -0
  256. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +26 -3
  257. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +2 -2
  258. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx +20 -19
  259. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +2 -2
  260. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +2 -2
  261. package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +206 -0
  262. package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx +104 -0
  263. package/patternfly-docs/content/extensions/chatbot/img/attached-file.svg +24 -29
  264. package/patternfly-docs/content/extensions/chatbot/img/attachment-menu.svg +4 -4
  265. package/patternfly-docs/content/extensions/chatbot/img/attachment-unsent.svg +30 -57
  266. package/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +5 -5
  267. package/patternfly-docs/content/extensions/chatbot/img/chatbot-quickstarts-tile.svg +58 -0
  268. package/patternfly-docs/content/extensions/chatbot/img/chatbot-settings.svg +83 -0
  269. package/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +6 -29
  270. package/patternfly-docs/content/extensions/chatbot/img/docked.svg +68 -49
  271. package/patternfly-docs/content/extensions/chatbot/img/footnote.svg +1 -1
  272. package/patternfly-docs/content/extensions/chatbot/img/fullscreen.svg +25 -16
  273. package/patternfly-docs/content/extensions/chatbot/img/listening.svg +1 -1
  274. package/patternfly-docs/content/extensions/chatbot/img/message-bar-elements.svg +3 -3
  275. package/patternfly-docs/content/extensions/chatbot/img/message-elements.svg +85 -142
  276. package/patternfly-docs/content/extensions/chatbot/img/overlay.svg +52 -36
  277. package/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg +122 -0
  278. package/patternfly-docs/content/extensions/chatbot/img/source-tile.svg +62 -0
  279. package/patternfly-docs/content/extensions/chatbot/img/toggle-customizations.svg +12 -0
  280. package/src/AttachMenu/AttachMenu.scss +1 -1
  281. package/src/AttachmentEdit/AttachmentEdit.test.tsx +55 -0
  282. package/src/Chatbot/Chatbot.test.tsx +31 -0
  283. package/src/ChatbotAlert/ChatbotAlert.test.tsx +31 -0
  284. package/src/ChatbotContent/ChatbotContent.test.tsx +15 -0
  285. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx +7 -1
  286. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +8 -1
  287. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +112 -3
  288. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +41 -8
  289. package/src/ChatbotFooter/ChatbotFooter.scss +2 -6
  290. package/src/ChatbotFooter/ChatbotFooter.test.tsx +15 -0
  291. package/src/ChatbotFooter/ChatbotFooternote.test.tsx +84 -0
  292. package/src/ChatbotHeader/ChatbotHeader.scss +2 -5
  293. package/src/ChatbotHeader/ChatbotHeader.test.tsx +15 -0
  294. package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx +17 -0
  295. package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx +20 -0
  296. package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +57 -0
  297. package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx +17 -0
  298. package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx +19 -0
  299. package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +11 -2
  300. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx +45 -0
  301. package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx +8 -1
  302. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx +43 -0
  303. package/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx +8 -1
  304. package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +59 -0
  305. package/src/ChatbotHeader/index.ts +1 -0
  306. package/src/ChatbotModal/ChatbotModal.scss +1 -1
  307. package/src/ChatbotToggle/ChatbotToggle.tsx +6 -1
  308. package/src/CodeModal/CodeModal.scss +9 -1
  309. package/src/CodeModal/CodeModal.tsx +2 -13
  310. package/src/Compare/Compare.scss +72 -0
  311. package/src/Compare/Compare.test.tsx +31 -0
  312. package/src/Compare/Compare.tsx +98 -0
  313. package/src/Compare/index.ts +2 -0
  314. package/src/FileDetails/FileDetails.scss +1 -1
  315. package/src/FileDropZone/__snapshots__/FileDropZone.test.tsx.snap +1 -1
  316. package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +4 -4
  317. package/src/Message/ListMessage/ListMessage.scss +5 -5
  318. package/src/Message/ListMessage/OrderedListMessage.tsx +2 -2
  319. package/src/Message/Message.scss +4 -26
  320. package/src/Message/Message.test.tsx +116 -3
  321. package/src/Message/Message.tsx +72 -22
  322. package/src/Message/MessageLoading.scss +2 -2
  323. package/src/Message/QuickResponse/QuickResponse.scss +33 -0
  324. package/src/Message/QuickResponse/QuickResponse.tsx +54 -0
  325. package/src/Message/QuickStarts/FallbackImg.tsx +24 -0
  326. package/src/Message/QuickStarts/QuickStartTile.scss +24 -0
  327. package/src/Message/QuickStarts/QuickStartTile.tsx +147 -0
  328. package/src/Message/QuickStarts/QuickStartTileDescription.test.tsx +57 -0
  329. package/src/Message/QuickStarts/QuickStartTileDescription.tsx +81 -0
  330. package/src/Message/QuickStarts/QuickStartTileHeader.tsx +21 -0
  331. package/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts +75 -0
  332. package/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts +75 -0
  333. package/src/Message/QuickStarts/types.ts +154 -0
  334. package/src/Message/TextMessage/TextMessage.scss +8 -11
  335. package/src/Message/TextMessage/TextMessage.tsx +3 -3
  336. package/src/Message/UserFeedback/CloseButton.tsx +21 -0
  337. package/src/Message/UserFeedback/UserFeedback.scss +53 -0
  338. package/src/Message/UserFeedback/UserFeedback.test.tsx +257 -0
  339. package/src/Message/UserFeedback/UserFeedback.tsx +132 -0
  340. package/src/Message/UserFeedback/UserFeedbackComplete.test.tsx +255 -0
  341. package/src/Message/UserFeedback/UserFeedbackComplete.tsx +211 -0
  342. package/src/MessageBar/AttachButton.scss +19 -3
  343. package/src/MessageBar/AttachButton.tsx +3 -1
  344. package/src/MessageBar/MessageBar.scss +3 -2
  345. package/src/MessageBar/MessageBar.test.tsx +4 -4
  346. package/src/MessageBar/MessageBar.tsx +9 -12
  347. package/src/MessageBar/MicrophoneButton.scss +8 -8
  348. package/src/MessageBar/SendButton.tsx +2 -0
  349. package/src/MessageBar/StopButton.scss +17 -3
  350. package/src/MessageBar/StopButton.tsx +2 -0
  351. package/src/MessageBox/JumpButton.scss +6 -6
  352. package/src/MessageBox/MessageBox.test.tsx +26 -0
  353. package/src/PreviewAttachment/PreviewAttachment.test.tsx +51 -0
  354. package/src/ResponseActions/ResponseActionButton.test.tsx +52 -0
  355. package/src/ResponseActions/ResponseActionButton.tsx +59 -28
  356. package/src/ResponseActions/ResponseActions.scss +11 -9
  357. package/src/ResponseActions/ResponseActions.test.tsx +103 -5
  358. package/src/ResponseActions/ResponseActions.tsx +80 -9
  359. package/src/Settings/Settings.scss +34 -0
  360. package/src/Settings/SettingsForm.test.tsx +28 -0
  361. package/src/Settings/SettingsForm.tsx +25 -0
  362. package/src/Settings/index.ts +3 -0
  363. package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss +1 -1
  364. package/src/SourcesCard/SourcesCard.scss +2 -2
  365. package/src/TermsOfUse/TermsOfUse.scss +66 -0
  366. package/src/TermsOfUse/TermsOfUse.test.tsx +138 -0
  367. package/src/TermsOfUse/TermsOfUse.tsx +117 -0
  368. package/src/TermsOfUse/index.ts +3 -0
  369. package/src/index.ts +9 -0
  370. package/src/main.scss +6 -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,11 @@
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';
10
9
  export interface MessageAttachment {
11
10
  /** Name of file attached to the message */
12
11
  name: string;
@@ -60,10 +59,32 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
60
59
  quickResponses?: QuickResponse[];
61
60
  /** Props for quick responses container */
62
61
  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
62
+ /** Props for user feedback card */
63
+ userFeedbackForm?: Omit<UserFeedbackProps, 'ref'>;
64
+ /** Props for user feedback response */
65
+ userFeedbackComplete?: Omit<UserFeedbackCompleteProps, 'ref'>;
63
66
  /** Whether avatar is round */
64
67
  hasRoundAvatar?: boolean;
65
68
  /** Any additional props applied to the avatar, for additional customization */
66
69
  avatarProps?: Omit<AvatarProps, 'alt'>;
70
+ /** Props for QuickStart card */
71
+ quickStarts?: {
72
+ quickStart: QuickStart;
73
+ onSelectQuickStart: (id?: string) => void;
74
+ minuteWord?: string;
75
+ minuteWordPlural?: string;
76
+ prerequisiteWord?: string;
77
+ prerequisiteWordPlural?: string;
78
+ quickStartButtonAriaLabel?: string;
79
+ className?: string;
80
+ onClick?: () => void;
81
+ action?: QuickstartAction;
82
+ };
83
+ /** 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. */
84
+ isLiveRegion?: boolean;
85
+ /** Ref applied to message */
86
+ innerRef?: React.Ref<HTMLDivElement>;
67
87
  }
68
- export declare const Message: React.FunctionComponent<MessageProps>;
88
+ export declare const MessageBase: React.FunctionComponent<MessageProps>;
89
+ declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
69
90
  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,12 @@ 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
+ export const MessageBase = (_a) => {
33
+ 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 } = _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"]);
30
34
  let avatarClassName;
31
35
  if (avatarProps && 'className' in avatarProps) {
32
36
  const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -36,7 +40,7 @@ export const Message = (_a) => {
36
40
  // Keep timestamps consistent between Timestamp component and aria-label
37
41
  const date = new Date();
38
42
  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),
43
+ 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
44
  React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
41
45
  React.createElement("div", { className: "pf-chatbot__message-contents" },
42
46
  React.createElement("div", { className: "pf-chatbot__message-meta" },
@@ -47,22 +51,33 @@ export const Message = (_a) => {
47
51
  React.createElement("div", { className: "pf-chatbot__message-response" },
48
52
  React.createElement("div", { className: "pf-chatbot__message-and-actions" },
49
53
  isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(Markdown, { components: {
50
- p: TextMessage,
51
- code: ({ children }) => React.createElement(CodeBlockMessage, Object.assign({}, codeBlockProps), children),
54
+ p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
55
+ code: (_a) => {
56
+ var { children } = _a, props = __rest(_a, ["children"]);
57
+ return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
58
+ },
52
59
  ul: UnorderedListMessage,
53
- ol: OrderedListMessage,
54
- li: ListItemMessage
60
+ ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
61
+ li: ListItemMessage,
62
+ h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
63
+ h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
64
+ h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
65
+ h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
66
+ h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
67
+ h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
68
+ blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props))
55
69
  }, remarkPlugins: [remarkGfm] }, content)),
56
70
  !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
71
+ 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
72
  !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
- })))),
73
+ userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
74
+ userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
75
+ !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
62
76
  attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
63
77
  var _a;
64
78
  return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
65
79
  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
80
  })))))));
67
81
  };
82
+ const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
68
83
  export default Message;
@@ -12,6 +12,8 @@ import { render, screen } from '@testing-library/react';
12
12
  import '@testing-library/jest-dom';
13
13
  import Message from './Message';
14
14
  import userEvent from '@testing-library/user-event';
15
+ import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
16
+ import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
15
17
  const ALL_ACTIONS = [
16
18
  { label: /Good response/i },
17
19
  { label: /Bad response/i },
@@ -55,6 +57,37 @@ spec:
55
57
  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
56
58
  `;
57
59
  const INLINE_CODE = `Here is an inline code - \`() => void\``;
60
+ const ORDERED_LIST_WITH_CODE = `
61
+ 1. Item 1
62
+ 2. Item 2
63
+
64
+ \`\`\`yaml
65
+ - name: Hello World Playbook
66
+ hosts: localhost
67
+ tasks:
68
+ - name: Print Hello World
69
+ ansible.builtin.debug:
70
+ msg: "Hello, World!"
71
+ \`\`\`
72
+
73
+ 3. Item 3
74
+ `;
75
+ const HEADING = `
76
+ # h1 Heading
77
+
78
+ ## h2 Heading
79
+
80
+ ### h3 Heading
81
+
82
+ #### h4 Heading
83
+
84
+ ##### h5 Heading
85
+
86
+ ###### h6 Heading
87
+ `;
88
+ const BLOCK_QUOTES = `> Blockquotes can also be nested...
89
+ >> ...by using additional greater-than signs (>) right next to each other...
90
+ > > > ...or with spaces between each sign.`;
58
91
  const checkListItemsRendered = () => {
59
92
  const items = ['Item 1', 'Item 2', 'Item 3'];
60
93
  expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -275,6 +308,12 @@ describe('Message', () => {
275
308
  expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
276
309
  checkListItemsRendered();
277
310
  });
311
+ it('should render ordered lists correctly if there is interstitial content', () => {
312
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: ORDERED_LIST_WITH_CODE }));
313
+ checkListItemsRendered();
314
+ const list = screen.getAllByRole('list')[1];
315
+ expect(list).toHaveAttribute('start', '3');
316
+ });
278
317
  it('should render inline code', () => {
279
318
  render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: INLINE_CODE }));
280
319
  expect(screen.getByText(/() => void/i)).toBeTruthy();
@@ -284,12 +323,16 @@ describe('Message', () => {
284
323
  render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
285
324
  expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
286
325
  expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
287
- expect(screen.getByText(/apiVersion: helm.openshift.io\/v1beta1/i)).toBeTruthy();
326
+ expect(screen.getByText(/yaml/)).toBeTruthy();
327
+ expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
328
+ expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
288
329
  expect(screen.getByText(/metadata:/i)).toBeTruthy();
289
- expect(screen.getByText(/name: azure-sample-repo0oooo00ooo/i)).toBeTruthy();
330
+ expect(screen.getByText(/name:/i)).toBeTruthy();
331
+ expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
290
332
  expect(screen.getByText(/spec/i)).toBeTruthy();
291
333
  expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
292
- expect(screen.getByText(/url: https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
334
+ expect(screen.getByText(/url:/i)).toBeTruthy();
335
+ expect(screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
293
336
  });
294
337
  it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
295
338
  // need explicit setup since RTL stubs clipboard if you do this
@@ -327,4 +370,47 @@ describe('Message', () => {
327
370
  expect(screen.getByRole('img')).toHaveClass('test');
328
371
  expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
329
372
  });
373
+ it('should handle QuickStart tile correctly', () => {
374
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
375
+ quickStart: monitorSampleAppQuickStart,
376
+ onSelectQuickStart: (id) => alert(id)
377
+ } }));
378
+ expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
379
+ expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
380
+ expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
381
+ expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
382
+ });
383
+ it('should handle click on QuickStart tile correctly', () => __awaiter(void 0, void 0, void 0, function* () {
384
+ const spy = jest.fn();
385
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
386
+ quickStart: monitorSampleAppQuickStart,
387
+ onSelectQuickStart: (id) => spy(id)
388
+ } }));
389
+ yield userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
390
+ expect(spy).toHaveBeenCalledTimes(1);
391
+ expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
392
+ }));
393
+ it('should handle QuickStart tile with image correctly', () => __awaiter(void 0, void 0, void 0, function* () {
394
+ const spy = jest.fn();
395
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", quickStarts: {
396
+ quickStart: monitorSampleAppQuickStartWithImage,
397
+ onSelectQuickStart: (id) => spy(id)
398
+ } }));
399
+ expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
400
+ }));
401
+ it('should handle block quote correctly', () => {
402
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
403
+ expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
404
+ expect(screen.getByText('...by using additional greater-than signs (>) right next to each other...')).toBeTruthy();
405
+ expect(screen.getByText(/...or with spaces between each sign./)).toBeTruthy();
406
+ });
407
+ it('should handle heading correctly', () => {
408
+ render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: HEADING }));
409
+ expect(screen.getByRole('heading', { name: /h1 Heading/i })).toBeTruthy();
410
+ expect(screen.getByRole('heading', { name: /h2 Heading/i })).toBeTruthy();
411
+ expect(screen.getByRole('heading', { name: /h3 Heading/i })).toBeTruthy();
412
+ expect(screen.getByRole('heading', { name: /h4 Heading/i })).toBeTruthy();
413
+ expect(screen.getByRole('heading', { name: /h5 Heading/i })).toBeTruthy();
414
+ expect(screen.getByRole('heading', { name: /h6 Heading/i })).toBeTruthy();
415
+ });
330
416
  });
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
3
+ export interface QuickResponse extends Omit<LabelProps, 'children'> {
4
+ content: string;
5
+ id: string;
6
+ onClick?: () => void;
7
+ }
8
+ export interface QuickResponseProps {
9
+ /** Props for quick responses */
10
+ quickResponses: QuickResponse[];
11
+ /** Props for quick responses container */
12
+ quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
13
+ /** Callback when a response is clicked; used in feedback cards */
14
+ onSelect?: (id: string) => void;
15
+ }
16
+ export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
17
+ export default QuickResponse;
@@ -0,0 +1,27 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React from 'react';
13
+ import { Label, LabelGroup } from '@patternfly/react-core';
14
+ import { CheckIcon } from '@patternfly/react-icons';
15
+ export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
16
+ const [selectedQuickResponse, setSelectedQuickResponse] = React.useState();
17
+ const handleQuickResponseClick = (id, onClick) => {
18
+ setSelectedQuickResponse(id);
19
+ onClick && onClick();
20
+ onSelect && onSelect(id);
21
+ };
22
+ return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className}` }, quickResponseContainerProps), quickResponses.map((_a) => {
23
+ var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
24
+ return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
25
+ })));
26
+ };
27
+ export default QuickResponse;