@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -1,5 +1,19 @@
-import React, { createContext, useContext, useState, ReactNode, useCallback, useMemo } from 'react';
-import { ArtifactData, ArtifactSystemState } from '../types/artifact.types';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  ArtifactData,
+  ArtifactEdit,
+  ArtifactSystemState,
+  ApplyUpdateResult,
+} from '../types/artifact.types';
+import { applyEdits } from '../utils/applyEdits';
 
 export type OpenArtifactOptions = {
   /** Inline expansion in chat; layouts should not hide avatar / use side-drawer chrome. */
@@ -11,6 +25,11 @@ interface ArtifactContextType {
   openArtifact: (artifact: ArtifactData, options?: OpenArtifactOptions) => void;
   closeArtifact: () => void;
   toggleFullscreen: () => void;
+  registerArtifact: (artifact: ArtifactData) => void;
+  applyArtifactUpdate: (
+    artifactId: string,
+    edits: ArtifactEdit[]
+  ) => ApplyUpdateResult;
 }
 
 const ArtifactContext = createContext<ArtifactContextType | null>(null);
@@ -23,6 +42,11 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
     isChatLogPanelPresentation: false,
   });
 
+  // Synchronous registry keyed by stable artifactId → latest version.
+  // useRef avoids race where update handlers read empty React state
+  // right after a create in the same render cycle.
+  const registryRef = useRef<Record<string, ArtifactData>>({});
+
   const openArtifact = useCallback(
     (artifact: ArtifactData, options?: OpenArtifactOptions) => {
       setState(() => {
@@ -39,7 +63,6 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
 
   const closeArtifact = useCallback(() => {
     setState(prev => {
-      // if (!prev.isDrawerOpen) return prev;
       return {
         ...prev,
         currentArtifact: null,
@@ -57,12 +80,91 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
     }));
   }, []);
 
-  const contextValue = useMemo(() => ({
-    state,
-    openArtifact,
-    closeArtifact,
-    toggleFullscreen,
-  }), [state, openArtifact, closeArtifact, toggleFullscreen]);
+  const registerArtifact = useCallback((artifact: ArtifactData) => {
+    if (!artifact?.artifactId) return;
+    registryRef.current[artifact.artifactId] = artifact;
+  }, []);
+
+  const applyArtifactUpdate = useCallback(
+    (artifactId: string, edits: ArtifactEdit[]): ApplyUpdateResult => {
+      const current = registryRef.current[artifactId];
+      if (!current) {
+        return {
+          success: false,
+          failedEdits: edits,
+          updatedArtifact: null,
+          failureReason: 'not-found',
+        };
+      }
+
+      const { content, failedEdits, appliedCount } = applyEdits(
+        current.content,
+        edits
+      );
+
+      if (appliedCount === 0) {
+        return {
+          success: false,
+          failedEdits,
+          updatedArtifact: null,
+          failureReason: 'no-match',
+        };
+      }
+
+      const updatedArtifact: ArtifactData = {
+        id: `artifact-ui-${artifactId}-${Date.now()}-${Math.random()
+          .toString(36)
+          .slice(2, 8)}`,
+        artifactId,
+        content,
+        mimeType: current.mimeType,
+        title: current.title,
+        timestamp: new Date(),
+        size: content.length,
+      };
+
+      registryRef.current[artifactId] = updatedArtifact;
+
+      setState(prev => {
+        if (
+          prev.isDrawerOpen &&
+          prev.currentArtifact?.artifactId === artifactId
+        ) {
+          return {
+            ...prev,
+            currentArtifact: updatedArtifact,
+          };
+        }
+        return prev;
+      });
+
+      return {
+        success: failedEdits.length === 0,
+        failedEdits,
+        updatedArtifact,
+      };
+    },
+    []
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      state,
+      openArtifact,
+      closeArtifact,
+      toggleFullscreen,
+      registerArtifact,
+      applyArtifactUpdate,
+    }),
+    [
+      state,
+      openArtifact,
+      closeArtifact,
+      toggleFullscreen,
+      registerArtifact,
+      applyArtifactUpdate,
+    ]
+  );
 
   return (
     <ArtifactContext.Provider value={contextValue}>

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

@@ -1,5 +1,8 @@
 export interface ArtifactData {
+  /** Unique UI identifier for this version instance */
   id: string;
+  /** Stable lineage id (from data-artifact-id); constant across versions */
+  artifactId: string;
   content: string;
   mimeType: string;
   title: string;
@@ -7,6 +10,22 @@ export interface ArtifactData {
   size: number;
 }
 
+export interface ArtifactEdit {
+  /** Exact string to find and replace (first occurrence) */
+  old: string;
+  /** Replacement string */
+  new: string;
+}
+
+export interface ApplyUpdateResult {
+  success: boolean;
+  failedEdits: ArtifactEdit[];
+  updatedArtifact: ArtifactData | null;
+  /** Why the update failed when updatedArtifact is null */
+  failureReason?: 'not-found' | 'no-match';
+}
+
+
 export interface ArtifactSystemState {
   currentArtifact: ArtifactData | null;
   isDrawerOpen: boolean;
@@ -15,4 +34,4 @@ export interface ArtifactSystemState {
   isChatLogPanelPresentation: boolean;
 }
 
-export type ArtifactTab = 'code' | 'preview';
+export type ArtifactTab = 'code' | 'preview';

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

@@ -116,6 +116,7 @@ describe('ArtifactAPIBridge', () => {
 
     const artifact: ArtifactData = {
       id: 'test-artifact-123',
+      artifactId: 'test-artifact',
       content: '<div>Full artifact</div>',
       mimeType: 'html',
       title: 'Full Artifact Test',

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

@@ -83,7 +83,7 @@ export const ArtifactAPIBridge = ({
 }: {
   pushMessage: (message: Message) => void;
 }) => {
-  const { openArtifact, closeArtifact, toggleFullscreen, state } =
+  const { openArtifact, closeArtifact, toggleFullscreen, state, registerArtifact } =
     useArtifact();
   
   const apiRef = useRef<any>(null);
@@ -115,12 +115,14 @@ export const ArtifactAPIBridge = ({
           title?: string
         ) => {
           const autoTitle = title || getTitleFromMimeType(mimeType);
+          const artifactId = `api-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
 
           // Create the artifact object
           const artifact: ArtifactData = {
-            id: `artifact-${Date.now()}-${Math.random()
-              .toString(36)
-              .substr(2, 9)}`,
+            id: `artifact-ui-${artifactId}`,
+            artifactId,
             content,
             mimeType,
             title: autoTitle,
@@ -131,8 +133,8 @@ export const ArtifactAPIBridge = ({
           // Create wrapped message text for artifact detection
           // Don't reassign content parameter - use a new variable
           let messageText = content;
-          if (!messageText.includes('<output class="memori-artifact">')) {
-            messageText = `<output class="memori-artifact" data-mimetype="${mimeType}" data-title="${autoTitle}">${content}</output>`;
+          if (!messageText.includes('class="memori-artifact"')) {
+            messageText = `<output class="memori-artifact" data-action="create" data-artifact-id="${artifactId}" data-mimetype="${mimeType}" data-title="${autoTitle}">${content}</output>`;
           }
 
           //we have to push in the history the artifact as message
@@ -153,6 +155,7 @@ export const ArtifactAPIBridge = ({
             placeUncertaintyKm: undefined,
           });
 
+          registerArtifact(artifact);
           // Open the artifact immediately
           openArtifact(artifact);
         },
@@ -169,15 +172,17 @@ export const ArtifactAPIBridge = ({
           const title =
             outputElement.getAttribute('data-title') ||
             getTitleFromMimeType(mimeType);
+          const artifactId =
+            outputElement.getAttribute('data-artifact-id') ||
+            `api-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
           // Nascondi l'elemento originale
           outputElement.style.display = 'none';
           outputElement.setAttribute('data-memori-processed', 'true');
 
           const artifact: ArtifactData = {
-            id: `artifact-${Date.now()}-${Math.random()
-              .toString(36)
-              .substr(2, 9)}`,
+            id: `artifact-ui-${artifactId}`,
+            artifactId,
             content,
             mimeType,
             title,
@@ -188,8 +193,8 @@ export const ArtifactAPIBridge = ({
           // Create wrapped message text for artifact detection
           // Don't reassign content - use a new variable
           let messageText = content;
-          if (!messageText.includes('<output class="memori-artifact">')) {
-            messageText = `<output class="memori-artifact" data-mimetype="${mimeType}" data-title="${title}">${content}</output>`;
+          if (!messageText.includes('class="memori-artifact"')) {
+            messageText = `<output class="memori-artifact" data-action="create" data-artifact-id="${artifactId}" data-mimetype="${mimeType}" data-title="${title}">${content}</output>`;
           }
 
           pushMessage({
@@ -209,10 +214,11 @@ export const ArtifactAPIBridge = ({
             placeUncertaintyKm: undefined,
           });
 
+          registerArtifact(artifact);
           // Open the artifact immediately
           openArtifact(artifact);
 
-          return artifact.id;
+          return artifact.artifactId;
         },
 
         /**
@@ -294,7 +300,7 @@ export const ArtifactAPIBridge = ({
         delete (window as any).MemoriArtifactAPI;
       }
     };
-  }, [openArtifact, closeArtifact, toggleFullscreen, state, pushMessage]);
+  }, [openArtifact, closeArtifact, toggleFullscreen, state, pushMessage, registerArtifact]);
 
   return null;
 };

package/src/components/MemoriArtifactSystem/utils/applyEdits.test.ts

@@ -0,0 +1,85 @@
+import { applyEdits, parseEdits } from './applyEdits';
+
+describe('applyEdits', () => {
+  it('applies an exact string replacement', () => {
+    const result = applyEdits('Hello 🌰 World', [{ old: '🌰', new: '🥜' }]);
+    expect(result.content).toBe('Hello 🥜 World');
+    expect(result.appliedCount).toBe(1);
+    expect(result.failedEdits).toEqual([]);
+  });
+
+  it('replaces only the first occurrence', () => {
+    const result = applyEdits('aa bb aa', [{ old: 'aa', new: 'XX' }]);
+    expect(result.content).toBe('XX bb aa');
+    expect(result.appliedCount).toBe(1);
+  });
+
+  it('applies multiple edits sequentially', () => {
+    const result = applyEdits('<h1>Title</h1><p>Body</p>', [
+      { old: 'Title', new: 'Heading' },
+      { old: 'Body', new: 'Content' },
+    ]);
+    expect(result.content).toBe('<h1>Heading</h1><p>Content</p>');
+    expect(result.appliedCount).toBe(2);
+  });
+
+  it('falls back to whitespace-tolerant matching', () => {
+    const content = '<span class="x">\n  hello   world\n</span>';
+    const result = applyEdits(content, [
+      { old: 'hello world', new: 'hi there' },
+    ]);
+    expect(result.content).toContain('hi there');
+    expect(result.appliedCount).toBe(1);
+    expect(result.failedEdits).toEqual([]);
+  });
+
+  it('collects failed edits without blocking others', () => {
+    const result = applyEdits('alpha beta', [
+      { old: 'missing', new: 'nope' },
+      { old: 'beta', new: 'gamma' },
+    ]);
+    expect(result.content).toBe('alpha gamma');
+    expect(result.appliedCount).toBe(1);
+    expect(result.failedEdits).toEqual([{ old: 'missing', new: 'nope' }]);
+  });
+
+  it('returns original content when all edits fail', () => {
+    const result = applyEdits('unchanged', [
+      { old: 'foo', new: 'bar' },
+    ]);
+    expect(result.content).toBe('unchanged');
+    expect(result.appliedCount).toBe(0);
+    expect(result.failedEdits).toHaveLength(1);
+  });
+});
+
+describe('parseEdits', () => {
+  it('parses a valid JSON edits array', () => {
+    const edits = parseEdits('[{"old": "a", "new": "b"}]');
+    expect(edits).toEqual([{ old: 'a', new: 'b' }]);
+  });
+
+  it('unescapes HTML entities before parsing', () => {
+    const edits = parseEdits(
+      '[{&quot;old&quot;: &quot;🌰&quot;, &quot;new&quot;: &quot;🥜&quot;}]'
+    );
+    expect(edits).toEqual([{ old: '🌰', new: '🥜' }]);
+  });
+
+  it('returns null for invalid JSON', () => {
+    expect(parseEdits('not json')).toBeNull();
+  });
+
+  it('returns null for non-array JSON', () => {
+    expect(parseEdits('{"old":"a","new":"b"}')).toBeNull();
+  });
+
+  it('returns null for array items missing old/new', () => {
+    expect(parseEdits('[{"foo":"bar"}]')).toBeNull();
+  });
+
+  it('returns null for empty body', () => {
+    expect(parseEdits('')).toBeNull();
+    expect(parseEdits('   ')).toBeNull();
+  });
+});

package/src/components/MemoriArtifactSystem/utils/applyEdits.ts

@@ -0,0 +1,173 @@
+import { ArtifactEdit } from '../types/artifact.types';
+
+export interface ApplyEditsResult {
+  content: string;
+  failedEdits: ArtifactEdit[];
+  appliedCount: number;
+}
+
+/**
+ * Normalize runs of whitespace to a single space for tolerant matching.
+ */
+const normalizeWhitespace = (s: string): string => s.replace(/\s+/g, ' ');
+
+/**
+ * Find the first occurrence of `needle` in `haystack` after normalizing
+ * whitespace in both, then map the match back to original haystack indices.
+ * Returns [start, end] in original string coords, or null if not found.
+ */
+const findWhitespaceTolerant = (
+  haystack: string,
+  needle: string
+): [number, number] | null => {
+  const normNeedle = normalizeWhitespace(needle.trim());
+  if (!normNeedle) return null;
+
+  // Build mapping from normalized index → original index
+  const normChars: string[] = [];
+  const normToOrig: number[] = [];
+  let lastWasSpace = false;
+
+  for (let i = 0; i < haystack.length; i++) {
+    const ch = haystack[i];
+    if (/\s/.test(ch)) {
+      if (!lastWasSpace && normChars.length > 0) {
+        normChars.push(' ');
+        normToOrig.push(i);
+        lastWasSpace = true;
+      }
+    } else {
+      normChars.push(ch);
+      normToOrig.push(i);
+      lastWasSpace = false;
+    }
+  }
+
+  // Trim trailing space from normalized form
+  while (normChars.length > 0 && normChars[normChars.length - 1] === ' ') {
+    normChars.pop();
+    normToOrig.pop();
+  }
+
+  const normHaystack = normChars.join('');
+  const idx = normHaystack.indexOf(normNeedle);
+  if (idx === -1) return null;
+
+  const startOrig = normToOrig[idx];
+  const endNormIdx = idx + normNeedle.length - 1;
+  // End is exclusive: one past the last matched original char
+  const lastOrig = normToOrig[endNormIdx];
+  // Include any trailing whitespace that was collapsed after the last char
+  let endOrig = lastOrig + 1;
+  while (endOrig < haystack.length && /\s/.test(haystack[endOrig])) {
+    // Only consume whitespace that was part of a collapsed run inside the match
+    // Stop if we've already covered the normalized span
+    break;
+  }
+
+  return [startOrig, endOrig];
+};
+
+/**
+ * Apply a list of string replacements to content.
+ * Each edit replaces the first occurrence of `old` with `new`.
+ * Exact match is tried first; whitespace-tolerant fallback second.
+ * Failed edits are collected without aborting the rest.
+ */
+export const applyEdits = (
+  content: string,
+  edits: ArtifactEdit[]
+): ApplyEditsResult => {
+  let result = content;
+  const failedEdits: ArtifactEdit[] = [];
+  let appliedCount = 0;
+
+  for (const edit of edits) {
+    if (!edit || typeof edit.old !== 'string' || typeof edit.new !== 'string') {
+      failedEdits.push(edit);
+      continue;
+    }
+
+    const exactIdx = result.indexOf(edit.old);
+    if (exactIdx !== -1) {
+      result =
+        result.slice(0, exactIdx) +
+        edit.new +
+        result.slice(exactIdx + edit.old.length);
+      appliedCount++;
+      continue;
+    }
+
+    const tolerant = findWhitespaceTolerant(result, edit.old);
+    if (tolerant) {
+      const [start, end] = tolerant;
+      result = result.slice(0, start) + edit.new + result.slice(end);
+      appliedCount++;
+      continue;
+    }
+
+    failedEdits.push(edit);
+  }
+
+  return { content: result, failedEdits, appliedCount };
+};
+
+const HTML_ENTITIES: Record<string, string> = {
+  '&quot;': '"',
+  '&#34;': '"',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+};
+
+/**
+ * Unescape common HTML entities that LLMs sometimes emit inside JSON bodies.
+ */
+const unescapeHtmlEntities = (s: string): string =>
+  s.replace(
+    /&quot;|&#34;|&apos;|&#39;|&amp;|&lt;|&gt;/g,
+    m => HTML_ENTITIES[m] ?? m
+  );
+
+const isValidEditsArray = (value: unknown): value is ArtifactEdit[] => {
+  if (!Array.isArray(value)) return false;
+  return value.every(
+    item =>
+      item &&
+      typeof item === 'object' &&
+      typeof (item as ArtifactEdit).old === 'string' &&
+      typeof (item as ArtifactEdit).new === 'string'
+  );
+};
+
+/**
+ * Parse the body of a memori-artifact update tag into an edits array.
+ * Handles valid JSON and HTML-entity-encoded JSON. Returns null on failure.
+ */
+export const parseEdits = (body: string): ArtifactEdit[] | null => {
+  if (!body || typeof body !== 'string') return null;
+
+  const trimmed = body.trim();
+  if (!trimmed) return null;
+
+  const tryParse = (raw: string): ArtifactEdit[] | null => {
+    try {
+      const parsed = JSON.parse(raw);
+      return isValidEditsArray(parsed) ? parsed : null;
+    } catch {
+      return null;
+    }
+  };
+
+  const direct = tryParse(trimmed);
+  if (direct) return direct;
+
+  const unescaped = unescapeHtmlEntities(trimmed);
+  if (unescaped !== trimmed) {
+    return tryParse(unescaped);
+  }
+
+  return null;
+};

package/src/components/MemoriWidget/MemoriWidget.css

@@ -9,7 +9,8 @@
     box-sizing: border-box;
 }
 
-.memori-widget > .memori-spin {
+.memori-widget > .memori-spin,
+.memori-widget > .memori-widget__surface > .memori-spin {
     height: calc(100vh - 50px);
 }
 
@@ -17,7 +18,8 @@
     .memori-widget {
         overflow-y: hidden;
     }
-    .memori-widget > .memori-spin {
+    .memori-widget > .memori-spin,
+    .memori-widget > .memori-widget__surface > .memori-spin {
         height: calc(100vh - 100px);
     }
 }
@@ -154,12 +156,70 @@
 }
 
 .memori.memori-widget.chat-focused .memori--powered-by,
-.memori.memori-widget.chat-focused
-    .memori-website_assistant--close-button-wrapper
-    button.memori-website_assistant--close-button {
+.memori.memori-widget.memori-layout-website_assistant.chat-focused
+    .memori-website_assistant--close-button {
     display: none;
 }
 
 .memori.memori--auto-start .memori--start-panel {
     display: none;
 }
+
+/* Close buttons (modals, drawers, popovers) — same square bordered chrome
+   as header / website-assistant / artifact-drawer IconButton.
+   @memori.ai/ui defaults these to borderless / circular. */
+.memori-modal__close,
+.memori-drawer__close,
+.memori-popover__close {
+    display: inline-flex;
+    width: var(--memori-icon-button-size, 40px);
+    min-width: var(--memori-icon-button-size, 40px);
+    height: var(--memori-icon-button-size, 40px);
+    min-height: var(--memori-icon-button-size, 40px);
+    box-sizing: border-box;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    border-radius: var(--memori-radius-box);
+    margin: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--memori-icon-button-icon, color-mix(in oklch, var(--memori-text-color, #111827) 72%, transparent));
+    transform: none;
+}
+
+.memori-popover__close {
+    block-size: var(--memori-icon-button-size, 40px);
+    inline-size: var(--memori-icon-button-size, 40px);
+}
+
+.memori-modal__close:hover,
+.memori-drawer__close:hover,
+.memori-popover__close:hover {
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
+    box-shadow: none;
+    color: var(--memori-text-color, #111827);
+}
+
+.memori-modal__close:focus-visible,
+.memori-drawer__close:focus-visible,
+.memori-popover__close:focus-visible {
+    border-color: var(--memori-primary);
+    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
+    outline: 2px solid var(--memori-primary);
+    outline-offset: var(--memori-focus-ring-offset, 2px);
+}
+
+.memori-modal__close svg,
+.memori-drawer__close svg,
+.memori-popover__close svg {
+    width: var(--memori-icon-button-icon-size, 20px);
+    height: var(--memori-icon-button-icon-size, 20px);
+}
+
+.memori-drawer__header {
+    align-items: center;
+}