@memori.ai/memori-react 9.0.0-alpha.20 → 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

@@ -105,36 +105,22 @@ pre[class*='language-'] {
     display: flex;
     align-items: center;
     padding: 0.5rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
-    border-radius: var(--memori-radius-box);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background: rgba(0, 0, 0, 0.05);
-    background-color: color-mix(in oklch, var(--memori-main-background) 38%, transparent);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
     gap: var(--memori-spacing-sm);
 }
 
 button.memori-snippet--copy-button {
-    width: 32px !important;
-    height: 32px !important;
+    /* width: 32px !important;
+    height: 32px !important; */
     padding: 0;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem !important;
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--memori-secondary-background);
     transition: all 0.2s ease;
 }
 
-button.memori-snippet--copy-button:hover,
-button.memori-snippet--copy-button:focus {
-    border-color: rgba(0, 0, 0, 0.2);
-    background: rgba(0, 0, 0, 0.1);
-    transform: scale(1.05);
-}
-
 button.memori-snippet--copy-button:active {
-    background: rgba(0, 0, 0, 0.15);
+    /* background: rgba(0, 0, 0, 0.15); */
     transform: scale(0.95);
 }
 
@@ -144,24 +130,8 @@ button.memori-snippet--copy-button svg {
     color: var(--memori-text-color);
 }
 
-.memori-snippet--copied-text {
-    animation: fadeInOut 0.3s ease;
-    color: var(--memori-text-color);
-    font-size: 0.75rem;
-    font-weight: var(--memori-text-weight-semibold);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-}
-
-@keyframes fadeInOut {
-    0% {
-        opacity: 0;
-        transform: translateX(-4px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+.memori-snippet button.memori-snippet--copy-button--copied svg {
+    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/Snippet/Snippet.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
 import { Button } from '@memori.ai/ui';
-import { Copy } from 'lucide-react';
+import { Check, Copy } from 'lucide-react';
 import { prismSyntaxLangs } from '../../helpers/constants';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
@@ -127,15 +127,14 @@ const Snippet = ({
 
         {showCopyButton && (
           <div className="memori-snippet--copy-wrapper">
-            {copied && (
-              <span className="memori-snippet--copied-text">{t('copied') || 'Copied!'}</span>
-            )}
             <Button
               variant="ghost"
               shape="circle"
-              className="memori-snippet--copy-button"
-              title={t('copy') || 'Copy'}
-              icon={<Copy />}
+              className={cx('memori-snippet--copy-button', {
+                'memori-snippet--copy-button--copied': copied,
+              })}
+              title={copied ? t('copied') || 'Copied' : t('copy') || 'Copy'}
+              icon={copied ? <Check /> : <Copy />}
               onMouseDown={handleCopy}
             />
           </div>

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 {
@@ -182,6 +199,84 @@
     line-height: var(--memori-text-line-tight);
     overflow-wrap: break-word;
     overflow-x: hidden;
+    padding-inline-end: 8px;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    .memori--start-panel,
+    .memori--description-text,
+    .memori-chat-layout--start-panel-wrap {
+        scrollbar-color: color-mix(in oklch, var(--memori-text-color) 14%, transparent) transparent;
+        scrollbar-width: thin;
+    }
+
+    .memori--start-panel:hover,
+    .memori--start-panel:focus-within,
+    .memori--start-panel:active,
+    .memori--description-text:hover,
+    .memori--description-text:focus-within,
+    .memori--description-text:active,
+    .memori-chat-layout--start-panel-wrap:hover,
+    .memori-chat-layout--start-panel-wrap:focus-within,
+    .memori-chat-layout--start-panel-wrap:active {
+        scrollbar-color: color-mix(in oklch, var(--memori-text-color) 38%, transparent) transparent;
+    }
+}
+
+.memori--start-panel::-webkit-scrollbar,
+.memori--description-text::-webkit-scrollbar,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+.memori--start-panel::-webkit-scrollbar-track,
+.memori--description-text::-webkit-scrollbar-track,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-track {
+    margin: 4px 0;
+    background: transparent;
+}
+
+.memori--start-panel::-webkit-scrollbar-thumb,
+.memori--description-text::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-text-color) 14%, transparent);
+}
+
+.memori--start-panel:hover::-webkit-scrollbar-thumb,
+.memori--start-panel:focus-within::-webkit-scrollbar-thumb,
+.memori--start-panel:active::-webkit-scrollbar-thumb,
+.memori--description-text:hover::-webkit-scrollbar-thumb,
+.memori--description-text:focus-within::-webkit-scrollbar-thumb,
+.memori--description-text:active::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap:hover::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap:focus-within::-webkit-scrollbar-thumb,
+.memori-chat-layout--start-panel-wrap:active::-webkit-scrollbar-thumb,
+.memori--start-panel::-webkit-scrollbar-thumb:hover,
+.memori--description-text::-webkit-scrollbar-thumb:hover,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-text-color) 38%, transparent);
+}
+
+.memori--start-panel::-webkit-scrollbar-thumb:active,
+.memori--description-text::-webkit-scrollbar-thumb:active,
+.memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb:active {
+    background-color: color-mix(in oklch, var(--memori-text-color) 52%, transparent);
+}
+
+@media (hover: none) {
+    .memori--start-panel,
+    .memori--description-text,
+    .memori-chat-layout--start-panel-wrap {
+        scrollbar-color: color-mix(in oklch, var(--memori-text-color) 28%, transparent) transparent;
+    }
+
+    .memori--start-panel::-webkit-scrollbar-thumb,
+    .memori--description-text::-webkit-scrollbar-thumb,
+    .memori-chat-layout--start-panel-wrap::-webkit-scrollbar-thumb {
+        background-color: color-mix(in oklch, var(--memori-text-color) 28%, transparent);
+    }
 }
 
 .memori--description-text--full {
@@ -473,6 +568,12 @@
         text-align: left;
     }
 
+    .memori--description-text--expand-symbol,
+    .memori--description-text--collapse-symbol {
+        width: 100%;
+        justify-content: space-between;
+    }
+
     .memori--description-text > button svg,
     .memori--description-text .memori-expandable__button svg {
         margin-left: auto;
@@ -525,6 +626,16 @@
     text-align: left;
 }
 
+.memori--title-container__content
+    .memori--description-text--collapsible:has(.memori--description-text--expand-symbol)
+    .memori-expandable__inner {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    text-overflow: ellipsis;
+}
+
 .memori--description-text--expand-symbol,
 .memori--description-text--collapse-symbol {
     display: inline-flex;
@@ -532,9 +643,21 @@
     color: var(--memori-primary);
     font-size: 0.8rem;
     font-weight: var(--memori-text-weight-medium);
+    gap: var(--memori-spacing-xs);
     line-height: 1.2;
 }
 
+.memori--description-text--toggle-chevron {
+    width: 0.85rem;
+    height: 0.85rem;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.memori--description-text--toggle-chevron--up {
+    transform: rotate(180deg);
+}
+
 /* The Expandable toggle is a memori-button ghost, which inherits a global
    `transform: scale(1.015)` on hover from @memori.ai/ui. Disable it here. */
 .memori-expandable.memori--description-text--collapsible .memori-button:hover:not(:disabled, .memori-button--disabled),
@@ -838,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};`)
@@ -84,6 +84,26 @@ Default.args = {
   onClickStart: () => {},
 };
 
+export const WithLongDescription = Template.bind({});
+WithLongDescription.args = {
+  memori: {
+    ...memori,
+    enableCompletions: false,
+    description:
+      'Un agente conversazionale pensato per accogliere visitatori, rispondere alle domande più frequenti e accompagnare le persone nella scoperta di contenuti, servizi e storie. La descrizione è volutamente lunga così da verificare il troncamento a tre righe, l’ellipsis e il toggle Espandi/Riduci.',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'it',
+  setUserLang: () => {},
+  setVenue: () => {},
+  openPositionPopover: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
 export const WithExistingSession = Template.bind({});
 WithExistingSession.args = {
   memori: {

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">
@@ -304,11 +302,19 @@ const StartPanel: React.FC<Props> = ({
                   expandSymbol={_lang => (
                     <span className="memori--description-text--expand-symbol">
                       {t('expand')}
+                      <ChevronDown
+                        className="memori--description-text--toggle-chevron"
+                        aria-hidden
+                      />
                     </span>
                   )}
                   collapseSymbol={_lang => (
                     <span className="memori--description-text--collapse-symbol">
                       {t('collapse')}
+                      <ChevronDown
+                        className="memori--description-text--toggle-chevron memori--description-text--toggle-chevron--up"
+                        aria-hidden
+                      />
                     </span>
                   )}
                 >
@@ -664,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>