@memori.ai/memori-react 8.45.1 → 8.45.4

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

@@ -1,355 +0,0 @@
-/**
- * ArtifactPreview CSS Styles
- * Following the project's design system and CSS patterns
- */
-
-.memori-artifact-preview {
-  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;
-}
-
-.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);
-}
-
-/* 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);
-}
-
-.memori-artifact-tab-content {
-  display: none;
-  overflow: hidden;
-  min-height: 0;
-  flex: 1;
-}
-
-.memori-artifact-tab-content--active {
-  display: flex;
-  flex-direction: column;
-}
-
-/* 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);
-}
-
-.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;
-}
-
-/* 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);
-}
-
-.memori-artifact-preview-iframe {
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  flex: 1;
-  border: none;
-  border-radius: var(--memori-border-radius, 6px);
-}
-
-/* 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;
-}
-
-.memori-artifact-preview-markdown h1,
-.memori-artifact-preview-markdown h2,
-.memori-artifact-preview-markdown h3,
-.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;
-}
-
-.memori-artifact-preview-css-content h3 {
-  margin: 0 0 1rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.memori-artifact-preview-markdown h1:first-child,
-.memori-artifact-preview-markdown h2:first-child,
-.memori-artifact-preview-markdown h3:first-child {
-  margin-top: 0;
-}
-
-.memori-artifact-preview-markdown p {
-  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;
-}
-
-.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;
-}
-
-.memori-artifact-preview-markdown pre code {
-  padding: 0;
-  background: none;
-}
-
-.memori-artifact-preview-markdown a {
-  color: var(--memori-primary);
-  text-decoration: none;
-}
-
-.memori-artifact-preview-markdown a:hover {
-  text-decoration: underline;
-}
-
-/* SVG Preview */
-.memori-artifact-preview-svg {
-  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);
-}
-
-/* CSS Preview */
-.memori-artifact-preview-css {
-  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);
-}
-
-.memori-artifact-preview-css-content {
-  padding: 1rem;
-  color: var(--memori-text-color, #333);
-  font-family: var(--memori-font-family);
-  line-height: 1.6;
-}
-
-.memori-artifact-preview-css-content p {
-  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;
-}
-
-.memori-artifact-preview-css-container {
-  padding: 1rem;
-  border-radius: var(--memori-border-radius, 4px);
-  margin: 1rem 0;
-  background: var(--memori-inner-bg, #f1f3f4);
-}
-
-/* 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;
-}
-
-/* Syntax Highlighting */
-.memori-artifact--comment {
-  color: #6a737d;
-  font-style: italic;
-}
-
-.memori-artifact--keyword {
-  color: #d73a49;
-  font-weight: 600;
-}
-
-.memori-artifact--string {
-  color: #032f62;
-}
-
-.memori-artifact--number {
-  color: #005cc5;
-  font-weight: 500;
-}
-
-.memori-artifact--function {
-  color: #6f42c1;
-  font-weight: 600;
-}
-
-.memori-artifact--operator {
-  color: #d73a49;
-}
-
-.memori-artifact--property {
-  color: #005cc5;
-}
-
-.memori-artifact--selector {
-  color: #6f42c1;
-  font-weight: 600;
-}
-
-.memori-artifact--tag {
-  color: #22863a;
-  font-weight: 600;
-}
-
-.memori-artifact--line-number {
-  margin-right: 1rem;
-  color: #6a737d;
-  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-code,
-  .memori-artifact-preview-content {
-    margin: 0.5rem;
-  }
-
-  .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;
-  }
-}
-
-/* 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);
-  }
-}

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

@@ -1,160 +0,0 @@
-/**
- * ArtifactPreview Component
- * Displays artifact content with tabs for code and preview
- * Following the project's component patterns and design system
- */
-
-import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
-import Button from '../../../ui/Button';
-import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
-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, sanitizeMsg } from '../../../../helpers/message';
-
-const ArtifactPreview: React.FC<{
-  artifact: ArtifactData;
-  activeTab: ArtifactTab;
-}> = ({ artifact, activeTab }) => {
-  const { t } = useTranslation();
-
-  /**
-   * Render preview content based on MIME type
-   */
-  const renderPreview = useCallback(() => {
-    switch (artifact.mimeType) {
-      case 'html':
-        return (
-          <iframe
-            className="memori-artifact-preview-iframe"
-            srcDoc={artifact.content}
-            style={{
-              width: '100%',
-              height: '100%',
-              border: 'none',
-              borderRadius: '6px',
-            }}
-            title={`${artifact.title} Preview`}
-            scrolling="auto"
-          />
-        );
-
-      case 'markdown': {
-        const { text: renderedMarkdown } = renderMsg(
-          artifact.content,
-          false,
-          'Reasoning...',
-          false
-        );
-        return (
-          <div
-            className="memori-artifact-preview-markdown"
-            dangerouslySetInnerHTML={{
-              __html: renderedMarkdown,
-            }}
-          />
-        );
-      }
-        
-      default:
-        return (
-          <div
-            className="memori-artifact-preview-text"
-            dangerouslySetInnerHTML={{
-              __html: sanitizeMsg(artifact.content),
-            }}
-          />
-        );
-    }
-  }, [artifact]);
-
-  const mapArtifactMimeTypeToSnippetMimeType = useCallback(
-    (mimeType: string) => {
-      switch (mimeType) {
-        case 'javascript':
-          return 'text/javascript';
-        case 'typescript':
-          return 'text/ecmascript';
-        case 'html':
-          return 'application/xml';
-        case 'css':
-          return 'text/css';
-        case 'json':
-          return 'application/json';
-        case 'python':
-          return 'text/x-python';
-        case 'bash':
-          return 'application/x-sh';
-        case 'cpp':
-        case 'csharp':
-          return 'text/x-c++src';
-        case 'php':
-          return 'application/x-php';
-        case 'sql':
-          return 'text/x-sql';
-        case 'ruby':
-          return 'text/x-ruby';
-        default:
-          return 'text/plain';
-      }
-    },
-    []
-  );
-
-  const hasPreview =
-    artifact.mimeType === 'html' || artifact.mimeType === 'markdown' || artifact.mimeType === 'svg';
-
-  return (
-    <div className="memori-artifact-preview">
-
-      {/* Content */}
-      <div className="memori-artifact-content">
-        {/* Code Tab */}
-        <div
-          className={cx('memori-artifact-tab-content', {
-            'memori-artifact-tab-content--active':
-              activeTab === 'code' || !hasPreview,
-          })}
-        >
-          <div className="memori-artifact-code">
-            <Snippet
-              showCopyButton={false}
-              medium={
-                {
-                  mediumID: artifact.id,
-                  mimeType: mapArtifactMimeTypeToSnippetMimeType(
-                    artifact.mimeType
-                  ),
-                  content: artifact.content,
-                  title: artifact.title,
-                  creationTimestamp: artifact.timestamp.toISOString(),
-                  creationName: 'System',
-                  lastChangeTimestamp: artifact.timestamp.toISOString(),
-                  lastChangeName: 'System',
-                } as Medium
-              }
-            />
-          </div>
-        </div>
-
-        {/* Preview Tab */}
-        {hasPreview && (
-          <div
-            className={cx('memori-artifact-tab-content', {
-              'memori-artifact-tab-content--active': activeTab === 'preview',
-            })}
-          >
-            <div className="memori-artifact-preview-content">
-              {renderPreview()}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ArtifactPreview;

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

@@ -1,167 +0,0 @@
-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);
-
-export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
-  const [state, setState] = useState<ArtifactSystemState>({
-    currentArtifact: null,
-    isDrawerOpen: false,
-    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(() => ({
-      currentArtifact: artifact,
-      isDrawerOpen: true,
-      isFullscreen: false,
-    }));
-  }, []);
-
-  const closeArtifact = useCallback(() => {
-    setState(prev => ({
-      ...prev,
-      currentArtifact: null,
-      isDrawerOpen: false,
-      isFullscreen: false,
-    }));
-  }, []);
-
-  const toggleFullscreen = useCallback(() => {
-    setState(prev => ({
-      ...prev,
-      isFullscreen: !prev.isFullscreen,
-    }));
-  }, []);
-
-  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}>
-      {children}
-    </ArtifactContext.Provider>
-  );
-};
-
-export const useArtifact = () => {
-  const context = useContext(ArtifactContext);
-  if (!context) {
-    throw new Error('useArtifact must be used within ArtifactProvider');
-  }
-  return context;
-};

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

@@ -1,35 +0,0 @@
-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;
-  timestamp: Date;
-  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';