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

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -1,9 +1,9 @@
-/* Hold-to-talk: tooltip uses align=topLeft so the bubble stays in view (mic sits on the trailing edge). */
+/* Hold-to-talk: tooltip chrome only — button look owned by IconButton */
+
 .memori-chat-inputs--mic-tooltip.memori-tooltip {
     vertical-align: middle;
 }
 
-/* Library default is overflow: hidden auto + max-height — avoid scrollbars on short hint text */
 .memori-chat-inputs--mic-tooltip .memori-tooltip--content {
     overflow: visible;
     max-height: none;
@@ -11,125 +11,15 @@
 
 .memori-chat-inputs--mic {
     z-index: 1;
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
-    box-sizing: border-box;
-    padding: 0;
-    margin-left: 0.33rem;
-    color: var(--memori-primary);
+    flex-shrink: 0;
+    margin-left: 0;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
     -webkit-touch-callout: none;
     -webkit-user-drag: none;
-    -khtml-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.memori-chat-inputs--mic svg {
-    width: 20px;
-    height: 20px;
-    color: var(--memori-primary, #fff);
-    font-size: 1em;
-    -webkit-user-select: none;
     user-select: none;
 }
 
-.memori-chat-inputs--mic:hover {
-    background-color: var(--memori-secondary-background) !important;
-}
-
-.memori-chat-inputs--mic:active,
-.memori-chat-inputs--mic:focus {
-    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
-}
-
-/* Enhanced touch feedback for mobile */
-@media (hover: none) and (pointer: coarse) {
-    .memori-chat-inputs--mic:active {
-        transform: scale(0.95);
-        transition: transform 0.1s ease;
-    }
-
-    .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active {
-        background-color: rgba(0, 0, 0, 0.1);
-    }
-}
-
-/* Prevent double-tap zoom on mobile - already defined above */
-
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
-    color: var(--memori-primary) !important;
-}
-
-@keyframes micBtnActivePulse {
-    0% {
-        transform: scale(1.25);
-    }
-
-    25% {
-        transform: scale(1.4);
-    }
-
-    50% {
-        transform: scale(1.3);
-    }
-
-    75% {
-        transform: scale(1.4);
-    }
-
-    100% {
-        transform: scale(1.2);
-    }
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-    position: relative;
-    color: red !important;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-touch-callout: none;
-    transform: scale(1.5);
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: micBtnActivePulse 2s infinite;
-    background: var(--memori-primary);
-    content: '';
-    opacity: 0.2;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-    top: 5%;
-    left: 5%;
-    width: 90%;
-    height: 90%;
-    animation-delay: 0.3s;
-    opacity: 0.3;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active,
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
-    border-color: red !important;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
-    color: red !important;
-}
-
 .memori-chat-inputs--mic-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
     top: -50%;
     right: 115%;
@@ -141,22 +31,5 @@
     font-size: 0.85em;
     opacity: 0;
     text-align: center;
-    /* left: 0; */
     transform: translateY(-100%);
 }
-
-/* Mobile-specific improvements for listening state */
-@media (hover: none) and (pointer: coarse) {
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-        transform: scale(1.3);
-    }
-
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-        animation-duration: 1.5s;
-    }
-}
-
-[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic {
-    color: #fff;
-}

package/src/components/MicrophoneButton/MicrophoneButton.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Props as ChatInputProps } from '../ChatInputs/ChatInputs';
 import { Mic } from 'lucide-react';
-import { Button, Tooltip } from '@memori.ai/ui';
+import { Tooltip } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import { useTranslation } from 'react-i18next';
 
 export interface Props {
@@ -112,10 +113,10 @@ const MicrophoneButton = ({
       }}
     >
       <div onContextMenu={handleContextMenu}>
-        <Button
-          variant="ghost"
+        <IconButton
           size="sm"
-          className={`memori-chat-inputs--mic${listening ? ' memori-chat-inputs--mic--listening' : ''}`}
+          className="memori-chat-inputs--mic"
+          recording={!!listening}
           aria-label={listening ? listeningHint : idleHint}
           aria-pressed={!!listening}
           disabled={disabled}
@@ -124,7 +125,6 @@ const MicrophoneButton = ({
           onMouseUp={stopHold}
           onTouchEnd={handleTouchEnd}
           onMouseLeave={stopHold}
-          // shape="circle"
           icon={<Mic />}
         />
       </div>

package/src/components/MobileSessionPanel/MobileSessionPanel.css

@@ -197,8 +197,7 @@
     justify-content: center;
     border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
     border-radius: 12px;
-    /* background: var(--memori-main-background); */
-    color: var(--memori-primary);
+    color: var(--memori-icon-button-icon, color-mix(in oklch, var(--memori-text-color, #111827) 72%, transparent));
 }
 
 [data-theme='dark'] .memori-mobile-session-panel--action-icon {
@@ -206,13 +205,33 @@
     color: #fff;
 }
 
+.memori-mobile-session-panel--logout .memori-mobile-session-panel--action-icon {
+    color: #a53b45;
+}
+
+.memori-mobile-session-panel--action:focus-visible .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
+.memori-mobile-session-panel--action:hover:not(:disabled) .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
+[data-theme='dark'] .memori-mobile-session-panel--action:focus-visible .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
+[data-theme='dark'] .memori-mobile-session-panel--action:hover:not(:disabled) .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
 .memori-mobile-session-panel--action-icon svg {
     width: 1rem;
     max-width: 1rem;
     height: 1rem;
     max-height: 1rem;
     flex-shrink: 0;
-    /* color: var(--memori-primary); */
+    color: inherit;
 }
 
 .memori-mobile-session-panel--action-copy {
@@ -272,10 +291,6 @@
     gap: 0.5rem;
 }
 
-.memori-mobile-session-panel--logout .memori-mobile-session-panel--action-icon {
-    color: #a53b45;
-}
-
 .memori-mobile-session-panel--logout-label {
     font-size: 1.02rem;
     font-weight: 500;
@@ -300,6 +315,13 @@
     gap: 0.35rem;
 }
 
+.memori-mobile-session-panel--page:has(.memori-mobile-session-panel--back) {
+    padding-top: 0;
+    padding-bottom: 0.65rem;
+    border-bottom: 0.5px solid var(--memori-border-color, #e5e7eb);
+    margin-bottom: 0.75rem;
+}
+
 /* User details typography */
 .memori-dropdown--user-details {
     display: flex;

package/src/components/MobileSessionPanel/MobileSessionPanel.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '../../testUtils';
+import MobileSessionPanel from './MobileSessionPanel';
+
+const baseProps = {
+  open: true,
+  onClose: jest.fn(),
+  title: 'Session',
+  userName: 'Test user',
+  actions: [],
+  showSessionInfo: true,
+  isLoggedIn: true,
+  loginToken: 'abcd',
+};
+
+it('hides Known facts unless showKnownFacts is on', () => {
+  render(<MobileSessionPanel {...baseProps} />);
+
+  expect(screen.queryByText('Known facts')).toBeNull();
+});
+
+it('shows Known facts when showKnownFacts is on', () => {
+  render(
+    <MobileSessionPanel
+      {...baseProps}
+      showKnownFacts
+      knownFactsPageTitle="Known facts"
+    />
+  );
+
+  expect(screen.getByText('Known facts')).toBeTruthy();
+});
+
+it('hides AI usage unless showMessageConsumption is on', () => {
+  render(<MobileSessionPanel {...baseProps} />);
+
+  expect(screen.queryByText('widget.aiConsumption')).toBeNull();
+});
+
+it('shows AI usage when showMessageConsumption is on', () => {
+  render(<MobileSessionPanel {...baseProps} showMessageConsumption />);
+
+  expect(screen.getByText('widget.aiConsumption')).toBeTruthy();
+});

package/src/components/MobileSessionPanel/MobileSessionPanel.tsx

@@ -9,11 +9,12 @@ import {
 } from 'lucide-react';
 import { Button, createAlertOptions, useAlertManager } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
-import { Message, User } from '@memori.ai/memori-api-client/dist/types';
+import { Message, User, Venue } from '@memori.ai/memori-api-client/dist/types';
 import { getErrori18nKey } from '../../helpers/error';
 import { imgMimeTypes } from '../../helpers/utils';
 import GasStation from '../icons/GasStation';
 import { ChatConsumptionContent } from '../Header/ChatConsumptionDropdown';
+import { PositionPopoverContent } from '../PositionPopover/PositionPopover';
 type SessionAction = {
   key: string;
   icon: React.ReactNode;
@@ -66,6 +67,8 @@ export interface MobileSessionPanelProps {
   locationUnknownLabel?: string;
   locationEnableLabel?: string;
   locationDisableLabel?: string;
+  venue?: Venue;
+  setVenue?: (venue?: Venue) => void;
   knownFactsDescription?: string;
   knownFactsCtaLabel?: string;
   knownFactsCountLabel?: string;
@@ -73,9 +76,13 @@ export interface MobileSessionPanelProps {
   knownFactsDisabled?: boolean;
   knownFactsHint?: string;
   showSessionInfo?: boolean;
+  showKnownFacts?: boolean;
   history?: Message[];
   aiUsageTitle?: string;
+  showMessageConsumption?: boolean;
   isLoggedIn?: boolean;
+  /** When false, hide profile / login / logout controls (authToken alone must not surface them). */
+  showLogin?: boolean;
   loginLabel?: string;
   onLogin?: () => void;
 }
@@ -173,12 +180,19 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
   knownFactsDisabled = false,
   knownFactsHint,
   showSessionInfo = false,
+  showKnownFacts = false,
   history = [],
   aiUsageTitle,
+  showMessageConsumption = false,
   isLoggedIn = false,
+  showLogin = false,
   loginLabel = 'Log in',
   onLogin,
+  venue,
+  setVenue,
 }) => {
+  const showAuthControls = showLogin;
+  const showProfileControls = showAuthControls && isLoggedIn;
   const panelRef = useRef<HTMLElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
   const panelTitleId = 'mobile-session-panel-title';
@@ -460,7 +474,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
         {!isPopover && <div className="memori-mobile-session-panel--handle" />}
         {activeView === 'session' ? (
           <>
-            {isLoggedIn && (
+            {showProfileControls && (
               <div className="memori-mobile-session-panel--user">
                 <div className="memori-dropdown--avatar-wrap">
                   {avatarURL ? (
@@ -552,9 +566,9 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
             >
               {title}
             </h2>
-            {showSessionInfo && (
+            {showSessionInfo && (showKnownFacts || showMessageConsumption) && (
               <ul className="memori-mobile-session-panel--actions memori-mobile-session-panel--session-info">
-                {isLoggedIn && (
+                {isLoggedIn && showKnownFacts && (
                   <li>
                     <Button
                       variant="toolbar"
@@ -577,12 +591,10 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                           {resolvedKnownFactsHint}
                         </span>
                       </span>
-                      <span className="memori-mobile-session-panel--action-trailing">
-                        <ChevronRight size={16} />
-                      </span>
                     </Button>
                   </li>
                 )}
+                {showMessageConsumption && (
                 <li>
                   <Button
                     variant="toolbar"
@@ -610,6 +622,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                     </span>
                   </Button>
                 </li>
+                )}
               </ul>
             )}
             <ul className="memori-mobile-session-panel--actions">
@@ -666,7 +679,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                 </li>
               ))}
             </ul>
-            {isLoggedIn && (
+            {showProfileControls && (
               <Button
                 variant="toolbar"
                 size="sm"
@@ -682,7 +695,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                 </span>
               </Button>
             )}
-            {!isLoggedIn && (
+            {showAuthControls && !isLoggedIn && (
               <div className="memori-mobile-session-panel--login-cta-wrap">
                 <Button
                   variant="toolbar"
@@ -719,35 +732,44 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                 : knownFactsPageTitle}
             </h3>
             {activeView === 'location' ? (
-              <div className="memori-mobile-session-panel--page-content">
-                <p className="memori-mobile-session-panel--meta-label">
-                  {locationStatusLabel}
-                </p>
-                <p className="memori-mobile-session-panel--meta-value">
-                  {locationPlace || locationUnknownLabel}
-                </p>
-                <div className="memori-mobile-session-panel--page-actions">
-                  <Button
-                    variant="toolbar"
-                    size="sm"
-                    className={`memori-mobile-session-panel--page-btn ${
-                      isLocationEnabled
-                        ? 'memori-mobile-session-panel--page-btn-active'
-                        : ''
-                    }`}
-                    onClick={onLocationEnable}
-                  >
-                    <span>{locationEnableLabel}</span>
-                  </Button>
-                  <Button
-                    variant="toolbar"
-                    size="sm"
-                    className="memori-mobile-session-panel--page-btn memori-mobile-session-panel--page-btn-secondary"
-                    onClick={onLocationDisable}
-                  >
-                    {locationDisableLabel}
-                  </Button>
-                </div>
+              <div className="memori-mobile-session-panel--page-content memori-mobile-session-panel--location-content">
+                {setVenue ? (
+                  <PositionPopoverContent
+                    venue={venue}
+                    setVenue={setVenue}
+                  />
+                ) : (
+                  <>
+                    <p className="memori-mobile-session-panel--meta-label">
+                      {locationStatusLabel}
+                    </p>
+                    <p className="memori-mobile-session-panel--meta-value">
+                      {locationPlace || locationUnknownLabel}
+                    </p>
+                    <div className="memori-mobile-session-panel--page-actions">
+                      <Button
+                        variant="toolbar"
+                        size="sm"
+                        className={`memori-mobile-session-panel--page-btn ${
+                          isLocationEnabled
+                            ? 'memori-mobile-session-panel--page-btn-active'
+                            : ''
+                        }`}
+                        onClick={onLocationEnable}
+                      >
+                        <span>{locationEnableLabel}</span>
+                      </Button>
+                      <Button
+                        variant="toolbar"
+                        size="sm"
+                        className="memori-mobile-session-panel--page-btn memori-mobile-session-panel--page-btn-secondary"
+                        onClick={onLocationDisable}
+                      >
+                        {locationDisableLabel}
+                      </Button>
+                    </div>
+                  </>
+                )}
               </div>
             ) : activeView === 'share' ? (
               <div className="memori-mobile-session-panel--page-content memori-mobile-session-panel--share-content">

package/src/components/PositionPopover/PositionPopover.tsx

@@ -1,10 +1,6 @@
 import { Venue } from '@memori.ai/memori-api-client/dist/types';
-import {
-  Button,
-  Popover,
-  useAlertManager,
-  createAlertOptions,
-} from '@memori.ai/ui';
+import { Button, Popover } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import { MapPin, Pencil } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,19 +27,23 @@ export interface PositionPopoverProps {
   triggerButtonVariant?: React.ComponentProps<typeof Button>['variant'];
   triggerAriaLabel: string;
   positionerClassName?: string;
+  /** When true, start browser geolocation as soon as the popover opens. */
+  autoStartGeolocation?: boolean;
 }
 
 export interface PositionPopoverContentProps {
   venue?: Venue;
   setVenue: (venue?: Venue) => void;
+  /** When true, start browser geolocation as soon as the panel mounts (e.g. StartPanel CTA). */
+  autoStartGeolocation?: boolean;
 }
 
 export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
   venue,
   setVenue,
+  autoStartGeolocation = false,
 }) => {
   const { t } = useTranslation();
-  const { add } = useAlertManager();
   const [geolocationLoading, setGeolocationLoading] = useState(false);
   const [editingLocation, setEditingLocation] = useState(false);
   const [permissionDeniedMessage, setPermissionDeniedMessage] = useState<
@@ -55,6 +55,7 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
   const [suggestions, setSuggestions] = useState<NominatimItem[]>([]);
   const geoGenRef = useRef(0);
   const autocompleteInputRef = useRef<HTMLInputElement>(null);
+  const autoStartedRef = useRef(false);
 
   const sharingActive = geolocationLoading || hasShareableCoords(venue);
 
@@ -143,14 +144,6 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
         } finally {
           if (gen === geoGenRef.current) {
             setGeolocationLoading(false);
-            add(
-              createAlertOptions({
-                description:
-                  t('widget.positionSharingEnabled') ||
-                  'Position sharing has been enabled.',
-                severity: 'success',
-              })
-            );
           }
         }
       },
@@ -170,7 +163,7 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
       },
       { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
     );
-  }, [setVenue, t, add]);
+  }, [setVenue, t]);
 
   const toggleSharing = useCallback(() => {
     setPermissionDeniedMessage(null);
@@ -200,6 +193,17 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
     startGeolocation();
   }, [geolocationLoading, setVenue, sharingActive, startGeolocation]);
 
+  useEffect(() => {
+    if (!autoStartGeolocation) {
+      autoStartedRef.current = false;
+      return;
+    }
+    if (autoStartedRef.current) return;
+    if (hasShareableCoords(venue) || geolocationLoading) return;
+    autoStartedRef.current = true;
+    startGeolocation();
+  }, [autoStartGeolocation, geolocationLoading, startGeolocation, venue]);
+
   useEffect(() => {
     if (!editingLocation) return;
     const id = requestAnimationFrame(() => {
@@ -313,9 +317,10 @@ const PositionPopover: React.FC<PositionPopoverProps> = ({
   open,
   onOpenChange,
   triggerClassName,
-  triggerButtonVariant = 'primary',
+  triggerButtonVariant = 'toolbar',
   triggerAriaLabel,
   positionerClassName,
+  autoStartGeolocation = false,
 }) => {
   const sharingActive = hasShareableCoords(venue);
 
@@ -333,15 +338,16 @@ const PositionPopover: React.FC<PositionPopoverProps> = ({
           className: triggerClassName,
           render: (props: React.ComponentProps<typeof Button>) => {
             return (
-              <Button
+              <IconButton
                 {...props}
                 type="button"
                 variant={triggerButtonVariant}
+                active={open}
                 className={cx(
                   'memori-header--button',
                   'memori-header--button--position',
                   sharingActive && 'memori-header--button--position--active',
-                  open && 'memori-button--active'
+                  triggerClassName
                 )}
                 aria-label={triggerAriaLabel}
                 aria-expanded={open}
@@ -357,7 +363,13 @@ const PositionPopover: React.FC<PositionPopoverProps> = ({
           ),
         },
       }}
-      content={<PositionPopoverContent venue={venue} setVenue={setVenue} />}
+      content={
+        <PositionPopoverContent
+          venue={venue}
+          setVenue={setVenue}
+          autoStartGeolocation={open && autoStartGeolocation}
+        />
+      }
     >
       {null}
     </Popover>

package/src/components/PoweredBy/PoweredBy.css

@@ -10,7 +10,7 @@
     /* border: 1px solid var(--memori-border-color); */
     border-radius: 9999px;
     /* background-color: var(--memori-secondary-background); */
-    color: var(--memori-text-color);
+    color: color-mix(in srgb, var(--memori-text-color) 45%, transparent);
     font-size: 0.75rem;
     font-weight: 500;
     gap: 0.5rem;
@@ -22,6 +22,7 @@
     width: 1.25rem;
     height: 1.25rem;
     flex-shrink: 0;
+    opacity: 0.55;
 }
 
 .memori--powered-by-label {
@@ -31,7 +32,7 @@
 }
 
 .memori--powered-by-label a {
-    color: var(--memori-text-color);
+    color: inherit;
     text-decoration: underline;
     text-underline-offset: 2px;
 }
@@ -43,7 +44,7 @@
 }
 
 @media (max-width: 870px) {
-    .memori-widget .memori--powered-by {
+    .memori--powered-by {
         display: none !important;
     }
 }

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,4 +1,5 @@
 import { Drawer, Checkbox, Button, Slider, Tooltip } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { setLocalConfig } from '../../helpers/configuration';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
@@ -28,7 +29,7 @@ const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
 
 const SettingsDrawer = ({
   open,
-  layout = 'DEFAULT',
+  layout = 'FULLPAGE',
   onClose,
   // microphoneMode = 'HOLD_TO_TALK',
   // continuousSpeechTimeout,
@@ -46,9 +47,11 @@ const SettingsDrawer = ({
   isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       className="memori-settings-drawer"
       open={open}
       onClose={onClose}