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

package/src/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.tsx

@@ -0,0 +1,178 @@
+/**
+ * ArtifactHistory Component
+ * Displays a list of artifact history entries with selection and management
+ * Following the project's component patterns and design system
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import Button from '../../../ui/Button';
+import { ArtifactHistoryProps, ArtifactData } from '../../types/artifact.types';
+import Close from '../../../icons/Close';
+import Clear from '../../../icons/Clear';
+import ArrowUp from '../../../icons/ArrowUp';
+
+const ArtifactHistory: React.FC<ArtifactHistoryProps> = ({
+  history,
+  onSelectArtifact,
+  onClearHistory,
+  maxItems = 50,
+}) => {
+  const { t } = useTranslation();
+
+  /**
+   * Format file size in human readable format
+   */
+  const formatBytes = useCallback((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];
+  }, []);
+
+  /**
+   * Format timestamp for display
+   */
+  const formatTimestamp = useCallback((timestamp: Date): string => {
+    return timestamp.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }, []);
+
+  /**
+   * Handle artifact selection
+   */
+  const handleSelectArtifact = useCallback((artifact: ArtifactData) => {
+    onSelectArtifact(artifact);
+  }, [onSelectArtifact]);
+
+  /**
+   * Handle clear history
+   */
+  const handleClearHistory = useCallback(() => {
+    if (onClearHistory && window.confirm(t('artifact.clearHistoryConfirm', 'Are you sure you want to clear all artifact history?') || 'Are you sure you want to clear all artifact history?')) {
+      onClearHistory();
+    }
+  }, [onClearHistory, t]);
+
+  /**
+   * Get limited history items
+   */
+  const limitedHistory = useMemo(() => {
+    return history.slice(0, maxItems);
+  }, [history, maxItems]);
+
+  /**
+   * Check if there are more items than the limit
+   */
+  const hasMoreItems = useMemo(() => {
+    return history.length > maxItems;
+  }, [history.length, maxItems]);
+
+  if (history.length === 0) {
+    return (
+      <div className="memori-artifact-history">
+        <div className="memori-artifact-history-header">
+          <h3 className="memori-artifact-history-title">
+            {t('artifact.history', 'Artifact History')}
+          </h3>
+        </div>
+        <div className="memori-artifact-history-empty">
+          <div className="memori-artifact-history-empty-icon">📄</div>
+          <p className="memori-artifact-history-empty-text">
+            {t('artifact.noHistory', 'No artifacts yet')}
+          </p>
+          <p className="memori-artifact-history-empty-subtext">
+            {t('artifact.noHistorySubtext', 'Artifacts will appear here when generated')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="memori-artifact-history">
+      <div className="memori-artifact-history-header">
+        <h3 className="memori-artifact-history-title">
+          {t('artifact.history', 'Artifact History')}
+        </h3>
+        <div className="memori-artifact-history-actions">
+          {onClearHistory && (
+            <Button
+              onClick={handleClearHistory}
+              className="memori-artifact-history-clear-btn"
+              ghost
+              title={t('artifact.clearHistory', 'Clear history') || 'Clear history'}
+            >
+              <Clear className="memori-artifact-history-clear-btn-icon" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="memori-artifact-history-list">
+        {limitedHistory.map((artifact) => (
+          <div
+            key={artifact.id}
+            className={cx('memori-artifact-history-item', {
+              'memori-artifact-history-item--active': artifact.isActive,
+            })}
+            onClick={() => handleSelectArtifact(artifact)}
+          >
+            <div className="memori-artifact-history-item-content">
+              <div className="memori-artifact-history-item-icon">
+                {artifact.typeInfo.icon}
+              </div>
+              
+              <div className="memori-artifact-history-item-info">
+                <div className="memori-artifact-history-item-title">
+                  {artifact.title}
+                </div>
+                <div className="memori-artifact-history-item-subtitle">
+                  {t('artifact.generatedAt', 'Generated at')} {formatTimestamp(artifact.timestamp)} • {formatBytes(artifact.size)}
+                </div>
+                <div className="memori-artifact-history-item-meta">
+                  <span className="memori-artifact-history-item-type">
+                    {artifact.typeInfo.name}
+                  </span>
+                  {artifact.customTitle && (
+                    <span className="memori-artifact-history-item-custom-title">
+                      {artifact.customTitle}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="memori-artifact-history-item-actions">
+                <Button
+                  className="memori-artifact-history-item-toggle"
+                  ghost
+                  title={artifact.isActive ? (t('artifact.close', 'Close') || 'Close') : (t('artifact.open', 'Open') || 'Open')}
+                >
+                  {artifact.isActive ? (
+                    <Close className="memori-artifact-history-item-toggle-icon" />
+                  ) : (
+                    <ArrowUp className="memori-artifact-history-item-toggle-icon" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {hasMoreItems && (
+          <div className="memori-artifact-history-more">
+            <p className="memori-artifact-history-more-text">
+              {t('artifact.moreItems', `+${history.length - maxItems} more items`)}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ArtifactHistory;

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

@@ -0,0 +1,343 @@
+/**
+ * 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:hover:not(.memori-artifact-tab--active) {
+  background: rgba(0, 123, 255, 0.05);
+  color: var(--memori-text-color, #333);
+} */
+
+.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: hidden;
+  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;
+  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);
+}
+
+/* Markdown Preview */
+.memori-artifact-preview-markdown {
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: var(--memori-font-family);
+  line-height: 1.6;
+}
+
+.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-button-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

@@ -0,0 +1,190 @@
+/**
+ * ArtifactPreview Component
+ * Displays artifact content with tabs for code and preview
+ * Following the project's component patterns and design system
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import Button from '../../../ui/Button';
+import { ArtifactMimeType, ArtifactPreviewProps, ArtifactTab, SUPPORTED_MIME_TYPES } 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';
+
+const ArtifactPreview: React.FC<ArtifactPreviewProps> = ({
+  artifact,
+  activeTab,
+  onTabChange,
+}) => {
+  const { t } = useTranslation();
+
+  /**
+   * Handle tab switching
+   */
+  const handleTabChange = useCallback((tab: ArtifactTab) => {
+    onTabChange(tab);
+  }, [onTabChange]);
+  /**
+   * Render preview content based on MIME type
+   */
+  const renderPreview = useCallback(() => {
+    switch (artifact.mimeType) {
+      case 'html':
+        return (
+          <iframe
+            srcDoc={artifact.content}
+            style={{
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              borderRadius: '6px',
+            }}
+            title={`${artifact.title} Preview`}
+          />
+        );
+
+      case 'markdown':
+        return (
+          <div 
+            className="memori-artifact-preview-markdown"
+            dangerouslySetInnerHTML={{ __html: renderMarkdown(artifact.content) }}
+          />
+        );
+
+      case 'svg':
+        return (
+          <div 
+            className="memori-artifact-preview-svg"
+            dangerouslySetInnerHTML={{ __html: artifact.content }}
+          />
+        );
+
+      case 'css':
+        return (
+          <div className="memori-artifact-preview-css">
+            <div className="memori-artifact-preview-css-demo">
+              <style dangerouslySetInnerHTML={{ __html: artifact.content }} />
+              <div className="memori-artifact-preview-css-content">
+                <h3>CSS Preview</h3>
+                <p>This is an example of text to see the CSS effect.</p>
+                <button>Example Button</button>
+                <div className="memori-artifact-preview-css-container">
+                  Example Container
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      default:
+        return (
+          <div className="memori-artifact-preview-text">
+            <pre>{artifact.content}</pre>
+          </div>
+        );
+    }
+  }, [artifact]);
+
+  /**
+   * Basic markdown rendering
+   */
+  const renderMarkdown = useCallback((markdown: string): string => {
+    return markdown
+      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+      .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
+      .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
+      .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/`(.*?)`/g, '<code>$1</code>')
+      .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+      .replace(/\n/g, '<br>');
+  }, []);
+
+  /**
+   * Check if preview is available for this artifact type
+   */
+  const hasPreview = useMemo(() => {
+    return artifact.typeInfo.hasPreview;
+  }, [artifact.typeInfo.hasPreview]);
+
+  const mapArtifactMimeType = useCallback((mimeType: ArtifactMimeType) => {
+    return SUPPORTED_MIME_TYPES[mimeType as keyof typeof SUPPORTED_MIME_TYPES].mimeType;
+  }, []);
+
+  return (
+    <div className="memori-artifact-preview">
+      {/* Tabs */}
+      {hasPreview && (
+        <div className="memori-artifact-tabs">
+          <Button
+            onClick={() => handleTabChange('code')}
+            className={cx('memori-artifact-tab', {
+              'memori-artifact-tab--active': activeTab === 'code',
+            })}
+            ghost
+          >
+           <Code className="memori-artifact-tab-icon" />
+           <span className="memori-artifact-tab-text">{t('artifact.code', 'Code')}</span>
+          </Button>
+          <Button
+            onClick={() => handleTabChange('preview')}
+            className={cx('memori-artifact-tab', {
+              'memori-artifact-tab--active': activeTab === 'preview',
+            })}
+            ghost
+          >
+            <PreviewIcon className="memori-artifact-tab-icon" />
+            <span className="memori-artifact-tab-text">{t('artifact.preview', 'Preview')}</span>
+          </Button>
+        </div>
+      )}
+
+      {/* 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 
+            // preview={true}
+            medium={{
+              mediumID: artifact.id,
+              mimeType: mapArtifactMimeType(artifact.mimeType as ArtifactMimeType),
+              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;