@memori.ai/memori-react 2.0.0 → 2.0.1

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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,58 @@
 @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,
+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/esm/components/AgeVerificationModal/AgeVerificationModal.css

@@ -0,0 +1,63 @@
+.age-verification-modal,
+.age-verification-modal * {
+    box-sizing: border-box;
+}
+
+.age-verification-form {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media (min-width: 640px) {
+    .age-verification-form {
+        min-width: 600px;
+    }
+}
+
+.age-verification-form fieldset {
+    padding-right: 0;
+    padding-left: 0;
+    border: 0;
+}
+
+.age-verification-form .form-item {
+    width: 100%;
+    text-align: center;
+}
+
+.age-verification-form .form-item.submit {
+    margin-top: 1.5rem;
+    text-align: center;
+}
+
+.age-verification-form .form-item input {
+    color: #000;
+}
+
+.age-verification-form .form-item-help {
+    padding-bottom: 0.25rem;
+    margin: 1.5rem 0 1rem;
+    opacity: 0.5;
+    text-align: left;
+}
+
+.age-verification-form .form-item-error {
+    padding-bottom: 0.25rem;
+    margin: 1.5rem 0 1rem;
+    color: var(--memori-error-color);
+}
+
+button.age-verisfication-submit {
+    display: inline-flex;
+    height: auto;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 15px;
+    margin-right: auto;
+    margin-left: auto;
+    font-weight: 700;
+    text-transform: uppercase;
+    white-space: normal;
+}

package/esm/components/ChatBubble/ChatBubble.css

@@ -47,7 +47,7 @@
     height: 8px;
     border-radius: 50%;
     margin-right: 3px;
-    animation: 'wave' 1.5s linear infinite;
+    animation: wave 1.5s linear infinite;
     background: var(--memori-primary);
 }
 
@@ -215,7 +215,6 @@
 }
 
 @keyframes wave {
-
     0%,
     60%,
     100% {

package/esm/components/ChatInputs/ChatInputs.css

@@ -17,7 +17,7 @@
 
 .memori-chat-inputs .memori--conversation-button {
     background: #fff;
-    color: var(--memori-text-color, #000);
+    color: #000;
 }
 
 .memori-chat-inputs--mic {
@@ -26,25 +26,36 @@
 }
 
 .memori-chat-inputs--mic svg {
+    color: var(--memori-primary-text, #fff);
     font-size: 1em;
 }
 
 .memori-chat-inputs--mic:hover,
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
-    border-color: var(--ant-primary-color) !important;
+    border-color: var(--memori-primary) !important;
+    color: var(--memori-primary-text, #fff);
 }
 
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
-    box-shadow: 0 0.2rem 0.33rem var(--ant-primary-4) !important;
-    color: var(--ant-primary-color) !important;
+    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
+}
+
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
+    color: var(--memori-primary) !important;
 }
 
 .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-    color: red;
+    color: red !important;
+}
+
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active,
+.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
+    border-color: red !important;
 }
 
 .memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
-    color: red;
+    color: red !important;
 }

package/esm/components/DateSelector/DateSelector.css

@@ -0,0 +1,135 @@
+.memori--date-selector {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.memori--date-selector__select {
+    width: 30%;
+    max-width: 100%;
+    margin: 1.5rem 1.5% 0;
+}
+
+.memori--date-selector__select-button {
+    position: relative;
+    width: 100%;
+    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--date-selector__select-button:focus {
+    border-color: #cbd5e0;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori--date-selector__select-button:focus-visible {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.memori--date-selector__select-button:hover {
+    border-color: #e2e8f0;
+}
+
+.memori--date-selector__select-button:active {
+    border-color: #e2e8f0;
+}
+
+.memori--date-selector__select-button:disabled {
+    border-color: #e2e8f0;
+    background-color: #f7fafc;
+    color: #a0aec0;
+    cursor: not-allowed;
+}
+
+@media (min-width: 640px) {
+    .memori--date-selector__select-button {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+.memori--date-selector__select-label {
+    display: inline-block;
+    margin-bottom: 0.25rem;
+}
+
+.memori--date-selector__select--value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori--date-selector__select--icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    padding-right: .5rem;
+    pointer-events: none;
+}
+
+.memori--date-selector__select--icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: rgb(156 163 175/1);
+}
+
+ul.memori--date-selector__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--date-selector__select-options {
+        font-size: .875rem;
+        line-height: 1.25rem;
+    }
+}
+
+li.memori--date-selector__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--date-selector__select-option:hover,
+li.memori--date-selector__select-option:focus {
+    background-color: #f7fafc;
+}
+
+li.memori--date-selector__select-option:focus {
+    outline: 2px solid #63b3ed;
+    outline-offset: 2px;
+}

package/esm/components/ImageUpload/ImageUpload.css

@@ -37,13 +37,13 @@ legend.helper p {
 
 .memori--upload .ant-upload.ant-upload-select-picture-card:hover,
 .memori--upload .ant-upload.ant-upload-select-picture-card:focus {
-    border-color: var(--ant-primary-color);
+    border-color: var(--memori-primary);
     opacity: 1;
 }
 
 .memori--upload .ant-upload.ant-upload-select-picture-card:hover .ant-upload,
 .memori--upload .ant-upload.ant-upload-select-picture-card:focus .ant-upload {
-    color: var(--ant-primary-color);
+    color: var(--memori-primary);
 }
 
 .memori--upload .ant-upload-list {

package/esm/components/MediaWidget/MediaItemWidget.css

@@ -63,3 +63,70 @@ a.memori-media-item--link {
     width: 50%;
     height: 50%;
 }
+
+.memori-media-item--modal .memori-media-item--figure {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    max-height: 100%;
+    flex-direction: row;
+}
+
+.memori-media-item--modal .memori-card {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+    margin-bottom: 0;
+    box-shadow: none;
+}
+
+.memori-media-item--modal .memori-card--content {
+    display: none;
+}
+
+.memori-media-item--modal .memori-card--cover {
+    height: 100%;
+    border-radius: 0;
+}
+
+.memori-media-item--modal .memori-modal--panel {
+    width: 75vw;
+    height: 85vh;
+    backdrop-filter: blur(var(--memori-blur-background, 10px));
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.memori-media-item--modal .memori-modal--panel .memori-card {
+    background: none;
+}
+
+.memori-media-item--modal .memori-modal--panel .memori-spin {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-media-item--modal a.memori-media-item--link {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-media-item--modal .memori-media-item--figure-caption {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    backdrop-filter: blur(var(--memori-blur-background, 5px));
+    background: rgba(255, 255, 255, 0.5);
+    color: #000;
+}
+
+.memori-media-item--modal .memori-modal--close button {
+    border-color: #fff;
+    color: #fff;
+}

package/esm/components/MediaWidget/MediaWidget.css

@@ -3,14 +3,14 @@
     align-items: center;
     padding: 10px 30px;
     border-radius: 5px;
-    background-color: var(--ant-primary-color);
-    color: var(--ant-primary-text);
+    background-color: var(--memori-primary);
+    color: var(--memori-primary-text);
     transition: all 0.5s ease;
 }
 
 .actionButton:hover {
-    border-color: var(--ant-primary-color) !important;
-    background-color: var(--ant-primary-color);
+    border-color: var(--memori-primary) !important;
+    background-color: var(--memori-primary);
     color: var(--light-gray) !important;
     filter: brightness(1.08);
 }
@@ -119,3 +119,12 @@
 .delay-1000 {
     transition-delay: 1000ms;
 }
+
+.memori-hints--show-more {
+    text-align: center;
+}
+
+.memori-hints--show-more-button {
+    border-radius: 5px;
+    background: none;
+}