@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

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

@@ -1,440 +0,0 @@
-/**
- * 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 { Button, Dropdown, Drawer } from '@memori.ai/ui';
-import { useWidgetSurfaceEl } from '../../../../context/widgetSurfaceContext';
-import {
-  X,
-  Maximize,
-  Minimize,
-  MoreVertical,
-  Download,
-  Link as LinkIcon,
-  Printer,
-} from 'lucide-react';
-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 { useCopyArtifact } from '../ArtifactActions/hooks/useCopyArtifact';
-import TabSwitch from './components/TabSwitch';
-
-const ArtifactDrawer: React.FC<{
-  isChatLogPanel?: boolean;
-  /** Render as a plain flex column (no Drawer overlay). Used when the drawer
-   *  is mounted as a proper flex sibling in the page layout. On mobile the
-   *  component falls back to the Drawer overlay regardless of this flag. */
-  isLayoutColumn?: boolean;
-}> = ({ isChatLogPanel = false, isLayoutColumn = false }) => {
-  const surfaceEl = useWidgetSurfaceEl();
-  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 <= 1260);
-    };
-
-    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]);
-
-  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',
-              background: 'var(--memori-secondary-background)',
-              marginTop: '-24px',
-              border: '2px solid var(--memori-border-primary)',
-            }}
-            className="memori-artifact-panel"
-          >
-            {children}
-          </div>
-        );
-      } else if (isLayoutColumn && !isMobile) {
-        // Desktop inline column — rendered as a normal flex child by the layout
-        return <div className="memori-artifact-layout-column">{children}</div>;
-      } else {
-        // Mobile or legacy: floating Drawer overlay
-        return (
-          <Drawer
-            container={surfaceEl ?? undefined}
-            open={state.isDrawerOpen}
-            onClose={handleClose}
-            anchor="right"
-            size="md"
-            className={
-              state.isFullscreen
-                ? 'memori-artifact-panel-drawer-fullscreen'
-                : 'memori-artifact-panel-drawer'
-            }
-            closable={false}
-          >
-            {children}
-          </Drawer>
-        );
-      }
-    },
-    [
-      isChatLogPanel,
-      isLayoutColumn,
-      handleClose,
-      state.isDrawerOpen,
-      state.isFullscreen,
-      isMobile,
-      surfaceEl,
-    ]
-  );
-
-  /**
-   * 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);
-    }
-  }, [getMimeTypeString]);
-
-  if (!state.currentArtifact) {
-    return null;
-  }
-
-  // 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}
-            />
-            {!isChatLogPanel && (
-              <Button
-                onClick={closeArtifact}
-                variant="outline"
-                aria-label={t('artifact.close') || 'Close'}
-                className="memori-artifact-drawer--close-desktop"
-                icon={
-                  <X
-                    className="memori-artifact-panel--close-icon"
-                    aria-hidden
-                  />
-                }
-                title={t('artifact.close') || 'Close'}
-              />
-            )}
-          </>
-        )}
-      </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}
-              />
-            )}
-            <Dropdown className="memori-mobile-actions-menu">
-              <Dropdown.Trigger
-                showChevron={false}
-                className="memori-mobile-actions-trigger"
-                render={(
-                  props: React.ButtonHTMLAttributes<HTMLButtonElement>
-                ) => (
-                  <Button
-                    {...props}
-                    className={cx(
-                      'memori-button',
-                      'memori-button--more-options',
-                      'memori-button--icon-only'
-                    )}
-                    variant="ghost"
-                    title={t('artifact.actions') || 'Actions'}
-                  >
-                    <MoreVertical className="memori-artifact-action-icon" />
-                  </Button>
-                )}
-              />
-              <Dropdown.Menu className="memori-mobile-dropdown">
-                <div className="memori-mobile-dropdown-list">
-                  <Button
-                    onClick={handleCopy}
-                    disabled={false}
-                    className="memori-artifact-action-btn"
-                    variant="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 (
-                            <LinkIcon className="memori-artifact-action-icon" />
-                          );
-                        case 'download':
-                          return (
-                            <Download className="memori-artifact-action-icon" />
-                          );
-                        case 'print':
-                        case 'pdf':
-                          return (
-                            <Printer className="memori-artifact-action-icon" />
-                          );
-                        default:
-                          return (
-                            <LinkIcon 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"
-                        variant="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"
-                    variant="ghost"
-                    icon={<LinkIcon className="memori-artifact-action-icon" />}
-                    title={t('artifact.external') || 'External'}
-                  >
-                    <span className="memori-artifact-action-text">
-                      {t('artifact.external') || 'External'}
-                    </span>
-                  </Button>
-                </div>
-              </Dropdown.Menu>
-            </Dropdown>
-          </>
-        )}
-
-        {/* Close Button */}
-        {isMobile && (
-          <Button
-            onClick={closeArtifact}
-            className={cx(
-              'memori-artifact-drawer--close',
-              'memori-button--icon-only'
-            )}
-            variant="ghost"
-            aria-label={t('artifact.close') || 'Close'}
-            title={t('artifact.close') || 'Close'}
-            icon={
-              <X className="memori-artifact-panel--close-icon" aria-hidden />
-            }
-          />
-        )}
-      </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

@@ -1,20 +0,0 @@
-.memori-tab-switch {
-    display: flex;
-    max-width: fit-content;
-    align-items: center;
-    justify-content: center;
-}
-
-.memori-tab-switch__list {
-    display: flex;
-    gap: var(--memori-spacing-xs);
-}
-
-.memori-tab-switch__tab {
-    min-width: 70px;
-}
-
-.memori-tab-switch__icon {
-    width: 18px;
-    height: 18px;
-}

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import { ArtifactTab } from '../../../types/artifact.types';
-import { Tabs } from '@memori.ai/ui';
-import { Code, Eye as PreviewIcon } from 'lucide-react';
-
-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 (
-    <Tabs.Root
-      className="memori-tab-switch"
-      value={activeTab}
-      onValueChange={value => onTabChange(value as ArtifactTab)}
-      variant="segmented"
-    >
-      <Tabs.List
-        className="memori-tab-switch__list"
-        aria-label="Artifact content view"
-      >
-        {tabs.map(tab => {
-          const IconComponent = tab.icon;
-          return (
-            <Tabs.Tab
-              key={tab.id}
-              value={tab.id}
-              className="memori-tab-switch__tab"
-              aria-label={tab.label}
-            >
-              <IconComponent className="memori-tab-switch__icon" aria-hidden />
-            </Tabs.Tab>
-          );
-        })}
-      </Tabs.List>
-    </Tabs.Root>
-  );
-};
-
-export default TabSwitch;