@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/icons/LinkedinIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+const LinkedinIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8ZM11 19h1a1 1 0 0 0 1-1v-4.5c0-1.5 3-2.5 3-.5v5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default LinkedinIcon

package/src/icons/MemoriIcon.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+const MemoriIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    className="memori-ai-logo"
+    width={800}
+    height={800}
+    fill="currentColor"
+    viewBox="0 0 670.70013 639.67999"
+    aria-label="Memori AI"
+    {...props}
+  >
+    <defs>
+      <style>
+        {
+          "\n      .cls-1 {\n        fill: url(#Sfumatura_senza_nome_6);\n      }\n\n      .cls-1,\n      .cls-2 {\n        stroke-width: 0px;\n      }\n\n      .cls-2 {\n        fill: var(--memori-logo-text-color, '#744c99');\n      }\n    "
+        }
+      </style>
+      <linearGradient
+        id="Sfumatura_senza_nome_6"
+        data-name="Sfumatura senza nome 6"
+        x1={392.82999}
+        y1={-13.83}
+        x2={786.29999}
+        y2={628.33002}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(-304.65445,-80.16)"
+      >
+        <stop offset={0.18} stopColor="#9ad2d5" id="stop1" />
+        <stop offset={0.32} stopColor="#26b5cb" id="stop2" />
+        <stop offset={0.38} stopColor="#379cbe" id="stop3" />
+        <stop offset={0.46} stopColor="#4c7eb0" id="stop4" />
+        <stop offset={0.55} stopColor="#5d66a4" id="stop5" />
+        <stop offset={0.65} stopColor="#69569c" id="stop6" />
+        <stop offset={0.76} stopColor="#704c97" id="stop7" />
+        <stop offset={0.89} stopColor="#734996" id="stop8" />
+      </linearGradient>
+    </defs>
+    <g id="g13" transform="translate(-304.65445,-80.16)">
+      <path
+        className="cls-2"
+        d="m 451.79,434.96 v -78.79 c 0,-15.73 8.09,-25.54 22.73,-25.54 7.01,0 12.93,3.11 16.82,8.41 3.9,-5.29 9.81,-8.41 16.82,-8.41 14.64,0 22.74,9.81 22.74,25.54 v 78.79 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 v -77.08 c 0,-11.21 -3.74,-16.35 -10.9,-16.35 -7.16,0 -10.9,5.14 -10.9,16.35 v 77.08 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 v -77.08 c 0,-11.21 -3.74,-16.35 -10.9,-16.35 -7.16,0 -10.9,5.14 -10.9,16.35 v 77.08 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 z"
+        id="path8"
+      />
+      <path
+        className="cls-2"
+        d="m 588.37,435.12 c 0,3.11 -2.65,5.45 -5.76,5.45 h -23.98 c -6.7,0 -9.5,-2.81 -9.5,-9.34 v -90.31 c 0,-6.54 2.8,-9.34 9.5,-9.34 h 23.98 c 3.11,0 5.76,2.33 5.76,5.45 0,3.12 -2.65,5.45 -5.76,5.45 h -21.65 v 32.7 h 19.31 c 3.11,0 5.76,2.33 5.76,5.45 0,3.12 -2.65,5.45 -5.76,5.45 h -19.31 v 43.6 h 21.65 c 3.11,0 5.76,2.33 5.76,5.45 z"
+        id="path9"
+      />
+      <path
+        className="cls-2"
+        d="m 599.59,434.96 v -78.79 c 0,-15.73 8.09,-25.54 22.73,-25.54 7.01,0 12.93,3.11 16.82,8.41 3.9,-5.29 9.81,-8.41 16.82,-8.41 14.64,0 22.74,9.81 22.74,25.54 v 78.79 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 v -77.08 c 0,-11.21 -3.74,-16.35 -10.9,-16.35 -7.16,0 -10.9,5.14 -10.9,16.35 v 77.08 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 v -77.08 c 0,-11.21 -3.74,-16.35 -10.9,-16.35 -7.16,0 -10.9,5.14 -10.9,16.35 v 77.08 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 z"
+        id="path10"
+      />
+      <path
+        className="cls-2"
+        d="m 692.72,416.28 v -60.1 c 0,-15.73 8.09,-25.54 23.35,-25.54 15.26,0 23.36,9.81 23.36,25.54 v 60.1 c 0,15.73 -8.1,25.54 -23.36,25.54 -15.26,0 -23.35,-9.81 -23.35,-25.54 z m 34.88,-2.02 v -56.05 c 0,-11.68 -4.05,-16.35 -11.52,-16.35 -7.47,0 -11.52,4.67 -11.52,16.35 v 56.05 c 0,11.68 4.05,16.35 11.52,16.35 7.47,0 11.52,-4.67 11.52,-16.35 z"
+        id="path11"
+      />
+      <path
+        className="cls-2"
+        d="m 789.27,391.52 c 4.36,2.49 8.88,8.88 8.88,18.07 v 25.38 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 v -22.11 c 0,-8.88 -4.67,-15.73 -12.3,-15.73 h -8.25 v 37.84 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 v -94.05 c 0,-6.54 2.8,-9.34 9.5,-9.34 h 10.43 c 15.57,0 24.6,10.27 24.6,29.11 v 7.32 c 0,10.75 -2.81,18.69 -9.19,23.51 z m -2.33,-26 v -2.34 c 0,-14.02 -4.2,-20.71 -14.17,-20.71 h -7.01 v 43.75 h 7.01 c 9.97,0 14.17,-6.7 14.17,-20.71 z"
+        id="path12"
+      />
+      <path
+        className="cls-2"
+        d="m 812.95,434.96 v -98.1 c 0,-3.27 2.65,-5.92 5.92,-5.92 3.27,0 5.92,2.65 5.92,5.92 v 98.1 c 0,3.27 -2.65,5.92 -5.92,5.92 -3.27,0 -5.92,-2.65 -5.92,-5.92 z"
+        id="path13"
+      />
+    </g>
+    <path
+      className="cls-1"
+      d="m 667.73555,242.64 c -6.38,-56.35 -42.43,-113.07 -98.9,-155.61 -49.7,-37.44 -109.37,-60.33 -170.6,-65.94 C 364.22555,7.6 328.15555,0 291.96555,0 c -69.91,0 -135.47,27.64 -189.6,79.93 C 82.235546,99.38 55.165546,139 38.215546,191.67 c -9.13,16.42 -16.91,33.67 -23.02,51.57 -33.85,99.22 -10.5500001,199.69 63.94,275.65 9.79,9.98 26.710004,23.27 49.530004,36.03 70.06,71.95 151.03,84.76 199.59,84.76 45.54,0 92.21,-11.24 124.84,-30.07 28.3,-16.34 52.64,-36.17 72.92,-59.28 108.74,-60.36 157.72,-166.32 141.72,-307.69 z m -73.68,9.57 c -8.31,-61.54 -42.48,-119.59 -90.75,-164.46 37.26,23.3 66.15,54.54 87.71,91.36 27.6,47.13 46.44,143.64 0.76,233.55 9.47,-47.57 10.27,-101.25 2.28,-160.44 z m -11.27,1.52 c 10.34,76.59 5.37,140.08 -11.29,192.23 -24.15,33.64 -58.84,65.28 -107.4,91.69 -31.3,17.03 -61.5,28.71 -90.28,36.23 -8.25,-0.19 -16.63,-0.69 -25.09,-1.54 22.94,-3.81 46.17,-10.56 69.46,-20.26 96.74,-40.31 136.66,-112.17 153.12,-165.35 20.63,-66.68 13.55,-131.72 1.21,-167.16 -36.47,-104.77 -118.35,-165.33 -237.85,-176.66 46.26,0.76 86.54,8.18 121.19,21.31 67.54,45.83 117.02,116.16 126.92,189.52 z m -78.06,294.93 c -21.61,10.54 -52.6,19.64 -88.2,23.43 17.75,-6.76 35.44,-14.89 53.01,-24.45 35,-19.04 64.77,-41.9 88.88,-67.95 -10.72,23.16 -24.08,43.65 -39.67,61.68 -4.6,2.51 -9.26,4.97 -14.02,7.29 z m -368.96,-2.75 c -19.71,-20.45 -38.150004,-45.4 -54.570004,-75.6 -59.13,-108.81 -54.64,-204.44 -32.59,-273.88 40.79,-72.66 110.320004,-128.92 184.840004,-145.21 -6.05,2.97 -12.04,6.12 -17.94,9.49 -48.68,23.3 -93.61,65.79 -123.390004,119.76 -51.8,93.85 -49.11,199.1 7.38,288.77 23.170004,36.78 95.600004,106.18 204.320004,106.77 10.31,2.55 20.33,4.47 29.9,5.87 -15.51,2.15 -30.53,3.16 -44.97,3.16 -63.65,0 -116.29,-18.88 -152.97,-39.14 z m 169.2,18.75 c -62.68,-15.85 -125.37,-53.95 -169.73,-129.36 -100.020004,-170.04 3.83,-303.77 44.43,-336.4 14.06,-11.3 28.49,-21 43.15,-29.29 24.09,-11.11 49.2,-17.27 73.97,-17.27 0.69,0 1.41,0 2.1,0.02 148.62,2.08 228.54,72.27 262.89,170.95 25.29,72.64 20.48,248.09 -147.96,318.27 -39.5,16.46 -75.82,23.09 -108.64,23.09 -0.07,0 -0.14,0 -0.21,0 z m -50.13,-5.41 c -78.55,-17.09 -129.59,-70.46 -145.73,-96.07 -63.580004,-100.94 -49.220004,-209.44 0.22,-289.59 -5.85,11.99 -11.140004,24.86 -15.460004,38.56 -23.54,74.64 -12.63,153.8 31.560004,228.92 36.33,61.76 83.37,97.63 129.41,118.18 z m 93.31,-527.42 c 6.92,-0.48 13.83,-0.76 20.7,-0.76 9.21,0 18.36,0.43 27.44,1.24 5.8,2.34 11.5,4.89 17.15,7.57 -20.54,-4.36 -42.3,-7.05 -65.28,-8.06 z m -237.88,56.28 c 56.12,-54.22 119.7,-76.74 181.69,-76.74 22.56,0 44.9,3.01 66.59,8.54 -27.97,0.93 -55.36,5.59 -81.73,13.89 -9.47,0.87 -19.03,1.9 -28.75,3.25 -66.39,9.19 -130.73,49.37 -177.320004,106.6 13.93,-26.25 28.93,-45.3 39.520004,-55.54 z M 87.255546,510.92 C 8.3455459,430.46 -2.7544541,333.8 25.095546,249.55 c -9.9,74.5 5.8,152.05 46.09,226.19 9.7,17.85 20.01,33.8 30.760004,48.04 -5.970004,-4.67 -10.990004,-9.07 -14.700004,-12.85 z m 360.150004,88.83 c -27.18,15.69 -70.3,28.55 -119.16,28.55 -52.11,0 -110.74,-14.68 -163.49,-56.16 34.18,13.85 76.16,24.27 123.97,24.27 28.75,0 57.59,-3.76 86.33,-11.13 2.13,0.04 4.2,0.06 6.22,0.06 40.23,0 81.61,-7.43 114.06,-20.19 -14.66,13.13 -30.69,24.65 -47.93,34.6 z m 98.55,-75.09 c 10.02,-14.65 18.69,-30.34 25.92,-47.11 3.74,-8.67 7.06,-17.66 10.05,-26.89 17.66,-24.96 30.8,-52.23 38.94,-81.46 22.51,-80.87 3.27,-156.05 -20.04,-195.85 -33.54,-57.28 -80.82,-97.29 -141.07,-119.95 -8.19,-5.44 -16.61,-10.57 -25.24,-15.28 116.19,24.92 211.36,112.54 221.92,205.8 15.48,136.7 -31.24,226.21 -110.47,280.75 z"
+      id="path14"
+      style={{
+        fill: 'url(#Sfumatura_senza_nome_6)',
+      }}
+    />
+  </svg>
+);
+export default MemoriIcon;

package/src/icons/TelegramIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+const TelegramIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M23.112 4.494c.318-1.55-1.205-2.837-2.68-2.267L2.342 9.216c-1.647.637-1.72 2.941-.117 3.682l3.94 1.818 1.873 6.559a1 1 0 0 0 1.67.432l2.886-2.887 4.043 3.033a2 2 0 0 0 3.16-1.198l3.315-16.16ZM3.063 11.082l18.09-6.99-3.316 16.161L13.1 16.7a1 1 0 0 0-1.307.093l-1.236 1.236.371-2.043 7.28-7.279a1 1 0 0 0-1.204-1.575L6.95 12.876l-3.888-1.794Zm5.114 3.397.606 2.123.233-1.281a1 1 0 0 1 .277-.528l2.22-2.22-3.336 1.906Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default TelegramIcon

package/src/icons/TwitterIcon.tsx

@@ -0,0 +1,8 @@
+import * as React from "react"
+const TwitterIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={800} height={800} fill="currentColor" viewBox="0 0 100 100" {...props}>
+    <path fill="currentColor" d="M69.7 8.7H30.4C18.7 8.7 9.1 18.2 9.1 30v41.2c0 11.7 9.5 21.3 21.3 21.3h39.4c11.7 0 21.3-9.5 21.3-21.3V29.9C91 18.2 81.5 8.7 69.7 8.7zm7.1 69.6H61.4c-.1 0-.2 0-.2-.1L46.8 57.3h-.1C40.9 64 35.2 70.6 29.6 77.1c-.3.4-.7.7-1 1-.1.1-.2.1-.3.1h-4.2c-.1 0-.2 0-.1-.1l20.5-23.8c.1-.1.1-.2 0-.3L24.1 24.3v-.1h15.5c.1 0 .1 0 .2.1L53.4 44h.1l16.9-19.7c.1-.1.2-.1.3-.1h4.2c.2 0 .2.1.1.2L55.6 46.9c-.1.1-.1.2 0 .3l21.3 31s0 .1-.1.1z" />
+    <path d="M37.8 27.8h-6.7c-.1 0-.1.1-.1.2l32.2 46.7H69.9c.1 0 .1-.1.1-.2L37.8 27.8z" />
+  </svg>
+)
+export default TwitterIcon

package/src/icons/WhatsappIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+const WhatsappIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M6.014 8.006c.114-.904 1.289-2.132 2.22-1.996V6.01c.907.172 1.625 1.734 2.03 2.436.286.509.1 1.025-.167 1.243-.361.29-.926.692-.808 1.095C9.5 11.5 12 14 13.23 14.711c.466.269.804-.44 1.092-.804.21-.28.726-.447 1.234-.171.759.442 1.474.956 2.135 1.534.33.276.408.684.179 1.115-.403.76-1.569 1.76-2.415 1.557C13.976 17.587 8 15.27 6.08 8.558c-.108-.318-.08-.438-.066-.552Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 23c-1.224 0-1.9-.131-3-.5l-2.106 1.053A2 2 0 0 1 4 21.763V19.5c-2.153-2.008-3-4.323-3-7.5C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm-6-4.37-.636-.593C3.691 16.477 3 14.733 3 12a9 9 0 1 1 9 9c-.986 0-1.448-.089-2.364-.396l-.788-.264L6 21.764V18.63Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default WhatsappIcon

package/src/icons/artifacts/DocumentIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+const DocumentIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V8.82843C21 8.03278 20.6839 7.26972 20.1213 6.70711L15.2929 1.87868C14.7303 1.31607 13.9672 1 13.1716 1H6ZM5 4C5 3.44772 5.44772 3 6 3H12V8C12 9.10457 12.8954 10 14 10H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM18.5858 8L14 3.41421V8H18.5858Z"
+      fill="#0F0F0F"
+    />
+  </svg>
+);
+export default DocumentIcon;

package/src/icons/artifacts/HtmlIcon.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+const HtmlIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    height={800}
+    width={800}
+    id="_x32_"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style type="text/css">{'\n\t.st0{fill:#000000;}\n'}</style>
+    <g>
+      <path
+        className="st0"
+        d="M378.413,0H208.297h-13.182L185.8,9.314L57.02,138.102l-9.314,9.314v13.176v265.514 c0,47.36,38.528,85.895,85.896,85.895h244.811c47.353,0,85.881-38.535,85.881-85.895V85.896C464.294,38.528,425.766,0,378.413,0z  M432.497,426.105c0,29.877-24.214,54.091-54.084,54.091H133.602c-29.884,0-54.098-24.214-54.098-54.091V160.591h83.716 c24.885,0,45.077-20.178,45.077-45.07V31.804h170.116c29.87,0,54.084,24.214,54.084,54.092V426.105z"
+      />
+      <path
+        className="st0"
+        d="M163.164,253.19c-5.097,0-8.867,3.652-8.867,9.482v23.453c0,0.489-0.251,0.734-0.726,0.734h-26.993 c-0.475,0-0.726-0.245-0.726-0.734v-23.453c0-5.831-3.771-9.482-8.868-9.482c-5.222,0-8.993,3.652-8.993,9.482v65.144 c0,5.83,3.645,9.475,8.868,9.475c5.111,0,8.993-3.645,8.993-9.475v-24.305c0-0.489,0.251-0.734,0.726-0.734h26.993 c0.475,0,0.726,0.244,0.726,0.734v24.305c0,5.83,3.77,9.475,8.867,9.475c5.223,0,8.993-3.645,8.993-9.475v-65.144 C172.157,256.841,168.387,253.19,163.164,253.19z"
+      />
+      <path
+        className="st0"
+        d="M235.249,253.923h-47.284c-5.46,0-8.993,3.282-8.993,8.023c0,4.615,3.533,7.897,8.993,7.897h13.978 c0.488,0,0.726,0.244,0.726,0.726v57.247c0,5.711,3.771,9.475,8.882,9.475c5.223,0,8.993-3.764,8.993-9.475v-57.247 c0-0.482,0.237-0.726,0.726-0.726h13.978c5.46,0,8.993-3.282,8.993-7.897C244.242,257.204,240.709,253.923,235.249,253.923z"
+      />
+      <path
+        className="st0"
+        d="M318.253,253.19c-5.348,0-8.267,2.919-10.934,9.238l-17.26,39.862h-0.489l-17.623-39.862 c-2.794-6.319-5.712-9.238-11.06-9.238c-5.948,0-9.845,4.134-9.845,10.697v64.781c0,5.467,3.408,8.623,8.268,8.623 c4.622,0,8.029-3.156,8.029-8.623v-39.868h0.6l12.89,29.653c2.541,5.837,4.608,7.541,8.742,7.541c4.133,0,6.2-1.704,8.756-7.541 l12.764-29.653h0.601v39.868c0,5.467,3.281,8.623,8.141,8.623c4.874,0,8.156-3.156,8.156-8.623v-64.781 C327.987,257.323,324.216,253.19,318.253,253.19z"
+      />
+      <path
+        className="st0"
+        d="M389.36,320.645h-29.408c-0.489,0-0.726-0.244-0.726-0.734v-57.24c0-5.712-3.77-9.482-8.867-9.482 c-5.237,0-8.993,3.77-8.993,9.482v64.899c0,5.349,3.518,8.993,8.993,8.993h39.002c5.475,0,8.994-3.282,8.994-8.022 C398.354,323.926,394.835,320.645,389.36,320.645z"
+      />
+    </g>
+  </svg>
+);
+export default HtmlIcon;

package/src/icons/artifacts/JavascriptIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+const JavascriptIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={800}
+    height={800}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.29289 1.29289C9.48043 1.10536 9.73478 1 10 1H18C19.6569 1 21 2.34315 21 4V9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V4C19 3.44772 18.5523 3 18 3H11V8C11 8.55228 10.5523 9 10 9H5V20C5 20.5523 5.44772 21 6 21H7C7.55228 21 8 21.4477 8 22C8 22.5523 7.55228 23 7 23H6C4.34315 23 3 21.6569 3 20V8C3 7.73478 3.10536 7.48043 3.29289 7.29289L9.29289 1.29289ZM6.41421 7H9V4.41421L6.41421 7ZM16 14.75C16 13.2312 17.2312 12 18.75 12H21C21.5523 12 22 12.4477 22 13C22 13.5523 21.5523 14 21 14H18.75C18.3358 14 18 14.3358 18 14.75C18 15.1642 18.3358 15.5 18.75 15.5H19.25C20.7688 15.5 22 16.7312 22 18.25C22 19.7688 20.7688 21 19.25 21H17C16.4477 21 16 20.5523 16 20C16 19.4477 16.4477 19 17 19H19.25C19.6642 19 20 18.6642 20 18.25C20 17.8358 19.6642 17.5 19.25 17.5H18.75C17.2312 17.5 16 16.2688 16 14.75ZM15 13C15 12.4477 14.5523 12 14 12C13.4477 12 13 12.4477 13 13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V17.6667C11 17.1144 10.5523 16.6667 10 16.6667C9.44772 16.6667 9 17.1144 9 17.6667V18C9 19.6569 10.3431 21 12 21C13.6569 21 15 19.6569 15 18V13Z"
+      fill="#000000"
+    />
+  </svg>
+);
+export default JavascriptIcon;

package/src/icons/artifacts/MarkdownIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+const MarkdownIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={800}
+    height={800}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 8C0 5.79086 1.79086 4 4 4H20C22.2091 4 24 5.79086 24 8V16C24 18.2091 22.2091 20 20 20H4C1.79086 20 0 18.2091 0 16V8ZM4 6C2.89543 6 2 6.89543 2 8V16C2 17.1046 2.89543 18 4 18H20C21.1046 18 22 17.1046 22 16V8C22 6.89543 21.1046 6 20 6H4ZM5.68377 8.05132C6.09211 7.9152 6.54174 8.05566 6.8 8.4L9 11.3333L11.2 8.4C11.4583 8.05566 11.9079 7.9152 12.3162 8.05132C12.7246 8.18743 13 8.56957 13 9V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V12L9.8 13.6C9.61115 13.8518 9.31476 14 9 14C8.68524 14 8.38885 13.8518 8.2 13.6L7 12V15C7 15.5523 6.55228 16 6 16C5.44772 16 5 15.5523 5 15V9C5 8.56957 5.27543 8.18743 5.68377 8.05132ZM18 9C18 8.44772 17.5523 8 17 8C16.4477 8 16 8.44772 16 9V12.5858L15.7071 12.2929C15.3166 11.9024 14.6834 11.9024 14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071L16.2929 15.7071C16.6834 16.0976 17.3166 16.0976 17.7071 15.7071L19.7071 13.7071C20.0976 13.3166 20.0976 12.6834 19.7071 12.2929C19.3166 11.9024 18.6834 11.9024 18.2929 12.2929L18 12.5858V9Z"
+      fill="#000000"
+    />
+  </svg>
+);
+export default MarkdownIcon;

package/src/icons/artifacts/PythonIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+const PythonIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={800}
+    height={800}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M5.79 1.574h3.866c.14 0 .252.11.252.246v5.186a.25.25 0 01-.252.246H6.344c-.975 0-1.766.77-1.766 1.72v1.162a.25.25 0 01-.253.243H1.867a.25.25 0 01-.253-.246V6.177a.25.25 0 01.252-.246H7.98c.418 0 .757-.33.757-.737a.747.747 0 00-.757-.738H5.537V1.82a.25.25 0 01.253-.246zm5.632 2.592V1.82c0-.95-.79-1.72-1.766-1.72H5.79c-.976 0-1.767.77-1.767 1.72v2.636H1.867C.89 4.456.1 5.226.1 6.176v3.955c0 .95.79 1.72 1.766 1.72h2.46c.085 0 .17-.006.252-.017v2.346c0 .95.79 1.72 1.766 1.72h3.866c.976 0 1.767-.77 1.767-1.72v-2.636h2.156c.976 0 1.767-.77 1.767-1.72V5.868c0-.95-.79-1.72-1.767-1.72h-2.458c-.086 0-.17.005-.253.017zm-5.33 5.974V8.994a.25.25 0 01.252-.246h3.312c.976 0 1.766-.77 1.766-1.72V5.866a.25.25 0 01.253-.243h2.458c.14 0 .253.11.253.246v3.954a.25.25 0 01-.252.246H8.02a.747.747 0 00-.757.737c0 .408.339.738.757.738h2.442v2.636a.25.25 0 01-.253.246H6.344a.25.25 0 01-.252-.246v-4.04z"
+      fill="#000000"
+    />
+  </svg>
+);
+export default PythonIcon;

package/src/icons/artifacts/SvgIcon.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+const SvgIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    height={800}
+    width={800}
+    id="_x32_"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style type="text/css">{'\n\t.st0{fill:#000000;}\n'}</style>
+    <g>
+      <path
+        className="st0"
+        d="M378.409,0H208.294h-13.176l-9.314,9.315L57.017,138.101l-9.314,9.315v13.176v265.513 c0,47.36,38.528,85.896,85.895,85.896h244.811c47.361,0,85.888-38.535,85.888-85.896V85.896C464.297,38.528,425.77,0,378.409,0z  M432.493,426.104c0,29.877-24.214,54.091-54.084,54.091H133.598c-29.877,0-54.091-24.214-54.091-54.091V160.592h83.717 c24.884,0,45.07-20.179,45.07-45.071V31.804h170.114c29.87,0,54.084,24.214,54.084,54.091V426.104z"
+      />
+      <path
+        className="st0"
+        d="M180.296,296.668l-4.846-0.67c-10.63-1.487-14.265-4.978-14.265-10.104c0-5.78,4.309-9.817,12.383-9.817 c5.653,0,11.305,1.62,15.745,3.764c1.886,0.942,3.903,1.487,5.789,1.487c4.845,0,8.612-3.63,8.612-8.616 c0-3.226-1.481-5.921-4.71-7.939c-5.384-3.372-15.476-6.06-25.572-6.06c-19.781,0-32.436,11.171-32.436,27.998 c0,16.15,10.232,24.898,28.938,27.454l4.846,0.67c10.903,1.48,14.129,4.846,14.129,10.229c0,6.326-5.247,10.766-14.939,10.766 c-6.727,0-12.111-1.745-19.645-5.921c-1.616-0.942-3.634-1.62-5.788-1.62c-5.115,0-8.885,3.91-8.885,8.756 c0,3.226,1.616,6.326,4.713,8.344c6.054,3.764,15.878,7.8,28.798,7.8c23.823,0,35.934-12.24,35.934-28.795 C209.097,307.84,199.273,299.356,180.296,296.668z"
+      />
+      <path
+        className="st0"
+        d="M281.108,259.382c-4.577,0-7.939,2.43-9.556,7.674l-16.69,54.51h-0.402l-17.634-54.51 c-1.745-5.244-4.978-7.674-9.551-7.674c-5.653,0-9.692,4.176-9.692,9.287c0,1.347,0.269,2.834,0.67,4.175l23.286,68.104 c2.96,8.477,6.727,11.57,12.652,11.57c5.785,0,9.555-3.093,12.516-11.57l23.282-68.104c0.406-1.341,0.674-2.828,0.674-4.175 C290.664,263.558,286.76,259.382,281.108,259.382z"
+      />
+      <path
+        className="st0"
+        d="M364.556,300.836h-18.841c-5.114,0-8.344,3.1-8.344,7.806c0,4.713,3.23,7.814,8.344,7.814h6.193 c0.538,0,0.803,0.258,0.803,0.803c0,3.505-0.265,6.598-1.075,9.014c-1.882,5.796-7.67,9.426-14.669,9.426 c-7.943,0-12.921-3.903-14.939-10.096c-1.075-3.365-1.48-7.8-1.48-19.648c0-11.842,0.405-16.15,1.48-19.516 c2.018-6.325,6.867-10.228,14.67-10.228c5.924,0,10.362,1.885,13.859,6.724c2.695,3.777,5.387,4.852,8.749,4.852 c4.981,0,9.021-3.638,9.021-8.888c0-2.151-0.674-4.035-1.752-5.921c-4.842-8.204-15.071-14.264-29.877-14.264 c-16.287,0-28.935,7.408-33.644,22.204c-2.022,6.466-2.559,11.576-2.559,25.038c0,13.454,0.538,18.573,2.559,25.031 c4.709,14.802,17.357,22.204,33.644,22.204c16.286,0,28.668-8.204,33.374-22.881c1.617-5.111,2.29-12.645,2.29-20.716v-0.95 C372.362,303.664,369.538,300.836,364.556,300.836z"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcon;

package/src/icons/artifacts/XmlIcon.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+const XmlIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    height={800}
+    width={800}
+    id="_x32_"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style type="text/css">{'\n\t.st0{fill:#000000;}\n'}</style>
+    <g>
+      <path
+        className="st0"
+        d="M378.406,0H208.29h-13.176l-9.314,9.314L57.013,138.102l-9.314,9.314v13.176v265.514 c0,47.36,38.528,85.895,85.895,85.895h244.812c47.368,0,85.895-38.535,85.895-85.895V85.896C464.301,38.528,425.773,0,378.406,0z  M432.49,426.105c0,29.877-24.214,54.091-54.084,54.091H133.594c-29.877,0-54.091-24.214-54.091-54.091V160.591h83.717 c24.884,0,45.07-20.178,45.07-45.07V31.804h170.115c29.87,0,54.084,24.214,54.084,54.092V426.105z"
+      />
+      <path
+        className="st0"
+        d="M178.002,297.743l21.051-30.701c1.361-2.032,2.032-4.07,2.032-6.109c0-5.027-3.938-8.965-9.37-8.965 c-3.394,0-6.11,1.494-8.281,4.754l-16.575,24.452h-0.265l-16.576-24.452c-2.172-3.26-4.888-4.754-8.281-4.754 c-5.432,0-9.37,3.938-9.37,8.965c0,2.039,0.67,4.077,2.031,6.109l20.919,30.701l-22.546,33.138 c-1.355,2.039-2.039,4.077-2.039,6.116c0,5.027,3.938,8.965,9.371,8.965c3.393,0,6.116-1.494,8.288-4.755l18.203-26.896h0.265 l18.203,26.896c2.171,3.261,4.894,4.755,8.287,4.755c5.432,0,9.37-3.938,9.37-8.965c0-2.039-0.677-4.078-2.039-6.116 L178.002,297.743z"
+      />
+      <path
+        className="st0"
+        d="M291.016,251.968c-5.977,0-9.238,3.261-12.226,10.326l-19.284,44.547h-0.545l-19.697-44.547 c-3.121-7.066-6.382-10.326-12.358-10.326c-6.654,0-11.004,4.622-11.004,11.954v72.398c0,6.109,3.806,9.643,9.244,9.643 c5.153,0,8.958-3.534,8.958-9.643v-44.554h0.678l14.397,33.138c2.856,6.522,5.167,8.428,9.782,8.428 c4.615,0,6.927-1.906,9.782-8.428L283,291.766h0.684v44.554c0,6.109,3.666,9.643,9.098,9.643c5.432,0,9.098-3.534,9.098-9.643 v-72.398C301.88,256.59,297.67,251.968,291.016,251.968z"
+      />
+      <path
+        className="st0"
+        d="M373.211,327.355h-32.873c-0.544,0-0.824-0.272-0.824-0.816V262.56c0-6.381-4.203-10.592-9.915-10.592 c-5.837,0-10.04,4.21-10.04,10.592v72.532c0,5.976,3.938,10.054,10.04,10.054h43.611c6.102,0,10.04-3.666,10.04-8.965 C383.251,331.02,379.313,327.355,373.211,327.355z"
+      />
+    </g>
+  </svg>
+);
+export default XmlIcon;

package/src/icons/artifacts/cssIcon.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+const CssIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    height={800}
+    width={800}
+    id="_x32_"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <style type="text/css">{'\n\t.st0{fill:#000000;}\n'}</style>
+    <g>
+      <path
+        className="st0"
+        d="M378.413,0H208.297h-13.182L185.8,9.314L57.02,138.102l-9.314,9.314v13.176v265.514 c0,47.36,38.528,85.895,85.896,85.895h244.811c47.353,0,85.881-38.535,85.881-85.895V85.896C464.294,38.528,425.766,0,378.413,0z  M432.497,426.105c0,29.877-24.214,54.091-54.084,54.091H133.602c-29.884,0-54.098-24.214-54.098-54.091V160.591h83.716 c24.885,0,45.077-20.178,45.077-45.07V31.804h170.116c29.87,0,54.084,24.214,54.084,54.092V426.105z"
+      />
+      <path
+        className="st0"
+        d="M169.574,268.949c5.837,0,9.104,2.171,12.499,6.786c2.709,3.805,5.432,5.167,8.825,5.167 c5.028,0,9.105-3.673,9.105-8.965c0-2.171-0.684-4.078-1.774-5.977c-4.622-8.288-14.802-14.669-28.655-14.669 c-16.171,0-28.124,7.603-33.012,22.685c-1.899,6.11-2.57,10.865-2.57,24.989c0,14.125,0.67,18.881,2.57,24.99 c4.888,15.081,16.841,22.685,33.012,22.685c13.853,0,24.033-6.382,28.655-14.67c1.09-1.899,1.774-3.805,1.774-5.976 c0-5.3-4.078-8.965-9.105-8.965c-3.393,0-6.116,1.361-8.825,5.16c-3.394,4.622-6.662,6.794-12.499,6.794 c-7.471,0-11.814-3.938-13.853-10.187c-1.089-3.393-1.494-6.654-1.494-19.83c0-13.175,0.406-16.436,1.494-19.829 C157.76,272.887,162.103,268.949,169.574,268.949z"
+      />
+      <path
+        className="st0"
+        d="M255.149,289.595l-4.888-0.684c-10.725-1.494-14.398-5.02-14.398-10.187c0-5.837,4.343-9.915,12.498-9.915 c5.698,0,11.409,1.634,15.892,3.805c1.899,0.95,3.938,1.494,5.837,1.494c4.888,0,8.7-3.666,8.7-8.693 c0-3.261-1.494-5.977-4.762-8.016c-5.432-3.394-15.612-6.11-25.806-6.11c-19.97,0-32.733,11.269-32.733,28.25 c0,16.304,10.32,25.13,29.2,27.713l4.901,0.677c10.99,1.494,14.258,4.888,14.258,10.32c0,6.389-5.306,10.872-15.082,10.872 c-6.787,0-12.219-1.767-19.83-5.977c-1.634-0.956-3.672-1.634-5.837-1.634c-5.166,0-8.965,3.938-8.965,8.832 c0,3.254,1.634,6.382,4.748,8.42c6.116,3.799,16.031,7.876,29.074,7.876c24.032,0,36.266-12.358,36.266-29.067 C284.223,300.865,274.307,292.311,255.149,289.595z"
+      />
+      <path
+        className="st0"
+        d="M338.697,289.595l-4.888-0.684c-10.738-1.494-14.398-5.02-14.398-10.187c0-5.837,4.344-9.915,12.484-9.915 c5.712,0,11.423,1.634,15.892,3.805c1.913,0.95,3.952,1.494,5.851,1.494c4.887,0,8.686-3.666,8.686-8.693 c0-3.261-1.494-5.977-4.748-8.016c-5.432-3.394-15.626-6.11-25.806-6.11c-19.969,0-32.733,11.269-32.733,28.25 c0,16.304,10.32,25.13,29.2,27.713l4.888,0.677c11.004,1.494,14.258,4.888,14.258,10.32c0,6.389-5.292,10.872-15.068,10.872 c-6.8,0-12.232-1.767-19.829-5.977c-1.634-0.956-3.673-1.634-5.851-1.634c-5.153,0-8.965,3.938-8.965,8.832 c0,3.254,1.634,6.382,4.762,8.42c6.117,3.799,16.032,7.876,29.06,7.876c24.047,0,36.266-12.358,36.266-29.067 C367.758,300.865,357.843,292.311,338.697,289.595z"
+      />
+    </g>
+  </svg>
+);
+export default CssIcon;

package/src/index.stories.tsx

@@ -22,7 +22,6 @@ export default meta;
 
 const Template: Story<Props> = args => <Memori {...args} />;
 
-
 export const WithInitialContextAndQuestion = Template.bind({});
 WithInitialContextAndQuestion.args = {
   ownerUserName: 'nzambello',
@@ -33,6 +32,7 @@ WithInitialContextAndQuestion.args = {
   baseURL: 'https://www.aisuru.com',
   uiLang: 'IT',
   spokenLang: 'IT',
+  layout: 'FULLPAGE',
   enableAudio: true,
   autoStart: true,
   initialQuestion: 'Ciao',
@@ -47,6 +47,7 @@ WithInitialContextAndQuestionFromIntegration.args = {
   engineURL: 'https://engine.memori.ai',
   apiURL: 'https://backend.memori.ai',
   baseURL: 'https://www.aisuru.com',
+  layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
   enableAudio: true,
@@ -69,6 +70,7 @@ WithPreviousSession.args = {
   apiURL: 'https://backend.memori.ai',
   baseURL: 'https://www.aisuru.com',
   sessionID: '1234567890',
+  layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
 };
@@ -94,6 +96,7 @@ WithUploadNoTotalPayloadLimit.args = {
   engineURL: 'https://engine.memori.ai',
   apiURL: 'https://backend.memori.ai',
   baseURL: 'https://www.aisuru.com',
+  layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
   enableAudio: true,
@@ -108,6 +111,7 @@ WithMaxTextareaCharacters.args = {
   engineURL: 'https://engine.memori.ai',
   apiURL: 'https://backend.memori.ai',
   baseURL: 'https://www.aisuru.com',
+  layout: 'FULLPAGE',
   uiLang: 'IT',
   spokenLang: 'IT',
   enableAudio: true,
@@ -115,8 +119,8 @@ WithMaxTextareaCharacters.args = {
   maxTextareaCharacters: 500,
 };
 
-export const WithPrivateAgent = Template.bind({});
-WithPrivateAgent.args = {
+export const TestingAgent = Template.bind({});
+TestingAgent.args = {
   memoriName: 'Test Private',
   ownerUserName: 'Andrea-Patini',
   memoriID: 'c58cd5f9-43c4-4a3b-9fb6-56aedf58ff7a',
@@ -150,7 +154,8 @@ const piiDetectionConfig = {
     {
       id: 'iban',
       label: { it: 'IBAN', en: 'IBAN' },
-      pattern: '\\b[A-Z]{2}\\d{2}(?:[ ]?[A-Z0-9]{4}){3,7}(?:[ ]?[A-Z0-9]{1,4})?\\b',
+      pattern:
+        '\\b[A-Z]{2}\\d{2}(?:[ ]?[A-Z0-9]{4}){3,7}(?:[ ]?[A-Z0-9]{1,4})?\\b',
       message: {
         it: 'Il messaggio contiene un codice IBAN.',
         en: 'The message contains an IBAN code.',
@@ -168,6 +173,7 @@ export const WithPiiDetection = Template.bind({});
 WithPiiDetection.args = {
   memoriName: 'Layout Storybook',
   ownerUserName: 'andrea.patini',
+  layout: 'FULLPAGE',
   memoriID: 'ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e',
   ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
   tenantID: 'aisuru-staging.aclambda.online',
@@ -185,4 +191,4 @@ WithPiiDetection.args = {
       lang: 'it',
     }),
   },
-};
+};

package/src/index.tsx

@@ -13,9 +13,7 @@ import MemoriWidget, {
   Props as WidgetProps,
 } from './components/MemoriWidget/MemoriWidget';
 import { VisemeProvider } from './context/visemeContext';
-
-import { Toaster } from 'react-hot-toast';
-import toast from 'react-hot-toast';
+import { AlertProvider, AlertViewport } from '@memori.ai/ui';
 import { safeParseJSON } from './helpers/utils';
 
 import i18n from './i18n';
@@ -49,7 +47,7 @@ export interface Props {
   __WEBCOMPONENT__?: boolean;
   showClear?: boolean;
   showOnlyLastMessages?: boolean;
-  showTypingText?: boolean; 
+  showTypingText?: boolean;
   showLogin?: boolean;
   showUpload?: boolean;
   showReasoning?: boolean;
@@ -441,78 +439,83 @@ const Memori: React.FC<Props> = ({
 
   return (
     <I18nWrapper>
-      <VisemeProvider>
-        <ArtifactProvider>
-          <Toaster position="top-center" reverseOrder={true} />
-          {memori ? (
-            <MemoriWidget
-              // General props
-              layout={layout}
-              customLayout={customLayout}
-              height={height}
-              baseUrl={
-                baseURL ||
-                (tenantID.startsWith('https://') ||
-                tenantID.startsWith('http://')
-                  ? tenantID
-                  : `https://${tenantID}`)
-              }
-              apiURL={apiURL}
-              engineURL={engineURL}
-              memori={{
-                ...memori,
-                secretToken,
-              }}
-              __WEBCOMPONENT__={__WEBCOMPONENT__}
-              ownerUserName={ownerUserName ?? memori.ownerUserName}
-              ownerUserID={ownerUserID ?? memori.ownerUserID}
-              tenant={tenant}
-              tenantID={tenantID}
-              sessionID={sessionID ?? sessionId}
-              secret={secretToken}
-              ttsProvider={
-                provider ? (provider as 'azure' | 'openai') : 'azure'
-              }
-              integration={layoutIntegration}
-              authToken={authToken}
-              onStateChange={onStateChange}
-              additionalInfo={additionalInfo}
-              customMediaRenderer={customMediaRenderer}
-              additionalSettings={additionalSettings}
-              userAvatar={userAvatar}
-              applyVarsToRoot={applyVarsToRoot}
-              maxTotalMessagePayload={maxTotalMessagePayload}
-              maxTextareaCharacters={maxTextareaCharacters}
-              disableTextEnteredEvents={disableTextEnteredEvents}
-              avatar3dHidden={avatar3dHidden}
-              // From layout, from client if allowed
-              {...clientAttributes}
-              // Client only
-              showOnlyLastMessages={showOnlyLastMessages}
-              showInputs={showInputs}
-              showDates={showDates}
+      <AlertProvider defaultDuration={5000}>
+        <VisemeProvider>
+          <ArtifactProvider>
+            <AlertViewport
+              placement="top-end"
+              style={{ zIndex: 10002, top: 30, right: 30, position: 'fixed' }}
             />
-          ) : (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <p
+            {memori ? (
+              <MemoriWidget
+                // General props
+                layout={layout}
+                customLayout={customLayout}
+                height={height}
+                baseUrl={
+                  baseURL ||
+                  (tenantID.startsWith('https://') ||
+                  tenantID.startsWith('http://')
+                    ? tenantID
+                    : `https://${tenantID}`)
+                }
+                apiURL={apiURL}
+                engineURL={engineURL}
+                memori={{
+                  ...memori,
+                  secretToken,
+                }}
+                __WEBCOMPONENT__={__WEBCOMPONENT__}
+                ownerUserName={ownerUserName ?? memori.ownerUserName}
+                ownerUserID={ownerUserID ?? memori.ownerUserID}
+                tenant={tenant}
+                tenantID={tenantID}
+                sessionID={sessionID ?? sessionId}
+                secret={secretToken}
+                ttsProvider={
+                  provider ? (provider as 'azure' | 'openai') : 'azure'
+                }
+                integration={layoutIntegration}
+                authToken={authToken}
+                onStateChange={onStateChange}
+                additionalInfo={additionalInfo}
+                customMediaRenderer={customMediaRenderer}
+                additionalSettings={additionalSettings}
+                userAvatar={userAvatar}
+                applyVarsToRoot={applyVarsToRoot}
+                maxTotalMessagePayload={maxTotalMessagePayload}
+                maxTextareaCharacters={maxTextareaCharacters}
+                disableTextEnteredEvents={disableTextEnteredEvents}
+                avatar3dHidden={avatar3dHidden}
+                // From layout, from client if allowed
+                {...clientAttributes}
+                // Client only
+                showOnlyLastMessages={showOnlyLastMessages}
+                showInputs={showInputs}
+                showDates={showDates}
+              />
+            ) : (
+              <div
                 style={{
-                  textAlign: 'center',
-                  margin: '2rem auto',
-                  textTransform: 'capitalize',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                 }}
               >
-                {t('loading') || 'Loading'}...
-              </p>
-            </div>
-          )}
-        </ArtifactProvider>
-      </VisemeProvider>
+                <p
+                  style={{
+                    textAlign: 'center',
+                    margin: '2rem auto',
+                    textTransform: 'capitalize',
+                  }}
+                >
+                  {t('loading') || 'Loading'}...
+                </p>
+              </div>
+            )}
+          </ArtifactProvider>
+        </VisemeProvider>
+      </AlertProvider>
     </I18nWrapper>
   );
 };