@memori.ai/memori-react 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 
 
+## [2.0.1](https://github.com/memori-ai/memori-react/compare/v2.0.0...v2.0.1) (2023-04-24)
+
+
+### Bug Fixes
+
+* copy css files ([866a97f](https://github.com/memori-ai/memori-react/commit/866a97fe078c9758e2a420ea4c4aca2008ee7644))
+
 ## [2.0.0](https://github.com/memori-ai/memori-react/compare/v1.2.1...v2.0.0) (2023-04-24)
 
 

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;
+}

package/dist/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/dist/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/dist/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/dist/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/dist/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;
+}