@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/StartPanel/StartPanel.tsx

@@ -1,6 +1,5 @@
 import {
-  GamificationLevel,
-  Memori,
+  Memori as MemoriOriginal,
   Tenant,
   Venue,
   User,
@@ -17,13 +16,20 @@ import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
 import AI from '../icons/AI';
 import Group from '../icons/Group';
 import DeepThought from '../icons/DeepThought';
-import CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus';
+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;
-  gamificationLevel?: GamificationLevel;
   language?: string;
   userLang?: string;
   setUserLang: (lang: string) => void;
@@ -34,21 +40,22 @@ export interface Props {
   integrationConfig?: { [key: string]: any };
   instruct?: boolean;
   sessionId?: string;
+  hasInitialSession?: boolean;
   clickedStart?: boolean;
   onClickStart?: () => void;
   initializeTTS?: () => void;
-  _TEST_forceProviderStatus?: string;
+  _TEST_forceProviderStatus?: CPSProps['forceStatus'];
   isUserLoggedIn?: boolean;
   user?: User;
   showLogin?: boolean;
   setShowLoginDrawer: (show: boolean) => void;
   notEnoughCredits?: boolean;
+  isMultilanguageEnabled?: boolean | undefined;
 }
 
 const StartPanel: React.FC<Props> = ({
   memori,
   tenant,
-  gamificationLevel,
   language,
   userLang,
   setUserLang,
@@ -56,8 +63,8 @@ const StartPanel: React.FC<Props> = ({
   apiUrl,
   position,
   openPositionDrawer,
-  integrationConfig,
   instruct = false,
+  hasInitialSession = false,
   clickedStart,
   onClickStart,
   initializeTTS,
@@ -67,11 +74,13 @@ const StartPanel: React.FC<Props> = ({
   showLogin = false,
   setShowLoginDrawer,
   notEnoughCredits = false,
+  isMultilanguageEnabled,
 }) => {
   const { t, i18n } = useTranslation();
   const [translatedDescription, setTranslatedDescription] = useState(
     memori.description
   );
+  
   const [showTranslation, setShowTranslation] = useState(true);
   const toggleTranslations = () => {
     setShowTranslation(show => !show);
@@ -79,8 +88,9 @@ const StartPanel: React.FC<Props> = ({
 
   useEffect(() => {
     if (
-      (i18n.language?.toUpperCase() ?? 'IT') !==
-        (language?.toUpperCase() ?? 'IT') &&
+      ((i18n.language?.toUpperCase() ?? 'IT') !==
+        (language?.toUpperCase() ?? 'IT') ||
+        translatedDescription !== memori.description) &&
       !!memori.description?.length
     ) {
       getTranslation(
@@ -103,36 +113,18 @@ const StartPanel: React.FC<Props> = ({
         style={{
           backgroundImage: `url("${getResourceUrl({
             type: 'cover',
-            tenantID: tenant?.id,
+            tenantID: tenant?.name,
             resourceURI: memori.coverURL,
             baseURL: baseUrl,
             apiURL: apiUrl,
           })}"), url("${getResourceUrl({
             type: 'cover',
-            tenantID: tenant?.id,
+            tenantID: tenant?.name,
             baseURL: baseUrl,
             apiURL: apiUrl,
           })}")`,
         }}
       >
-        {!!gamificationLevel?.badge?.length && !memori.enableBoardOfExperts && (
-          <div className="memori--gamification-badge">
-            <Tooltip
-              align="left"
-              content={`${t('gamification.level')} ${
-                gamificationLevel.badge
-              }, ${gamificationLevel.points} ${t('gamification.points')}`}
-            >
-              <span
-                aria-label={`${t('gamification.level')} ${
-                  gamificationLevel.badge
-                }, ${gamificationLevel.points} ${t('gamification.points')}`}
-              >
-                {gamificationLevel.badge}
-              </span>
-            </Tooltip>
-          </div>
-        )}
         {!!memori.enableCompletions && !memori.enableBoardOfExperts && (
           <div className="memori--completions-enabled">
             <Tooltip align="left" content={t('completionsEnabled')}>
@@ -165,7 +157,7 @@ const StartPanel: React.FC<Props> = ({
             memori.avatarURL ??
             getResourceUrl({
               type: 'avatar',
-              tenantID: tenant?.id,
+              tenantID: tenant?.name,
               resourceURI: memori.avatarURL,
               baseURL: baseUrl,
               apiURL: apiUrl,
@@ -178,14 +170,14 @@ const StartPanel: React.FC<Props> = ({
             memori.avatarURL && memori.avatarURL.length > 0
               ? getResourceUrl({
                   type: 'avatar',
-                  tenantID: tenant?.id,
+                  tenantID: tenant?.name,
                   resourceURI: memori.avatarURL,
                   baseURL: baseUrl,
                   apiURL: apiUrl,
                 })
               : getResourceUrl({
                   type: 'avatar',
-                  tenantID: tenant?.id,
+                  tenantID: tenant?.name,
                   baseURL: baseUrl,
                   apiURL: apiUrl,
                 })
@@ -208,139 +200,213 @@ 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>
+              {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>
             )}
-          </p>
 
-          {integrationConfig?.multilanguage && !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);
-                }}
+            <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">
+                                          {isUserLoggedIn ? (
+                      <li>
+                        {t(
+                          'write_and_speak.pagePrivacyExplanationList.contentAndUsername'
+                        )}
+                      </li>
+                    ) : (
+                      <li>
+                        {t(
+                          'write_and_speak.pagePrivacyExplanationList.contentAndIpAddress'
+                        )}
+                      </li>
+                    )}
+                    </ul>
+                    <p>
+                      {t(
+                        'write_and_speak.pagePrivacyExplanationList.authorUsesInfo'
+                      )}
+                    </p>
+
+                    <a
+                      href={tenant?.privacyPolicyURL ?? 'https://memori.ai/en/privacy-policy'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {tenant?.privacyPolicyURL ?? t('privacyPolicy')}
+                    </a>
+                  </div>
+                }
               >
-                {chatLanguages.map(lang => (
-                  <option
-                    key={lang.value}
-                    value={lang.value}
-                    aria-label={lang.label}
-                  >
-                    {lang.label}
-                  </option>
-                ))}
-              </select>
+                <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 ? 'tryMeButton' : 'instructButton'}`
-            )}
-          </Button>
+                if (initializeTTS) initializeTTS();
+                if (onClickStart) onClickStart();
+              }}
+              className="memori--start-button"
+            >
+              {t(
+                `write_and_speak.${
+                  instruct
+                    ? 'instructButton'
+                    : !hasInitialSession
+                    ? 'tryMeButton'
+                    : 'resumeButton'
+                }`
+              )}
+            </Button>
 
-          <CompletionProviderStatus
-            provider={memori.completionProvider}
-            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>
   );
 };