@memori.ai/memori-react 6.8.1 → 6.8.4

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

@@ -0,0 +1,428 @@
+/**
+ * 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, Menu } from '@headlessui/react';
+import Button from '../../../ui/Button';
+import Close from '../../../icons/Close';
+import ArtifactActions from '../ArtifactActions/ArtifactActions';
+import { useArtifact } from '../../context/ArtifactContext';
+import ArtifactPreview from '../ArtifactPreview/ArtifactPreview';
+import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
+import cx from 'classnames';
+import Drawer from '../../../ui/Drawer';
+import Fullscreen from '../../../icons/Fullscreen';
+import FullscreenExit from '../../../icons/FullscreenExit';
+import MenuVertical from '../../../icons/MenuVertical';
+import Download from '../../../icons/Download';
+import Link from '../../../icons/Link';
+import PrintIcon from '../../../icons/Print';
+import { useCopyArtifact } from '../ArtifactActions/hooks/useCopyArtifact';
+import TabSwitch from './components/TabSwitch';
+
+const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
+  isChatLogPanel = false,
+}) => {
+  const { state, closeArtifact, toggleFullscreen } =
+    useArtifact();
+  const { t } = useTranslation();
+  const [isMobile, setIsMobile] = useState(false);
+
+  const [activeTab, setActiveTab] = useState<ArtifactTab>('preview');
+
+  /**
+   * Handle tab switching
+   */
+  const handleTabChange = useCallback(
+    (tab: ArtifactTab) => {
+      setActiveTab(tab);
+    },
+    [activeTab]
+  );
+
+  // Use copy artifact hook for dynamic actions
+  const {
+    copyState,
+    formats,
+    handleCopy: handleCopyFormat,
+    handleCopyClick,
+  } = useCopyArtifact(
+    state.currentArtifact || { content: '', mimeType: 'text/plain' },
+    () => console.log('Copy completed'),
+    () => console.log('Download completed'),
+    () => console.log('Print completed')
+  );
+
+  // Mobile detection
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  /**
+   * 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 fullscreen toggle
+   */
+  const handleToggleFullscreen = useCallback(() => {
+    if (toggleFullscreen) {
+      toggleFullscreen();
+    }
+  }, [toggleFullscreen]);
+
+  /**
+   * Handle close with escape key
+   */
+  const handleClose = useCallback(() => {
+    closeArtifact();
+  }, [closeArtifact]);
+
+  if (!state.currentArtifact) {
+    return null;
+  }
+
+  const hasPreview =
+    state.currentArtifact.mimeType === 'html' ||
+    state.currentArtifact.mimeType === 'markdown';
+
+  const ContentContainer = useCallback(
+    ({ children }: { children: React.ReactNode }) => {
+      if (isChatLogPanel) {
+        return (
+          <div
+            style={{ minHeight: '75vh', maxHeight: '75vh' }}
+            className="memori-artifact-panel"
+          >
+            {children}
+          </div>
+        );
+      } else {
+        return (
+          <Drawer
+            open={state.isDrawerOpen}
+            onClose={handleClose}
+            placement="right"
+            width="50%"
+            className={
+              state.isFullscreen
+                ? 'memori-artifact-panel-drawer-fullscreen'
+                : 'memori-artifact-panel-drawer'
+            }
+            widthMd="100%"
+            widthLg="50%"
+            closable={false}
+            animated={true}
+            showBackdrop={false}
+            preventBackdropClose={true}
+            confirmDialogTitle={
+              t('artifact.confirmDialogTitle') ||
+              'Are you sure you want to close this artifact?'
+            }
+            confirmDialogMessage={
+              t('artifact.confirmDialogMessage') ||
+              'This action cannot be undone.'
+            }
+            // className="memori-artifact-panel"
+          >
+            {children}
+          </Drawer>
+        );
+      }
+    },
+    [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen]
+  );
+
+    /**
+   * 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 external open action
+     */
+    const handleOpenExternal = useCallback((artifact: ArtifactData) => {
+      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);
+  
+      } catch (error) {
+        console.error('External open failed:', error);
+      }
+    }, []);
+
+  // Render web split panel
+  return (
+    <ContentContainer>
+      {/* Header */}
+      <div
+        className={cx('memori-artifact-drawer-container-actions', {
+          'memori-artifact-drawer-container-actions--no-preview': !hasPreview,
+          'memori-artifact-drawer-container-actions--chatlog': isChatLogPanel,
+        })}
+      >
+        {/* Desktop Actions */}
+        {!isMobile && (
+          <>
+            {/* Modern Tab Switch */}
+            {hasPreview && (
+              <TabSwitch
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                hasPreview={hasPreview}
+              />
+            )}
+            <ArtifactActions
+              artifact={state.currentArtifact}
+              onCopy={handleCopy}
+              loading={false}
+              isMobile={isMobile}
+            />
+            <Button
+              onClick={closeArtifact}
+              className={cx(
+                'memori-artifact-drawer--close',
+                'memori-button--icon-only',
+                {
+                  'memori-artifact-drawer--close-desktop': !hasPreview,
+                }
+              )}
+              ghost
+              title={t('artifact.close') || 'Close'}
+            >
+              <Close className="memori-artifact-panel--close-icon" />
+            </Button>
+          </>
+        )}
+      </div>
+
+      {/* Top Right Header Section */}
+      <div
+        className={cx('memori-artifact-drawer-top-right', {
+          'memori-artifact-drawer-top-right--no-preview': !hasPreview,
+          'memori-artifact-drawer-top-right--chatlog': isChatLogPanel,
+        })}
+      >
+        {/* Mobile Dropdown Menu */}
+        {isMobile && (
+          <>
+            {hasPreview && (
+              <TabSwitch
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                hasPreview={hasPreview}
+              />
+            )}
+            <Menu as="div" className="memori-mobile-actions-menu">
+              <Menu.Button as="div" className="memori-mobile-actions-trigger">
+                <Button
+                  className={cx(
+                    'memori-button',
+                    'memori-button--more-options',
+                    'memori-button--icon-only'
+                  )}
+                  ghost
+                  title={t('artifact.actions') || 'Actions'}
+                >
+                  <MenuVertical className="memori-artifact-action-icon" />
+                </Button>
+              </Menu.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="memori-mobile-dropdown-enter"
+                enterFrom="memori-mobile-dropdown-enter-from"
+                enterTo="memori-mobile-dropdown-enter-to"
+                leave="memori-mobile-dropdown-leave"
+                leaveFrom="memori-mobile-dropdown-leave-from"
+                leaveTo="memori-mobile-dropdown-leave-to"
+              >
+                <Menu.Items className="memori-mobile-dropdown">
+                  <div className="memori-mobile-dropdown-list">
+                    <Button
+                      onClick={handleCopy}
+                      disabled={false}
+                      className="memori-artifact-action-btn"
+                      ghost
+                      title={t('artifact.copy') || 'Copy'}
+                    >
+                      <span className="memori-artifact-action-text">
+                        {t('artifact.copy') || 'Copy'}
+                      </span>
+                    </Button>
+
+                    {formats.map(format => {
+                      // Get appropriate icon based on action type
+                      const getIcon = () => {
+                        switch (format.action) {
+                          case 'copy':
+                            return (
+                              <Link className="memori-artifact-action-icon" />
+                            );
+                          case 'download':
+                            return (
+                              <Download className="memori-artifact-action-icon" />
+                            );
+                          case 'print':
+                          case 'pdf':
+                            return (
+                              <PrintIcon className="memori-artifact-action-icon" />
+                            );
+                          default:
+                            return (
+                              <Link className="memori-artifact-action-icon" />
+                            );
+                        }
+                      };
+
+                      return (
+                        <Button
+                          key={format.id}
+                          onClick={() => handleCopyFormat(format)}
+                          disabled={
+                            copyState.loading &&
+                            copyState.activeFormat === format.id
+                          }
+                          className="memori-artifact-action-btn"
+                          ghost
+                          icon={getIcon()}
+                          title={format.label}
+                        >
+                          <span className="memori-artifact-action-text">
+                            {format.label}
+                          </span>
+                        </Button>
+                      );
+                    })}
+
+                    {/* External open action (not from hook) */}
+                    <Button
+                      onClick={() => handleOpenExternal(state.currentArtifact ?? {
+                        content: '',
+                        mimeType: '',
+                        title: '',
+                        timestamp: new Date(),
+                        size: 0,
+                        id: '',
+                      })}
+                      disabled={false}
+                      className="memori-artifact-action-btn"
+                      ghost
+                      icon={<Link className="memori-artifact-action-icon" />}
+                      title={t('artifact.external') || 'External'}
+                    >
+                      <span className="memori-artifact-action-text">
+                        {t('artifact.external') || 'External'}
+                      </span>
+                    </Button>
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </Menu>
+          </>
+        )}
+
+        {/* Close Button */}
+        {isMobile && (
+          <Button
+            onClick={closeArtifact}
+            className={cx(
+              'memori-artifact-drawer--close',
+              'memori-button--icon-only'
+            )}
+            ghost
+            title={t('artifact.close') || 'Close'}
+          >
+            <Close className="memori-artifact-panel--close-icon" />
+          </Button>
+        )}
+      </div>
+
+      <div className="memori-artifact-panel--header"></div>
+
+      {/* Content */}
+      <div className="memori-artifact-panel--content">
+        <div className="memori-artifact-panel--main">
+          <ArtifactPreview
+            artifact={state.currentArtifact}
+            activeTab={activeTab}
+          />
+        </div>
+      </div>
+    </ContentContainer>
+  );
+};
+
+export default ArtifactDrawer;

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css

@@ -0,0 +1,150 @@
+/**
+ * TabSwitch CSS Styles
+ * Modern animated switch component with smooth transitions
+ */
+
+.memori-tab-switch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-tab-switch__container {
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+    border: 1px solid #e9ecef;
+    border-radius: 6px;
+    background: #f8f9fa;
+    box-shadow: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-tab-switch__track {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    border-radius: 8px;
+    background: transparent;
+}
+
+.memori-tab-switch__indicator {
+    position: absolute;
+    z-index: 1;
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    width: calc((100% - 4px) / var(--tab-count, 2));
+    border-radius: 6px;
+    animation: tab-switch-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    transform: translateX(calc(var(--active-index, 0) * 100%));
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-tab-switch__indicator::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 6px;
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
+    content: '';
+    pointer-events: none;
+}
+
+.memori-tab-switch__button {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    min-width: 70px;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #6b7280;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    gap: 6px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+}
+
+.memori-tab-switch__button:hover {
+    color: #374151;
+    transform: none;
+}
+
+.memori-tab-switch__button--active {
+    /* color: #1´ç11827; */
+    font-weight: 600;
+}
+
+.memori-tab-switch__button:focus {
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    outline: none;
+}
+
+.memori-tab-switch__button:active {
+    transform: none;
+}
+
+.memori-tab-switch__icon {
+    width: 18px;
+    height: 18px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-tab-switch__button--active .memori-tab-switch__icon {
+    filter: none;
+}
+
+.memori-tab-switch__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Hover effects for the entire switch */
+.memori-tab-switch__container:hover {
+    border-color: #d1d5db;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.memori-tab-switch__container:hover .memori-tab-switch__indicator {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+/* Animation for tab switching */
+@keyframes tab-switch-slide {
+    from {
+        transform: translateX(calc((var(--active-index, 0) - 1) * 100%));
+    }
+    to {
+        transform: translateX(calc(var(--active-index, 0) * 100%));
+    }
+}
+
+/* Responsive design */
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .memori-tab-switch__container {
+        border-width: 2px;
+    }
+
+    .memori-tab-switch__indicator {
+        box-shadow: 0 0 0 2px white, 0 2px 8px var(--memori-primary);
+    }
+
+    .memori-tab-switch__button:focus {
+        box-shadow: 0 0 0 4px var(--memori-primary);
+    }
+}

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

@@ -0,0 +1,79 @@
+/**
+ * TabSwitch Component
+ * Modern animated switch for toggling between code and preview tabs
+ */
+
+import React from 'react';
+import { ArtifactTab } from '../../../types/artifact.types';
+import cx from 'classnames';
+import Code from '../../../../icons/Code';
+import { PreviewIcon } from '../../../../icons/Preview';
+
+interface TabSwitchProps {
+  activeTab: ArtifactTab;
+  onTabChange: (tab: ArtifactTab) => void;
+  hasPreview: boolean;
+}
+
+const TabSwitch: React.FC<TabSwitchProps> = ({
+  activeTab,
+  onTabChange,
+  hasPreview,
+}) => {
+  const tabs = [
+    {
+      id: 'code' as ArtifactTab,
+      icon: Code,
+    //   label: 'Code',
+    },
+    ...(hasPreview
+      ? [
+          {
+            id: 'preview' as ArtifactTab,
+            icon: PreviewIcon,
+            // label: 'Preview',
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div className="memori-tab-switch">
+      <div className="memori-tab-switch__container">
+        <div
+          className="memori-tab-switch__track"
+          style={{
+            '--tab-count': tabs.length,
+          } as React.CSSProperties}
+        >
+          <div
+            className="memori-tab-switch__indicator"
+            style={{
+              '--active-index': tabs.findIndex(tab => tab.id === activeTab),
+            } as React.CSSProperties}
+          />
+          {tabs.map((tab) => {
+            const IconComponent = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                className={cx('memori-tab-switch__button', {
+                  'memori-tab-switch__button--active': activeTab === tab.id,
+                })}
+                onClick={() => onTabChange(tab.id)}
+                aria-pressed={activeTab === tab.id}
+                // title={tab.label}
+              >
+                <IconComponent className="memori-tab-switch__icon" />
+                {/* <span className="memori-tab-switch__label">{tab.label}</span> */}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TabSwitch;