@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

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

@@ -6,29 +6,28 @@
 
 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 { Button, Dropdown, Drawer } from '@memori.ai/ui';
+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 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 { state, closeArtifact, toggleFullscreen } = useArtifact();
   const { t } = useTranslation();
   const [isMobile, setIsMobile] = useState(false);
 
@@ -126,7 +125,13 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
       if (isChatLogPanel) {
         return (
           <div
-            style={{ minHeight: '75vh', maxHeight: '75vh' }}
+            style={{
+              minHeight: '75vh',
+              maxHeight: '75vh',
+              background: 'var(--memori-secondary-background)',
+              marginTop: '-24px',
+              border: '2px solid var(--memori-border-primary)',
+            }}
             className="memori-artifact-panel"
           >
             {children}
@@ -137,42 +142,32 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
           <Drawer
             open={state.isDrawerOpen}
             onClose={handleClose}
-            placement="right"
-            width="50%"
+            anchor="right"
+            size="md"
             className={
               state.isFullscreen
                 ? 'memori-artifact-panel-drawer-fullscreen'
                 : 'memori-artifact-panel-drawer'
             }
-            widthMd="100%"
-            widthLg="50%"
             closable={false}
-            animated={true}
-            enterDuration={isMobile ? 'duration-500' : 'duration-300'}
-            leaveDuration={isMobile ? 'duration-400' : 'duration-200'}
-            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, isMobile]
+    [
+      isChatLogPanel,
+      handleClose,
+      state.isDrawerOpen,
+      state.isFullscreen,
+      isMobile,
+    ]
   );
 
   /**
- * Get MIME type string for downloads
- */
+   * Get MIME type string for downloads
+   */
   const getMimeTypeString = useCallback((mimeType: string): string => {
     const mimeTypes: Record<string, string> = {
       html: 'text/html',
@@ -219,7 +214,6 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
       setTimeout(() => {
         URL.revokeObjectURL(url);
       }, 60000);
-
     } catch (error) {
       console.error('External open failed:', error);
     }
@@ -252,20 +246,15 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
               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>
+            {!isChatLogPanel && (
+              <Button
+                onClick={closeArtifact}
+                variant="ghost"
+                aria-label={t('artifact.close') || 'Close'}
+                icon={<X className="memori-artifact-panel--close-icon" aria-hidden />}
+                title={t('artifact.close') || 'Close'}
+              />
+            )}
           </>
         )}
       </div>
@@ -287,112 +276,112 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
                 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>
+            <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>
 
-              <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 (
+                            <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" />
+                          );
+                      }
+                    };
 
-                    {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
                         }
-                      };
-
-                      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>
-                      );
-                    })}
+                        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"
-                      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>
+                  {/* 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>
           </>
         )}
 
@@ -404,11 +393,11 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
               'memori-artifact-drawer--close',
               'memori-button--icon-only'
             )}
-            ghost
+            variant="ghost"
+            aria-label={t('artifact.close') || 'Close'}
             title={t('artifact.close') || 'Close'}
-          >
-            <Close className="memori-artifact-panel--close-icon" />
-          </Button>
+            icon={<X className="memori-artifact-panel--close-icon" aria-hidden />}
+          />
         )}
       </div>
 

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

@@ -1,150 +1,20 @@
-/**
- * TabSwitch CSS Styles
- * Modern animated switch component with smooth transitions
- */
-
 .memori-tab-switch {
     display: flex;
+    max-width: fit-content;
     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;
+.memori-tab-switch__list {
     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);
+    gap: var(--memori-spacing-xs);
 }
 
-.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;
+.memori-tab-switch__tab {
     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

@@ -1,13 +1,7 @@
-/**
- * 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';
+import { Tabs } from '@memori.ai/ui';
+import { Code, Eye as PreviewIcon } from 'lucide-react';
 
 interface TabSwitchProps {
   activeTab: ArtifactTab;
@@ -24,55 +18,45 @@ const TabSwitch: React.FC<TabSwitchProps> = ({
     {
       id: 'code' as ArtifactTab,
       icon: Code,
-    //   label: 'Code',
+      label: 'Code',
     },
     ...(hasPreview
       ? [
           {
             id: 'preview' as ArtifactTab,
             icon: PreviewIcon,
-            // label: 'Preview',
+            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>
+    <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>
   );
 };