@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.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 (1044) hide show
  1. package/CHANGELOG.md +666 -0
  2. package/dist/components/AgeVerificationModal/AgeVerificationModal.css +9 -4
  3. package/dist/components/AgeVerificationModal/AgeVerificationModal.js +8 -3
  4. package/dist/components/AgeVerificationModal/AgeVerificationModal.js.map +1 -1
  5. package/dist/components/Auth/Auth.js +3 -1
  6. package/dist/components/Auth/Auth.js.map +1 -1
  7. package/dist/components/Avatar/Avatar.js +5 -10
  8. package/dist/components/Avatar/Avatar.js.map +1 -1
  9. package/dist/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.js +8 -1
  10. package/dist/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.js.map +1 -1
  11. package/dist/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.js +1 -1
  12. package/dist/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.js.map +1 -1
  13. package/dist/components/Avatar/AvatarView/AvatarComponent/constants.d.ts +2 -0
  14. package/dist/components/Avatar/AvatarView/AvatarComponent/constants.js +14 -5
  15. package/dist/components/Avatar/AvatarView/AvatarComponent/constants.js.map +1 -1
  16. package/dist/components/Chat/Chat.css +137 -34
  17. package/dist/components/Chat/Chat.d.ts +3 -0
  18. package/dist/components/Chat/Chat.js +68 -58
  19. package/dist/components/Chat/Chat.js.map +1 -1
  20. package/dist/components/ChatBubble/ChatBubble.css +150 -32
  21. package/dist/components/ChatBubble/ChatBubble.d.ts +1 -0
  22. package/dist/components/ChatBubble/ChatBubble.js +122 -95
  23. package/dist/components/ChatBubble/ChatBubble.js.map +1 -1
  24. package/dist/components/ChatHistoryDrawer/ChatHistory.css +5 -0
  25. package/dist/components/ChatHistoryDrawer/ChatHistory.js +27 -10
  26. package/dist/components/ChatHistoryDrawer/ChatHistory.js.map +1 -1
  27. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.css +6 -1
  28. package/dist/components/ChatInputs/ChatInputs.css +332 -149
  29. package/dist/components/ChatInputs/ChatInputs.d.ts +2 -0
  30. package/dist/components/ChatInputs/ChatInputs.js +5 -6
  31. package/dist/components/ChatInputs/ChatInputs.js.map +1 -1
  32. package/dist/components/ChatTextArea/ChatTextArea.css +31 -27
  33. package/dist/components/CompletionProviderStatus/CompletionProviderStatus.js +6 -3
  34. package/dist/components/CompletionProviderStatus/CompletionProviderStatus.js.map +1 -1
  35. package/dist/components/ContentPreviewModal/ContentPreviewModal.js +3 -1
  36. package/dist/components/ContentPreviewModal/ContentPreviewModal.js.map +1 -1
  37. package/dist/components/DateSelector/DateSelector.css +25 -2
  38. package/dist/components/DateSelector/DateSelector.d.ts +2 -1
  39. package/dist/components/DateSelector/DateSelector.js +17 -7
  40. package/dist/components/DateSelector/DateSelector.js.map +1 -1
  41. package/dist/components/ExpertsDrawer/ExpertsDrawer.js +3 -1
  42. package/dist/components/ExpertsDrawer/ExpertsDrawer.js.map +1 -1
  43. package/dist/components/FilePreview/FilePreview.css +1 -1
  44. package/dist/components/FilePreview/FilePreview.js +22 -5
  45. package/dist/components/FilePreview/FilePreview.js.map +1 -1
  46. package/dist/components/Header/ChatConsumptionDropdown.d.ts +3 -1
  47. package/dist/components/Header/ChatConsumptionDropdown.js +5 -3
  48. package/dist/components/Header/ChatConsumptionDropdown.js.map +1 -1
  49. package/dist/components/Header/Header.css +210 -39
  50. package/dist/components/Header/Header.d.ts +1 -0
  51. package/dist/components/Header/Header.js +135 -51
  52. package/dist/components/Header/Header.js.map +1 -1
  53. package/dist/components/IconButton/IconButton.css +144 -0
  54. package/dist/components/IconButton/IconButton.d.ts +9 -0
  55. package/dist/components/IconButton/IconButton.js +36 -0
  56. package/dist/components/IconButton/IconButton.js.map +1 -0
  57. package/dist/components/KnownFacts/KnownFacts.css +22 -9
  58. package/dist/components/KnownFacts/KnownFacts.js +20 -9
  59. package/dist/components/KnownFacts/KnownFacts.js.map +1 -1
  60. package/dist/components/LoginDrawer/LoginDrawer.css +42 -0
  61. package/dist/components/LoginDrawer/LoginDrawer.js +3 -1
  62. package/dist/components/LoginDrawer/LoginDrawer.js.map +1 -1
  63. package/dist/components/MediaWidget/MediaItemWidget.js +14 -12
  64. package/dist/components/MediaWidget/MediaItemWidget.js.map +1 -1
  65. package/dist/components/MediaWidget/MediaItemWidget.utils.d.ts +3 -2
  66. package/dist/components/MediaWidget/MediaItemWidget.utils.js +28 -6
  67. package/dist/components/MediaWidget/MediaItemWidget.utils.js.map +1 -1
  68. package/dist/components/MediaWidget/MediaPreviewModal.js +6 -7
  69. package/dist/components/MediaWidget/MediaPreviewModal.js.map +1 -1
  70. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css +7 -2
  71. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/styles.css +36 -19
  72. package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css +252 -170
  73. package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.d.ts +1 -0
  74. package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.js +24 -15
  75. package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.js.map +1 -1
  76. package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css +11 -2
  77. package/dist/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.js +2 -2
  78. package/dist/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.js.map +1 -1
  79. package/dist/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css +1 -0
  80. package/dist/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.js +1 -1
  81. package/dist/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.js.map +1 -1
  82. package/dist/components/MemoriWidget/MemoriWidget.css +6 -5
  83. package/dist/components/MemoriWidget/MemoriWidget.d.ts +1 -0
  84. package/dist/components/MemoriWidget/MemoriWidget.js +820 -457
  85. package/dist/components/MemoriWidget/MemoriWidget.js.map +1 -1
  86. package/dist/components/MicrophoneButton/MicrophoneButton.css +4 -131
  87. package/dist/components/MicrophoneButton/MicrophoneButton.js +3 -1
  88. package/dist/components/MicrophoneButton/MicrophoneButton.js.map +1 -1
  89. package/dist/components/MobileSessionPanel/MobileSessionPanel.css +29 -7
  90. package/dist/components/MobileSessionPanel/MobileSessionPanel.d.ts +6 -1
  91. package/dist/components/MobileSessionPanel/MobileSessionPanel.js +12 -9
  92. package/dist/components/MobileSessionPanel/MobileSessionPanel.js.map +1 -1
  93. package/dist/components/PositionPopover/PositionPopover.d.ts +2 -0
  94. package/dist/components/PositionPopover/PositionPopover.js +19 -11
  95. package/dist/components/PositionPopover/PositionPopover.js.map +1 -1
  96. package/dist/components/PoweredBy/PoweredBy.css +4 -3
  97. package/dist/components/SettingsDrawer/SettingsDrawer.js +4 -2
  98. package/dist/components/SettingsDrawer/SettingsDrawer.js.map +1 -1
  99. package/dist/components/ShareButton/ShareButton.css +3 -2
  100. package/dist/components/ShareButton/ShareButton.js +3 -4
  101. package/dist/components/ShareButton/ShareButton.js.map +1 -1
  102. package/dist/components/StartPanel/StartPanel.css +8 -10
  103. package/dist/components/StartPanel/StartPanel.js +13 -8
  104. package/dist/components/StartPanel/StartPanel.js.map +1 -1
  105. package/dist/components/UploadButton/UploadButton.css +3 -21
  106. package/dist/components/UploadButton/UploadButton.d.ts +1 -0
  107. package/dist/components/UploadButton/UploadButton.js +34 -23
  108. package/dist/components/UploadButton/UploadButton.js.map +1 -1
  109. package/dist/components/UploadButton/UploadDocuments/UploadDocuments.d.ts +1 -6
  110. package/dist/components/UploadButton/UploadDocuments/UploadDocuments.js +47 -113
  111. package/dist/components/UploadButton/UploadDocuments/UploadDocuments.js.map +1 -1
  112. package/dist/components/UploadButton/UploadImages/UploadImages.js +4 -2
  113. package/dist/components/UploadButton/UploadImages/UploadImages.js.map +1 -1
  114. package/dist/components/WhyThisAnswer/WhyThisAnswer.js +3 -1
  115. package/dist/components/WhyThisAnswer/WhyThisAnswer.js.map +1 -1
  116. package/dist/components/layouts/Chat.js +67 -79
  117. package/dist/components/layouts/Chat.js.map +1 -1
  118. package/dist/components/layouts/FullPage.js +90 -42
  119. package/dist/components/layouts/FullPage.js.map +1 -1
  120. package/dist/components/layouts/HiddenChat.js +11 -236
  121. package/dist/components/layouts/HiddenChat.js.map +1 -1
  122. package/dist/components/layouts/Totem.js +10 -1
  123. package/dist/components/layouts/Totem.js.map +1 -1
  124. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.js +30 -3
  125. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.js.map +1 -1
  126. package/dist/components/layouts/WebsiteAssistant/website-assistant.css +175 -61
  127. package/dist/components/layouts/ZoomedFullBody.js +90 -42
  128. package/dist/components/layouts/ZoomedFullBody.js.map +1 -1
  129. package/dist/components/layouts/chat.css +230 -85
  130. package/dist/components/layouts/fullpage.css +253 -93
  131. package/dist/components/layouts/hidden-chat.css +172 -62
  132. package/dist/components/layouts/totem.css +151 -50
  133. package/dist/components/layouts/zoomed-full-body.css +338 -34
  134. package/dist/context/widgetSurfaceContext.d.ts +3 -0
  135. package/dist/context/widgetSurfaceContext.js +11 -0
  136. package/dist/context/widgetSurfaceContext.js.map +1 -0
  137. package/dist/helpers/constants.d.ts +4 -0
  138. package/dist/helpers/constants.js +50 -1
  139. package/dist/helpers/constants.js.map +1 -1
  140. package/dist/helpers/convertDocument.d.ts +1 -0
  141. package/dist/helpers/convertDocument.js +24 -0
  142. package/dist/helpers/convertDocument.js.map +1 -0
  143. package/dist/helpers/credits.d.ts +5 -2
  144. package/dist/helpers/credits.js +5 -1
  145. package/dist/helpers/credits.js.map +1 -1
  146. package/dist/helpers/media.js +18 -3
  147. package/dist/helpers/media.js.map +1 -1
  148. package/dist/helpers/message.d.ts +1 -1
  149. package/dist/helpers/message.js +4 -4
  150. package/dist/helpers/message.js.map +1 -1
  151. package/dist/helpers/nats/getNatsConfig.d.ts +9 -0
  152. package/dist/helpers/nats/getNatsConfig.js +65 -0
  153. package/dist/helpers/nats/getNatsConfig.js.map +1 -0
  154. package/dist/helpers/nats/isSessionExpiredError.d.ts +3 -0
  155. package/dist/helpers/nats/isSessionExpiredError.js +36 -0
  156. package/dist/helpers/nats/isSessionExpiredError.js.map +1 -0
  157. package/dist/helpers/nats/useNats.d.ts +12 -0
  158. package/dist/helpers/nats/useNats.js +75 -0
  159. package/dist/helpers/nats/useNats.js.map +1 -0
  160. package/dist/helpers/nats/useNatsSession.d.ts +28 -0
  161. package/dist/helpers/nats/useNatsSession.js +212 -0
  162. package/dist/helpers/nats/useNatsSession.js.map +1 -0
  163. package/dist/helpers/positionPopover.d.ts +1 -0
  164. package/dist/helpers/positionPopover.js +7 -0
  165. package/dist/helpers/positionPopover.js.map +1 -0
  166. package/dist/helpers/tts/muteSpeaker.d.ts +13 -0
  167. package/dist/helpers/tts/muteSpeaker.js +26 -0
  168. package/dist/helpers/tts/muteSpeaker.js.map +1 -0
  169. package/dist/helpers/tts/useTTS.js +18 -9
  170. package/dist/helpers/tts/useTTS.js.map +1 -1
  171. package/dist/helpers/usePressTooltip.d.ts +13 -0
  172. package/dist/helpers/usePressTooltip.js +23 -0
  173. package/dist/helpers/usePressTooltip.js.map +1 -0
  174. package/dist/helpers/utils.d.ts +21 -0
  175. package/dist/helpers/utils.js +75 -4
  176. package/dist/helpers/utils.js.map +1 -1
  177. package/dist/index.js +16 -16
  178. package/dist/index.js.map +1 -1
  179. package/dist/locales/de.json +12 -1
  180. package/dist/locales/en.json +13 -2
  181. package/dist/locales/es.json +12 -1
  182. package/dist/locales/fr.json +12 -1
  183. package/dist/locales/it.json +13 -2
  184. package/dist/styles.css +1 -163
  185. package/dist/types/integration.d.ts +3 -0
  186. package/dist/types/integration.js +16 -0
  187. package/dist/types/integration.js.map +1 -0
  188. package/dist/version.d.ts +1 -1
  189. package/dist/version.js +1 -1
  190. package/dist/version.js.map +1 -1
  191. package/esm/components/AgeVerificationModal/AgeVerificationModal.css +9 -4
  192. package/esm/components/AgeVerificationModal/AgeVerificationModal.js +8 -3
  193. package/esm/components/AgeVerificationModal/AgeVerificationModal.js.map +1 -1
  194. package/esm/components/Auth/Auth.js +3 -1
  195. package/esm/components/Auth/Auth.js.map +1 -1
  196. package/esm/components/Avatar/Avatar.js +5 -10
  197. package/esm/components/Avatar/Avatar.js.map +1 -1
  198. package/esm/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.js +9 -2
  199. package/esm/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.js.map +1 -1
  200. package/esm/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.js +2 -2
  201. package/esm/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.js.map +1 -1
  202. package/esm/components/Avatar/AvatarView/AvatarComponent/constants.d.ts +2 -0
  203. package/esm/components/Avatar/AvatarView/AvatarComponent/constants.js +13 -4
  204. package/esm/components/Avatar/AvatarView/AvatarComponent/constants.js.map +1 -1
  205. package/esm/components/Chat/Chat.css +137 -34
  206. package/esm/components/Chat/Chat.d.ts +3 -0
  207. package/esm/components/Chat/Chat.js +68 -58
  208. package/esm/components/Chat/Chat.js.map +1 -1
  209. package/esm/components/ChatBubble/ChatBubble.css +150 -32
  210. package/esm/components/ChatBubble/ChatBubble.d.ts +1 -0
  211. package/esm/components/ChatBubble/ChatBubble.js +123 -96
  212. package/esm/components/ChatBubble/ChatBubble.js.map +1 -1
  213. package/esm/components/ChatHistoryDrawer/ChatHistory.css +5 -0
  214. package/esm/components/ChatHistoryDrawer/ChatHistory.js +27 -10
  215. package/esm/components/ChatHistoryDrawer/ChatHistory.js.map +1 -1
  216. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.css +6 -1
  217. package/esm/components/ChatInputs/ChatInputs.css +332 -149
  218. package/esm/components/ChatInputs/ChatInputs.d.ts +2 -0
  219. package/esm/components/ChatInputs/ChatInputs.js +5 -6
  220. package/esm/components/ChatInputs/ChatInputs.js.map +1 -1
  221. package/esm/components/ChatTextArea/ChatTextArea.css +31 -27
  222. package/esm/components/CompletionProviderStatus/CompletionProviderStatus.js +6 -3
  223. package/esm/components/CompletionProviderStatus/CompletionProviderStatus.js.map +1 -1
  224. package/esm/components/ContentPreviewModal/ContentPreviewModal.js +3 -1
  225. package/esm/components/ContentPreviewModal/ContentPreviewModal.js.map +1 -1
  226. package/esm/components/DateSelector/DateSelector.css +25 -2
  227. package/esm/components/DateSelector/DateSelector.d.ts +2 -1
  228. package/esm/components/DateSelector/DateSelector.js +17 -7
  229. package/esm/components/DateSelector/DateSelector.js.map +1 -1
  230. package/esm/components/ExpertsDrawer/ExpertsDrawer.js +3 -1
  231. package/esm/components/ExpertsDrawer/ExpertsDrawer.js.map +1 -1
  232. package/esm/components/FilePreview/FilePreview.css +1 -1
  233. package/esm/components/FilePreview/FilePreview.js +24 -7
  234. package/esm/components/FilePreview/FilePreview.js.map +1 -1
  235. package/esm/components/Header/ChatConsumptionDropdown.d.ts +3 -1
  236. package/esm/components/Header/ChatConsumptionDropdown.js +7 -5
  237. package/esm/components/Header/ChatConsumptionDropdown.js.map +1 -1
  238. package/esm/components/Header/Header.css +210 -39
  239. package/esm/components/Header/Header.d.ts +1 -0
  240. package/esm/components/Header/Header.js +136 -52
  241. package/esm/components/Header/Header.js.map +1 -1
  242. package/esm/components/IconButton/IconButton.css +144 -0
  243. package/esm/components/IconButton/IconButton.d.ts +9 -0
  244. package/esm/components/IconButton/IconButton.js +33 -0
  245. package/esm/components/IconButton/IconButton.js.map +1 -0
  246. package/esm/components/KnownFacts/KnownFacts.css +22 -9
  247. package/esm/components/KnownFacts/KnownFacts.js +20 -9
  248. package/esm/components/KnownFacts/KnownFacts.js.map +1 -1
  249. package/esm/components/LoginDrawer/LoginDrawer.css +42 -0
  250. package/esm/components/LoginDrawer/LoginDrawer.js +3 -1
  251. package/esm/components/LoginDrawer/LoginDrawer.js.map +1 -1
  252. package/esm/components/MediaWidget/MediaItemWidget.js +16 -14
  253. package/esm/components/MediaWidget/MediaItemWidget.js.map +1 -1
  254. package/esm/components/MediaWidget/MediaItemWidget.utils.d.ts +3 -2
  255. package/esm/components/MediaWidget/MediaItemWidget.utils.js +27 -6
  256. package/esm/components/MediaWidget/MediaItemWidget.utils.js.map +1 -1
  257. package/esm/components/MediaWidget/MediaPreviewModal.js +6 -7
  258. package/esm/components/MediaWidget/MediaPreviewModal.js.map +1 -1
  259. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css +7 -2
  260. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/styles.css +36 -19
  261. package/esm/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css +252 -170
  262. package/esm/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.d.ts +1 -0
  263. package/esm/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.js +25 -16
  264. package/esm/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.js.map +1 -1
  265. package/esm/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css +11 -2
  266. package/esm/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.js +2 -2
  267. package/esm/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.js.map +1 -1
  268. package/esm/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css +1 -0
  269. package/esm/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.js +2 -2
  270. package/esm/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.js.map +1 -1
  271. package/esm/components/MemoriWidget/MemoriWidget.css +6 -5
  272. package/esm/components/MemoriWidget/MemoriWidget.d.ts +1 -0
  273. package/esm/components/MemoriWidget/MemoriWidget.js +821 -458
  274. package/esm/components/MemoriWidget/MemoriWidget.js.map +1 -1
  275. package/esm/components/MicrophoneButton/MicrophoneButton.css +4 -131
  276. package/esm/components/MicrophoneButton/MicrophoneButton.js +3 -2
  277. package/esm/components/MicrophoneButton/MicrophoneButton.js.map +1 -1
  278. package/esm/components/MobileSessionPanel/MobileSessionPanel.css +29 -7
  279. package/esm/components/MobileSessionPanel/MobileSessionPanel.d.ts +6 -1
  280. package/esm/components/MobileSessionPanel/MobileSessionPanel.js +12 -9
  281. package/esm/components/MobileSessionPanel/MobileSessionPanel.js.map +1 -1
  282. package/esm/components/PositionPopover/PositionPopover.d.ts +2 -0
  283. package/esm/components/PositionPopover/PositionPopover.js +20 -12
  284. package/esm/components/PositionPopover/PositionPopover.js.map +1 -1
  285. package/esm/components/PoweredBy/PoweredBy.css +4 -3
  286. package/esm/components/SettingsDrawer/SettingsDrawer.js +4 -2
  287. package/esm/components/SettingsDrawer/SettingsDrawer.js.map +1 -1
  288. package/esm/components/ShareButton/ShareButton.css +3 -2
  289. package/esm/components/ShareButton/ShareButton.js +4 -5
  290. package/esm/components/ShareButton/ShareButton.js.map +1 -1
  291. package/esm/components/StartPanel/StartPanel.css +8 -10
  292. package/esm/components/StartPanel/StartPanel.js +13 -8
  293. package/esm/components/StartPanel/StartPanel.js.map +1 -1
  294. package/esm/components/UploadButton/UploadButton.css +3 -21
  295. package/esm/components/UploadButton/UploadButton.d.ts +1 -0
  296. package/esm/components/UploadButton/UploadButton.js +34 -23
  297. package/esm/components/UploadButton/UploadButton.js.map +1 -1
  298. package/esm/components/UploadButton/UploadDocuments/UploadDocuments.d.ts +1 -6
  299. package/esm/components/UploadButton/UploadDocuments/UploadDocuments.js +47 -113
  300. package/esm/components/UploadButton/UploadDocuments/UploadDocuments.js.map +1 -1
  301. package/esm/components/UploadButton/UploadImages/UploadImages.js +4 -2
  302. package/esm/components/UploadButton/UploadImages/UploadImages.js.map +1 -1
  303. package/esm/components/WhyThisAnswer/WhyThisAnswer.js +3 -1
  304. package/esm/components/WhyThisAnswer/WhyThisAnswer.js.map +1 -1
  305. package/esm/components/layouts/Chat.js +70 -82
  306. package/esm/components/layouts/Chat.js.map +1 -1
  307. package/esm/components/layouts/FullPage.js +91 -43
  308. package/esm/components/layouts/FullPage.js.map +1 -1
  309. package/esm/components/layouts/HiddenChat.js +13 -238
  310. package/esm/components/layouts/HiddenChat.js.map +1 -1
  311. package/esm/components/layouts/Totem.js +10 -1
  312. package/esm/components/layouts/Totem.js.map +1 -1
  313. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.js +30 -3
  314. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.js.map +1 -1
  315. package/esm/components/layouts/WebsiteAssistant/website-assistant.css +175 -61
  316. package/esm/components/layouts/ZoomedFullBody.js +91 -43
  317. package/esm/components/layouts/ZoomedFullBody.js.map +1 -1
  318. package/esm/components/layouts/chat.css +230 -85
  319. package/esm/components/layouts/fullpage.css +253 -93
  320. package/esm/components/layouts/hidden-chat.css +172 -62
  321. package/esm/components/layouts/totem.css +151 -50
  322. package/esm/components/layouts/zoomed-full-body.css +338 -34
  323. package/esm/context/widgetSurfaceContext.d.ts +3 -0
  324. package/esm/context/widgetSurfaceContext.js +7 -0
  325. package/esm/context/widgetSurfaceContext.js.map +1 -0
  326. package/esm/helpers/constants.d.ts +4 -0
  327. package/esm/helpers/constants.js +49 -0
  328. package/esm/helpers/constants.js.map +1 -1
  329. package/esm/helpers/convertDocument.d.ts +1 -0
  330. package/esm/helpers/convertDocument.js +20 -0
  331. package/esm/helpers/convertDocument.js.map +1 -0
  332. package/esm/helpers/credits.d.ts +5 -2
  333. package/esm/helpers/credits.js +5 -1
  334. package/esm/helpers/credits.js.map +1 -1
  335. package/esm/helpers/media.js +18 -3
  336. package/esm/helpers/media.js.map +1 -1
  337. package/esm/helpers/message.d.ts +1 -1
  338. package/esm/helpers/message.js +2 -2
  339. package/esm/helpers/message.js.map +1 -1
  340. package/esm/helpers/nats/getNatsConfig.d.ts +9 -0
  341. package/esm/helpers/nats/getNatsConfig.js +61 -0
  342. package/esm/helpers/nats/getNatsConfig.js.map +1 -0
  343. package/esm/helpers/nats/isSessionExpiredError.d.ts +3 -0
  344. package/esm/helpers/nats/isSessionExpiredError.js +32 -0
  345. package/esm/helpers/nats/isSessionExpiredError.js.map +1 -0
  346. package/esm/helpers/nats/useNats.d.ts +12 -0
  347. package/esm/helpers/nats/useNats.js +72 -0
  348. package/esm/helpers/nats/useNats.js.map +1 -0
  349. package/esm/helpers/nats/useNatsSession.d.ts +28 -0
  350. package/esm/helpers/nats/useNatsSession.js +208 -0
  351. package/esm/helpers/nats/useNatsSession.js.map +1 -0
  352. package/esm/helpers/positionPopover.d.ts +1 -0
  353. package/esm/helpers/positionPopover.js +4 -0
  354. package/esm/helpers/positionPopover.js.map +1 -0
  355. package/esm/helpers/tts/muteSpeaker.d.ts +13 -0
  356. package/esm/helpers/tts/muteSpeaker.js +21 -0
  357. package/esm/helpers/tts/muteSpeaker.js.map +1 -0
  358. package/esm/helpers/tts/useTTS.js +18 -9
  359. package/esm/helpers/tts/useTTS.js.map +1 -1
  360. package/esm/helpers/usePressTooltip.d.ts +13 -0
  361. package/esm/helpers/usePressTooltip.js +20 -0
  362. package/esm/helpers/usePressTooltip.js.map +1 -0
  363. package/esm/helpers/utils.d.ts +21 -0
  364. package/esm/helpers/utils.js +68 -3
  365. package/esm/helpers/utils.js.map +1 -1
  366. package/esm/index.js +17 -17
  367. package/esm/index.js.map +1 -1
  368. package/esm/locales/de.json +12 -1
  369. package/esm/locales/en.json +13 -2
  370. package/esm/locales/es.json +12 -1
  371. package/esm/locales/fr.json +12 -1
  372. package/esm/locales/it.json +13 -2
  373. package/esm/styles.css +1 -163
  374. package/esm/types/integration.d.ts +3 -0
  375. package/esm/types/integration.js +11 -0
  376. package/esm/types/integration.js.map +1 -0
  377. package/esm/version.d.ts +1 -1
  378. package/esm/version.js +1 -1
  379. package/esm/version.js.map +1 -1
  380. package/package.json +13 -6
  381. package/src/__snapshots__/index.test.tsx.snap +0 -50
  382. package/src/components/AgeVerificationModal/AgeVerificationModal.css +9 -4
  383. package/src/components/AgeVerificationModal/AgeVerificationModal.tsx +13 -2
  384. package/src/components/Auth/Auth.tsx +3 -0
  385. package/src/components/Avatar/Avatar.stories.tsx +45 -28
  386. package/src/components/Avatar/Avatar.test.tsx +54 -0
  387. package/src/components/Avatar/Avatar.tsx +8 -12
  388. package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.tsx +12 -5
  389. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.ts +2 -1
  390. package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts +16 -4
  391. package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +164 -0
  392. package/src/components/BlockedMemoriBadge/__snapshots__/BlockedMemoriBadge.test.tsx.snap +10 -10
  393. package/src/components/Chat/Chat.css +137 -34
  394. package/src/components/Chat/Chat.tsx +43 -22
  395. package/src/components/Chat/__snapshots__/Chat.test.tsx.snap +7429 -7603
  396. package/src/components/ChatBubble/ChatBubble.css +150 -32
  397. package/src/components/ChatBubble/ChatBubble.test.tsx +65 -1
  398. package/src/components/ChatBubble/ChatBubble.tsx +168 -90
  399. package/src/components/ChatBubble/__snapshots__/ChatBubble.test.tsx.snap +6491 -6387
  400. package/src/components/ChatHistoryDrawer/ChatHistory.css +5 -0
  401. package/src/components/ChatHistoryDrawer/ChatHistory.test.tsx +77 -1
  402. package/src/components/ChatHistoryDrawer/ChatHistory.tsx +59 -27
  403. package/src/components/ChatHistoryDrawer/ChatResumeDrawer.css +6 -1
  404. package/src/components/ChatInputs/ChatInputs.css +332 -149
  405. package/src/components/ChatInputs/ChatInputs.tsx +24 -11
  406. package/src/components/ChatTextArea/ChatTextArea.css +31 -27
  407. package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx +8 -4
  408. package/src/components/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap +6 -6
  409. package/src/components/ContentPreviewModal/ContentPreviewModal.tsx +3 -0
  410. package/src/components/DateSelector/DateSelector.css +25 -2
  411. package/src/components/DateSelector/DateSelector.stories.tsx +11 -2
  412. package/src/components/DateSelector/DateSelector.tsx +28 -9
  413. package/src/components/ExpertsDrawer/ExpertsDrawer.tsx +3 -0
  414. package/src/components/FeedbackButtons/__snapshots__/FeedbackButtons.test.tsx.snap +2 -2
  415. package/src/components/FilePreview/FilePreview.css +1 -1
  416. package/src/components/FilePreview/FilePreview.stories.tsx +0 -3
  417. package/src/components/FilePreview/FilePreview.tsx +28 -7
  418. package/src/components/Header/ChatConsumptionDropdown.tsx +18 -6
  419. package/src/components/Header/Header.css +210 -39
  420. package/src/components/Header/Header.test.tsx +55 -1
  421. package/src/components/Header/Header.tsx +456 -160
  422. package/src/components/Header/__snapshots__/Header.test.tsx.snap +194 -135
  423. package/src/components/IconButton/IconButton.css +144 -0
  424. package/src/components/IconButton/IconButton.tsx +89 -0
  425. package/src/components/KnownFacts/KnownFacts.css +22 -9
  426. package/src/components/KnownFacts/KnownFacts.tsx +20 -3
  427. package/src/components/LoginDrawer/LoginDrawer.css +42 -0
  428. package/src/components/LoginDrawer/LoginDrawer.tsx +3 -0
  429. package/src/components/MediaWidget/MediaItemWidget.tsx +26 -13
  430. package/src/components/MediaWidget/MediaItemWidget.utils.test.ts +45 -2
  431. package/src/components/MediaWidget/MediaItemWidget.utils.ts +39 -6
  432. package/src/components/MediaWidget/MediaPreviewModal.tsx +9 -7
  433. package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx +218 -2252
  434. package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css +7 -2
  435. package/src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css +36 -19
  436. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css +252 -170
  437. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx +88 -87
  438. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css +11 -2
  439. package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx +4 -3
  440. package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css +1 -0
  441. package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx +2 -2
  442. package/src/components/MemoriWidget/MemoriWidget.css +6 -5
  443. package/src/components/MemoriWidget/MemoriWidget.tsx +1294 -764
  444. package/src/components/MicrophoneButton/MicrophoneButton.css +4 -131
  445. package/src/components/MicrophoneButton/MicrophoneButton.tsx +5 -5
  446. package/src/components/MobileSessionPanel/MobileSessionPanel.css +29 -7
  447. package/src/components/MobileSessionPanel/MobileSessionPanel.test.tsx +44 -0
  448. package/src/components/MobileSessionPanel/MobileSessionPanel.tsx +60 -38
  449. package/src/components/PositionPopover/PositionPopover.tsx +32 -20
  450. package/src/components/PoweredBy/PoweredBy.css +4 -3
  451. package/src/components/SettingsDrawer/SettingsDrawer.tsx +4 -1
  452. package/src/components/ShareButton/ShareButton.css +3 -2
  453. package/src/components/ShareButton/ShareButton.tsx +14 -12
  454. package/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap +36 -27
  455. package/src/components/StartPanel/StartPanel.css +8 -10
  456. package/src/components/StartPanel/StartPanel.stories.tsx +23 -1
  457. package/src/components/StartPanel/StartPanel.test.tsx +64 -1
  458. package/src/components/StartPanel/StartPanel.tsx +30 -10
  459. package/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap +287 -86
  460. package/src/components/UploadButton/UploadButton.css +3 -21
  461. package/src/components/UploadButton/UploadButton.stories.tsx +3 -3
  462. package/src/components/UploadButton/UploadButton.tsx +50 -33
  463. package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx +59 -143
  464. package/src/components/UploadButton/UploadImages/UploadImages.tsx +4 -1
  465. package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap +33 -29
  466. package/src/components/WhyThisAnswer/WhyThisAnswer.tsx +3 -0
  467. package/src/components/layouts/Chat.tsx +235 -239
  468. package/src/components/layouts/FullPage.tsx +160 -65
  469. package/src/components/layouts/HiddenChat.tsx +20 -413
  470. package/src/components/layouts/Totem.tsx +20 -3
  471. package/src/components/layouts/WebsiteAssistant/WebsiteAssistant.tsx +72 -16
  472. package/src/components/layouts/WebsiteAssistant/__snapshots__/WebsiteAssistant.test.tsx.snap +60 -44
  473. package/src/components/layouts/WebsiteAssistant/website-assistant.css +175 -61
  474. package/src/components/layouts/ZoomedFullBody.tsx +163 -67
  475. package/src/components/layouts/__snapshots__/Chat.test.tsx.snap +597 -583
  476. package/src/components/layouts/__snapshots__/FullPage.test.tsx.snap +1186 -1146
  477. package/src/components/layouts/__snapshots__/HiddenChat.test.tsx.snap +409 -435
  478. package/src/components/layouts/__snapshots__/Totem.test.tsx.snap +590 -602
  479. package/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap +585 -565
  480. package/src/components/layouts/chat.css +230 -85
  481. package/src/components/layouts/fullpage.css +253 -93
  482. package/src/components/layouts/hidden-chat.css +172 -62
  483. package/src/components/layouts/layouts.stories.tsx +135 -15
  484. package/src/components/layouts/totem.css +151 -50
  485. package/src/components/layouts/zoomed-full-body.css +338 -34
  486. package/src/context/widgetSurfaceContext.tsx +14 -0
  487. package/src/helpers/constants.ts +56 -1
  488. package/src/helpers/convertDocument.test.ts +67 -0
  489. package/src/helpers/convertDocument.ts +35 -0
  490. package/src/helpers/credits.ts +16 -1
  491. package/src/helpers/media.test.ts +36 -0
  492. package/src/helpers/media.ts +39 -12
  493. package/src/helpers/message.test.ts +28 -1
  494. package/src/helpers/message.ts +4 -4
  495. package/src/helpers/nats/getNatsConfig.ts +145 -0
  496. package/src/helpers/nats/isSessionExpiredError.test.ts +38 -0
  497. package/src/helpers/nats/isSessionExpiredError.ts +51 -0
  498. package/src/helpers/nats/useNats.ts +124 -0
  499. package/src/helpers/nats/useNatsSession.ts +394 -0
  500. package/src/helpers/positionPopover.test.ts +39 -0
  501. package/src/helpers/positionPopover.ts +16 -0
  502. package/src/helpers/tts/muteSpeaker.test.ts +81 -0
  503. package/src/helpers/tts/muteSpeaker.ts +46 -0
  504. package/src/helpers/tts/useTTS.ts +32 -22
  505. package/src/helpers/usePressTooltip.ts +29 -0
  506. package/src/helpers/utils.test.ts +162 -0
  507. package/src/helpers/utils.ts +108 -3
  508. package/src/index.stories.tsx +32 -0
  509. package/src/index.tsx +1 -5
  510. package/src/locales/de.json +12 -1
  511. package/src/locales/en.json +13 -2
  512. package/src/locales/es.json +12 -1
  513. package/src/locales/fr.json +12 -1
  514. package/src/locales/it.json +13 -2
  515. package/src/styles.css +113 -15
  516. package/src/types/integration.test.ts +32 -0
  517. package/src/types/integration.ts +31 -0
  518. package/src/version.ts +1 -1
  519. package/dist/components/PositionDrawer/PositionDrawer.d.ts +0 -12
  520. package/dist/components/PositionDrawer/PositionDrawer.js +0 -17
  521. package/dist/components/PositionDrawer/PositionDrawer.js.map +0 -1
  522. package/dist/components/icons/AI.d.ts +0 -6
  523. package/dist/components/icons/AI.js +0 -6
  524. package/dist/components/icons/AI.js.map +0 -1
  525. package/dist/components/icons/Alert.d.ts +0 -6
  526. package/dist/components/icons/Alert.js +0 -6
  527. package/dist/components/icons/Alert.js.map +0 -1
  528. package/dist/components/icons/ArrowUp.d.ts +0 -6
  529. package/dist/components/icons/ArrowUp.js +0 -6
  530. package/dist/components/icons/ArrowUp.js.map +0 -1
  531. package/dist/components/icons/Bug.d.ts +0 -6
  532. package/dist/components/icons/Bug.js +0 -6
  533. package/dist/components/icons/Bug.js.map +0 -1
  534. package/dist/components/icons/Chat.d.ts +0 -6
  535. package/dist/components/icons/Chat.js +0 -6
  536. package/dist/components/icons/Chat.js.map +0 -1
  537. package/dist/components/icons/ChevronDown.d.ts +0 -6
  538. package/dist/components/icons/ChevronDown.js +0 -6
  539. package/dist/components/icons/ChevronDown.js.map +0 -1
  540. package/dist/components/icons/ChevronLeft.d.ts +0 -6
  541. package/dist/components/icons/ChevronLeft.js +0 -6
  542. package/dist/components/icons/ChevronLeft.js.map +0 -1
  543. package/dist/components/icons/ChevronRight.d.ts +0 -6
  544. package/dist/components/icons/ChevronRight.js +0 -6
  545. package/dist/components/icons/ChevronRight.js.map +0 -1
  546. package/dist/components/icons/ChevronUp.d.ts +0 -6
  547. package/dist/components/icons/ChevronUp.js +0 -6
  548. package/dist/components/icons/ChevronUp.js.map +0 -1
  549. package/dist/components/icons/Clear.d.ts +0 -6
  550. package/dist/components/icons/Clear.js +0 -6
  551. package/dist/components/icons/Clear.js.map +0 -1
  552. package/dist/components/icons/Close.d.ts +0 -7
  553. package/dist/components/icons/Close.js +0 -6
  554. package/dist/components/icons/Close.js.map +0 -1
  555. package/dist/components/icons/Code.d.ts +0 -6
  556. package/dist/components/icons/Code.js +0 -6
  557. package/dist/components/icons/Code.js.map +0 -1
  558. package/dist/components/icons/Copy.d.ts +0 -6
  559. package/dist/components/icons/Copy.js +0 -6
  560. package/dist/components/icons/Copy.js.map +0 -1
  561. package/dist/components/icons/DeepThought.d.ts +0 -6
  562. package/dist/components/icons/DeepThought.js +0 -6
  563. package/dist/components/icons/DeepThought.js.map +0 -1
  564. package/dist/components/icons/Delete.d.ts +0 -6
  565. package/dist/components/icons/Delete.js +0 -6
  566. package/dist/components/icons/Delete.js.map +0 -1
  567. package/dist/components/icons/Document.d.ts +0 -5
  568. package/dist/components/icons/Document.js +0 -10
  569. package/dist/components/icons/Document.js.map +0 -1
  570. package/dist/components/icons/Download.d.ts +0 -6
  571. package/dist/components/icons/Download.js +0 -6
  572. package/dist/components/icons/Download.js.map +0 -1
  573. package/dist/components/icons/Edit.d.ts +0 -6
  574. package/dist/components/icons/Edit.js +0 -6
  575. package/dist/components/icons/Edit.js.map +0 -1
  576. package/dist/components/icons/Expand.d.ts +0 -6
  577. package/dist/components/icons/Expand.js +0 -6
  578. package/dist/components/icons/Expand.js.map +0 -1
  579. package/dist/components/icons/Eye.d.ts +0 -6
  580. package/dist/components/icons/Eye.js +0 -6
  581. package/dist/components/icons/Eye.js.map +0 -1
  582. package/dist/components/icons/EyeInvisible.d.ts +0 -6
  583. package/dist/components/icons/EyeInvisible.js +0 -6
  584. package/dist/components/icons/EyeInvisible.js.map +0 -1
  585. package/dist/components/icons/Facebook.d.ts +0 -6
  586. package/dist/components/icons/Facebook.js +0 -6
  587. package/dist/components/icons/Facebook.js.map +0 -1
  588. package/dist/components/icons/Feedback.d.ts +0 -6
  589. package/dist/components/icons/Feedback.js +0 -6
  590. package/dist/components/icons/Feedback.js.map +0 -1
  591. package/dist/components/icons/File.d.ts +0 -6
  592. package/dist/components/icons/File.js +0 -6
  593. package/dist/components/icons/File.js.map +0 -1
  594. package/dist/components/icons/FileExcel.d.ts +0 -6
  595. package/dist/components/icons/FileExcel.js +0 -6
  596. package/dist/components/icons/FileExcel.js.map +0 -1
  597. package/dist/components/icons/FilePdf.d.ts +0 -6
  598. package/dist/components/icons/FilePdf.js +0 -6
  599. package/dist/components/icons/FilePdf.js.map +0 -1
  600. package/dist/components/icons/FileWord.d.ts +0 -6
  601. package/dist/components/icons/FileWord.js +0 -6
  602. package/dist/components/icons/FileWord.js.map +0 -1
  603. package/dist/components/icons/Fullscreen.d.ts +0 -6
  604. package/dist/components/icons/Fullscreen.js +0 -6
  605. package/dist/components/icons/Fullscreen.js.map +0 -1
  606. package/dist/components/icons/FullscreenExit.d.ts +0 -6
  607. package/dist/components/icons/FullscreenExit.js +0 -6
  608. package/dist/components/icons/FullscreenExit.js.map +0 -1
  609. package/dist/components/icons/Group.d.ts +0 -6
  610. package/dist/components/icons/Group.js +0 -6
  611. package/dist/components/icons/Group.js.map +0 -1
  612. package/dist/components/icons/History.d.ts +0 -7
  613. package/dist/components/icons/History.js +0 -6
  614. package/dist/components/icons/History.js.map +0 -1
  615. package/dist/components/icons/Image.d.ts +0 -4
  616. package/dist/components/icons/Image.js +0 -9
  617. package/dist/components/icons/Image.js.map +0 -1
  618. package/dist/components/icons/Info.d.ts +0 -6
  619. package/dist/components/icons/Info.js +0 -6
  620. package/dist/components/icons/Info.js.map +0 -1
  621. package/dist/components/icons/Link.d.ts +0 -6
  622. package/dist/components/icons/Link.js +0 -6
  623. package/dist/components/icons/Link.js.map +0 -1
  624. package/dist/components/icons/Linkedin.d.ts +0 -6
  625. package/dist/components/icons/Linkedin.js +0 -6
  626. package/dist/components/icons/Linkedin.js.map +0 -1
  627. package/dist/components/icons/Loading.d.ts +0 -7
  628. package/dist/components/icons/Loading.js +0 -10
  629. package/dist/components/icons/Loading.js.map +0 -1
  630. package/dist/components/icons/Logout.d.ts +0 -6
  631. package/dist/components/icons/Logout.js +0 -6
  632. package/dist/components/icons/Logout.js.map +0 -1
  633. package/dist/components/icons/Mail.d.ts +0 -6
  634. package/dist/components/icons/Mail.js +0 -6
  635. package/dist/components/icons/Mail.js.map +0 -1
  636. package/dist/components/icons/MapMarker.d.ts +0 -6
  637. package/dist/components/icons/MapMarker.js +0 -6
  638. package/dist/components/icons/MapMarker.js.map +0 -1
  639. package/dist/components/icons/MenuHorizontal.d.ts +0 -7
  640. package/dist/components/icons/MenuHorizontal.js +0 -6
  641. package/dist/components/icons/MenuHorizontal.js.map +0 -1
  642. package/dist/components/icons/MenuVertical.d.ts +0 -7
  643. package/dist/components/icons/MenuVertical.js +0 -6
  644. package/dist/components/icons/MenuVertical.js.map +0 -1
  645. package/dist/components/icons/Message.d.ts +0 -6
  646. package/dist/components/icons/Message.js +0 -6
  647. package/dist/components/icons/Message.js.map +0 -1
  648. package/dist/components/icons/Microphone.d.ts +0 -6
  649. package/dist/components/icons/Microphone.js +0 -6
  650. package/dist/components/icons/Microphone.js.map +0 -1
  651. package/dist/components/icons/Minus.d.ts +0 -6
  652. package/dist/components/icons/Minus.js +0 -6
  653. package/dist/components/icons/Minus.js.map +0 -1
  654. package/dist/components/icons/MinusCircle.d.ts +0 -6
  655. package/dist/components/icons/MinusCircle.js +0 -6
  656. package/dist/components/icons/MinusCircle.js.map +0 -1
  657. package/dist/components/icons/PaperClip.d.ts +0 -6
  658. package/dist/components/icons/PaperClip.js +0 -6
  659. package/dist/components/icons/PaperClip.js.map +0 -1
  660. package/dist/components/icons/Picture.d.ts +0 -6
  661. package/dist/components/icons/Picture.js +0 -6
  662. package/dist/components/icons/Picture.js.map +0 -1
  663. package/dist/components/icons/Plus.d.ts +0 -6
  664. package/dist/components/icons/Plus.js +0 -6
  665. package/dist/components/icons/Plus.js.map +0 -1
  666. package/dist/components/icons/Preview.d.ts +0 -4
  667. package/dist/components/icons/Preview.js +0 -9
  668. package/dist/components/icons/Preview.js.map +0 -1
  669. package/dist/components/icons/Print.d.ts +0 -6
  670. package/dist/components/icons/Print.js +0 -6
  671. package/dist/components/icons/Print.js.map +0 -1
  672. package/dist/components/icons/QuestionHelp.d.ts +0 -6
  673. package/dist/components/icons/QuestionHelp.js +0 -6
  674. package/dist/components/icons/QuestionHelp.js.map +0 -1
  675. package/dist/components/icons/Refresh.d.ts +0 -6
  676. package/dist/components/icons/Refresh.js +0 -6
  677. package/dist/components/icons/Refresh.js.map +0 -1
  678. package/dist/components/icons/SelectIcon.d.ts +0 -6
  679. package/dist/components/icons/SelectIcon.js +0 -6
  680. package/dist/components/icons/SelectIcon.js.map +0 -1
  681. package/dist/components/icons/Send.d.ts +0 -6
  682. package/dist/components/icons/Send.js +0 -6
  683. package/dist/components/icons/Send.js.map +0 -1
  684. package/dist/components/icons/Setting.d.ts +0 -6
  685. package/dist/components/icons/Setting.js +0 -6
  686. package/dist/components/icons/Setting.js.map +0 -1
  687. package/dist/components/icons/Share.d.ts +0 -6
  688. package/dist/components/icons/Share.js +0 -6
  689. package/dist/components/icons/Share.js.map +0 -1
  690. package/dist/components/icons/Sound.d.ts +0 -6
  691. package/dist/components/icons/Sound.js +0 -6
  692. package/dist/components/icons/Sound.js.map +0 -1
  693. package/dist/components/icons/SoundDeactivated.d.ts +0 -6
  694. package/dist/components/icons/SoundDeactivated.js +0 -6
  695. package/dist/components/icons/SoundDeactivated.js.map +0 -1
  696. package/dist/components/icons/Telegram.d.ts +0 -6
  697. package/dist/components/icons/Telegram.js +0 -6
  698. package/dist/components/icons/Telegram.js.map +0 -1
  699. package/dist/components/icons/ThumbDown.d.ts +0 -6
  700. package/dist/components/icons/ThumbDown.js +0 -6
  701. package/dist/components/icons/ThumbDown.js.map +0 -1
  702. package/dist/components/icons/ThumbUp.d.ts +0 -6
  703. package/dist/components/icons/ThumbUp.js +0 -6
  704. package/dist/components/icons/ThumbUp.js.map +0 -1
  705. package/dist/components/icons/Translation.d.ts +0 -6
  706. package/dist/components/icons/Translation.js +0 -6
  707. package/dist/components/icons/Translation.js.map +0 -1
  708. package/dist/components/icons/Twitter.d.ts +0 -6
  709. package/dist/components/icons/Twitter.js +0 -6
  710. package/dist/components/icons/Twitter.js.map +0 -1
  711. package/dist/components/icons/Upload.d.ts +0 -4
  712. package/dist/components/icons/Upload.js +0 -9
  713. package/dist/components/icons/Upload.js.map +0 -1
  714. package/dist/components/icons/User.d.ts +0 -6
  715. package/dist/components/icons/User.js +0 -6
  716. package/dist/components/icons/User.js.map +0 -1
  717. package/dist/components/icons/Warning.d.ts +0 -6
  718. package/dist/components/icons/Warning.js +0 -6
  719. package/dist/components/icons/Warning.js.map +0 -1
  720. package/dist/components/icons/WhatsApp.d.ts +0 -6
  721. package/dist/components/icons/WhatsApp.js +0 -6
  722. package/dist/components/icons/WhatsApp.js.map +0 -1
  723. package/dist/components/icons/loading.css +0 -14
  724. package/dist/components/layouts/WebsiteAssistant.d.ts +0 -4
  725. package/dist/components/layouts/WebsiteAssistant.js +0 -38
  726. package/dist/components/layouts/WebsiteAssistant.js.map +0 -1
  727. package/dist/components/layouts/website-assistant.css +0 -676
  728. package/dist/components/ui/Alert.css +0 -93
  729. package/dist/components/ui/Alert.d.ts +0 -18
  730. package/dist/components/ui/Alert.js +0 -42
  731. package/dist/components/ui/Alert.js.map +0 -1
  732. package/dist/components/ui/Button.css +0 -167
  733. package/dist/components/ui/Button.d.ts +0 -27
  734. package/dist/components/ui/Button.js +0 -23
  735. package/dist/components/ui/Button.js.map +0 -1
  736. package/dist/components/ui/Card.css +0 -65
  737. package/dist/components/ui/Card.d.ts +0 -13
  738. package/dist/components/ui/Card.js +0 -14
  739. package/dist/components/ui/Card.js.map +0 -1
  740. package/dist/components/ui/Checkbox.css +0 -116
  741. package/dist/components/ui/Checkbox.d.ts +0 -11
  742. package/dist/components/ui/Checkbox.js +0 -20
  743. package/dist/components/ui/Checkbox.js.map +0 -1
  744. package/dist/components/ui/ConfirmDialog.css +0 -42
  745. package/dist/components/ui/ConfirmDialog.d.ts +0 -11
  746. package/dist/components/ui/ConfirmDialog.js +0 -12
  747. package/dist/components/ui/ConfirmDialog.js.map +0 -1
  748. package/dist/components/ui/Details.css +0 -66
  749. package/dist/components/ui/Drawer.css +0 -270
  750. package/dist/components/ui/Drawer.d.ts +0 -46
  751. package/dist/components/ui/Drawer.js +0 -60
  752. package/dist/components/ui/Drawer.js.map +0 -1
  753. package/dist/components/ui/Dropdown.css +0 -173
  754. package/dist/components/ui/Dropdown.d.ts +0 -11
  755. package/dist/components/ui/Dropdown.js +0 -33
  756. package/dist/components/ui/Dropdown.js.map +0 -1
  757. package/dist/components/ui/Expandable.css +0 -15
  758. package/dist/components/ui/Expandable.d.ts +0 -15
  759. package/dist/components/ui/Expandable.js +0 -59
  760. package/dist/components/ui/Expandable.js.map +0 -1
  761. package/dist/components/ui/Modal.css +0 -98
  762. package/dist/components/ui/Modal.d.ts +0 -16
  763. package/dist/components/ui/Modal.js +0 -24
  764. package/dist/components/ui/Modal.js.map +0 -1
  765. package/dist/components/ui/Select.css +0 -138
  766. package/dist/components/ui/Select.d.ts +0 -17
  767. package/dist/components/ui/Select.js +0 -17
  768. package/dist/components/ui/Select.js.map +0 -1
  769. package/dist/components/ui/Slider.css +0 -192
  770. package/dist/components/ui/Slider.d.ts +0 -12
  771. package/dist/components/ui/Slider.js +0 -78
  772. package/dist/components/ui/Slider.js.map +0 -1
  773. package/dist/components/ui/Spin.css +0 -31
  774. package/dist/components/ui/Spin.d.ts +0 -9
  775. package/dist/components/ui/Spin.js +0 -12
  776. package/dist/components/ui/Spin.js.map +0 -1
  777. package/dist/components/ui/Table.css +0 -132
  778. package/dist/components/ui/Tooltip.css +0 -171
  779. package/dist/components/ui/Tooltip.d.ts +0 -11
  780. package/dist/components/ui/Tooltip.js +0 -90
  781. package/dist/components/ui/Tooltip.js.map +0 -1
  782. package/esm/components/PositionDrawer/PositionDrawer.d.ts +0 -12
  783. package/esm/components/PositionDrawer/PositionDrawer.js +0 -14
  784. package/esm/components/PositionDrawer/PositionDrawer.js.map +0 -1
  785. package/esm/components/icons/AI.d.ts +0 -6
  786. package/esm/components/icons/AI.js +0 -4
  787. package/esm/components/icons/AI.js.map +0 -1
  788. package/esm/components/icons/Alert.d.ts +0 -6
  789. package/esm/components/icons/Alert.js +0 -4
  790. package/esm/components/icons/Alert.js.map +0 -1
  791. package/esm/components/icons/ArrowUp.d.ts +0 -6
  792. package/esm/components/icons/ArrowUp.js +0 -4
  793. package/esm/components/icons/ArrowUp.js.map +0 -1
  794. package/esm/components/icons/Bug.d.ts +0 -6
  795. package/esm/components/icons/Bug.js +0 -4
  796. package/esm/components/icons/Bug.js.map +0 -1
  797. package/esm/components/icons/Chat.d.ts +0 -6
  798. package/esm/components/icons/Chat.js +0 -4
  799. package/esm/components/icons/Chat.js.map +0 -1
  800. package/esm/components/icons/ChevronDown.d.ts +0 -6
  801. package/esm/components/icons/ChevronDown.js +0 -4
  802. package/esm/components/icons/ChevronDown.js.map +0 -1
  803. package/esm/components/icons/ChevronLeft.d.ts +0 -6
  804. package/esm/components/icons/ChevronLeft.js +0 -4
  805. package/esm/components/icons/ChevronLeft.js.map +0 -1
  806. package/esm/components/icons/ChevronRight.d.ts +0 -6
  807. package/esm/components/icons/ChevronRight.js +0 -4
  808. package/esm/components/icons/ChevronRight.js.map +0 -1
  809. package/esm/components/icons/ChevronUp.d.ts +0 -6
  810. package/esm/components/icons/ChevronUp.js +0 -4
  811. package/esm/components/icons/ChevronUp.js.map +0 -1
  812. package/esm/components/icons/Clear.d.ts +0 -6
  813. package/esm/components/icons/Clear.js +0 -4
  814. package/esm/components/icons/Clear.js.map +0 -1
  815. package/esm/components/icons/Close.d.ts +0 -7
  816. package/esm/components/icons/Close.js +0 -4
  817. package/esm/components/icons/Close.js.map +0 -1
  818. package/esm/components/icons/Code.d.ts +0 -6
  819. package/esm/components/icons/Code.js +0 -4
  820. package/esm/components/icons/Code.js.map +0 -1
  821. package/esm/components/icons/Copy.d.ts +0 -6
  822. package/esm/components/icons/Copy.js +0 -4
  823. package/esm/components/icons/Copy.js.map +0 -1
  824. package/esm/components/icons/DeepThought.d.ts +0 -6
  825. package/esm/components/icons/DeepThought.js +0 -4
  826. package/esm/components/icons/DeepThought.js.map +0 -1
  827. package/esm/components/icons/Delete.d.ts +0 -6
  828. package/esm/components/icons/Delete.js +0 -4
  829. package/esm/components/icons/Delete.js.map +0 -1
  830. package/esm/components/icons/Document.d.ts +0 -5
  831. package/esm/components/icons/Document.js +0 -6
  832. package/esm/components/icons/Document.js.map +0 -1
  833. package/esm/components/icons/Download.d.ts +0 -6
  834. package/esm/components/icons/Download.js +0 -4
  835. package/esm/components/icons/Download.js.map +0 -1
  836. package/esm/components/icons/Edit.d.ts +0 -6
  837. package/esm/components/icons/Edit.js +0 -4
  838. package/esm/components/icons/Edit.js.map +0 -1
  839. package/esm/components/icons/Expand.d.ts +0 -6
  840. package/esm/components/icons/Expand.js +0 -4
  841. package/esm/components/icons/Expand.js.map +0 -1
  842. package/esm/components/icons/Eye.d.ts +0 -6
  843. package/esm/components/icons/Eye.js +0 -4
  844. package/esm/components/icons/Eye.js.map +0 -1
  845. package/esm/components/icons/EyeInvisible.d.ts +0 -6
  846. package/esm/components/icons/EyeInvisible.js +0 -4
  847. package/esm/components/icons/EyeInvisible.js.map +0 -1
  848. package/esm/components/icons/Facebook.d.ts +0 -6
  849. package/esm/components/icons/Facebook.js +0 -4
  850. package/esm/components/icons/Facebook.js.map +0 -1
  851. package/esm/components/icons/Feedback.d.ts +0 -6
  852. package/esm/components/icons/Feedback.js +0 -4
  853. package/esm/components/icons/Feedback.js.map +0 -1
  854. package/esm/components/icons/File.d.ts +0 -6
  855. package/esm/components/icons/File.js +0 -4
  856. package/esm/components/icons/File.js.map +0 -1
  857. package/esm/components/icons/FileExcel.d.ts +0 -6
  858. package/esm/components/icons/FileExcel.js +0 -4
  859. package/esm/components/icons/FileExcel.js.map +0 -1
  860. package/esm/components/icons/FilePdf.d.ts +0 -6
  861. package/esm/components/icons/FilePdf.js +0 -4
  862. package/esm/components/icons/FilePdf.js.map +0 -1
  863. package/esm/components/icons/FileWord.d.ts +0 -6
  864. package/esm/components/icons/FileWord.js +0 -4
  865. package/esm/components/icons/FileWord.js.map +0 -1
  866. package/esm/components/icons/Fullscreen.d.ts +0 -6
  867. package/esm/components/icons/Fullscreen.js +0 -4
  868. package/esm/components/icons/Fullscreen.js.map +0 -1
  869. package/esm/components/icons/FullscreenExit.d.ts +0 -6
  870. package/esm/components/icons/FullscreenExit.js +0 -4
  871. package/esm/components/icons/FullscreenExit.js.map +0 -1
  872. package/esm/components/icons/Group.d.ts +0 -6
  873. package/esm/components/icons/Group.js +0 -4
  874. package/esm/components/icons/Group.js.map +0 -1
  875. package/esm/components/icons/History.d.ts +0 -7
  876. package/esm/components/icons/History.js +0 -4
  877. package/esm/components/icons/History.js.map +0 -1
  878. package/esm/components/icons/Image.d.ts +0 -4
  879. package/esm/components/icons/Image.js +0 -5
  880. package/esm/components/icons/Image.js.map +0 -1
  881. package/esm/components/icons/Info.d.ts +0 -6
  882. package/esm/components/icons/Info.js +0 -4
  883. package/esm/components/icons/Info.js.map +0 -1
  884. package/esm/components/icons/Link.d.ts +0 -6
  885. package/esm/components/icons/Link.js +0 -4
  886. package/esm/components/icons/Link.js.map +0 -1
  887. package/esm/components/icons/Linkedin.d.ts +0 -6
  888. package/esm/components/icons/Linkedin.js +0 -4
  889. package/esm/components/icons/Linkedin.js.map +0 -1
  890. package/esm/components/icons/Loading.d.ts +0 -7
  891. package/esm/components/icons/Loading.js +0 -7
  892. package/esm/components/icons/Loading.js.map +0 -1
  893. package/esm/components/icons/Logout.d.ts +0 -6
  894. package/esm/components/icons/Logout.js +0 -4
  895. package/esm/components/icons/Logout.js.map +0 -1
  896. package/esm/components/icons/Mail.d.ts +0 -6
  897. package/esm/components/icons/Mail.js +0 -4
  898. package/esm/components/icons/Mail.js.map +0 -1
  899. package/esm/components/icons/MapMarker.d.ts +0 -6
  900. package/esm/components/icons/MapMarker.js +0 -4
  901. package/esm/components/icons/MapMarker.js.map +0 -1
  902. package/esm/components/icons/MenuHorizontal.d.ts +0 -7
  903. package/esm/components/icons/MenuHorizontal.js +0 -4
  904. package/esm/components/icons/MenuHorizontal.js.map +0 -1
  905. package/esm/components/icons/MenuVertical.d.ts +0 -7
  906. package/esm/components/icons/MenuVertical.js +0 -4
  907. package/esm/components/icons/MenuVertical.js.map +0 -1
  908. package/esm/components/icons/Message.d.ts +0 -6
  909. package/esm/components/icons/Message.js +0 -4
  910. package/esm/components/icons/Message.js.map +0 -1
  911. package/esm/components/icons/Microphone.d.ts +0 -6
  912. package/esm/components/icons/Microphone.js +0 -4
  913. package/esm/components/icons/Microphone.js.map +0 -1
  914. package/esm/components/icons/Minus.d.ts +0 -6
  915. package/esm/components/icons/Minus.js +0 -4
  916. package/esm/components/icons/Minus.js.map +0 -1
  917. package/esm/components/icons/MinusCircle.d.ts +0 -6
  918. package/esm/components/icons/MinusCircle.js +0 -4
  919. package/esm/components/icons/MinusCircle.js.map +0 -1
  920. package/esm/components/icons/PaperClip.d.ts +0 -6
  921. package/esm/components/icons/PaperClip.js +0 -4
  922. package/esm/components/icons/PaperClip.js.map +0 -1
  923. package/esm/components/icons/Picture.d.ts +0 -6
  924. package/esm/components/icons/Picture.js +0 -4
  925. package/esm/components/icons/Picture.js.map +0 -1
  926. package/esm/components/icons/Plus.d.ts +0 -6
  927. package/esm/components/icons/Plus.js +0 -4
  928. package/esm/components/icons/Plus.js.map +0 -1
  929. package/esm/components/icons/Preview.d.ts +0 -4
  930. package/esm/components/icons/Preview.js +0 -5
  931. package/esm/components/icons/Preview.js.map +0 -1
  932. package/esm/components/icons/Print.d.ts +0 -6
  933. package/esm/components/icons/Print.js +0 -4
  934. package/esm/components/icons/Print.js.map +0 -1
  935. package/esm/components/icons/QuestionHelp.d.ts +0 -6
  936. package/esm/components/icons/QuestionHelp.js +0 -4
  937. package/esm/components/icons/QuestionHelp.js.map +0 -1
  938. package/esm/components/icons/Refresh.d.ts +0 -6
  939. package/esm/components/icons/Refresh.js +0 -4
  940. package/esm/components/icons/Refresh.js.map +0 -1
  941. package/esm/components/icons/SelectIcon.d.ts +0 -6
  942. package/esm/components/icons/SelectIcon.js +0 -4
  943. package/esm/components/icons/SelectIcon.js.map +0 -1
  944. package/esm/components/icons/Send.d.ts +0 -6
  945. package/esm/components/icons/Send.js +0 -4
  946. package/esm/components/icons/Send.js.map +0 -1
  947. package/esm/components/icons/Setting.d.ts +0 -6
  948. package/esm/components/icons/Setting.js +0 -4
  949. package/esm/components/icons/Setting.js.map +0 -1
  950. package/esm/components/icons/Share.d.ts +0 -6
  951. package/esm/components/icons/Share.js +0 -4
  952. package/esm/components/icons/Share.js.map +0 -1
  953. package/esm/components/icons/Sound.d.ts +0 -6
  954. package/esm/components/icons/Sound.js +0 -4
  955. package/esm/components/icons/Sound.js.map +0 -1
  956. package/esm/components/icons/SoundDeactivated.d.ts +0 -6
  957. package/esm/components/icons/SoundDeactivated.js +0 -4
  958. package/esm/components/icons/SoundDeactivated.js.map +0 -1
  959. package/esm/components/icons/Telegram.d.ts +0 -6
  960. package/esm/components/icons/Telegram.js +0 -4
  961. package/esm/components/icons/Telegram.js.map +0 -1
  962. package/esm/components/icons/ThumbDown.d.ts +0 -6
  963. package/esm/components/icons/ThumbDown.js +0 -4
  964. package/esm/components/icons/ThumbDown.js.map +0 -1
  965. package/esm/components/icons/ThumbUp.d.ts +0 -6
  966. package/esm/components/icons/ThumbUp.js +0 -4
  967. package/esm/components/icons/ThumbUp.js.map +0 -1
  968. package/esm/components/icons/Translation.d.ts +0 -6
  969. package/esm/components/icons/Translation.js +0 -4
  970. package/esm/components/icons/Translation.js.map +0 -1
  971. package/esm/components/icons/Twitter.d.ts +0 -6
  972. package/esm/components/icons/Twitter.js +0 -4
  973. package/esm/components/icons/Twitter.js.map +0 -1
  974. package/esm/components/icons/Upload.d.ts +0 -4
  975. package/esm/components/icons/Upload.js +0 -5
  976. package/esm/components/icons/Upload.js.map +0 -1
  977. package/esm/components/icons/User.d.ts +0 -6
  978. package/esm/components/icons/User.js +0 -4
  979. package/esm/components/icons/User.js.map +0 -1
  980. package/esm/components/icons/Warning.d.ts +0 -6
  981. package/esm/components/icons/Warning.js +0 -4
  982. package/esm/components/icons/Warning.js.map +0 -1
  983. package/esm/components/icons/WhatsApp.d.ts +0 -6
  984. package/esm/components/icons/WhatsApp.js +0 -4
  985. package/esm/components/icons/WhatsApp.js.map +0 -1
  986. package/esm/components/icons/loading.css +0 -14
  987. package/esm/components/layouts/WebsiteAssistant.d.ts +0 -4
  988. package/esm/components/layouts/WebsiteAssistant.js +0 -35
  989. package/esm/components/layouts/WebsiteAssistant.js.map +0 -1
  990. package/esm/components/layouts/website-assistant.css +0 -676
  991. package/esm/components/ui/Alert.css +0 -93
  992. package/esm/components/ui/Alert.d.ts +0 -18
  993. package/esm/components/ui/Alert.js +0 -39
  994. package/esm/components/ui/Alert.js.map +0 -1
  995. package/esm/components/ui/Button.css +0 -167
  996. package/esm/components/ui/Button.d.ts +0 -27
  997. package/esm/components/ui/Button.js +0 -20
  998. package/esm/components/ui/Button.js.map +0 -1
  999. package/esm/components/ui/Card.css +0 -65
  1000. package/esm/components/ui/Card.d.ts +0 -13
  1001. package/esm/components/ui/Card.js +0 -11
  1002. package/esm/components/ui/Card.js.map +0 -1
  1003. package/esm/components/ui/Checkbox.css +0 -116
  1004. package/esm/components/ui/Checkbox.d.ts +0 -11
  1005. package/esm/components/ui/Checkbox.js +0 -17
  1006. package/esm/components/ui/Checkbox.js.map +0 -1
  1007. package/esm/components/ui/ConfirmDialog.css +0 -42
  1008. package/esm/components/ui/ConfirmDialog.d.ts +0 -11
  1009. package/esm/components/ui/ConfirmDialog.js +0 -9
  1010. package/esm/components/ui/ConfirmDialog.js.map +0 -1
  1011. package/esm/components/ui/Details.css +0 -66
  1012. package/esm/components/ui/Drawer.css +0 -270
  1013. package/esm/components/ui/Drawer.d.ts +0 -46
  1014. package/esm/components/ui/Drawer.js +0 -57
  1015. package/esm/components/ui/Drawer.js.map +0 -1
  1016. package/esm/components/ui/Dropdown.css +0 -173
  1017. package/esm/components/ui/Dropdown.d.ts +0 -11
  1018. package/esm/components/ui/Dropdown.js +0 -30
  1019. package/esm/components/ui/Dropdown.js.map +0 -1
  1020. package/esm/components/ui/Expandable.css +0 -15
  1021. package/esm/components/ui/Expandable.d.ts +0 -15
  1022. package/esm/components/ui/Expandable.js +0 -56
  1023. package/esm/components/ui/Expandable.js.map +0 -1
  1024. package/esm/components/ui/Modal.css +0 -98
  1025. package/esm/components/ui/Modal.d.ts +0 -16
  1026. package/esm/components/ui/Modal.js +0 -21
  1027. package/esm/components/ui/Modal.js.map +0 -1
  1028. package/esm/components/ui/Select.css +0 -138
  1029. package/esm/components/ui/Select.d.ts +0 -17
  1030. package/esm/components/ui/Select.js +0 -14
  1031. package/esm/components/ui/Select.js.map +0 -1
  1032. package/esm/components/ui/Slider.css +0 -192
  1033. package/esm/components/ui/Slider.d.ts +0 -12
  1034. package/esm/components/ui/Slider.js +0 -75
  1035. package/esm/components/ui/Slider.js.map +0 -1
  1036. package/esm/components/ui/Spin.css +0 -31
  1037. package/esm/components/ui/Spin.d.ts +0 -9
  1038. package/esm/components/ui/Spin.js +0 -9
  1039. package/esm/components/ui/Spin.js.map +0 -1
  1040. package/esm/components/ui/Table.css +0 -132
  1041. package/esm/components/ui/Tooltip.css +0 -171
  1042. package/esm/components/ui/Tooltip.d.ts +0 -11
  1043. package/esm/components/ui/Tooltip.js +0 -87
  1044. package/esm/components/ui/Tooltip.js.map +0 -1
package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx CHANGED
@@ -1,2299 +1,265 @@
1
- // ArtifactSystem.stories.tsx
2
1
  import React, { useEffect } from 'react';
3
2
  import type { Meta, StoryObj } from '@storybook/react';
4
- import { ArtifactProvider, useArtifact } from './context/ArtifactContext';
5
- import ArtifactHandler from './components/ArtifactHandler/ArtifactHandler';
6
- import ArtifactDrawer from './components/ArtifactDrawer/ArtifactDrawer';
7
- import { ArtifactAPIBridge } from './utils/ArtifactAPI';
8
- import Chat from '../Chat/Chat';
3
+ import { Message } from '@memori.ai/memori-api-client/dist/types';
4
+ import { AlertProvider } from '@memori.ai/ui';
5
+ import I18nWrapper from '../../I18nWrapper';
9
6
  import {
10
- Message,
11
- Memori,
12
- Tenant,
13
- } from '@memori.ai/memori-api-client/dist/types';
14
- import { sanitizeText } from '../../helpers/sanitizer';
7
+ ArtifactProvider,
8
+ useArtifact,
9
+ } from './context/ArtifactContext';
10
+ import ArtifactDrawer from './components/ArtifactDrawer/ArtifactDrawer';
11
+ import ArtifactHandler from './components/ArtifactHandler/ArtifactHandler';
15
12
  import { ArtifactData } from './types/artifact.types';
16
13
 
17
- // Note: Window.MemoriArtifactAPI types are defined in MemoriWidget.tsx
18
-
19
- // Mock data for Chat component
20
- const mockMemori: Memori = {
21
- memoriID: 'test-memori-id',
22
- name: 'Test Memori',
23
- culture: 'en-US',
24
- coverURL: '',
25
- enableBoardOfExperts: false,
26
- } as Memori;
27
-
28
- const mockTenant: Tenant = {
29
- name: 'test-tenant',
30
- } as Tenant;
31
-
32
- // Mock functions for Chat component
33
- const mockPushMessage = (message: Message) => {
34
- console.log('Push message:', message);
35
- };
36
-
37
- const mockSimulateUserPrompt = (text: string, translatedText?: string) => {
38
- console.log('Simulate user prompt:', text, translatedText);
39
- };
40
-
41
- const mockOnChangeUserMessage = (userMessage: string) => {
42
- console.log('Change user message:', userMessage);
43
- };
44
-
45
- const mockSendMessage = (msg: string, media?: any[]) => {
46
- console.log('Send message:', msg, media);
47
- };
48
-
49
- const mockSetEnableFocusChatInput = (enableFocusChatInput: boolean) => {
50
- console.log('Set enable focus chat input:', enableFocusChatInput);
51
- };
52
-
53
- const mockStopAudio = () => {
54
- console.log('Stop audio');
55
- };
56
-
57
- const mockStartListening = () => {
58
- console.log('Start listening');
59
- };
60
-
61
- const mockStopListening = () => {
62
- console.log('Stop listening');
63
- };
64
-
65
- const mockSetSendOnEnter = (sendOnEnter: 'keypress' | 'click') => {
66
- console.log('Set send on enter:', sendOnEnter);
67
- };
68
-
69
- const mockSetAttachmentsMenuOpen = (attachmentsMenuOpen: 'link' | 'media') => {
70
- console.log('Set attachments menu open:', attachmentsMenuOpen);
71
- };
72
-
73
- // Story decorator to provide context
74
- const withArtifactProvider = (Story: any) => (
75
- <ArtifactProvider>
76
- <ArtifactAPIBridge pushMessage={mockPushMessage} />
77
- <Story />
78
- </ArtifactProvider>
79
- );
80
-
81
- const meta: Meta<typeof ArtifactHandler> = {
82
- title: 'Artifact System',
83
- component: ArtifactHandler,
84
- decorators: [withArtifactProvider],
85
- parameters: {
86
- layout: 'fullscreen',
87
- },
88
- };
89
-
90
- export default meta;
91
- type Story = StoryObj<typeof meta>;
92
-
93
- // Sample artifacts for different mime types
94
- const htmlArtifact = `<think>L'utente mi chiede di generare una semplice pagina HTML. Userò il sistema Artifact per creare una pagina HTML pulita e semplice, seguendo le linee guida fornite.
95
-
96
- Devo:
97
- 1. Usare il formato corretto: <output class="memori-artifact" data-mimetype="html">
98
- 2. Creare una pagina HTML completa con DOCTYPE
99
- 3. Il tag </output> deve essere DOPO </html>
100
- 4. Mantenerla semplice come richiesto
101
- 5. Includere un po' di stile per renderla gradevole ma non eccessiva</think>Ciao! Ti creo subito una pagina HTML semplice e pulita:
102
- </think>
103
- <output class="memori-artifact" data-mimetype="html">
104
- <!DOCTYPE html>
105
- <html lang="it">
106
- <head>
107
- <meta charset="UTF-8">
108
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
109
- <title>La mia pagina semplice</title>
110
- <style>
111
- body {
112
- font-family: Arial, sans-serif;
113
- max-width: 800px;
114
- margin: 0 auto;
115
- padding: 20px;
116
- line-height: 1.6;
117
- background-color: #f4f4f4;
118
- }
119
-
120
- .container {
121
- background: white;
122
- padding: 30px;
123
- border-radius: .5rem;
124
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
125
- }
126
-
127
- h1 {
128
- color: #333;
129
- text-align: center;
130
- }
131
-
132
- p {
133
- color: #666;
134
- margin-bottom: 15px;
135
- }
136
-
137
- .highlight {
138
- background-color: #e8f5e8;
139
- padding: 15px;
140
- border-left: 4px solid #4CAF50;
141
- margin: 20px 0;
142
- }
143
- </style>
144
- </head>
145
- <body>
146
- <div class="container">
147
- <h1>Benvenuto nella mia pagina!</h1>
148
-
149
- <p>Questa è una pagina HTML semplice e pulita.</p>
150
-
151
- <p>Contiene alcuni elementi di base:</p>
152
-
153
- <ul>
154
- <li>Un titolo principale</li>
155
- <li>Paragrafi di testo</li>
156
- <li>Una lista</li>
157
- <li>Un po' di stile CSS</li>
158
- </ul>
159
-
160
- <div class="highlight">
161
- <strong>Nota:</strong> Puoi modificare liberamente questo codice per personalizzare la tua pagina!
162
- </div>
163
-
164
- <p>Grazie per aver visitato la pagina! 😊</p>
165
- </div>
166
- </body>
167
- </html>
168
- </output>
169
-
170
- Ecco una pagina HTML semplice con:
171
- - Struttura pulita e ben organizzata
172
- - CSS inline per uno styling leggero
173
- - Layout responsive centrato
174
- - Elementi di base: titoli, paragrafi, lista
175
- - Un tocco di colore con la sezione evidenziata
176
-
177
- Puoi vedere l'anteprima nel drawer che si è aperto e modificare il codice come preferisci!`;
178
-
179
- const htmlArtifactWithScrolling = `<output class="memori-artifact" data-mimetype="html">
180
- <!DOCTYPE html>
181
- <html lang="it">
182
- <head>
183
- <meta charset="UTF-8">
184
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
185
- <title>Memori & AIsuru</title>
186
- <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;300;400;500;600;900&display=swap" rel="stylesheet">
187
- <style>
188
- * {
189
- margin: 0;
190
- padding: 0;
191
- box-sizing: border-box;
192
- }
193
-
194
- :root {
195
- /* Brand Colors dalla palette */
196
- --color-light-teal: #9CDCD9; /* PMS 324 C */
197
- --color-bright-cyan: #00AEC7; /* PMS 3125 C */
198
- --color-purple: #8246AF; /* PMS 2587 C */
199
- --color-dark-purple: #653165; /* PMS 2622 C */
200
- --color-navy: #005587; /* PMS 7692 C */
201
-
202
- /* Typography - Lexend Variable */
203
- --font-family: 'Lexend', sans-serif;
204
- }
205
-
206
- body {
207
- font-family: var(--font-family);
208
- font-weight: 400;
209
- line-height: 1.6;
210
- color: #333;
211
- overflow-x: hidden;
212
- }
213
-
214
- /* Hero Section con gradiente brand */
215
- .hero {
216
- background: linear-gradient(135deg, var(--color-bright-cyan) 0%, var(--color-purple) 50%, var(--color-dark-purple) 100%);
217
- min-height: 100vh;
218
- display: flex;
219
- align-items: center;
220
- justify-content: center;
221
- text-align: center;
222
- color: white;
223
- position: relative;
224
- overflow: hidden;
225
- }
226
-
227
- .hero::before {
228
- content: '';
229
- position: absolute;
230
- top: 0;
231
- left: 0;
232
- right: 0;
233
- bottom: 0;
234
- background: radial-gradient(circle at 30% 20%, rgba(156, 220, 217, 0.3) 0%, transparent 50%),
235
- radial-gradient(circle at 80% 80%, rgba(130, 70, 175, 0.3) 0%, transparent 50%);
236
- }
237
-
238
- .hero-content {
239
- position: relative;
240
- z-index: 1;
241
- max-width: 800px;
242
- padding: 2rem;
243
- }
244
-
245
- .brand-title {
246
- font-size: clamp(3rem, 10vw, 6rem);
247
- font-weight: 900; /* Black weight come da brandbook */
248
- margin-bottom: 1rem;
249
- text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
250
- animation: fadeInUp 1s ease-out;
251
- }
252
-
253
- .brand-subtitle {
254
- font-size: clamp(1.2rem, 4vw, 2rem);
255
- font-weight: 300; /* Light weight */
256
- margin-bottom: 2rem;
257
- opacity: 0.95;
258
- animation: fadeInUp 1s ease-out 0.3s both;
259
- }
260
-
261
- .cta-button {
262
- display: inline-block;
263
- padding: 1.2rem 2.5rem;
264
- background: var(--color-light-teal);
265
- color: var(--color-navy);
266
- text-decoration: none;
267
- border-radius: .5rem;
268
- font-weight: 600; /* Semibold */
269
- font-size: 1.1rem;
270
- transition: all 0.3s ease;
271
- animation: fadeInUp 1s ease-out 0.6s both;
272
- text-transform: uppercase;
273
- letter-spacing: 0.5px;
274
- }
275
-
276
- .cta-button:hover {
277
- background: white;
278
- transform: translateY(-3px);
279
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
280
- }
281
-
282
- /* Features Section con colori del brand */
283
- .features {
284
- padding: 5rem 2rem;
285
- background: linear-gradient(45deg, rgba(156, 220, 217, 0.1) 0%, rgba(0, 174, 199, 0.1) 100%);
286
- }
287
-
288
- .container {
289
- max-width: 1200px;
290
- margin: 0 auto;
291
- }
292
-
293
- .section-title {
294
- text-align: center;
295
- font-size: 3rem;
296
- font-weight: 900;
297
- margin-bottom: 3rem;
298
- color: var(--color-navy);
299
- }
300
-
301
- .features-grid {
302
- display: grid;
303
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
304
- gap: 2.5rem;
305
- }
306
-
307
- .feature-card {
308
- background: white;
309
- padding: 2.5rem;
310
- border-radius: .5rem;
311
- box-shadow: 0 10px 40px rgba(0, 85, 135, 0.1);
312
- text-align: center;
313
- transition: all 0.3s ease;
314
- border: 1px solid rgba(0, 174, 199, 0.1);
315
- position: relative;
316
- overflow: hidden;
317
- }
318
-
319
- .feature-card::before {
320
- content: '';
321
- position: absolute;
322
- top: 0;
323
- left: 0;
324
- right: 0;
325
- height: 4px;
326
- background: linear-gradient(90deg, var(--color-bright-cyan), var(--color-purple));
327
- }
328
-
329
- .feature-card:hover {
330
- transform: translateY(-10px);
331
- box-shadow: 0 25px 60px rgba(0, 85, 135, 0.2);
332
- }
333
-
334
- .feature-icon {
335
- font-size: 4rem;
336
- margin-bottom: 1.5rem;
337
- background: linear-gradient(135deg, var(--color-bright-cyan), var(--color-purple));
338
- -webkit-background-clip: text;
339
- -webkit-text-fill-color: transparent;
340
- background-clip: text;
341
- font-weight: 900;
342
- }
343
-
344
- .feature-card h3 {
345
- font-size: 1.5rem;
346
- font-weight: 600;
347
- margin-bottom: 1rem;
348
- color: var(--color-navy);
349
- }
350
-
351
- .feature-card p {
352
- color: #666;
353
- line-height: 1.8;
354
- font-weight: 400;
355
- }
356
-
357
- /* Brand Colors Section */
358
- .brand-colors {
359
- padding: 5rem 2rem;
360
- background: var(--color-navy);
361
- color: white;
362
- }
363
-
364
- .colors-grid {
365
- display: grid;
366
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
367
- gap: 2rem;
368
- margin-top: 3rem;
369
- }
370
-
371
- .color-swatch {
372
- text-align: center;
373
- padding: 1.5rem;
374
- border-radius: .5rem;
375
- background: rgba(255, 255, 255, 0.1);
376
- backdrop-filter: blur(10px);
377
- }
378
-
379
- .color-circle {
380
- width: 100px;
381
- height: 100px;
382
- border-radius: 50%;
383
- margin: 0 auto 1rem;
384
- border: 3px solid rgba(255, 255, 255, 0.3);
385
- }
386
-
387
- .color-1 { background: var(--color-light-teal); }
388
- .color-2 { background: var(--color-bright-cyan); }
389
- .color-3 { background: var(--color-purple); }
390
- .color-4 { background: var(--color-dark-purple); }
391
- .color-5 { background: var(--color-navy); }
392
-
393
- .color-name {
394
- font-weight: 600;
395
- margin-bottom: 0.5rem;
396
- }
397
-
398
- .color-hex {
399
- font-family: 'Courier New', monospace;
400
- font-size: 0.9rem;
401
- opacity: 0.8;
402
- }
403
-
404
- /* Typography Section */
405
- .typography {
406
- padding: 5rem 2rem;
407
- background: linear-gradient(135deg, rgba(130, 70, 175, 0.05), rgba(101, 49, 101, 0.05));
408
- }
409
-
410
- .type-example {
411
- margin: 2rem 0;
412
- padding: 2rem;
413
- background: white;
414
- border-radius: .5rem;
415
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
416
- }
417
-
418
- .lexend-thin { font-weight: 100; font-size: 2rem; color: var(--color-purple); }
419
- .lexend-light { font-weight: 300; font-size: 1.8rem; color: var(--color-bright-cyan); }
420
- .lexend-regular { font-weight: 400; font-size: 1.5rem; color: var(--color-navy); }
421
- .lexend-medium { font-weight: 500; font-size: 1.3rem; color: var(--color-dark-purple); }
422
- .lexend-semibold { font-weight: 600; font-size: 1.2rem; color: var(--color-purple); }
423
- .lexend-black { font-weight: 900; font-size: 2.5rem; color: var(--color-navy); }
424
-
425
- /* Footer */
426
- footer {
427
- background: var(--color-dark-purple);
428
- color: white;
429
- text-align: center;
430
- padding: 3rem 2rem;
431
- }
432
-
433
- .footer-content {
434
- max-width: 800px;
435
- margin: 0 auto;
436
- }
437
-
438
- .footer-title {
439
- font-size: 2rem;
440
- font-weight: 900;
441
- margin-bottom: 1rem;
442
- background: linear-gradient(135deg, var(--color-light-teal), var(--color-bright-cyan));
443
- -webkit-background-clip: text;
444
- -webkit-text-fill-color: transparent;
445
- background-clip: text;
446
- }
447
-
448
- /* Animations */
449
- @keyframes fadeInUp {
450
- from {
451
- opacity: 0;
452
- transform: translateY(30px);
453
- }
454
- to {
455
- opacity: 1;
456
- transform: translateY(0);
457
- }
458
- }
459
-
460
- /* Responsive */
461
- @media (max-width: 768px) {
462
- .features-grid {
463
- grid-template-columns: 1fr;
464
- }
465
-
466
- .colors-grid {
467
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
468
- }
469
- }
470
- </style>
471
- </head>
472
- <body>
473
- <section class="hero">
474
- <div class="hero-content">
475
- <h1 class="brand-title">Memori & AIsuru</h1>
476
- <p class="brand-subtitle">Dove l'intelligenza artificiale incontra la memoria del futuro</p>
477
- <a href="#features" class="cta-button">Scopri di più</a>
478
- </div>
479
- </section>
480
-
481
- <section id="features" class="features">
482
- <div class="container">
483
- <h2 class="section-title">Caratteristiche Innovative</h2>
484
- <div class="features-grid">
485
- <div class="feature-card">
486
- <div class="feature-icon">🧠</div>
487
- <h3>Intelligenza Avanzata</h3>
488
- <p>Sistema di AI all'avanguardia che apprende e si adatta alle tue esigenze specifiche, offrendo soluzioni personalizzate e intelligenti.</p>
489
- </div>
490
-
491
- <div class="feature-card">
492
- <div class="feature-icon">💾</div>
493
- <h3>Memoria Infinita</h3>
494
- <p>Capacità di archiviazione e recupero dati senza limiti, con algoritmi ottimizzati per prestazioni eccezionali.</p>
495
- </div>
496
-
497
- <div class="feature-card">
498
- <div class="feature-icon">⚡</div>
499
- <h3>Velocità Estrema</h3>
500
- <p>Elaborazione in tempo reale con latenza minimale, garantendo risposte immediate e fluide in ogni situazione.</p>
501
- </div>
502
- </div>
503
- </div>
504
- </section>
505
-
506
- <section class="brand-colors">
507
- <div class="container">
508
- <h2 class="section-title">Brand Palette</h2>
509
- <div class="colors-grid">
510
- <div class="color-swatch">
511
- <div class="color-circle color-1"></div>
512
- <div class="color-name">Light Teal</div>
513
- <div class="color-hex">#9CDCD9</div>
514
- </div>
515
- <div class="color-swatch">
516
- <div class="color-circle color-2"></div>
517
- <div class="color-name">Bright Cyan</div>
518
- <div class="color-hex">#00AEC7</div>
519
- </div>
520
- <div class="color-swatch">
521
- <div class="color-circle color-3"></div>
522
- <div class="color-name">Purple</div>
523
- <div class="color-hex">#8246AF</div>
524
- </div>
525
- <div class="color-swatch">
526
- <div class="color-circle color-4"></div>
527
- <div class="color-name">Dark Purple</div>
528
- <div class="color-hex">#653165</div>
529
- </div>
530
- <div class="color-swatch">
531
- <div class="color-circle color-5"></div>
532
- <div class="color-name">Navy</div>
533
- <div class="color-hex">#005587</div>
534
- </div>
535
- </div>
536
- </div>
537
- </section>
538
-
539
- <section class="typography">
540
- <div class="container">
541
- <h2 class="section-title">Tipografia Lexend</h2>
542
- <div class="type-example">
543
- <div class="lexend-thin">Lexend Thin - Eleganza e leggerezza</div>
544
- </div>
545
- <div class="type-example">
546
- <div class="lexend-light">Lexend Light - Chiarezza ottimale</div>
547
- </div>
548
- <div class="type-example">
549
- <div class="lexend-regular">Lexend Regular - Testo standard leggibile</div>
550
- </div>
551
- <div class="type-example">
552
- <div class="lexend-medium">Lexend Medium - Enfasi equilibrata</div>
553
- </div>
554
- <div class="type-example">
555
- <div class="lexend-semibold">Lexend Semibold - Importanza marcata</div>
556
- </div>
557
- <div class="type-example">
558
- <div class="lexend-black">Lexend Black - Impatto Massimo</div>
559
- </div>
560
- </div>
561
- </section>
562
-
563
- <footer>
564
- <div class="footer-content">
565
- <h3 class="footer-title">Memori & AIsuru</h3>
566
- <p>Innovazione, design e tecnologia in perfetta armonia secondo le linee guida del brand.</p>
567
- <p style="margin-top: 2rem; opacity: 0.7; font-size: 0.9rem;">
568
- Rispettando le dimensioni minime (12mm), palette colori PMS, tipografia Lexend e area di rispetto del brandbook.
569
- </p>
570
- </div>
571
- </footer>
572
- </body>
573
- </html>
574
- </output>
575
- `;
576
- const htmlArtifactScrollTest = `<output class="memori-artifact" data-mimetype="html" data-title="Tall Content Scroll Test">
577
- <!DOCTYPE html>
14
+ const HTML_ARTIFACT_CONTENT = `<!DOCTYPE html>
578
15
  <html lang="en">
579
- <head>
580
- <meta charset="UTF-8" />
581
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
582
- <title>Scroll Test</title>
583
- <style>
584
- body {
585
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
586
- margin: 0;
587
- padding: 0;
588
- background: #f0f4f8;
589
- color: #1f2933;
590
- line-height: 1.6;
591
- }
592
-
593
- .hero {
594
- padding: 32px;
595
- text-align: center;
596
- background: linear-gradient(135deg, #2563eb, #7c3aed);
597
- color: #fff;
598
- }
599
-
600
- .hero h1 {
601
- margin: 0 0 12px;
602
- font-size: 2.5rem;
603
- }
604
-
605
- .section {
606
- padding: 32px;
607
- background: #fff;
608
- margin: 16px;
609
- border-radius: .5rem;
610
- box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
611
- }
612
-
613
- .section h2 {
614
- margin-top: 0;
615
- color: #2563eb;
616
- }
617
-
618
- .cards {
619
- display: grid;
620
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
621
- gap: 16px;
622
- margin-top: 24px;
623
- }
624
-
625
- .card {
626
- padding: 16px;
627
- border-radius: .5rem;
628
- background: #eef2ff;
629
- border: 1px solid #c7d2fe;
630
- }
631
-
632
- footer {
633
- text-align: center;
634
- padding: 32px;
635
- color: #94a3b8;
636
- }
637
- </style>
638
- </head>
639
- <body>
640
- <div class="hero">
641
- <h1>Scroll Test Page</h1>
642
- <p>Before the fix this iframe overflow forced the container to scroll.</p>
643
- </div>
644
- ${Array.from({ length: 6 })
645
- .map(
646
- (_, idx) => `
647
- <section class="section">
648
- <h2>Section ${idx + 1}</h2>
649
- <p>
650
- This is tall content block ${idx + 1}. It exists purely to make the page taller than the
651
- drawer viewport so we can ensure the iframe owns the scrollable area.
652
- </p>
653
- <div class="cards">
654
- <div class="card">
655
- <strong>Metric A</strong>
656
- <p>${(idx + 1) * 120} units</p>
657
- </div>
658
- <div class="card">
659
- <strong>Metric B</strong>
660
- <p>${(idx + 1) * 45}%</p>
661
- </div>
662
- <div class="card">
663
- <strong>Metric C</strong>
664
- <p>${(idx + 1) * 300} pts</p>
665
- </div>
666
- </div>
667
- </section>`
668
- )
669
- .join('')}
670
- <footer>End of scroll test content</footer>
671
- </body>
672
- </html>
673
- </output>`;
674
-
675
- const svgArtifact = `<output class="memori-artifact" data-mimetype="svg">
676
- <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
677
- <defs>
678
- <!-- Gradiente per il quadrato -->
679
- <linearGradient id="squareGradient" x1="0%" y1="0%" x2="100%" y2="100%">
680
- <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
681
- <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
682
- </linearGradient>
683
-
684
- <!-- Ombra -->
685
- <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
686
- <feDropShadow dx="3" dy="3" stdDeviation="3" flood-opacity="0.3"/>
687
- </filter>
688
-
689
- <!-- Effetto glow -->
690
- <filter id="glow">
691
- <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
692
- <feMerge>
693
- <feMergeNode in="coloredBlur"/>
694
- <feMergeNode in="SourceGraphic"/>
695
- </feMerge>
696
- </filter>
697
- </defs>
698
-
699
- <!-- Sfondo -->
700
- <rect width="200" height="200" fill="#f8f9fa"/>
701
-
702
- <!-- Quadrato principale -->
703
- <rect x="50" y="50" width="100" height="100"
704
- fill="url(#squareGradient)"
705
- stroke="rgba(255,255,255,0.3)"
706
- stroke-width="2"
707
- rx="8"
708
- filter="url(#shadow)"
709
- opacity="0">
710
-
711
- <!-- Animazione fade in -->
712
- <animate attributeName="opacity"
713
- values="0;1"
714
- dur="1s"
715
- fill="freeze"/>
716
-
717
- <!-- Animazione rotazione -->
718
- <animateTransform
719
- attributeName="transform"
720
- attributeType="XML"
721
- type="rotate"
722
- values="0 100 100;5 100 100;-5 100 100;0 100 100"
723
- dur="3s"
724
- repeatCount="indefinite"/>
725
- </rect>
726
-
727
- <!-- Quadrato interno decorativo -->
728
- <rect x="75" y="75" width="50" height="50"
729
- fill="rgba(255,255,255,0.2)"
730
- rx="4"
731
- opacity="0">
732
-
733
- <animate attributeName="opacity"
734
- values="0;0.6;0"
735
- dur="2s"
736
- repeatCount="indefinite"/>
737
- </rect>
738
-
739
- <!-- Particelle decorative -->
740
- <circle cx="60" cy="60" r="2" fill="#FFD700" opacity="0">
741
- <animate attributeName="opacity" values="0;1;0" dur="1.5s" repeatCount="indefinite"/>
742
- </circle>
743
-
744
- <circle cx="140" cy="140" r="1.5" fill="#FF6B6B" opacity="0">
745
- <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" begin="0.5s"/>
746
- </circle>
747
-
748
- <circle cx="140" cy="60" r="1" fill="#4ECDC4" opacity="0">
749
- <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite" begin="1s"/>
750
- </circle>
751
-
752
- <!-- Testo centrale -->
753
- <text x="100" y="105"
754
- text-anchor="middle"
755
- fill="white"
756
- font-family="system-ui, sans-serif"
757
- font-size="14"
758
- font-weight="bold"
759
- opacity="0">
760
- SVG
761
- <animate attributeName="opacity" values="0;1" dur="1.5s" fill="freeze" begin="0.5s"/>
762
- </text>
763
- </svg>
764
- </output>`;
765
-
766
- const markdownArtifact = `<output class="memori-artifact" data-mimetype="markdown">
767
- # Project Documentation
768
-
769
- ## Overview
770
- This is a comprehensive guide for the project.
771
-
772
- ## Features
773
- - **Easy to use**: Simple interface
774
- - **Fast**: Optimized performance
775
- - **Reliable**: Well tested
776
-
777
- ## Getting Started
778
- 1. Install dependencies
779
- 2. Run the application
780
- 3. Open your browser
781
-
782
- ## Code Example
783
- \`\`\`javascript
784
- function hello() {
785
- console.log("Hello World!");
786
- }
787
- \`\`\`
788
-
789
- ## Conclusion
790
- This project helps you build amazing applications.
791
- </output>`;
792
-
793
- const markdownCustomArtifact = `<output class="memori-artifact" data-mimetype="markdown" data-title="CUSTOM_MARKDOWN_TEST.md">
794
- # Custom Markdown Rendering Test
795
-
796
- ## Text formatting
797
- Use **bold**, *italic*, and \`inline code\` in the same sentence.
798
-
799
- ## Checklist
800
- - [x] Parse headings
801
- - [x] Render lists
802
- - [ ] Verify custom table support
803
-
804
- ## Table
805
- | Feature | Expected |
806
- | --- | --- |
807
- | Link rendering | Opens in a new tab |
808
- | Code block | Preserves indentation |
809
- | Blockquote | Styled correctly |
810
-
811
- ## Blockquote
812
- > This is a quoted note to verify markdown styling in preview mode.
813
-
814
- ## Code block
815
- \`\`\`ts
816
- type User = {
817
- id: string;
818
- name: string;
819
- active: boolean;
820
- };
821
-
822
- const toLabel = (user: User) => \`\${user.name} (\${user.id})\`;
823
- \`\`\`
824
-
825
- ## Links
826
- - [Memori website](https://memori.ai)
827
- - [Example docs](https://example.com/docs)
828
- </output>`;
829
-
830
- const cssArtifact = `<output class="memori-artifact" data-mimetype="css">
831
- /* Modern CSS Grid Layout */
832
- .container {
833
- display: grid;
834
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
835
- gap: 20px;
836
- padding: 20px;
837
- max-width: 1200px;
838
- margin: 0 auto;
839
- }
840
-
841
- .card {
842
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
843
- border-radius: .5rem;
844
- padding: 20px;
845
- color: white;
846
- box-shadow: 0 4px 20px rgba(0,0,0,0.1);
847
- transition: transform 0.3s ease;
848
- }
849
-
850
- .card:hover {
851
- transform: translateY(-5px);
852
- box-shadow: 0 8px 30px rgba(0,0,0,0.2);
853
- }
854
-
855
- .card h3 {
856
- margin-top: 0;
857
- font-size: 1.5em;
858
- }
859
-
860
- .card p {
861
- line-height: 1.6;
862
- opacity: 0.9;
863
- }
864
-
865
- @media (max-width: 768px) {
866
- .container {
867
- grid-template-columns: 1fr;
868
- padding: 10px;
869
- }
870
- }
871
- </output>`;
872
-
873
- const javascriptArtifact = `<output class="memori-artifact" data-mimetype="javascript">
874
- // Interactive Todo List Application
875
- class TodoApp {
876
- constructor() {
877
- this.todos = [];
878
- this.init();
879
- }
880
-
881
- init() {
882
- this.createHTML();
883
- this.bindEvents();
884
- }
885
-
886
- createHTML() {
887
- const app = document.getElementById('app');
888
- app.innerHTML = \`
889
- <div class="todo-app">
890
- <h1>My Todo List</h1>
891
- <div class="input-section">
892
- <input type="text" id="todoInput" placeholder="Add a new todo...">
893
- <button id="addBtn">Add</button>
894
- </div>
895
- <ul id="todoList"></ul>
896
- </div>
897
- \`;
898
- }
899
-
900
- bindEvents() {
901
- document.getElementById('addBtn').addEventListener('click', () => this.addTodo());
902
- document.getElementById('todoInput').addEventListener('keypress', (e) => {
903
- if (e.key === 'Enter') this.addTodo();
904
- });
16
+ <head>
17
+ <meta charset="UTF-8">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ <title>Product Dashboard</title>
20
+ <style>
21
+ * { box-sizing: border-box; }
22
+ body {
23
+ margin: 0;
24
+ padding: 24px;
25
+ font-family: system-ui, -apple-system, sans-serif;
26
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
27
+ color: #0f172a;
905
28
  }
906
-
907
- addTodo() {
908
- const input = document.getElementById('todoInput');
909
- const text = input.value.trim();
910
-
911
- if (text) {
912
- const todo = {
913
- id: Date.now(),
914
- text: text,
915
- completed: false
916
- };
917
-
918
- this.todos.push(todo);
919
- this.renderTodos();
920
- input.value = '';
921
- }
29
+ .grid {
30
+ display: grid;
31
+ grid-template-columns: repeat(2, minmax(0, 1fr));
32
+ gap: 16px;
922
33
  }
923
-
924
- toggleTodo(id) {
925
- const todo = this.todos.find(t => t.id === id);
926
- if (todo) {
927
- todo.completed = !todo.completed;
928
- this.renderTodos();
929
- }
34
+ .card {
35
+ background: #fff;
36
+ border-radius: 12px;
37
+ padding: 20px;
38
+ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
930
39
  }
931
-
932
- deleteTodo(id) {
933
- this.todos = this.todos.filter(t => t.id !== id);
934
- this.renderTodos();
40
+ .metric {
41
+ font-size: 28px;
42
+ font-weight: 700;
43
+ margin: 8px 0 0;
935
44
  }
936
-
937
- renderTodos() {
938
- const list = document.getElementById('todoList');
939
- list.innerHTML = this.todos.map(todo => \`
940
- <li class="todo-item \${todo.completed ? 'completed' : ''}">
941
- <span onclick="app.toggleTodo(\${todo.id})">\${todo.text}</span>
942
- <button onclick="app.deleteTodo(\${todo.id})">Delete</button>
943
- </li>
944
- \`).join('');
45
+ .label {
46
+ color: #64748b;
47
+ font-size: 13px;
48
+ text-transform: uppercase;
49
+ letter-spacing: 0.04em;
945
50
  }
946
- }
947
-
948
- // Initialize the app
949
- const app = new TodoApp();
950
- </output>`;
951
-
952
- const jsonArtifact = `<output class="memori-artifact" data-mimetype="json">
953
- {
954
- "name": "user-profile-api",
955
- "version": "1.0.0",
956
- "description": "REST API for user profile management",
957
- "main": "server.js",
958
- "scripts": {
959
- "start": "node server.js",
960
- "dev": "nodemon server.js",
961
- "test": "jest",
962
- "build": "webpack --mode production"
963
- },
964
- "dependencies": {
965
- "express": "^4.18.0",
966
- "mongoose": "^6.0.0",
967
- "bcryptjs": "^2.4.3",
968
- "jsonwebtoken": "^8.5.1",
969
- "cors": "^2.8.5",
970
- "helmet": "^5.0.0",
971
- "morgan": "^1.10.0",
972
- "express-rate-limit": "^6.0.0"
973
- },
974
- "devDependencies": {
975
- "nodemon": "^2.0.15",
976
- "jest": "^27.5.1",
977
- "supertest": "^6.2.2"
978
- },
979
- "engines": {
980
- "node": ">=14.0.0"
981
- },
982
- "repository": {
983
- "type": "git",
984
- "url": "https://github.com/example/user-profile-api.git"
985
- },
986
- "keywords": ["api", "express", "mongodb", "authentication", "rest"],
987
- "author": "Your Name",
988
- "license": "MIT"
989
- }
990
- </output>`;
991
-
992
- // Stories
993
- export const HTMLArtifact: Story = {
994
- args: {},
995
- render: () => (
996
- <Chat
997
- memori={mockMemori}
998
- tenant={mockTenant}
999
- sessionID="test-session"
1000
- history={[
1001
- {
1002
- text: `Here's a complete HTML page for your landing page:
1003
-
1004
- ${htmlArtifact}
1005
-
1006
- This page includes modern styling and an interactive button. You can customize the colors and layout as needed.`,
1007
- fromUser: false,
1008
- timestamp: new Date().toISOString(),
1009
- },
1010
- {
1011
- text: 'Try the sanitizeText function',
1012
- fromUser: false,
1013
- timestamp: new Date().toISOString(),
1014
- },
1015
- {
1016
- text: sanitizeText(htmlArtifact),
1017
- fromUser: false,
1018
- timestamp: new Date().toISOString(),
1019
- },
1020
- ]}
1021
- pushMessage={mockPushMessage}
1022
- simulateUserPrompt={mockSimulateUserPrompt}
1023
- onChangeUserMessage={mockOnChangeUserMessage}
1024
- sendMessage={mockSendMessage}
1025
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1026
- stopAudio={mockStopAudio}
1027
- startListening={mockStartListening}
1028
- stopListening={mockStopListening}
1029
- setSendOnEnter={mockSetSendOnEnter}
1030
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1031
- showInputs={false}
1032
- isChatlogPanel={true}
1033
- showReasoning={true}
1034
- />
1035
- ),
1036
- };
1037
-
1038
- export const HTMLArtifactWithScrolling: Story = {
1039
- args: {},
1040
- render: () => (
1041
- <Chat
1042
- memori={mockMemori}
1043
- tenant={mockTenant}
1044
- sessionID="test-session"
1045
- history={[
1046
- {
1047
- text: `Here's a complete HTML page for your landing page:
1048
-
1049
- ${htmlArtifactWithScrolling}
1050
-
1051
- This page includes modern styling and an interactive button. You can customize the colors and layout as needed.`,
1052
- fromUser: false,
1053
- timestamp: new Date().toISOString(),
1054
- },
1055
- {
1056
- text: 'Try the sanitizeText function',
1057
- fromUser: false,
1058
- timestamp: new Date().toISOString(),
1059
- },
1060
- {
1061
- text: sanitizeText(htmlArtifactWithScrolling),
1062
- fromUser: false,
1063
- timestamp: new Date().toISOString(),
1064
- },
1065
- ]}
1066
- pushMessage={mockPushMessage}
1067
- simulateUserPrompt={mockSimulateUserPrompt}
1068
- onChangeUserMessage={mockOnChangeUserMessage}
1069
- sendMessage={mockSendMessage}
1070
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1071
- stopAudio={mockStopAudio}
1072
- startListening={mockStartListening}
1073
- stopListening={mockStopListening}
1074
- setSendOnEnter={mockSetSendOnEnter}
1075
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1076
- showInputs={false}
1077
- isChatlogPanel={false}
1078
- showReasoning={true}
1079
- />
1080
- ),
1081
- };
1082
-
1083
- export const HTMLScrollTest: Story = {
1084
- args: {},
1085
- render: () => (
1086
- <Chat
1087
- memori={mockMemori}
1088
- tenant={mockTenant}
1089
- sessionID="test-session"
1090
- history={[
1091
- {
1092
- text: `Here's a deliberately tall HTML artifact to validate iframe scrolling:
1093
-
1094
- ${htmlArtifactScrollTest}
1095
-
1096
- Scroll inside the preview to confirm only the iframe scrolls.`,
1097
- fromUser: false,
1098
- timestamp: new Date().toISOString(),
1099
- },
1100
- ]}
1101
- pushMessage={mockPushMessage}
1102
- simulateUserPrompt={mockSimulateUserPrompt}
1103
- onChangeUserMessage={mockOnChangeUserMessage}
1104
- sendMessage={mockSendMessage}
1105
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1106
- stopAudio={mockStopAudio}
1107
- startListening={mockStartListening}
1108
- stopListening={mockStopListening}
1109
- setSendOnEnter={mockSetSendOnEnter}
1110
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1111
- showInputs={false}
1112
- isChatlogPanel={false}
1113
- showReasoning={false}
1114
- />
1115
- ),
1116
- };
1117
-
1118
- export const MarkdownDocumentation: Story = {
1119
- args: {},
1120
- render: () => (
1121
- <Chat
1122
- memori={mockMemori}
1123
- tenant={mockTenant}
1124
- sessionID="test-session"
1125
- history={[
1126
- {
1127
- text: `I've created comprehensive project documentation for you:
1128
-
1129
- ${markdownArtifact}
1130
-
1131
- This includes all the essential sections for a project README with proper formatting and structure.`,
1132
- fromUser: false,
1133
- timestamp: new Date().toISOString(),
1134
- },
1135
- ]}
1136
- pushMessage={mockPushMessage}
1137
- simulateUserPrompt={mockSimulateUserPrompt}
1138
- onChangeUserMessage={mockOnChangeUserMessage}
1139
- sendMessage={mockSendMessage}
1140
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1141
- stopAudio={mockStopAudio}
1142
- startListening={mockStartListening}
1143
- stopListening={mockStopListening}
1144
- setSendOnEnter={mockSetSendOnEnter}
1145
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1146
- showInputs={false}
1147
- isChatlogPanel={false}
1148
- />
1149
- ),
1150
- };
1151
-
1152
- export const MarkdownCustomRendering: Story = {
1153
- args: {},
1154
- render: () => (
1155
- <Chat
1156
- memori={mockMemori}
1157
- tenant={mockTenant}
1158
- sessionID="test-session"
1159
- history={[
1160
- {
1161
- text: `I generated a custom markdown artifact to validate rendering behavior:
1162
-
1163
- ${markdownCustomArtifact}
1164
-
1165
- Please check preview and code tabs to verify the output.`,
1166
- fromUser: false,
1167
- timestamp: new Date().toISOString(),
1168
- },
1169
- ]}
1170
- pushMessage={mockPushMessage}
1171
- simulateUserPrompt={mockSimulateUserPrompt}
1172
- onChangeUserMessage={mockOnChangeUserMessage}
1173
- sendMessage={mockSendMessage}
1174
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1175
- stopAudio={mockStopAudio}
1176
- startListening={mockStartListening}
1177
- stopListening={mockStopListening}
1178
- setSendOnEnter={mockSetSendOnEnter}
1179
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1180
- showInputs={false}
1181
- isChatlogPanel={false}
1182
- />
1183
- ),
1184
- };
1185
-
1186
- export const CSSStyles: Story = {
1187
- args: {},
1188
- render: () => (
1189
- <Chat
1190
- memori={mockMemori}
1191
- tenant={mockTenant}
1192
- sessionID="test-session"
1193
- history={[
1194
- {
1195
- text: `I've created modern CSS styles for your project:
1196
-
1197
- ${cssArtifact}
1198
-
1199
- This includes responsive grid layouts, smooth animations, and contemporary styling.`,
1200
- fromUser: false,
1201
- timestamp: new Date().toISOString(),
1202
- },
1203
- ]}
1204
- pushMessage={mockPushMessage}
1205
- simulateUserPrompt={mockSimulateUserPrompt}
1206
- onChangeUserMessage={mockOnChangeUserMessage}
1207
- sendMessage={mockSendMessage}
1208
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1209
- stopAudio={mockStopAudio}
1210
- startListening={mockStartListening}
1211
- stopListening={mockStopListening}
1212
- setSendOnEnter={mockSetSendOnEnter}
1213
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1214
- showInputs={false}
1215
- isChatlogPanel={false}
1216
- />
1217
- ),
1218
- };
1219
-
1220
- export const JavaScriptApp: Story = {
1221
- args: {},
1222
- render: () => (
1223
- <Chat
1224
- memori={mockMemori}
1225
- tenant={mockTenant}
1226
- sessionID="test-session"
1227
- history={[
1228
- {
1229
- text: `I've built a complete Todo List application in JavaScript:
1230
-
1231
- ${javascriptArtifact}
1232
-
1233
- This includes full CRUD functionality with a clean class-based architecture.`,
1234
- fromUser: false,
1235
- timestamp: new Date().toISOString(),
1236
- },
1237
- ]}
1238
- pushMessage={mockPushMessage}
1239
- simulateUserPrompt={mockSimulateUserPrompt}
1240
- onChangeUserMessage={mockOnChangeUserMessage}
1241
- sendMessage={mockSendMessage}
1242
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1243
- stopAudio={mockStopAudio}
1244
- startListening={mockStartListening}
1245
- stopListening={mockStopListening}
1246
- setSendOnEnter={mockSetSendOnEnter}
1247
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1248
- showInputs={false}
1249
- isChatlogPanel={false}
1250
- />
1251
- ),
1252
- };
1253
-
1254
- export const JSONConfiguration: Story = {
1255
- args: {},
1256
- render: () => (
1257
- <Chat
1258
- memori={mockMemori}
1259
- tenant={mockTenant}
1260
- sessionID="test-session"
1261
- history={[
1262
- {
1263
- text: `Here's a complete package.json configuration for your API project:
1264
-
1265
- ${jsonArtifact}
1266
-
1267
- This includes all necessary dependencies, scripts, and metadata for a production-ready Node.js API.`,
1268
- fromUser: false,
1269
- timestamp: new Date().toISOString(),
1270
- },
1271
- ]}
1272
- pushMessage={mockPushMessage}
1273
- simulateUserPrompt={mockSimulateUserPrompt}
1274
- onChangeUserMessage={mockOnChangeUserMessage}
1275
- sendMessage={mockSendMessage}
1276
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1277
- stopAudio={mockStopAudio}
1278
- startListening={mockStartListening}
1279
- stopListening={mockStopListening}
1280
- setSendOnEnter={mockSetSendOnEnter}
1281
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1282
- showInputs={false}
1283
- isChatlogPanel={false}
1284
- />
1285
- ),
1286
- };
1287
-
1288
- export const MultipleArtifacts: Story = {
1289
- args: {},
1290
- render: () => (
1291
- <Chat
1292
- memori={mockMemori}
1293
- tenant={mockTenant}
1294
- sessionID="test-session"
1295
- history={[
1296
- {
1297
- text: `I'll create both the HTML structure and CSS styling for your dashboard:
1298
-
1299
- ${htmlArtifact}
1300
-
1301
- ${cssArtifact}
1302
-
1303
- This combination gives you a complete, styled web page ready for deployment.`,
1304
- fromUser: false,
1305
- timestamp: new Date().toISOString(),
1306
- },
1307
- ]}
1308
- pushMessage={mockPushMessage}
1309
- simulateUserPrompt={mockSimulateUserPrompt}
1310
- onChangeUserMessage={mockOnChangeUserMessage}
1311
- sendMessage={mockSendMessage}
1312
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1313
- stopAudio={mockStopAudio}
1314
- startListening={mockStartListening}
1315
- stopListening={mockStopListening}
1316
- setSendOnEnter={mockSetSendOnEnter}
1317
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1318
- showInputs={false}
1319
- isChatlogPanel={false}
1320
- />
1321
- ),
1322
- };
1323
-
1324
- export const ThreeArtifactsInOneMessage: Story = {
1325
- args: {},
1326
- render: () => (
1327
- <Chat
1328
- memori={mockMemori}
1329
- tenant={mockTenant}
1330
- sessionID="test-session"
1331
- history={[
1332
- {
1333
- text: `I'll create a complete web component for you with HTML, CSS, and JavaScript:
1334
-
1335
- <output class="memori-artifact" data-mimetype="html" data-title="Dashboard Component">
1336
- <!DOCTYPE html>
1337
- <html lang="en">
1338
- <head>
1339
- <meta charset="UTF-8">
1340
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
1341
- <title>Dashboard</title>
51
+ h1 { margin-top: 0; font-size: 22px; }
52
+ </style>
1342
53
  </head>
1343
54
  <body>
1344
- <div id="dashboard" class="dashboard-container">
1345
- <h1>Sales Dashboard</h1>
1346
- <div class="stats-grid">
1347
- <div class="stat-card">
1348
- <h3>Revenue</h3>
1349
- <p id="revenue">$0</p>
1350
- </div>
1351
- <div class="stat-card">
1352
- <h3>Customers</h3>
1353
- <p id="customers">0</p>
1354
- </div>
1355
- <div class="stat-card">
1356
- <h3>Growth</h3>
1357
- <p id="growth">0%</p>
1358
- </div>
55
+ <h1>Product Dashboard</h1>
56
+ <p>Interactive HTML artifact shown in the side drawer panel.</p>
57
+ <div class="grid">
58
+ <div class="card">
59
+ <div class="label">Active users</div>
60
+ <div class="metric">12,480</div>
61
+ </div>
62
+ <div class="card">
63
+ <div class="label">Conversion</div>
64
+ <div class="metric">4.8%</div>
65
+ </div>
66
+ <div class="card">
67
+ <div class="label">Revenue</div>
68
+ <div class="metric">€84,200</div>
69
+ </div>
70
+ <div class="card">
71
+ <div class="label">Support tickets</div>
72
+ <div class="metric">37</div>
1359
73
  </div>
1360
74
  </div>
1361
75
  </body>
1362
- </html>
1363
- </output>
76
+ </html>`;
1364
77
 
1365
- <output class="memori-artifact" data-mimetype="css" data-title="Dashboard Styles">
1366
- /* Dashboard Styles */
1367
- .dashboard-container {
1368
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1369
- max-width: 1200px;
1370
- margin: 0 auto;
1371
- padding: 40px 20px;
1372
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1373
- min-height: 100vh;
1374
- }
78
+ const MARKDOWN_ARTIFACT_CONTENT = `# Weekly Report
1375
79
 
1376
- h1 {
1377
- color: white;
1378
- text-align: center;
1379
- font-size: 2.5rem;
1380
- margin-bottom: 40px;
1381
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
1382
- }
80
+ This artifact expands **inline in the chat log** instead of opening the side drawer.
1383
81
 
1384
- .stats-grid {
1385
- display: grid;
1386
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1387
- gap: 24px;
1388
- margin-top: 30px;
1389
- }
82
+ ## Highlights
1390
83
 
1391
- .stat-card {
1392
- background: white;
1393
- border-radius: .5rem;
1394
- padding: 32px;
1395
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
1396
- transition: transform 0.3s ease, box-shadow 0.3s ease;
1397
- text-align: center;
1398
- }
84
+ | Metric | Value | Change |
85
+ |--------|-------|--------|
86
+ | Sessions | 18,420 | +12% |
87
+ | Avg. response time | 1.4s | -8% |
88
+ | Satisfaction | 4.7/5 | +0.2 |
1399
89
 
1400
- .stat-card:hover {
1401
- transform: translateY(-8px);
1402
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
1403
- }
90
+ ## Next steps
1404
91
 
1405
- .stat-card h3 {
1406
- color: #667eea;
1407
- font-size: 1.2rem;
1408
- margin-bottom: 16px;
1409
- font-weight: 600;
1410
- text-transform: uppercase;
1411
- letter-spacing: 1px;
1412
- }
92
+ - Review artifact preview and code tabs
93
+ - Try copy, download, and print actions
94
+ - Collapse the panel with the artifact handler button
1413
95
 
1414
- .stat-card p {
1415
- color: #333;
1416
- font-size: 2.5rem;
1417
- font-weight: bold;
1418
- margin: 0;
96
+ \`\`\`typescript
97
+ export function summarize(report: WeeklyReport) {
98
+ return report.highlights.map(item => item.title).join(', ');
1419
99
  }
1420
- </output>
1421
-
1422
- <output class="memori-artifact" data-mimetype="javascript" data-title="Dashboard Logic">
1423
- // Dashboard Data Management
1424
- class Dashboard {
1425
- constructor() {
1426
- this.data = {
1427
- revenue: 0,
1428
- customers: 0,
1429
- growth: 0
1430
- };
1431
- this.init();
1432
- }
1433
-
1434
- init() {
1435
- // Simulate loading data
1436
- this.loadData();
1437
-
1438
- // Update every 5 seconds
1439
- setInterval(() => this.updateData(), 5000);
1440
- }
1441
-
1442
- loadData() {
1443
- // Simulate API call
1444
- this.data = {
1445
- revenue: 124500,
1446
- customers: 1234,
1447
- growth: 23.5
1448
- };
1449
- this.render();
1450
- }
100
+ \`\`\`
101
+ `;
1451
102
 
1452
- updateData() {
1453
- // Simulate real-time updates
1454
- this.data.revenue += Math.floor(Math.random() * 1000);
1455
- this.data.customers += Math.floor(Math.random() * 10);
1456
- this.data.growth += (Math.random() - 0.5) * 2;
1457
- this.render();
1458
- }
103
+ const wrapArtifactTag = (
104
+ content: string,
105
+ mimeType: string,
106
+ title: string
107
+ ): string =>
108
+ `<output class="memori-artifact" data-mimetype="${mimeType}" data-title="${title}">${content}</output>`;
109
+
110
+ const createArtifactMessage = (
111
+ content: string,
112
+ mimeType: string,
113
+ title: string,
114
+ timestamp: string
115
+ ): Message => ({
116
+ text: wrapArtifactTag(content, mimeType, title),
117
+ fromUser: false,
118
+ timestamp,
119
+ generatedByAI: true,
120
+ });
121
+
122
+ const htmlArtifactMessage = createArtifactMessage(
123
+ HTML_ARTIFACT_CONTENT,
124
+ 'html',
125
+ 'Product Dashboard',
126
+ '2026-05-27T10:00:00.000Z'
127
+ );
1459
128
 
1460
- render() {
1461
- const revenueEl = document.getElementById('revenue');
1462
- const customersEl = document.getElementById('customers');
1463
- const growthEl = document.getElementById('growth');
129
+ const markdownArtifactMessage = createArtifactMessage(
130
+ MARKDOWN_ARTIFACT_CONTENT,
131
+ 'markdown',
132
+ 'Weekly Report',
133
+ '2026-05-27T11:00:00.000Z'
134
+ );
1464
135
 
1465
- if (revenueEl) {
1466
- revenueEl.textContent = '$' + this.data.revenue.toLocaleString();
1467
- }
1468
-
1469
- if (customersEl) {
1470
- customersEl.textContent = this.data.customers.toLocaleString();
1471
- }
1472
-
1473
- if (growthEl) {
1474
- growthEl.textContent = '+' + this.data.growth.toFixed(1) + '%';
1475
- }
1476
- }
1477
- }
136
+ const StoryProviders: React.FC<{ children: React.ReactNode }> = ({
137
+ children,
138
+ }) => (
139
+ <I18nWrapper>
140
+ <AlertProvider defaultDuration={5000}>
141
+ <ArtifactProvider>{children}</ArtifactProvider>
142
+ </AlertProvider>
143
+ </I18nWrapper>
144
+ );
1478
145
 
1479
- // Initialize when DOM is ready
1480
- if (document.readyState === 'loading') {
1481
- document.addEventListener('DOMContentLoaded', () => {
1482
- new Dashboard();
1483
- });
1484
- } else {
1485
- new Dashboard();
1486
- }
1487
- </output>
146
+ const OpenArtifactOnMount: React.FC<{
147
+ artifact: ArtifactData;
148
+ isChatLogPanel?: boolean;
149
+ }> = ({ artifact, isChatLogPanel = false }) => {
150
+ const { openArtifact } = useArtifact();
1488
151
 
1489
- Each artifact serves a specific purpose:
1490
- - **HTML**: The structure and content
1491
- - **CSS**: Beautiful styling with gradients and animations
1492
- - **JavaScript**: Interactive data management and updates
152
+ useEffect(() => {
153
+ openArtifact(artifact, { isChatLogPanel });
154
+ }, [artifact, isChatLogPanel, openArtifact]);
1493
155
 
1494
- You can click on each card to view and modify the code!`,
1495
- fromUser: false,
1496
- timestamp: new Date().toISOString(),
1497
- },
1498
- ]}
1499
- pushMessage={mockPushMessage}
1500
- simulateUserPrompt={mockSimulateUserPrompt}
1501
- onChangeUserMessage={mockOnChangeUserMessage}
1502
- sendMessage={mockSendMessage}
1503
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1504
- stopAudio={mockStopAudio}
1505
- startListening={mockStartListening}
1506
- stopListening={mockStopListening}
1507
- setSendOnEnter={mockSetSendOnEnter}
1508
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1509
- showInputs={false}
1510
- isChatlogPanel={false}
1511
- />
1512
- ),
156
+ return null;
1513
157
  };
1514
158
 
1515
- export const FiveArtifactsMixedTypes: Story = {
1516
- args: {},
1517
- render: () => (
1518
- <Chat
1519
- memori={mockMemori}
1520
- tenant={mockTenant}
1521
- sessionID="test-session"
1522
- history={[
1523
- {
1524
- text: `Here's a complete project setup with multiple files:
1525
-
1526
- <output class="memori-artifact" data-mimetype="html" data-title="index.html">
1527
- <!DOCTYPE html>
1528
- <html>
1529
- <head>
1530
- <title>My Project</title>
1531
- <link rel="stylesheet" href="styles.css">
1532
- </head>
1533
- <body>
1534
- <div id="app"></div>
1535
- <script src="app.js"></script>
1536
- </body>
1537
- </html>
1538
- </output>
1539
-
1540
- <output class="memori-artifact" data-mimetype="css" data-title="styles.css">
1541
- body {
1542
- margin: 0;
1543
- padding: 20px;
1544
- font-family: Arial, sans-serif;
1545
- background: #f5f5f5;
1546
- }
1547
-
1548
- #app {
1549
- max-width: 800px;
1550
- margin: 0 auto;
1551
- background: white;
1552
- padding: 30px;
1553
- border-radius: .5rem;
1554
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
1555
- }
1556
- </output>
159
+ const DrawerModeDemo: React.FC = () => (
160
+ <div
161
+ style={{
162
+ display: 'flex',
163
+ height: '100vh',
164
+ background: 'var(--memori-main-background)',
165
+ }}
166
+ >
167
+ <div
168
+ style={{
169
+ flex: 1,
170
+ minWidth: 0,
171
+ padding: '24px',
172
+ borderRight: '1px solid var(--memori-border-primary)',
173
+ overflow: 'auto',
174
+ }}
175
+ >
176
+ <p style={{ marginTop: 0, color: 'var(--memori-text-color)' }}>
177
+ Side-drawer mode: the artifact opens in a dedicated layout column while
178
+ the chat stays visible on the left.
179
+ </p>
180
+ <ArtifactHandler
181
+ isChatlogPanel={false}
182
+ message={htmlArtifactMessage}
183
+ />
184
+ </div>
185
+ <div style={{ width: '55%', minWidth: 360 }}>
186
+ <ArtifactDrawer isLayoutColumn />
187
+ </div>
188
+ </div>
189
+ );
1557
190
 
1558
- <output class="memori-artifact" data-mimetype="javascript" data-title="app.js">
1559
- const app = document.getElementById('app');
1560
- app.innerHTML = '<h1>Hello World!</h1>';
1561
- console.log('App initialized');
1562
- </output>
191
+ const ChatLogModeDemo: React.FC = () => {
192
+ const markdownArtifact: ArtifactData = {
193
+ id: 'storybook-chatlog-artifact',
194
+ content: MARKDOWN_ARTIFACT_CONTENT,
195
+ mimeType: 'markdown',
196
+ title: 'Weekly Report',
197
+ timestamp: new Date('2026-05-27T11:00:00.000Z'),
198
+ size: MARKDOWN_ARTIFACT_CONTENT.length,
199
+ };
200
+
201
+ return (
202
+ <div
203
+ style={{
204
+ maxWidth: 760,
205
+ margin: '0 auto',
206
+ padding: '24px',
207
+ background: 'var(--memori-main-background)',
208
+ minHeight: '100vh',
209
+ }}
210
+ >
211
+ <p style={{ marginTop: 0, color: 'var(--memori-text-color)' }}>
212
+ Chatlog mode: the artifact expands inline below the handler button inside
213
+ the conversation.
214
+ </p>
215
+ <OpenArtifactOnMount artifact={markdownArtifact} isChatLogPanel />
216
+ <ArtifactHandler
217
+ isChatlogPanel
218
+ message={markdownArtifactMessage}
219
+ />
220
+ </div>
221
+ );
222
+ };
1563
223
 
1564
- <output class="memori-artifact" data-mimetype="json" data-title="package.json">
1565
- {
1566
- "name": "my-project",
1567
- "version": "1.0.0",
1568
- "description": "A simple web project",
1569
- "main": "app.js",
1570
- "scripts": {
1571
- "start": "serve .",
1572
- "build": "webpack"
224
+ const meta: Meta = {
225
+ title: 'Artifact System/ArtifactDrawer',
226
+ parameters: {
227
+ layout: 'fullscreen',
1573
228
  },
1574
- "dependencies": {
1575
- "serve": "^14.0.0"
1576
- }
1577
- }
1578
- </output>
1579
-
1580
- <output class="memori-artifact" data-mimetype="markdown" data-title="README.md">
1581
- # My Project
1582
-
1583
- ## Overview
1584
- A simple web application starter template.
1585
-
1586
- ## Getting Started
1587
- 1. Install dependencies: \`npm install\`
1588
- 2. Start the server: \`npm start\`
1589
- 3. Open http://localhost:3000
1590
-
1591
- ## Features
1592
- - Clean HTML structure
1593
- - Modern CSS styling
1594
- - JavaScript functionality
1595
- - Package management with npm
1596
-
1597
- ## License
1598
- MIT
1599
- </output>
1600
-
1601
- All files are ready! You now have a complete project structure with HTML, CSS, JavaScript, configuration, and documentation.`,
1602
- fromUser: false,
1603
- timestamp: new Date().toISOString(),
1604
- },
1605
- ]}
1606
- pushMessage={mockPushMessage}
1607
- simulateUserPrompt={mockSimulateUserPrompt}
1608
- onChangeUserMessage={mockOnChangeUserMessage}
1609
- sendMessage={mockSendMessage}
1610
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1611
- stopAudio={mockStopAudio}
1612
- startListening={mockStartListening}
1613
- stopListening={mockStopListening}
1614
- setSendOnEnter={mockSetSendOnEnter}
1615
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1616
- showInputs={false}
1617
- isChatlogPanel={false}
1618
- />
1619
- ),
1620
229
  };
1621
230
 
1622
- export const SVGArtifact: Story = {
1623
- args: {},
1624
- render: () => (
1625
- <Chat
1626
- memori={mockMemori}
1627
- tenant={mockTenant}
1628
- sessionID="test-session"
1629
- history={[
1630
- {
1631
- text: `Here's a complete SVG artifact:
1632
-
1633
- ${svgArtifact}
231
+ export default meta;
1634
232
 
1635
- This SVG includes a simple circle with a red fill.`,
1636
- fromUser: false,
1637
- timestamp: new Date().toISOString(),
1638
- },
1639
- ]}
1640
- pushMessage={mockPushMessage}
1641
- simulateUserPrompt={mockSimulateUserPrompt}
1642
- onChangeUserMessage={mockOnChangeUserMessage}
1643
- sendMessage={mockSendMessage}
1644
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1645
- stopAudio={mockStopAudio}
1646
- startListening={mockStartListening}
1647
- stopListening={mockStopListening}
1648
- setSendOnEnter={mockSetSendOnEnter}
1649
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1650
- showInputs={false}
1651
- isChatlogPanel={false}
1652
- />
1653
- ),
1654
- };
233
+ type Story = StoryObj;
1655
234
 
1656
- export const ConversationFlow: Story = {
1657
- args: {},
235
+ export const DrawerMode: Story = {
1658
236
  render: () => (
1659
- <Chat
1660
- memori={mockMemori}
1661
- tenant={mockTenant}
1662
- sessionID="test-session"
1663
- history={[
1664
- {
1665
- text: 'Can you create a simple HTML page for me?',
1666
- fromUser: true,
1667
- timestamp: new Date(Date.now() - 300000).toISOString(),
1668
- },
1669
- {
1670
- text: `Of course! Here's a complete HTML page with modern styling:
1671
-
1672
- ${htmlArtifact}
1673
-
1674
- Would you like me to modify anything about the design or add more functionality?`,
1675
- fromUser: false,
1676
- timestamp: new Date(Date.now() - 240000).toISOString(),
1677
- },
1678
- {
1679
- text: 'Now can you create the CSS to make it look more modern?',
1680
- fromUser: true,
1681
- timestamp: new Date(Date.now() - 180000).toISOString(),
1682
- },
1683
- {
1684
- text: `Here's enhanced CSS with modern design patterns:
1685
-
1686
- ${cssArtifact}
1687
-
1688
- This adds responsive grid layouts, smooth animations, and contemporary styling.`,
1689
- fromUser: false,
1690
- timestamp: new Date(Date.now() - 120000).toISOString(),
1691
- },
1692
- ]}
1693
- pushMessage={mockPushMessage}
1694
- simulateUserPrompt={mockSimulateUserPrompt}
1695
- onChangeUserMessage={mockOnChangeUserMessage}
1696
- sendMessage={mockSendMessage}
1697
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1698
- stopAudio={mockStopAudio}
1699
- startListening={mockStartListening}
1700
- stopListening={mockStopListening}
1701
- setSendOnEnter={mockSetSendOnEnter}
1702
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1703
- showInputs={false}
1704
- isChatlogPanel={false}
1705
- />
237
+ <StoryProviders>
238
+ <DrawerModeDemo />
239
+ </StoryProviders>
1706
240
  ),
241
+ parameters: {
242
+ docs: {
243
+ description: {
244
+ story:
245
+ 'HTML artifact opened in side-drawer mode. The handler auto-opens the artifact in the layout column, matching FullPage and Chat layouts.',
246
+ },
247
+ },
248
+ },
1707
249
  };
1708
250
 
1709
- export const NoArtifacts: Story = {
1710
- args: {},
251
+ export const ChatLogMode: Story = {
1711
252
  render: () => (
1712
- <Chat
1713
- memori={mockMemori}
1714
- tenant={mockTenant}
1715
- sessionID="test-session"
1716
- history={[
1717
- {
1718
- text: 'Hello! How can I help you today?',
1719
- fromUser: false,
1720
- timestamp: new Date().toISOString(),
1721
- },
1722
- {
1723
- text: 'I need help with my project planning',
1724
- fromUser: true,
1725
- timestamp: new Date().toISOString(),
1726
- },
1727
- {
1728
- text: "I'd be happy to help with project planning! What type of project are you working on? Are you looking for help with timeline management, resource allocation, task breakdown, or something else?",
1729
- fromUser: false,
1730
- timestamp: new Date().toISOString(),
1731
- },
1732
- ]}
1733
- pushMessage={mockPushMessage}
1734
- simulateUserPrompt={mockSimulateUserPrompt}
1735
- onChangeUserMessage={mockOnChangeUserMessage}
1736
- sendMessage={mockSendMessage}
1737
- setEnableFocusChatInput={mockSetEnableFocusChatInput}
1738
- stopAudio={mockStopAudio}
1739
- startListening={mockStartListening}
1740
- stopListening={mockStopListening}
1741
- setSendOnEnter={mockSetSendOnEnter}
1742
- setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
1743
- showInputs={false}
1744
- isChatlogPanel={false}
1745
- />
253
+ <StoryProviders>
254
+ <ChatLogModeDemo />
255
+ </StoryProviders>
1746
256
  ),
1747
- };
1748
-
1749
- // ========================================
1750
- // ArtifactAPI Bridge Stories
1751
- // ========================================
1752
-
1753
- export const APIBridge_CreateSimpleArtifact: Story = {
1754
- args: {},
1755
- render: () => {
1756
- const TestComponent = () => {
1757
- const { state } = useArtifact();
1758
-
1759
- useEffect(() => {
1760
- // Wait a bit for the API to be available
1761
- setTimeout(() => {
1762
- console.log(
1763
- 'MemoriArtifactAPI available:',
1764
- !!window.MemoriArtifactAPI
1765
- );
1766
- }, 100);
1767
- }, []);
1768
-
1769
- const createHTMLArtifact = () => {
1770
- window.MemoriArtifactAPI?.createAndOpenArtifact(
1771
- '<h1>🎉 Created from API!</h1><p>This artifact was created using <code>window.MemoriArtifactAPI.createAndOpenArtifact()</code></p><p>You can use this API to create artifacts programmatically from any JavaScript code.</p>',
1772
- 'html',
1773
- 'API Test Artifact'
1774
- );
1775
- };
1776
-
1777
- const createMarkdownArtifact = () => {
1778
- window.MemoriArtifactAPI?.createAndOpenArtifact(
1779
- `# Artifact Created via API
1780
-
1781
- ## This is a test
1782
-
1783
- This artifact was created using the global API:
1784
-
1785
- \`\`\`javascript
1786
- window.MemoriArtifactAPI.createAndOpenArtifact(content, 'markdown', 'Title');
1787
- \`\`\`
1788
-
1789
- ### Features:
1790
- - ✅ Programmatic control
1791
- - ✅ Multiple MIME types
1792
- - ✅ Easy integration`,
1793
- 'markdown',
1794
- 'API Markdown Example'
1795
- );
1796
- };
1797
-
1798
- const createJavaScriptArtifact = () => {
1799
- window.MemoriArtifactAPI?.createAndOpenArtifact(
1800
- `// Example function created via API
1801
- function greet(name) {
1802
- console.log(\`Hello, \${name}!\`);
1803
- return \`Welcome, \${name}\`;
1804
- }
1805
-
1806
- // Call it
1807
- const message = greet('Developer');
1808
- console.log(message);`,
1809
- 'javascript',
1810
- 'JavaScript via API'
1811
- );
1812
- };
1813
-
1814
- const checkState = () => {
1815
- const state = window.MemoriArtifactAPI?.getState();
1816
- console.log('Current artifact state:', state);
1817
- alert(JSON.stringify(state, null, 2));
1818
- };
1819
-
1820
- return (
1821
- <>
1822
- {/* Conditionally render ArtifactDrawer to avoid hooks error */}
1823
- {state.isDrawerOpen && <ArtifactDrawer />}
1824
-
1825
- <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
1826
- <h1>🧪 Artifact API Test Lab</h1>
1827
- <p>
1828
- Test the global <code>window.MemoriArtifactAPI</code> by clicking
1829
- the buttons below. Open the browser console to see the API in
1830
- action.
1831
- </p>
1832
-
1833
- <div
1834
- style={{
1835
- display: 'flex',
1836
- flexDirection: 'column',
1837
- gap: '12px',
1838
- marginTop: '20px',
1839
- }}
1840
- >
1841
- <button
1842
- onClick={createHTMLArtifact}
1843
- style={{
1844
- padding: '12px 20px',
1845
- fontSize: '16px',
1846
- cursor: 'pointer',
1847
- backgroundColor: '#9333ea',
1848
- color: 'white',
1849
- border: 'none',
1850
- borderRadius: '8px',
1851
- }}
1852
- >
1853
- 📄 Create HTML Artifact
1854
- </button>
1855
-
1856
- <button
1857
- onClick={createMarkdownArtifact}
1858
- style={{
1859
- padding: '12px 20px',
1860
- fontSize: '16px',
1861
- cursor: 'pointer',
1862
- backgroundColor: '#7c3aed',
1863
- color: 'white',
1864
- border: 'none',
1865
- borderRadius: '8px',
1866
- }}
1867
- >
1868
- 📝 Create Markdown Artifact
1869
- </button>
1870
-
1871
- <button
1872
- onClick={createJavaScriptArtifact}
1873
- style={{
1874
- padding: '12px 20px',
1875
- fontSize: '16px',
1876
- cursor: 'pointer',
1877
- backgroundColor: '#6d28d9',
1878
- color: 'white',
1879
- border: 'none',
1880
- borderRadius: '8px',
1881
- }}
1882
- >
1883
- 💻 Create JavaScript Artifact
1884
- </button>
1885
-
1886
- <button
1887
- onClick={checkState}
1888
- style={{
1889
- padding: '12px 20px',
1890
- fontSize: '16px',
1891
- cursor: 'pointer',
1892
- backgroundColor: '#5b21b6',
1893
- color: 'white',
1894
- border: 'none',
1895
- borderRadius: '8px',
1896
- }}
1897
- >
1898
- 📊 Check Current State
1899
- </button>
1900
-
1901
- <button
1902
- onClick={() => window.MemoriArtifactAPI?.closeArtifact()}
1903
- style={{
1904
- padding: '12px 20px',
1905
- fontSize: '16px',
1906
- cursor: 'pointer',
1907
- backgroundColor: '#ef4444',
1908
- color: 'white',
1909
- border: 'none',
1910
- borderRadius: '8px',
1911
- }}
1912
- >
1913
- ❌ Close Artifact
1914
- </button>
1915
-
1916
- <button
1917
- onClick={() => window.MemoriArtifactAPI?.toggleFullscreen()}
1918
- style={{
1919
- padding: '12px 20px',
1920
- fontSize: '16px',
1921
- cursor: 'pointer',
1922
- backgroundColor: '#3b82f6',
1923
- color: 'white',
1924
- border: 'none',
1925
- borderRadius: '8px',
1926
- }}
1927
- >
1928
- ⛶ Toggle Fullscreen
1929
- </button>
1930
- </div>
1931
-
1932
- <div
1933
- style={{
1934
- marginTop: '30px',
1935
- padding: '15px',
1936
- backgroundColor: '#f3f4f6',
1937
- borderRadius: '8px',
1938
- }}
1939
- >
1940
- <h3>💡 Console Commands</h3>
1941
- <p>Try these in the browser console:</p>
1942
- <pre
1943
- style={{
1944
- backgroundColor: 'white',
1945
- padding: '10px',
1946
- borderRadius: '4px',
1947
- overflow: 'auto',
1948
- }}
1949
- >
1950
- {`// Create an artifact
1951
- window.MemoriArtifactAPI.createAndOpenArtifact(
1952
- '<h1>Test</h1>',
1953
- 'html',
1954
- 'My Title'
1955
- );
1956
-
1957
- // Check state
1958
- window.MemoriArtifactAPI.getState();
1959
-
1960
- // Close
1961
- window.MemoriArtifactAPI.closeArtifact();`}
1962
- </pre>
1963
- </div>
1964
- </div>
1965
- </>
1966
- );
1967
- };
1968
-
1969
- return <TestComponent />;
1970
- },
1971
- };
1972
-
1973
- export const APIBridge_ProcessOutputElements: Story = {
1974
- args: {},
1975
- render: () => {
1976
- const TestComponent = () => {
1977
- const { state } = useArtifact();
1978
-
1979
- const createFromOutput = () => {
1980
- const outputs = document.querySelectorAll(
1981
- '.memori-artifact[data-sample="true"]'
1982
- );
1983
- outputs.forEach(output => {
1984
- const artifactId = window.MemoriArtifactAPI?.createFromOutputElement(
1985
- output as HTMLOutputElement
1986
- );
1987
- console.log('Created artifact:', artifactId);
1988
- });
1989
- alert(`Processed ${outputs.length} artifacts. Check console for IDs.`);
1990
- };
1991
-
1992
- const addDynamicOutput = () => {
1993
- const container = document.getElementById('dynamic-container');
1994
- if (container) {
1995
- const output = document.createElement('output');
1996
- output.className = 'memori-artifact';
1997
- output.setAttribute('data-mimetype', 'html');
1998
- output.setAttribute('data-title', 'Dynamic Artifact');
1999
- output.setAttribute('data-sample', 'true');
2000
- output.innerHTML = `
2001
- <div style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: .5rem;">
2002
- <h2>🚀 Dynamically Added!</h2>
2003
- <p>This artifact was added to the DOM dynamically and then processed.</p>
2004
- <p>Timestamp: ${new Date().toLocaleTimeString()}</p>
2005
- </div>
2006
- `;
2007
- container.appendChild(output);
2008
- }
2009
- };
2010
-
2011
- return (
2012
- <>
2013
- {/* Conditionally render ArtifactDrawer to avoid hooks error */}
2014
- {state.isDrawerOpen && <ArtifactDrawer />}
2015
-
2016
- <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
2017
- <h1>🔄 Process Output Elements</h1>
2018
- <p>
2019
- This story demonstrates processing{' '}
2020
- <code>&lt;output class=&quot;memori-artifact&quot;&gt;</code>{' '}
2021
- elements using <code>createFromOutputElement</code>.
2022
- </p>
2023
-
2024
- <div
2025
- style={{
2026
- display: 'flex',
2027
- flexDirection: 'column',
2028
- gap: '12px',
2029
- marginTop: '20px',
2030
- }}
2031
- >
2032
- <button
2033
- onClick={createFromOutput}
2034
- style={{
2035
- padding: '12px 20px',
2036
- fontSize: '16px',
2037
- cursor: 'pointer',
2038
- backgroundColor: '#9333ea',
2039
- color: 'white',
2040
- border: 'none',
2041
- borderRadius: '8px',
2042
- }}
2043
- >
2044
- 🔍 Create From Output Elements
2045
- </button>
2046
-
2047
- <button
2048
- onClick={addDynamicOutput}
2049
- style={{
2050
- padding: '12px 20px',
2051
- fontSize: '16px',
2052
- cursor: 'pointer',
2053
- backgroundColor: '#7c3aed',
2054
- color: 'white',
2055
- border: 'none',
2056
- borderRadius: '8px',
2057
- }}
2058
- >
2059
- ➕ Add Dynamic Output
2060
- </button>
2061
- </div>
2062
-
2063
- <div id="dynamic-container" style={{ marginTop: '30px' }}>
2064
- <h3>Existing Output Elements:</h3>
2065
-
2066
- <output
2067
- className="memori-artifact"
2068
- data-mimetype="html"
2069
- data-title="Sample HTML"
2070
- data-sample="true"
2071
- >
2072
- <div
2073
- style={{
2074
- padding: '15px',
2075
- border: '2px solid #9333ea',
2076
- borderRadius: '8px',
2077
- }}
2078
- >
2079
- <h3>Sample Artifact 1</h3>
2080
- <p>This is a static output element in the DOM.</p>
2081
- </div>
2082
- </output>
2083
-
2084
- <output
2085
- className="memori-artifact"
2086
- data-mimetype="markdown"
2087
- data-title="Sample Markdown"
2088
- data-sample="true"
2089
- >
2090
- {`# Sample Markdown
2091
-
2092
- This is **another** static output element.
2093
-
2094
- - Item 1
2095
- - Item 2
2096
- - Item 3`}
2097
- </output>
2098
- </div>
2099
-
2100
- <div
2101
- style={{
2102
- marginTop: '30px',
2103
- padding: '15px',
2104
- backgroundColor: '#f3f4f6',
2105
- borderRadius: '8px',
2106
- }}
2107
- >
2108
- <h3>💡 How it works</h3>
2109
- <ol>
2110
- <li>
2111
- Click &quot;Create From Output Elements&quot; to process{' '}
2112
- <code>&lt;output&gt;</code> elements
2113
- </li>
2114
- <li>
2115
- Each element gets converted to an artifact and added to
2116
- history
2117
- </li>
2118
- <li>
2119
- Click &quot;Add Dynamic Output&quot; to inject a new element
2120
- </li>
2121
- <li>Process again to handle the new element</li>
2122
- <li>The artifacts will appear in the chat history</li>
2123
- </ol>
2124
- </div>
2125
- </div>
2126
- </>
2127
- );
2128
- };
2129
-
2130
- return <TestComponent />;
2131
- },
2132
- };
2133
-
2134
- export const APIBridge_WebSocketSimulation: Story = {
2135
- args: {},
2136
- render: () => {
2137
- const TestComponent = () => {
2138
- const { state } = useArtifact();
2139
-
2140
- const simulateWebSocket = () => {
2141
- // Simulate receiving a message with artifacts from WebSocket
2142
- const artifactContent = `
2143
- <div style="padding: 20px; background: white; border-radius: .5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
2144
- <h2>📊 Sales Report Q4 2024</h2>
2145
- <div style="display: flex; gap: 20px; margin-top: 20px;">
2146
- <div style="flex: 1; padding: 15px; background: #ecfdf5; border-radius: .5rem;">
2147
- <h3>Revenue</h3>
2148
- <p style="font-size: 24px; font-weight: bold; color: #059669;">$124,500</p>
2149
- </div>
2150
- <div style="flex: 1; padding: 15px; background: #fef3c7; border-radius: .5rem;">
2151
- <h3>Customers</h3>
2152
- <p style="font-size: 24px; font-weight: bold; color: #d97706;">1,234</p>
2153
- </div>
2154
- <div style="flex: 1; padding: 15px; background: #dbeafe; border-radius: .5rem;">
2155
- <h3>Growth</h3>
2156
- <p style="font-size: 24px; font-weight: bold; color: #2563eb;">+23%</p>
2157
- </div>
2158
- </div>
2159
- </div>
2160
- `;
2161
-
2162
- // Use the API to create and open the artifact
2163
- window.MemoriArtifactAPI?.createAndOpenArtifact(
2164
- artifactContent,
2165
- 'html',
2166
- 'Data Visualization'
2167
- );
2168
-
2169
- // Update chat display
2170
- const chatContainer = document.getElementById('chat-simulation');
2171
- if (chatContainer) {
2172
- const messageHTML = `
2173
- <div style="padding: 10px; margin: 10px 0; background: #f9fafb; border-radius: .5rem;">
2174
- <p><strong>Bot:</strong> I've created a visualization for you. Click the artifact card to view it.</p>
2175
- <div style="padding: 10px; margin-top: 10px; background: #e0e7ff; border-radius: .5rem; cursor: pointer;" onclick="window.MemoriArtifactAPI?.createAndOpenArtifact(\`${artifactContent.replace(
2176
- /`/g,
2177
- '\\`'
2178
- )}\`, 'html', 'Data Visualization')">
2179
- 📊 Data Visualization
2180
- </div>
2181
- </div>
2182
- `;
2183
- chatContainer.innerHTML += messageHTML;
2184
- }
2185
-
2186
- console.log('WebSocket artifact created via API');
2187
- };
2188
-
2189
- const clearChat = () => {
2190
- const chatContainer = document.getElementById('chat-simulation');
2191
- if (chatContainer) {
2192
- chatContainer.innerHTML =
2193
- '<p style="color: #6b7280;">Chat cleared. Click "Simulate WebSocket Message" to add new content.</p>';
2194
- }
2195
- };
2196
-
2197
- return (
2198
- <>
2199
- {/* Conditionally render ArtifactDrawer to avoid hooks error */}
2200
- {state.isDrawerOpen && <ArtifactDrawer />}
2201
-
2202
- <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
2203
- <h1>🌐 WebSocket Integration Simulation</h1>
2204
- <p>
2205
- This demonstrates how <code>createAndOpenArtifact</code> can be
2206
- used with WebSocket or Action Cable to create artifacts from
2207
- messages received dynamically.
2208
- </p>
2209
-
2210
- <div style={{ display: 'flex', gap: '12px', marginTop: '20px' }}>
2211
- <button
2212
- onClick={simulateWebSocket}
2213
- style={{
2214
- padding: '12px 20px',
2215
- fontSize: '16px',
2216
- cursor: 'pointer',
2217
- backgroundColor: '#9333ea',
2218
- color: 'white',
2219
- border: 'none',
2220
- borderRadius: '8px',
2221
- }}
2222
- >
2223
- 📡 Simulate WebSocket Message
2224
- </button>
2225
-
2226
- <button
2227
- onClick={clearChat}
2228
- style={{
2229
- padding: '12px 20px',
2230
- fontSize: '16px',
2231
- cursor: 'pointer',
2232
- backgroundColor: '#64748b',
2233
- color: 'white',
2234
- border: 'none',
2235
- borderRadius: '8px',
2236
- }}
2237
- >
2238
- 🗑️ Clear Chat
2239
- </button>
2240
- </div>
2241
-
2242
- <div
2243
- id="chat-simulation"
2244
- style={{
2245
- marginTop: '30px',
2246
- padding: '20px',
2247
- backgroundColor: 'white',
2248
- border: '1px solid #e5e7eb',
2249
- borderRadius: '12px',
2250
- minHeight: '200px',
2251
- }}
2252
- >
2253
- <p style={{ color: '#6b7280' }}>
2254
- Click &quot;Simulate WebSocket Message&quot; to receive a
2255
- message with an artifact...
2256
- </p>
2257
- </div>
2258
-
2259
- <div
2260
- style={{
2261
- marginTop: '30px',
2262
- padding: '15px',
2263
- backgroundColor: '#f3f4f6',
2264
- borderRadius: '8px',
2265
- }}
2266
- >
2267
- <h3>💡 Implementation Example</h3>
2268
- <pre
2269
- style={{
2270
- backgroundColor: 'white',
2271
- padding: '10px',
2272
- borderRadius: '4px',
2273
- overflow: 'auto',
2274
- fontSize: '13px',
2275
- }}
2276
- >
2277
- {`// Rails Action Cable
2278
- consumer.subscriptions.create("ChatChannel", {
2279
- received(data) {
2280
- if (data.artifact) {
2281
- // Create artifact directly from received data
2282
- window.MemoriArtifactAPI?.createAndOpenArtifact(
2283
- data.artifact.content,
2284
- data.artifact.mimeType,
2285
- data.artifact.title
2286
- );
2287
- }
2288
- }
2289
- });`}
2290
- </pre>
2291
- </div>
2292
- </div>
2293
- </>
2294
- );
2295
- };
2296
-
2297
- return <TestComponent />;
257
+ parameters: {
258
+ docs: {
259
+ description: {
260
+ story:
261
+ 'Markdown artifact shown inline in chatlog mode. The drawer renders below the artifact handler inside the message flow.',
262
+ },
263
+ },
2298
264
  },
2299
265
  };