@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.18

package/src/components/layouts/__snapshots__/HiddenChat.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
+    data-theme="light"
     style="height: 100vh;"
   >
     <div
@@ -17,6 +18,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="memori-alert-viewport memori-alert-viewport--top-end"
+      data-theme="light"
       role="region"
       style="z-index: 10002;"
       tabindex="-1"
@@ -105,7 +107,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                         >
                           <button
                             aria-label="widget.sound"
-                            class="memori-button memori-button--outline memori-button--md memori-button--icon-only"
+                            class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
                             tabindex="0"
                             title="widget.sound"
                             type="button"
@@ -114,15 +116,16 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                               class="memori-button__icon"
                             >
                               <svg
+                                aria-hidden="true"
                                 class="lucide lucide-volume2"
                                 fill="none"
-                                height="24"
+                                height="20"
                                 stroke="currentColor"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
                                 stroke-width="2"
                                 viewBox="0 0 24 24"
-                                width="24"
+                                width="20"
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
@@ -141,11 +144,11 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                       </span>
                     </span>
                   </div>
-                  <label
+                  <button
                     aria-label="collapse"
-                    class="memori-sidebar-toggle-label memori-close-label memori-hidden-chat-layout--header-close"
-                    for="memori-sidebar-toggle"
+                    class="memori-website_assistant--close-button memori-hidden-chat-layout--header-close"
                     title="collapse"
+                    type="button"
                   >
                     <svg
                       aria-hidden="true"
@@ -167,7 +170,7 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                         d="m6 6 12 12"
                       />
                     </svg>
-                  </label>
+                  </button>
                 </div>
               </div>
             </div>
@@ -550,144 +553,6 @@ exports[`renders HIDDEN_CHAT layout unchanged 1`] = `
                 id="extension"
               />
             </div>
-            <div
-              class="memori--powered-by"
-            >
-              <svg
-                aria-hidden="true"
-                aria-label="Memori AI"
-                class="memori--powered-by-icon"
-                fill="currentColor"
-                height="800"
-                viewBox="0 0 670.70013 639.67999"
-                width="800"
-              >
-                <defs>
-                  <style>
-                    
-      .cls-1 {
-        fill: url(#Sfumatura_senza_nome_6);
-      }
-
-      .cls-1,
-      .cls-2 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: var(--memori-logo-text-color, '#744c99');
-      }
-    
-                  </style>
-                  <lineargradient
-                    data-name="Sfumatura senza nome 6"
-                    gradientTransform="translate(-304.65445,-80.16)"
-                    gradientUnits="userSpaceOnUse"
-                    id="Sfumatura_senza_nome_6"
-                    x1="392.82999"
-                    x2="786.29999"
-                    y1="-13.83"
-                    y2="628.33002"
-                  >
-                    <stop
-                      id="stop1"
-                      offset="0.18"
-                      stop-color="#9ad2d5"
-                    />
-                    <stop
-                      id="stop2"
-                      offset="0.32"
-                      stop-color="#26b5cb"
-                    />
-                    <stop
-                      id="stop3"
-                      offset="0.38"
-                      stop-color="#379cbe"
-                    />
-                    <stop
-                      id="stop4"
-                      offset="0.46"
-                      stop-color="#4c7eb0"
-                    />
-                    <stop
-                      id="stop5"
-                      offset="0.55"
-                      stop-color="#5d66a4"
-                    />
-                    <stop
-                      id="stop6"
-                      offset="0.65"
-                      stop-color="#69569c"
-                    />
-                    <stop
-                      id="stop7"
-                      offset="0.76"
-                      stop-color="#704c97"
-                    />
-                    <stop
-                      id="stop8"
-                      offset="0.89"
-                      stop-color="#734996"
-                    />
-                  </lineargradient>
-                </defs>
-                <g
-                  id="g13"
-                  transform="translate(-304.65445,-80.16)"
-                >
-                  <path
-                    class="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
-                    class="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
-                    class="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
-                    class="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
-                    class="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
-                    class="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
-                  class="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>
-              <p
-                class="memori--powered-by-label"
-              >
-                <span>
-                  Powered by 
-                </span>
-                <a
-                  href="https://memori.ai/it?integrationID=cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1&memori=aisuru.com-username-Memori"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Memori.AI
-                </a>
-              </p>
-            </div>
           </div>
         </aside>
       </div>

package/src/components/layouts/__snapshots__/Totem.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`renders Totem layout unchanged 1`] = `
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
+    data-theme="light"
     style="height: 100vh;"
   >
     <div
@@ -17,6 +18,7 @@ exports[`renders Totem layout unchanged 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="memori-alert-viewport memori-alert-viewport--top-end"
+      data-theme="light"
       role="region"
       style="z-index: 10002;"
       tabindex="-1"
@@ -42,6 +44,8 @@ exports[`renders Totem layout unchanged 1`] = `
     --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
     --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
     --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
+    --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
   }
   [data-theme="dark"] .memori-widget,
   .memori-widget[data-theme="dark"],
@@ -62,11 +66,8 @@ exports[`renders Totem layout unchanged 1`] = `
     --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
     --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
     --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
-  }
-  .memori-widget .memori-chat--history--has-global-background::before,
-  .memori-widget .memori-chat-layout--main--has-background::before {
-    filter: blur(5px);
-    transform: scale(1.06);
+    --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
   }
 }
 
@@ -240,7 +241,7 @@ exports[`renders Totem layout unchanged 1`] = `
                     <button
                       aria-label="widget.sound"
                       aria-pressed="false"
-                      class="memori-button memori-button--outline memori-button--md memori-button--icon-only memori-totem-rail--button"
+                      class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button memori-totem-rail--button"
                       tabindex="0"
                       title="widget.sound"
                       type="button"
@@ -249,15 +250,16 @@ exports[`renders Totem layout unchanged 1`] = `
                         class="memori-button__icon"
                       >
                         <svg
+                          aria-hidden="true"
                           class="lucide lucide-volume2"
                           fill="none"
-                          height="24"
+                          height="20"
                           stroke="currentColor"
                           stroke-linecap="round"
                           stroke-linejoin="round"
                           stroke-width="2"
                           viewBox="0 0 24 24"
-                          width="24"
+                          width="20"
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
@@ -289,7 +291,7 @@ exports[`renders Totem layout unchanged 1`] = `
                       aria-expanded="false"
                       aria-haspopup="menu"
                       aria-label="widget.share"
-                      class="memori-button memori-button--outline memori-button--md memori-button--icon-only"
+                      class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
                       id="base-ui-:r8:"
                       tabindex="0"
                       title="widget.share"
@@ -369,7 +371,7 @@ exports[`renders Totem layout unchanged 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="login.user"
-                        class="memori-button memori-button--outline memori-button--md memori-button--icon-only memori-totem-rail--button memori-totem-rail--account-trigger"
+                        class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button memori-totem-rail--button memori-totem-rail--account-trigger"
                         data-base-ui-click-trigger=""
                         id="base-ui-:rc:"
                         tabindex="0"

package/src/components/layouts/__snapshots__/ZoomedFullBody.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
     data-memori-name="Memori"
     data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
+    data-theme="light"
     style="height: 100vh;"
   >
     <div
@@ -17,6 +18,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="memori-alert-viewport memori-alert-viewport--top-end"
+      data-theme="light"
       role="region"
       style="z-index: 10002;"
       tabindex="-1"
@@ -42,6 +44,8 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
     --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
     --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
     --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
+    --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
   }
   [data-theme="dark"] .memori-widget,
   .memori-widget[data-theme="dark"],
@@ -62,11 +66,8 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
     --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
     --memori-skeleton-base: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%);
     --memori-skeleton-highlight: color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%);
-  }
-  .memori-widget .memori-chat--history--has-global-background::before,
-  .memori-widget .memori-chat-layout--main--has-background::before {
-    filter: blur(5px);
-    transform: scale(1.06);
+    --memori-icon-active-bg: color-mix(in oklch, var(--memori-primary) 12%, transparent);
+    --memori-icon-recording-bg: color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent);
   }
 }
 
@@ -133,7 +134,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                         >
                           <button
                             aria-label="widget.sound"
-                            class="memori-button memori-button--outline memori-button--md memori-button--icon-only"
+                            class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
                             tabindex="0"
                             title="widget.sound"
                             type="button"
@@ -142,15 +143,16 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                               class="memori-button__icon"
                             >
                               <svg
+                                aria-hidden="true"
                                 class="lucide lucide-volume2"
                                 fill="none"
-                                height="24"
+                                height="20"
                                 stroke="currentColor"
                                 stroke-linecap="round"
                                 stroke-linejoin="round"
                                 stroke-width="2"
                                 viewBox="0 0 24 24"
-                                width="24"
+                                width="20"
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
@@ -182,7 +184,7 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                             aria-expanded="false"
                             aria-haspopup="menu"
                             aria-label="widget.share"
-                            class="memori-button memori-button--outline memori-button--md memori-button--icon-only"
+                            class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
                             id="base-ui-:r8:"
                             tabindex="0"
                             title="widget.share"

package/src/components/layouts/chat.css

@@ -1,6 +1,9 @@
 .memori-widget.memori-layout-chat {
     overflow: hidden;
     height: 100vh !important;
+    height: 100dvh !important;
+    max-height: 100vh;
+    max-height: 100dvh;
     padding: 0;
 }
 
@@ -26,9 +29,6 @@
 }
 
 @media (max-width: 600px) {
-    .memori-widget.memori-layout-chat .memori-chat-inputs-wrapper {
-        margin-bottom: var(--memori-spacing-md);
-    }
     .memori-widget.memori-layout-chat .memori--start-description {
         display: none;
     }
@@ -43,6 +43,7 @@
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
         min-width: 0;
+        flex: 1 1 auto;
         flex-wrap: nowrap;
         -webkit-overflow-scrolling: touch;
         overflow-x: auto;
@@ -50,29 +51,43 @@
     }
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
-        min-width: 0;
+        min-width: max-content;
+        flex-shrink: 0;
         flex-wrap: nowrap;
     }
+
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-icon-button,
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-button {
+        flex-shrink: 0;
+    }
 }
 
+/* Column fills the chat pane so the input strip can go edge-to-edge;
+   message reading width is applied on --body / the input field itself. */
 .memori-widget.memori-layout-chat .memori-chat-layout--controls > .memori-conversation-column {
     display: flex;
     width: 100%;
+    max-width: none;
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
+    margin-inline: 0;
+    padding-inline: 0;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--body {
     display: flex;
     overflow: hidden;
     width: 100%;
+    max-width: var(--memori-conversation-max-width, 48rem);
     min-height: 0;
+    box-sizing: border-box;
     flex: 1;
     flex-direction: column;
     align-items: stretch;
-    margin: 0 auto;
     background: var(--memori-secondary-background);
+    margin-inline: auto;
+    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
 }
 
 /* When a global background is on chat content, keep the body strip neutral. */
@@ -98,21 +113,32 @@
     justify-content: center;
 }
 
-/* Input bar is a flex sibling of body inside the shared conversation column */
+/* Full-bleed input strip across the chat column; field stays on the conversation axis */
 .memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper {
     overflow: hidden;
     width: 100%;
+    max-width: none;
+    box-sizing: border-box;
     flex-shrink: 0;
     border-top: none;
     background: var(--memori-secondary-background);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    margin-inline: 0;
+    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
 }
 
 .memori-widget.memori-layout-chat .memori-chat-inputs {
     background: transparent;
 }
 
+.memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper .memori-chat-inputs,
+.memori-widget.memori-layout-chat .memori-conversation-column > .memori-chat-inputs-wrapper .memori-conversation-footer {
+    width: 100%;
+    max-width: var(--memori-conversation-max-width, 48rem);
+    margin-inline: auto;
+}
+
 .memori-chat-layout--header-with-artifact {
     display: none;
 }
@@ -204,6 +230,15 @@
         text-overflow: unset;
         white-space: normal;
     }
+
+    .memori-widget.memori--active.memori-layout-chat .memori-conversation-footer {
+        justify-content: flex-start;
+    }
+
+    .memori-widget.memori--active.memori-layout-chat .memori-conversation-footer .memori-chat-inputs--ai-note {
+        flex: 1 1 auto;
+        text-align: left;
+    }
 }
 
 .memori-chat-layout--controls .memori-chat--wrapper {
@@ -300,14 +335,20 @@
 .memori-chat-layout--main {
     position: relative;
     display: flex;
-    overflow: hidden;
+    /* clip (not hidden): the blurred/scaled global-background ::before expands
+       scrollable overflow; overflow:hidden still creates a scrollport, so
+       Chat's scrollIntoView can shift the whole chrome upward and clip the header. */
+    overflow: clip;
     width: 100%;
+    min-width: 0;
     height: 100%;
-    flex: 1;
+    min-height: 0;
+    flex: 1 1 0%;
     flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    /* max-width: 1200px; */
+    /* Stretch — never center the column vertically or an overflowing
+       controls pane gets clipped at the top (header) and leaves a gap below. */
+    align-items: stretch;
+    justify-content: flex-start;
     transition: all 0.05s ease-in-out;
 }
 
@@ -318,6 +359,7 @@
     overflow: hidden;
     min-width: 0;
     height: 100%;
+    min-height: 0;
     max-height: 100%;
     flex: 1;
     flex-direction: column;
@@ -335,23 +377,34 @@
     background: var(--memori-secondary-background);
 }
 
-/* Artifact drawer column inside the Chat layout's flex row */
-.memori-chat-layout .memori--grid-column-artifact {
+/* Header sits above the content row (FULLPAGE pattern) so opening the
+   artifact only redistributes the chat/artifact columns. */
+.memori-widget.memori-layout-chat .memori-chat-layout--header {
+    position: relative;
+    z-index: 6;
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* Artifact drawer column — flex sibling of chat controls inside --main */
+.memori-widget.memori-layout-chat .memori--grid-column-artifact {
     overflow: hidden;
     width: 0;
     min-width: 0;
+    height: 100%;
+    min-height: 0;
     flex-shrink: 0;
     transition: width 0.25s ease;
 }
 
-.memori-chat-layout .memori--grid-column-artifact--open {
-    width: 620px;
+.memori-widget.memori-layout-chat .memori--grid-column-artifact--open {
+    width: min(620px, 55%);
     border-left: 1px solid var(--memori-border-color);
     background: var(--memori-secondary-background);
 }
 
 @media (max-width: 1260px) {
-    .memori-chat-layout .memori--grid-column-artifact {
+    .memori-widget.memori-layout-chat .memori--grid-column-artifact {
         display: none;
     }
 }
@@ -377,10 +430,12 @@
     background-repeat: no-repeat;
     background-size: cover;
     content: '';
+    filter: blur(5px);
     pointer-events: none;
+    transform: scale(1.06);
 }
 
-.memori-chat-layout--main--has-background .memori--grid-column-artifact {
+.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori--grid-column-artifact {
     position: relative;
     z-index: 5;
 }
@@ -390,38 +445,18 @@
     background: transparent;
 }
 
-/* The header is a solid strip, so the image starts below it. */
-.memori-widget.memori-layout-chat .memori-chat-layout--main--has-background .memori-chat-layout--header {
+/* Header is outside --main; keep it a solid strip above the backgrounded content. */
+.memori-widget.memori-layout-chat:has(.memori-chat-layout--main--has-background) .memori-chat-layout--header {
     background: var(--memori-secondary-background);
 }
 
-/* The input bar stays a solid strip, so the image ends where the messages end.
-   It breaks out of the conversation column to span the whole width; the
-   surrounding `overflow: hidden` on the controls clips it to the chat column. */
+/* Input strip is already full-bleed (see rules above); keep its solid surface over the image. */
 .memori-widget.memori-layout-chat
     .memori-chat-layout--main--has-background
     .memori-conversation-column
     > .memori-chat-inputs-wrapper {
-    width: 100vw;
-    max-width: 100vw;
     margin-bottom: 0;
     background: var(--memori-secondary-background);
-    margin-inline: calc(50% - 50vw);
-    padding-inline: var(--memori-conversation-inline-padding, var(--memori-spacing-md));
-}
-
-.memori-widget.memori-layout-chat
-    .memori-chat-layout--main--has-background
-    .memori-conversation-column
-    > .memori-chat-inputs-wrapper
-    .memori-chat-inputs,
-.memori-widget.memori-layout-chat
-    .memori-chat-layout--main--has-background
-    .memori-conversation-column
-    > .memori-chat-inputs-wrapper
-    .memori-conversation-footer {
-    max-width: var(--memori-conversation-max-width, 48rem);
-    margin-inline: auto;
 }
 
 /* The column-scoped image would otherwise paint a second, narrower copy. */
@@ -504,7 +539,7 @@
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori--start-panel,
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--wrapper {
     min-width: 0;
-    margin-top: var(--memori-spacing-lg);
+    min-height: 0;
 }
 
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--wrapper {