@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.18

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button } from '@memori.ai/ui';
+
+export type IconButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  'variant' | 'active'
+> & {
+  /**
+   * Toggle / popover-open / selected. Soft primary chrome — never solid primary fill.
+   */
+  active?: boolean;
+  /**
+   * Mic (or similar) recording state. Soft error chrome — never primary.
+   */
+  recording?: boolean;
+  /**
+   * Optional override; defaults to toolbar so outline+active solid fill from the UI lib
+   * cannot leak into secondary icon tools.
+   */
+  variant?: React.ComponentProps<typeof Button>['variant'];
+};
+
+function hasVisibleLabel(children: React.ReactNode): boolean {
+  return React.Children.toArray(children).some(child => {
+    if (child === null || child === undefined) return false;
+    if (typeof child === 'boolean') return false;
+    if (typeof child === 'string') return child.trim().length > 0;
+    if (typeof child === 'number') return true;
+    return true;
+  });
+}
+
+/**
+ * Shared secondary icon control for chat header + input bar.
+ * CTA actions (Accedi, send) must keep using Button variant="primary".
+ */
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      active = false,
+      recording = false,
+      className,
+      variant = 'toolbar',
+      shape = 'default',
+      size = 'sm',
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const isRecording = !!recording;
+    const isActive = !!active && !isRecording;
+    const isLabeled = hasVisibleLabel(children);
+    // Never inherit CTA / outline solid-active chrome from layout buttonVariant.
+    const resolvedVariant =
+      variant === 'primary' ||
+      variant === 'secondary' ||
+      variant === 'danger' ||
+      variant === 'outline' ||
+      variant === 'ghost'
+        ? 'toolbar'
+        : variant;
+
+    return (
+      <Button
+        ref={ref}
+        variant={resolvedVariant}
+        shape={shape}
+        size={size}
+        active={isActive}
+        className={cx(
+          'memori-icon-button',
+          isLabeled && 'memori-icon-button--labeled',
+          isActive && 'memori-icon-button--active',
+          isRecording && 'memori-icon-button--recording',
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

package/src/components/KnownFacts/KnownFacts.css

@@ -14,22 +14,35 @@
     }
 }
 
+/* Table wrapper: flex column so pagination footer stays visible below the scroll body */
+.memori-known-facts-table-wrapper.memori-table-wrapper {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    border: 1px solid var(--memori-color-border, #e2e8f0);
+    border-radius: 8px;
+}
+
 .memori-known-facts-table-wrapper {
     .memori-table-scroll {
-        height: 100%;
+        min-height: 0;
+        max-height: none;
+        flex: 1 1 auto;
+    }
+
+    .memori-table-footer {
+        flex-shrink: 0;
     }
+
     .memori-table-pagination__range {
         display: none;
     }
-}
 
-/* Table wrapper: scroll + spacing (@memori.ai/ui Table root) */
-.memori-known-facts-table-wrapper.memori-table-wrapper {
-    overflow: hidden;
-    min-height: 0;
-    flex: 1 1 auto;
-    border: 1px solid var(--memori-color-border, #e2e8f0);
-    border-radius: 8px;
+    .memori-table-pagination__page-size {
+        display: none;
+    }
 }
 
 .memori-known-facts-text-cell {

package/src/components/KnownFacts/KnownFacts.tsx

@@ -10,7 +10,6 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import {
   Button,
   Drawer,
-  Spin,
   Modal,
   Table,
   useAlertManager,
@@ -118,7 +117,9 @@ const KnownFacts = ({
 
   const [bulkDeleteModalVisible, setBulkDeleteModalVisible] = useState(false);
   const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
+  const [bulkDeleting, setBulkDeleting] = useState(false);
   const [deleteModalVisibleFor, setDeleteModalVisibleFor] = useState<string>();
+  const [singleDeleting, setSingleDeleting] = useState(false);
   const selectedRowsLabel = useMemo(
     () =>
       t('knownFacts.selectedRows', {
@@ -222,7 +223,10 @@ const KnownFacts = ({
               </Button>
               <Button
                 variant="danger"
+                loading={bulkDeleting}
+                disabled={bulkDeleting}
                 onClick={async () => {
+                  setBulkDeleting(true);
                   try {
                     const mutations = bulkDeleteIds.map(knownFactID =>
                       deleteKnownFact(sessionID, knownFactID)
@@ -261,6 +265,8 @@ const KnownFacts = ({
                         severity: 'error',
                       })
                     );
+                  } finally {
+                    setBulkDeleting(false);
                   }
                 }}
               >
@@ -277,7 +283,7 @@ const KnownFacts = ({
           getRowId={row => row.knownFactID}
           isLoading={loading}
           rowActionsVariant='inline'
-          maxBodyHeight="75vh"
+          maxBodyHeight={false}
           bulkActions={[
             {
               label: t('delete'),
@@ -315,7 +321,6 @@ const KnownFacts = ({
                   );
                 },
                 initialPageSize: 10,
-                pageSizeOptions: [10,25,50,100],
               }
             : { enablePagination: false })}
         />
@@ -345,9 +350,12 @@ const KnownFacts = ({
               </Button>
               <Button
                 variant="danger"
+                loading={singleDeleting}
+                disabled={singleDeleting}
                 onClick={async () => {
                   if (!deleteModalVisibleFor) return;
                   const kfId = deleteModalVisibleFor;
+                  setSingleDeleting(true);
                   try {
                     const response = await deleteKnownFact(sessionID, kfId);
                     if (response.resultCode === 0) {
@@ -378,6 +386,8 @@ const KnownFacts = ({
                         severity: 'error',
                       })
                     );
+                  } finally {
+                    setSingleDeleting(false);
                   }
                 }}
               >

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

@@ -69,13 +69,14 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     display: none !important;
 }
 
-/* Inline layout column — renders inside the flex grid, not as a fixed overlay */
+/* Inline layout column — fills the layout flex slot, not a fixed overlay.
+   min-height: 0 (not 100vh) so opening the artifact cannot expand the page. */
 .memori-artifact-layout-column {
     display: flex;
     overflow: hidden;
     width: 100%;
     height: 100%;
-    min-height: 100vh;
+    min-height: 0;
     flex-direction: column;
 }
 
@@ -695,26 +696,25 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     background: var(--memori-primary-subtle);
 }
 
-.memori-artifact-drawer--close-desktop {
-    width: 38px;
-    min-width: 38px;
-    height: 38px;
-    min-height: 38px;
-    padding: 0;
-    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
-    margin: 0;
-    margin-left: 0 !important;
+/* Match website_assistant / hidden_chat sidebar close — never outline primary fill */
+.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button,
+.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled),
+.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button:active:not(:disabled, .memori-button--disabled) {
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    background: transparent;
+    box-shadow: none;
+    color: var(--memori-text-color, #111827);
+    transform: none;
 }
 
-.memori-artifact-drawer--close-desktop:hover {
-    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
-    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
-    color: inherit !important;
+.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled) {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
 }
 
-.memori-artifact-drawer--close-desktop:hover .memori-artifact-panel--close-icon,
-.memori-artifact-drawer--close:hover .memori-artifact-panel--close-icon {
-    color: inherit !important;
+.memori-widget .memori-artifact-drawer--close .memori-icon-close {
+    width: 1.125rem;
+    height: 1.125rem;
+    fill: none;
     stroke: currentColor;
 }
 
@@ -738,15 +738,6 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     font-family: var(--memori-font-family);
 }
 
-.memori-artifact-drawer--close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-    /* background: var(--artifact-drawer-bg); */
-    margin-left: auto;
-}
-
 .memori-artifact-actions {
     flex: 1;
 }
@@ -806,26 +797,24 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
         flex: 0 0 auto;
     }
 
-    /* Make mobile action buttons match header toolbar buttons */
-    .memori-artifact-drawer-top-right .memori-button--more-options,
-    .memori-artifact-drawer-top-right .memori-artifact-drawer--close {
+    /* Make mobile more-options match header toolbar buttons */
+    .memori-artifact-drawer-top-right .memori-button--more-options {
         display: flex;
-        width: 38px;
-        min-width: 38px;
-        height: 38px;
-        min-height: 38px;
+        width: 2.5rem;
+        min-width: 2.5rem;
+        height: 2.5rem;
+        min-height: 2.5rem;
         align-items: center;
         justify-content: center;
         padding: 0;
-        border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
-        border-radius: var(--memori-radius-box);
+        border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+        border-radius: var(--memori-radius-box, 0.5rem);
         margin-left: 0;
     }
 
-    .memori-artifact-drawer-top-right .memori-button--more-options:hover,
-    .memori-artifact-drawer-top-right .memori-artifact-drawer--close:hover {
-        border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
-        background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
+    .memori-artifact-drawer-top-right .memori-button--more-options:hover {
+        border-color: color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+        background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
     }
 
     /* Content fills remaining viewport under the toolbar (no floating card) */
@@ -1105,10 +1094,6 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 }
 
 @media (max-width: 1260px) {
-    .memori-artifact-drawer--close {
-        margin-left: 0;
-    }
-
     .memori-artifact-panel--header {
         margin-bottom: var(--memori-spacing-sm);
     }

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

@@ -25,6 +25,7 @@ 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;
@@ -261,19 +262,14 @@ const ArtifactDrawer: React.FC<{
               isMobile={isMobile}
             />
             {!isChatLogPanel && (
-              <Button
+              <IconButton
                 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'}
-              />
+                className="memori-artifact-drawer--close"
+              >
+                <X className="memori-icon-close" aria-hidden />
+              </IconButton>
             )}
           </>
         )}
@@ -395,19 +391,14 @@ const ArtifactDrawer: React.FC<{
                   </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
-              <Button
+              <IconButton
                 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 />
-                }
-              />
+                className="memori-artifact-drawer--close"
+              >
+                <X className="memori-icon-close" aria-hidden />
+              </IconButton>
             </div>
           </>
         )}

package/src/components/MemoriWidget/MemoriWidget.css

@@ -156,7 +156,8 @@
 }
 
 .memori.memori-widget.chat-focused .memori--powered-by,
-.memori.memori-widget.chat-focused .memori-website_assistant--close-button {
+.memori.memori-widget.memori-layout-website_assistant.chat-focused
+    .memori-website_assistant--close-button {
     display: none;
 }
 

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -549,6 +549,11 @@ export function getChatStyles(
       'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%)',
     '--memori-skeleton-highlight':
       'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%)',
+    /* Soft fills for secondary IconButton active / recording (never solid CTA) */
+    '--memori-icon-active-bg':
+      'color-mix(in oklch, var(--memori-primary) 12%, transparent)',
+    '--memori-icon-recording-bg':
+      'color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent)',
   } as CSSProperties;
 }
 
@@ -647,23 +652,6 @@ const MemoriWidget = ({
   const [widgetSurfaceEl, setWidgetSurfaceEl] = useState<HTMLDivElement | null>(
     null
   );
-  const [isDarkTheme, setIsDarkTheme] = useState(false);
-  useEffect(() => {
-    if (!widgetRootEl) return;
-    const check = () => {
-      setIsDarkTheme(!!widgetRootEl.closest('[data-theme="dark"]'));
-    };
-    check();
-    const observer = new MutationObserver(check);
-    const parent = widgetRootEl.parentElement ?? document.body;
-    observer.observe(parent, {
-      attributes: true,
-      attributeFilter: ['data-theme'],
-      subtree: true,
-    });
-    return () => observer.disconnect();
-  }, [widgetRootEl]);
-
   const [loginToken, setLoginToken] = useState<string | undefined>(
     additionalInfo?.loginToken ?? authToken
   );
@@ -884,6 +872,8 @@ const MemoriWidget = ({
     useState(false);
   const [hasUserTypedMessage, setHasUserTypedMessage] = useState(false);
   const [positionPopoverOpen, setPositionPopoverOpenState] = useState(false);
+  const [autoStartPositionGeolocation, setAutoStartPositionGeolocation] =
+    useState(false);
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
   const [showChatHistoryDrawer, setShowChatHistoryDrawer] = useState(false);
   const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
@@ -2691,12 +2681,12 @@ const MemoriWidget = ({
   }`
     );
   }
-  if (integrationConfig?.blurBackground) {
+  if (integrationConfig?.blurBackground === false) {
     integrationStylesheetParts.push(
       `.memori-widget .memori-chat--history--has-global-background::before,
   .memori-widget .memori-chat-layout--main--has-background::before {
-    filter: blur(5px);
-    transform: scale(1.06);
+    filter: none;
+    transform: none;
   }`
     );
   }
@@ -3280,19 +3270,30 @@ const MemoriWidget = ({
 
   const setPositionPopoverOpen = useCallback(
     (open: boolean) => {
+      const sessionAlreadyStarted = !!(sessionId && hasUserActivatedSpeak);
       setPositionPopoverOpenState(wasOpen => {
         if (
-          shouldRestartSessionOnPositionPopoverClose(wasOpen, open, autoStart)
+          shouldRestartSessionOnPositionPopoverClose(
+            wasOpen,
+            open,
+            autoStart,
+            sessionAlreadyStarted
+          )
         ) {
           // Defer: React setState updaters must stay pure.
           queueMicrotask(() => {
             onClickStart();
           });
         }
+        if (!open) {
+          queueMicrotask(() => {
+            setAutoStartPositionGeolocation(false);
+          });
+        }
         return open;
       });
     },
-    [autoStart, onClickStart]
+    [autoStart, onClickStart, sessionId, hasUserActivatedSpeak]
   );
 
   useEffect(() => {
@@ -3497,6 +3498,7 @@ const MemoriWidget = ({
     setVenue: setPosition,
     positionPopoverOpen,
     setPositionPopoverOpen,
+    autoStartPositionGeolocation,
     setShowSettingsDrawer,
     setShowKnownFactsDrawer,
     setShowExpertsDrawer,
@@ -3508,7 +3510,9 @@ const MemoriWidget = ({
     setShowChatHistoryDrawer,
     showSettings: showSettings ?? integrationConfig?.showSettings ?? true,
     showChatHistory:
-      showChatHistory ?? integrationConfig?.showChatHistory ?? true,
+      selectedLayout === 'WEBSITE_ASSISTANT'
+        ? false
+        : showChatHistory ?? integrationConfig?.showChatHistory ?? true,
     showMessageConsumption: enableMessageConsumption,
     hasUserActivatedSpeak,
     showReload: selectedLayout === 'TOTEM',
@@ -3564,7 +3568,10 @@ const MemoriWidget = ({
     apiUrl: client.constants.BACKEND_URL,
     position: position,
     setVenue: setPosition,
-    openPositionPopover: () => setPositionPopoverOpen(true),
+    openPositionPopover: () => {
+      setAutoStartPositionGeolocation(true);
+      setPositionPopoverOpen(true);
+    },
     integrationConfig: integrationConfig,
     instruct: instruct,
     sessionId: sessionId,
@@ -3577,7 +3584,9 @@ const MemoriWidget = ({
     showLogin: canShowLoginButton,
     setShowLoginDrawer,
     showChatHistory:
-      showChatHistory ?? integrationConfig?.showChatHistory ?? true,
+      selectedLayout === 'WEBSITE_ASSISTANT'
+        ? false
+        : showChatHistory ?? integrationConfig?.showChatHistory ?? true,
     setShowChatHistoryDrawer,
     user,
   };
@@ -3672,7 +3681,7 @@ const MemoriWidget = ({
   const integrationStyle =
     integration &&
     (Object.keys(integrationProperties).length > 0 ||
-      integrationConfig?.blurBackground) ? (
+      integrationConfig?.blurBackground === false) ? (
       <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
     ) : null;
 
@@ -3703,13 +3712,11 @@ const MemoriWidget = ({
 
   // Resolve the widget theme once so both `data-theme` on the root and the
   // `MemoriUIProvider` (which stamps portaled popups) stay in sync.
-  // Prefer integration config; fall back to host dark mode when unset.
-  const widgetTheme: 'light' | 'dark' | undefined =
+  // Prefer integration config; default to light when unset.
+  const widgetTheme: 'light' | 'dark' =
     integrationConfig?.theme === 'light' || integrationConfig?.theme === 'dark'
       ? integrationConfig.theme
-      : isDarkTheme
-      ? 'dark'
-      : undefined;
+      : 'light';
 
   return (
     <div