@memori.ai/memori-react 7.23.1 → 7.25.0

package/src/components/StartPanel/StartPanel.tsx

@@ -1,5 +1,5 @@
 import {
-  Memori,
+  Memori as MemoriOriginal,
   Tenant,
   Venue,
   User,
@@ -20,8 +20,13 @@ import CompletionProviderStatus, {
   Props as CPSProps,
 } from '../CompletionProviderStatus/CompletionProviderStatus';
 import MapMarker from '../icons/MapMarker';
+import UserIcon from '../icons/User';
 import QuestionHelp from '../icons/QuestionHelp';
 
+interface Memori extends MemoriOriginal {
+  requireLoginToken?: boolean;
+}
+
 export interface Props {
   memori: Memori;
   tenant?: Tenant;
@@ -194,191 +199,210 @@ const StartPanel: React.FC<Props> = ({
           </Button>
         </div>
       )}
-      {((memori.needsPosition && position) || !memori.needsPosition) && (
-        <div className="memori--description">
-          <p>
-            <span className="memori--description-text">
-              {translatedDescription && showTranslation
-                ? translatedDescription
-                : memori.description}
-            </span>
+      {((memori.needsPosition && position) || !memori.needsPosition) &&
+        !!memori.requireLoginToken &&
+        !isUserLoggedIn && (
+          <div className="memori--needsLogin">
+            <p>
+              {t('write_and_speak.requirePositionHelp', { name: memori.name })}
+            </p>
+            <Button
+              primary
+              onClick={() => setShowLoginDrawer(true)}
+              className="memori--start-button"
+              icon={<UserIcon />}
+            >
+              {t('login.login') || 'Login'}
+            </Button>
+          </div>
+        )}
+      {((memori.needsPosition && position) || !memori.needsPosition) &&
+        (!memori.requireLoginToken ||
+          (memori.requireLoginToken && isUserLoggedIn)) && (
+          <div className="memori--description">
+            <p>
+              <span className="memori--description-text">
+                {translatedDescription && showTranslation
+                  ? translatedDescription
+                  : memori.description}
+              </span>
 
-            {translatedDescription !== memori.description && (
-              <Button
-                ghost
-                className="memori--translation-toggle"
-                icon={<Translation />}
-                onClick={() => toggleTranslations()}
-              >
-                {showTranslation
-                  ? t('showOriginalText')
-                  : t('showTranslatedText')}
-              </Button>
-            )}
-          </p>
+              {translatedDescription !== memori.description && (
+                <Button
+                  ghost
+                  className="memori--translation-toggle"
+                  icon={<Translation />}
+                  onClick={() => toggleTranslations()}
+                >
+                  {showTranslation
+                    ? t('showOriginalText')
+                    : t('showTranslatedText')}
+                </Button>
+              )}
+            </p>
 
-          {isMultilanguageEnabled && !instruct && (
-            <div className="memori--language-chooser">
-              <label id="user-lang-pref-label" htmlFor="user-lang-pref">
-                {t('write_and_speak.iWantToTalkToIn', {
-                  name: memori.name,
-                })}
-              </label>
-              <select
-                id="user-lang-pref"
-                className="memori-select--button"
-                value={(userLang ?? i18n.language).toUpperCase()}
-                aria-labelledby="user-lang-pref-label"
-                onChange={e => {
-                  setUserLang(e.target.value);
-                }}
-              >
-                {chatLanguages.map(lang => (
-                  <option
-                    key={lang.value}
-                    value={lang.value}
-                    aria-label={lang.label}
-                  >
-                    {lang.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
+            {isMultilanguageEnabled && !instruct && (
+              <div className="memori--language-chooser">
+                <label id="user-lang-pref-label" htmlFor="user-lang-pref">
+                  {t('write_and_speak.iWantToTalkToIn', {
+                    name: memori.name,
+                  })}
+                </label>
+                <select
+                  id="user-lang-pref"
+                  className="memori-select--button"
+                  value={(userLang ?? i18n.language).toUpperCase()}
+                  aria-labelledby="user-lang-pref-label"
+                  onChange={e => {
+                    setUserLang(e.target.value);
+                  }}
+                >
+                  {chatLanguages.map(lang => (
+                    <option
+                      key={lang.value}
+                      value={lang.value}
+                      aria-label={lang.label}
+                    >
+                      {lang.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
 
-          <div className="memori--start-privacy-explanation-container">
-            <p className="memori--start-privacy-explanation">
-              {t('write_and_speak.pagePrivacyExplanation')}
-            </p>
-            <Tooltip
-              align="right"
-              content={
-                <div className="memori--privacy-tooltip-content">
-                  <p>
-                    {' '}
-                    {t(
-                      'write_and_speak.pagePrivacyExplanationList.allConversations'
-                    )}
-                  </p>
-                  <ul className="memori--privacy-tooltip-content-list">
-                    <li>
+            <div className="memori--start-privacy-explanation-container">
+              <p className="memori--start-privacy-explanation">
+                {t('write_and_speak.pagePrivacyExplanation')}
+              </p>
+              <Tooltip
+                align="right"
+                content={
+                  <div className="memori--privacy-tooltip-content">
+                    <p>
+                      {' '}
                       {t(
-                        'write_and_speak.pagePrivacyExplanationList.anonymousUser'
+                        'write_and_speak.pagePrivacyExplanationList.allConversations'
                       )}
-                    </li>
-                    <li>
+                    </p>
+                    <ul className="memori--privacy-tooltip-content-list">
+                      <li>
+                        {t(
+                          'write_and_speak.pagePrivacyExplanationList.anonymousUser'
+                        )}
+                      </li>
+                      <li>
+                        {t(
+                          'write_and_speak.pagePrivacyExplanationList.registeredUser'
+                        )}
+                      </li>
+                    </ul>
+                    <p>
                       {t(
-                        'write_and_speak.pagePrivacyExplanationList.registeredUser'
+                        'write_and_speak.pagePrivacyExplanationList.authorUsesInfo'
                       )}
-                    </li>
-                  </ul>
-                  <p>
-                    {t(
-                      'write_and_speak.pagePrivacyExplanationList.authorUsesInfo'
-                    )}
-                  </p>
+                    </p>
 
-                  <a
-                    href={'https://memori.ai/en/privacy-policy'}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {t('privacyPolicy')}
-                  </a>
-                </div>
-              }
-            >
-              <QuestionHelp className="memori--start-privacy-explanation-icon" />
-            </Tooltip>
-          </div>
+                    <a
+                      href={'https://memori.ai/en/privacy-policy'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('privacyPolicy')}
+                    </a>
+                  </div>
+                }
+              >
+                <QuestionHelp className="memori--start-privacy-explanation-icon" />
+              </Tooltip>
+            </div>
 
-          <Button
-            primary
-            disabled={
-              (!!memori.blockedUntil && !memori.isGiver) || notEnoughCredits
-            }
-            loading={clickedStart}
-            onClick={_e => {
-              try {
-                window.speechSynthesis.speak(
-                  new SpeechSynthesisUtterance('') // This is needed to enable the speech synthesis on iOS
-                );
-              } catch (e) {
-                console.error(e);
+            <Button
+              primary
+              disabled={
+                (!!memori.blockedUntil && !memori.isGiver) || notEnoughCredits
               }
+              loading={clickedStart}
+              onClick={_e => {
+                try {
+                  window.speechSynthesis.speak(
+                    new SpeechSynthesisUtterance('') // This is needed to enable the speech synthesis on iOS
+                  );
+                } catch (e) {
+                  console.error(e);
+                }
 
-              if (initializeTTS) initializeTTS();
-              if (onClickStart) onClickStart();
-            }}
-            className="memori--start-button"
-          >
-            {t(
-              `write_and_speak.${
-                instruct
-                  ? 'instructButton'
-                  : !hasInitialSession
-                  ? 'tryMeButton'
-                  : 'resumeButton'
-              }`
-            )}
-          </Button>
+                if (initializeTTS) initializeTTS();
+                if (onClickStart) onClickStart();
+              }}
+              className="memori--start-button"
+            >
+              {t(
+                `write_and_speak.${
+                  instruct
+                    ? 'instructButton'
+                    : !hasInitialSession
+                    ? 'tryMeButton'
+                    : 'resumeButton'
+                }`
+              )}
+            </Button>
 
-          <CompletionProviderStatus
-            provider={memori?.completionConfigForQuestionAnswering?.provider}
-            forceStatus={_TEST_forceProviderStatus}
-          />
+            <CompletionProviderStatus
+              provider={memori?.completionConfigForQuestionAnswering?.provider}
+              forceStatus={_TEST_forceProviderStatus}
+            />
 
-          <p className="memori--start-description">
-            {instruct
-              ? t('write_and_speak.pageInstructExplanation')
-              : t('write_and_speak.pageTryMeExplanation')}
-          </p>
+            <p className="memori--start-description">
+              {instruct
+                ? t('write_and_speak.pageInstructExplanation')
+                : t('write_and_speak.pageTryMeExplanation')}
+            </p>
 
-          {(memori.blockedUntil || notEnoughCredits) && (
-            <BlockedMemoriBadge
-              memoriName={memori.name}
-              blockedUntil={memori.blockedUntil}
-              notEnoughCredits={notEnoughCredits}
-              showGiverInfo={memori.isGiver}
-              showTitle
-              marginLeft
-            />
-          )}
+            {(memori.blockedUntil || notEnoughCredits) && (
+              <BlockedMemoriBadge
+                memoriName={memori.name}
+                blockedUntil={memori.blockedUntil}
+                notEnoughCredits={notEnoughCredits}
+                showGiverInfo={memori.isGiver}
+                showTitle
+                marginLeft
+              />
+            )}
 
-          {!!memori.enableDeepThought && !instruct && (
-            <div className="memori--deep-thought-disclaimer">
-              <Tooltip align="left" content={t('deepThoughtHelper')}>
-                <DeepThought />
-              </Tooltip>
-              <h2>
-                {isUserLoggedIn && !!user?.pAndCUAccepted
-                  ? t('deepThoughtDisclaimerTitle')
-                  : t('deepThought')}
-              </h2>
-              {isUserLoggedIn && !user?.pAndCUAccepted && (
-                <p>{t('deepThoughtPreDisclaimerNotAllowed')}</p>
-              )}
-              {!isUserLoggedIn && (
-                <p>{t('deepThoughtPreDisclaimerUnlogged')}</p>
-              )}
-              {!isUserLoggedIn && showLogin && (
-                <p>
-                  <Button
-                    outlined
-                    padded={false}
-                    onClick={() => setShowLoginDrawer(true)}
-                  >
-                    Login
-                  </Button>
+            {!!memori.enableDeepThought && !instruct && (
+              <div className="memori--deep-thought-disclaimer">
+                <Tooltip align="left" content={t('deepThoughtHelper')}>
+                  <DeepThought />
+                </Tooltip>
+                <h2>
+                  {isUserLoggedIn && !!user?.pAndCUAccepted
+                    ? t('deepThoughtDisclaimerTitle')
+                    : t('deepThought')}
+                </h2>
+                {isUserLoggedIn && !user?.pAndCUAccepted && (
+                  <p>{t('deepThoughtPreDisclaimerNotAllowed')}</p>
+                )}
+                {!isUserLoggedIn && (
+                  <p>{t('deepThoughtPreDisclaimerUnlogged')}</p>
+                )}
+                {!isUserLoggedIn && showLogin && (
+                  <p>
+                    <Button
+                      outlined
+                      padded={false}
+                      onClick={() => setShowLoginDrawer(true)}
+                    >
+                      {t('login.login') || 'Login'}
+                    </Button>
+                  </p>
+                )}
+                <p className="memori--deep-thought-disclaimer-text">
+                  {t('deepThoughtDisclaimer')}
                 </p>
-              )}
-              <p className="memori--deep-thought-disclaimer-text">
-                {t('deepThoughtDisclaimer')}
-              </p>
-            </div>
-          )}
-        </div>
-      )}
+              </div>
+            )}
+          </div>
+        )}
     </div>
   );
 };

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

@@ -1257,7 +1257,7 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
           <button
             class="memori-button memori-button--outlined memori-button--rounded"
           >
-            Login
+            login.login
           </button>
         </p>
         <p
@@ -2188,6 +2188,113 @@ exports[`renders StartPanel with integrationConfig unchanged 1`] = `
 </div>
 `;
 
+exports[`renders StartPanel with login required unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--completions-enabled"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            completionsEnabled
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="completionsEnabled"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  clip-rule="evenodd"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M0 4a4 4 0 014-4h16a4 4 0 014 4v16a4 4 0 01-4 4H4a4 4 0 01-4-4zm4-2.4A2.4 2.4 0 001.6 4v16A2.4 2.4 0 004 22.4h16a2.4 2.4 0 002.4-2.4V4A2.4 2.4 0 0020 1.6z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M9.715 8.442a.798.798 0 00-1.43 0l-3.2 6.4a.799.799 0 101.431.716l.579-1.158h3.811l.578 1.158a.8.8 0 001.431-.716zm.391 4.358L9 10.589 7.894 12.8z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M17 8c.552 0 1 .358 1 .8v6.4c0 .442-.448.8-1 .8s-1-.358-1-.8V8.8c0-.442.448-.8 1-.8z"
+                    fill-rule="evenodd"
+                  />
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--needsLogin"
+    >
+      <p>
+        write_and_speak.requirePositionHelp
+      </p>
+      <button
+        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori-button--with-icon memori--start-button"
+      >
+        <span
+          class="memori-button--icon"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            role="img"
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            />
+          </svg>
+        </span>
+        login.login
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel with multilangual unchanged 1`] = `
 <div>
   <div