@memori.ai/memori-react 8.2.0 → 8.4.0-rc.0

package/src/components/icons/Print.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+const PrintIcon: React.FC<{ className?: string, title?: string }> = ({ className, title }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    aria-label={title}
+    className={className}
+    viewBox="0 -2 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>{title}</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="Icon-Set"
+        transform="translate(-100.000000, -205.000000)"
+        fill="#000000"
+      >
+        <path
+          d="M130,226 C130,227.104 129.104,228 128,228 L125.858,228 C125.413,226.278 123.862,225 122,225 L110,225 C108.138,225 106.587,226.278 106.142,228 L104,228 C102.896,228 102,227.104 102,226 L102,224 C102,222.896 102.896,222 104,222 L128,222 C129.104,222 130,222.896 130,224 L130,226 L130,226 Z M122,231 L110,231 C108.896,231 108,230.104 108,229 C108,227.896 108.896,227 110,227 L122,227 C123.104,227 124,227.896 124,229 C124,230.104 123.104,231 122,231 L122,231 Z M108,209 C108,207.896 108.896,207 110,207 L122,207 C123.104,207 124,207.896 124,209 L124,220 L108,220 L108,209 L108,209 Z M128,220 L126,220 L126,209 C126,206.791 124.209,205 122,205 L110,205 C107.791,205 106,206.791 106,209 L106,220 L104,220 C101.791,220 100,221.791 100,224 L100,226 C100,228.209 101.791,230 104,230 L106.142,230 C106.587,231.723 108.138,233 110,233 L122,233 C123.862,233 125.413,231.723 125.858,230 L128,230 C130.209,230 132,228.209 132,226 L132,224 C132,221.791 130.209,220 128,220 L128,220 Z"
+          id="print"
+        ></path>
+      </g>
+    </g>
+  </svg>
+);
+export default PrintIcon;

package/src/components/layouts/Chat.test.tsx

@@ -3,6 +3,7 @@ import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,6 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders Chat layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
+      <ArtifactSystemProvider config={{
+        supportedMimeTypes: {
+          html: {
+            name: 'HTML',
+            icon: '🌐',
+            hasPreview: true,
+            language: 'html',
+            mimeType: 'text/html',
+          },
+        },
+      }}>
       <VisemeProvider>
         <Memori
           showShare={true}
@@ -31,6 +43,7 @@ it('renders Chat layout unchanged', () => {
           layout="CHAT"
         />
       </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/Chat.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Spin from '../ui/Spin';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
+import { ArtifactDrawer } from '../MemoriArtifactSystem';
+import { useArtifactSystemContext } from '../MemoriArtifactSystem/context/ArtifactSystemContext';
 
 const ChatLayout: React.FC<LayoutProps> = ({
   Header,
@@ -15,29 +17,82 @@ const ChatLayout: React.FC<LayoutProps> = ({
   hasUserActivatedSpeak,
   loading = false,
   poweredBy,
-}) => (
-  <>
-    {integrationStyle}
-    {integrationBackground}
-
-    <Spin spinning={loading} className="memori-chat-layout">
-      {poweredBy}
-
-      <div className="memori-chat-layout--header">
-        {Header && headerProps && <Header {...headerProps} />}
-      </div>
-
-      <div id="extension" />
-
-      <div className="memori-chat-layout--controls">
-        {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-          <Chat {...chatProps} />
-        ) : startPanelProps ? (
-          <StartPanel {...startPanelProps} />
-        ) : null}
-      </div>
-    </Spin>
-  </>
-);
+}) => {
+  const { actions, state } = useArtifactSystemContext();
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newIsMobile = window.innerWidth < 769;
+      if (newIsMobile !== isMobile) {
+        setTimeout(() => {
+          setIsMobile(newIsMobile);
+        }, 300);
+      } else {
+        setIsMobile(newIsMobile);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isMobile]);
+
+  const hasArtifact = state.currentArtifact && !isMobile;
+
+  return (
+    <>
+      {integrationStyle}
+      {integrationBackground}
+
+      <Spin spinning={loading} className="memori-chat-layout">
+        {poweredBy}
+
+        <div className="memori-chat-layout--header">
+          {Header && headerProps && <Header {...headerProps} />}
+        </div>
+
+        <div id="extension" />
+
+        <div
+          className={`memori-chat-layout--main ${
+            hasArtifact ? 'memori-chat-layout--main-with-artifact' : ''
+          }`}
+        >
+          <div
+            className={
+              state.isFullscreen
+                ? `memori-chat-layout-controls-hide`
+                : `memori-chat-layout--controls ${
+                    hasArtifact
+                      ? 'memori-chat-layout--controls-with-artifact'
+                      : ''
+                  }`
+            }
+          >
+            {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+              <Chat {...chatProps} />
+            ) : startPanelProps ? (
+              <StartPanel {...startPanelProps} />
+            ) : null}
+          </div>
+
+          {hasArtifact && (
+            <div className={state.isFullscreen ? `memori-chat-layout-artifact-panel-full-screen` : `memori-chat-layout--artifact-panel memori-chat-layout--artifact-panel-enter`}>
+              <ArtifactDrawer />
+            </div>
+          )}
+        </div>
+
+        {/* Mobile drawer - always rendered but only shown on mobile */}
+        {state.currentArtifact && isMobile && (
+          <div className="memori-chat-layout--artifact-drawer">
+            <ArtifactDrawer />
+          </div>
+        )}
+      </Spin>
+    </>
+  );
+};
 
 export default ChatLayout;

package/src/components/layouts/FullPage.test.tsx

@@ -3,6 +3,7 @@ import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -21,17 +22,31 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders FullPage layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
-      <VisemeProvider>
-        <Memori
-          showShare={true}
-          showSettings={true}
-          memori={memori}
-          tenant={tenant}
-          tenantID="aisuru.com"
-          integration={integration}
-          layout="FULLPAGE"
-        />
-      </VisemeProvider>
+      <ArtifactSystemProvider
+        config={{
+          supportedMimeTypes: {
+            html: {
+              name: 'HTML',
+              icon: '🌐',
+              hasPreview: true,
+              language: 'html',
+              mimeType: 'text/html',
+            },
+          },
+        }}
+      >
+        <VisemeProvider>
+          <Memori
+            showShare={true}
+            showSettings={true}
+            memori={memori}
+            tenant={tenant}
+            tenantID="aisuru.com"
+            integration={integration}
+            layout="FULLPAGE"
+          />
+        </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();
@@ -40,6 +55,19 @@ it('renders FullPage layout unchanged', () => {
 it('renders FullPage layout with root css properties unchanged', () => {
   const { container } = render(
     <I18nWrapper>
+      <ArtifactSystemProvider
+        config={{
+          supportedMimeTypes: {
+            html: {
+              name: 'HTML',
+              icon: '🌐',
+              hasPreview: true,
+              language: 'html',
+              mimeType: 'text/html',
+            },
+          },
+        }}
+      >
       <VisemeProvider>
         <Memori
           showShare={true}
@@ -52,6 +80,7 @@ it('renders FullPage layout with root css properties unchanged', () => {
           applyVarsToRoot
         />
       </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/FullPage.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Spin from '../ui/Spin';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
+import {
+  ArtifactDrawer,
+  useArtifactSystemContext,
+} from '../MemoriArtifactSystem';
 
 const FullPageLayout: React.FC<LayoutProps> = ({
   Header,
@@ -17,32 +21,96 @@ const FullPageLayout: React.FC<LayoutProps> = ({
   hasUserActivatedSpeak,
   loading = false,
   poweredBy,
-}) => (
-  <>
-    {integrationStyle}
-    {integrationBackground}
+}) => {
+  const { state } = useArtifactSystemContext();
+  const [isMobile, setIsMobile] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
 
-    <Spin spinning={loading}>
-      {Header && headerProps && <Header {...headerProps} />}
+  useEffect(() => {
+    const handleResize = () => {
+      const newIsMobile = window.innerWidth < 769;
+      if (newIsMobile !== isMobile) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsMobile(newIsMobile);
+          setIsAnimating(false);
+        }, 300);
+      } else {
+        setIsMobile(newIsMobile);
+      }
+    };
 
-      <div className="memori--grid">
-        <div className="memori--grid-column memori--grid-column-left">
-          {Avatar && avatarProps && <Avatar chatProps={chatProps}  {...avatarProps} />}
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isMobile]);
 
-          <div id="extension" />
-        </div>
-        <div className="memori--grid-column memori--grid-column-right">
-          {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-            <Chat {...chatProps} />
-          ) : startPanelProps ? (
-            <StartPanel {...startPanelProps} />
-          ) : null}
-        </div>
+  const hasArtifact = state.currentArtifact && !isMobile;
+  return (
+    <>
+      {integrationStyle}
+      {integrationBackground}
+
+      <Spin spinning={loading}>
+        {Header && headerProps && <Header {...headerProps} />}
+
+        <div className="memori--grid">
+          {!hasArtifact && (
+            <div className="memori--grid-column memori--grid-column-left">
+              {Avatar && avatarProps && !hasArtifact && (
+                <Avatar chatProps={chatProps} {...avatarProps} />
+              )}
 
-        {poweredBy}
-      </div>
-    </Spin>
-  </>
-);
+              <div id="extension" />
+            </div>
+          )}
+          <div
+            className={`memori-chat-layout--main ${
+              hasArtifact ? 'memori-chat-layout--main-with-artifact' : ''
+            }`}
+          >
+            <div
+              className={
+                state.isFullscreen
+                  ? `memori-chat-layout-controls-hide`
+                  : `memori-chat-layout--controls ${
+                      hasArtifact
+                        ? 'memori-chat-layout--controls-with-artifact'
+                        : ''
+                    }`
+              }
+            >
+              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                <Chat {...chatProps} />
+              ) : startPanelProps ? (
+                <StartPanel {...startPanelProps} />
+              ) : null}
+            </div>
+
+            {hasArtifact && (
+              <div
+                className={
+                  state.isFullscreen
+                    ? `memori-chat-layout-artifact-panel-full-screen`
+                    : `memori-chat-layout--artifact-panel memori-chat-layout--artifact-panel-enter`
+                }
+              >
+                <ArtifactDrawer />
+              </div>
+            )}
+          </div>
+          {/* Mobile drawer - always rendered but only shown on mobile */}
+          {state.currentArtifact && isMobile && (
+            <div className="memori-chat-layout--artifact-drawer">
+              <ArtifactDrawer />
+            </div>
+          )}
+
+          {poweredBy}
+        </div>
+      </Spin>
+    </>
+  );
+};
 
 export default FullPageLayout;

package/src/components/layouts/HiddenChat.test.tsx

@@ -3,6 +3,7 @@ import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,6 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders HIDDEN_CHAT layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
+      <ArtifactSystemProvider config={{
+        supportedMimeTypes: {
+          html: {
+            name: 'HTML',
+            icon: '🌐',
+            hasPreview: true,
+            language: 'html',
+            mimeType: 'text/html',
+          },
+        },
+      }}>
       <VisemeProvider>
         <Memori
           showShare={true}
@@ -31,6 +43,7 @@ it('renders HIDDEN_CHAT layout unchanged', () => {
           layout="HIDDEN_CHAT"
         />
       </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/Totem.test.tsx

@@ -3,6 +3,7 @@ import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,6 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders Totem layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
+      <ArtifactSystemProvider config={{
+        supportedMimeTypes: {
+          html: {
+            name: 'HTML',
+            icon: '🌐',
+            hasPreview: true,
+            language: 'html',
+            mimeType: 'text/html',
+          },
+        },
+      }}>
       <VisemeProvider>
         <Memori
         showShare={true}
@@ -31,6 +43,7 @@ it('renders Totem layout unchanged', () => {
           layout="TOTEM"
         />
       </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/WebsiteAssistant.test.tsx

@@ -3,6 +3,7 @@ import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,6 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders WEBSITE_ASSISTANT layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
+      <ArtifactSystemProvider config={{
+        supportedMimeTypes: {
+          html: {
+            name: 'HTML',
+            icon: '🌐',
+            hasPreview: true,
+            language: 'html',
+            mimeType: 'text/html',
+          },
+        },
+      }}>
       <VisemeProvider>
         <Memori
           showShare={true}
@@ -31,6 +43,7 @@ it('renders WEBSITE_ASSISTANT layout unchanged', () => {
           layout="WEBSITE_ASSISTANT"
         />
       </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/ZoomedFullBody.test.tsx

@@ -3,6 +3,7 @@ import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -20,6 +21,17 @@ Object.defineProperty(window, 'matchMedia', {
 it('renders ZOOMED_FULL_BODY layout unchanged', () => {
   const { container } = render(
     <I18nWrapper>
+      <ArtifactSystemProvider config={{
+        supportedMimeTypes: {
+          html: {
+            name: 'HTML',
+            icon: '🌐',
+            hasPreview: true,
+            language: 'html',
+            mimeType: 'text/html',
+          },
+        },
+      }}>
       <VisemeProvider>
         <Memori
           showShare={true}
@@ -31,6 +43,7 @@ it('renders ZOOMED_FULL_BODY layout unchanged', () => {
           layout="ZOOMED_FULL_BODY"
         />
       </VisemeProvider>
+      </ArtifactSystemProvider>
     </I18nWrapper>
   );
   expect(container).toMatchSnapshot();

package/src/components/layouts/ZoomedFullBody.tsx

@@ -1,6 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Spin from '../ui/Spin';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
+import {
+  ArtifactDrawer,
+  useArtifactSystemContext,
+} from '../MemoriArtifactSystem';
 
 const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
   Header,
@@ -18,12 +22,35 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
   loading = false,
   poweredBy,
 }) => {
+  const { state } = useArtifactSystemContext();
+  const [isMobile, setIsMobile] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+
   useEffect(() => {
+    const handleResize = () => {
+      const newIsMobile = window.innerWidth < 769;
+      if (newIsMobile !== isMobile) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsMobile(newIsMobile);
+          setIsAnimating(false);
+        }, 300);
+      } else {
+        setIsMobile(newIsMobile);
+      }
+    };
+
     document.body.style.overflow = 'hidden';
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
     return () => {
       document.body.style.overflow = '';
+      window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [isMobile]);
+
+  const hasArtifact = state.currentArtifact && !isMobile;
 
   return (
     <>
@@ -34,21 +61,58 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
         {Header && headerProps && <Header {...headerProps} />}
 
         <div className="memori--grid">
-          <div className="memori--grid-column memori--grid-column-left">
-            {Avatar && avatarProps && (
-              <Avatar chatProps={chatProps} isZoomed {...avatarProps} />
-            )}
+          {!hasArtifact && (
+            <div className="memori--grid-column memori--grid-column-left">
+              {Avatar && avatarProps && !hasArtifact && (
+                <Avatar isZoomed chatProps={chatProps} {...avatarProps} />
+              )}
 
-            <div id="extension" />
-          </div>
-          <div className="memori--grid-column memori--grid-column--zoomed-full-body memori--grid-column-right">
-            {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-              <Chat {...chatProps} />
-            ) : startPanelProps ? (
-              <StartPanel {...startPanelProps} />
-            ) : null}
+              <div id="extension" />
+            </div>
+          )}
+          <div
+            className={`memori-chat-layout--main ${
+              hasArtifact ? 'memori-chat-layout--main-with-artifact' : ''
+            }`}
+          >
+            <div
+              className={
+                state.isFullscreen
+                  ? `memori-chat-layout-controls-hide`
+                  : `memori-chat-layout--controls ${
+                      hasArtifact
+                        ? 'memori-chat-layout--controls-with-artifact'
+                        : ''
+                    }`
+              }
+            >
+              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                <Chat {...chatProps} />
+              ) : startPanelProps ? (
+                <StartPanel {...startPanelProps} />
+              ) : null}
+            </div>
+
+            {hasArtifact && (
+              <div
+                className={
+                  state.isFullscreen
+                    ? `memori-chat-layout-artifact-panel-full-screen`
+                    : `memori-chat-layout--artifact-panel memori-chat-layout--artifact-panel-enter`
+                }
+              >
+                <ArtifactDrawer />
+              </div>
+            )}
           </div>
 
+          {/* Mobile drawer - always rendered but only shown on mobile */}
+          {state.currentArtifact && isMobile && (
+            <div className="memori-chat-layout--artifact-drawer">
+              <ArtifactDrawer />
+            </div>
+          )}
+
           <div className="memori--powered-by-custom">{poweredBy}</div>
         </div>
       </Spin>