@memori.ai/memori-react 8.42.0 → 8.44.0

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

@@ -13,7 +13,7 @@ import Code from '../../../icons/Code';
 import { PreviewIcon } from '../../../icons/Preview';
 import Snippet from '../../../Snippet/Snippet';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import { renderMsg } from '../../../../helpers/message';
+import { renderMsg, sanitizeMsg } from '../../../../helpers/message';
 
 const ArtifactPreview: React.FC<{
   artifact: ArtifactData;
@@ -64,7 +64,7 @@ const ArtifactPreview: React.FC<{
           <div
             className="memori-artifact-preview-text"
             dangerouslySetInnerHTML={{
-              __html: artifact.content,
+              __html: sanitizeMsg(artifact.content),
             }}
           />
         );

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

@@ -1,11 +1,30 @@
-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';
 
 interface ArtifactContextType {
   state: ArtifactSystemState;
   openArtifact: (artifact: ArtifactData) => void;
   closeArtifact: () => void;
   toggleFullscreen: () => void;
+  registerArtifact: (artifact: ArtifactData) => void;
+  applyArtifactUpdate: (
+    artifactId: string,
+    edits: ArtifactEdit[]
+  ) => ApplyUpdateResult;
 }
 
 const ArtifactContext = createContext<ArtifactContextType | null>(null);
@@ -17,26 +36,26 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
     isFullscreen: 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) => {
-    setState(() => {
-      return {
-        currentArtifact: artifact,
-        isDrawerOpen: true,
-        isFullscreen: false,
-      };
-    });
+    setState(() => ({
+      currentArtifact: artifact,
+      isDrawerOpen: true,
+      isFullscreen: false,
+    }));
   }, []);
 
   const closeArtifact = useCallback(() => {
-    setState(prev => {
-      // if (!prev.isDrawerOpen) return prev;
-      return {
-        ...prev,
-        currentArtifact: null,
-        isDrawerOpen: false,
-        isFullscreen: false,
-      };
-    });
+    setState(prev => ({
+      ...prev,
+      currentArtifact: null,
+      isDrawerOpen: false,
+      isFullscreen: false,
+    }));
   }, []);
 
   const toggleFullscreen = useCallback(() => {
@@ -46,12 +65,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,10 +10,26 @@ 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;
   isFullscreen: 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

@@ -73,7 +73,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);
@@ -105,12 +105,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,
@@ -121,8 +123,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
@@ -143,6 +145,7 @@ export const ArtifactAPIBridge = ({
             placeUncertaintyKm: undefined,
           });
 
+          registerArtifact(artifact);
           // Open the artifact immediately
           openArtifact(artifact);
         },
@@ -159,15 +162,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,
@@ -178,8 +183,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({
@@ -199,10 +204,11 @@ export const ArtifactAPIBridge = ({
             placeUncertaintyKm: undefined,
           });
 
+          registerArtifact(artifact);
           // Open the artifact immediately
           openArtifact(artifact);
 
-          return artifact.id;
+          return artifact.artifactId;
         },
 
         /**
@@ -283,7 +289,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/UploadButton/UploadButton.stories.tsx

@@ -121,7 +121,7 @@ A unified upload button that supports both images and documents with the followi
 ## Limits
 
 - **Images**: Maximum 5 images, 15MB per file, formats: .jpg, .jpeg, .png
-- **Documents**: Maximum 5 documents, 15MB per file, formats: .pdf, .txt, .json, .xlsx, .csv, .md
+- **Documents**: Maximum 5 documents, 25MB per file; PDF, Office, OpenDocument, HTML, structured text, and plain-text formats
 - **Content**: Document content is limited to 300,000 characters per document (truncated if exceeded)
         `,
       },
@@ -206,7 +206,7 @@ const Template: Story<UploadButtonProps> = (args) => {
             <li>Drag and drop files anywhere in this area</li>
             <li>Press <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Cmd+V</kbd> / <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Ctrl+V</kbd> to open file chooser</li>
             <li>Paste files from clipboard using <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Cmd+V</kbd> / <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Ctrl+V</kbd></li>
-            <li>Upload both images (.jpg, .jpeg, .png) and documents (.pdf, .txt, .json, .xlsx, .csv, .md)</li>
+            <li>Upload images and supported PDF, Office, OpenDocument, HTML, or text documents</li>
           </ul>
         </div>
       </div>