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

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css

@@ -4,129 +4,133 @@
  */
 
 .memori-artifact-preview {
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  flex-direction: column;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
 }
 
 /* Tabs */
 .memori-artifact-tabs {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.5rem;
-  /* border-bottom: 1px solid var(--memori-button-border-color, #e9ecef); */
-  border-radius: var(--memori-border-radius, 6px) var(--memori-border-radius, 6px) 0 0;
-  background: var(--memori-inner-bg, #f8f9fa);
-  gap: 0.25rem;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem;
+    /* border-bottom: 1px solid var(--memori-border-color); */
+    border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
+    background: var(--memori-primary-subtle);
+    gap: var(--memori-spacing-xs);
 }
 
-.memori-artifact-tab-icon{
-  width: 16px;
-  height: 16px;
+.memori-artifact-tab-icon {
+    width: 16px;
+    height: 16px;
 }
 
 .memori-artifact-tab {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border: none;
-  border-radius: var(--memori-border-radius, 4px);
-  background: transparent;
-  color: var(--memori-text-color, #666);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  gap: 0.5rem;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.memori-artifact-tab--active, .memori-artifact-tab:hover, .memori-artifact-tab:active, .memori-artifact-tab:focus {
-  background: var(--memori-chat-bubble-bg, #fff);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  color: var(--memori-primary);
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    background: transparent;
+    color: var(--memori-text-color);
+    cursor: pointer;
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-medium);
+    gap: var(--memori-spacing-sm);
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.memori-artifact-tab--active,
+.memori-artifact-tab:hover,
+.memori-artifact-tab:active,
+.memori-artifact-tab:focus {
+    background: var(--memori-main-background);
+    box-shadow: var(--memori-shadow-sm);
+    color: var(--memori-primary);
 }
 
 /* Content */
 .memori-artifact-content {
-  display: flex;
-  overflow: visible;
-  min-height: 0;
-  flex: 1;
-  flex-direction: column;
-  border-radius: 0 0 var(--memori-border-radius, 6px) var(--memori-border-radius, 6px);
-  background: var(--memori-chat-bubble-bg, #fff);
+    display: flex;
+    overflow: visible;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    border-radius: 0 0 var(--memori-radius-box) var(--memori-radius-box);
 }
 
 .memori-artifact-tab-content {
-  display: none;
-  overflow: hidden;
-  min-height: 0;
-  flex: 1;
+    display: none;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1;
 }
 
 .memori-artifact-tab-content--active {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
+    padding: var(--memori-spacing-md);
 }
 
 /* Code Content */
 .memori-artifact-code {
-  overflow: auto;
-  flex: 1;
-  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
-  border-radius: var(--memori-border-radius, 6px);
-  /* margin: 1rem; */
-  background: var(--memori-chat-bubble-bg, #fff);
+    flex: 1;
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-main-background);
+    overflow-x: hidden;
+    overflow-y: auto;
+    /* border: 1px solid var(--memori-border-color); */
+    /* margin: 1rem; */
 }
 
 .memori-artifact-code-content {
-  padding: 1rem;
-  margin: 0;
-  color: var(--memori-text-color, #333);
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+    padding: 1rem;
+    margin: 0;
+    color: var(--memori-text-color);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+    font-size: var(--memori-text-size-small);
+    line-height: var(--memori-text-line-normal);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
 /* Preview Content */
 .memori-artifact-preview-content {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  min-height: 0;
-  flex: 1;
-  flex-direction: column;
-  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
-  border-radius: var(--memori-border-radius, 6px);
-  /* margin: 1rem; */
-  margin-top: 1rem;
-  background: var(--memori-chat-bubble-bg, #fff);
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    /* border: 1px solid var(--memori-border-color); */
+    border-radius: var(--memori-radius-box);
+    /* margin: 1rem; */
+    /* margin-top: var(--memori-spacing-lg); */
+    background: var(--memori-secondary-background);
 }
 
 .memori-artifact-preview-iframe {
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  flex: 1;
-  border: none;
-  border-radius: var(--memori-border-radius, 6px);
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    border: none;
+    border-radius: var(--memori-radius-box);
 }
 
 /* Markdown Preview */
 .memori-artifact-preview-markdown {
-  min-height: 0;
-  flex: 1;
-  padding: 1rem;
-  color: var(--memori-text-color, #333);
-  font-family: var(--memori-font-family);
-  line-height: 1.6;
-  overflow-y: auto;
+    min-height: 0;
+    flex: 1;
+    padding: 1rem;
+    color: var(--memori-text-color);
+    font-family: var(--memori-font-family);
+    line-height: 1.6;
+    overflow-y: auto;
 }
 
 .memori-artifact-preview-markdown h1,
@@ -135,221 +139,216 @@
 .memori-artifact-preview-markdown h4,
 .memori-artifact-preview-markdown h5,
 .memori-artifact-preview-markdown h6 {
-  margin: 1.5rem 0 0.5rem;
-  font-weight: 600;
-  line-height: 1.3;
+    margin: 1.5rem 0 0.5rem;
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: 1.3;
 }
 
 .memori-artifact-preview-css-content h3 {
-  margin: 0 0 1rem;
-  font-size: 1.125rem;
-  font-weight: 600;
+    margin: 0 0 1rem;
+    font-size: var(--memori-text-size-large);
+    font-weight: var(--memori-text-weight-semibold);
 }
 
 .memori-artifact-preview-markdown h1:first-child,
 .memori-artifact-preview-markdown h2:first-child,
 .memori-artifact-preview-markdown h3:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 .memori-artifact-preview-markdown p {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
 .memori-artifact-preview-markdown code {
-  padding: 0.125rem 0.25rem;
-  border-radius: 3px;
-  background: var(--memori-inner-bg, #f1f3f4);
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875em;
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-primary-subtle);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875em;
 }
 
 .memori-artifact-preview-markdown pre {
-  padding: 1rem;
-  border-radius: var(--memori-border-radius, 6px);
-  margin: 1rem 0;
-  background: var(--memori-inner-bg, #f1f3f4);
-  overflow-x: auto;
+    padding: 1rem;
+    border-radius: var(--memori-radius-box);
+    margin: 1rem 0;
+    background: var(--memori-primary-subtle);
+    overflow-x: auto;
 }
 
 .memori-artifact-preview-markdown pre code {
-  padding: 0;
-  background: none;
+    padding: 0;
+    background: none;
 }
 
 .memori-artifact-preview-markdown a {
-  color: var(--memori-primary);
-  text-decoration: none;
+    color: var(--memori-primary);
+    text-decoration: none;
 }
 
 .memori-artifact-preview-markdown a:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 /* SVG Preview */
 .memori-artifact-preview-svg {
-  display: flex;
-  min-height: 200px;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
+    display: flex;
+    min-height: 200px;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
 }
 
 .memori-artifact-preview-svg svg {
-  max-width: 100%;
-  max-height: 100%;
-  /* border: 1px solid var(--memori-buttonr-border-color, #e9ecef); */
-  border-radius: var(--memori-border-radius, 6px);
+    max-width: 100%;
+    max-height: 100%;
+    /* border: 1px solid var(--memori-border-color); */
+    border-radius: var(--memori-radius-box);
 }
 
 /* CSS Preview */
 .memori-artifact-preview-css {
-  padding: 1rem;
+    padding: 1rem;
 }
 
 .memori-artifact-preview-css-demo {
-  overflow: hidden;
-  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
-  border-radius: var(--memori-border-radius, 6px);
+    overflow: hidden;
+    /* border: 1px solid var(--memori-border-color); */
+    border-radius: var(--memori-radius-box);
 }
 
 .memori-artifact-preview-css-content {
-  padding: 1rem;
-  color: var(--memori-text-color, #333);
-  font-family: var(--memori-font-family);
-  line-height: 1.6;
+    padding: 1rem;
+    color: var(--memori-text-color);
+    font-family: var(--memori-font-family);
+    line-height: 1.6;
 }
 
 .memori-artifact-preview-css-content p {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
 .memori-artifact-preview-css-content button {
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: var(--memori-border-radius, 4px);
-  margin: 0.5rem 0;
-  background: var(--memori-primary);
-  color: var(--memori-primary-text);
-  cursor: pointer;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    margin: 0.5rem 0;
+    background: var(--memori-primary);
+    color: var(--memori-primary-content);
+    cursor: pointer;
 }
 
 .memori-artifact-preview-css-container {
-  padding: 1rem;
-  border-radius: var(--memori-border-radius, 4px);
-  margin: 1rem 0;
-  background: var(--memori-inner-bg, #f1f3f4);
+    padding: 1rem;
+    border-radius: var(--memori-radius-box);
+    margin: 1rem 0;
+    background: var(--memori-primary-subtle);
 }
 
 /* Text Preview */
 .memori-artifact-preview-text {
-  padding: 1rem;
-  color: var(--memori-text-color, #333);
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+    padding: 1rem;
+    color: var(--memori-text-color);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: var(--memori-text-size-small);
+    line-height: var(--memori-text-line-normal);
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
 /* Syntax Highlighting */
 .memori-artifact--comment {
-  color: #6a737d;
-  font-style: italic;
+    color: var(--memori-text-color);
+    font-style: italic;
 }
 
 .memori-artifact--keyword {
-  color: #d73a49;
-  font-weight: 600;
+    color: var(--memori-text-color);
+    font-weight: var(--memori-text-weight-semibold);
 }
 
 .memori-artifact--string {
-  color: #032f62;
+    color: var(--memori-text-color);
 }
 
 .memori-artifact--number {
-  color: #005cc5;
-  font-weight: 500;
+    color: var(--memori-text-color);
+    font-weight: var(--memori-text-weight-medium);
 }
 
 .memori-artifact--function {
-  color: #6f42c1;
-  font-weight: 600;
+    color: var(--memori-text-color);
+    font-weight: var(--memori-text-weight-semibold);
 }
 
 .memori-artifact--operator {
-  color: #d73a49;
+    color: var(--memori-text-color);
 }
 
 .memori-artifact--property {
-  color: #005cc5;
+    color: var(--memori-text-color);
 }
 
 .memori-artifact--selector {
-  color: #6f42c1;
-  font-weight: 600;
+    color: var(--memori-text-color);
+    font-weight: var(--memori-text-weight-semibold);
 }
 
 .memori-artifact--tag {
-  color: #22863a;
-  font-weight: 600;
+    color: var(--memori-text-color);
+    font-weight: var(--memori-text-weight-semibold);
 }
 
 .memori-artifact--line-number {
-  margin-right: 1rem;
-  color: #6a737d;
-  user-select: none;
+    margin-right: var(--memori-spacing-lg);
+    color: var(--memori-text-color);
+    user-select: none;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
+    .memori-artifact-tab {
+        min-height: 42px;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.75rem;
+    }
 
-  .memori-artifact-tab {
-    min-height: 42px;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.75rem;
-  }
+    .memori-artifact-code,
+    .memori-artifact-preview-content {
+        margin: 0.5rem;
+    }
 
-  .memori-artifact-code,
-  .memori-artifact-preview-content {
-    margin: 0.5rem;
-  }
+    .memori-artifact-code-content {
+        padding: 0.75rem;
+        font-size: 0.75rem;
+    }
 
-  .memori-artifact-code-content {
-    padding: 0.75rem;
-    font-size: 0.75rem;
-  }
-
-  .memori-artifact-preview-markdown,
-  .memori-artifact-preview-css,
-  .memori-artifact-preview-text {
-    padding: 0.75rem;
-  }
+    .memori-artifact-preview-markdown,
+    .memori-artifact-preview-css,
+    .memori-artifact-preview-text {
+        padding: 0.75rem;
+    }
 }
 
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
-  .memori-artifact-tabs {
-    border-bottom-color: var(--memori-button-border-color, #404040);
-    background: rgba(255, 255, 255, 0.86);
-  }
-
-  /* .memori-artifact-tab--active {
-    background: var(--memori-chat-bubble-bg, #1a1a1a);
-  } */
-
-  .memori-artifact-code,
-  .memori-artifact-preview-content {
-    border-color: var(--memori-button-border-color, #404040);
-  }
-
-  .memori-artifact-preview-markdown code,
-  .memori-artifact-preview-css-demo {
-    border-color: var(--memori-button-border-color, #404040);
-    background: var(--memori-inner-bg, #2a2a2a);
-  }
-
-  .memori-artifact-preview-css-container {
-    background: var(--memori-inner-bg, #2a2a2a);
-  }
+    .memori-artifact-tabs {
+        border-bottom-color: var(--memori-border-color);
+        background: rgba(255, 255, 255, 0.86);
+    }
+
+    .memori-artifact-code,
+    .memori-artifact-preview-content {
+        border-color: var(--memori-border-color);
+    }
+
+    .memori-artifact-preview-markdown code,
+    .memori-artifact-preview-css-demo {
+        border-color: var(--memori-border-color);
+        background: var(--memori-primary-subtle);
+    }
+
+    .memori-artifact-preview-css-container {
+        background: var(--memori-primary-subtle);
+    }
 }

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx

@@ -7,10 +7,9 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
-import Button from '../../../ui/Button';
+import { Button } from '@memori.ai/ui';
 import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
-import Code from '../../../icons/Code';
-import { PreviewIcon } from '../../../icons/Preview';
+import { Code, Eye as PreviewIcon } from 'lucide-react';
 import Snippet from '../../../Snippet/Snippet';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
 import { renderMsg } from '../../../../helpers/message';

package/src/components/MemoriArtifactSystem/context/ArtifactContext.tsx

@@ -1,9 +1,14 @@
 import React, { createContext, useContext, useState, ReactNode, useCallback, useMemo } from 'react';
 import { ArtifactData, ArtifactSystemState } from '../types/artifact.types';
 
+export type OpenArtifactOptions = {
+  /** Inline expansion in chat; layouts should not hide avatar / use side-drawer chrome. */
+  isChatLogPanel?: boolean;
+};
+
 interface ArtifactContextType {
   state: ArtifactSystemState;
-  openArtifact: (artifact: ArtifactData) => void;
+  openArtifact: (artifact: ArtifactData, options?: OpenArtifactOptions) => void;
   closeArtifact: () => void;
   toggleFullscreen: () => void;
 }
@@ -15,17 +20,22 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
     currentArtifact: null,
     isDrawerOpen: false,
     isFullscreen: false,
+    isChatLogPanelPresentation: false,
   });
 
-  const openArtifact = useCallback((artifact: ArtifactData) => {
-    setState(() => {
-      return {
-        currentArtifact: artifact,
-        isDrawerOpen: true,
-        isFullscreen: false,
-      };
-    });
-  }, []);
+  const openArtifact = useCallback(
+    (artifact: ArtifactData, options?: OpenArtifactOptions) => {
+      setState(() => {
+        return {
+          currentArtifact: artifact,
+          isDrawerOpen: true,
+          isFullscreen: false,
+          isChatLogPanelPresentation: options?.isChatLogPanel ?? false,
+        };
+      });
+    },
+    []
+  );
 
   const closeArtifact = useCallback(() => {
     setState(prev => {
@@ -35,6 +45,7 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
         currentArtifact: null,
         isDrawerOpen: false,
         isFullscreen: false,
+        isChatLogPanelPresentation: false,
       };
     });
   }, []);

package/src/components/MemoriArtifactSystem/types/artifact.types.ts

@@ -11,6 +11,8 @@ export interface ArtifactSystemState {
   currentArtifact: ArtifactData | null;
   isDrawerOpen: boolean;
   isFullscreen: boolean;
+  /** True when the open artifact is shown inline in the chat (not the side drawer). */
+  isChatLogPanelPresentation: boolean;
 }
 
 export type ArtifactTab = 'code' | 'preview';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '../../../testUtils';
 import { ArtifactProvider } from '../context/ArtifactContext';
 import { ArtifactAPIBridge } from './ArtifactAPI';
 import { ArtifactData } from '../types/artifact.types';
@@ -259,6 +259,7 @@ describe('ArtifactAPIBridge', () => {
     expect(state.currentArtifact).toBeNull();
     expect(state.isDrawerOpen).toBe(false);
     expect(state.isFullscreen).toBe(false);
+    expect(state.isChatLogPanelPresentation).toBe(false);
   });
 
   it('should clean up API on unmount', () => {