@memori.ai/memori-react 9.0.0-alpha.4 → 9.0.0-alpha.6

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

@@ -370,3 +370,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,
+};

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,7 @@ import CompletionProviderStatus, {
   Props as CPSProps,
 } from '../CompletionProviderStatus/CompletionProviderStatus';
 import { Expandable } from '@memori.ai/ui';
+import { usePressTooltip } from '../../helpers/usePressTooltip';
 
 /**
  * Sentinel values used as non-selectable section headers in the language
@@ -96,6 +97,10 @@ const StartPanel: React.FC<Props> = ({
   showFullDescriptionOnMobile = false,
 }) => {
   const { t, i18n } = useTranslation();
+  const boardOfExpertsTooltip = usePressTooltip();
+  const nsfwTooltip = usePressTooltip();
+  const deepThoughtTooltip = usePressTooltip();
+  const privacyTooltip = usePressTooltip();
   const [translatedDescription, setTranslatedDescription] = useState(
     memori.description
   );
@@ -213,21 +218,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>
         )}
@@ -453,6 +472,7 @@ const StartPanel: React.FC<Props> = ({
                               leaveDelay={150}
                               sideOffset={8}
                               content={t('deepThoughtHelper')}
+                              {...deepThoughtTooltip.tooltipProps}
                               slotProps={{
                                 positioner: {
                                   className:
@@ -471,6 +491,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 +578,7 @@ const StartPanel: React.FC<Props> = ({
                               </a>
                             </div>
                           }
+                          {...privacyTooltip.tooltipProps}
                           slotProps={{
                             positioner: {
                               className: 'memori--privacy-popover-positioner',
@@ -572,6 +594,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>

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

@@ -2907,6 +2907,267 @@ exports[`renders StartPanel with multilangual unchanged 1`] = `
 </div>
 `;
 
+exports[`renders StartPanel with not enough credits unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    />
+    <div
+      class="memori--start-panel__body"
+    >
+      <div
+        class="memori--title-container"
+      >
+        <picture
+          class="memori--avatar"
+        >
+          <source
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+          <img
+            alt="Memori"
+            src="https://aisuru.com/images/aisuru/square_logo.png"
+          />
+        </picture>
+        <div
+          class="memori--title-container__content"
+        >
+          <h2
+            class="memori--title"
+          >
+            Memori
+          </h2>
+          <div
+            class="memori-expandable memori--description-text memori--description-text--collapsible"
+          >
+            <div
+              class="memori-expandable__inner"
+              style="max-height: 9999px;"
+            >
+              Lorem ipsum.
+            </div>
+          </div>
+        </div>
+        <div
+          class="memori--completion-provider-status--loading"
+        >
+          <div
+            class="memori-spin memori-spin--spinning"
+          >
+            <div
+              aria-label="Loading"
+              aria-live="polite"
+              class="memori-spin__overlay"
+              role="status"
+            >
+              <div
+                class="memori-spin__container"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-loader-circle memori-spin__icon"
+                  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="M21 12a9 9 0 1 1-6.219-8.56"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="memori--description"
+      >
+        <section
+          class="memori--start-panel__mobile-info"
+        >
+          <div
+            class="memori--start-panel__mobile-info-content"
+          >
+            <section
+              class="memori--settings-section"
+            >
+              <div
+                class="memori--settings-section__row"
+              >
+                <div
+                  aria-hidden="true"
+                  class="memori--settings-section__icon-box memori--settings-section__icon-box--neutral"
+                >
+                  <svg
+                    class="lucide lucide-eye memori--settings-section__icon"
+                    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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="3"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="memori--settings-section__content"
+                >
+                  <div
+                    class="memori--settings-section__title-inline"
+                  >
+                    <p
+                      class="memori--settings-section__title"
+                    >
+                      write_and_speak.pagePrivacyExplanation
+                    </p>
+                  </div>
+                  <p
+                    class="memori--settings-section__description"
+                  >
+                    write_and_speak.pagePrivacyExplanationList.authorUsesInfo
+                  </p>
+                </div>
+                <span
+                  class="memori-tooltip"
+                >
+                  <span
+                    class="memori-tooltip__trigger"
+                    id="base-ui-:r35:"
+                  >
+                    <button
+                      aria-label="privacyPolicy"
+                      class="memori-button memori-button--toolbar memori-button--sm memori--privacy-popover-trigger memori--settings-section__info-trigger"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="memori-button__content"
+                      >
+                        <svg
+                          class="lucide lucide-info memori--settings-section__inline-info-icon"
+                          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"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 16v-4"
+                          />
+                          <path
+                            d="M12 8h.01"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </span>
+                </span>
+              </div>
+            </section>
+          </div>
+        </section>
+        <div
+          class="memori--start-actions"
+        >
+          <button
+            class="memori-button memori-button--primary memori-button--lg memori-button--disabled memori--start-actions__start"
+            data-disabled=""
+            disabled=""
+            style="font-weight: var(--memori-text-weight-bold);"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="memori-button__content"
+            >
+              write_and_speak.tryMeButton
+            </span>
+          </button>
+        </div>
+        <p
+          class="memori--start-description"
+        >
+          write_and_speak.pageTryMeExplanation
+        </p>
+        <span
+          class="memori-tooltip blocked-memori-badge--tooltip"
+        >
+          <span
+            class="memori-tooltip__trigger"
+            id="base-ui-:r37:"
+          >
+            <div
+              class="blocked-memori-badge--wrapper"
+            >
+              <div
+                class="blocked-memori-badge  margin-left"
+              >
+                <svg
+                  class="lucide lucide-triangle-alert blocked-memori-badge--icon"
+                  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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+                  />
+                  <path
+                    d="M12 9v4"
+                  />
+                  <path
+                    d="M12 17h.01"
+                  />
+                </svg>
+              </div>
+              <span
+                class="blocked-memori-badge--title"
+              >
+                memoriBlockedTitle
+              </span>
+            </div>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel with position required unchanged 1`] = `
 <div>
   <div

package/src/components/UploadButton/UploadButton.tsx

@@ -12,7 +12,7 @@ import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-
+import { officeNativeExtensions } from '../../helpers/constants';
 // Props interface
 interface UploadManagerProps {
   authToken?: string;
@@ -116,6 +116,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       '.csv',
       '.md',
       '.html',
+      ...officeNativeExtensions,
     ];
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
     return documentExtensions.includes(fileExt);
@@ -413,15 +414,30 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     // Process each document file
     const processedDocuments = files.map(file => {
       const escapedFileName = escapeAttributeValue(file.name);
-      // Truncate the inlined content to the per-document character limit.
-      // The full text remains available via the uploaded asset link.
-      const inlinedContent =
-        file.content.length > effectivePerDocumentLimit
-          ? file.content.slice(0, effectivePerDocumentLimit)
-          : file.content;
-      const formattedContent = `<document_attachment filename="${escapedFileName}" type="${
-        file.mimeType
-      }">
+
+      let formattedContent: string;
+
+      if (!file.content) {
+        // Office native format: metadata-only attachment tag + asset link (no text body)
+        formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
+</document_attachment>
+
+<attachment_link>
+${file.textAssetUrl || ''}
+</attachment_link>`;
+      } else {
+        // Truncate only the content that gets inlined inside the message
+        // <document_attachment> tag. The full text is still available via
+        // textAssetUrl as an uploaded asset.
+        const inlinedContent =
+          file.content.length > effectivePerDocumentLimit
+            ? file.content.substring(0, effectivePerDocumentLimit) +
+              '\n\n[Content truncated due to size limits]'
+            : file.content;
+
+        formattedContent = `<document_attachment filename="${escapedFileName}" type="${
+          file.mimeType
+        }">
 
 ${inlinedContent}
 
@@ -430,6 +446,7 @@ ${inlinedContent}
 <attachment_link>
 ${file.textAssetUrl || ''}
 </attachment_link>`;
+      }
 
       return {
         name: file.name,
@@ -437,6 +454,7 @@ ${file.textAssetUrl || ''}
         content: formattedContent,
         type: 'document',
         mimeType: file.mimeType,
+        url: file.textAssetUrl,
       };
     });
 
@@ -455,6 +473,7 @@ ${file.textAssetUrl || ''}
       '.csv',
       '.md',
       '.html',
+      ...officeNativeExtensions,
     ];
     const MAX_FILE_SIZE = 15 * 1024 * 1024; // 15MB
 
@@ -607,7 +626,7 @@ ${file.textAssetUrl || ''}
       <input
         ref={unifiedInputRef}
         type="file"
-        accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+        accept={`.jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html,${officeNativeExtensions.join(',')}`}
         multiple
         className="memori--upload-file-input"
         onChange={handleFileInputChange}