@memori.ai/memori-react 8.45.2 → 8.45.4

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 (543) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/components/Chat/Chat.js +4 -1
  3. package/dist/components/Chat/Chat.js.map +1 -1
  4. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.d.ts +39 -0
  5. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.js +66 -0
  6. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.js.map +1 -0
  7. package/dist/components/DrawerFooter/DrawerFooter.d.ts +12 -0
  8. package/dist/components/DrawerFooter/DrawerFooter.js +10 -0
  9. package/dist/components/DrawerFooter/DrawerFooter.js.map +1 -0
  10. package/dist/components/IconButton/IconButton.d.ts +9 -0
  11. package/dist/components/IconButton/IconButton.js +36 -0
  12. package/dist/components/IconButton/IconButton.js.map +1 -0
  13. package/dist/components/MemoriWidget/MemoriWidget.d.ts +1 -1
  14. package/dist/components/MemoriWidget/MemoriWidget.js +2 -1
  15. package/dist/components/MemoriWidget/MemoriWidget.js.map +1 -1
  16. package/dist/components/MobileSessionPanel/MobileSessionPanel.d.ts +65 -0
  17. package/dist/components/MobileSessionPanel/MobileSessionPanel.js +294 -0
  18. package/dist/components/MobileSessionPanel/MobileSessionPanel.js.map +1 -0
  19. package/dist/components/PositionPopover/PositionPopover.d.ts +22 -0
  20. package/dist/components/PositionPopover/PositionPopover.js +208 -0
  21. package/dist/components/PositionPopover/PositionPopover.js.map +1 -0
  22. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.d.ts +4 -0
  23. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.js +64 -0
  24. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.js.map +1 -0
  25. package/dist/components/layouts/chat.css +27 -4
  26. package/dist/context/widgetSurfaceContext.d.ts +3 -0
  27. package/dist/context/widgetSurfaceContext.js +11 -0
  28. package/dist/context/widgetSurfaceContext.js.map +1 -0
  29. package/dist/helpers/positionPopover.d.ts +2 -0
  30. package/dist/helpers/positionPopover.js +16 -0
  31. package/dist/helpers/positionPopover.js.map +1 -0
  32. package/dist/helpers/tts/muteSpeaker.d.ts +13 -0
  33. package/dist/helpers/tts/muteSpeaker.js +27 -0
  34. package/dist/helpers/tts/muteSpeaker.js.map +1 -0
  35. package/dist/helpers/usePressTooltip.d.ts +13 -0
  36. package/dist/helpers/usePressTooltip.js +24 -0
  37. package/dist/helpers/usePressTooltip.js.map +1 -0
  38. package/dist/icons/FacebookIcon.d.ts +3 -0
  39. package/dist/icons/FacebookIcon.js +6 -0
  40. package/dist/icons/FacebookIcon.js.map +1 -0
  41. package/dist/icons/LinkedinIcon.d.ts +3 -0
  42. package/dist/icons/LinkedinIcon.js +6 -0
  43. package/dist/icons/LinkedinIcon.js.map +1 -0
  44. package/dist/icons/MemoriIcon.d.ts +3 -0
  45. package/dist/icons/MemoriIcon.js +8 -0
  46. package/dist/icons/MemoriIcon.js.map +1 -0
  47. package/dist/icons/TelegramIcon.d.ts +3 -0
  48. package/dist/icons/TelegramIcon.js +6 -0
  49. package/dist/icons/TelegramIcon.js.map +1 -0
  50. package/dist/icons/TwitterIcon.d.ts +3 -0
  51. package/dist/icons/TwitterIcon.js +6 -0
  52. package/dist/icons/TwitterIcon.js.map +1 -0
  53. package/dist/icons/WhatsappIcon.d.ts +3 -0
  54. package/dist/icons/WhatsappIcon.js +6 -0
  55. package/dist/icons/WhatsappIcon.js.map +1 -0
  56. package/dist/icons/artifacts/DocumentIcon.d.ts +3 -0
  57. package/dist/icons/artifacts/DocumentIcon.js +6 -0
  58. package/dist/icons/artifacts/DocumentIcon.js.map +1 -0
  59. package/dist/icons/artifacts/HtmlIcon.d.ts +3 -0
  60. package/dist/icons/artifacts/HtmlIcon.js +6 -0
  61. package/dist/icons/artifacts/HtmlIcon.js.map +1 -0
  62. package/dist/icons/artifacts/JavascriptIcon.d.ts +3 -0
  63. package/dist/icons/artifacts/JavascriptIcon.js +6 -0
  64. package/dist/icons/artifacts/JavascriptIcon.js.map +1 -0
  65. package/dist/icons/artifacts/MarkdownIcon.d.ts +3 -0
  66. package/dist/icons/artifacts/MarkdownIcon.js +6 -0
  67. package/dist/icons/artifacts/MarkdownIcon.js.map +1 -0
  68. package/dist/icons/artifacts/PythonIcon.d.ts +3 -0
  69. package/dist/icons/artifacts/PythonIcon.js +6 -0
  70. package/dist/icons/artifacts/PythonIcon.js.map +1 -0
  71. package/dist/icons/artifacts/SvgIcon.d.ts +3 -0
  72. package/dist/icons/artifacts/SvgIcon.js +6 -0
  73. package/dist/icons/artifacts/SvgIcon.js.map +1 -0
  74. package/dist/icons/artifacts/XmlIcon.d.ts +3 -0
  75. package/dist/icons/artifacts/XmlIcon.js +6 -0
  76. package/dist/icons/artifacts/XmlIcon.js.map +1 -0
  77. package/dist/icons/artifacts/cssIcon.d.ts +3 -0
  78. package/dist/icons/artifacts/cssIcon.js +6 -0
  79. package/dist/icons/artifacts/cssIcon.js.map +1 -0
  80. package/dist/styles.css +1 -2
  81. package/dist/version.d.ts +1 -1
  82. package/dist/version.js +1 -1
  83. package/esm/components/Chat/Chat.js +4 -1
  84. package/esm/components/Chat/Chat.js.map +1 -1
  85. package/esm/components/MemoriWidget/MemoriWidget.d.ts +1 -1
  86. package/esm/components/MemoriWidget/MemoriWidget.js +2 -1
  87. package/esm/components/MemoriWidget/MemoriWidget.js.map +1 -1
  88. package/esm/components/layouts/chat.css +27 -4
  89. package/esm/styles.css +1 -2
  90. package/esm/version.d.ts +1 -1
  91. package/esm/version.js +1 -1
  92. package/package.json +6 -7
  93. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts +0 -3
  94. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js +0 -64
  95. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map +0 -1
  96. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts +0 -3
  97. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js +0 -62
  98. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map +0 -1
  99. package/src/I18nWrapper.tsx +0 -13
  100. package/src/__snapshots__/index.test.tsx.snap +0 -96
  101. package/src/components/AgeVerificationModal/AgeVerificationModal.css +0 -95
  102. package/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx +0 -46
  103. package/src/components/AgeVerificationModal/AgeVerificationModal.test.tsx +0 -33
  104. package/src/components/AgeVerificationModal/AgeVerificationModal.tsx +0 -99
  105. package/src/components/AgeVerificationModal/__snapshots__/AgeVerificationModal.test.tsx.snap +0 -19
  106. package/src/components/Auth/Auth.css +0 -57
  107. package/src/components/Auth/Auth.stories.tsx +0 -90
  108. package/src/components/Auth/Auth.test.tsx +0 -63
  109. package/src/components/Auth/Auth.tsx +0 -201
  110. package/src/components/Auth/__snapshots__/Auth.test.tsx.snap +0 -143
  111. package/src/components/Avatar/Avatar.css +0 -151
  112. package/src/components/Avatar/Avatar.stories.tsx +0 -160
  113. package/src/components/Avatar/Avatar.test.tsx +0 -158
  114. package/src/components/Avatar/Avatar.tsx +0 -245
  115. package/src/components/Avatar/AvatarView/AvatarComponent/Shadow/DynamicShadow.tsx +0 -103
  116. package/src/components/Avatar/AvatarView/AvatarComponent/avatarComponent.tsx +0 -105
  117. package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.tsx +0 -338
  118. package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/types.ts +0 -44
  119. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/AvatarAnimator.ts +0 -1091
  120. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/AvatarPositionController.ts +0 -83
  121. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.ts +0 -301
  122. package/src/components/Avatar/AvatarView/AvatarComponent/components/controls.tsx +0 -100
  123. package/src/components/Avatar/AvatarView/AvatarComponent/components/halfbodyAvatar.tsx +0 -152
  124. package/src/components/Avatar/AvatarView/AvatarComponent/components/loader.tsx +0 -31
  125. package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts +0 -141
  126. package/src/components/Avatar/AvatarView/AvatarComponent/lights/Lights.tsx +0 -145
  127. package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css +0 -111
  128. package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx +0 -201
  129. package/src/components/Avatar/AvatarView/AvatarView.stories.tsx +0 -254
  130. package/src/components/Avatar/AvatarView/index.tsx +0 -194
  131. package/src/components/Avatar/AvatarView/utils/hideHands.ts +0 -11
  132. package/src/components/Avatar/AvatarView/utils/useEyeBlink.ts +0 -100
  133. package/src/components/Avatar/AvatarView/utils/useHeadMovement.ts +0 -72
  134. package/src/components/Avatar/AvatarView/utils/useLoadingMorphAnim.ts +0 -38
  135. package/src/components/Avatar/AvatarView/utils/useMouthAnimation.ts +0 -93
  136. package/src/components/Avatar/AvatarView/utils/useSmile.ts +0 -39
  137. package/src/components/Avatar/AvatarView/utils/utils.ts +0 -55
  138. package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +0 -246
  139. package/src/components/Blob/Blob.css +0 -286
  140. package/src/components/Blob/Blob.stories.tsx +0 -53
  141. package/src/components/Blob/Blob.test.tsx +0 -18
  142. package/src/components/Blob/Blob.tsx +0 -26
  143. package/src/components/Blob/__snapshots__/Blob.test.tsx.snap +0 -80
  144. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.css +0 -40
  145. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx +0 -58
  146. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.test.tsx +0 -53
  147. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.tsx +0 -74
  148. package/src/components/BlockedMemoriBadge/__snapshots__/BlockedMemoriBadge.test.tsx.snap +0 -181
  149. package/src/components/ChangeMode/ChangeMode.css +0 -22
  150. package/src/components/ChangeMode/ChangeMode.stories.tsx +0 -50
  151. package/src/components/ChangeMode/ChangeMode.test.tsx +0 -24
  152. package/src/components/ChangeMode/ChangeMode.tsx +0 -51
  153. package/src/components/ChangeMode/__snapshots__/ChangeMode.test.tsx.snap +0 -107
  154. package/src/components/Chat/Chat.css +0 -285
  155. package/src/components/Chat/Chat.stories.tsx +0 -1684
  156. package/src/components/Chat/Chat.test.tsx +0 -372
  157. package/src/components/Chat/Chat.tsx +0 -778
  158. package/src/components/Chat/__snapshots__/Chat.test.tsx.snap +0 -6816
  159. package/src/components/ChatBubble/ChatBubble.css +0 -430
  160. package/src/components/ChatBubble/ChatBubble.stories.tsx +0 -1192
  161. package/src/components/ChatBubble/ChatBubble.test.tsx +0 -481
  162. package/src/components/ChatBubble/ChatBubble.tsx +0 -776
  163. package/src/components/ChatBubble/__snapshots__/ChatBubble.test.tsx.snap +0 -8734
  164. package/src/components/ChatHistoryDrawer/ChatHistory.css +0 -587
  165. package/src/components/ChatHistoryDrawer/ChatHistory.stories.tsx +0 -410
  166. package/src/components/ChatHistoryDrawer/ChatHistory.test.tsx +0 -107
  167. package/src/components/ChatHistoryDrawer/ChatHistory.tsx +0 -1298
  168. package/src/components/ChatHistoryDrawer/__snapshots__/ChatHistory.test.tsx.snap +0 -27
  169. package/src/components/ChatInputs/ChatInputs.css +0 -340
  170. package/src/components/ChatInputs/ChatInputs.stories.tsx +0 -251
  171. package/src/components/ChatInputs/ChatInputs.tsx +0 -487
  172. package/src/components/ChatTextArea/ChatTextArea.css +0 -185
  173. package/src/components/ChatTextArea/ChatTextArea.stories.tsx +0 -55
  174. package/src/components/ChatTextArea/ChatTextArea.test.tsx +0 -28
  175. package/src/components/ChatTextArea/ChatTextArea.tsx +0 -171
  176. package/src/components/ChatTextArea/__snapshots__/ChatTextArea.test.tsx.snap +0 -68
  177. package/src/components/CompletionProviderStatus/CompletionProviderStatus.css +0 -36
  178. package/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx +0 -296
  179. package/src/components/CompletionProviderStatus/CompletionProviderStatus.test.tsx +0 -31
  180. package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx +0 -232
  181. package/src/components/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap +0 -96
  182. package/src/components/ContentPreviewModal/ContentPreviewModal.css +0 -128
  183. package/src/components/ContentPreviewModal/ContentPreviewModal.tsx +0 -67
  184. package/src/components/ContentPreviewModal/index.ts +0 -2
  185. package/src/components/CustomGLBModelViewer/ModelViewer.css +0 -11
  186. package/src/components/CustomGLBModelViewer/ModelViewer.stories.tsx +0 -58
  187. package/src/components/CustomGLBModelViewer/ModelViewer.test.tsx +0 -13
  188. package/src/components/CustomGLBModelViewer/ModelViewer.tsx +0 -37
  189. package/src/components/CustomGLBModelViewer/__snapshots__/ModelViewer.test.tsx.snap +0 -20
  190. package/src/components/DateSelector/DateSelector.css +0 -158
  191. package/src/components/DateSelector/DateSelector.stories.tsx +0 -47
  192. package/src/components/DateSelector/DateSelector.test.tsx +0 -149
  193. package/src/components/DateSelector/DateSelector.tsx +0 -251
  194. package/src/components/DateSelector/__snapshots__/DateSelector.test.tsx.snap +0 -1954
  195. package/src/components/ErrorBoundary/ErrorBoundary.tsx +0 -54
  196. package/src/components/ExpertsDrawer/ExpertsDrawer.css +0 -67
  197. package/src/components/ExpertsDrawer/ExpertsDrawer.stories.tsx +0 -54
  198. package/src/components/ExpertsDrawer/ExpertsDrawer.test.tsx +0 -53
  199. package/src/components/ExpertsDrawer/ExpertsDrawer.tsx +0 -69
  200. package/src/components/ExpertsDrawer/__snapshots__/ExpertsDrawer.test.tsx.snap +0 -11
  201. package/src/components/ExportHistoryButton/ExportHistoryButton.css +0 -22
  202. package/src/components/FeedbackButtons/FeedbackButtons.css +0 -107
  203. package/src/components/FeedbackButtons/FeedbackButtons.stories.tsx +0 -52
  204. package/src/components/FeedbackButtons/FeedbackButtons.test.tsx +0 -11
  205. package/src/components/FeedbackButtons/FeedbackButtons.tsx +0 -152
  206. package/src/components/FeedbackButtons/__snapshots__/FeedbackButtons.test.tsx.snap +0 -42
  207. package/src/components/FilePreview/FilePreview.css +0 -358
  208. package/src/components/FilePreview/FilePreview.stories.tsx +0 -63
  209. package/src/components/FilePreview/FilePreview.test.tsx +0 -26
  210. package/src/components/FilePreview/FilePreview.tsx +0 -277
  211. package/src/components/FilePreview/__snapshots__/FilePreview.test.tsx.snap +0 -185
  212. package/src/components/Header/ChatConsumptionDropdown.test.tsx +0 -117
  213. package/src/components/Header/ChatConsumptionDropdown.tsx +0 -275
  214. package/src/components/Header/Header.css +0 -282
  215. package/src/components/Header/Header.stories.tsx +0 -338
  216. package/src/components/Header/Header.test.tsx +0 -371
  217. package/src/components/Header/Header.tsx +0 -442
  218. package/src/components/Header/__snapshots__/Header.test.tsx.snap +0 -964
  219. package/src/components/KnownFacts/KnownFacts.css +0 -19
  220. package/src/components/KnownFacts/KnownFacts.stories.tsx +0 -80
  221. package/src/components/KnownFacts/KnownFacts.test.tsx +0 -57
  222. package/src/components/KnownFacts/KnownFacts.tsx +0 -376
  223. package/src/components/KnownFacts/__snapshots__/KnownFacts.test.tsx.snap +0 -19
  224. package/src/components/LoginDrawer/LoginDrawer.css +0 -1616
  225. package/src/components/LoginDrawer/LoginDrawer.stories.tsx +0 -102
  226. package/src/components/LoginDrawer/LoginDrawer.test.tsx +0 -199
  227. package/src/components/LoginDrawer/LoginDrawer.tsx +0 -600
  228. package/src/components/LoginDrawer/__snapshots__/LoginDrawer.test.tsx.snap +0 -91
  229. package/src/components/MediaWidget/DocumentCard.test.tsx +0 -45
  230. package/src/components/MediaWidget/DocumentCard.tsx +0 -19
  231. package/src/components/MediaWidget/MediaItemWidget.css +0 -1398
  232. package/src/components/MediaWidget/MediaItemWidget.stories.tsx +0 -423
  233. package/src/components/MediaWidget/MediaItemWidget.test.tsx +0 -248
  234. package/src/components/MediaWidget/MediaItemWidget.tsx +0 -997
  235. package/src/components/MediaWidget/MediaItemWidget.types.ts +0 -65
  236. package/src/components/MediaWidget/MediaItemWidget.utils.test.ts +0 -367
  237. package/src/components/MediaWidget/MediaItemWidget.utils.ts +0 -227
  238. package/src/components/MediaWidget/MediaPreviewModal.test.tsx +0 -271
  239. package/src/components/MediaWidget/MediaPreviewModal.tsx +0 -425
  240. package/src/components/MediaWidget/MediaWidget.css +0 -131
  241. package/src/components/MediaWidget/MediaWidget.stories.tsx +0 -319
  242. package/src/components/MediaWidget/MediaWidget.test.tsx +0 -41
  243. package/src/components/MediaWidget/MediaWidget.tsx +0 -107
  244. package/src/components/MediaWidget/__snapshots__/DocumentCard.test.tsx.snap +0 -24
  245. package/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap +0 -791
  246. package/src/components/MediaWidget/__snapshots__/MediaWidget.test.tsx.snap +0 -154
  247. package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx +0 -2299
  248. package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css +0 -163
  249. package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.tsx +0 -250
  250. package/src/components/MemoriArtifactSystem/components/ArtifactActions/CopyButton.stories.tsx +0 -30
  251. package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyButtonWithDropdown.tsx +0 -467
  252. package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyMenuItem.tsx +0 -89
  253. package/src/components/MemoriArtifactSystem/components/ArtifactActions/hooks/useCopyArtifact.ts +0 -619
  254. package/src/components/MemoriArtifactSystem/components/ArtifactActions/index.ts +0 -9
  255. package/src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css +0 -489
  256. package/src/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.tsx +0 -90
  257. package/src/components/MemoriArtifactSystem/components/ArtifactActions/types.ts +0 -73
  258. package/src/components/MemoriArtifactSystem/components/ArtifactActions/utils/PDFExporter.ts +0 -454
  259. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css +0 -1059
  260. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx +0 -431
  261. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css +0 -150
  262. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.tsx +0 -79
  263. package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.css +0 -253
  264. package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx +0 -561
  265. package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css +0 -355
  266. package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx +0 -160
  267. package/src/components/MemoriArtifactSystem/context/ArtifactContext.tsx +0 -167
  268. package/src/components/MemoriArtifactSystem/types/artifact.types.ts +0 -35
  269. package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.test.tsx +0 -308
  270. package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.tsx +0 -379
  271. package/src/components/MemoriArtifactSystem/utils/applyEdits.test.ts +0 -85
  272. package/src/components/MemoriArtifactSystem/utils/applyEdits.ts +0 -173
  273. package/src/components/MemoriWidget/MemoriWidget.css +0 -220
  274. package/src/components/MemoriWidget/MemoriWidget.stories.tsx +0 -274
  275. package/src/components/MemoriWidget/MemoriWidget.tsx +0 -3930
  276. package/src/components/MicrophoneButton/MicrophoneButton.css +0 -142
  277. package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx +0 -52
  278. package/src/components/MicrophoneButton/MicrophoneButton.tsx +0 -128
  279. package/src/components/PositionDrawer/PositionDrawer.stories.tsx +0 -51
  280. package/src/components/PositionDrawer/PositionDrawer.test.tsx +0 -39
  281. package/src/components/PositionDrawer/PositionDrawer.tsx +0 -50
  282. package/src/components/PositionDrawer/__snapshots__/PositionDrawer.test.tsx.snap +0 -17
  283. package/src/components/PoweredBy/PoweredBy.css +0 -47
  284. package/src/components/PoweredBy/PoweredBy.stories.tsx +0 -75
  285. package/src/components/PoweredBy/PoweredBy.test.tsx +0 -15
  286. package/src/components/PoweredBy/PoweredBy.tsx +0 -44
  287. package/src/components/PoweredBy/__snapshots__/PoweredBy.test.tsx.snap +0 -55
  288. package/src/components/SendOnEnterMenu/SendOnEnterMenu.css +0 -47
  289. package/src/components/SendOnEnterMenu/SendOnEnterMenu.stories.tsx +0 -58
  290. package/src/components/SendOnEnterMenu/SendOnEnterMenu.test.tsx +0 -17
  291. package/src/components/SendOnEnterMenu/SendOnEnterMenu.tsx +0 -82
  292. package/src/components/SendOnEnterMenu/__snapshots__/SendOnEnterMenu.test.tsx.snap +0 -57
  293. package/src/components/SettingsDrawer/SettingsDrawer.css +0 -24
  294. package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx +0 -94
  295. package/src/components/SettingsDrawer/SettingsDrawer.test.tsx +0 -202
  296. package/src/components/SettingsDrawer/SettingsDrawer.tsx +0 -255
  297. package/src/components/SettingsDrawer/__snapshots__/SettingsDrawer.test.tsx.snap +0 -59
  298. package/src/components/ShareButton/ShareButton.css +0 -73
  299. package/src/components/ShareButton/ShareButton.stories.tsx +0 -98
  300. package/src/components/ShareButton/ShareButton.test.tsx +0 -53
  301. package/src/components/ShareButton/ShareButton.tsx +0 -395
  302. package/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap +0 -316
  303. package/src/components/Snippet/Snippet.css +0 -142
  304. package/src/components/Snippet/Snippet.stories.tsx +0 -286
  305. package/src/components/Snippet/Snippet.test.tsx +0 -176
  306. package/src/components/Snippet/Snippet.tsx +0 -148
  307. package/src/components/Snippet/__snapshots__/Snippet.test.tsx.snap +0 -603
  308. package/src/components/StartPanel/StartPanel.css +0 -273
  309. package/src/components/StartPanel/StartPanel.stories.tsx +0 -404
  310. package/src/components/StartPanel/StartPanel.test.tsx +0 -360
  311. package/src/components/StartPanel/StartPanel.tsx +0 -426
  312. package/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap +0 -1986
  313. package/src/components/Typing/Typing.stories.tsx +0 -130
  314. package/src/components/Typing/Typing.test.tsx +0 -62
  315. package/src/components/Typing/Typing.tsx +0 -154
  316. package/src/components/Typing/__snapshots__/Typing.test.tsx.snap +0 -133
  317. package/src/components/UploadButton/UploadButton.css +0 -542
  318. package/src/components/UploadButton/UploadButton.stories.tsx +0 -376
  319. package/src/components/UploadButton/UploadButton.test.tsx +0 -11
  320. package/src/components/UploadButton/UploadButton.tsx +0 -688
  321. package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx +0 -421
  322. package/src/components/UploadButton/UploadImages/UploadImages.tsx +0 -538
  323. package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap +0 -165
  324. package/src/components/VenueWidget/VenueWidget.css +0 -163
  325. package/src/components/VenueWidget/VenueWidget.stories.tsx +0 -66
  326. package/src/components/VenueWidget/VenueWidget.test.tsx +0 -49
  327. package/src/components/VenueWidget/VenueWidget.tsx +0 -458
  328. package/src/components/VenueWidget/__snapshots__/VenueWidget.test.tsx.snap +0 -370
  329. package/src/components/WhyThisAnswer/WhyThisAnswer.css +0 -171
  330. package/src/components/WhyThisAnswer/WhyThisAnswer.stories.tsx +0 -285
  331. package/src/components/WhyThisAnswer/WhyThisAnswer.test.tsx +0 -245
  332. package/src/components/WhyThisAnswer/WhyThisAnswer.tsx +0 -233
  333. package/src/components/WhyThisAnswer/__snapshots__/WhyThisAnswer.test.tsx.snap +0 -27
  334. package/src/components/icons/AI.tsx +0 -34
  335. package/src/components/icons/Alert.tsx +0 -31
  336. package/src/components/icons/ArrowUp.tsx +0 -28
  337. package/src/components/icons/Bug.tsx +0 -81
  338. package/src/components/icons/Chat.tsx +0 -30
  339. package/src/components/icons/ChevronDown.tsx +0 -26
  340. package/src/components/icons/ChevronLeft.tsx +0 -28
  341. package/src/components/icons/ChevronRight.tsx +0 -28
  342. package/src/components/icons/ChevronUp.tsx +0 -24
  343. package/src/components/icons/Clear.tsx +0 -23
  344. package/src/components/icons/Close.tsx +0 -30
  345. package/src/components/icons/Code.tsx +0 -24
  346. package/src/components/icons/Copy.tsx +0 -23
  347. package/src/components/icons/DeepThought.tsx +0 -38
  348. package/src/components/icons/Delete.tsx +0 -23
  349. package/src/components/icons/Document.tsx +0 -50
  350. package/src/components/icons/Download.tsx +0 -23
  351. package/src/components/icons/Edit.tsx +0 -17
  352. package/src/components/icons/Expand.tsx +0 -23
  353. package/src/components/icons/Eye.tsx +0 -17
  354. package/src/components/icons/EyeInvisible.tsx +0 -24
  355. package/src/components/icons/Facebook.tsx +0 -23
  356. package/src/components/icons/Feedback.tsx +0 -24
  357. package/src/components/icons/File.tsx +0 -17
  358. package/src/components/icons/FileExcel.tsx +0 -23
  359. package/src/components/icons/FilePdf.tsx +0 -23
  360. package/src/components/icons/FileWord.tsx +0 -23
  361. package/src/components/icons/Fullscreen.tsx +0 -23
  362. package/src/components/icons/FullscreenExit.tsx +0 -23
  363. package/src/components/icons/GasStation.tsx +0 -36
  364. package/src/components/icons/Group.tsx +0 -30
  365. package/src/components/icons/History.tsx +0 -33
  366. package/src/components/icons/Image.tsx +0 -37
  367. package/src/components/icons/Info.tsx +0 -31
  368. package/src/components/icons/Link.tsx +0 -17
  369. package/src/components/icons/Linkedin.tsx +0 -23
  370. package/src/components/icons/Loading.tsx +0 -28
  371. package/src/components/icons/Logout.tsx +0 -27
  372. package/src/components/icons/Mail.tsx +0 -17
  373. package/src/components/icons/MapMarker.tsx +0 -26
  374. package/src/components/icons/MenuHorizontal.tsx +0 -29
  375. package/src/components/icons/MenuVertical.tsx +0 -29
  376. package/src/components/icons/Message.tsx +0 -23
  377. package/src/components/icons/Microphone.tsx +0 -23
  378. package/src/components/icons/Minus.tsx +0 -23
  379. package/src/components/icons/MinusCircle.tsx +0 -24
  380. package/src/components/icons/PaperClip.tsx +0 -23
  381. package/src/components/icons/Picture.tsx +0 -23
  382. package/src/components/icons/Plus.tsx +0 -18
  383. package/src/components/icons/Preview.tsx +0 -29
  384. package/src/components/icons/Print.tsx +0 -38
  385. package/src/components/icons/QuestionHelp.tsx +0 -30
  386. package/src/components/icons/Refresh.tsx +0 -30
  387. package/src/components/icons/SelectIcon.tsx +0 -28
  388. package/src/components/icons/Send.tsx +0 -17
  389. package/src/components/icons/Setting.tsx +0 -23
  390. package/src/components/icons/Share.tsx +0 -23
  391. package/src/components/icons/Sound.tsx +0 -23
  392. package/src/components/icons/SoundDeactivated.tsx +0 -27
  393. package/src/components/icons/Telegram.tsx +0 -26
  394. package/src/components/icons/ThumbDown.tsx +0 -29
  395. package/src/components/icons/ThumbUp.tsx +0 -29
  396. package/src/components/icons/Translation.tsx +0 -24
  397. package/src/components/icons/Twitter.tsx +0 -23
  398. package/src/components/icons/Upload.tsx +0 -34
  399. package/src/components/icons/User.tsx +0 -17
  400. package/src/components/icons/Warning.tsx +0 -24
  401. package/src/components/icons/WhatsApp.tsx +0 -24
  402. package/src/components/icons/icons.stories.css +0 -5
  403. package/src/components/icons/icons.stories.tsx +0 -81
  404. package/src/components/icons/loading.css +0 -14
  405. package/src/components/layouts/Chat.test.tsx +0 -40
  406. package/src/components/layouts/Chat.tsx +0 -69
  407. package/src/components/layouts/FullBody/FullBody.stories.tsx +0 -110
  408. package/src/components/layouts/FullPage.test.tsx +0 -65
  409. package/src/components/layouts/FullPage.tsx +0 -80
  410. package/src/components/layouts/HiddenChat.test.tsx +0 -40
  411. package/src/components/layouts/HiddenChat.tsx +0 -233
  412. package/src/components/layouts/Totem/Totem.stories.tsx +0 -131
  413. package/src/components/layouts/Totem.test.tsx +0 -40
  414. package/src/components/layouts/Totem.tsx +0 -49
  415. package/src/components/layouts/WebsiteAssistant.test.tsx +0 -40
  416. package/src/components/layouts/WebsiteAssistant.tsx +0 -132
  417. package/src/components/layouts/ZoomedFullBody/ZoomedFullBody.stories.tsx +0 -131
  418. package/src/components/layouts/ZoomedFullBody.test.tsx +0 -40
  419. package/src/components/layouts/ZoomedFullBody.tsx +0 -81
  420. package/src/components/layouts/__snapshots__/Chat.test.tsx.snap +0 -457
  421. package/src/components/layouts/__snapshots__/FullPage.test.tsx.snap +0 -1045
  422. package/src/components/layouts/__snapshots__/HiddenChat.test.tsx.snap +0 -460
  423. package/src/components/layouts/__snapshots__/Totem.test.tsx.snap +0 -566
  424. package/src/components/layouts/__snapshots__/WebsiteAssistant.test.tsx.snap +0 -59
  425. package/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap +0 -523
  426. package/src/components/layouts/chat.css +0 -451
  427. package/src/components/layouts/hidden-chat.css +0 -276
  428. package/src/components/layouts/layouts.stories.tsx +0 -231
  429. package/src/components/layouts/totem.css +0 -221
  430. package/src/components/layouts/website-assistant.css +0 -677
  431. package/src/components/layouts/zoomed-full-body.css +0 -18
  432. package/src/components/ui/Alert.css +0 -93
  433. package/src/components/ui/Alert.stories.tsx +0 -137
  434. package/src/components/ui/Alert.test.tsx +0 -129
  435. package/src/components/ui/Alert.tsx +0 -123
  436. package/src/components/ui/Button.css +0 -167
  437. package/src/components/ui/Button.stories.tsx +0 -156
  438. package/src/components/ui/Button.test.tsx +0 -74
  439. package/src/components/ui/Button.tsx +0 -107
  440. package/src/components/ui/Card.css +0 -65
  441. package/src/components/ui/Card.stories.tsx +0 -95
  442. package/src/components/ui/Card.test.tsx +0 -47
  443. package/src/components/ui/Card.tsx +0 -48
  444. package/src/components/ui/Checkbox.css +0 -116
  445. package/src/components/ui/Checkbox.stories.tsx +0 -74
  446. package/src/components/ui/Checkbox.test.tsx +0 -28
  447. package/src/components/ui/Checkbox.tsx +0 -58
  448. package/src/components/ui/ConfirmDialog.css +0 -42
  449. package/src/components/ui/ConfirmDialog.stories.tsx +0 -216
  450. package/src/components/ui/ConfirmDialog.test.tsx +0 -124
  451. package/src/components/ui/ConfirmDialog.tsx +0 -58
  452. package/src/components/ui/Details.css +0 -66
  453. package/src/components/ui/Drawer.css +0 -270
  454. package/src/components/ui/Drawer.stories.tsx +0 -267
  455. package/src/components/ui/Drawer.test.tsx +0 -130
  456. package/src/components/ui/Drawer.tsx +0 -293
  457. package/src/components/ui/Dropdown.css +0 -173
  458. package/src/components/ui/Dropdown.tsx +0 -63
  459. package/src/components/ui/Expandable.css +0 -15
  460. package/src/components/ui/Expandable.stories.tsx +0 -180
  461. package/src/components/ui/Expandable.test.tsx +0 -107
  462. package/src/components/ui/Expandable.tsx +0 -121
  463. package/src/components/ui/Modal.css +0 -98
  464. package/src/components/ui/Modal.stories.tsx +0 -171
  465. package/src/components/ui/Modal.test.tsx +0 -111
  466. package/src/components/ui/Modal.tsx +0 -117
  467. package/src/components/ui/Select.css +0 -138
  468. package/src/components/ui/Select.stories.tsx +0 -79
  469. package/src/components/ui/Select.test.tsx +0 -84
  470. package/src/components/ui/Select.tsx +0 -79
  471. package/src/components/ui/Slider.css +0 -192
  472. package/src/components/ui/Slider.stories.tsx +0 -63
  473. package/src/components/ui/Slider.tsx +0 -142
  474. package/src/components/ui/Spin.css +0 -31
  475. package/src/components/ui/Spin.stories.tsx +0 -64
  476. package/src/components/ui/Spin.test.tsx +0 -41
  477. package/src/components/ui/Spin.tsx +0 -31
  478. package/src/components/ui/Table.css +0 -132
  479. package/src/components/ui/Tooltip.css +0 -171
  480. package/src/components/ui/Tooltip.stories.tsx +0 -109
  481. package/src/components/ui/Tooltip.test.tsx +0 -102
  482. package/src/components/ui/Tooltip.tsx +0 -163
  483. package/src/components/ui/__snapshots__/Alert.test.tsx.snap +0 -59
  484. package/src/components/ui/__snapshots__/Button.test.tsx.snap +0 -204
  485. package/src/components/ui/__snapshots__/Card.test.tsx.snap +0 -321
  486. package/src/components/ui/__snapshots__/Checkbox.test.tsx.snap +0 -131
  487. package/src/components/ui/__snapshots__/ConfirmDialog.test.tsx.snap +0 -35
  488. package/src/components/ui/__snapshots__/Drawer.test.tsx.snap +0 -67
  489. package/src/components/ui/__snapshots__/Expandable.test.tsx.snap +0 -159
  490. package/src/components/ui/__snapshots__/Modal.test.tsx.snap +0 -59
  491. package/src/components/ui/__snapshots__/Select.test.tsx.snap +0 -254
  492. package/src/components/ui/__snapshots__/Spin.test.tsx.snap +0 -193
  493. package/src/components/ui/__snapshots__/Tooltip.test.tsx.snap +0 -113
  494. package/src/components/ui/definitions.stories.tsx +0 -139
  495. package/src/context/visemeContext.tsx +0 -384
  496. package/src/helpers/chatPdfExport.ts +0 -544
  497. package/src/helpers/configuration.ts +0 -42
  498. package/src/helpers/constants.ts +0 -268
  499. package/src/helpers/convertDocument.test.ts +0 -67
  500. package/src/helpers/convertDocument.ts +0 -35
  501. package/src/helpers/credits.ts +0 -54
  502. package/src/helpers/error.test.ts +0 -29
  503. package/src/helpers/error.ts +0 -278
  504. package/src/helpers/imageCompression.ts +0 -230
  505. package/src/helpers/llmUsage.ts +0 -328
  506. package/src/helpers/markedExtendedTables.js +0 -217
  507. package/src/helpers/media.test.ts +0 -169
  508. package/src/helpers/media.ts +0 -81
  509. package/src/helpers/message.test.ts +0 -126
  510. package/src/helpers/message.ts +0 -219
  511. package/src/helpers/nats/getNatsConfig.ts +0 -148
  512. package/src/helpers/nats/isSessionExpiredError.test.ts +0 -38
  513. package/src/helpers/nats/isSessionExpiredError.ts +0 -51
  514. package/src/helpers/nats/useNats.test.tsx +0 -81
  515. package/src/helpers/nats/useNats.ts +0 -204
  516. package/src/helpers/nats/useNatsSession.test.ts +0 -16
  517. package/src/helpers/nats/useNatsSession.ts +0 -460
  518. package/src/helpers/piiDetection.test.ts +0 -186
  519. package/src/helpers/piiDetection.ts +0 -91
  520. package/src/helpers/sanitizer.ts +0 -17
  521. package/src/helpers/statistics.ts +0 -58
  522. package/src/helpers/stt/useSTT.ts +0 -515
  523. package/src/helpers/translations.ts +0 -39
  524. package/src/helpers/tts/ttsVoiceUtility.ts +0 -275
  525. package/src/helpers/tts/useTTS.ts +0 -621
  526. package/src/helpers/utils.test.ts +0 -331
  527. package/src/helpers/utils.ts +0 -591
  528. package/src/helpers/venue.ts +0 -36
  529. package/src/i18n.ts +0 -39
  530. package/src/index.stories.tsx +0 -220
  531. package/src/index.test.tsx +0 -156
  532. package/src/index.tsx +0 -592
  533. package/src/locales/de.json +0 -680
  534. package/src/locales/en.json +0 -754
  535. package/src/locales/es.json +0 -682
  536. package/src/locales/fr.json +0 -682
  537. package/src/locales/it.json +0 -750
  538. package/src/mocks/data.ts +0 -790
  539. package/src/styles.css +0 -126
  540. package/src/types/integration.test.ts +0 -32
  541. package/src/types/integration.ts +0 -31
  542. package/src/types/layout.ts +0 -50
  543. package/src/version.ts +0 -2
package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx DELETED
@@ -1,2299 +0,0 @@
1
- // ArtifactSystem.stories.tsx
2
- import React, { useEffect } from 'react';
3
- 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';
9
- import {
10
- Message,
11
- Memori,
12
- Tenant,
13
- } from '@memori.ai/memori-api-client/dist/types';
14
- import { sanitizeText } from '../../helpers/sanitizer';
15
- import { ArtifactData } from './types/artifact.types';
16
-
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: 8px;
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: 50px;
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: 20px;
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: 15px;
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: 15px;
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>
578
- <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: 12px;
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: 10px;
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: 12px;
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
- });
905
- }
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
- }
922
- }
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
- }
930
- }
931
-
932
- deleteTodo(id) {
933
- this.todos = this.todos.filter(t => t.id !== id);
934
- this.renderTodos();
935
- }
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('');
945
- }
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>
1342
- </head>
1343
- <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>
1359
- </div>
1360
- </div>
1361
- </body>
1362
- </html>
1363
- </output>
1364
-
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
- }
1375
-
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
- }
1383
-
1384
- .stats-grid {
1385
- display: grid;
1386
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1387
- gap: 24px;
1388
- margin-top: 30px;
1389
- }
1390
-
1391
- .stat-card {
1392
- background: white;
1393
- border-radius: 16px;
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
- }
1399
-
1400
- .stat-card:hover {
1401
- transform: translateY(-8px);
1402
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
1403
- }
1404
-
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
- }
1413
-
1414
- .stat-card p {
1415
- color: #333;
1416
- font-size: 2.5rem;
1417
- font-weight: bold;
1418
- margin: 0;
1419
- }
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
- }
1451
-
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
- }
1459
-
1460
- render() {
1461
- const revenueEl = document.getElementById('revenue');
1462
- const customersEl = document.getElementById('customers');
1463
- const growthEl = document.getElementById('growth');
1464
-
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
- }
1478
-
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>
1488
-
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
1493
-
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
- ),
1513
- };
1514
-
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: 8px;
1554
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
1555
- }
1556
- </output>
1557
-
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>
1563
-
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"
1573
- },
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
- };
1621
-
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}
1634
-
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
- };
1655
-
1656
- export const ConversationFlow: Story = {
1657
- args: {},
1658
- 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
- />
1706
- ),
1707
- };
1708
-
1709
- export const NoArtifacts: Story = {
1710
- args: {},
1711
- 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
- />
1746
- ),
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: 8px;">
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: 8px; 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: 8px;">
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: 8px;">
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: 8px;">
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: 8px;">
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: 4px; 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 />;
2298
- },
2299
- };