@memori.ai/memori-react 2.11.0 → 2.12.0

package/src/components/Chat/Chat.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, memo } from 'react';
 import cx from 'classnames';
 import {
   DialogState,
@@ -336,4 +336,4 @@ const Chat: React.FC<Props> = ({
   );
 };
 
-export default Chat;
+export default memo(Chat);

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -1,5 +1,5 @@
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, memo } from 'react';
 import { getResourceUrl } from '../../helpers/media';
 import { getTranslation } from '../../helpers/translations';
 import { prismSyntaxLangs } from '../../helpers/constants';
@@ -285,21 +285,6 @@ const MediaItemWidget: React.FC<Props> = ({
     if (translateTo) translateMediaCaptions();
   }, [translateTo, translateMediaCaptions]);
 
-  useEffect(() => {
-    let executableScripts = items.filter(
-      m => m.mimeType === 'text/javascript' && !!m.properties?.executable
-    );
-    executableScripts.forEach(s => {
-      try {
-        // eslint-disable-next-line no-new-func
-        new Function(s.content ?? '')();
-      } catch (e) {
-        console.error(e);
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <Transition appear show as="div" className="memori-media-items">
       <div className="memori-media-items--grid">
@@ -407,4 +392,4 @@ const MediaItemWidget: React.FC<Props> = ({
   );
 };
 
-export default MediaItemWidget;
+export default memo(MediaItemWidget);

package/src/components/MediaWidget/MediaWidget.tsx

@@ -2,7 +2,7 @@ import {
   Medium,
   TranslatedHint,
 } from '@memori.ai/memori-api-client/dist/types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, memo } from 'react';
 import Button from '../ui/Button';
 import LinkItemWidget from './LinkItemWidget';
 import MediaItemWidget, { Props as MediaItemProps } from './MediaItemWidget';
@@ -103,4 +103,4 @@ const MediaWidget: React.FC<Props> = ({
   );
 };
 
-export default MediaWidget;
+export default memo(MediaWidget);

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -29,6 +29,7 @@ import React, {
   useCallback,
   CSSProperties,
   useRef,
+  memo,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
@@ -400,7 +401,17 @@ const MemoriWidget = ({
   const [listening, setListening] = useState(false);
   const [history, setHistory] = useState<Message[]>([]);
   const pushMessage = (message: Message) => {
-    setHistory(history => [...history, { ...message }]);
+    setHistory(history => [
+      ...history,
+      {
+        ...message,
+        media:
+          message.media?.filter(
+            m =>
+              !(m.mimeType === 'text/javascript' && !!m.properties?.executable)
+          ) ?? [],
+      },
+    ]);
   };
   const sendMessage = async (
     text: string,
@@ -654,6 +665,38 @@ const MemoriWidget = ({
     if (onStateChange) {
       onStateChange(state);
     }
+
+    const executableSnippets = state?.media?.filter(
+      m => m.mimeType === 'text/javascript' && !!m.properties?.executable
+    );
+    executableSnippets?.forEach(s => {
+      try {
+        setTimeout(() => {
+          console.log('snippet', s);
+          // eslint-disable-next-line no-new-func
+          new Function(s.content ?? '')();
+
+          setTimeout(() => {
+            if (document.body.classList.contains('chat-focused')) {
+              document.querySelector('.ant-tabs-nav')?.scrollIntoView();
+              document
+                .querySelector('.memori-chat--content')
+                ?.scrollTo(
+                  0,
+                  document.querySelector('.memori-chat--content')
+                    ?.scrollHeight ?? 0
+                );
+            } else {
+              document.querySelector('#end-messages-ref')?.scrollIntoView({
+                behavior: 'smooth',
+              });
+            }
+          }, 400);
+        }, 3000);
+      } catch (e) {
+        console.error(e);
+      }
+    });
   };
   const fetchSession = async (
     params: OpenSession
@@ -2704,4 +2747,4 @@ const MemoriWidget = ({
   );
 };
 
-export default MemoriWidget;
+export default memo(MemoriWidget);

package/src/components/layouts/layouts.stories.tsx

@@ -22,7 +22,7 @@ const meta: Meta = {
 
 export default meta;
 
-const CustomLayout: React.FC<LayoutProps> = ({
+export const CustomLayout: React.FC<LayoutProps> = ({
   Header,
   headerProps,
   Avatar,

package/src/index.tsx

@@ -248,7 +248,7 @@ Memori.propTypes = {
   showShare: PropTypes.bool,
   showSettings: PropTypes.bool,
   showInstruct: PropTypes.bool,
-  layout: PropTypes.oneOf(['DEFAULT', 'FULLPAGE', 'TOTEM']),
+  layout: PropTypes.oneOf(['DEFAULT', 'FULLPAGE', 'TOTEM', 'CHAT']),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   baseURL: PropTypes.string,
   apiURL: PropTypes.string,