@memori.ai/memori-react 2.2.0 → 2.2.1

package/esm/components/ui/Select.css

@@ -7,14 +7,15 @@
     position: relative;
     width: 100%;
     min-height: 38px;
-    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;
 }
@@ -46,7 +47,7 @@
 
 @media (min-width: 640px) {
     .memori-select--button {
-        font-size: .875rem;
+        font-size: 0.875rem;
         line-height: 1.25rem;
     }
 }
@@ -74,7 +75,7 @@
     bottom: 0;
     display: flex;
     align-items: center;
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     pointer-events: none;
 }
 
@@ -91,32 +92,33 @@ ul.memori-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-select--options {
-        font-size: .875rem;
+        font-size: 0.875rem;
         line-height: 1.25rem;
     }
 }
 
 li.memori-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;
@@ -132,4 +134,3 @@ li.memori-select--option:focus {
     outline: 2px solid #63b3ed;
     outline-offset: 2px;
 }
-

package/esm/components/ui/Tooltip.css

@@ -41,10 +41,10 @@
     border: 10px solid rgba(0, 0, 0, 0.8);
     border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
     margin-left: -5px;
-    content: "";
+    content: '';
     opacity: 0;
     transform: translateY(-50%);
-    transition: .3s;
+    transition: 0.3s;
 }
 
 .memori-tooltip.memori-tooltip--align-left .memori-tooltip--content::before {
@@ -81,8 +81,10 @@
     opacity: 1;
 }
 
-.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
+.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
+    .memori-tooltip--content {
     transform: translateY(-150%) translateX(-33%);
 }
 
@@ -95,8 +97,10 @@
     margin-left: 5px;
 }
 
-.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
+.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
+    .memori-tooltip--content {
     transform: translateY(-150%) translateX(33%);
 }
 
@@ -108,4 +112,4 @@
 
 .memori-tooltip.memori-tooltip--disabled {
     cursor: not-allowed;
-}
+}

package/esm/helpers/translations.js

@@ -12,8 +12,7 @@ export const getTranslation = async (text, to, from, baseUrl) => {
     var _a;
     const isReservedKeyword = dialogKeywords.indexOf(text.toLowerCase()) > -1;
     const fromLanguage = isReservedKeyword ? 'IT' : from === null || from === void 0 ? void 0 : from.toUpperCase();
-    const deeplResult = await fetch(`${baseUrl ||
-        'https://app.twincreator.com'}/api/translate?text=${encodeURIComponent(text)}&target_lang=${to.toUpperCase()}${fromLanguage ? `&source_lang=${fromLanguage}` : ''}`, {
+    const deeplResult = await fetch(`${baseUrl || 'https://app.twincreator.com'}/api/translate?text=${encodeURIComponent(text)}&target_lang=${to.toUpperCase()}${fromLanguage ? `&source_lang=${fromLanguage}` : ''}`, {
         method: 'GET',
         headers: {
             Accept: '*/*',

package/esm/helpers/translations.js.map

@@ -1 +1 @@
-{"version":3,"file":"translations.js","sourceRoot":"","sources":["../../src/helpers/translations.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,SAAS;IACT,WAAW;IACX,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,aAAa;IACb,eAAe;IACf,mBAAmB;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EACjC,IAAY,EACZ,EAAU,EACV,IAAa,EACb,OAAgB,EACW,EAAE;;IAC7B,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,CAAC;IACpE,MAAM,WAAW,GAAG,MAAM,KAAK,CAC7B,GAAG,OAAO;QACR,6BAA6B,uBAAuB,kBAAkB,CACtE,IAAI,CACL,gBAAgB,EAAE,CAAC,WAAW,EAAE,GAC/B,YAAY,CAAC,CAAC,CAAC,gBAAgB,YAAY,EAAE,CAAC,CAAC,CAAC,EAClD,EAAE,EACF;QACE,MAAM,EAAE,KAAK;QACb,OAAO,EAAE;YACP,MAAM,EAAE,KAAK;SACd;KACF,CACF,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC,IAAI,EAAE,CAAC;IAC/C,OAAO,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,0CAAG,CAAC,CAAC,CAAC;AAC1C,CAAC,CAAC"}
+{"version":3,"file":"translations.js","sourceRoot":"","sources":["../../src/helpers/translations.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,SAAS;IACT,WAAW;IACX,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,aAAa;IACb,eAAe;IACf,mBAAmB;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EACjC,IAAY,EACZ,EAAU,EACV,IAAa,EACb,OAAgB,EACW,EAAE;;IAC7B,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,CAAC;IACpE,MAAM,WAAW,GAAG,MAAM,KAAK,CAC7B,GACE,OAAO,IAAI,6BACb,uBAAuB,kBAAkB,CACvC,IAAI,CACL,gBAAgB,EAAE,CAAC,WAAW,EAAE,GAC/B,YAAY,CAAC,CAAC,CAAC,gBAAgB,YAAY,EAAE,CAAC,CAAC,CAAC,EAClD,EAAE,EACF;QACE,MAAM,EAAE,KAAK;QACb,OAAO,EAAE;YACP,MAAM,EAAE,KAAK;SACd;KACF,CACF,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,WAAW,CAAC,IAAI,EAAE,CAAC;IAC/C,OAAO,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,0CAAG,CAAC,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/esm/styles.css

@@ -56,7 +56,7 @@
 
 memori-client,
 memori-client #root,
-memori-client+#headlessui-portal-root,
+memori-client ~ #headlessui-portal-root,
 body.sb-show-main #root,
 body.sb-show-main #headlessui-portal-root,
 #storybook-root,
@@ -84,4 +84,4 @@ body.sb-show-main #headlessui-portal-root,
     --memori-modal--width: 100%;
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
-}
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "2.2.1",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Avatar/Avatar.css

@@ -61,7 +61,6 @@
 }
 
 @media (max-width: 870px) {
-
     .memori--avatar-wrapper div,
     .memori--avatar-wrapper canvas,
     .memori--avatar-wrapper model-viewer {

package/src/components/Blob/Blob.css

@@ -93,20 +93,25 @@
         filter: brightness(1);
         transform: scale(1);
     }
+
     15% {
         filter: brightness(1.1);
     }
+
     30% {
         filter: brightness(1);
         transform: scale(0.99);
     }
+
     50% {
         filter: brightness(1.05);
         transform: scale(1.01);
     }
+
     75% {
         filter: brightness(1.15);
     }
+
     100% {
         filter: brightness(1.1);
         transform: scale(0.99);
@@ -140,7 +145,7 @@
     object-fit: contain;
 }
 
-.memori-blob figure~.mainDiv {
+.memori-blob figure ~ .mainDiv {
     opacity: 0.2;
 }
 

package/src/components/ChangeMode/ChangeMode.css

@@ -17,6 +17,6 @@
     border-top-left-radius: 0;
 }
 
-.memori--changeMode-instruct-radio-button[data-headlessui-state="checked"] button {
+.memori--changeMode-instruct-radio-button[data-headlessui-state='checked'] button {
     font-weight: 600;
 }

package/src/components/Chat/Chat.css

@@ -12,6 +12,7 @@
     padding: calc(var(--memori-inner-content-pad) / 4) calc(var(--memori-inner-content-pad) / 2);
     border-radius: 10px;
     margin: 1rem 0;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background-color: var(--memori-inner-bg);
 }
@@ -48,7 +49,7 @@
     border-top-right-radius: 3px;
 }
 
-.memori-chat--cover+.memori-chat--bubble-initial {
+.memori-chat--cover + .memori-chat--bubble-initial {
     display: none;
 }
 
@@ -102,7 +103,7 @@
     white-space: nowrap;
 }
 
-.memori-chat--context-tag+.memori-chat--context-tag {
+.memori-chat--context-tag + .memori-chat--context-tag {
     margin-top: 0.5rem;
 }
 

package/src/components/ChatBubble/ChatBubble.css

@@ -64,7 +64,7 @@
     margin-bottom: 0;
 }
 
-.memori-chat--bubble p+p {
+.memori-chat--bubble p + p {
     margin-top: 0.5em;
 }
 

package/src/components/ChatInputs/ChatInputs.css

@@ -11,11 +11,11 @@
     margin: 0;
 }
 
-.memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {
+.memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
     margin-left: 0.33rem;
 }
 
 .memori-chat-inputs .memori--conversation-button {
     background: #fff;
     color: #000;
-}
+}

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/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.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;
 }
 

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -1,5 +1,11 @@
-.memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
-.memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
+.memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(
+        .memori-tooltip--disabled
+    ).memori-tooltip--visible
+    .memori-tooltip--content,
+.memori-mic-btn-tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(
+        .memori-tooltip--visible
+    ):hover
+    .memori-tooltip--content {
     touch-action: none;
     transform: translateY(-180%) translateX(27%);
     -webkit-user-select: none;
@@ -78,7 +84,7 @@
     border-radius: 50%;
     animation: micBtnActivePulse 2s infinite;
     background: var(--memori-primary);
-    content: "";
+    content: '';
     opacity: 0.2;
 }
 
@@ -98,4 +104,4 @@
 
 .memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
     color: red !important;
-}
+}

package/src/components/StartPanel/StartPanel.css

@@ -23,6 +23,7 @@
     padding: var(--memori-inner-content-pad, 0);
     border-radius: 10px;
     margin-top: 2rem;
+    -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background-color: var(--memori-inner-bg, transparent);
     color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
@@ -68,7 +69,6 @@
     box-shadow: 0 0 5px rgba(50, 50, 50, 0.3);
 }
 
-
 .memori--avatar img {
     width: 100%;
     height: 100%;

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

@@ -71,7 +71,7 @@ exports[`renders FullPage layout 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/layouts/__snapshots__/Totem.test.tsx.snap

@@ -124,7 +124,7 @@ exports[`renders Totem layout 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/layouts/totem.css

@@ -10,8 +10,6 @@
     display: flex;
     height: 100%;
     flex-direction: column;
-
-    /* --memori-text-color: #fff; */
 }
 
 .memori-totem-layout--header {
@@ -31,6 +29,22 @@
     width: 100%;
 }
 
+.memori-totem-layout--avatar .memori--blob-container {
+    display: block;
+}
+
+@media (max-width: 480px) {
+    .memori-totem-layout--avatar .memori--blob-container {
+        display: block;
+    }
+}
+
+@media (max-width: 870px) {
+    .memori-totem-layout--avatar .memori--blob-container {
+        display: block;
+    }
+}
+
 .memori-totem-layout .memori-header {
     position: relative;
     z-index: 100;
@@ -97,6 +111,27 @@
     margin: 0 auto;
 }
 
+@media (max-width: 870px) {
+    .memori-totem-layout--controls .memori--start-panel,
+    .memori-totem-layout--controls .memori-chat--wrapper {
+        width: 100%;
+    }
+
+    .memori-totem-layout--controls .memori-chat--wrapper {
+        padding: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-send-on-enter-menu {
+        display: none;
+    }
+
+    .memori-header--button-settings {
+        display: none;
+    }
+}
+
 .memori-totem-layout .memori--avatar-toggle {
     display: none;
     width: 100%;
@@ -113,14 +148,20 @@
     background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.8));
 }
 
-.memori-widget.memori-controls-center .memori-totem-layout--controls {
-    position: absolute;
-    top: 40%;
-    width: 100%;
+@media (min-width: 481px) {
+    .memori-widget.memori-controls-center .memori-totem-layout--controls {
+        position: absolute;
+        top: 40%;
+        width: 100%;
+    }
 }
 
-.memori-widget.memori-layout-totem.memori--hide-emissions .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user),
-.memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey .memori-totem-layout--controls .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
+.memori-widget.memori-layout-totem.memori--hide-emissions
+    .memori-totem-layout--controls
+    .memori-chat--bubble-container:not(.memori-chat--bubble-from-user),
+.memori-widget.memori-layout-totem.memori--hide-emissions.memori--with-speechkey
+    .memori-totem-layout--controls
+    .memori-chat--bubble-container:not(.memori-chat--bubble-from-user) {
     display: none;
 }