@memori.ai/memori-react 8.42.0 → 8.44.0

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '8.42.0';
+export const version = '8.44.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.42.0",
+  "version": "8.44.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -299,7 +299,7 @@
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",
-    "dompurify": "^3.4.12",
+    "dompurify": "^3.4.13",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
     "katex": "^0.16.11",

package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts

@@ -138,4 +138,4 @@ export const DEFAULT_CONFIG: AnimationConfig = {
 export const EMOTION_SMOOTHING = 0.3;
 export const VISEME_SMOOTHING = 0.5;
 /** Multiplier applied to emotion morph target values before clamping (1 = raw mapping). */
-export const EMOTION_INTENSITY = 2.5;
+export const EMOTION_INTENSITY = 1.5;

package/src/components/Chat/Chat.tsx

@@ -619,6 +619,7 @@ const Chat: React.FC<Props> = ({
           setSendOnEnter={setSendOnEnter}
           client={client}
           sessionID={sessionID}
+          baseUrl={baseUrl}
           showUpload={showUpload}
           attachmentsMenuOpen={attachmentsMenuOpen}
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}

package/src/components/ChatInputs/ChatInputs.tsx

@@ -35,6 +35,7 @@ export interface Props {
   isTyping?: boolean;
   sessionID?: string;
   memoriID?: string;
+  baseUrl?: string;
   client?: ReturnType<typeof memoriApiClient>;
   onTextareaExpanded?: (expanded: boolean) => void;
   /** Override total document payload limit (character count). */
@@ -70,6 +71,7 @@ const ChatInputs: React.FC<Props> = ({
   sessionID,
   authToken,
   memoriID,
+  baseUrl,
   client,
   onTextareaExpanded,
   maxTotalMessagePayload,
@@ -367,6 +369,7 @@ ${text}
                   authToken={authToken}
                   client={client}
                   sessionID={sessionID}
+                  baseUrl={baseUrl}
                   isMediaAccepted={dialogState?.acceptsMedia || false}
                   setDocumentPreviewFiles={setDocumentPreviewFiles}
                   documentPreviewFiles={documentPreviewFiles}

package/src/components/FilePreview/FilePreview.stories.tsx

@@ -23,7 +23,6 @@ const meta: Meta = {
 
 type Props = {
   onUpload: (text: string) => void;
-  convertapiToken: string;
 };
 
 export default meta;
@@ -55,12 +54,10 @@ const Template: Story<Props> = args => {
 export const Default = Template.bind({});
 Default.args = {
   onUpload: () => {},
-  convertapiToken: '',
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   onUpload: () => {},
-  convertapiToken: '',
   disabled: true,
 };

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -378,6 +378,7 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
                         timestamp: new Date(),
                         size: 0,
                         id: '',
+                        artifactId: '',
                       })}
                       disabled={false}
                       className="memori-artifact-action-btn"

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx

@@ -1,6 +1,13 @@
-import React, { useEffect, useState, useMemo, useCallback, memo } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+  memo,
+  useRef,
+} from 'react';
 import { useArtifact } from '../../context/ArtifactContext';
-import { ArtifactData } from '../../types/artifact.types';
+import { ArtifactData, ArtifactEdit } from '../../types/artifact.types';
 import ChevronRight from '../../../icons/ChevronRight';
 import ArtifactDrawer from '../ArtifactDrawer/ArtifactDrawer';
 import ChevronDown from '../../../icons/ChevronDown';
@@ -8,8 +15,9 @@ import ChevronLeft from '../../../icons/ChevronLeft';
 import ChevronUp from '../../../icons/ChevronUp';
 import { Message } from '@memori.ai/memori-api-client/dist/types';
 import { stripReasoningTags } from '../../../../helpers/utils';
+import { parseEdits } from '../../utils/applyEdits';
+import { useTranslation } from 'react-i18next';
 
-// Event type for artifact creation
 type ArtifactCreatedEvent = CustomEvent<{
   artifact: ArtifactData;
   message: Message;
@@ -20,6 +28,16 @@ interface ArtifactHandlerProps {
   message: Message;
 }
 
+interface DetectedUpdate {
+  artifactId: string;
+  edits: ArtifactEdit[];
+}
+
+interface FailedUpdate {
+  artifactId: string;
+  reason: 'not-found' | 'no-match' | 'invalid';
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -32,48 +50,75 @@ const formatBytes = (bytes: number): string => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
 
-/**
- * Lightweight deterministic hash of the first 200 chars of a string.
- * Used to produce stable artifact IDs that survive re-renders.
- */
-const hashContent = (str: string): string => {
-  let hash = 0;
-  const len = Math.min(str.length, 200);
-  for (let i = 0; i < len; i++) {
-    hash = (hash << 5) - hash + str.charCodeAt(i);
-    hash |= 0; // Convert to 32-bit int
-  }
-  return Math.abs(hash).toString(36);
+const CLASS_ATTR_RE = /class\s*=\s*["']([^"']*)["']/i;
+const DATA_ACTION_RE = /data-action\s*=\s*["']([^"']+)["']/i;
+
+const getClassList = (openingTag: string): string[] => {
+  const m = openingTag.match(CLASS_ATTR_RE);
+  if (!m) return [];
+  return m[1].split(/\s+/).filter(Boolean);
+};
+
+const getDataAction = (openingTag: string): string | null => {
+  const m = openingTag.match(DATA_ACTION_RE);
+  return m?.[1]?.trim().toLowerCase() || null;
+};
+
+/** True for create tags: class memori-artifact, action create/absent (not update). */
+const isCreateArtifactTag = (openingTag: string): boolean => {
+  const classes = getClassList(openingTag);
+  if (classes.includes('memori-artifact-update')) return false;
+  if (!classes.includes('memori-artifact')) return false;
+  const action = getDataAction(openingTag);
+  return action === null || action === 'create';
 };
 
 /**
- * Returns true when the `class` attribute value of an opening tag contains
- * the word "memori-artifact" as a whole word (handles multiple classes).
- *
- * Examples that match:
- *   class="memori-artifact"
- *   class="memori-artifact extra-class"
- *   class="foo memori-artifact"
- *   class='memori-artifact'
- *   class = "memori-artifact extra"
+ * True for update tags:
+ * - preferred: class="memori-artifact" data-action="update"
+ * - legacy: class="memori-artifact-update"
  */
-const CLASS_ATTR_RE = /class\s*=\s*["']([^"']*)["']/i;
-const hasMemoriArtifactClass = (openingTag: string): boolean => {
-  const m = openingTag.match(CLASS_ATTR_RE);
-  if (!m) return false;
-  // \b word-boundary ensures we don't match "foo-memori-artifact-bar"
-  return /\bmemori-artifact\b/.test(m[1]);
+const isUpdateArtifactTag = (openingTag: string): boolean => {
+  const classes = getClassList(openingTag);
+  if (classes.includes('memori-artifact-update')) return true;
+  if (!classes.includes('memori-artifact')) return false;
+  return getDataAction(openingTag) === 'update';
+};
+
+const findMatchingOutputClose = (
+  cleaned: string,
+  openEnd: number
+): number => {
+  let depth = 1;
+  let pos = openEnd;
+  let closeStart = -1;
+
+  while (pos < cleaned.length && depth > 0) {
+    const nextOpen = cleaned.indexOf('<output', pos);
+    const nextClose = cleaned.indexOf('</output>', pos);
+
+    if (nextClose === -1) {
+      return cleaned.length;
+    }
+
+    if (nextOpen !== -1 && nextOpen < nextClose) {
+      depth++;
+      pos = nextOpen + '<output'.length;
+    } else {
+      depth--;
+      if (depth === 0) {
+        closeStart = nextClose;
+      } else {
+        pos = nextClose + '</output>'.length;
+      }
+    }
+  }
+
+  return closeStart;
 };
 
 /**
- * Parser-style artifact detector.
- *
- * Replaces the previous single-regex approach with a depth-tracking loop so
- * that:
- *  - Multiple CSS classes are handled correctly  (e.g. class="memori-artifact foo")
- *  - Nested / self-contained <output> tags inside the content don't truncate it
- *  - Unclosed tags are gracefully skipped
- *  - IDs are stable across re-renders (derived from message + content hash)
+ * Detect create artifacts (class="memori-artifact", data-action create/absent).
  */
 const detectArtifacts = (
   text: string,
@@ -87,66 +132,29 @@ const detectArtifacts = (
   let searchFrom = 0;
   let artifactNum = 0;
 
-  // Regex that matches any <output …> opening tag (capturing the full tag)
   const OPEN_TAG_RE = /<output\b([^>]*)>/gi;
 
   while (searchFrom < cleaned.length) {
-    // Find the next <output …> opening tag from the current position
     OPEN_TAG_RE.lastIndex = searchFrom;
     const openMatch = OPEN_TAG_RE.exec(cleaned);
     if (!openMatch) break;
 
-    const fullOpenTag = openMatch[0]; // e.g. <output class="memori-artifact" data-mimetype="text/html">
-    const openStart = openMatch.index;
-    const openEnd = openStart + fullOpenTag.length;
+    const fullOpenTag = openMatch[0];
+    const openEnd = openMatch.index + fullOpenTag.length;
 
-    // Only process tags that carry the required class
-    if (!hasMemoriArtifactClass(fullOpenTag)) {
+    if (!isCreateArtifactTag(fullOpenTag)) {
       searchFrom = openEnd;
       continue;
     }
 
-    // Depth-tracking scan to find the matching </output>
-    let depth = 1;
-    let pos = openEnd;
-    let closeStart = -1;
-
-    while (pos < cleaned.length && depth > 0) {
-      const nextOpen = cleaned.indexOf('<output', pos);
-      const nextClose = cleaned.indexOf('</output>', pos);
-
-      if (nextClose === -1) {
-        // No closing tag found — treat everything until EOF as content
-        // (handles streaming / partial messages)
-        closeStart = cleaned.length;
-        depth = 0;
-        break;
-      }
-
-      if (nextOpen !== -1 && nextOpen < nextClose) {
-        // There's another opening tag before the next closing tag → go deeper
-        depth++;
-        pos = nextOpen + '<output'.length;
-      } else {
-        // Found a closing tag
-        depth--;
-        if (depth === 0) {
-          closeStart = nextClose;
-        } else {
-          pos = nextClose + '</output>'.length;
-        }
-      }
-    }
-
+    const closeStart = findMatchingOutputClose(cleaned, openEnd);
     if (closeStart === -1) {
-      // Malformed — skip past this opening tag and continue
       searchFrom = openEnd;
       continue;
     }
 
     const content = cleaned.slice(openEnd, closeStart).trim();
 
-    // Extract metadata from the opening tag
     const mimeTypeMatch = fullOpenTag.match(
       /data-mimetype\s*=\s*["']([^"']+)["']/i
     );
@@ -163,13 +171,16 @@ const detectArtifacts = (
 
     artifactNum++;
 
-    // Stable ID: does not change across re-renders for the same content
-    const stableId = `artifact-${messageKey}-${artifactNum}-${hashContent(
-      content
-    )}`;
+    const dataArtifactIdMatch = fullOpenTag.match(
+      /data-artifact-id\s*=\s*["']([^"']+)["']/i
+    );
+    const artifactId =
+      dataArtifactIdMatch?.[1]?.trim() ||
+      `artifact-${messageKey}-${artifactNum}`;
 
     artifacts.push({
-      id: stableId,
+      id: `artifact-ui-${artifactId}`,
+      artifactId,
       content,
       mimeType,
       title,
@@ -177,7 +188,6 @@ const detectArtifacts = (
       size: content.length,
     });
 
-    // Advance past the closing tag (or EOF)
     searchFrom =
       closeStart === cleaned.length
         ? cleaned.length
@@ -187,6 +197,58 @@ const detectArtifacts = (
   return artifacts;
 };
 
+/**
+ * Detect update tags and parse their JSON edit bodies.
+ */
+const detectUpdates = (
+  text: string,
+  isFromUser: boolean
+): DetectedUpdate[] => {
+  if (!text || isFromUser) return [];
+
+  const cleaned = stripReasoningTags(text);
+  const updates: DetectedUpdate[] = [];
+  let searchFrom = 0;
+
+  const OPEN_TAG_RE = /<output\b([^>]*)>/gi;
+
+  while (searchFrom < cleaned.length) {
+    OPEN_TAG_RE.lastIndex = searchFrom;
+    const openMatch = OPEN_TAG_RE.exec(cleaned);
+    if (!openMatch) break;
+
+    const fullOpenTag = openMatch[0];
+    const openEnd = openMatch.index + fullOpenTag.length;
+
+    if (!isUpdateArtifactTag(fullOpenTag)) {
+      searchFrom = openEnd;
+      continue;
+    }
+
+    const closeStart = cleaned.indexOf('</output>', openEnd);
+    const bodyEnd = closeStart === -1 ? cleaned.length : closeStart;
+    const body = cleaned.slice(openEnd, bodyEnd).trim();
+
+    const idMatch = fullOpenTag.match(
+      /data-artifact-id\s*=\s*["']([^"']+)["']/i
+    );
+    const artifactId = idMatch?.[1]?.trim();
+    const edits = parseEdits(body);
+
+    if (artifactId && edits) {
+      updates.push({ artifactId, edits });
+    } else if (artifactId) {
+      // Invalid body — still surface as a failed update for UI feedback
+      updates.push({ artifactId, edits: [] });
+    }
+
+    searchFrom =
+      closeStart === -1 ? cleaned.length : closeStart + '</output>'.length;
+  }
+
+  return updates;
+};
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -195,22 +257,21 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
   isChatlogPanel = false,
   message,
 }) => {
-  const { openArtifact, state, closeArtifact } = useArtifact();
+  const {
+    openArtifact,
+    state,
+    closeArtifact,
+    registerArtifact,
+    applyArtifactUpdate,
+  } = useArtifact();
+  const { t } = useTranslation();
 
-  /**
-   * Use raw text for artifact detection.
-   * translatedText may lose <output> tags — keep it as fallback only.
-   */
   const messageText = useMemo(() => message.text || '', [message.text]);
   const translatedMessageText = useMemo(
     () => message.translatedText || '',
     [message.translatedText]
   );
 
-  /**
-   * Stable key that identifies this specific message.
-   * Used both for effect gating and for stable artifact ID generation.
-   */
   const messageKey = useMemo(
     () => `${message.timestamp}-${message.fromUser ? '1' : '0'}`,
     [message.timestamp, message.fromUser]
@@ -226,11 +287,6 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
     [message]
   );
 
-  /**
-   * Memoised artifact list.
-   * Falls back to translatedText only when the primary text yields nothing.
-   * Both branches use the same messageKey so IDs remain stable.
-   */
   const artifacts = useMemo<ArtifactData[]>(() => {
     const fromUser = message.fromUser || false;
     const primary = detectArtifacts(messageText, fromUser, messageKey);
@@ -238,26 +294,92 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
     return detectArtifacts(translatedMessageText, fromUser, messageKey);
   }, [messageText, translatedMessageText, message.fromUser, messageKey]);
 
-  /**
-   * Auto-open the first artifact when a new message arrives.
-   *
-   * FIX: messageText is now included in the dependency array so the effect
-   * re-fires correctly if the text changes without the messageKey changing
-   * (e.g. streaming updates).
-   */
+  const detectedUpdates = useMemo<DetectedUpdate[]>(() => {
+    const fromUser = message.fromUser || false;
+    const primary = detectUpdates(messageText, fromUser);
+    if (primary.length > 0) return primary;
+    return detectUpdates(translatedMessageText, fromUser);
+  }, [messageText, translatedMessageText, message.fromUser]);
+
+  const [updateResultMap, setUpdateResultMap] = useState<
+    Record<number, ArtifactData>
+  >({});
+  const [failedUpdates, setFailedUpdates] = useState<FailedUpdate[]>([]);
+
+  const processedUpdatesRef = useRef<string>('');
+  const hasAutoOpenedRef = useRef<string>('');
+
   useEffect(() => {
-    if (!messageText || artifacts.length === 0) return;
+    if (!messageText && !translatedMessageText) return;
+
+    artifacts.forEach(artifact => {
+      registerArtifact(artifact);
+      dispatchArtifactCreatedEvent(artifact);
+    });
+
+    const updatesSignature = `${messageKey}:${detectedUpdates
+      .map(u => `${u.artifactId}:${JSON.stringify(u.edits)}`)
+      .join('|')}`;
+
+    let lastUpdated: ArtifactData | null = null;
+
+    if (
+      detectedUpdates.length > 0 &&
+      processedUpdatesRef.current !== updatesSignature
+    ) {
+      processedUpdatesRef.current = updatesSignature;
+      const nextMap: Record<number, ArtifactData> = {};
+      const nextFailed: FailedUpdate[] = [];
+
+      detectedUpdates.forEach((update, idx) => {
+        if (!update.edits.length) {
+          nextFailed.push({
+            artifactId: update.artifactId,
+            reason: 'invalid',
+          });
+          return;
+        }
 
-    artifacts.forEach(artifact => dispatchArtifactCreatedEvent(artifact));
+        const result = applyArtifactUpdate(update.artifactId, update.edits);
+        if (result.updatedArtifact) {
+          nextMap[idx] = result.updatedArtifact;
+          lastUpdated = result.updatedArtifact;
+          dispatchArtifactCreatedEvent(result.updatedArtifact);
+        } else {
+          nextFailed.push({
+            artifactId: update.artifactId,
+            reason: result.failureReason ?? 'no-match',
+          });
+        }
+      });
 
-    if (!isChatlogPanel) {
-      const timer = setTimeout(() => openArtifact(artifacts[0]), 100);
-      return () => clearTimeout(timer);
+      setUpdateResultMap(nextMap);
+      setFailedUpdates(nextFailed);
     }
+
+    if (isChatlogPanel) return;
+
+    const openTarget =
+      lastUpdated ??
+      (Object.keys(updateResultMap).length === 0 && artifacts.length > 0
+        ? artifacts[0]
+        : null);
+    if (!openTarget) return;
+
+    if (hasAutoOpenedRef.current === messageKey) return;
+    hasAutoOpenedRef.current = messageKey;
+
+    const timer = setTimeout(() => openArtifact(openTarget), 100);
+    return () => clearTimeout(timer);
   }, [
     messageKey,
     messageText,
+    translatedMessageText,
     artifacts,
+    detectedUpdates,
+    updateResultMap,
+    registerArtifact,
+    applyArtifactUpdate,
     dispatchArtifactCreatedEvent,
     isChatlogPanel,
     openArtifact,
@@ -287,7 +409,34 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
     return '📄';
   }, []);
 
-  if (artifacts.length === 0) return null;
+  const updatedLabel = t('artifact.updated') || 'updated';
+  const updateFailedLabel =
+    t('artifact.updateFailed') || 'Update could not be applied';
+  const updateFailedHint =
+    t('artifact.updateFailedHint') ||
+    'The patch did not match the current content. Ask to rewrite the artifact.';
+
+  const updateEntries = Object.entries(updateResultMap);
+  const hasCreates = artifacts.length > 0;
+  const hasUpdates = updateEntries.length > 0;
+  const hasFailed = failedUpdates.length > 0;
+
+  if (!hasCreates && !hasUpdates && !hasFailed) return null;
+
+  const renderChevron = (isSelected: boolean) => {
+    if (isChatlogPanel) {
+      return isSelected ? (
+        <ChevronUp className="memori-artifact-handler-action-icon" />
+      ) : (
+        <ChevronDown className="memori-artifact-handler-action-icon" />
+      );
+    }
+    return isSelected ? (
+      <ChevronLeft className="memori-artifact-handler-action-icon" />
+    ) : (
+      <ChevronRight className="memori-artifact-handler-action-icon" />
+    );
+  };
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
@@ -323,38 +472,80 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
                 </div>
               </div>
               <div className="memori-artifact-handler-action">
-                {isChatlogPanel ? (
-                  isSelected ? (
-                    <ChevronUp className="memori-artifact-handler-action-icon" />
-                  ) : (
-                    <ChevronDown className="memori-artifact-handler-action-icon" />
-                  )
-                ) : isSelected ? (
-                  <ChevronLeft className="memori-artifact-handler-action-icon" />
-                ) : (
-                  <ChevronRight className="memori-artifact-handler-action-icon" />
-                )}
+                {renderChevron(isSelected)}
               </div>
             </div>
 
-            {/* Render ArtifactDrawer inline when in chatlog panel */}
             {isSelected && <ArtifactDrawer isChatLogPanel={isChatlogPanel} />}
           </React.Fragment>
         );
       })}
+
+      {updateEntries.map(([, artifact]) => {
+        const isSelected =
+          state.isDrawerOpen && state.currentArtifact?.id === artifact.id;
+
+        return (
+          <React.Fragment key={artifact.id}>
+            <div
+              className={`memori-artifact-handler${
+                isSelected ? ' memori-artifact-handler--selected' : ''
+              }`}
+              onClick={() => handleArtifactClick(artifact)}
+              style={
+                isSelected
+                  ? {
+                      border: '2px solid var(--memori-primary, #3b82f6)',
+                      boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
+                    }
+                  : undefined
+              }
+            >
+              <div className="memori-artifact-handler-icon">✏️</div>
+              <div className="memori-artifact-handler-info">
+                <div className="memori-artifact-handler-title">
+                  {artifact.title} — {updatedLabel}
+                </div>
+                <div className="memori-artifact-handler-meta">
+                  {artifact.mimeType} • {formatBytes(artifact.size || 0)}
+                </div>
+              </div>
+              <div className="memori-artifact-handler-action">
+                {renderChevron(isSelected)}
+              </div>
+            </div>
+
+            {isSelected && <ArtifactDrawer isChatLogPanel={isChatlogPanel} />}
+          </React.Fragment>
+        );
+      })}
+
+      {failedUpdates.map((failed, idx) => (
+        <div
+          key={`failed-${failed.artifactId}-${idx}`}
+          className="memori-artifact-handler memori-artifact-handler--failed"
+          style={{
+            opacity: 0.85,
+            border: '1px dashed var(--memori-danger, #ef4444)',
+            cursor: 'default',
+          }}
+          role="status"
+        >
+          <div className="memori-artifact-handler-icon">⚠️</div>
+          <div className="memori-artifact-handler-info">
+            <div className="memori-artifact-handler-title">
+              {updateFailedLabel}
+            </div>
+            <div className="memori-artifact-handler-meta">
+              {failed.artifactId} • {updateFailedHint}
+            </div>
+          </div>
+        </div>
+      ))}
     </div>
   );
 };
 
-// ---------------------------------------------------------------------------
-// Memoised export
-// ---------------------------------------------------------------------------
-
-/**
- * FIX: comparison now uses the same field priority as detectArtifacts
- * (message.text first, translatedText as fallback) to avoid asymmetric
- * re-render skipping.
- */
 const MemoizedArtifactHandler = memo(ArtifactHandler, (prev, next) => {
   const prevText = prev.message.text || prev.message.translatedText || '';
   const nextText = next.message.text || next.message.translatedText || '';