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

package/src/components/layouts/chat.css

@@ -6,12 +6,16 @@
     background: none;
 }
 
-.memori-widget > .memori-spin.memori-chat-layout {
+.memori-widget > .memori-spin.memori-chat-layout  {
     display: flex;
     height: 100%;
     flex-direction: column;
 }
 
+.memori-chat-layout--main, .memori-chat-layout--controls{
+    min-height: calc(100% - 25px);
+}
+
 .memori-chat-layout--header {
     text-align: right;
 }
@@ -21,6 +25,98 @@
     width: auto;
 }
 
+.memori-chat-layout-controls-hide{
+    display: none;
+}
+
+.memori-chat-layout-artifact-panel-full-screen{
+    width: 100%;
+    height: 100%;
+    flex:1 1;
+}
+
+
+.memori-chat-layout--main {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    /* max-width: 1200px; */
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout--main-with-artifact {
+    flex-direction: row;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    gap: 1rem;
+}
+
+.memori-chat-layout--controls {
+    position: relative;
+    z-index: 5;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout--controls-with-artifact {
+    max-height: 100%;
+    flex: 0 0 50%;
+    margin: 0;
+}
+
+.memori-chat-layout--artifact-panel {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    flex: 0 0 50%;
+    flex-direction: column;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
+    backdrop-filter: blur(20px);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    opacity: 0;
+    transform: translateX(100%) scale(0.95);
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout--artifact-panel-enter {
+    animation: artifact-panel-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    opacity: 1;
+    transform: translateX(0) scale(1);
+}
+
+@keyframes artifact-panel-slide-in {
+    0% {
+        opacity: 0;
+        transform: translateX(100%) scale(0.95);
+    }
+    50% {
+        opacity: 0.8;
+        transform: translateX(50%) scale(0.98);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+
+
 .memori-chat-layout .memori--avatar {
     top: 0;
 }
@@ -52,25 +148,17 @@
     }
 }
 
-.memori-chat-layout--controls {
-    position: relative;
-    z-index: 5;
-    max-height: calc(100% - 50px);
-    flex: 1;
-}
-
 .memori-chat-layout--controls .memori--start-panel,
 .memori-chat-layout--controls .memori-chat--wrapper {
     max-width: 1200px;
+    height: 100%;
+    min-height: calc(87vh - 1rem);
     margin: 0 auto;
 }
 
-.memori-chat-layout--controls .memori--start-panel {
-    margin-top: 3rem;
-}
 
 .memori-chat-layout--controls .memori-chat--wrapper {
-    height: calc(100% - 1rem);
+    height: calc(87vh - 1rem);
 }
 
 .memori-chat-layout .memori-chat--content {
@@ -125,5 +213,239 @@
 }
 
 .memori-chat-layout .memori--global-background-image {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.8));
+    position: relative;
+    overflow: hidden;
+    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(200, 200, 200, 0.8) 100%);
+    transition: all 0.2s ease-in-out;
+}
+
+.memori-chat-layout .memori--global-background-image::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    animation: background-shimmer 4s ease-in-out infinite;
+    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+    background-size: 200% 200%;
+    content: '';
+    pointer-events: none;
+}
+
+@keyframes background-shimmer {
+    0%, 100% { background-position: 200% 200%; }
+    50% { background-position: -200% -200%; }
+}
+
+/* Enhanced micro-interactions */
+
+.memori-chat-layout--main:hover {
+    transform: translateY(-2px);
+    /* box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15); */
+}
+
+
+.memori-chat-layout--controls:hover {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
 }
+
+
+
+.memori-chat-layout--artifact-panel:hover {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px) scale(1.01);
+}
+
+/* Loading states */
+.memori-chat-layout--loading {
+    position: relative;
+    overflow: hidden;
+}
+
+.memori-chat-layout--loading::before {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    animation: loading-shimmer 1.5s infinite;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    content: '';
+}
+
+@keyframes loading-shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+/* Success animations */
+.memori-chat-layout--success {
+    animation: success-pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes success-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+    100% { transform: scale(1); }
+}
+
+/* Error states */
+.memori-chat-layout--error {
+    animation: error-shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes error-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+}
+
+/* Focus states for accessibility */
+.memori-chat-layout--controls:focus-within {
+    border-radius: 12px;
+    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .memori-chat-layout--main {
+        border: 2px solid #333;
+    }
+    
+    .memori-chat-layout--controls {
+        border: 2px solid #333;
+    }
+    
+    .memori-chat-layout--artifact-panel {
+        border: 2px solid #333;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .memori-chat-layout--main,
+    .memori-chat-layout--controls,
+    .memori-chat-layout--artifact-panel,
+    .memori-chat-layout--header {
+        animation: none;
+        transition: none;
+    }
+    
+    .memori-chat-layout--main:hover {
+        transform: none;
+    }
+    
+    .memori-chat-layout--controls:hover {
+        transform: none;
+    }
+    
+    .memori-chat-layout--artifact-panel:hover {
+        transform: none;
+    }
+    
+    .memori-chat-layout--artifact-panel-enter {
+        animation: none;
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+
+.memori-chat-layout--artifact-drawer {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.memori-chat-layout--artifact-drawer .memori-artifact-drawer {
+    pointer-events: auto;
+}
+
+/* Mobile drawer animations */
+
+
+.memori-chat-layout--artifact-drawer[data-headlessui-state~="open"] {
+    opacity: 1;
+    visibility: visible;
+}
+
+.memori-chat-layout--artifact-drawer[data-headlessui-state~="open"] .memori-artifact-drawer {
+    animation: mobile-drawer-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    transform: translateX(0);
+}
+
+@keyframes mobile-drawer-slide-in {
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    50% {
+        opacity: 0.8;
+        transform: translateX(50%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Adjust chat layout when drawer is open */
+.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~="open"]) .memori-chat-layout--controls {
+    margin-right: 50%;
+    filter: blur(1px);
+    opacity: 0.8;
+    transform: scale(0.98);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~="open"]) .memori-chat-layout--main {
+    backdrop-filter: blur(5px);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.02) 100%);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+    .memori-chat-layout--main {
+        flex-direction: column !important;
+        padding: 0.5rem !important;
+        backdrop-filter: blur(10px) !important;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 250, 252, 0.02) 100%) !important;
+        gap: 0.5rem !important;
+    }
+    
+    .memori-chat-layout--artifact-panel {
+        display: none !important;
+    }
+    
+    .memori-chat-layout--controls {
+        max-height: calc(100% - 50px) !important;
+        flex: 1 !important;
+        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        margin: 0 !important;
+        /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.6) 100%) !important;
+        backdrop-filter: blur(20px) !important;
+        border-radius: 12px !important; */
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+    }
+    
+    .memori-chat-layout:has(.memori-chat-layout--artifact-drawer .memori-artifact-drawer[data-headlessui-state~="open"]) .memori-chat-layout--controls {
+        margin-right: 0;
+        filter: blur(2px);
+        opacity: 0.7;
+        transform: scale(0.95);
+    }
+    
+    .memori-chat-layout--artifact-drawer {
+        backdrop-filter: blur(12px) saturate(200%) !important;
+        background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
+    }
+}

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

@@ -5,6 +5,7 @@ import Memori, { LayoutProps, Props } from '../MemoriWidget/MemoriWidget';
 import I18nWrapper from '../../I18nWrapper';
 import Spin from '../ui/Spin';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactSystemProvider } from '../MemoriArtifactSystem';
 
 const meta: Meta = {
   title: 'General/Layouts',
@@ -26,9 +27,21 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
+    <ArtifactSystemProvider config={{
+      supportedMimeTypes: {
+        html: {
+          name: 'HTML',
+          icon: '🌐',
+          hasPreview: true,
+          language: 'html',
+          mimeType: 'text/html',
+        },
+      },
+    }}>
     <VisemeProvider>
       <Memori {...args} />
     </VisemeProvider>
+    </ArtifactSystemProvider>
   </I18nWrapper>
 );
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
@@ -267,8 +280,6 @@ export const CustomLayout: React.FC<LayoutProps> = ({
   startPanelProps,
   integrationStyle,
   integrationBackground,
-  ChangeMode,
-  changeModeProps,
   sessionId,
   hasUserActivatedSpeak,
   loading = false,

package/src/components/layouts/zoomed-full-body.css

@@ -1,6 +1,4 @@
-.memori-spin--zoomed-full-body {
-    height: 100vh !important;
-}
+
 
 .memori--powered-by-custom {
     position: absolute;

package/src/helpers/message.ts

@@ -87,6 +87,7 @@ export const renderMsg = (
         /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g,
         ''
       )
+      .replaceAll(/<output\s+class\s*=\s*["\']memori-artifact["\'][^>]*data-mimetype\s*=\s*["\']([^"']+)["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi, '')
       .replaceAll(/```markdown([^```]+)```/g, '$1')
       .replaceAll('($', '( $')
       .replaceAll(':$', ': $')

package/src/index.stories.tsx

@@ -258,20 +258,20 @@ NunzioFiore.args = {
 
 export const TestCustomAnimationsWithRPMSequence = Template.bind({});
 TestCustomAnimationsWithRPMSequence.args = {
-    memoriName: "Dancing Avatar",
-    ownerUserName: "andrea.patini3",
-    memoriID: "45420d30-a103-455c-bab1-b708a0566a02",
-    ownerUserID: "58770358-a5db-4b49-b3a4-734fc468e745",
-    tenantID: "aisuru-staging.aclambda.online",
-    engineURL: "https://engine-staging.memori.ai/memori/v2",
-    apiURL: "https://backend-staging.memori.ai/api/v2",
-    baseURL: "https://aisuru-staging.aclambda.online",
-    uiLang: "IT",
-    spokenLang: "IT",
-    layout: "HIDDEN_CHAT",
-    showLogin: true,
-    autoStart: true,
-    integrationID: "2f6e11a0-d799-4974-aa17-cf111d0af82a"
+  memoriName: 'Dancing Avatar',
+  ownerUserName: 'andrea.patini3',
+  memoriID: '45420d30-a103-455c-bab1-b708a0566a02',
+  ownerUserID: '58770358-a5db-4b49-b3a4-734fc468e745',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'https://aisuru-staging.aclambda.online',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  layout: 'HIDDEN_CHAT',
+  showLogin: true,
+  autoStart: true,
+  integrationID: '2f6e11a0-d799-4974-aa17-cf111d0af82a',
 };
 
 export const TestCustomGLBSingleAnimation = Template.bind({});
@@ -397,12 +397,16 @@ WithCustomUserAvatar.args = {
 
 export const Test = Template.bind({});
 Test.args = {
-  ownerUserName: 'dpezzettone',
-  memoriName: 'Meta Prompt Engineer',
-  tenantID: 'www.aisuru.com',
-  layout: 'CHAT',
-  uiLang: 'en',
-  showShare: true,
-  showSettings: true,
-  showLogin: true,
+  memoriName: 'Test Artifact',
+  ownerUserName: 'Andrea-Patini',
+  memoriID: '8cec936c-d440-4781-91df-e4ddf044255e',
+  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
+  tenantID: 'aisuru-staging.aclambda.online',
+  engineURL: 'https://engine-staging.memori.ai/memori/v2',
+  apiURL: 'https://backend-staging.memori.ai/api/v2',
+  baseURL: 'https://aisuru-staging.aclambda.online',
+  layout: 'FULLPAGE',
+  uiLang: 'EN',
+  spokenLang: 'EN',
+  integrationID: '2b37c25d-8cf9-456f-b9ee-2c27dc4d54fc',
 };

package/src/index.tsx

@@ -21,6 +21,7 @@ import { safeParseJSON } from './helpers/utils';
 import i18n from './i18n';
 import { useTranslation } from 'react-i18next';
 import I18nWrapper from './I18nWrapper';
+import { ArtifactSystemProvider } from './components/MemoriArtifactSystem';
 
 export interface Props {
   memoriName?: string | null;
@@ -332,6 +333,50 @@ const Memori: React.FC<Props> = ({
   return (
     <I18nWrapper>
       <VisemeProvider>
+        <ArtifactSystemProvider config={{
+          supportedMimeTypes: {
+            html: {
+              name: 'HTML',
+              icon: '🌐',
+              hasPreview: true,
+              language: 'html',
+              mimeType: 'text/html',
+            },
+            css: {
+              name: 'CSS',
+              icon: '🎨',
+              hasPreview: false,
+              language: 'css',
+              mimeType: 'text/css',
+            },
+            javascript: {
+              name: 'JavaScript',
+              icon: '⚡',
+              hasPreview: false,
+              language: 'javascript',
+              mimeType: 'text/javascript',
+            },
+            typescript: {
+              name: 'TypeScript',
+              icon: '🔷',
+              hasPreview: false,
+              language: 'typescript',
+              mimeType: 'text/typescript',
+            },
+            markdown: {
+              name: 'Markdown',
+              icon: '📝',
+              hasPreview: true,
+              language: 'markdown',
+              mimeType: 'text/markdown',
+            },
+          },
+          autoOpenArtifacts: true,
+          enableSyntaxHighlighting: true,
+          showLineNumbers: true,
+          maxHistoryItems: 10,
+        }}>
+
         <Toaster position="top-center" reverseOrder={true} />
         {memori ? (
           <MemoriWidget
@@ -393,6 +438,7 @@ const Memori: React.FC<Props> = ({
             </p>
           </div>
         )}
+        </ArtifactSystemProvider>
       </VisemeProvider>
     </I18nWrapper>
   );