@memori.ai/memori-react 8.45.2 → 8.45.5

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 (729) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/components/Chat/Chat.d.ts +1 -0
  3. package/dist/components/Chat/Chat.js +6 -3
  4. package/dist/components/Chat/Chat.js.map +1 -1
  5. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.css +78 -0
  6. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.d.ts +39 -0
  7. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.js +43 -0
  8. package/dist/components/ChatHistoryDrawer/ChatResumeDrawer.js.map +1 -0
  9. package/dist/components/ChatInputs/ChatInputs.d.ts +1 -0
  10. package/dist/components/ChatInputs/ChatInputs.js +2 -2
  11. package/dist/components/ChatInputs/ChatInputs.js.map +1 -1
  12. package/dist/components/ContentPreviewModal/DocumentMarkdown.d.ts +7 -0
  13. package/dist/components/ContentPreviewModal/DocumentMarkdown.js +31 -0
  14. package/dist/components/ContentPreviewModal/DocumentMarkdown.js.map +1 -0
  15. package/dist/components/DrawerFooter/DrawerFooter.css +62 -0
  16. package/dist/components/DrawerFooter/DrawerFooter.d.ts +12 -0
  17. package/dist/components/DrawerFooter/DrawerFooter.js +10 -0
  18. package/dist/components/DrawerFooter/DrawerFooter.js.map +1 -0
  19. package/dist/components/IconButton/IconButton.css +135 -0
  20. package/dist/components/IconButton/IconButton.d.ts +9 -0
  21. package/dist/components/IconButton/IconButton.js +36 -0
  22. package/dist/components/IconButton/IconButton.js.map +1 -0
  23. package/dist/components/LoginModal/LoginModal.css +270 -0
  24. package/dist/components/LoginModal/LoginModal.d.ts +19 -0
  25. package/dist/components/LoginModal/LoginModal.js +355 -0
  26. package/dist/components/LoginModal/LoginModal.js.map +1 -0
  27. package/dist/components/MemoriWidget/MemoriWidget.d.ts +2 -2
  28. package/dist/components/MemoriWidget/MemoriWidget.js +13 -21
  29. package/dist/components/MemoriWidget/MemoriWidget.js.map +1 -1
  30. package/dist/components/MobileSessionPanel/MobileSessionPanel.css +540 -0
  31. package/dist/components/MobileSessionPanel/MobileSessionPanel.d.ts +65 -0
  32. package/dist/components/MobileSessionPanel/MobileSessionPanel.js +254 -0
  33. package/dist/components/MobileSessionPanel/MobileSessionPanel.js.map +1 -0
  34. package/dist/components/PositionPopover/PositionPopover.css +218 -0
  35. package/dist/components/PositionPopover/PositionPopover.d.ts +22 -0
  36. package/dist/components/PositionPopover/PositionPopover.js +208 -0
  37. package/dist/components/PositionPopover/PositionPopover.js.map +1 -0
  38. package/dist/components/ReasoningBlock/ReasoningBlock.css +156 -0
  39. package/dist/components/ReasoningBlock/ReasoningBlock.d.ts +7 -0
  40. package/dist/components/ReasoningBlock/ReasoningBlock.js +61 -0
  41. package/dist/components/ReasoningBlock/ReasoningBlock.js.map +1 -0
  42. package/dist/components/SideDrawer/SideDrawer.css +112 -0
  43. package/dist/components/SideDrawer/SideDrawer.d.ts +22 -0
  44. package/dist/components/SideDrawer/SideDrawer.js +17 -0
  45. package/dist/components/SideDrawer/SideDrawer.js.map +1 -0
  46. package/dist/components/UploadButton/UploadButton.d.ts +2 -0
  47. package/dist/components/UploadButton/UploadButton.js +2 -2
  48. package/dist/components/UploadButton/UploadButton.js.map +1 -1
  49. package/dist/components/UploadButton/UploadImages/UploadImages.d.ts +2 -0
  50. package/dist/components/UploadButton/UploadImages/UploadImages.js +7 -1
  51. package/dist/components/UploadButton/UploadImages/UploadImages.js.map +1 -1
  52. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.d.ts +4 -0
  53. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.js +144 -0
  54. package/dist/components/layouts/WebsiteAssistant/WebsiteAssistant.js.map +1 -0
  55. package/{src/components/layouts → dist/components/layouts/WebsiteAssistant}/website-assistant.css +298 -86
  56. package/dist/components/layouts/chat.css +27 -4
  57. package/dist/components/layouts/fullpage.css +628 -0
  58. package/dist/helpers/artifactPanel.d.ts +6 -0
  59. package/dist/helpers/artifactPanel.js +42 -0
  60. package/dist/helpers/artifactPanel.js.map +1 -0
  61. package/dist/helpers/chatScroll.d.ts +12 -0
  62. package/dist/helpers/chatScroll.js +14 -0
  63. package/dist/helpers/chatScroll.js.map +1 -0
  64. package/dist/helpers/conversationHistory.d.ts +16 -0
  65. package/dist/helpers/conversationHistory.js +89 -0
  66. package/dist/helpers/conversationHistory.js.map +1 -0
  67. package/dist/helpers/conversationTitle.d.ts +8 -0
  68. package/dist/helpers/conversationTitle.js +27 -0
  69. package/dist/helpers/conversationTitle.js.map +1 -0
  70. package/dist/helpers/enhanceBubbleCodeBlocks.d.ts +5 -0
  71. package/dist/helpers/enhanceBubbleCodeBlocks.js +97 -0
  72. package/dist/helpers/enhanceBubbleCodeBlocks.js.map +1 -0
  73. package/dist/helpers/highlightMatches.d.ts +2 -0
  74. package/dist/helpers/highlightMatches.js +54 -0
  75. package/dist/helpers/highlightMatches.js.map +1 -0
  76. package/dist/helpers/nats/dialogStateCatchUp.d.ts +3 -0
  77. package/dist/helpers/nats/dialogStateCatchUp.js +40 -0
  78. package/dist/helpers/nats/dialogStateCatchUp.js.map +1 -0
  79. package/dist/helpers/positionPopover.d.ts +3 -0
  80. package/dist/helpers/positionPopover.js +22 -0
  81. package/dist/helpers/positionPopover.js.map +1 -0
  82. package/dist/helpers/prism.d.ts +16 -0
  83. package/dist/helpers/prism.js +78 -0
  84. package/dist/helpers/prism.js.map +1 -0
  85. package/dist/helpers/reasoning.d.ts +7 -0
  86. package/dist/helpers/reasoning.js +43 -0
  87. package/dist/helpers/reasoning.js.map +1 -0
  88. package/dist/helpers/relativeTime.d.ts +3 -0
  89. package/dist/helpers/relativeTime.js +56 -0
  90. package/dist/helpers/relativeTime.js.map +1 -0
  91. package/dist/helpers/sourcesCount.d.ts +2 -0
  92. package/dist/helpers/sourcesCount.js +22 -0
  93. package/dist/helpers/sourcesCount.js.map +1 -0
  94. package/dist/helpers/tts/muteSpeaker.d.ts +13 -0
  95. package/dist/helpers/tts/muteSpeaker.js +26 -0
  96. package/dist/helpers/tts/muteSpeaker.js.map +1 -0
  97. package/dist/helpers/usePressTooltip.d.ts +18 -0
  98. package/dist/helpers/usePressTooltip.js +38 -0
  99. package/dist/helpers/usePressTooltip.js.map +1 -0
  100. package/dist/icons/FacebookIcon.d.ts +3 -0
  101. package/dist/icons/FacebookIcon.js +6 -0
  102. package/dist/icons/FacebookIcon.js.map +1 -0
  103. package/dist/icons/LinkedinIcon.d.ts +3 -0
  104. package/dist/icons/LinkedinIcon.js +6 -0
  105. package/dist/icons/LinkedinIcon.js.map +1 -0
  106. package/dist/icons/MemoriIcon.d.ts +3 -0
  107. package/dist/icons/MemoriIcon.js +8 -0
  108. package/dist/icons/MemoriIcon.js.map +1 -0
  109. package/dist/icons/TelegramIcon.d.ts +3 -0
  110. package/dist/icons/TelegramIcon.js +6 -0
  111. package/dist/icons/TelegramIcon.js.map +1 -0
  112. package/dist/icons/TwitterIcon.d.ts +3 -0
  113. package/dist/icons/TwitterIcon.js +6 -0
  114. package/dist/icons/TwitterIcon.js.map +1 -0
  115. package/dist/icons/WhatsappIcon.d.ts +3 -0
  116. package/dist/icons/WhatsappIcon.js +6 -0
  117. package/dist/icons/WhatsappIcon.js.map +1 -0
  118. package/dist/icons/artifacts/DocumentIcon.d.ts +3 -0
  119. package/dist/icons/artifacts/DocumentIcon.js +6 -0
  120. package/dist/icons/artifacts/DocumentIcon.js.map +1 -0
  121. package/dist/icons/artifacts/HtmlIcon.d.ts +3 -0
  122. package/dist/icons/artifacts/HtmlIcon.js +6 -0
  123. package/dist/icons/artifacts/HtmlIcon.js.map +1 -0
  124. package/dist/icons/artifacts/JavascriptIcon.d.ts +3 -0
  125. package/dist/icons/artifacts/JavascriptIcon.js +6 -0
  126. package/dist/icons/artifacts/JavascriptIcon.js.map +1 -0
  127. package/dist/icons/artifacts/MarkdownIcon.d.ts +3 -0
  128. package/dist/icons/artifacts/MarkdownIcon.js +6 -0
  129. package/dist/icons/artifacts/MarkdownIcon.js.map +1 -0
  130. package/dist/icons/artifacts/PythonIcon.d.ts +3 -0
  131. package/dist/icons/artifacts/PythonIcon.js +6 -0
  132. package/dist/icons/artifacts/PythonIcon.js.map +1 -0
  133. package/dist/icons/artifacts/SvgIcon.d.ts +3 -0
  134. package/dist/icons/artifacts/SvgIcon.js +6 -0
  135. package/dist/icons/artifacts/SvgIcon.js.map +1 -0
  136. package/dist/icons/artifacts/XmlIcon.d.ts +3 -0
  137. package/dist/icons/artifacts/XmlIcon.js +6 -0
  138. package/dist/icons/artifacts/XmlIcon.js.map +1 -0
  139. package/dist/icons/artifacts/cssIcon.d.ts +3 -0
  140. package/dist/icons/artifacts/cssIcon.js +6 -0
  141. package/dist/icons/artifacts/cssIcon.js.map +1 -0
  142. package/dist/styles/motion.css +25 -0
  143. package/dist/styles.css +1 -2
  144. package/dist/version.d.ts +1 -1
  145. package/dist/version.js +1 -1
  146. package/esm/components/Chat/Chat.d.ts +1 -0
  147. package/esm/components/Chat/Chat.js +6 -3
  148. package/esm/components/Chat/Chat.js.map +1 -1
  149. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.d.ts +39 -0
  150. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.js +40 -0
  151. package/esm/components/ChatHistoryDrawer/ChatResumeDrawer.js.map +1 -0
  152. package/esm/components/ChatInputs/ChatInputs.d.ts +1 -0
  153. package/esm/components/ChatInputs/ChatInputs.js +2 -2
  154. package/esm/components/ChatInputs/ChatInputs.js.map +1 -1
  155. package/esm/components/ContentPreviewModal/DocumentMarkdown.d.ts +7 -0
  156. package/esm/components/ContentPreviewModal/DocumentMarkdown.js +28 -0
  157. package/esm/components/ContentPreviewModal/DocumentMarkdown.js.map +1 -0
  158. package/esm/components/DrawerFooter/DrawerFooter.d.ts +12 -0
  159. package/esm/components/DrawerFooter/DrawerFooter.js +8 -0
  160. package/esm/components/DrawerFooter/DrawerFooter.js.map +1 -0
  161. package/esm/components/IconButton/IconButton.d.ts +9 -0
  162. package/esm/components/IconButton/IconButton.js +33 -0
  163. package/esm/components/IconButton/IconButton.js.map +1 -0
  164. package/esm/components/LoginModal/LoginModal.d.ts +19 -0
  165. package/esm/components/LoginModal/LoginModal.js +352 -0
  166. package/esm/components/LoginModal/LoginModal.js.map +1 -0
  167. package/esm/components/MemoriWidget/MemoriWidget.d.ts +2 -2
  168. package/esm/components/MemoriWidget/MemoriWidget.js +8 -17
  169. package/esm/components/MemoriWidget/MemoriWidget.js.map +1 -1
  170. package/esm/components/MobileSessionPanel/MobileSessionPanel.d.ts +65 -0
  171. package/esm/components/MobileSessionPanel/MobileSessionPanel.js +251 -0
  172. package/esm/components/MobileSessionPanel/MobileSessionPanel.js.map +1 -0
  173. package/esm/components/PositionPopover/PositionPopover.d.ts +22 -0
  174. package/esm/components/PositionPopover/PositionPopover.js +203 -0
  175. package/esm/components/PositionPopover/PositionPopover.js.map +1 -0
  176. package/esm/components/ReasoningBlock/ReasoningBlock.d.ts +7 -0
  177. package/esm/components/ReasoningBlock/ReasoningBlock.js +58 -0
  178. package/esm/components/ReasoningBlock/ReasoningBlock.js.map +1 -0
  179. package/esm/components/SideDrawer/SideDrawer.d.ts +22 -0
  180. package/esm/components/SideDrawer/SideDrawer.js +12 -0
  181. package/esm/components/SideDrawer/SideDrawer.js.map +1 -0
  182. package/esm/components/UploadButton/UploadButton.d.ts +2 -0
  183. package/esm/components/UploadButton/UploadButton.js +2 -2
  184. package/esm/components/UploadButton/UploadButton.js.map +1 -1
  185. package/esm/components/UploadButton/UploadImages/UploadImages.d.ts +2 -0
  186. package/esm/components/UploadButton/UploadImages/UploadImages.js +7 -1
  187. package/esm/components/UploadButton/UploadImages/UploadImages.js.map +1 -1
  188. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.d.ts +4 -0
  189. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.js +141 -0
  190. package/esm/components/layouts/WebsiteAssistant/WebsiteAssistant.js.map +1 -0
  191. package/esm/components/layouts/chat.css +27 -4
  192. package/esm/helpers/artifactPanel.d.ts +6 -0
  193. package/esm/helpers/artifactPanel.js +37 -0
  194. package/esm/helpers/artifactPanel.js.map +1 -0
  195. package/esm/helpers/chatScroll.d.ts +12 -0
  196. package/esm/helpers/chatScroll.js +9 -0
  197. package/esm/helpers/chatScroll.js.map +1 -0
  198. package/esm/helpers/conversationHistory.d.ts +16 -0
  199. package/esm/helpers/conversationHistory.js +82 -0
  200. package/esm/helpers/conversationHistory.js.map +1 -0
  201. package/esm/helpers/conversationTitle.d.ts +8 -0
  202. package/esm/helpers/conversationTitle.js +23 -0
  203. package/esm/helpers/conversationTitle.js.map +1 -0
  204. package/esm/helpers/enhanceBubbleCodeBlocks.d.ts +5 -0
  205. package/esm/helpers/enhanceBubbleCodeBlocks.js +94 -0
  206. package/esm/helpers/enhanceBubbleCodeBlocks.js.map +1 -0
  207. package/esm/helpers/highlightMatches.d.ts +2 -0
  208. package/esm/helpers/highlightMatches.js +49 -0
  209. package/esm/helpers/highlightMatches.js.map +1 -0
  210. package/esm/helpers/nats/dialogStateCatchUp.d.ts +3 -0
  211. package/esm/helpers/nats/dialogStateCatchUp.js +35 -0
  212. package/esm/helpers/nats/dialogStateCatchUp.js.map +1 -0
  213. package/esm/helpers/positionPopover.d.ts +3 -0
  214. package/esm/helpers/positionPopover.js +17 -0
  215. package/esm/helpers/positionPopover.js.map +1 -0
  216. package/esm/helpers/prism.d.ts +16 -0
  217. package/esm/helpers/prism.js +74 -0
  218. package/esm/helpers/prism.js.map +1 -0
  219. package/esm/helpers/reasoning.d.ts +7 -0
  220. package/esm/helpers/reasoning.js +39 -0
  221. package/esm/helpers/reasoning.js.map +1 -0
  222. package/esm/helpers/relativeTime.d.ts +3 -0
  223. package/esm/helpers/relativeTime.js +50 -0
  224. package/esm/helpers/relativeTime.js.map +1 -0
  225. package/esm/helpers/sourcesCount.d.ts +2 -0
  226. package/esm/helpers/sourcesCount.js +18 -0
  227. package/esm/helpers/sourcesCount.js.map +1 -0
  228. package/esm/helpers/tts/muteSpeaker.d.ts +13 -0
  229. package/esm/helpers/tts/muteSpeaker.js +21 -0
  230. package/esm/helpers/tts/muteSpeaker.js.map +1 -0
  231. package/esm/helpers/usePressTooltip.d.ts +18 -0
  232. package/esm/helpers/usePressTooltip.js +35 -0
  233. package/esm/helpers/usePressTooltip.js.map +1 -0
  234. package/esm/icons/FacebookIcon.d.ts +3 -0
  235. package/esm/icons/FacebookIcon.js +4 -0
  236. package/esm/icons/FacebookIcon.js.map +1 -0
  237. package/esm/icons/LinkedinIcon.d.ts +3 -0
  238. package/esm/icons/LinkedinIcon.js +4 -0
  239. package/esm/icons/LinkedinIcon.js.map +1 -0
  240. package/esm/icons/MemoriIcon.d.ts +3 -0
  241. package/esm/icons/MemoriIcon.js +6 -0
  242. package/esm/icons/MemoriIcon.js.map +1 -0
  243. package/esm/icons/TelegramIcon.d.ts +3 -0
  244. package/esm/icons/TelegramIcon.js +4 -0
  245. package/esm/icons/TelegramIcon.js.map +1 -0
  246. package/esm/icons/TwitterIcon.d.ts +3 -0
  247. package/esm/icons/TwitterIcon.js +4 -0
  248. package/esm/icons/TwitterIcon.js.map +1 -0
  249. package/esm/icons/WhatsappIcon.d.ts +3 -0
  250. package/esm/icons/WhatsappIcon.js +4 -0
  251. package/esm/icons/WhatsappIcon.js.map +1 -0
  252. package/esm/icons/artifacts/DocumentIcon.d.ts +3 -0
  253. package/esm/icons/artifacts/DocumentIcon.js +4 -0
  254. package/esm/icons/artifacts/DocumentIcon.js.map +1 -0
  255. package/esm/icons/artifacts/HtmlIcon.d.ts +3 -0
  256. package/esm/icons/artifacts/HtmlIcon.js +4 -0
  257. package/esm/icons/artifacts/HtmlIcon.js.map +1 -0
  258. package/esm/icons/artifacts/JavascriptIcon.d.ts +3 -0
  259. package/esm/icons/artifacts/JavascriptIcon.js +4 -0
  260. package/esm/icons/artifacts/JavascriptIcon.js.map +1 -0
  261. package/esm/icons/artifacts/MarkdownIcon.d.ts +3 -0
  262. package/esm/icons/artifacts/MarkdownIcon.js +4 -0
  263. package/esm/icons/artifacts/MarkdownIcon.js.map +1 -0
  264. package/esm/icons/artifacts/PythonIcon.d.ts +3 -0
  265. package/esm/icons/artifacts/PythonIcon.js +4 -0
  266. package/esm/icons/artifacts/PythonIcon.js.map +1 -0
  267. package/esm/icons/artifacts/SvgIcon.d.ts +3 -0
  268. package/esm/icons/artifacts/SvgIcon.js +4 -0
  269. package/esm/icons/artifacts/SvgIcon.js.map +1 -0
  270. package/esm/icons/artifacts/XmlIcon.d.ts +3 -0
  271. package/esm/icons/artifacts/XmlIcon.js +4 -0
  272. package/esm/icons/artifacts/XmlIcon.js.map +1 -0
  273. package/esm/icons/artifacts/cssIcon.d.ts +3 -0
  274. package/esm/icons/artifacts/cssIcon.js +4 -0
  275. package/esm/icons/artifacts/cssIcon.js.map +1 -0
  276. package/esm/styles.css +1 -2
  277. package/esm/version.d.ts +1 -1
  278. package/esm/version.js +1 -1
  279. package/package.json +7 -7
  280. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts +0 -3
  281. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js +0 -64
  282. package/dist/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map +0 -1
  283. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts +0 -3
  284. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js +0 -62
  285. package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map +0 -1
  286. package/src/I18nWrapper.tsx +0 -13
  287. package/src/__snapshots__/index.test.tsx.snap +0 -96
  288. package/src/components/AgeVerificationModal/AgeVerificationModal.css +0 -95
  289. package/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx +0 -46
  290. package/src/components/AgeVerificationModal/AgeVerificationModal.test.tsx +0 -33
  291. package/src/components/AgeVerificationModal/AgeVerificationModal.tsx +0 -99
  292. package/src/components/AgeVerificationModal/__snapshots__/AgeVerificationModal.test.tsx.snap +0 -19
  293. package/src/components/Auth/Auth.css +0 -57
  294. package/src/components/Auth/Auth.stories.tsx +0 -90
  295. package/src/components/Auth/Auth.test.tsx +0 -63
  296. package/src/components/Auth/Auth.tsx +0 -201
  297. package/src/components/Auth/__snapshots__/Auth.test.tsx.snap +0 -143
  298. package/src/components/Avatar/Avatar.css +0 -151
  299. package/src/components/Avatar/Avatar.stories.tsx +0 -160
  300. package/src/components/Avatar/Avatar.test.tsx +0 -158
  301. package/src/components/Avatar/Avatar.tsx +0 -245
  302. package/src/components/Avatar/AvatarView/AvatarComponent/Shadow/DynamicShadow.tsx +0 -103
  303. package/src/components/Avatar/AvatarView/AvatarComponent/avatarComponent.tsx +0 -105
  304. package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.tsx +0 -338
  305. package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/types.ts +0 -44
  306. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/AvatarAnimator.ts +0 -1091
  307. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/AvatarPositionController.ts +0 -83
  308. package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.ts +0 -301
  309. package/src/components/Avatar/AvatarView/AvatarComponent/components/controls.tsx +0 -100
  310. package/src/components/Avatar/AvatarView/AvatarComponent/components/halfbodyAvatar.tsx +0 -152
  311. package/src/components/Avatar/AvatarView/AvatarComponent/components/loader.tsx +0 -31
  312. package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts +0 -141
  313. package/src/components/Avatar/AvatarView/AvatarComponent/lights/Lights.tsx +0 -145
  314. package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css +0 -111
  315. package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx +0 -201
  316. package/src/components/Avatar/AvatarView/AvatarView.stories.tsx +0 -254
  317. package/src/components/Avatar/AvatarView/index.tsx +0 -194
  318. package/src/components/Avatar/AvatarView/utils/hideHands.ts +0 -11
  319. package/src/components/Avatar/AvatarView/utils/useEyeBlink.ts +0 -100
  320. package/src/components/Avatar/AvatarView/utils/useHeadMovement.ts +0 -72
  321. package/src/components/Avatar/AvatarView/utils/useLoadingMorphAnim.ts +0 -38
  322. package/src/components/Avatar/AvatarView/utils/useMouthAnimation.ts +0 -93
  323. package/src/components/Avatar/AvatarView/utils/useSmile.ts +0 -39
  324. package/src/components/Avatar/AvatarView/utils/utils.ts +0 -55
  325. package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +0 -246
  326. package/src/components/Blob/Blob.css +0 -286
  327. package/src/components/Blob/Blob.stories.tsx +0 -53
  328. package/src/components/Blob/Blob.test.tsx +0 -18
  329. package/src/components/Blob/Blob.tsx +0 -26
  330. package/src/components/Blob/__snapshots__/Blob.test.tsx.snap +0 -80
  331. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.css +0 -40
  332. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.stories.tsx +0 -58
  333. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.test.tsx +0 -53
  334. package/src/components/BlockedMemoriBadge/BlockedMemoriBadge.tsx +0 -74
  335. package/src/components/BlockedMemoriBadge/__snapshots__/BlockedMemoriBadge.test.tsx.snap +0 -181
  336. package/src/components/ChangeMode/ChangeMode.css +0 -22
  337. package/src/components/ChangeMode/ChangeMode.stories.tsx +0 -50
  338. package/src/components/ChangeMode/ChangeMode.test.tsx +0 -24
  339. package/src/components/ChangeMode/ChangeMode.tsx +0 -51
  340. package/src/components/ChangeMode/__snapshots__/ChangeMode.test.tsx.snap +0 -107
  341. package/src/components/Chat/Chat.css +0 -285
  342. package/src/components/Chat/Chat.stories.tsx +0 -1684
  343. package/src/components/Chat/Chat.test.tsx +0 -372
  344. package/src/components/Chat/Chat.tsx +0 -778
  345. package/src/components/Chat/__snapshots__/Chat.test.tsx.snap +0 -6816
  346. package/src/components/ChatBubble/ChatBubble.css +0 -430
  347. package/src/components/ChatBubble/ChatBubble.stories.tsx +0 -1192
  348. package/src/components/ChatBubble/ChatBubble.test.tsx +0 -481
  349. package/src/components/ChatBubble/ChatBubble.tsx +0 -776
  350. package/src/components/ChatBubble/__snapshots__/ChatBubble.test.tsx.snap +0 -8734
  351. package/src/components/ChatHistoryDrawer/ChatHistory.css +0 -587
  352. package/src/components/ChatHistoryDrawer/ChatHistory.stories.tsx +0 -410
  353. package/src/components/ChatHistoryDrawer/ChatHistory.test.tsx +0 -107
  354. package/src/components/ChatHistoryDrawer/ChatHistory.tsx +0 -1298
  355. package/src/components/ChatHistoryDrawer/__snapshots__/ChatHistory.test.tsx.snap +0 -27
  356. package/src/components/ChatInputs/ChatInputs.css +0 -340
  357. package/src/components/ChatInputs/ChatInputs.stories.tsx +0 -251
  358. package/src/components/ChatInputs/ChatInputs.tsx +0 -487
  359. package/src/components/ChatTextArea/ChatTextArea.css +0 -185
  360. package/src/components/ChatTextArea/ChatTextArea.stories.tsx +0 -55
  361. package/src/components/ChatTextArea/ChatTextArea.test.tsx +0 -28
  362. package/src/components/ChatTextArea/ChatTextArea.tsx +0 -171
  363. package/src/components/ChatTextArea/__snapshots__/ChatTextArea.test.tsx.snap +0 -68
  364. package/src/components/CompletionProviderStatus/CompletionProviderStatus.css +0 -36
  365. package/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx +0 -296
  366. package/src/components/CompletionProviderStatus/CompletionProviderStatus.test.tsx +0 -31
  367. package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx +0 -232
  368. package/src/components/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap +0 -96
  369. package/src/components/ContentPreviewModal/ContentPreviewModal.css +0 -128
  370. package/src/components/ContentPreviewModal/ContentPreviewModal.tsx +0 -67
  371. package/src/components/ContentPreviewModal/index.ts +0 -2
  372. package/src/components/CustomGLBModelViewer/ModelViewer.css +0 -11
  373. package/src/components/CustomGLBModelViewer/ModelViewer.stories.tsx +0 -58
  374. package/src/components/CustomGLBModelViewer/ModelViewer.test.tsx +0 -13
  375. package/src/components/CustomGLBModelViewer/ModelViewer.tsx +0 -37
  376. package/src/components/CustomGLBModelViewer/__snapshots__/ModelViewer.test.tsx.snap +0 -20
  377. package/src/components/DateSelector/DateSelector.css +0 -158
  378. package/src/components/DateSelector/DateSelector.stories.tsx +0 -47
  379. package/src/components/DateSelector/DateSelector.test.tsx +0 -149
  380. package/src/components/DateSelector/DateSelector.tsx +0 -251
  381. package/src/components/DateSelector/__snapshots__/DateSelector.test.tsx.snap +0 -1954
  382. package/src/components/ErrorBoundary/ErrorBoundary.tsx +0 -54
  383. package/src/components/ExpertsDrawer/ExpertsDrawer.css +0 -67
  384. package/src/components/ExpertsDrawer/ExpertsDrawer.stories.tsx +0 -54
  385. package/src/components/ExpertsDrawer/ExpertsDrawer.test.tsx +0 -53
  386. package/src/components/ExpertsDrawer/ExpertsDrawer.tsx +0 -69
  387. package/src/components/ExpertsDrawer/__snapshots__/ExpertsDrawer.test.tsx.snap +0 -11
  388. package/src/components/ExportHistoryButton/ExportHistoryButton.css +0 -22
  389. package/src/components/FeedbackButtons/FeedbackButtons.css +0 -107
  390. package/src/components/FeedbackButtons/FeedbackButtons.stories.tsx +0 -52
  391. package/src/components/FeedbackButtons/FeedbackButtons.test.tsx +0 -11
  392. package/src/components/FeedbackButtons/FeedbackButtons.tsx +0 -152
  393. package/src/components/FeedbackButtons/__snapshots__/FeedbackButtons.test.tsx.snap +0 -42
  394. package/src/components/FilePreview/FilePreview.css +0 -358
  395. package/src/components/FilePreview/FilePreview.stories.tsx +0 -63
  396. package/src/components/FilePreview/FilePreview.test.tsx +0 -26
  397. package/src/components/FilePreview/FilePreview.tsx +0 -277
  398. package/src/components/FilePreview/__snapshots__/FilePreview.test.tsx.snap +0 -185
  399. package/src/components/Header/ChatConsumptionDropdown.test.tsx +0 -117
  400. package/src/components/Header/ChatConsumptionDropdown.tsx +0 -275
  401. package/src/components/Header/Header.css +0 -282
  402. package/src/components/Header/Header.stories.tsx +0 -338
  403. package/src/components/Header/Header.test.tsx +0 -371
  404. package/src/components/Header/Header.tsx +0 -442
  405. package/src/components/Header/__snapshots__/Header.test.tsx.snap +0 -964
  406. package/src/components/KnownFacts/KnownFacts.css +0 -19
  407. package/src/components/KnownFacts/KnownFacts.stories.tsx +0 -80
  408. package/src/components/KnownFacts/KnownFacts.test.tsx +0 -57
  409. package/src/components/KnownFacts/KnownFacts.tsx +0 -376
  410. package/src/components/KnownFacts/__snapshots__/KnownFacts.test.tsx.snap +0 -19
  411. package/src/components/LoginDrawer/LoginDrawer.css +0 -1616
  412. package/src/components/LoginDrawer/LoginDrawer.stories.tsx +0 -102
  413. package/src/components/LoginDrawer/LoginDrawer.test.tsx +0 -199
  414. package/src/components/LoginDrawer/LoginDrawer.tsx +0 -600
  415. package/src/components/LoginDrawer/__snapshots__/LoginDrawer.test.tsx.snap +0 -91
  416. package/src/components/MediaWidget/DocumentCard.test.tsx +0 -45
  417. package/src/components/MediaWidget/DocumentCard.tsx +0 -19
  418. package/src/components/MediaWidget/MediaItemWidget.css +0 -1398
  419. package/src/components/MediaWidget/MediaItemWidget.stories.tsx +0 -423
  420. package/src/components/MediaWidget/MediaItemWidget.test.tsx +0 -248
  421. package/src/components/MediaWidget/MediaItemWidget.tsx +0 -997
  422. package/src/components/MediaWidget/MediaItemWidget.types.ts +0 -65
  423. package/src/components/MediaWidget/MediaItemWidget.utils.test.ts +0 -367
  424. package/src/components/MediaWidget/MediaItemWidget.utils.ts +0 -227
  425. package/src/components/MediaWidget/MediaPreviewModal.test.tsx +0 -271
  426. package/src/components/MediaWidget/MediaPreviewModal.tsx +0 -425
  427. package/src/components/MediaWidget/MediaWidget.css +0 -131
  428. package/src/components/MediaWidget/MediaWidget.stories.tsx +0 -319
  429. package/src/components/MediaWidget/MediaWidget.test.tsx +0 -41
  430. package/src/components/MediaWidget/MediaWidget.tsx +0 -107
  431. package/src/components/MediaWidget/__snapshots__/DocumentCard.test.tsx.snap +0 -24
  432. package/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap +0 -791
  433. package/src/components/MediaWidget/__snapshots__/MediaWidget.test.tsx.snap +0 -154
  434. package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx +0 -2299
  435. package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css +0 -163
  436. package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.tsx +0 -250
  437. package/src/components/MemoriArtifactSystem/components/ArtifactActions/CopyButton.stories.tsx +0 -30
  438. package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyButtonWithDropdown.tsx +0 -467
  439. package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyMenuItem.tsx +0 -89
  440. package/src/components/MemoriArtifactSystem/components/ArtifactActions/hooks/useCopyArtifact.ts +0 -619
  441. package/src/components/MemoriArtifactSystem/components/ArtifactActions/index.ts +0 -9
  442. package/src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css +0 -489
  443. package/src/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.tsx +0 -90
  444. package/src/components/MemoriArtifactSystem/components/ArtifactActions/types.ts +0 -73
  445. package/src/components/MemoriArtifactSystem/components/ArtifactActions/utils/PDFExporter.ts +0 -454
  446. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css +0 -1059
  447. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx +0 -431
  448. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css +0 -150
  449. package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.tsx +0 -79
  450. package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.css +0 -253
  451. package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx +0 -561
  452. package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css +0 -355
  453. package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx +0 -160
  454. package/src/components/MemoriArtifactSystem/context/ArtifactContext.tsx +0 -167
  455. package/src/components/MemoriArtifactSystem/types/artifact.types.ts +0 -35
  456. package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.test.tsx +0 -308
  457. package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.tsx +0 -379
  458. package/src/components/MemoriArtifactSystem/utils/applyEdits.test.ts +0 -85
  459. package/src/components/MemoriArtifactSystem/utils/applyEdits.ts +0 -173
  460. package/src/components/MemoriWidget/MemoriWidget.css +0 -220
  461. package/src/components/MemoriWidget/MemoriWidget.stories.tsx +0 -274
  462. package/src/components/MemoriWidget/MemoriWidget.tsx +0 -3930
  463. package/src/components/MicrophoneButton/MicrophoneButton.css +0 -142
  464. package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx +0 -52
  465. package/src/components/MicrophoneButton/MicrophoneButton.tsx +0 -128
  466. package/src/components/PositionDrawer/PositionDrawer.stories.tsx +0 -51
  467. package/src/components/PositionDrawer/PositionDrawer.test.tsx +0 -39
  468. package/src/components/PositionDrawer/PositionDrawer.tsx +0 -50
  469. package/src/components/PositionDrawer/__snapshots__/PositionDrawer.test.tsx.snap +0 -17
  470. package/src/components/PoweredBy/PoweredBy.css +0 -47
  471. package/src/components/PoweredBy/PoweredBy.stories.tsx +0 -75
  472. package/src/components/PoweredBy/PoweredBy.test.tsx +0 -15
  473. package/src/components/PoweredBy/PoweredBy.tsx +0 -44
  474. package/src/components/PoweredBy/__snapshots__/PoweredBy.test.tsx.snap +0 -55
  475. package/src/components/SendOnEnterMenu/SendOnEnterMenu.css +0 -47
  476. package/src/components/SendOnEnterMenu/SendOnEnterMenu.stories.tsx +0 -58
  477. package/src/components/SendOnEnterMenu/SendOnEnterMenu.test.tsx +0 -17
  478. package/src/components/SendOnEnterMenu/SendOnEnterMenu.tsx +0 -82
  479. package/src/components/SendOnEnterMenu/__snapshots__/SendOnEnterMenu.test.tsx.snap +0 -57
  480. package/src/components/SettingsDrawer/SettingsDrawer.css +0 -24
  481. package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx +0 -94
  482. package/src/components/SettingsDrawer/SettingsDrawer.test.tsx +0 -202
  483. package/src/components/SettingsDrawer/SettingsDrawer.tsx +0 -255
  484. package/src/components/SettingsDrawer/__snapshots__/SettingsDrawer.test.tsx.snap +0 -59
  485. package/src/components/ShareButton/ShareButton.css +0 -73
  486. package/src/components/ShareButton/ShareButton.stories.tsx +0 -98
  487. package/src/components/ShareButton/ShareButton.test.tsx +0 -53
  488. package/src/components/ShareButton/ShareButton.tsx +0 -395
  489. package/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap +0 -316
  490. package/src/components/Snippet/Snippet.css +0 -142
  491. package/src/components/Snippet/Snippet.stories.tsx +0 -286
  492. package/src/components/Snippet/Snippet.test.tsx +0 -176
  493. package/src/components/Snippet/Snippet.tsx +0 -148
  494. package/src/components/Snippet/__snapshots__/Snippet.test.tsx.snap +0 -603
  495. package/src/components/StartPanel/StartPanel.css +0 -273
  496. package/src/components/StartPanel/StartPanel.stories.tsx +0 -404
  497. package/src/components/StartPanel/StartPanel.test.tsx +0 -360
  498. package/src/components/StartPanel/StartPanel.tsx +0 -426
  499. package/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap +0 -1986
  500. package/src/components/Typing/Typing.stories.tsx +0 -130
  501. package/src/components/Typing/Typing.test.tsx +0 -62
  502. package/src/components/Typing/Typing.tsx +0 -154
  503. package/src/components/Typing/__snapshots__/Typing.test.tsx.snap +0 -133
  504. package/src/components/UploadButton/UploadButton.css +0 -542
  505. package/src/components/UploadButton/UploadButton.stories.tsx +0 -376
  506. package/src/components/UploadButton/UploadButton.test.tsx +0 -11
  507. package/src/components/UploadButton/UploadButton.tsx +0 -688
  508. package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx +0 -421
  509. package/src/components/UploadButton/UploadImages/UploadImages.tsx +0 -538
  510. package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap +0 -165
  511. package/src/components/VenueWidget/VenueWidget.css +0 -163
  512. package/src/components/VenueWidget/VenueWidget.stories.tsx +0 -66
  513. package/src/components/VenueWidget/VenueWidget.test.tsx +0 -49
  514. package/src/components/VenueWidget/VenueWidget.tsx +0 -458
  515. package/src/components/VenueWidget/__snapshots__/VenueWidget.test.tsx.snap +0 -370
  516. package/src/components/WhyThisAnswer/WhyThisAnswer.css +0 -171
  517. package/src/components/WhyThisAnswer/WhyThisAnswer.stories.tsx +0 -285
  518. package/src/components/WhyThisAnswer/WhyThisAnswer.test.tsx +0 -245
  519. package/src/components/WhyThisAnswer/WhyThisAnswer.tsx +0 -233
  520. package/src/components/WhyThisAnswer/__snapshots__/WhyThisAnswer.test.tsx.snap +0 -27
  521. package/src/components/icons/AI.tsx +0 -34
  522. package/src/components/icons/Alert.tsx +0 -31
  523. package/src/components/icons/ArrowUp.tsx +0 -28
  524. package/src/components/icons/Bug.tsx +0 -81
  525. package/src/components/icons/Chat.tsx +0 -30
  526. package/src/components/icons/ChevronDown.tsx +0 -26
  527. package/src/components/icons/ChevronLeft.tsx +0 -28
  528. package/src/components/icons/ChevronRight.tsx +0 -28
  529. package/src/components/icons/ChevronUp.tsx +0 -24
  530. package/src/components/icons/Clear.tsx +0 -23
  531. package/src/components/icons/Close.tsx +0 -30
  532. package/src/components/icons/Code.tsx +0 -24
  533. package/src/components/icons/Copy.tsx +0 -23
  534. package/src/components/icons/DeepThought.tsx +0 -38
  535. package/src/components/icons/Delete.tsx +0 -23
  536. package/src/components/icons/Document.tsx +0 -50
  537. package/src/components/icons/Download.tsx +0 -23
  538. package/src/components/icons/Edit.tsx +0 -17
  539. package/src/components/icons/Expand.tsx +0 -23
  540. package/src/components/icons/Eye.tsx +0 -17
  541. package/src/components/icons/EyeInvisible.tsx +0 -24
  542. package/src/components/icons/Facebook.tsx +0 -23
  543. package/src/components/icons/Feedback.tsx +0 -24
  544. package/src/components/icons/File.tsx +0 -17
  545. package/src/components/icons/FileExcel.tsx +0 -23
  546. package/src/components/icons/FilePdf.tsx +0 -23
  547. package/src/components/icons/FileWord.tsx +0 -23
  548. package/src/components/icons/Fullscreen.tsx +0 -23
  549. package/src/components/icons/FullscreenExit.tsx +0 -23
  550. package/src/components/icons/GasStation.tsx +0 -36
  551. package/src/components/icons/Group.tsx +0 -30
  552. package/src/components/icons/History.tsx +0 -33
  553. package/src/components/icons/Image.tsx +0 -37
  554. package/src/components/icons/Info.tsx +0 -31
  555. package/src/components/icons/Link.tsx +0 -17
  556. package/src/components/icons/Linkedin.tsx +0 -23
  557. package/src/components/icons/Loading.tsx +0 -28
  558. package/src/components/icons/Logout.tsx +0 -27
  559. package/src/components/icons/Mail.tsx +0 -17
  560. package/src/components/icons/MapMarker.tsx +0 -26
  561. package/src/components/icons/MenuHorizontal.tsx +0 -29
  562. package/src/components/icons/MenuVertical.tsx +0 -29
  563. package/src/components/icons/Message.tsx +0 -23
  564. package/src/components/icons/Microphone.tsx +0 -23
  565. package/src/components/icons/Minus.tsx +0 -23
  566. package/src/components/icons/MinusCircle.tsx +0 -24
  567. package/src/components/icons/PaperClip.tsx +0 -23
  568. package/src/components/icons/Picture.tsx +0 -23
  569. package/src/components/icons/Plus.tsx +0 -18
  570. package/src/components/icons/Preview.tsx +0 -29
  571. package/src/components/icons/Print.tsx +0 -38
  572. package/src/components/icons/QuestionHelp.tsx +0 -30
  573. package/src/components/icons/Refresh.tsx +0 -30
  574. package/src/components/icons/SelectIcon.tsx +0 -28
  575. package/src/components/icons/Send.tsx +0 -17
  576. package/src/components/icons/Setting.tsx +0 -23
  577. package/src/components/icons/Share.tsx +0 -23
  578. package/src/components/icons/Sound.tsx +0 -23
  579. package/src/components/icons/SoundDeactivated.tsx +0 -27
  580. package/src/components/icons/Telegram.tsx +0 -26
  581. package/src/components/icons/ThumbDown.tsx +0 -29
  582. package/src/components/icons/ThumbUp.tsx +0 -29
  583. package/src/components/icons/Translation.tsx +0 -24
  584. package/src/components/icons/Twitter.tsx +0 -23
  585. package/src/components/icons/Upload.tsx +0 -34
  586. package/src/components/icons/User.tsx +0 -17
  587. package/src/components/icons/Warning.tsx +0 -24
  588. package/src/components/icons/WhatsApp.tsx +0 -24
  589. package/src/components/icons/icons.stories.css +0 -5
  590. package/src/components/icons/icons.stories.tsx +0 -81
  591. package/src/components/icons/loading.css +0 -14
  592. package/src/components/layouts/Chat.test.tsx +0 -40
  593. package/src/components/layouts/Chat.tsx +0 -69
  594. package/src/components/layouts/FullBody/FullBody.stories.tsx +0 -110
  595. package/src/components/layouts/FullPage.test.tsx +0 -65
  596. package/src/components/layouts/FullPage.tsx +0 -80
  597. package/src/components/layouts/HiddenChat.test.tsx +0 -40
  598. package/src/components/layouts/HiddenChat.tsx +0 -233
  599. package/src/components/layouts/Totem/Totem.stories.tsx +0 -131
  600. package/src/components/layouts/Totem.test.tsx +0 -40
  601. package/src/components/layouts/Totem.tsx +0 -49
  602. package/src/components/layouts/WebsiteAssistant.test.tsx +0 -40
  603. package/src/components/layouts/WebsiteAssistant.tsx +0 -132
  604. package/src/components/layouts/ZoomedFullBody/ZoomedFullBody.stories.tsx +0 -131
  605. package/src/components/layouts/ZoomedFullBody.test.tsx +0 -40
  606. package/src/components/layouts/ZoomedFullBody.tsx +0 -81
  607. package/src/components/layouts/__snapshots__/Chat.test.tsx.snap +0 -457
  608. package/src/components/layouts/__snapshots__/FullPage.test.tsx.snap +0 -1045
  609. package/src/components/layouts/__snapshots__/HiddenChat.test.tsx.snap +0 -460
  610. package/src/components/layouts/__snapshots__/Totem.test.tsx.snap +0 -566
  611. package/src/components/layouts/__snapshots__/WebsiteAssistant.test.tsx.snap +0 -59
  612. package/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap +0 -523
  613. package/src/components/layouts/chat.css +0 -451
  614. package/src/components/layouts/hidden-chat.css +0 -276
  615. package/src/components/layouts/layouts.stories.tsx +0 -231
  616. package/src/components/layouts/totem.css +0 -221
  617. package/src/components/layouts/zoomed-full-body.css +0 -18
  618. package/src/components/ui/Alert.css +0 -93
  619. package/src/components/ui/Alert.stories.tsx +0 -137
  620. package/src/components/ui/Alert.test.tsx +0 -129
  621. package/src/components/ui/Alert.tsx +0 -123
  622. package/src/components/ui/Button.css +0 -167
  623. package/src/components/ui/Button.stories.tsx +0 -156
  624. package/src/components/ui/Button.test.tsx +0 -74
  625. package/src/components/ui/Button.tsx +0 -107
  626. package/src/components/ui/Card.css +0 -65
  627. package/src/components/ui/Card.stories.tsx +0 -95
  628. package/src/components/ui/Card.test.tsx +0 -47
  629. package/src/components/ui/Card.tsx +0 -48
  630. package/src/components/ui/Checkbox.css +0 -116
  631. package/src/components/ui/Checkbox.stories.tsx +0 -74
  632. package/src/components/ui/Checkbox.test.tsx +0 -28
  633. package/src/components/ui/Checkbox.tsx +0 -58
  634. package/src/components/ui/ConfirmDialog.css +0 -42
  635. package/src/components/ui/ConfirmDialog.stories.tsx +0 -216
  636. package/src/components/ui/ConfirmDialog.test.tsx +0 -124
  637. package/src/components/ui/ConfirmDialog.tsx +0 -58
  638. package/src/components/ui/Details.css +0 -66
  639. package/src/components/ui/Drawer.css +0 -270
  640. package/src/components/ui/Drawer.stories.tsx +0 -267
  641. package/src/components/ui/Drawer.test.tsx +0 -130
  642. package/src/components/ui/Drawer.tsx +0 -293
  643. package/src/components/ui/Dropdown.css +0 -173
  644. package/src/components/ui/Dropdown.tsx +0 -63
  645. package/src/components/ui/Expandable.css +0 -15
  646. package/src/components/ui/Expandable.stories.tsx +0 -180
  647. package/src/components/ui/Expandable.test.tsx +0 -107
  648. package/src/components/ui/Expandable.tsx +0 -121
  649. package/src/components/ui/Modal.css +0 -98
  650. package/src/components/ui/Modal.stories.tsx +0 -171
  651. package/src/components/ui/Modal.test.tsx +0 -111
  652. package/src/components/ui/Modal.tsx +0 -117
  653. package/src/components/ui/Select.css +0 -138
  654. package/src/components/ui/Select.stories.tsx +0 -79
  655. package/src/components/ui/Select.test.tsx +0 -84
  656. package/src/components/ui/Select.tsx +0 -79
  657. package/src/components/ui/Slider.css +0 -192
  658. package/src/components/ui/Slider.stories.tsx +0 -63
  659. package/src/components/ui/Slider.tsx +0 -142
  660. package/src/components/ui/Spin.css +0 -31
  661. package/src/components/ui/Spin.stories.tsx +0 -64
  662. package/src/components/ui/Spin.test.tsx +0 -41
  663. package/src/components/ui/Spin.tsx +0 -31
  664. package/src/components/ui/Table.css +0 -132
  665. package/src/components/ui/Tooltip.css +0 -171
  666. package/src/components/ui/Tooltip.stories.tsx +0 -109
  667. package/src/components/ui/Tooltip.test.tsx +0 -102
  668. package/src/components/ui/Tooltip.tsx +0 -163
  669. package/src/components/ui/__snapshots__/Alert.test.tsx.snap +0 -59
  670. package/src/components/ui/__snapshots__/Button.test.tsx.snap +0 -204
  671. package/src/components/ui/__snapshots__/Card.test.tsx.snap +0 -321
  672. package/src/components/ui/__snapshots__/Checkbox.test.tsx.snap +0 -131
  673. package/src/components/ui/__snapshots__/ConfirmDialog.test.tsx.snap +0 -35
  674. package/src/components/ui/__snapshots__/Drawer.test.tsx.snap +0 -67
  675. package/src/components/ui/__snapshots__/Expandable.test.tsx.snap +0 -159
  676. package/src/components/ui/__snapshots__/Modal.test.tsx.snap +0 -59
  677. package/src/components/ui/__snapshots__/Select.test.tsx.snap +0 -254
  678. package/src/components/ui/__snapshots__/Spin.test.tsx.snap +0 -193
  679. package/src/components/ui/__snapshots__/Tooltip.test.tsx.snap +0 -113
  680. package/src/components/ui/definitions.stories.tsx +0 -139
  681. package/src/context/visemeContext.tsx +0 -384
  682. package/src/helpers/chatPdfExport.ts +0 -544
  683. package/src/helpers/configuration.ts +0 -42
  684. package/src/helpers/constants.ts +0 -268
  685. package/src/helpers/convertDocument.test.ts +0 -67
  686. package/src/helpers/convertDocument.ts +0 -35
  687. package/src/helpers/credits.ts +0 -54
  688. package/src/helpers/error.test.ts +0 -29
  689. package/src/helpers/error.ts +0 -278
  690. package/src/helpers/imageCompression.ts +0 -230
  691. package/src/helpers/llmUsage.ts +0 -328
  692. package/src/helpers/markedExtendedTables.js +0 -217
  693. package/src/helpers/media.test.ts +0 -169
  694. package/src/helpers/media.ts +0 -81
  695. package/src/helpers/message.test.ts +0 -126
  696. package/src/helpers/message.ts +0 -219
  697. package/src/helpers/nats/getNatsConfig.ts +0 -148
  698. package/src/helpers/nats/isSessionExpiredError.test.ts +0 -38
  699. package/src/helpers/nats/isSessionExpiredError.ts +0 -51
  700. package/src/helpers/nats/useNats.test.tsx +0 -81
  701. package/src/helpers/nats/useNats.ts +0 -204
  702. package/src/helpers/nats/useNatsSession.test.ts +0 -16
  703. package/src/helpers/nats/useNatsSession.ts +0 -460
  704. package/src/helpers/piiDetection.test.ts +0 -186
  705. package/src/helpers/piiDetection.ts +0 -91
  706. package/src/helpers/sanitizer.ts +0 -17
  707. package/src/helpers/statistics.ts +0 -58
  708. package/src/helpers/stt/useSTT.ts +0 -515
  709. package/src/helpers/translations.ts +0 -39
  710. package/src/helpers/tts/ttsVoiceUtility.ts +0 -275
  711. package/src/helpers/tts/useTTS.ts +0 -621
  712. package/src/helpers/utils.test.ts +0 -331
  713. package/src/helpers/utils.ts +0 -591
  714. package/src/helpers/venue.ts +0 -36
  715. package/src/i18n.ts +0 -39
  716. package/src/index.stories.tsx +0 -220
  717. package/src/index.test.tsx +0 -156
  718. package/src/index.tsx +0 -592
  719. package/src/locales/de.json +0 -680
  720. package/src/locales/en.json +0 -754
  721. package/src/locales/es.json +0 -682
  722. package/src/locales/fr.json +0 -682
  723. package/src/locales/it.json +0 -750
  724. package/src/mocks/data.ts +0 -790
  725. package/src/styles.css +0 -126
  726. package/src/types/integration.test.ts +0 -32
  727. package/src/types/integration.ts +0 -31
  728. package/src/types/layout.ts +0 -50
  729. 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
- };