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

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

@@ -182,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 {
@@ -473,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;
@@ -525,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;
@@ -532,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

@@ -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

@@ -304,11 +304,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>
                   )}
                 >

package/src/components/UploadButton/UploadButton.css

@@ -435,25 +435,6 @@
     background-color: #fa5252;
 }
 
-/* Document count indicator */
-.memori--document-count {
-    position: absolute;
-    z-index: 5;
-    top: -20px;
-    right: -10px;
-    padding: calc(var(--memori-spacing-xs) / 4) calc(var(--memori-spacing-xs) + 2px);
-    border-radius: var(--memori-radius-box);
-    background-color: #51cf66;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    color: var(--memori-text-color);
-    font-size: 11px;
-    font-weight: bold;
-}
-
-.memori--document-count-full {
-    background-color: #fa5252;
-}
-
 /* Styled upload slots info */
 .memori--upload-slots-info {
     margin-left: var(--memori-spacing-xs);

package/src/components/UploadButton/UploadButton.tsx

@@ -652,17 +652,6 @@ ${file.textAssetUrl || ''}
         )}
       </Tooltip>
 
-      {/* Media count indicator */}
-      {currentMediaCount > 0 && (
-        <div
-          className={cx('memori--document-count', {
-            'memori--document-count-full': hasReachedMediaLimit,
-          })}
-        >
-          {currentMediaCount}/{maxDocumentsPerMessage}
-        </div>
-      )}
-
       {/* Hidden components */}
       <div className="memori--hidden-uploader" ref={documentRef} aria-hidden>
         <UploadDocuments

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -499,7 +499,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               borderTop: '1px solid rgba(255, 255, 255, 0.2)',
             }}
           >
-            <Button onClick={handleCancelUpload} variant="outline" danger>
+            <Button onClick={handleCancelUpload} variant="outline">
               {t('cancel') ?? 'Cancel'}
             </Button>
             <Button

package/src/components/layouts/chat.css

@@ -25,6 +25,7 @@
     line-height: 1.2;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-inline-end: 8px;
     text-align: left;
 }
 
@@ -105,6 +106,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding-inline-end: 6px;
 }
 
 /* Full-bleed input strip across the chat column; field stays on the conversation axis */

package/src/components/layouts/zoomed-full-body.css

@@ -212,6 +212,7 @@
 /* Avatar column: its own rounded panel, wider than the chat sidebar it replaced. */
 .memori-widget.memori-layout-zoomed_full_body .memori--grid-column-left {
     position: relative;
+    z-index: 10;
     display: flex;
     overflow: hidden;
     width: clamp(240px, 34%, 420px);

package/src/helpers/message.ts

@@ -114,6 +114,21 @@ export const renderMsg = (
         /<output\s+class\s*=\s*["\']memori-artifact["\'][^>]*data-mimetype\s*=\s*["\']([^"']+)["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
         ''
       )
+      // Preferred: data-action="update" on memori-artifact
+      .replaceAll(
+        /<output\s+class\s*=\s*["\']memori-artifact["\'][^>]*data-action\s*=\s*["\']update["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
+        ''
+      )
+      // data-action may appear before class
+      .replaceAll(
+        /<output\s+[^>]*data-action\s*=\s*["\']update["\'][^>]*class\s*=\s*["\'][^"']*memori-artifact[^"']*["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
+        ''
+      )
+      // Legacy class name
+      .replaceAll(
+        /<output\s+class\s*=\s*["\']memori-artifact-update["\'][^>]*>([\s\S]*?)(?:<\/output>|$)/gi,
+        ''
+      )
       .replaceAll(/```markdown([^```]+)```/g, '$1')
       .replaceAll('($', '( $')
       .replaceAll(':$', ': $')

package/src/locales/de.json

@@ -263,6 +263,9 @@
   "artifact": {
     "close": "Schließen",
     "size": "Größe",
+    "updated": "aktualisiert",
+    "updateFailed": "Update konnte nicht angewendet werden",
+    "updateFailedHint": "Der Patch stimmt nicht mit dem aktuellen Inhalt überein. Bitten Sie um ein Neuschreiben des Artifacts.",
     "generated": "Generiert",
     "download": "Herunterladen",
     "print": "Drucken",

package/src/locales/en.json

@@ -276,6 +276,9 @@
   "artifact": {
     "close": "Close",
     "size": "Size",
+    "updated": "updated",
+    "updateFailed": "Update could not be applied",
+    "updateFailedHint": "The patch did not match the current content. Ask to rewrite the artifact.",
     "generated": "Generated",
     "download": "Download",
     "print": "Print",

package/src/locales/es.json

@@ -262,6 +262,9 @@
   "artifact": {
     "close": "Cerrar",
     "size": "Tamaño",
+    "updated": "actualizado",
+    "updateFailed": "No se pudo aplicar la actualización",
+    "updateFailedHint": "El parche no coincide con el contenido actual. Pide reescribir el artifact.",
     "generated": "Generado",
     "download": "Descargar",
     "print": "Imprimir",

package/src/locales/fr.json

@@ -262,6 +262,9 @@
   "artifact": {
     "close": "Fermer",
     "size": "Taille",
+    "updated": "mis à jour",
+    "updateFailed": "Mise à jour non appliquée",
+    "updateFailedHint": "Le correctif ne correspond pas au contenu actuel. Demandez de réécrire l'artifact.",
     "generated": "Généré",
     "download": "Télécharger",
     "print": "Imprimer",

package/src/locales/it.json

@@ -278,6 +278,9 @@
   "artifact": {
     "close": "Chiudi",
     "size": "Dimensione",
+    "updated": "aggiornato",
+    "updateFailed": "Aggiornamento non applicato",
+    "updateFailedHint": "Il patch non corrisponde al contenuto attuale. Chiedi di riscrivere l'artifact.",
     "generated": "Generato",
     "download": "Scarica",
     "print": "Stampa",

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '9.0.0-alpha.20';
+export const version = '9.0.0-alpha.21';