@memori.ai/memori-react 8.2.0 → 8.4.0-rc.0

package/src/components/Chat/Chat.tsx

@@ -20,6 +20,11 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import ChatInputs from '../ChatInputs/ChatInputs';
 import Typing from '../Typing/Typing';
 import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
+import {
+  ArtifactHandler,
+  useArtifactSystemContext,
+} from '../MemoriArtifactSystem';
+import { useArtifactDetector } from '../MemoriArtifactSystem/hooks/useArtifactSystem';
 
 export interface Props {
   memori: Memori;
@@ -122,6 +127,9 @@ const Chat: React.FC<Props> = ({
   isHistoryView = false,
   showFunctionCache = false,
 }) => {
+
+  const { state, actions, config } = useArtifactSystemContext();
+  const { hasArtifacts } = useArtifactDetector();
   const scrollToBottom = () => {
     if (isHistoryView) return;
     setTimeout(() => {
@@ -166,6 +174,8 @@ const Chat: React.FC<Props> = ({
     }
   };
 
+  console.log(history);
+
   return (
     <div
       className={cx('memori-chat--wrapper', {
@@ -298,7 +308,8 @@ const Chat: React.FC<Props> = ({
                 media={[
                   // Filter out HTML and plain text media items from the message
                   ...(message?.media?.filter(
-                    m => m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
+                    m =>
+                      m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
                   ) || []),
 
                   // Extract document attachments that are embedded in the message text
@@ -310,14 +321,16 @@ const Chat: React.FC<Props> = ({
                     // <document_attachment filename="name.ext" type="mime/type">content</document_attachment>
                     const documentAttachmentRegex =
                       /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
-                    
+
                     const attachments: (Medium & { type?: string })[] = [];
                     let match;
 
                     // Find all document attachments in the text
-                    while ((match = documentAttachmentRegex.exec(text)) !== null) {
+                    while (
+                      (match = documentAttachmentRegex.exec(text)) !== null
+                    ) {
                       const [, filename, type, content] = match;
-                      
+
                       // Create a Medium object for each attachment with:
                       // - Unique ID using timestamp and random string
                       // - Empty URL since content is embedded
@@ -348,6 +361,16 @@ const Chat: React.FC<Props> = ({
                 customMediaRenderer={customMediaRenderer}
                 fromUser={message.fromUser}
               />
+
+                <ArtifactHandler
+                  onArtifactCreated={artifact => {
+                    actions.selectArtifact(artifact);
+                  }}
+                  artifacts={state.history}
+                  config={config}
+                  actions={actions}
+                  message={message}
+                />
             </React.Fragment>
           ))}
 

package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css

@@ -0,0 +1,160 @@
+/**
+ * ArtifactActions CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.memori-artifact-action-btn {
+  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-action-icon{
+  width: 16px;
+  height: 16px;
+}
+
+.memori-artifact-action-btn:focus {
+  outline: 2px solid var(--memori-primary);
+  outline-offset: 2px;
+}
+
+.memori-artifact-action-btn:active {
+  transform: translateY(0);
+}
+
+.memori-artifact-action-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  transform: none !important;
+}
+
+.memori-artifact-action-btn:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.memori-artifact-action-btn:disabled:hover {
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+.memori-artifact-action-btn:hover:not(.memori-artifact-action-btn--active) {
+  background: rgba(0, 123, 255, 0.05);
+  color: var(--memori-text-color, #333);
+}
+
+.memori-artifact-action-btn--active {
+  background: var(--memori-chat-bubble-bg, #fff);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: var(--memori-primary);
+}
+
+.memori-artifact-action-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Fullscreen Button Special Styling */
+.memori-artifact-fullscreen-btn {
+  position: relative;
+}
+
+.memori-artifact-fullscreen-btn--active {
+  border-color: var(--memori-primary) !important;
+  background: var(--memori-primary) !important;
+  color: var(--memori-primary-text) !important;
+}
+
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .memori-artifact-actions {
+    gap: 0.25rem;
+  }
+
+  .memori-artifact-action-btn {
+    min-width: 42px;
+    min-height: auto;
+    justify-content: center;
+  }
+
+  .memori-artifact-action-text {
+    display: none;
+  }
+
+  .memori-artifact-fullscreen-btn{
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .memori-artifact-actions {
+    flex-flow: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .memori-artifact-action-btn {
+    min-width: 0;
+    max-width: 3rem;
+    flex: 1;
+  }
+}
+
+/* Loading State */
+
+/* Icon Sizing */
+.memori-artifact-action-btn .memori-button--icon {
+  font-size: 1rem;
+  line-height: 1;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .memori-artifact-action-btn:hover {
+    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Animation for Copy Feedback */
+@keyframes copyFeedback {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.memori-artifact-action-btn.copied {
+  animation: copyFeedback 0.3s ease;
+}
+
+/* Tooltip Support */
+.memori-artifact-action-btn[title] {
+  position: relative;
+}
+

package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.tsx

@@ -0,0 +1,278 @@
+/**
+ * ArtifactActions Component
+ * Provides action buttons for artifact operations (copy, download, print, etc.)
+ * Following the project's component patterns and design system
+ */
+
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import Button from '../../../ui/Button';
+import { ArtifactActionsProps } from '../../types/artifact.types';
+import Download from '../../../icons/Download';
+import Link from '../../../icons/Link';
+import Fullscreen from '../../../icons/Fullscreen';
+import FullscreenExit from '../../../icons/FullscreenExit';
+import PrintIcon from '../../../icons/Print';
+import Copy from '../../../icons/Copy';
+
+const ArtifactActions: React.FC<ArtifactActionsProps> = ({
+  artifact,
+  onCopy,
+  onDownload,
+  onPrint,
+  onOpenExternal,
+  onToggleFullscreen,
+  isFullscreen,
+  loading = false,
+}) => {
+  const { t } = useTranslation();
+  const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
+
+  /**
+   * Handle copy action with feedback
+   */
+  const handleCopy = useCallback(async () => {
+    try {
+      await onCopy();
+      setCopyFeedback('✅ Copied!');
+      setTimeout(() => setCopyFeedback(null), 2000);
+    } catch (error) {
+      setCopyFeedback('❌ Error');
+      setTimeout(() => setCopyFeedback(null), 2000);
+    }
+  }, [onCopy]);
+
+  /**
+   * Get file extension for download
+   */
+  const getFileExtension = useCallback((mimeType: string): string => {
+    const extensions: Record<string, string> = {
+      html: 'html',
+      json: 'json',
+      markdown: 'md',
+      css: 'css',
+      javascript: 'js',
+      typescript: 'ts',
+      svg: 'svg',
+      xml: 'xml',
+      text: 'txt',
+      python: 'py',
+      java: 'java',
+      cpp: 'cpp',
+      csharp: 'cs',
+      php: 'php',
+      ruby: 'rb',
+      go: 'go',
+      rust: 'rs',
+      yaml: 'yml',
+      sql: 'sql',
+    };
+    return extensions[mimeType] || 'txt';
+  }, []);
+
+  /**
+   * Get MIME type string for downloads
+   */
+  const getMimeTypeString = useCallback((mimeType: string): string => {
+    const mimeTypes: Record<string, string> = {
+      html: 'text/html',
+      json: 'application/json',
+      markdown: 'text/markdown',
+      css: 'text/css',
+      javascript: 'text/javascript',
+      typescript: 'text/typescript',
+      svg: 'image/svg+xml',
+      xml: 'text/xml',
+      text: 'text/plain',
+      python: 'text/x-python',
+      java: 'text/x-java',
+      cpp: 'text/x-c++',
+      csharp: 'text/x-csharp',
+      php: 'text/x-php',
+      ruby: 'text/x-ruby',
+      go: 'text/x-go',
+      rust: 'text/x-rust',
+      yaml: 'text/yaml',
+      sql: 'text/x-sql',
+    };
+    return mimeTypes[mimeType] || 'text/plain';
+  }, []);
+
+  /**
+   * Handle download action
+   */
+  const handleDownload = useCallback(() => {
+    try {
+      const extension = getFileExtension(artifact.mimeType);
+      const filename = `artifact-${Date.now()}.${extension}`;
+      const mimeType = getMimeTypeString(artifact.mimeType);
+      
+      const blob = new Blob([artifact.content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      
+      onDownload();
+    } catch (error) {
+      console.error('Download failed:', error);
+    }
+  }, [artifact, getFileExtension, getMimeTypeString, onDownload]);
+
+  /**
+   * Handle print action
+   */
+  const handlePrint = useCallback(() => {
+    try {
+      const printWindow = window.open('', '_blank');
+      if (!printWindow) {
+        alert('Popup blocked! Please enable popups to print the artifact.');
+        return;
+      }
+
+      let printContent: string;
+      if (artifact.mimeType === 'html') {
+        printContent = artifact.content;
+      } else {
+        printContent = `
+          <!DOCTYPE html>
+          <html>
+          <head>
+            <title>Artifact - ${artifact.mimeType.toUpperCase()}</title>
+            <style>
+              body { 
+                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
+                white-space: pre-wrap; 
+                margin: 20px; 
+                line-height: 1.4;
+              }
+              @media print { 
+                body { margin: 0; } 
+              }
+            </style>
+          </head>
+          <body>${artifact.content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</body>
+          </html>
+        `;
+      }
+
+      printWindow.document.write(printContent);
+      printWindow.document.close();
+
+      setTimeout(() => {
+        printWindow.print();
+        printWindow.close();
+      }, 500);
+
+      onPrint();
+    } catch (error) {
+      console.error('Print failed:', error);
+    }
+  }, [artifact, onPrint]);
+
+  /**
+   * Handle external open action
+   */
+  const handleOpenExternal = useCallback(() => {
+    try {
+      const mimeType = getMimeTypeString(artifact.mimeType);
+      const blob = new Blob([artifact.content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      
+      const externalWindow = window.open(url, '_blank');
+      if (!externalWindow) {
+        alert('Popup blocked! Please enable popups to open the artifact in a new window.');
+        return;
+      }
+
+      // Cleanup URL after a delay
+      setTimeout(() => {
+        URL.revokeObjectURL(url);
+      }, 60000);
+
+      onOpenExternal();
+    } catch (error) {
+      console.error('External open failed:', error);
+    }
+  }, [artifact, getMimeTypeString, onOpenExternal]);
+
+  return (
+    <div className="memori-artifact-actions">
+      <Button
+        onClick={handleCopy}
+        disabled={loading}
+        title={t('artifact.copy', 'Copy code') || 'Copy code'}
+        className="memori-artifact-action-btn"
+        ghost
+      >
+      <Copy className="memori-artifact-action-icon" />
+        <span className="memori-artifact-action-text">
+          {copyFeedback || t('artifact.copy', 'Copy')}
+        </span>
+      </Button>
+
+      <Button
+        onClick={handleDownload}
+        disabled={loading}
+        title={t('artifact.download', 'Download artifact') || 'Download artifact'}
+        className="memori-artifact-action-btn"
+        ghost
+      >
+        <Download className="memori-artifact-action-icon" />
+        <span className="memori-artifact-action-text">
+          {t('artifact.download', 'Download')}
+        </span>
+      </Button>
+
+      <Button
+        onClick={handlePrint}
+        disabled={loading}
+        title={t('artifact.print', 'Print artifact') || 'Print artifact'}
+        className="memori-artifact-action-btn"
+        ghost
+      >
+        <PrintIcon className="memori-artifact-action-icon" />
+        <span className="memori-artifact-action-text">
+          {t('artifact.print', 'Print')}
+        </span>
+      </Button>
+
+      <Button
+        onClick={handleOpenExternal}
+        disabled={loading}
+        title={t('artifact.external', 'Open in new window') || 'Open in new window'}
+        className="memori-artifact-action-btn"
+        ghost
+      >
+        <Link className="memori-artifact-action-icon" />
+        <span className="memori-artifact-action-text">
+          {t('artifact.external', 'External')}
+        </span>
+      </Button>
+
+      <Button
+        onClick={onToggleFullscreen}
+        disabled={loading}
+        title={isFullscreen ? (t('artifact.exitFullscreen', 'Exit fullscreen') || 'Exit fullscreen') : (t('artifact.fullscreen', 'Fullscreen') || 'Fullscreen')}
+        className={cx('memori-artifact-action-btn', 'memori-artifact-fullscreen-btn', {
+          'memori-artifact-fullscreen-btn--active': isFullscreen,
+        })}
+        primary={isFullscreen}
+        ghost={!isFullscreen}
+      >
+        {isFullscreen ? <Fullscreen className="memori-artifact-action-icon" /> : <FullscreenExit className="memori-artifact-action-icon" />}
+        <span className="memori-artifact-action-text">
+          {isFullscreen ? t('artifact.exitFullscreen', 'Exit') : t('artifact.fullscreen', 'Full')}
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+export default ArtifactActions;