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

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

@@ -9,6 +9,7 @@ exports[`renders 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 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"
@@ -42,6 +44,8 @@ exports[`renders Chat 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 Chat 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);
   }
 }
 
@@ -81,174 +82,175 @@ exports[`renders Chat layout unchanged 1`] = `
           id="extension"
         />
         <div
-          class="memori-chat-layout--main memori-chat-layout--main--has-background"
-          style="--memori-chat-global-background: url(https://assets.memori.ai/api/v2/asset/364e498c-11da-42d5-9e32-19e5d137d4b8.jpeg);"
+          class="memori-chat-layout--header"
         >
           <div
-            class="memori-chat-layout--controls"
+            class="memori-fullpage-header-row"
           >
             <div
-              class="memori-chat-layout--header"
+              class="memori-fullpage-header-brand"
             >
+              <img
+                alt=""
+                class="memori-fullpage-header-brand-icon memori-fullpage-header-brand-icon--avatar"
+                role="presentation"
+                src="https://aisuru.com/images/aisuru/square_logo.png"
+              />
               <div
-                class="memori-fullpage-header-row"
+                class="memori-fullpage-header-brand-text"
               >
-                <div
-                  class="memori-fullpage-header-brand"
+                <span
+                  class="memori-fullpage-header-brand-name"
+                  title="Memori"
                 >
-                  <img
-                    alt=""
-                    class="memori-fullpage-header-brand-icon memori-fullpage-header-brand-icon--avatar"
-                    role="presentation"
-                    src="https://aisuru.com/images/aisuru/square_logo.png"
-                  />
-                  <div
-                    class="memori-fullpage-header-brand-text"
-                  >
-                    <span
-                      class="memori-fullpage-header-brand-name"
-                      title="Memori"
-                    >
-                      Memori
-                    </span>
-                    <span
-                      class="memori-fullpage-header-brand-role"
-                      title="Lorem ipsum."
-                    >
-                      Lorem ipsum.
-                    </span>
-                  </div>
-                </div>
+                  Memori
+                </span>
+                <span
+                  class="memori-fullpage-header-brand-role"
+                  title="Lorem ipsum."
+                >
+                  Lorem ipsum.
+                </span>
+              </div>
+            </div>
+            <div
+              class="memori-fullpage-header-actions"
+            >
+              <div
+                class="memori-header memori-header--fullpage"
+              >
                 <div
-                  class="memori-fullpage-header-actions"
+                  class="memori-header--fullpage-secondary"
                 >
-                  <div
-                    class="memori-header memori-header--fullpage"
+                  <span
+                    class="memori-tooltip"
                   >
-                    <div
-                      class="memori-header--fullpage-secondary"
+                    <span
+                      class="memori-tooltip__trigger"
+                      id="base-ui-:r1:"
                     >
                       <span
-                        class="memori-tooltip"
+                        style="display: inline-flex;"
                       >
-                        <span
-                          class="memori-tooltip__trigger"
-                          id="base-ui-:r1:"
+                        <button
+                          aria-label="widget.sound"
+                          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
+                          tabindex="0"
+                          title="widget.sound"
+                          type="button"
                         >
                           <span
-                            style="display: inline-flex;"
+                            class="memori-button__icon"
                           >
-                            <button
-                              aria-label="widget.sound"
-                              class="memori-button memori-button--outline memori-button--md memori-button--icon-only"
-                              tabindex="0"
-                              title="widget.sound"
-                              type="button"
+                            <svg
+                              aria-hidden="true"
+                              class="lucide lucide-volume2"
+                              fill="none"
+                              height="20"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="20"
+                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <span
-                                class="memori-button__icon"
-                              >
-                                <svg
-                                  class="lucide lucide-volume2"
-                                  fill="none"
-                                  height="24"
-                                  stroke="currentColor"
-                                  stroke-linecap="round"
-                                  stroke-linejoin="round"
-                                  stroke-width="2"
-                                  viewBox="0 0 24 24"
-                                  width="24"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
-                                  />
-                                  <path
-                                    d="M16 9a5 5 0 0 1 0 6"
-                                  />
-                                  <path
-                                    d="M19.364 18.364a9 9 0 0 0 0-12.728"
-                                  />
-                                </svg>
-                              </span>
-                            </button>
+                              <path
+                                d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+                              />
+                              <path
+                                d="M16 9a5 5 0 0 1 0 6"
+                              />
+                              <path
+                                d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                              />
+                            </svg>
                           </span>
-                        </span>
+                        </button>
                       </span>
-                      <div
-                        class="memori-dropdown memori-share-button memori-share-button--align-left"
+                    </span>
+                  </span>
+                  <div
+                    class="memori-dropdown memori-share-button memori-share-button--align-left"
+                  >
+                    <span
+                      class="memori-tooltip"
+                    >
+                      <span
+                        class="memori-tooltip__trigger"
+                        id="base-ui-:r7:"
                       >
-                        <span
-                          class="memori-tooltip"
+                        <button
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="widget.share"
+                          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"
+                          type="button"
                         >
                           <span
-                            class="memori-tooltip__trigger"
-                            id="base-ui-:r7:"
+                            class="memori-button__icon"
                           >
-                            <button
-                              aria-expanded="false"
-                              aria-haspopup="menu"
-                              aria-label="widget.share"
-                              class="memori-button memori-button--outline memori-button--md memori-button--icon-only"
-                              id="base-ui-:r8:"
-                              tabindex="0"
-                              title="widget.share"
-                              type="button"
+                            <svg
+                              aria-hidden="true"
+                              class="lucide lucide-share2"
+                              fill="none"
+                              height="24"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              viewBox="0 0 24 24"
+                              width="24"
+                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <span
-                                class="memori-button__icon"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="lucide lucide-share2"
-                                  fill="none"
-                                  height="24"
-                                  stroke="currentColor"
-                                  stroke-linecap="round"
-                                  stroke-linejoin="round"
-                                  stroke-width="2"
-                                  viewBox="0 0 24 24"
-                                  width="24"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <circle
-                                    cx="18"
-                                    cy="5"
-                                    r="3"
-                                  />
-                                  <circle
-                                    cx="6"
-                                    cy="12"
-                                    r="3"
-                                  />
-                                  <circle
-                                    cx="18"
-                                    cy="19"
-                                    r="3"
-                                  />
-                                  <line
-                                    x1="8.59"
-                                    x2="15.42"
-                                    y1="13.51"
-                                    y2="17.49"
-                                  />
-                                  <line
-                                    x1="15.41"
-                                    x2="8.59"
-                                    y1="6.51"
-                                    y2="10.49"
-                                  />
-                                </svg>
-                              </span>
-                            </button>
+                              <circle
+                                cx="18"
+                                cy="5"
+                                r="3"
+                              />
+                              <circle
+                                cx="6"
+                                cy="12"
+                                r="3"
+                              />
+                              <circle
+                                cx="18"
+                                cy="19"
+                                r="3"
+                              />
+                              <line
+                                x1="8.59"
+                                x2="15.42"
+                                y1="13.51"
+                                y2="17.49"
+                              />
+                              <line
+                                x1="15.41"
+                                x2="8.59"
+                                y1="6.51"
+                                y2="10.49"
+                              />
+                            </svg>
                           </span>
-                        </span>
-                      </div>
-                    </div>
+                        </button>
+                      </span>
+                    </span>
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
+        <div
+          class="memori-chat-layout--main memori-chat-layout--main--has-background"
+          style="--memori-chat-global-background: url(https://assets.memori.ai/api/v2/asset/364e498c-11da-42d5-9e32-19e5d137d4b8.jpeg);"
+        >
+          <div
+            class="memori-chat-layout--controls"
+          >
             <div
               class="memori-conversation-column"
             >

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

@@ -9,6 +9,7 @@ exports[`renders FullPage 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 FullPage 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 FullPage 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 FullPage 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 FullPage 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 FullPage 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 FullPage 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"
@@ -795,6 +797,7 @@ exports[`renders FullPage layout with root css properties 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
@@ -803,6 +806,7 @@ exports[`renders FullPage layout with root css properties 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"
@@ -828,6 +832,8 @@ exports[`renders FullPage layout with root css properties 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"],
@@ -848,11 +854,8 @@ exports[`renders FullPage layout with root css properties 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);
   }
 }
 
@@ -919,7 +922,7 @@ exports[`renders FullPage layout with root css properties 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"
@@ -928,15 +931,16 @@ exports[`renders FullPage layout with root css properties 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
@@ -968,7 +972,7 @@ exports[`renders FullPage layout with root css properties 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-:r1g:"
                             tabindex="0"
                             title="widget.share"