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

package/src/components/PositionPopover/PositionPopover.tsx

@@ -1,5 +1,5 @@
 import { Venue } from '@memori.ai/memori-api-client/dist/types';
-import { Button, Popover } from '@memori.ai/ui';
+import { Button, Popover, Tooltip } from '@memori.ai/ui';
 import IconButton from '../IconButton/IconButton';
 import { MapPin, Pencil } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -14,6 +14,8 @@ import {
 } from '../VenueWidget/VenueWidget';
 import cx from 'classnames';
 
+const GEOCODE_TIMEOUT_MS = 8000;
+
 function hasShareableCoords(v?: Venue): boolean {
   return !!(v?.latitude && v?.longitude);
 }
@@ -113,39 +115,56 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
     const gen = ++geoGenRef.current;
     setPermissionDeniedMessage(null);
     setGeocodingError(null);
+
+    if (!navigator.geolocation) {
+      setGeolocationLoading(false);
+      setPermissionDeniedMessage(String(t('widget.positionUnavailableManual')));
+      setEditingLocation(true);
+      return;
+    }
+
     setGeolocationLoading(true);
 
     navigator.geolocation.getCurrentPosition(
-      async pos => {
+      pos => {
         if (gen !== geoGenRef.current) return;
-        let next: Venue = {
+        const next: Venue = {
           latitude: pos.coords.latitude,
           longitude: pos.coords.longitude,
           placeName: '',
           uncertainty: pos.coords.accuracy / 1000,
         };
-        try {
-          const result = await fetch(
-            `https://nominatim.openstreetmap.org/reverse?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&format=jsonv2&addressdetails=1`
-          );
-          const response = (await result.json()) as NominatimItem;
-          const placeName = getPlaceName(response);
-          next = {
-            latitude: pos.coords.latitude,
-            longitude: pos.coords.longitude,
-            placeName,
-            uncertainty: pos.coords.accuracy / 1000,
-          };
-          setVenue(next);
-        } catch (e) {
-          console.error('[PositionPopover] reverse geocode failed', e);
-          setGeocodingError(String(t('widget.geocodingFailed')));
-          setVenue(next);
-        } finally {
-          if (gen === geoGenRef.current) {
-            setGeolocationLoading(false);
+        setVenue(next);
+        setGeolocationLoading(false);
+
+        const controller = new AbortController();
+        const timeoutId = window.setTimeout(
+          () => controller.abort(),
+          GEOCODE_TIMEOUT_MS
+        );
+
+        void (async () => {
+          try {
+            const result = await fetch(
+              `https://nominatim.openstreetmap.org/reverse?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&format=jsonv2&addressdetails=1`,
+              { signal: controller.signal }
+            );
+            if (gen !== geoGenRef.current) return;
+            const response = (await result.json()) as NominatimItem;
+            const placeName = getPlaceName(response);
+            setVenue({
+              ...next,
+              placeName,
+            });
+          } catch (e) {
+            if (gen !== geoGenRef.current) return;
+            if ((e as { name?: string }).name === 'AbortError') return;
+            console.error('[PositionPopover] reverse geocode failed', e);
+            setGeocodingError(String(t('widget.geocodingFailed')));
+          } finally {
+            window.clearTimeout(timeoutId);
           }
-        }
+        })();
       },
       err => {
         if (gen !== geoGenRef.current) return;
@@ -213,6 +232,8 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
   }, [editingLocation]);
 
   const inlineError = permissionDeniedMessage || geocodingError;
+  const shareLocationHint =
+    t('widget.shareLocationHint') || 'Get answers tailored to where you are';
 
   return (
     <>
@@ -231,10 +252,11 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
             <span className="memori-dropdown--auth-title">
               {t('widget.shareLocation') || 'Share my location'}
             </span>
-            <span className="memori-dropdown--auth-subtitle">
-              {t('widget.shareLocationHint') ||
-                'Get answers tailored to where you are'}
-            </span>
+            <Tooltip title={shareLocationHint} placement="top">
+              <span className="memori-dropdown--auth-subtitle">
+                {shareLocationHint}
+              </span>
+            </Tooltip>
           </span>
           <span
             className={cx(

package/src/components/PoweredBy/PoweredBy.stories.tsx

@@ -4,7 +4,7 @@ import PoweredBy, { Props } from './PoweredBy';
 import './PoweredBy.css';
 
 const meta: Meta = {
-  title: 'Powered by',
+  title: 'Internals/Powered by',
   component: PoweredBy,
   argTypes: {},
   parameters: {
@@ -20,56 +20,3 @@ export const Default = Template.bind({});
 Default.args = {
   userLang: 'en',
 };
-
-export const Italian = Template.bind({});
-Italian.args = {
-  userLang: 'it',
-};
-
-export const MemoryTwin = Template.bind({});
-MemoryTwin.args = {
-  tenant: {
-    id: 'memorytwin',
-    theme: 'memorytwin',
-    config: {
-      name: 'MemoryTwin',
-      showNewUser: true,
-      requirePosition: false,
-      feedbackURL: '',
-    },
-  },
-};
-
-export const TwinCreator = Template.bind({});
-TwinCreator.args = {
-  tenant: {
-    id: 'twincreator',
-    theme: 'twincreator',
-    config: {
-      name: 'twincreator',
-      showNewUser: true,
-      requirePosition: false,
-      feedbackURL: '',
-    },
-  },
-};
-
-export const AIsuru = Template.bind({});
-AIsuru.args = {
-  tenant: {
-    id: 'AIsuru',
-    theme: 'aisuru',
-    config: {
-      name: 'AIsuru',
-      showNewUser: true,
-      requirePosition: false,
-      feedbackURL: '',
-    },
-  },
-};
-
-export const WithData = Template.bind({});
-WithData.args = {
-  integrationID: 'abc',
-  memoriHash: 'tenant-owner-memori',
-};

package/src/components/PoweredBy/__snapshots__/PoweredBy.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`renders PoweredBy unchanged 1`] = `
       }
 
       .cls-2 {
-        fill: var(--memori-logo-text-color, '#744c99');
+        fill: var(--memori-text-color, '#744c99');
       }
     
         </style>
@@ -170,7 +170,7 @@ exports[`renders PoweredBy with data unchanged 1`] = `
       }
 
       .cls-2 {
-        fill: var(--memori-logo-text-color, '#744c99');
+        fill: var(--memori-text-color, '#744c99');
       }
     
         </style>

package/src/components/SendOnEnterMenu/SendOnEnterMenu.stories.tsx

@@ -6,7 +6,7 @@ import SendOnEnterMenu, { Props } from './SendOnEnterMenu';
 import './SendOnEnterMenu.css';
 
 const meta: Meta = {
-  title: 'Widget/Send On Enter Menu',
+  title: 'Internals/Send On Enter Menu',
   component: SendOnEnterMenu,
   argTypes: {
     sendOnEnter: {

package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx

@@ -5,7 +5,7 @@ import SettingsDrawer, { Props } from './SettingsDrawer';
 import './SettingsDrawer.css';
 
 const meta: Meta = {
-  title: 'Widget/SettingsDrawer',
+  title: 'Surfaces/SettingsDrawer',
   component: SettingsDrawer,
   argTypes: {
     open: {

package/src/components/ShareButton/ShareButton.stories.tsx

@@ -8,7 +8,7 @@ import './ShareButton.css';
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Share Button',
+  title: 'Compositions/Share Button',
   component: ShareButton,
   argTypes: {
     url: {

package/src/components/Snippet/Snippet.css

@@ -131,7 +131,7 @@ button.memori-snippet--copy-button svg {
 }
 
 .memori-snippet button.memori-snippet--copy-button--copied svg {
-    color: var(--memori-success-color, #22c55e);
+    color: var(--memori-success, #22c55e);
 }
 
 .memori-snippet--caption {

package/src/components/Snippet/Snippet.stories.tsx

@@ -51,7 +51,7 @@ export default Snippet;
 `;
 
 const meta: Meta = {
-  title: 'Snippet',
+  title: 'Internals/Snippet',
   component: Snippet,
   argTypes: {
     mimeType: {

package/src/components/StartPanel/StartPanel.css

@@ -151,6 +151,23 @@
     white-space: nowrap;
 }
 
+.memori--title-row {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    align-items: center;
+    margin-bottom: var(--memori-spacing-sm);
+    gap: var(--memori-spacing-sm);
+}
+
+.memori--title-row .memori--title {
+    margin-bottom: 0;
+}
+
+.memori--title-row .blocked-memori-badge--wrapper {
+    flex-shrink: 0;
+}
+
 .memori--description,
 .memori--needsLogin,
 .memori--needsPosition {
@@ -944,11 +961,10 @@
     outline-offset: var(--memori-focus-ring-offset);
 }
 
-/* Portal renders on document.body; website-assistant layout uses z-index up to 2^31-1 for the
-   fixed panel/trigger — without this, the popover stays underneath and looks “missing”. */
+/* Portal on widget root; tooltip/popover library z-index is 1300. */
 .memori--privacy-popover-positioner,
 .memori--deep-thought-helper-tooltip-positioner {
-    z-index: 2147483647;
+    z-index: 1300;
 }
 
 .memori--privacy-popover-popup {

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -9,7 +9,7 @@ import '../../i18n';
 import './StartPanel.css';
 
 const meta: Meta = {
-  title: 'Widget/Start panel',
+  title: 'Compositions/Start panel',
   component: StartPanel,
   argTypes: {
     showShare: {
@@ -38,7 +38,7 @@ const integrationProperties = getChatStyles(integrationConfig);
 
 const integrationStylesheet =
   Object.keys(integrationProperties).length > 0
-    ? `@layer integration {
+    ? `@layer memori.overrides {
   #root, .memori-widget {
     ${Object.entries(integrationProperties)
       .map(([key, value]) => `${key}: ${value};`)

package/src/components/StartPanel/StartPanel.tsx

@@ -30,15 +30,6 @@ import { Expandable } from '@memori.ai/ui';
 import { usePressTooltip } from '../../helpers/usePressTooltip';
 import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
-/**
- * Sentinel values used as non-selectable section headers in the language
- * Combobox. We render a flat list with disabled "header" items instead of
- * the Combobox.Group API because @memori.ai/ui's grouped mode renders the
- * group's original items and bypasses the built-in search filter.
- */
-const LANG_COMBO_GROUP_POPULAR = '__memori_lang_group_popular__';
-const LANG_COMBO_GROUP_ALL = '__memori_lang_group_all__';
-
 interface Memori extends MemoriOriginal {
   requireLoginToken?: boolean;
 }
@@ -121,23 +112,19 @@ const StartPanel: React.FC<Props> = ({
     const { popular, all } = getGroupedChatLanguages();
     return [
       {
-        value: LANG_COMBO_GROUP_POPULAR,
-        label: String(t('popularLanguages') || 'Popular'),
-        disabled: true,
+        groupLabel: String(t('popularLanguages') || 'Popular'),
+        options: popular.map(lang => ({
+          label: lang.label,
+          value: lang.value,
+        })),
       },
-      ...popular.map(lang => ({
-        label: lang.label,
-        value: lang.value,
-      })),
       {
-        value: LANG_COMBO_GROUP_ALL,
-        label: String(t('allLanguages') || 'All Languages'),
-        disabled: true,
+        groupLabel: String(t('allLanguages') || 'All Languages'),
+        options: all.map(lang => ({
+          label: lang.label,
+          value: lang.value,
+        })),
       },
-      ...all.map(lang => ({
-        label: lang.label,
-        value: lang.value,
-      })),
     ];
   }, [t]);
 
@@ -289,7 +276,18 @@ const StartPanel: React.FC<Props> = ({
             />
           </picture>
           <div className="memori--title-container__content">
-            <h2 className="memori--title">{memori.name}</h2>
+            <div className="memori--title-row">
+              <h2 className="memori--title">{memori.name}</h2>
+              {(memori.blockedUntil || notEnoughCredits) && (
+                <BlockedMemoriBadge
+                  memoriName={memori.name}
+                  blockedUntil={memori.blockedUntil}
+                  notEnoughCredits={notEnoughCredits}
+                  showGiverInfo={memori.isGiver}
+                  showTitle
+                />
+              )}
+            </div>
             <>
               {isMobile && showFullDescriptionOnMobile ? (
                 <p className="memori--description-text memori--description-text--full">
@@ -672,17 +670,6 @@ const StartPanel: React.FC<Props> = ({
                     </Tooltip>
                   )} */}
               </div>
-
-              {(memori.blockedUntil || notEnoughCredits) && (
-                <BlockedMemoriBadge
-                  memoriName={memori.name}
-                  blockedUntil={memori.blockedUntil}
-                  notEnoughCredits={notEnoughCredits}
-                  showGiverInfo={memori.isGiver}
-                  showTitle
-                  marginLeft
-                />
-              )}
             </div>
           )}
       </div>