@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.tsx

@@ -54,9 +54,19 @@ export const initMemoriArtifactAPI = () => {
     },
     getState: () => {
       if (!isReady) {
-        return { currentArtifact: null, isDrawerOpen: false, isFullscreen: false };
+        return {
+          currentArtifact: null,
+          isDrawerOpen: false,
+          isFullscreen: false,
+          isChatLogPanelPresentation: false,
+        };
       }
-      return { currentArtifact: null, isDrawerOpen: false, isFullscreen: false };
+      return {
+        currentArtifact: null,
+        isDrawerOpen: false,
+        isFullscreen: false,
+        isChatLogPanelPresentation: false,
+      };
     },
   };
 };
@@ -227,6 +237,7 @@ export const ArtifactAPIBridge = ({
             currentArtifact: state.currentArtifact,
             isDrawerOpen: state.isDrawerOpen,
             isFullscreen: state.isFullscreen,
+            isChatLogPanelPresentation: state.isChatLogPanelPresentation,
           };
         },
       };
@@ -317,7 +328,7 @@ function createArtifactHandler(
     margin: 12px 0;
     background: white;
     border: 1px solid #e5e7eb;
-    border-radius: 12px;
+    border-radius: .5rem;
     cursor: pointer;
     transition: all 0.2s ease;
   `;
@@ -331,7 +342,7 @@ function createArtifactHandler(
       <div style="font-weight: 600; margin-bottom: 4px;">${escapeHtml(
         title
       )}</div>
-      <div style="font-size: 13px; color: #6b7280;">${mimeType} • ${size}</div>
+      <div style="font-size: 13px; color: var(--memori-text-color);">${mimeType} • ${size}</div>
     </div>
     <div>
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

package/src/components/MemoriWidget/MemoriWidget.css

@@ -1,7 +1,7 @@
 .memori-widget {
     position: relative;
     width: 100%;
-    padding: 1em;
+    padding: var(--memori-spacing-md);
 }
 
 .memori-widget,
@@ -56,7 +56,7 @@
 .memori--grid-column-left {
     position: relative;
     width: 50%;
-    margin-right: 1rem;
+    margin-right: var(--memori-spacing-lg);
 }
 
 @media (max-width: 870px) {
@@ -66,13 +66,13 @@
         height: auto;
         max-height: 200px;
         margin-right: 0;
-        margin-bottom: 1rem;
+        margin-bottom: var(--memori-spacing-lg);
     }
 }
 
 .memori--grid-column-right {
     width: 50%;
-    margin-left: 1rem;
+    margin-left: var(--memori-spacing-lg);
 }
 
 @media (max-width: 870px) {
@@ -90,13 +90,14 @@
 }
 
 .memori--select {
-    margin-top: 1rem;
+    margin-top: var(--memori-spacing-lg);
 }
 
 .memori--select label {
-    margin: 0.5rem 0 0.25rem;
-    color: var(--dark-gray);
-    font-size: 0.8em;
+    margin: var(--memori-spacing-sm) 0 var(--memori-spacing-xs);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-small);
+    line-height: var(--memori-text-line-normal);
 }
 
 .memori--select select {
@@ -109,7 +110,8 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: auto;
+    height: 100vh;
+    height: 100dvh;
     min-height: 100vh;
     background-position: center center;
     background-repeat: no-repeat;
@@ -122,12 +124,13 @@
     left: 0;
     width: 100%;
     height: 100%;
-    height: 100svh;
+    min-height: 100vh;
+    min-height: 100dvh;
     background-color: #eee;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
-    filter: blur(var(--memori-blur-background, 0));
+    filter: blur(0);
 }
 
 @media (max-width: 870px) {
@@ -136,52 +139,6 @@
     }
 }
 
-.memori--powered-by {
-    position: absolute;
-    z-index: 1000;
-    bottom: 0;
-    left: 0;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding: 0.25rem 1rem;
-    border-radius: 10px;
-    background-color: var(--memori-inner-bg, transparent);
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
-    font-size: 0.7em;
-    white-space: nowrap;
-}
-
-@media (max-width: 870px) {
-    .memori--powered-by {
-        top: 3rem;
-        bottom: auto;
-    }
-}
-
-.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;
-}
-
-.memori--powered-by img {
-    max-width: 2rem;
-    max-height: 2rem;
-    margin-right: 0.25rem;
-}
-
-.memori--powered-by p {
-    margin-bottom: 0;
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
-}
-
 .memori--conversation-button {
     z-index: 1;
 }
@@ -189,23 +146,11 @@
 .memori--conversation-button svg {
     width: 1rem;
     height: 1rem;
-    font-size: 1rem;
+    font-size: var(--memori-text-size-base);
 }
 
 .memori--conversation-button + .memori--conversation-button {
-    margin-left: 0.33rem;
-}
-
-.memori--conversation-button:hover,
-.memori--conversation-button:active,
-.memori--conversation-button:focus {
-    border-color: var(--memori-primary) !important;
-}
-
-.memori--conversation-button:active,
-.memori--conversation-button:focus {
-    /* box-shadow: 0 0.2rem 0.33rem #b5b6c4 !important; */
-    color: var(--memori-primary) !important;
+    margin-left: var(--memori-spacing-xs);
 }
 
 .memori.memori-widget.chat-focused .memori--powered-by,

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -7,6 +7,7 @@ import MemoriWidget, { Props } from './MemoriWidget';
 import './MemoriWidget.css';
 import { VisemeProvider } from '../../context/visemeContext';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'Widget/Default',
@@ -38,11 +39,13 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <ArtifactProvider>
-      <VisemeProvider>
-        <MemoriWidget {...args} />
-      </VisemeProvider>
-    </ArtifactProvider>
+    <AlertProvider defaultDuration={5000}>
+      <ArtifactProvider>
+        <VisemeProvider>
+          <MemoriWidget {...args} />
+        </VisemeProvider>
+      </ArtifactProvider>
+    </AlertProvider>
   </I18nWrapper>
 );
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
@@ -58,6 +61,7 @@ WithAutoStart.args = {
   memori,
   tenant,
   autoStart: true,
+  layout: 'FULLPAGE',
 };
 
 export const WithPosition = Template.bind({});
@@ -67,6 +71,7 @@ WithPosition.args = {
     needsPosition: true,
   },
   tenant,
+  layout: 'FULLPAGE',
 };
 
 export const WithLoginRequired = Template.bind({});
@@ -76,6 +81,7 @@ WithLoginRequired.args = {
     requireLoginToken: true,
   },
   tenant,
+  layout: 'FULLPAGE',
 };
 
 export const WithDates = Template.bind({});
@@ -85,6 +91,7 @@ WithDates.args = {
     needsDateTime: true,
   },
   tenant,
+  layout: 'FULLPAGE',
 };
 
 /** To test dateUTC/place in Enter Text: open DevTools → Network, start chat, set position (header position icon) if testing place, then send a message. Inspect the request to your backend/engine for body.dateUTC (ISO) and body.place (placeName, latitude, longitude, uncertaintyKm). */
@@ -96,6 +103,7 @@ WithDateAndPlaceForEnterText.args = {
     needsPosition: true,
   },
   tenant,
+  layout: 'FULLPAGE',
 };
 
 export const WithPublicPageIntegration = Template.bind({});
@@ -112,6 +120,7 @@ WithPublicPageIntegration.args = {
         new Date(Date.now()).getTime(),
     }),
   },
+  layout: 'FULLPAGE',
 };
 
 export const WithPublicPageIntegrationAndFullbodyAvatar = Template.bind({});
@@ -128,6 +137,7 @@ WithPublicPageIntegrationAndFullbodyAvatar.args = {
         new Date(Date.now()).getTime(),
     }),
   },
+  layout: 'FULLPAGE',
 };
 
 export const WithPublicPageIntegrationAndNonDefaultLang = Template.bind({});
@@ -141,6 +151,7 @@ WithPublicPageIntegrationAndNonDefaultLang.args = {
       lang: 'es',
     }),
   },
+  layout: 'FULLPAGE',
 };
 
 export const ShowShare = Template.bind({});
@@ -148,6 +159,7 @@ ShowShare.args = {
   memori,
   tenant,
   showShare: true,
+  layout: 'FULLPAGE',
 };
 
 export const ShowSettings = Template.bind({});
@@ -155,6 +167,7 @@ ShowSettings.args = {
   memori,
   tenant,
   showSettings: true,
+  layout: 'FULLPAGE',
 };
 
 export const ShowClear = Template.bind({});
@@ -162,6 +175,7 @@ ShowClear.args = {
   memori,
   tenant,
   showClear: true,
+  layout: 'FULLPAGE',
 };
 
 export const ShowUpload = Template.bind({});
@@ -169,6 +183,7 @@ ShowUpload.args = {
   memori,
   tenant,
   showUpload: true,
+  layout: 'FULLPAGE',
 };
 
 export const ShowUploadFromIntegration = Template.bind({});
@@ -183,6 +198,7 @@ ShowUploadFromIntegration.args = {
       showUpload: true,
     }),
   },
+  layout: 'FULLPAGE',
 };
 
 export const WithoutAudio = Template.bind({});
@@ -191,6 +207,7 @@ WithoutAudio.args = {
   tenant,
   enableAudio: false,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
+  layout: 'FULLPAGE',
 };
 
 export const WithoutAudioFromIntegrationConfig = Template.bind({});
@@ -204,6 +221,7 @@ WithoutAudioFromIntegrationConfig.args = {
     }),
   },
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
+  layout: 'FULLPAGE',
 };
 
 export const DefautSpeakerDisabled = Template.bind({});
@@ -212,6 +230,7 @@ DefautSpeakerDisabled.args = {
   tenant,
   defaultSpeakerActive: false,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
+  layout: 'FULLPAGE',
 };
 
 export const ShowOnlyLastMessages = Template.bind({});
@@ -219,6 +238,7 @@ ShowOnlyLastMessages.args = {
   memori,
   tenant,
   showOnlyLastMessages: true,
+  layout: 'FULLPAGE',
 };
 
 export const ShowOnlyLastMessagesWithAnotherDefault = Template.bind({});
@@ -226,7 +246,7 @@ ShowOnlyLastMessagesWithAnotherDefault.args = {
   memori,
   tenant,
   showOnlyLastMessages: false,
-  layout: 'WEBSITE_ASSISTANT',
+  layout: 'FULLPAGE',
 };
 
 export const WithAzureSpeechKey = Template.bind({});
@@ -234,6 +254,7 @@ WithAzureSpeechKey.args = {
   memori,
   tenant,
   AZURE_COGNITIVE_SERVICES_TTS_KEY: 'provide your key here',
+  layout: 'FULLPAGE',
 };
 
 export const WithCustomMediaRenderer = Template.bind({});
@@ -262,6 +283,7 @@ WithUserAvatar.args = {
   memori,
   tenant,
   userAvatar: 'https://picsum.photos/200',
+  layout: 'FULLPAGE',
 };
 
 export const WithUserAvatarAsElement = Template.bind({});
@@ -269,6 +291,5 @@ WithUserAvatarAsElement.args = {
   memori,
   tenant,
   userAvatar: <span>USER</span>,
+  layout: 'FULLPAGE',
 };
-
-