@memori.ai/memori-react 2.1.0 → 2.2.1

package/src/components/ChatInputs/__snapshots__/ChatInputs.test.tsx.snap

@@ -88,26 +88,41 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -198,26 +213,41 @@ exports[`renders ChatInputs listening unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
-      title="write_and_speak.micButtonPopoverListening"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
+          title="write_and_speak.micButtonPopoverListening"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -337,26 +367,41 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -446,26 +491,41 @@ exports[`renders ChatInputs unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -556,26 +616,41 @@ exports[`renders ChatInputs with user message unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;

package/src/components/ChatTextArea/ChatTextArea.css

@@ -40,7 +40,7 @@ textarea.memori-chat-textarea--input {
     border: none;
     background: #fff;
     color: #000;
-    font-family: "Exo 2", sans-serif;
+    font-family: 'Exo 2', sans-serif;
     resize: none;
 }
 
@@ -78,8 +78,12 @@ button.memori-chat-textarea--expand-button:focus {
     outline: none;
 }
 
-.memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus .memori-chat-textarea--expand-button,
-.memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus-within .memori-chat-textarea--expand-button {
+.memori-chat-textarea:not(.memori-chat-textarea--disabled)
+    .memori-chat-textarea--inner:focus
+    .memori-chat-textarea--expand-button,
+.memori-chat-textarea:not(.memori-chat-textarea--disabled)
+    .memori-chat-textarea--inner:focus-within
+    .memori-chat-textarea--expand-button {
     opacity: 1;
 }
 

package/src/components/DateSelector/DateSelector.css

@@ -12,14 +12,15 @@
 .memori--date-selector__select-button {
     position: relative;
     width: 100%;
-    padding-top: .5rem;
+    padding-top: 0.5rem;
     padding-right: 2.5rem;
-    padding-bottom: .5rem;
-    padding-left: .75rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
     border: 1px solid #e5e7eb;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     background: #fff;
-    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
+        rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
     cursor: pointer;
     text-align: left;
 }
@@ -51,7 +52,7 @@
 
 @media (min-width: 640px) {
     .memori--date-selector__select-button {
-        font-size: .875rem;
+        font-size: 0.875rem;
         line-height: 1.25rem;
     }
 }
@@ -75,7 +76,7 @@
     bottom: 0;
     display: flex;
     align-items: center;
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     pointer-events: none;
 }
 
@@ -92,32 +93,33 @@ ul.memori--date-selector__select-options {
     width: 100%;
     max-width: min(18rem, 30%);
     max-height: 15rem;
-    padding-top: .25rem;
+    padding-top: 0.25rem;
     padding-right: 0;
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
     padding-left: 0;
-    border-radius: .375rem;
-    margin-top: .25rem;
+    border-radius: 0.375rem;
+    margin-top: 0.25rem;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
     background: #fff;
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
+        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
     list-style: none;
 }
 
 @media (min-width: 640px) {
     .memori--date-selector__select-options {
-        font-size: .875rem;
+        font-size: 0.875rem;
         line-height: 1.25rem;
     }
 }
 
 li.memori--date-selector__select-option {
     position: relative;
-    padding-top: .5rem;
+    padding-top: 0.5rem;
     padding-right: 1rem;
-    padding-bottom: .5rem;
+    padding-bottom: 0.5rem;
     padding-left: 1rem;
     color: rgb(17 24 39/1);
     cursor: pointer;

package/src/components/ExportHistoryButton/ExportHistoryButton.css

@@ -12,7 +12,7 @@
     text-align: left;
 }
 
-.memori-export-history-button--panel button+button {
+.memori-export-history-button--panel button + button {
     margin-left: 0.5rem;
 }
 

package/src/components/FeedbackButtons/FeedbackButtons.css

@@ -21,9 +21,9 @@
 }
 
 .transition {
-    transition-duration: .15s;
+    transition-duration: 0.15s;
     transition-property: all;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .ease-out {
@@ -63,11 +63,11 @@
     top: calc(100% - 0.25rem);
     right: -2rem;
     width: 14rem;
-    border: 1px solid rgba(0,0,0,0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 0.375rem;
     margin-top: 0.5rem;
     background-color: #fff;
-    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
     outline: none;
     transform-origin: top right;
 }

package/src/components/FeedbackButtons/FeedbackButtons.tsx

@@ -122,7 +122,7 @@ const FeedbackButtons = ({
           </Transition>
         </Menu>
       ) : (
-        <Tooltip alignLeft content="Feedback">
+        <Tooltip align="left" content="Feedback">
           <Button
             title="Feedback"
             onClick={() => {

package/src/components/Header/Header.css

@@ -6,6 +6,7 @@
     padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
     border-radius: 10px;
     margin-left: auto;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background-color: var(--memori-inner-bg, #fff);
     text-align: right;
@@ -24,7 +25,7 @@
     justify-content: center;
 }
 
-.memori-header--button+.memori-header--button {
+.memori-header--button + .memori-header--button {
     margin-left: 0.25rem;
 }
 

package/src/components/Header/Header.stories.tsx

@@ -46,6 +46,9 @@ const Template: Story<Props> = args => {
         continuousSpeechTimeout={continuousSpeechTimeout}
         setContinuousSpeech={setContinuousSpeech}
         setContinuousSpeechTimeout={setContinuousSpeechTimeout}
+        setControlsPosition={() => {}}
+        controlsPosition="bottom"
+        setHideEmissions={() => {}}
       />
     </>
   );

package/src/components/Header/Header.tsx

@@ -126,7 +126,7 @@ const Header: React.FC<Props> = ({
         <Button
           primary
           shape="circle"
-          className="memori-header--button"
+          className="memori-header--button memori-header--button-settings"
           icon={<Setting />}
           onClick={() => setShowSettingsDrawer(true)}
           title={t('widget.settings') || 'Settings'}

package/src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -200,7 +200,7 @@ exports[`renders Header with settings button unchanged 1`] = `
       </button>
     </div>
     <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button"
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-settings"
       title="widget.settings"
     >
       <span

package/src/components/ImageUpload/ImageUpload.css

@@ -11,7 +11,7 @@ legend.helper p {
     margin-bottom: 0;
 }
 
-.memori--upload  .ant-upload-list-picture-card-container,
+.memori--upload .ant-upload-list-picture-card-container,
 .memori--upload .ant-upload.ant-upload-select-picture-card {
     width: auto;
     min-width: 100px;
@@ -88,8 +88,7 @@ legend.helper p {
     text-align: center;
 }
 
-.memori--list-item-wrapper .ant-upload-list-item-error
-.ant-upload-list-item-name {
+.memori--list-item-wrapper .ant-upload-list-item-error .ant-upload-list-item-name {
     position: static;
     margin: 0 0 1rem;
 }

package/src/components/MediaWidget/MediaItemWidget.css

@@ -94,6 +94,7 @@ a.memori-media-item--link {
 .memori-media-item--modal .memori-modal--panel {
     width: 75vw;
     height: 85vh;
+    -webkit-backdrop-filter: blur(var(--memori-blur-background, 10px));
     backdrop-filter: blur(var(--memori-blur-background, 10px));
     background: rgba(0, 0, 0, 0.25);
 }
@@ -121,6 +122,7 @@ a.memori-media-item--link {
     position: absolute;
     bottom: 0;
     width: 100%;
+    -webkit-backdrop-filter: blur(var(--memori-blur-background, 5px));
     backdrop-filter: blur(var(--memori-blur-background, 5px));
     background: rgba(255, 255, 255, 0.5);
     color: #000;

package/src/components/MediaWidget/MediaWidget.css

@@ -32,7 +32,7 @@
     margin-bottom: 0.5rem;
 }
 
-.memori-media--hints li+li {
+.memori-media--hints li + li {
     margin-left: 0.5rem;
 }
 

package/src/components/MemoriWidget/MemoriWidget.css

@@ -121,7 +121,6 @@
     filter: blur(var(--memori-blur-background, 0));
 }
 
-
 .memori--powered-by {
     position: absolute;
     z-index: 1000;
@@ -176,7 +175,7 @@
     font-size: 1rem;
 }
 
-.memori--conversation-button+.memori--conversation-button {
+.memori--conversation-button + .memori--conversation-button {
     margin-left: 0.33rem;
 }