@memori.ai/memori-react 2.0.0 → 2.0.2

package/esm/components/MemoriWidget/MemoriWidget.css

@@ -1,25 +1,3 @@
-memori-client #root,
-.memori-widget {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-    --memori-inner-content-pad: 1rem;
-    --memori-inner-bg: transparent;
-    --memori-chat-bubble-bg: #ffffff60;
-    --memori-text-color: #000;
-    --memori-button-bg: #fff;
-    --memori-button-text: #000;
-    --memori-button-padding: 0.5rem 1.5rem;
-    --memori-button-border-color: #d9d9d9;
-    --memori-button-radius: 5px;
-    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
-    --memori-blur-background: 0;
-    --memori-drawer--width: 100%;
-    --memori-drawer--width--md: 80%;
-    --memori-drawer--width--lg: 60%;
-    --memori-modal--width: 100%;
-    --memori-modal--width--md: 80%;
-}
-
 .memori-widget {
     position: relative;
     width: 100%;
@@ -147,7 +125,7 @@ memori-client #root,
 .memori--powered-by {
     position: absolute;
     z-index: 1000;
-    bottom: 1rem;
+    bottom: 0;
     left: 0;
     display: inline-flex;
     flex-wrap: wrap;

package/esm/components/PoweredBy/PoweredBy.css

@@ -0,0 +1,45 @@
+.memori--powered-by {
+    position: absolute;
+    z-index: 1000;
+    bottom: 1rem;
+    left: 0;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 0.25rem 0.5rem;
+    border-radius: 10px;
+    background-color: var(--memori-inner-bg, transparent);
+    box-shadow: var(--memori-button-box-shadow);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    font-size: 0.7em;
+}
+
+@media (max-width: 768px) {
+    .memori--powered-by {
+        top: 3.5rem;
+        bottom: auto;
+    }
+}
+
+.memori--powered-by img {
+    max-width: 2rem;
+    max-height: 2rem;
+    margin-right: 0.25rem;
+}
+
+.memori--powered-by p {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+.memori--powered-by a {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    text-decoration: underline;
+}
+
+.memori--powered-by a:hover,
+.memori--powered-by a:focus {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+    opacity: 0.8;
+    text-decoration: underline;
+}

package/esm/components/SettingsDrawer/SettingsDrawer.css

@@ -0,0 +1,5 @@
+.memori-settings-drawer .memori-settings-drawer--field {
+    display: flex;
+    flex-direction: column;
+    margin: 0.5rem 0 1.5rem;
+}

package/esm/components/StartPanel/StartPanel.css

@@ -7,7 +7,7 @@
     height: 2rem;
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--ant-primary-color);
+    border: 1.5px solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
@@ -29,7 +29,7 @@
 }
 
 .memori--start-panel .memori--start-panel-title {
-    color: var(--memori-text-color, var(--ant-primary-color)) !important;
+    color: var(--memori-text-color, var(--memori-primary)) !important;
 }
 
 .memori--start-panel .memori--start-panel-description {
@@ -86,7 +86,7 @@
 
 .memori--description,
 .memori--needsPosition {
-    color: rgba(0, 0, 0, 0.85);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85));
     font-size: 14px;
     line-height: 1.6;
 }
@@ -123,7 +123,8 @@
     margin-left: 0.5rem;
 }
 
-.memori--completions-enabled {
+.memori--completions-enabled,
+.memori--nsfw {
     position: absolute;
     right: 2.5rem;
     bottom: -1.25rem;
@@ -132,10 +133,11 @@
     height: 2rem;
     align-items: center;
     justify-content: center;
-    border: 1.5px solid var(--ant-primary-color);
+    border: 1.5px solid var(--memori-primary);
     border-radius: 50%;
     background: #fff;
     box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
+    color: #000;
 }
 
 .memori--completions-enabled span {
@@ -147,3 +149,7 @@
     width: 1rem;
     height: 1rem;
 }
+
+.memori--completions-enabled + .memori--nsfw {
+    right: 4.75rem;
+}

package/esm/components/layouts/totem.css

@@ -0,0 +1,148 @@
+.memori-widget.memori-layout-totem {
+    height: 100vh !important;
+}
+
+.memori-widget.memori-layout-totem .memori--global-background.no-background-image {
+    background: linear-gradient(#333, #eee);
+}
+
+.memori-widget > .memori-spin.memori-totem-layout {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    /* --memori-text-color: #fff; */
+}
+
+.memori-totem-layout--header {
+    text-align: right;
+}
+
+.memori-totem-layout--avatar {
+    flex: 1;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper {
+    position: fixed;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100%;
+}
+
+.memori-totem-layout .memori-header {
+    position: relative;
+    z-index: 100;
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    flex-direction: column;
+}
+
+.memori-totem-layout .memori-header .memori-share-button,
+.memori-totem-layout .memori-header .memori-header--button + .memori-header--button {
+    margin-top: 0.25rem;
+    margin-left: 0;
+}
+
+.memori-totem-layout .memori-chat--cover {
+    display: none;
+}
+
+.memori-totem-layout .memori--cover {
+    padding: 0;
+    background: none;
+}
+
+.memori-totem-layout .memori--powered-by {
+    top: 0;
+    bottom: auto;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper > div {
+    overflow: visible !important;
+    /* width: 100% !important;
+    height: 100% !important; */
+    width: auto !important;
+    height: 90vh !important;
+    max-height: 90vh;
+    border-radius: 0;
+    transform: scale(1.7) translate(0px, 10vh);
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper canvas {
+    width: auto !important;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+}
+
+.memori-totem-layout--controls {
+    position: relative;
+    z-index: 5;
+}
+
+.memori-totem-layout--controls .memori--start-panel,
+.memori-totem-layout--controls .memori-chat--history,
+.memori-totem-layout--controls .memori-chat--content {
+    background: transparent;
+}
+
+.memori-totem-layout--controls .memori--start-panel,
+.memori-totem-layout--controls .memori-chat--wrapper {
+    width: 80vw;
+    max-width: 800px;
+    padding: 1rem;
+    margin: 0 auto;
+}
+
+.memori-totem-layout .memori--avatar-toggle {
+    display: none;
+    width: 100%;
+    justify-content: center;
+}
+
+.memori-totem-layout .memori--title,
+.memori-totem-layout .memori--description,
+.memori-totem-layout .memori--needsPosition {
+    color: var(--memori-text-color);
+}
+
+.memori-totem-layout .memori--global-background-image {
+    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%;
+}
+
+.memori-totem-layout .memori-chat-inputs--mic {
+    font-size: 125%;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper > div canvas + div {
+    position: absolute !important;
+    width: 100%;
+    height: 100%;
+    transform: none !important;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    transform: none !important;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
+    text-align: center;
+}
+
+.memori-totem-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
+    background: none;
+}

package/esm/components/ui/Button.css

@@ -1,13 +1,3 @@
-:root,
-#root {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-    --memori-button-radius: 5px;
-    --memori-button-padding: 0.5rem 1.5rem;
-    --memori-button-border-color: #d9d9d9;
-    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
-}
-
 .memori-button {
     display: inline-flex;
     align-items: center;
@@ -128,6 +118,10 @@
     line-height: 1;
 }
 
+.memori-button--icon svg[fill="none"] {
+    fill: none;
+}
+
 .memori-button--with-icon .memori-button--icon {
     margin-right: 0.5em;
 }

package/esm/components/ui/Checkbox.css

@@ -1,8 +1,4 @@
-:root,
-#root {
-    --memori-primary: rgb(102, 103, 171);
-    --memori-primary-text: #fff;
-}
+
 
 .memori-checkbox {
     display: inline-flex;

package/esm/components/ui/Drawer.css

@@ -1,6 +1,6 @@
 .memori-drawer {
     position: relative;
-    z-index: 60;
+    z-index: 1000;
 }
 
 .memori-drawer--backdrop {
@@ -34,7 +34,9 @@
     position: relative;
     width: var(--memori-drawer--width, 100%);
     height: 100%;
-    padding: 1.5rem 2rem;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 3rem 2rem 1.5rem;
     margin-right: 0;
     margin-left: auto;
     background-color: #fff;
@@ -44,6 +46,7 @@
 @media (min-width: 768px) {
     .memori-drawer--panel {
         width: var(--memori-drawer--width--md, 80%);
+        padding-top: 1.5rem;
     }
 }
 
@@ -77,16 +80,35 @@
     padding: 0.5rem;
 }
 
+@media (max-width: 767px) {
+    .memori-drawer--close {
+        left: 0.5rem;
+    }
+}
+
 .memori-drawer--close button {
     border-color: #fff;
     color: #fff;
 }
 
+@media (max-width: 767px) {
+    .memori-drawer--close button {
+        color: #000;
+    }
+}
+
 .memori-drawer--panel-left .memori-drawer--close {
     right: -3.5rem;
     left: auto;
 }
 
+@media (max-width: 767px) {
+    .memori-drawer--panel-left .memori-drawer--close {
+        right: 0.5rem;
+        left: auto;
+    }
+}
+
 .memori-drawer--footer {
     position: sticky;
     bottom: 0;

package/esm/components/ui/Select.css

@@ -0,0 +1,135 @@
+.memori-select {
+    max-width: 240px;
+    min-height: 38px;
+}
+
+.memori-select--button {
+    position: relative;
+    width: 100%;
+    min-height: 38px;
+    padding-top: .5rem;
+    padding-right: 2.5rem;
+    padding-bottom: .5rem;
+    padding-left: .75rem;
+    border: 1px solid #e5e7eb;
+    border-radius: .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;
+    cursor: pointer;
+    text-align: left;
+}
+
+.memori-select--button:focus {
+    border-color: #cbd5e0;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori-select--button:focus-visible {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori-select--button:hover {
+    border-color: #e2e8f0;
+}
+
+.memori-select--button:active {
+    border-color: #e2e8f0;
+}
+
+.memori-select--button:disabled {
+    border-color: #e2e8f0;
+    background-color: #f7fafc;
+    color: #a0aec0;
+    cursor: not-allowed;
+}
+
+@media (min-width: 640px) {
+    .memori-select--button {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+.memori-select--label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+}
+
+.memori-select--value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-select--value.memori-select--value-placeholder {
+    color: #a0aec0;
+}
+
+.memori-select--icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding-right: .5rem;
+    pointer-events: none;
+}
+
+.memori-select--icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: rgb(156 163 175/1);
+}
+
+ul.memori-select--options {
+    position: absolute;
+    z-index: 1;
+    overflow: auto;
+    width: 100%;
+    max-width: min(18rem, 30%);
+    max-height: 15rem;
+    padding-top: .25rem;
+    padding-right: 0;
+    padding-bottom: .25rem;
+    padding-left: 0;
+    border-radius: .375rem;
+    margin-top: .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;
+    list-style: none;
+}
+
+@media (min-width: 640px) {
+    .memori-select--options {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+li.memori-select--option {
+    position: relative;
+    padding-top: .5rem;
+    padding-right: 1rem;
+    padding-bottom: .5rem;
+    padding-left: 1rem;
+    color: rgb(17 24 39/1);
+    cursor: pointer;
+    user-select: none;
+}
+
+li.memori-select--option:hover,
+li.memori-select--option:focus {
+    background-color: #f7fafc;
+}
+
+li.memori-select--option:focus {
+    outline: 2px solid #63b3ed;
+    outline-offset: 2px;
+}
+

package/esm/components/ui/Spin.css

@@ -21,7 +21,9 @@
 
 .memori-spin--spinner svg {
     width: 30%;
+    max-width: 5rem;
     height: 30%;
+    max-height: 5rem;
 }
 
 .memori-spin--primary svg {

package/esm/styles.css

@@ -5,7 +5,9 @@
 @import url('./components/ui/Modal.css');
 @import url('./components/ui/Spin.css');
 @import url('./components/ui/Tooltip.css');
+@import url('./components/ui/Select.css');
 
+@import url('./components/PoweredBy/PoweredBy.css');
 @import url('./components/AttachmentLinkModal/AttachmentLinkModal.css');
 @import url('./components/Auth/Auth.css');
 @import url('./components/Avatar/Avatar.css');
@@ -17,6 +19,7 @@
 @import url('./components/ChatInputs/ChatInputs.css');
 @import url('./components/ChatTextArea/ChatTextArea.css');
 @import url('./components/CustomGLBModelViewer/ModelViewer.css');
+@import url('./components/SettingsDrawer/SettingsDrawer.css');
 @import url('./components/ExportHistoryButton/ExportHistoryButton.css');
 @import url('./components/FeedbackButtons/FeedbackButtons.css');
 @import url('./components/Header/Header.css');
@@ -25,11 +28,59 @@
 @import url('./components/MediaWidget/LinkItemWidget.css');
 @import url('./components/MediaWidget/MediaItemWidget.css');
 @import url('./components/MediaWidget/MediaWidget.css');
-@import url('./components/MemoriWidget/MemoriWidget.css');
 @import url('./components/SendOnEnterMenu/SendOnEnterMenu.css');
 @import url('./components/ShareButton/ShareButton.css');
 @import url('./components/Snippet/Snippet.css');
 @import url('./components/StartPanel/StartPanel.css');
 @import url('./components/UploadMenu/UploadMenu.css');
+@import url('./components/DateSelector/DateSelector.css');
+@import url('./components/AgeVerificationModal/AgeVerificationModal.css');
+@import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
+
+@import url('./components/layouts/totem.css');
+
+.sr-only {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+memori-client,
+memori-client #root,
+memori-client + #headlessui-portal-root,
+body.sb-show-main #root,
+body.sb-show-main #headlessui-portal-root,
+#storybook-root,
+#storybook-docs,
+.memori-widget {
+    font-family: 'Exo 2', sans-serif;
+    font-size: 16px;
+
+    --memori-primary: rgb(102, 103, 171);
+    --memori-primary-text: #fff;
+    --memori-inner-content-pad: 1rem;
+    --memori-inner-bg: transparent;
+    --memori-chat-bubble-bg: #ffffff60;
+    --memori-text-color: #000;
+    --memori-button-bg: #fff;
+    --memori-button-text: #000;
+    --memori-button-padding: 0.5rem 1.5rem;
+    --memori-button-border-color: #d9d9d9;
+    --memori-button-radius: 5px;
+    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+    --memori-blur-background: 0px;
+    --memori-drawer--width: 100%;
+    --memori-drawer--width--md: 80%;
+    --memori-drawer--width--lg: 60%;
+    --memori-modal--width: 100%;
+    --memori-modal--width--md: 80%;
+    --memori-error-color: #ff4d4f;
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.0.2",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -47,7 +47,7 @@
     "build:cjs": "tsc --module commonjs --outDir dist",
     "build:esm": "tsc --module esnext --outDir esm",
     "prebuild": "yarn clean",
-    "build": "yarn build:cjs && yarn build:esm",
+    "build": "yarn build:cjs && yarn build:esm && yarn copy-files",
     "postbuild": "yarn copy-files",
     "test:ci": "jest --passWithNoTests --ci src",
     "test:coverage": "jest --coverage src",

package/src/styles.css

@@ -55,6 +55,7 @@
 
 memori-client,
 memori-client #root,
+memori-client + #headlessui-portal-root,
 body.sb-show-main #root,
 body.sb-show-main #headlessui-portal-root,
 #storybook-root,