@memori.ai/memori-react 9.0.0-alpha.9 → 9.0.0-rc.0

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.css

@@ -1,283 +0,0 @@
-/**
- * ArtifactHandler CSS Styles
- * Following the project's design system and CSS patterns
- */
-
-/* Align width with ChatBubble when rendered in chat (same container + max-width) */
-.memori-artifact-handler-spacer {
-    width: 40px;
-    min-width: 40px;
-    flex-shrink: 0;
-    margin-right: var(--memori-spacing-sm);
-}
-
-button.memori-artifact-handler {
-    width: 100%;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-}
-
-.memori-artifact-handler {
-    display: flex;
-    min-width: 300px;
-    align-items: center;
-    justify-content: space-between;
-    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    padding: 1.5rem;
-    border: var(--memori-border) solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
-    animation: fadeInUp 0.5s ease forwards;
-    backdrop-filter: blur(4px);
-    background: var(--memori-secondary-background);
-    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
-    cursor: pointer;
-    gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    opacity: 0;
-    transform: translateY(10px);
-    transition: all 0.3s ease;
-}
-
-.memori-artifact-handler-wrapper {
-    width: 100%;
-}
-
-.memori-artifact-handler-wrapper > .memori-artifact-handler {
-    width: 100%;
-    max-width: 100%;
-}
-
-.memori-artifact-handler:hover {
-    border-color: var(--memori-primary);
-    /* background: #f8fafc; */
-    /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); */
-    transform: translateY(-2px);
-}
-
-.memori-artifact-handler--active {
-    border-color: var(--memori-primary);
-    background: linear-gradient(135deg, var(--memori-primary) 0%, #764ba2 100%);
-    box-shadow: 0 4px 16px rgba(130, 70, 175, 0.3);
-    color: var(--memori-primary-content);
-}
-
-.memori-artifact-handler--active:hover {
-    box-shadow: 0 6px 20px rgba(130, 70, 175, 0.4);
-    transform: translateY(-2px);
-}
-
-.memori-artifact-handler-content {
-    display: flex;
-    align-items: center;
-    padding: var(--memori-spacing-lg);
-    gap: var(--memori-spacing-sm);
-}
-
-.memori-artifact-handler-icon {
-    flex-shrink: 0;
-    font-size: var(--memori-text-size-heading-large);
-    line-height: 1;
-}
-
-.memori-artifact-handler-icon svg {
-    display: block;
-    width: 1em;
-    height: 1em;
-}
-
-.memori-artifact-handler-toggle svg {
-    width: 16px;
-    height: 16px;
-    stroke-width: 2;
-}
-
-/* Black SVG glyphs → white when widget is in dark theme (see styles.css [data-theme='dark']) */
-[data-theme='dark'] .memori-artifact-handler-icon svg {
-    filter: brightness(0) invert(1);
-}
-
-.memori-artifact-handler-info {
-    min-width: 0;
-    flex: 1;
-}
-
-.memori-artifact-handler-action-icon {
-    width: 24px;
-    height: 24px;
-    flex-shrink: 0;
-    font-size: var(--memori-text-size-heading-large);
-    line-height: 1;
-}
-
-.memori-artifact-handler-title {
-    overflow: hidden;
-    margin-bottom: var(--memori-spacing-xs);
-    color: inherit;
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-semibold);
-    line-height: 1.3;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-artifact-handler-subtitle {
-    overflow: hidden;
-    margin-bottom: var(--memori-spacing-xs);
-    color: inherit;
-    font-size: 0.75rem;
-    opacity: 0.7;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-artifact-handler-meta {
-    display: flex;
-    flex-wrap: wrap;
-    font-size: 0.625rem;
-    gap: var(--memori-spacing-sm);
-    opacity: 0.6;
-}
-
-.memori-artifact-handler-type {
-    padding: 0.125rem 0.375rem;
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.1);
-    color: inherit;
-    font-weight: var(--memori-text-weight-medium);
-    letter-spacing: 0.025em;
-    text-transform: uppercase;
-}
-
-.memori-artifact-handler-custom-title {
-    overflow: hidden;
-    max-width: 120px;
-    padding: 0.125rem 0.375rem;
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.1);
-    color: inherit;
-    font-style: italic;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-artifact-handler--active .memori-artifact-handler-type,
-.memori-artifact-handler--active .memori-artifact-handler-custom-title {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.memori-artifact-handler-actions {
-    flex-shrink: 0;
-}
-
-.memori-artifact-handler-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.375rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.05);
-    color: inherit;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.memori-artifact-handler-toggle:hover {
-    background: rgba(0, 0, 0, 0.1);
-    transform: scale(1.05);
-}
-
-.memori-artifact-handler--active .memori-artifact-handler-toggle {
-    border-color: rgba(255, 255, 255, 0.3);
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.memori-artifact-handler-toggle:focus {
-    outline: 2px solid var(--memori-primary);
-    outline-offset: 2px;
-}
-
-.memori-artifact-handler-toggle:focus:not(:focus-visible) {
-    outline: none;
-}
-
-.memori-artifact-handler--active .memori-artifact-handler-toggle:hover {
-    background: rgba(255, 255, 255, 0.3);
-}
-
-/* Animation */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .memori-artifact-handler {
-        min-width: 0;
-        margin: 0.5rem 0;
-    }
-
-    .memori-artifact-handler-content {
-        padding: 0.75rem;
-        gap: var(--memori-spacing-sm);
-    }
-
-    .memori-artifact-handler-icon {
-        font-size: var(--memori-text-size-heading);
-    }
-
-    .memori-artifact-handler-title {
-        font-size: 0.8125rem;
-    }
-
-    .memori-artifact-handler-subtitle {
-        font-size: 0.6875rem;
-    }
-
-    .memori-artifact-handler-meta {
-        font-size: 0.5625rem;
-    }
-
-    .memori-artifact-handler-custom-title {
-        max-width: 80px;
-    }
-}
-
-/* Dark Mode Support */
-@media (prefers-color-scheme: dark) {
-    .memori-artifact-handler {
-        /* background: rgba(26, 26, 26, 0.95); */
-        border-color: var(--memori-border-color);
-    }
-
-    .memori-artifact-handler-type,
-    .memori-artifact-handler-custom-title {
-        background: rgba(255, 255, 255, 0.1);
-    }
-
-    .memori-artifact-handler-toggle {
-        border-color: rgba(255, 255, 255, 0.1);
-        background: rgba(255, 255, 255, 0.05);
-    }
-
-    .memori-artifact-handler-toggle:hover {
-        background: rgba(255, 255, 255, 0.1);
-    }
-}
-
-/* Focus States for Accessibility */
-.memori-artifact-handler:focus {
-    outline: 2px solid var(--memori-primary);
-    outline-offset: 2px;
-}
-
-.memori-artifact-handler:focus:not(:focus-visible) {
-    outline: none;
-}

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

@@ -1,397 +0,0 @@
-import React, { useEffect, useMemo, useCallback, memo } from 'react';
-import { useArtifact } from '../../context/ArtifactContext';
-import { ArtifactData } from '../../types/artifact.types';
-import {
-  ChevronRight,
-  ChevronDown,
-  ChevronLeft,
-  ChevronUp,
-} from 'lucide-react';
-import ArtifactDrawer from '../ArtifactDrawer/ArtifactDrawer';
-import { Message } from '@memori.ai/memori-api-client/dist/types';
-import { stripReasoningTags } from '../../../../helpers/utils';
-import CssIcon from '../../../../icons/artifacts/cssIcon';
-import DocumentIcon from '../../../../icons/artifacts/DocumentIcon';
-import HtmlIcon from '../../../../icons/artifacts/HtmlIcon';
-import JavascriptIcon from '../../../../icons/artifacts/JavascriptIcon';
-import MarkdownIcon from '../../../../icons/artifacts/MarkdownIcon';
-import PythonIcon from '../../../../icons/artifacts/PythonIcon';
-import SvgIcon from '../../../../icons/artifacts/SvgIcon';
-import XmlIcon from '../../../../icons/artifacts/XmlIcon';
-
-// Event type for artifact creation
-type ArtifactCreatedEvent = CustomEvent<{
-  artifact: ArtifactData;
-  message: Message;
-}>;
-
-interface ArtifactHandlerProps {
-  isChatlogPanel?: boolean;
-  message: Message;
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const formatBytes = (bytes: number): string => {
-  if (bytes === 0) return '0 Bytes';
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  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);
-};
-
-/**
- * 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"
- */
-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]);
-};
-
-/**
- * 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)
- */
-const detectArtifacts = (
-  text: string,
-  isFromUser: boolean,
-  messageKey: string
-): ArtifactData[] => {
-  if (!text || isFromUser) return [];
-
-  const cleaned = stripReasoningTags(text);
-  const artifacts: ArtifactData[] = [];
-  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;
-
-    // Only process tags that carry the required class
-    if (!hasMemoriArtifactClass(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;
-        }
-      }
-    }
-
-    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
-    );
-    const mimeType = mimeTypeMatch?.[1]?.trim() || 'text/plain';
-
-    const dataTitleMatch = fullOpenTag.match(
-      /data-title\s*=\s*["']([^"']+)["']/i
-    );
-    const htmlTitleMatch = content.match(/<title>([^<]+)<\/title>/i);
-    const title =
-      dataTitleMatch?.[1] ||
-      htmlTitleMatch?.[1] ||
-      `${mimeType.toUpperCase()} Artifact`;
-
-    artifactNum++;
-
-    // Stable ID: does not change across re-renders for the same content
-    const stableId = `artifact-${messageKey}-${artifactNum}-${hashContent(
-      content
-    )}`;
-
-    artifacts.push({
-      id: stableId,
-      content,
-      mimeType,
-      title,
-      timestamp: new Date(),
-      size: content.length,
-    });
-
-    // Advance past the closing tag (or EOF)
-    searchFrom =
-      closeStart === cleaned.length
-        ? cleaned.length
-        : closeStart + '</output>'.length;
-  }
-
-  return artifacts;
-};
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
-  isChatlogPanel = false,
-  message,
-}) => {
-  const { openArtifact, state, closeArtifact } = useArtifact();
-
-  /**
-   * 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]
-  );
-
-  // Function to dispatch artifact created event
-  const dispatchArtifactCreatedEvent = useCallback(
-    (artifact: ArtifactData) => {
-      const event: ArtifactCreatedEvent = new CustomEvent('artifactCreated', {
-        detail: {
-          artifact,
-          message,
-        },
-      });
-      document.dispatchEvent(event);
-    },
-    [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);
-    if (primary.length > 0) return primary;
-    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).
-   */
-  useEffect(() => {
-    if (!messageText || artifacts.length === 0) return;
-
-    artifacts.forEach(artifact => dispatchArtifactCreatedEvent(artifact));
-
-    if (!isChatlogPanel) {
-      const timer = setTimeout(
-        () => openArtifact(artifacts[0], { isChatLogPanel: false }),
-        100
-      );
-      return () => clearTimeout(timer);
-    }
-  }, [
-    messageKey,
-    messageText,
-    artifacts,
-    dispatchArtifactCreatedEvent,
-    isChatlogPanel,
-    openArtifact,
-  ]);
-
-  const handleArtifactClick = useCallback(
-    (artifact: ArtifactData) => {
-      if (state.isDrawerOpen && state.currentArtifact?.id === artifact.id) {
-        closeArtifact();
-      } else {
-        openArtifact(artifact, { isChatLogPanel: isChatlogPanel });
-      }
-    },
-    [state.isDrawerOpen, state.currentArtifact?.id, closeArtifact, openArtifact]
-  );
-
-  const getIconForMimeType = useCallback((mimeType: string): React.ReactElement => {
-    const m = mimeType.toLowerCase();
-    const iconProps = { 'aria-hidden': true as const };
-    if (m.includes('html')) return <HtmlIcon {...iconProps} />;
-    if (m.includes('markdown')) return <MarkdownIcon {...iconProps} />;
-    if (m.includes('javascript') || m.includes('typescript'))
-      return <JavascriptIcon {...iconProps} />;
-    if (m.includes('python')) return <PythonIcon {...iconProps} />;
-    if (m.includes('json')) return <DocumentIcon {...iconProps} />;
-    if (m.includes('css')) return <CssIcon {...iconProps} />;
-    if (m.includes('xml')) return <XmlIcon {...iconProps} />;
-    if (m.includes('svg')) return <SvgIcon {...iconProps} />;
-    return <DocumentIcon {...iconProps} />;
-  }, []);
-
-  if (artifacts.length === 0) return null;
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-      {artifacts.map(artifact => {
-        const isSelected =
-          state.isDrawerOpen && state.currentArtifact?.id === artifact.id;
-
-        return (
-          <React.Fragment key={artifact.id}>
-            <button
-              type="button"
-              className={`memori-artifact-handler${
-                isSelected ? ' memori-artifact-handler--selected' : ''
-              }`}
-              onClick={() => handleArtifactClick(artifact)}
-              aria-pressed={isSelected}
-              aria-label={artifact.title}
-              style={
-                isSelected
-                  ? {
-                      border: '2px solid var(--memori-border-primary)',
-                      // boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
-                    }
-                  : undefined
-              }
-            >
-              <div className="memori-artifact-handler-icon">
-                {getIconForMimeType(artifact.mimeType)}
-              </div>
-              <div className="memori-artifact-handler-info">
-                <div className="memori-artifact-handler-title">
-                  {artifact.title}
-                </div>
-                <div className="memori-artifact-handler-meta">
-                  {artifact.mimeType} • {formatBytes(artifact.size || 0)}
-                </div>
-              </div>
-              <div className="memori-artifact-handler-action">
-                {isChatlogPanel ? (
-                  state.isDrawerOpen &&
-                  state.currentArtifact?.id === artifact.id ? (
-                    <ChevronUp className="memori-artifact-handler-action-icon" />
-                  ) : (
-                    <ChevronDown className="memori-artifact-handler-action-icon" />
-                  )
-                ) : state.isDrawerOpen &&
-                  state.currentArtifact?.id === artifact.id ? (
-                  <ChevronLeft className="memori-artifact-handler-action-icon" />
-                ) : (
-                  <ChevronRight className="memori-artifact-handler-action-icon" />
-                )}
-              </div>
-            </button>
-
-            {/* Render inline drawer only for chatlog-panel mode.
-                In layout-column mode the drawer is mounted by the page layout. */}
-            {isChatlogPanel && state.isDrawerOpen &&
-              state.currentArtifact?.id === artifact.id && (
-                <ArtifactDrawer isChatLogPanel={true} />
-              )}
-          </React.Fragment>
-        );
-      })}
-    </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 || '';
-
-  return (
-    prev.isChatlogPanel === next.isChatlogPanel &&
-    prevText === nextText &&
-    prev.message.fromUser === next.message.fromUser &&
-    prev.message.timestamp === next.message.timestamp
-  );
-});
-
-export default MemoizedArtifactHandler;