@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/icons/Code.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Code = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    focusable="false"
+    role="img"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M10 9.5 8 12l2 2.5" />
+    <path d="m14 9.5 2 2.5-2 2.5" />
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+  </svg>
+);
+
+export default Code;

package/src/components/icons/Copy.tsx

@@ -4,13 +4,19 @@ const Copy = ({ className, title }: { className?: string; title?: string }) => (
   <svg
     {...(!title ? { 'aria-hidden': 'true' } : {})}
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
     focusable="false"
     role="img"
     className={className}
     aria-label={title}
   >
-    <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
+    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
   </svg>
 );
 

package/src/components/icons/Document.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+export const DocumentIcon: React.FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg 
+      className={className} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path 
+        d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M14 2.5V8H19.5" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M16 13H8" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M16 17H8" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M10 9H8" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default DocumentIcon;

package/src/components/icons/History.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+const History = ({
+    className,
+    title,
+    disabled,
+  }: {
+    className?: string;
+    title?: string;
+    disabled?: boolean;
+  }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke={disabled ? '#000000' : '#ffff'}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 8v4l2.5 2.5"
+    />
+    <path
+      fill={disabled ? '#000000' : '#ffff'}
+      d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+    />
+  </svg>
+)
+export default History

package/src/components/icons/Image.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export const ImageIcon: React.FC<{ className?: string }> = ({ className }) => {
+    return (
+      <svg 
+        className={className} 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect 
+          x="3" 
+          y="3" 
+          width="18" 
+          height="18" 
+          rx="2" 
+          stroke="currentColor" 
+          strokeWidth="1.5" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+        />
+        <circle 
+          cx="8.5" 
+          cy="8.5" 
+          r="1.5" 
+          fill="currentColor"
+        />
+        <path 
+          d="M21 15L16 10L5 21" 
+          stroke="currentColor" 
+          strokeWidth="1.5" 
+          strokeLinecap="round" 
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  };

package/src/components/icons/Info.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Info = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
+    <path
+      d="M12 17V11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="1"
+      cy="1"
+      r="1"
+      transform="matrix(1 0 0 -1 11 9)"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Info;

package/src/components/icons/MenuHorizontal.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+const MenuHorizontal = ({
+    className,
+    title,
+    stroke,
+  }: {
+    className?: string;
+    title?: string;
+    stroke?: string;
+  }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke={stroke}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+    />
+  </svg>
+)
+export default MenuHorizontal

package/src/components/icons/MenuVertical.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+const MenuVertical = ({
+    className,
+    title,
+    bold = false,
+  }: {
+    className?: string;
+    title?: string;
+    bold?: boolean;
+  }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={bold ? 3 : 2}
+      d="M13 5a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 12a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 19a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
+    />
+  </svg>
+)
+export default MenuVertical

package/src/components/icons/Preview.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const PreviewIcon: React.FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg 
+      className={className} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path 
+        d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <circle 
+        cx="12" 
+        cy="12" 
+        r="3" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

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/icons/Upload.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const UploadIcon: React.FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg 
+      className={className} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path 
+        d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M17 8L12 3L7 8" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+      <path 
+        d="M12 3V15" 
+        stroke="currentColor" 
+        strokeWidth="1.5" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/components/icons/Warning.tsx

@@ -15,8 +15,9 @@ const Warning = ({
     viewBox="0 0 1024 1024"
     className={className}
     aria-label={title}
+    color="currentColor"
   >
-    <path d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
+    <path fill="currentColor" d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
   </svg>
 );
 

package/src/components/icons/icons.stories.tsx

@@ -13,17 +13,25 @@ interface IconProps {
   title?: string;
 }
 
+// Import all icons at module level
+const iconContext = (require as any).context('./', false, /\.tsx$/);
+const iconModules: { [key: string]: React.ComponentType<any> } = {};
+
+iconContext.keys().forEach((key: string) => {
+  const iconName = key.replace('./', '').replace('.tsx', '');
+  if (!iconName.includes('stories')) {
+    iconModules[iconName] = iconContext(key).default;
+  }
+});
+
 const IconShowcaseItem = ({ iconName, ...iconProps }: Props & IconProps) => {
-  const Icon = require(`./${iconName}`).default;
+  const Icon = iconModules[iconName];
+  if (!Icon) return null;
   return <Icon {...iconProps} className="showcase-icon" />;
 };
 
 const IconsShowcase = (iconProps: IconProps) => {
-  const icons = require.context('./', false, /\.tsx$/);
-  const iconNames = icons
-    .keys()
-    .map(key => key.replace('./', '').replace('.tsx', ''))
-    .filter(name => !name.includes('stories'));
+  const iconNames = Object.keys(iconModules);
   return (
     <div
       style={{

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

@@ -1,7 +1,9 @@
 import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
-
+import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation(query => ({
@@ -18,15 +20,21 @@ Object.defineProperty(window, 'matchMedia', {
 
 it('renders Chat layout unchanged', () => {
   const { container } = render(
-    <Memori
-      showShare={true}
-      showSettings={true}
-      memori={memori}
-      tenant={tenant}
-      tenantID="aisuru.com"
-      integration={integration}
-      layout="CHAT"
-    />
+    <I18nWrapper>
+      <ArtifactProvider >
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+        showSettings={true}
+        memori={memori}
+        tenant={tenant}
+        tenantID="aisuru.com"
+        integration={integration}
+          layout="CHAT"
+        />
+      </VisemeProvider>
+      </ArtifactProvider>
+    </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/components/ArtifactDrawer/ArtifactDrawer';
+import { useArtifact } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 const ChatLayout: React.FC<LayoutProps> = ({
   Header,
@@ -11,39 +13,57 @@ const ChatLayout: React.FC<LayoutProps> = ({
   startPanelProps,
   integrationStyle,
   integrationBackground,
-  ChangeMode,
-  changeModeProps,
   sessionId,
   hasUserActivatedSpeak,
-  showInstruct = false,
   loading = false,
   poweredBy,
-}) => (
-  <>
-    {integrationStyle}
-    {integrationBackground}
-
-    <Spin spinning={loading} className="memori-chat-layout">
-      {poweredBy}
-      {showInstruct && ChangeMode && changeModeProps && (
-        <ChangeMode {...changeModeProps} />
-      )}
-
-      <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 { state } = useArtifact();
+
+
+  return (
+    <>
+      {integrationStyle}
+      {integrationBackground}
+
+      <Spin spinning={loading} className="memori-chat-layout">
+        {poweredBy}
+
+        <div className={`memori-chat-layout--header ${
+          state.isDrawerOpen ? 'memori-chat-layout--header-with-artifact' : ''
+        }`}>
+          {Header && headerProps && <Header {...headerProps} />}
+        </div>
+
+        <div id="extension" />
+
+        <div
+          className={`memori-chat-layout--main ${
+            state.isDrawerOpen ? 'memori-chat-layout--main-with-artifact' : ''
+          }`}
+        >
+          <div
+            className={
+              state.isFullscreen
+                ? `memori-chat-layout-controls-hide`
+                : `memori-chat-layout--controls ${
+                    state.isDrawerOpen
+                      ? 'memori-chat-layout--controls-with-artifact'
+                      : ''
+                  }`
+            }
+          >
+            {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+              <Chat {...chatProps} />
+            ) : startPanelProps ? (
+              <StartPanel {...startPanelProps} />
+            ) : null}
+          </div>
+        </div>
+
+      </Spin>
+    </>
+  );
+};
 
 export default ChatLayout;

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

@@ -1,6 +1,9 @@
 import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -18,15 +21,45 @@ Object.defineProperty(window, 'matchMedia', {
 
 it('renders FullPage layout unchanged', () => {
   const { container } = render(
-    <Memori
-      showShare={true}
-      showSettings={true}
-      memori={memori}
-      tenant={tenant}
-      tenantID="aisuru.com"
-      integration={integration}
-      layout="FULLPAGE"
-    />
+    <I18nWrapper>
+      <ArtifactProvider
+      >
+        <VisemeProvider>
+          <Memori
+            showShare={true}
+            showSettings={true}
+            memori={memori}
+            tenant={tenant}
+            tenantID="aisuru.com"
+            integration={integration}
+            layout="FULLPAGE"
+          />
+        </VisemeProvider>
+      </ArtifactProvider>
+    </I18nWrapper>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders FullPage layout with root css properties unchanged', () => {
+  const { container } = render(
+    <I18nWrapper>
+      <ArtifactProvider
+      >
+      <VisemeProvider>
+        <Memori
+          showShare={true}
+          showSettings={true}
+          memori={memori}
+          tenant={tenant}
+          tenantID="aisuru.com"
+          integration={integration}
+          layout="FULLPAGE"
+          applyVarsToRoot
+        />
+      </VisemeProvider>
+      </ArtifactProvider>
+    </I18nWrapper>
   );
   expect(container).toMatchSnapshot();
 });