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

package/src/components/StartPanel/StartPanel.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { memori, tenant, sessionID, integration, user } from '../../mocks/data';
 import StartPanel from './StartPanel';
 
@@ -306,3 +307,65 @@ it('renders StartPanel with completion provider down unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders StartPanel with not enough credits unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      setVenue={jest.fn()}
+      openPositionPopover={() => {}}
+      instruct={false}
+      clickedStart={false}
+      onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
+      notEnoughCredits
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+// When the agent owner has not enough credits, opening the chat for a PUBLIC
+// agent must not start a session nor ask for a password: the start button is
+// disabled and a "not enough credits" badge is shown instead.
+it('blocks start and shows credits badge when owner has not enough credits', () => {
+  const onClickStart = jest.fn();
+  const { container, getByText, queryByPlaceholderText } = render(
+    <StartPanel
+      memori={{ ...memori, privacyType: 'PUBLIC' }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      setVenue={jest.fn()}
+      openPositionPopover={() => {}}
+      instruct={false}
+      clickedStart={false}
+      onClickStart={onClickStart}
+      setShowLoginDrawer={jest.fn()}
+      notEnoughCredits
+    />
+  );
+
+  const startButton = container.querySelector(
+    '.memori--start-actions__start'
+  ) as HTMLButtonElement;
+  expect(startButton).toBeInTheDocument();
+  expect(startButton).toBeDisabled();
+
+  // Clicking the disabled button must not attempt to open a session.
+  fireEvent.click(startButton);
+  expect(onClickStart).not.toHaveBeenCalled();
+
+  // No password field is ever rendered for a public agent.
+  expect(queryByPlaceholderText('Password')).not.toBeInTheDocument();
+
+  // The credits badge is rendered (tooltip content is portaled on hover by
+  // @memori.ai/ui and is covered by BlockedMemoriBadge unit tests).
+  const badge = container.querySelector('.blocked-memori-badge--wrapper');
+  expect(badge).toBeInTheDocument();
+  expect(getByText('memoriBlockedTitle')).toBeInTheDocument();
+});

package/src/components/StartPanel/StartPanel.tsx

@@ -27,6 +27,8 @@ import CompletionProviderStatus, {
   Props as CPSProps,
 } from '../CompletionProviderStatus/CompletionProviderStatus';
 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
@@ -96,6 +98,11 @@ const StartPanel: React.FC<Props> = ({
   showFullDescriptionOnMobile = false,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
+  const boardOfExpertsTooltip = usePressTooltip();
+  const nsfwTooltip = usePressTooltip();
+  const deepThoughtTooltip = usePressTooltip();
+  const privacyTooltip = usePressTooltip();
   const [translatedDescription, setTranslatedDescription] = useState(
     memori.description
   );
@@ -213,21 +220,35 @@ const StartPanel: React.FC<Props> = ({
       >
         {!!memori.enableBoardOfExperts && (
           <div className="memori--board-of-experts">
-            <Tooltip align="left" content={t('boardOfExperts')}>
+            <Tooltip
+              align="left"
+              content={t('boardOfExperts')}
+              {...boardOfExpertsTooltip.tooltipProps}
+            >
               <Button
                 type="button"
                 variant="ghost"
                 shape="circle"
                 aria-label={t('boardOfExperts') || 'Board of Experts'}
                 icon={<Users aria-hidden />}
+                {...boardOfExpertsTooltip.pressTriggerProps}
               />
             </Tooltip>
           </div>
         )}
         {!!memori.nsfw && (
           <div className="memori--nsfw">
-            <Tooltip align="left" content={t('nsfw')}>
-              <span title={t('nsfw') || 'NSFW'}>🔞</span>
+            <Tooltip
+              align="left"
+              content={t('nsfw')}
+              {...nsfwTooltip.tooltipProps}
+            >
+              <span
+                title={t('nsfw') || 'NSFW'}
+                {...nsfwTooltip.pressTriggerProps}
+              >
+                🔞
+              </span>
             </Tooltip>
           </div>
         )}
@@ -283,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>
                   )}
                 >
@@ -424,7 +453,7 @@ const StartPanel: React.FC<Props> = ({
                           </div>
                         </div>
                         <div className="memori--settings-section__actions-right">
-                          {!isUserLoggedIn && showLogin && (
+                          {!isMobile && !isUserLoggedIn && showLogin && (
                             <Button
                               variant="toolbar"
                               size="sm"
@@ -453,6 +482,7 @@ const StartPanel: React.FC<Props> = ({
                               leaveDelay={150}
                               sideOffset={8}
                               content={t('deepThoughtHelper')}
+                              {...deepThoughtTooltip.tooltipProps}
                               slotProps={{
                                 positioner: {
                                   className:
@@ -471,6 +501,7 @@ const StartPanel: React.FC<Props> = ({
                                 aria-label={String(
                                   t('deepThoughtHelper') ?? 'Deep Thought help'
                                 )}
+                                {...deepThoughtTooltip.pressTriggerProps}
                               >
                                 <Info className="memori--settings-section__inline-info-icon" />
                               </Button>
@@ -557,6 +588,7 @@ const StartPanel: React.FC<Props> = ({
                               </a>
                             </div>
                           }
+                          {...privacyTooltip.tooltipProps}
                           slotProps={{
                             positioner: {
                               className: 'memori--privacy-popover-positioner',
@@ -572,6 +604,7 @@ const StartPanel: React.FC<Props> = ({
                             size="sm"
                             className="memori--privacy-popover-trigger memori--settings-section__info-trigger"
                             aria-label={String(t('privacyPolicy') ?? '')}
+                            {...privacyTooltip.pressTriggerProps}
                           >
                             <Info className="memori--settings-section__inline-info-icon" />
                           </Button>
@@ -640,12 +673,6 @@ const StartPanel: React.FC<Props> = ({
                   )} */}
               </div>
 
-              <p className="memori--start-description">
-                {instruct
-                  ? t('write_and_speak.pageInstructExplanation')
-                  : t('write_and_speak.pageTryMeExplanation')}
-              </p>
-
               {(memori.blockedUntil || notEnoughCredits) && (
                 <BlockedMemoriBadge
                   memoriName={memori.name}
@@ -660,6 +687,7 @@ const StartPanel: React.FC<Props> = ({
           )}
       </div>
       <Modal
+        container={surfaceEl ?? undefined}
         open={isMobile && mobileInfoModal !== null}
         onClose={() => setMobileInfoModal(null)}
         title={