@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/FeedbackButtons/FeedbackButtons.tsx

@@ -1,10 +1,15 @@
 import { Memori } from '@memori.ai/memori-api-client/dist/types';
 import React, { useState } from 'react';
-import { Menu, Transition } from '@headlessui/react';
-import Tooltip from '../ui/Tooltip';
-import Button from '../ui/Button';
-import Feedback from '../icons/Feedback';
-
+import {
+  Tooltip,
+  Button,
+  Dropdown,
+  useAlertManager,
+  createAlertOptions,
+} from '@memori.ai/ui';
+import { MessageSquare } from 'lucide-react';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
 const feedbackMsgs = {
   'it-IT': 'Non è quello che ti ho chiesto',
   'fr-FR': "Ce n'est pas ce que je t'ai demandé",
@@ -38,7 +43,30 @@ const FeedbackButtons = ({
   toggle = false,
   dropdown = false,
 }: Props) => {
+  const { t } = useTranslation();
+  const { add } = useAlertManager();
   const [clicked, setClicked] = useState<'up' | 'down'>();
+  const feedbackLabel = t('feedback') || 'Feedback';
+  const feedbackThankYou =
+    t('feedbackThankYou') || 'Thank you for your feedback.';
+
+  const showChoiceAlert = (message: string) => {
+    add(
+      createAlertOptions({
+        description: message,
+        severity: 'info',
+      })
+    );
+  };
+
+  const showFeedbackSuccessAlert = () => {
+    add(
+      createAlertOptions({
+        description: feedbackThankYou,
+        severity: 'success',
+      })
+    );
+  };
   const culture =
     memori.culture === 'it-IT'
       ? 'it-IT'
@@ -52,91 +80,90 @@ const FeedbackButtons = ({
   return (
     <div className={`memori-chat--feedback${className ? ` ${className}` : ''}`}>
       {dropdown ? (
-        <Menu as="div" className="memori-chat--feedback-menu">
-          <Menu.Button as={React.Fragment}>
-            <Button
-              ghost
-              shape="circle"
-              title="Feedback"
-              className="memori-chat--feedback-menu-button"
-              disabled={!!clicked}
-              icon={
-                <Feedback
-                  className={
-                    clicked ? 'memori-chat--feedback-clicked' : undefined
-                  }
-                />
-              }
-            />
-          </Menu.Button>
-          <Transition
-            as={React.Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="memori-chat--feedback-menu-items">
-              <div className="memori-chat--feedback-menu-items-container">
-                <Menu.Item key="ok">
-                  {({ active }) => (
-                    <button
-                      className={`memori-chat--feedback-menu-item${
-                        active ? ' memori-chat--feedback-menu-item-active' : ''
-                      }`}
-                      onClick={() => {
-                        if (clicked === 'up' && !!toggle) {
-                          setClicked(undefined);
-                        } else {
-                          setClicked('up');
-                        }
-                      }}
-                    >
-                      {dislikeMsg}
-                    </button>
-                  )}
-                </Menu.Item>
-                <Menu.Item key="no">
-                  {({ active }) => (
-                    <button
-                      className={`memori-chat--feedback-menu-item${
-                        active ? ' memori-chat--feedback-menu-item-active' : ''
-                      }`}
-                      onClick={() => {
-                        if (clicked === 'down' && !!toggle) {
-                          setClicked(undefined);
-                        } else {
-                          setClicked('down');
+        <Tooltip placement="bottom" content={feedbackLabel}>
+          <span className="memori-chat--feedback-tooltip-trigger">
+            <Dropdown className="memori-chat--feedback-menu">
+              <Dropdown.Trigger
+                className="memori-chat--feedback-button"
+                showChevron={false}
+                render={(
+                  props: React.ButtonHTMLAttributes<HTMLButtonElement>
+                ) => (
+                  <Button
+                    {...props}
+                    variant="ghost"
+                    aria-label={feedbackLabel}
+                    disabled={!!clicked}
+                    icon={
+                      <MessageSquare
+                        className={
+                          clicked ? 'memori-chat--feedback-clicked' : undefined
                         }
+                      />
+                    }
+                  />
+                )}
+              />
+              <Dropdown.Menu
+                className="memori-chat--feedback-menu-items"
+                placement="bottom"
+                align="start"
+              >
+                <div className="memori-chat--feedback-menu-items-container">
+                  <Dropdown.Item
+                    key="ok"
+                    className="memori-chat--feedback-menu-item"
+                    onClick={() => {
+                      if (clicked === 'up' && !!toggle) {
+                        setClicked(undefined);
+                      } else {
+                        setClicked('up');
+                        showChoiceAlert(dislikeMsg);
+                        showFeedbackSuccessAlert();
+                      }
+                    }}
+                  >
+                    {dislikeMsg}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    key="no"
+                    className="memori-chat--feedback-menu-item"
+                    onClick={() => {
+                      if (clicked === 'down' && !!toggle) {
+                        setClicked(undefined);
+                      } else {
+                        setClicked('down');
                         onNegativeClick(feedbackMsg);
-                      }}
-                    >
-                      {feedbackMsgHelper}
-                    </button>
-                  )}
-                </Menu.Item>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
+                        showChoiceAlert(feedbackMsgHelper);
+                        showFeedbackSuccessAlert();
+                      }
+                    }}
+                  >
+                    {feedbackMsgHelper}
+                  </Dropdown.Item>
+                </div>
+              </Dropdown.Menu>
+            </Dropdown>
+          </span>
+        </Tooltip>
       ) : (
-        <Tooltip align="left" content="Feedback">
+        <Tooltip placement="bottom" content={feedbackLabel}>
           <Button
-            title="Feedback"
+            aria-label={feedbackLabel}
             onClick={() => {
               if (clicked === 'down' && !!toggle) {
                 setClicked(undefined);
               } else {
                 setClicked('down');
+                onNegativeClick(feedbackMsg);
+                showChoiceAlert(feedbackMsg);
+                showFeedbackSuccessAlert();
               }
-              onNegativeClick(feedbackMsg);
             }}
-            ghost
+            variant="ghost"
             shape="circle"
             icon={
-              <Feedback
+              <MessageSquare
                 className={
                   clicked ? 'memori-chat--feedback-clicked' : undefined
                 }

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

@@ -5,38 +5,51 @@ exports[`renders FeedbackButtons unchanged 1`] = `
   <div
     class="memori-chat--feedback"
   >
-    <div
-      class="memori-tooltip memori-tooltip--align-left"
+    <span
+      class="styles-module__root___-ALla"
     >
-      <div
-        class="memori-tooltip--trigger"
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1:"
       >
         <button
-          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only"
-          title="Feedback"
+          aria-label="feedback"
+          class="memori-button memori-button--ghost memori-button--md memori-button--circle memori-button--icon-only"
+          tabindex="0"
+          type="button"
         >
           <span
-            class="memori-button--icon"
+            class="memori-button__icon"
           >
             <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
+              class="lucide lucide-message-square"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
               viewBox="0 0 24 24"
+              width="24"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M0 0h24v24H0V0z"
-                fill="none"
-              />
-              <path
-                d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17l-.59.59-.58.58V4h16v12zm-9-4h2v2h-2zm0-6h2v4h-2z"
+                d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
               />
             </svg>
           </span>
         </button>
-      </div>
-    </div>
+      </span>
+    </span>
   </div>
+  <div
+    aria-atomic="false"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="memori-alert-viewport memori-alert-viewport--top-end"
+    role="region"
+    tabindex="-1"
+  />
 </div>
 `;

package/src/components/FilePreview/FilePreview.css

@@ -6,9 +6,9 @@
     width: 100%;
     min-width: 0;
     max-width: 100%;
-    border-radius: 8px;
+    border-radius: 0.5rem;
     animation: slide-in 0.3s ease;
-    background: white;
+    background: var(--memori-main-background);
     transition: all 0.3s ease;
 }
 
@@ -23,8 +23,8 @@
     }
 
     .memori--preview-container {
-        padding: 8px;
-        margin-bottom: 8px;
+        padding: var(--memori-spacing-sm);
+        margin-bottom: var(--memori-spacing-sm);
     }
 
     .memori--preview-filename {
@@ -32,17 +32,11 @@
         font-size: 12px;
     }
 
-    /* Make remove button always visible on mobile */
-    .memori--remove-button {
-        opacity: 1 !important;
-        transform: scale(1) !important;
-    }
-
     /* Increase card size for easier interaction */
     .memori--preview-item {
         min-width: 140px;
         min-height: 60px;
-        padding: 12px;
+        padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
     }
 
     .memori--preview-icon {
@@ -68,8 +62,8 @@
     }
 
     .memori--preview-container {
-        padding: 6px;
-        margin-bottom: 6px;
+        padding: calc(var(--memori-spacing-xs) + 2px);
+        margin-bottom: var(--memori-spacing-sm);
     }
 
     .memori--preview-filename {
@@ -87,7 +81,7 @@
     .memori--preview-item {
         min-width: 160px;
         min-height: 70px;
-        padding: 14px;
+        padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs) + 2px);
     }
 
     .memori--preview-icon {
@@ -109,13 +103,15 @@
 
 .memori--message-preview {
     max-width: 100%;
-    margin: 12px 0;
+    margin: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) 0;
 }
 
 .memori--preview-list {
     display: flex;
     width: 100%;
     min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
     flex-direction: row;
     flex-wrap: nowrap;
     padding: 0.875rem;
@@ -124,8 +120,10 @@
     -webkit-overflow-scrolling: touch;
     overflow-x: auto;
     overflow-y: hidden;
+    overscroll-behavior-x: contain;
     scrollbar-color: hsla(var(--border-300) / 35%) transparent;
     scrollbar-width: thin;
+    touch-action: pan-x;
 }
 
 .memori--preview-item {
@@ -134,25 +132,38 @@
     max-width: fit-content;
     flex-shrink: 0;
     align-items: center;
-    padding: 8px;
-    border-radius: 8px;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    border-radius: 0.5rem;
     animation: slide-in 0.3s ease;
-    background-color: #f8f9fa;
-    cursor: pointer;
-    gap: 8px;
+    background-color: var(--memori-secondary-background);
+    gap: var(--memori-spacing-sm);
     transition: all 0.2s ease;
 }
 
+.memori--preview-item-trigger {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    gap: var(--memori-spacing-sm);
+    text-align: left;
+}
+
 .memori--preview-item:hover {
-    background-color: #f1f3f5;
-    transform: translateX(4px);
+    background-color: var(--memori-secondary-background);
 }
 
 .memori--preview-icon {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
-    color: #fff;
+    color: var(--memori-text-color);
     fill: #868e96;
 }
 
@@ -162,13 +173,14 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
+    border-radius: 0.5rem;
+    background-color: white;
 }
 
 .memori--preview-thumbnail img {
     width: 40px;
     height: 40px;
-    border-radius: 4px;
+    border-radius: 0.5rem;
     object-fit: cover;
 }
 
@@ -188,16 +200,16 @@
 .memori--preview-filename {
     overflow: hidden;
     max-width: 100px;
-    color: #495057;
-    font-size: 14px;
-    font-weight: 500;
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-medium);
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .memori--preview-filetype {
-    margin-top: 2px;
-    color: #868e96;
+    margin-top: calc(var(--memori-spacing-xs) / 2);
+    color: var(--memori-text-color);
     font-size: 12px;
 }
 
@@ -210,11 +222,18 @@
 
 .memori--remove-button {
     position: absolute;
-    top: -4px;
-    right: -4px;
+    top: -6px;
+    right: -6px;
+    width: 24px !important;
+    height: 24px !important;
+    min-height: 24px !important;
     padding: 4px;
     border: none;
     border-radius: 50%;
+    border-top-color: currentcolor;
+    border-right-color: currentcolor;
+    border-bottom-color: currentcolor;
+    border-left-color: currentcolor;
     background-color: #e03131;
     color: white;
     cursor: pointer;
@@ -225,13 +244,11 @@
 
 .memori--remove-button:hover {
     background-color: #c92a2a;
-    transform: scale(1.1);
 }
 
 /* Show remove button only when user hovers the preview item */
 .memori--preview-item:hover .memori--remove-button {
     opacity: 1;
-    transform: scale(1);
 }
 
 .memori--remove-icon {
@@ -241,18 +258,17 @@
 
 .memori--modal-preview-file {
     width: 100%;
-    max-width: 800px;
     height: 100%;
-    padding: 12px;
+    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
 }
 
 .memori--preview-content {
-    padding: 16px;
-    border-radius: 8px;
+    padding: var(--memori-spacing-md);
+    border-radius: 0.5rem;
     /* background-color: #f8f9fa; */
     font-family: monospace;
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: var(--memori-text-size-small);
+    line-height: var(--memori-text-line-normal);
 }
 
 /* Skeleton loading card */

package/src/components/FilePreview/FilePreview.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import File from '../icons/File';
-import CloseIcon from '../icons/Close';
-import Button from '../ui/Button';
+import { File, X } from 'lucide-react';
+import { Button } from '@memori.ai/ui';
 import ContentPreviewModal from '../ContentPreviewModal';
 import Snippet from '../Snippet/Snippet';
 import { stripHTML, stripDocumentAttachmentTags } from '../../helpers/utils';
@@ -146,8 +145,8 @@ const FilePreview = ({
               style={{
                 color: 'rgb(138, 138, 138)',
                 display: 'block',
-                marginTop: '6px',
-                marginBottom: '6px',
+                marginTop: '8px',
+                marginLeft: '8px',
                 fontSize: '0.7rem',
               }}
             >
@@ -166,35 +165,44 @@ const FilePreview = ({
                     ? 'memori--preview-item--image'
                     : 'memori--preview-item--document'
                 }`}
-                onClick={() => setSelectedFile(file)}
               >
-                {isImageContent(file.content, file.type) ? (
-                  <div className="memori--preview-thumbnail">
-                    <img src={file.content} alt={file.name} />
-                  </div>
-                ) : (
-                  <File className="memori--preview-icon" />
-                )}
+                <button
+                  type="button"
+                  className="memori--preview-item-trigger"
+                  onClick={() => setSelectedFile(file)}
+                  aria-label={file.name}
+                >
+                  {isImageContent(file.content, file.type) ? (
+                    <div className="memori--preview-thumbnail">
+                      <img src={file.content} alt="" />
+                    </div>
+                  ) : (
+                    <File className="memori--preview-icon" aria-hidden />
+                  )}
 
-                <div className="memori--preview-file-info">
-                  <span className="memori--preview-filename">{file.name}</span>
-                  <span className="memori--preview-filetype">
-                    {file.mimeType
-                      ? getFileExtensionFromMime(file.mimeType)
-                      : getFileType(file.name, file.type)}
-                  </span>
-                </div>
+                  <div className="memori--preview-file-info">
+                    <span className="memori--preview-filename">{file.name}</span>
+                    <span className="memori--preview-filetype">
+                      {file.mimeType
+                        ? getFileExtensionFromMime(file.mimeType)
+                        : getFileType(file.name, file.type)}
+                    </span>
+                  </div>
+                </button>
 
                 {allowRemove && (
                   <Button
-                    shape="rounded"
-                    icon={<CloseIcon />}
+                    shape="circle"
+                    icon={<X aria-hidden />}
                     danger
                     className="memori--remove-button"
-                    onClick={e => {
-                      e.stopPropagation();
-                      removeFile(file.id, file?.mediumID);
-                    }}
+                    aria-label={String(
+                      t('upload.removeFile', {
+                        defaultValue: 'Remove {{name}}',
+                        name: file.name,
+                      })
+                    )}
+                    onClick={() => removeFile(file.id, file?.mediumID)}
                   />
                 )}
               </div>
@@ -221,6 +229,7 @@ const FilePreview = ({
         open={!!selectedFile}
         onClose={() => setSelectedFile(null)}
         title={selectedFile?.name}
+        className="memori-file-preview-modal"
         isImage={
           !!selectedFile &&
           isImageContent(selectedFile.content, selectedFile.type)