@memori.ai/memori-react 8.4.2 → 8.5.1

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

@@ -6,7 +6,7 @@
 
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, Transition, Menu } from '@headlessui/react';
 import Button from '../../../ui/Button';
 import Close from '../../../icons/Close';
 import ArtifactActions from '../ArtifactActions/ArtifactActions';
@@ -17,6 +17,12 @@ 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,
@@ -26,6 +32,44 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
   const { t } = useTranslation();
   const [showHistory, setShowHistory] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
+  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
@@ -92,7 +136,7 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
    * Handle close with escape key
    */
   const handleClose = useCallback(() => {
-      closeArtifact();
+    closeArtifact();
   }, [closeArtifact]);
 
   /**
@@ -102,10 +146,21 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     setShowHistory(prev => !prev);
   }, []);
 
+  /**
+   * Mobile dropdown menu handlers
+   */
+  const handleMobileOpenExternal = useCallback(() => {
+    handleOpenExternal();
+  }, [handleOpenExternal]);
+
   if (!state.currentArtifact) {
     return null;
   }
 
+  const hasPreview =
+    state.currentArtifact.mimeType === 'html' ||
+    state.currentArtifact.mimeType === 'markdown';
+
   const ContentContainer = useCallback(
     ({ children }: { children: React.ReactNode }) => {
       if (isChatLogPanel) {
@@ -136,6 +191,7 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
             closable={false}
             animated={true}
             showBackdrop={false}
+            preventBackdropClose={true}
             confirmDialogTitle={
               t('artifact.confirmDialogTitle') ||
               'Are you sure you want to close this artifact?'
@@ -151,66 +207,207 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
         );
       }
     },
-    [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen, t]
+    [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen]
   );
 
   // Render web split panel
   return (
     <ContentContainer>
       {/* Header */}
-
       <div className="memori-artifact-drawer-container-actions">
-        {!isChatLogPanel && (
+        {/* Desktop Actions */}
+        {!isMobile && (
+          <>
+            {/* {!isChatLogPanel && (
+              <Button
+                onClick={handleToggleFullscreen}
+                className={cx(
+                  'memori-artifact-drawer-fullscreen',
+                  'memori-button--circle',
+                  'memori-button--icon-only'
+                )}
+                ghost
+                icon={
+                  state.isFullscreen ? (
+                    <Fullscreen className="memori-artifact-panel--close-icon" />
+                  ) : (
+                    <FullscreenExit className="memori-artifact-panel--close-icon" />
+                  )
+                }
+                title={
+                  state.isFullscreen
+                    ? t('artifact.exitFullscreen') || 'Exit Fullscreen'
+                    : t('artifact.fullscreen') || 'Fullscreen'
+                }
+              />
+            )} */}
+            {/* Modern Tab Switch */}
+            <TabSwitch
+              activeTab={activeTab}
+              onTabChange={handleTabChange}
+              hasPreview={hasPreview}
+            />
+            <ArtifactActions
+              artifact={state.currentArtifact}
+              onCopy={handleCopy}
+              onDownload={handleDownload}
+              loading={false}
+              onPrint={handlePrint}
+              onOpenExternal={handleOpenExternal}
+              isMobile={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>
+
+      {/* Top Right Header Section */}
+      <div className="memori-artifact-drawer-top-right">
+        {/* Mobile Dropdown Menu */}
+        {isMobile && (
+          <>
+          <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={handleMobileOpenExternal}
+                    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={handleToggleFullscreen}
+            onClick={closeArtifact}
             className={cx(
-              'memori-artifact-drawer-fullscreen',
-              'memori-button--circle',
+              'memori-artifact-drawer--close',
               'memori-button--icon-only'
             )}
             ghost
-            icon={
-              state.isFullscreen ? (
-                <Fullscreen className="memori-artifact-panel--close-icon" />
-              ) : (
-                <FullscreenExit className="memori-artifact-panel--close-icon" />
-              )
-            }
-            title={
-              state.isFullscreen
-                ? t('artifact.exitFullscreen') || 'Exit Fullscreen'
-                : t('artifact.fullscreen') || 'Fullscreen'
-            }
-          />
+            title={t('artifact.close') || 'Close'}
+          >
+            <Close className="memori-artifact-panel--close-icon" />
+          </Button>
         )}
-        <ArtifactActions
-          artifact={state.currentArtifact}
-          onCopy={handleCopy}
-          onDownload={handleDownload}
-          loading={false}
-          onPrint={handlePrint}
-          onOpenExternal={handleOpenExternal}
-        />
       </div>
 
-      <Button
-        onClick={closeArtifact}
-        className={cx(
-          'memori-artifact-drawer--close',
-          'memori-button--circle',
-          'memori-button--icon-only'
-        )}
-        ghost
-        title={t('artifact.close') || 'Close'}
-      >
-        <Close className="memori-artifact-panel--close-icon" />
-      </Button>
       <div className="memori-artifact-panel--header"></div>
 
       {/* Content */}
       <div className="memori-artifact-panel--content">
         <div className="memori-artifact-panel--main">
-          <ArtifactPreview artifact={state.currentArtifact} />
+          <ArtifactPreview
+            artifact={state.currentArtifact}
+            activeTab={activeTab}
+          />
         </div>
       </div>
     </ContentContainer>

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;

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

@@ -8,9 +8,11 @@
   align-items: center;
   justify-content: space-between;
   padding: 12px;
+  padding: 1.5rem;
   border: 1px solid var(--memori-button-border-color, #e9ecef);
   border-radius: var(--memori-border-radius, 12px);
   margin: 0.75rem 0;
+  margin: 0.5rem;
   animation: fadeInUp 0.5s ease forwards;
   backdrop-filter: blur(4px);
   background: rgba(255, 255, 255, 0.95);

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

@@ -101,7 +101,7 @@
 /* Preview Content */
 .memori-artifact-preview-content {
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   flex: 1;
   /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
   border-radius: var(--memori-border-radius, 6px);

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx

@@ -16,19 +16,9 @@ import { Medium } from '@memori.ai/memori-api-client/dist/types';
 
 const ArtifactPreview: React.FC<{
   artifact: ArtifactData;
-}> = ({ artifact }) => {
+  activeTab: ArtifactTab;
+}> = ({ artifact, activeTab }) => {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState<ArtifactTab>('preview');
-
-  /**
-   * Handle tab switching
-   */
-  const handleTabChange = useCallback(
-    (tab: ArtifactTab) => {
-      setActiveTab(tab);
-    },
-    [activeTab]
-  );
 
   /**
    * Render preview content based on MIME type
@@ -124,35 +114,6 @@ const ArtifactPreview: React.FC<{
 
   return (
     <div className="memori-artifact-preview">
-      {/* Tabs */}
-      <div className="memori-artifact-tabs">
-        <Button
-          onClick={() => handleTabChange('code' as ArtifactTab)}
-          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>
-        {hasPreview && (
-          <Button
-            onClick={() => handleTabChange('preview' as ArtifactTab)}
-            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">

package/src/components/MemoriArtifactSystem/context/ArtifactContext.tsx

@@ -18,11 +18,7 @@ export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
   });
 
   const openArtifact = useCallback((artifact: ArtifactData) => {
-    setState(prev => {
-      // Only update if the artifact is different
-      if (prev.currentArtifact?.id === artifact.id && prev.isDrawerOpen) {
-        return prev;
-      }
+    setState(() => {
       return {
         currentArtifact: artifact,
         isDrawerOpen: true,