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

package/src/components/ShareButton/ShareButton.css

@@ -23,8 +23,9 @@
     max-height: 1rem;
 }
 
-.memori-share-button .memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary, #3b82f6) 40%, transparent);
+.memori-share-button .memori-icon-button.memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
+    /* Soft active owned by IconButton.css */
+    box-shadow: none;
 }
 
 .memori-share-button--trigger-menu-item {

package/src/components/ShareButton/ShareButton.tsx

@@ -16,6 +16,7 @@ import {
   createAlertOptions,
   Tooltip,
 } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import cx from 'classnames';
 import {
   Tenant,
@@ -549,25 +550,26 @@ const ShareButton: React.FC<Props> = ({
           showChevron={false}
           className="memori-share-button--trigger"
           render={(props: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
-            <Button
+            <IconButton
               {...props}
               variant={triggerVariant}
+              active={isShareMenuOpen}
+              title={String(triggerLabel || t('widget.share') || 'Share')}
               aria-label={String(
                 triggerLabel || t('widget.share') || 'Share'
               )}
               icon={<Share2 aria-hidden />}
-              className={cx(
-                {
-                  'memori-share-button--trigger-menu-item':
-                    triggerMode === 'menu-item',
-                },
-                isShareMenuOpen && 'memori-button--active'
-              )}
+              className={cx({
+                'memori-share-button--trigger-menu-item':
+                  triggerMode === 'menu-item',
+              })}
             >
-              {triggerMode === 'menu-item'
-                ? triggerLabel || t('widget.share')
-                : undefined}
-            </Button>
+              {triggerMode === 'menu-item' || triggerLabel ? (
+                <span className="memori-header--action-label">
+                  {triggerLabel || t('widget.share')}
+                </span>
+              ) : undefined}
+            </IconButton>
           )}
         />
       </Tooltip>

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

@@ -6,19 +6,20 @@ exports[`renders ShareButton aligned left unchanged 1`] = `
     class="memori-dropdown memori-share-button memori-share-button--align-left"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1d:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r1e:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -88,19 +89,20 @@ exports[`renders ShareButton unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r5:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r6:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -170,19 +172,20 @@ exports[`renders ShareButton with button not primary unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:rt:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:ru:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -252,19 +255,20 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1t:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r1u:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -334,19 +338,20 @@ exports[`renders ShareButton with share chat unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r25:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r26:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -416,19 +421,20 @@ exports[`renders ShareButton with tenant img set unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1l:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r1m:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -498,19 +504,20 @@ exports[`renders ShareButton with title unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:rl:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:rm:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -580,19 +587,20 @@ exports[`renders ShareButton with url unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:rd:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:re:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -662,19 +670,20 @@ exports[`renders ShareButton without qr code unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r15:"
       >
         <button
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r16:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span

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-color, #22c55e);
 }
 
 .memori-snippet--caption {

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

@@ -84,6 +84,8 @@
 .memori--title-container {
     position: relative;
     display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
     align-items: flex-start;
     padding: var(--memori-spacing-lg) 0;
     /* position: absolute;
@@ -122,6 +124,7 @@
     overflow: hidden;
     width: var(--memori-spacing-4xl);
     height: var(--memori-spacing-4xl);
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
@@ -135,13 +138,17 @@
 }
 
 .memori--title {
-    display: inline-block;
+    display: block;
+    overflow: hidden;
+    min-width: 0;
     margin: 0;
     margin-bottom: var(--memori-spacing-sm);
     color: var(--memori-text-color);
     font-size: var(--memori-text-size-heading-large);
     font-weight: var(--memori-text-weight-semibold);
     line-height: var(--memori-text-line-tight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori--description,
@@ -175,6 +182,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 {
@@ -210,15 +295,6 @@
     font-size: var(--memori-text-size-small);
 }
 
-.memori--start-description {
-    margin-top: auto;
-    margin-top: var(--memori-spacing-sm);
-    margin-bottom: 0;
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-    opacity: 0.85;
-}
-
 .memori--title-container__content {
     display: flex;
     min-width: 0;
@@ -475,6 +551,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;
@@ -527,6 +609,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;
@@ -534,9 +626,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),

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

@@ -51,7 +51,7 @@ const integrationStylesheet =
 const dataTheme =
   integrationConfig?.theme === 'light' || integrationConfig?.theme === 'dark'
     ? integrationConfig.theme
-    : undefined;
+    : 'light';
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
@@ -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: {
@@ -370,3 +390,25 @@ WithCompletionProviderDown.args = {
   onClickStart: () => {},
   _TEST_forceProviderStatus: 'major',
 };
+
+/** Public agent whose owner has run out of credits: the start button is
+ * disabled and a "not enough credits" badge is shown instead of starting a
+ * session or asking for a password. */
+export const NotEnoughCredits = Template.bind({});
+NotEnoughCredits.args = {
+  memori: {
+    ...memori,
+    privacyType: 'PUBLIC',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  setVenue: () => {},
+  openPositionPopover: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+  notEnoughCredits: true,
+};