@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -7,6 +7,7 @@
 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,
@@ -15,6 +16,7 @@ import {
   Download,
   Link as LinkIcon,
   Printer,
+  Copy,
 } from 'lucide-react';
 import ArtifactActions from '../ArtifactActions/ArtifactActions';
 import { useArtifact } from '../../context/ArtifactContext';
@@ -23,10 +25,16 @@ import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
 import cx from 'classnames';
 import { useCopyArtifact } from '../ArtifactActions/hooks/useCopyArtifact';
 import TabSwitch from './components/TabSwitch';
+import IconButton from '../../../IconButton/IconButton';
 
-const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
-  isChatLogPanel = false,
-}) => {
+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);
@@ -59,7 +67,7 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
   // Mobile detection
   useEffect(() => {
     const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 768);
+      setIsMobile(window.innerWidth <= 1260);
     };
 
     checkMobile();
@@ -112,13 +120,9 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     closeArtifact();
   }, [closeArtifact]);
 
-  if (!state.currentArtifact) {
-    return null;
-  }
-
   const hasPreview =
-    state.currentArtifact.mimeType === 'html' ||
-    state.currentArtifact.mimeType === 'markdown';
+    state.currentArtifact?.mimeType === 'html' ||
+    state.currentArtifact?.mimeType === 'markdown';
 
   const ContentContainer = useCallback(
     ({ children }: { children: React.ReactNode }) => {
@@ -137,15 +141,20 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
             {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
+              state.isFullscreen || isMobile
                 ? 'memori-artifact-panel-drawer-fullscreen'
                 : 'memori-artifact-panel-drawer'
             }
@@ -158,10 +167,12 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     },
     [
       isChatLogPanel,
+      isLayoutColumn,
       handleClose,
       state.isDrawerOpen,
       state.isFullscreen,
       isMobile,
+      surfaceEl,
     ]
   );
 
@@ -196,28 +207,35 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
   /**
    * 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 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;
+        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]
+  );
 
-      // Cleanup URL after a delay
-      setTimeout(() => {
-        URL.revokeObjectURL(url);
-      }, 60000);
-    } catch (error) {
-      console.error('External open failed:', error);
-    }
-  }, []);
+  if (!state.currentArtifact) {
+    return null;
+  }
 
   // Render web split panel
   return (
@@ -247,13 +265,14 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
               isMobile={isMobile}
             />
             {!isChatLogPanel && (
-              <Button
+              <IconButton
                 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'}
-              />
+                className="memori-artifact-drawer--close"
+              >
+                <X className="memori-icon-close" aria-hidden />
+              </IconButton>
             )}
           </>
         )}
@@ -276,43 +295,45 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
                 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}
+            <div className="memori-artifact-drawer-top-right-actions">
+              <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"
+                  placement="bottom"
+                  align="end"
+                  sideOffset={8}
+                  container={surfaceEl ?? undefined}
+                >
+                  <Dropdown.Item
                     className="memori-artifact-action-btn"
-                    variant="ghost"
-                    title={t('artifact.copy') || 'Copy'}
+                    onClick={handleCopy}
+                    icon={<Copy className="memori-artifact-action-icon" />}
+                    label={t('artifact.copy') || 'Copy'}
                   >
-                    <span className="memori-artifact-action-text">
-                      {t('artifact.copy') || 'Copy'}
-                    </span>
-                  </Button>
+                    {t('artifact.copy') || 'Copy'}
+                  </Dropdown.Item>
 
                   {formats.map(format => {
-                    // Get appropriate icon based on action type
                     const getIcon = () => {
                       switch (format.action) {
                         case 'copy':
@@ -336,27 +357,24 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
                     };
 
                     return (
-                      <Button
+                      <Dropdown.Item
                         key={format.id}
+                        className="memori-artifact-action-btn"
                         onClick={() => handleCopyFormat(format)}
                         disabled={
                           copyState.loading &&
                           copyState.activeFormat === format.id
                         }
-                        className="memori-artifact-action-btn"
-                        variant="ghost"
                         icon={getIcon()}
-                        title={format.label}
+                        label={format.label}
                       >
-                        <span className="memori-artifact-action-text">
-                          {format.label}
-                        </span>
-                      </Button>
+                        {format.label}
+                      </Dropdown.Item>
                     );
                   })}
 
-                  {/* External open action (not from hook) */}
-                  <Button
+                  <Dropdown.Item
+                    className="memori-artifact-action-btn"
                     onClick={() =>
                       handleOpenExternal(
                         state.currentArtifact ?? {
@@ -366,43 +384,30 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
                           timestamp: new Date(),
                           size: 0,
                           id: '',
+                          artifactId: '',
                         }
                       )
                     }
-                    disabled={false}
-                    className="memori-artifact-action-btn"
-                    variant="ghost"
                     icon={<LinkIcon className="memori-artifact-action-icon" />}
-                    title={t('artifact.external') || 'External'}
+                    label={t('artifact.external') || 'External'}
                   >
-                    <span className="memori-artifact-action-text">
-                      {t('artifact.external') || 'External'}
-                    </span>
-                  </Button>
-                </div>
-              </Dropdown.Menu>
-            </Dropdown>
+                    {t('artifact.external') || 'External'}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              <IconButton
+                onClick={closeArtifact}
+                aria-label={t('artifact.close') || 'Close'}
+                title={t('artifact.close') || 'Close'}
+                className="memori-artifact-drawer--close"
+              >
+                <X className="memori-icon-close" aria-hidden />
+              </IconButton>
+            </div>
           </>
         )}
-
-        {/* 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">

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

@@ -1,17 +1,33 @@
 .memori-tab-switch {
     display: flex;
+    width: auto;
     max-width: fit-content;
+    flex: 0 0 auto;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 
 .memori-tab-switch__list {
     display: flex;
+    width: auto;
+    flex: 0 0 auto;
     gap: var(--memori-spacing-xs);
 }
 
+.memori-tabs[data-memori-variant='segmented'] .memori-tabs__list--horizontal {
+    background-color: transparent;
+}
+
+.memori-tabs[data-memori-variant='segmented'] .memori-tabs__tab {
+    flex: 1 1 0;
+    border: var(--memori-border, 1px) solid
+        color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    border-radius: var(--memori-radius-box);
+}
+
 .memori-tab-switch__tab {
-    min-width: 70px;
+    min-width: 40px;
+    flex: 0 0 auto;
 }
 
 .memori-tab-switch__icon {