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

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,
     ]
   );
 
@@ -217,7 +228,11 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     } catch (error) {
       console.error('External open failed:', error);
     }
-  }, []);
+  }, [getMimeTypeString]);
+
+  if (!state.currentArtifact) {
+    return null;
+  }
 
   // Render web split panel
   return (
@@ -247,13 +262,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 +292,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 +354,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 ?? {
@@ -369,40 +384,26 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
                         }
                       )
                     }
-                    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,26 @@
 .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-tab-switch__tab {
-    min-width: 70px;
+    min-width: 40px;
+    flex: 0 0 auto;
 }
 
 .memori-tab-switch__icon {

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx

@@ -361,10 +361,11 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
               </div>
             </button>
 
-            {/* Render ArtifactDrawer inline when in chatlog panel */}
-            {state.isDrawerOpen &&
+            {/* Render inline drawer only for chatlog-panel mode.
+                In layout-column mode the drawer is mounted by the page layout. */}
+            {isChatlogPanel && state.isDrawerOpen &&
               state.currentArtifact?.id === artifact.id && (
-                <ArtifactDrawer isChatLogPanel={isChatlogPanel} />
+                <ArtifactDrawer isChatLogPanel={true} />
               )}
           </React.Fragment>
         );

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

@@ -127,6 +127,7 @@
     min-height: 0;
     flex: 1;
     padding: 1rem;
+    background: color-mix(in srgb, var(--memori-text-color) 4%, var(--memori-secondary-background));
     color: var(--memori-text-color);
     font-family: var(--memori-font-family);
     line-height: 1.6;

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

@@ -12,7 +12,7 @@ import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
 import { Code, Eye as PreviewIcon } from 'lucide-react';
 import Snippet from '../../../Snippet/Snippet';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import { renderMsg } from '../../../../helpers/message';
+import { renderMsg, sanitizeMsg } from '../../../../helpers/message';
 
 const ArtifactPreview: React.FC<{
   artifact: ArtifactData;
@@ -63,7 +63,7 @@ const ArtifactPreview: React.FC<{
           <div
             className="memori-artifact-preview-text"
             dangerouslySetInnerHTML={{
-              __html: artifact.content,
+              __html: sanitizeMsg(artifact.content),
             }}
           />
         );

package/src/components/MemoriWidget/MemoriWidget.css

@@ -9,7 +9,8 @@
     box-sizing: border-box;
 }
 
-.memori-widget > .memori-spin {
+.memori-widget > .memori-spin,
+.memori-widget > .memori-widget__surface > .memori-spin {
     height: calc(100vh - 50px);
 }
 
@@ -17,7 +18,8 @@
     .memori-widget {
         overflow-y: hidden;
     }
-    .memori-widget > .memori-spin {
+    .memori-widget > .memori-spin,
+    .memori-widget > .memori-widget__surface > .memori-spin {
         height: calc(100vh - 100px);
     }
 }
@@ -154,9 +156,8 @@
 }
 
 .memori.memori-widget.chat-focused .memori--powered-by,
-.memori.memori-widget.chat-focused
-    .memori-website_assistant--close-button-wrapper
-    button.memori-website_assistant--close-button {
+.memori.memori-widget.memori-layout-website_assistant.chat-focused
+    .memori-website_assistant--close-button {
     display: none;
 }