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

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

@@ -0,0 +1,308 @@
+/**
+ * ArtifactDrawer Component
+ * Displays artifacts as a drawer on mobile and as a split panel on web
+ * Following the project's design system and responsive patterns
+ */
+
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog, Transition } from '@headlessui/react';
+import cx from 'classnames';
+import Button from '../../../ui/Button';
+import Close from '../../../icons/Close';
+import ArtifactActions from '../ArtifactActions/ArtifactActions';
+import ArtifactPreview from '../ArtifactPreview/ArtifactPreview';
+import ArtifactHistory from '../ArtifactHistory/ArtifactHistory';
+import { ArtifactTab } from '../../types/artifact.types';
+import { useArtifactSystemContext } from '../../context/ArtifactSystemContext';
+
+const ArtifactDrawer: React.FC = () => {
+  const { actions, state } = useArtifactSystemContext();
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<ArtifactTab>('preview');
+  const [showHistory, setShowHistory] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  /**
+   * Handle window resize to detect mobile/desktop changes
+   */
+  useEffect(() => {
+    const handleResize = () => {
+      const newIsMobile = window.innerWidth < 769;
+      if (newIsMobile !== isMobile) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsMobile(newIsMobile);
+          setIsAnimating(false);
+        }, 150);
+      } else {
+        setIsMobile(newIsMobile);
+      }
+    };
+
+    // Set initial value
+    handleResize();
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isMobile]);
+
+  /**
+   * Handle tab change
+   */
+  const handleTabChange = useCallback((tab: ArtifactTab) => {
+    setActiveTab(tab);
+  }, []);
+
+  /**
+   * Handle copy action
+   */
+  const handleCopy = useCallback(async () => {
+    if (!state.currentArtifact) return;
+
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(state.currentArtifact.content);
+      } else {
+        // Fallback for older browsers
+        const textArea = document.createElement('textarea');
+        textArea.value = state.currentArtifact.content;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+      }
+    } catch (error) {
+      console.error('Copy failed:', error);
+      throw error;
+    }
+  }, [state.currentArtifact]);
+
+  /**
+   * Handle download action
+   */
+  const handleDownload = useCallback(() => {
+    // This will be handled by the ArtifactActions component
+    console.log('Download triggered');
+  }, []);
+
+  /**
+   * Handle print action
+   */
+  const handlePrint = useCallback(() => {
+    // This will be handled by the ArtifactActions component
+    console.log('Print triggered');
+  }, []);
+
+  /**
+   * Handle external open action
+   */
+  const handleOpenExternal = useCallback(() => {
+    // This will be handled by the ArtifactActions component
+    console.log('External open triggered');
+  }, []);
+
+  /**
+   * Handle fullscreen toggle
+   */
+  const handleToggleFullscreen = useCallback(() => {
+    if (actions.toggleFullscreen) {
+      actions.toggleFullscreen();
+    }
+  }, [actions.toggleFullscreen]);
+
+  /**
+   * Handle close with escape key
+   */
+  const handleClose = useCallback(() => {
+    setIsAnimating(true);
+    setTimeout(() => {
+      actions.closeDrawer();
+      setIsAnimating(false);
+    }, 200);
+  }, [actions.closeDrawer]);
+
+  /**
+   * Toggle history panel
+   */
+  const toggleHistory = useCallback(() => {
+    setShowHistory(prev => !prev);
+  }, []);
+
+
+  if (!state.currentArtifact) {
+    return null;
+  }
+
+  // Render mobile drawer
+  if (isMobile) {
+    return (
+      <Transition show={state.isDrawerOpen}>
+        {state.isDrawerOpen && (
+          <Dialog
+            open={state.isDrawerOpen}
+            onClose={handleClose}
+            className="memori-artifact-drawer memori-artifact-drawer--mobile"
+            as="div"
+          >
+            <div
+              className="memori-artifact-drawer--backdrop"
+              onClick={handleClose}
+            />
+            <div className="memori-artifact-drawer--panel memori-artifact-drawer--panel-mobile">
+              {/* Header */}
+              <div className="memori-artifact-drawer--header">
+                <div className="memori-artifact-drawer--header-content">
+                  <h2 className="memori-artifact-drawer--title">
+                    {state.currentArtifact.title}
+                  </h2>
+                  <p className="memori-artifact-drawer--subtitle">
+                    {state.currentArtifact.customTitle ||
+                      `${state.currentArtifact.typeInfo.name} Content`}
+                  </p>
+                  <div className="memori-artifact-drawer--meta">
+                    <span className="memori-artifact-drawer--meta-item">
+                      {t('artifact.type', 'Type')}: {state.currentArtifact.typeInfo.name}
+                    </span>
+                    <span className="memori-artifact-drawer--meta-item">
+                      {t('artifact.size', 'Size')}: {formatBytes(state.currentArtifact.size)}
+                    </span>
+                    <span className="memori-artifact-drawer--meta-item">
+                      {t('artifact.generated', 'Generated')}:{' '}
+                      {formatTimestamp(state.currentArtifact.timestamp)}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="memori-artifact-drawer--header-actions">
+                  <ArtifactActions
+                    artifact={state.currentArtifact}
+                    onCopy={handleCopy}
+                    onDownload={handleDownload}
+                    onPrint={handlePrint}
+                    onOpenExternal={handleOpenExternal}
+                    onToggleFullscreen={handleToggleFullscreen}
+                    isFullscreen={state.isFullscreen}
+                  />
+                </div>
+
+                <Button
+                  onClick={handleClose}
+                  className="memori-artifact-drawer--close"
+                  ghost
+                  title={t('artifact.close', 'Close') || 'Close'}
+                >
+                  <Close className="memori-artifact-drawer--close-icon" />
+                </Button>
+              </div>
+
+              {/* Content */}
+              <div className="memori-artifact-drawer--content">
+                <div className="memori-artifact-drawer--main">
+                  <ArtifactPreview
+                    artifact={state.currentArtifact}
+                    activeTab={activeTab}
+                    onTabChange={handleTabChange}
+                  />
+                </div>
+              </div>
+            </div>
+          </Dialog>
+        )}
+      </Transition>
+    );
+  }
+
+  // Render web split panel
+  return (
+    <div className="memori-artifact-panel">
+      {/* Header */}
+      <div className="memori-artifact-panel--header">
+        <div className="memori-artifact-panel--header-content">
+          <h2 className="memori-artifact-panel--title">
+            {state.currentArtifact.title}
+          </h2>
+          <p className="memori-artifact-panel--subtitle">
+            {state.currentArtifact.customTitle ||
+              `${state.currentArtifact.typeInfo.name} Content`}
+          </p>
+          <div className="memori-artifact-panel--meta">
+            <span className="memori-artifact-panel--meta-item">
+              {t('artifact.type', 'Type')}: {state.currentArtifact.typeInfo.name}
+            </span>
+            <span className="memori-artifact-panel--meta-item">
+              {t('artifact.size', 'Size')}: {formatBytes(state.currentArtifact.size)}
+            </span>
+            <span className="memori-artifact-panel--meta-item">
+              {t('artifact.generated', 'Generated')}:{' '}
+              {formatTimestamp(state.currentArtifact.timestamp)}
+            </span>
+          </div>
+        </div>
+
+        <div className="memori-artifact-panel--header-actions">
+          <ArtifactActions
+            artifact={state.currentArtifact}
+            onCopy={handleCopy}
+            onDownload={handleDownload}
+            onPrint={handlePrint}
+            onOpenExternal={handleOpenExternal}
+            onToggleFullscreen={handleToggleFullscreen}
+            isFullscreen={state.isFullscreen}
+          />
+        </div>
+
+        <Button
+          onClick={handleClose}
+          className="memori-artifact-panel--close"
+          ghost
+          title={t('artifact.close', 'Close') || 'Close'}
+        >
+          <Close className="memori-artifact-panel--close-icon" />
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="memori-artifact-panel--content">
+        <div className="memori-artifact-panel--main">
+          <ArtifactPreview
+            artifact={state.currentArtifact}
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Format file size in human readable format
+ */
+function 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];
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTimestamp(timestamp: Date): string {
+  return timestamp.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export default ArtifactDrawer;

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

@@ -0,0 +1,238 @@
+/**
+ * ArtifactHandler CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-handler {
+  border: 1px solid var(--memori-button-border-color, #e9ecef);
+  border-radius: var(--memori-border-radius, 12px);
+  margin: 0.75rem 0;
+  animation: fadeInUp 0.5s ease forwards;
+  backdrop-filter: blur(4px);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+}
+
+.memori-artifact-handler:hover {
+  border-color: var(--memori-primary);
+  background: rgba(130, 70, 175, 0.05);
+  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-text, #fff);
+}
+
+.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: 1rem;
+  gap: 0.75rem;
+}
+
+.memori-artifact-handler-icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.memori-artifact-handler-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.memori-artifact-handler-title {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-handler-subtitle {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  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: 0.5rem;
+  opacity: 0.6;
+}
+
+.memori-artifact-handler-type {
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  color: inherit;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+.memori-artifact-handler-custom-title {
+  overflow: hidden;
+  max-width: 120px;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  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-border-radius, 6px);
+  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);
+}
+
+.memori-artifact-handler-toggle svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+}
+
+/* Animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .memori-artifact-handler {
+    margin: 0.5rem 0;
+  }
+
+  .memori-artifact-handler-content {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .memori-artifact-handler-icon {
+    font-size: 1.25rem;
+  }
+
+  .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-button-border-color, #404040);
+  }
+
+  .memori-artifact-handler:hover {
+    background: rgba(130, 70, 175, 0.1);
+    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
+  }
+
+  .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;
+}