@memori.ai/memori-react 8.7.3 → 8.7.5

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -1253,7 +1253,7 @@ const MemoriWidget = ({
       //     (i: Invitation) => i.type === 'GIVER' && i.state === 'ACCEPTED'
       //   );
 
-      //   if (giverInvitation) {
+      //   if (giverInvitation) {x
       //     memori.giverTag = giverInvitation.tag;
       //     memori.giverPIN = giverInvitation.pin;
       //   }
@@ -1548,136 +1548,6 @@ const MemoriWidget = ({
     return null;
   };
 
-  const [chatLogs, setChatLogs] = useState<any[]>([]);
-  const resumeSession = async (
-    chatLog: ChatLog,
-    questionsAndAnswers: { question: string; answer: string }[],
-    initialContextVars?: { [key: string]: string },
-    initialQuestion?: string,
-    birthDate?: string
-  ) => {
-    // Set loading state while reopening session
-    setLoading(true);
-
-    // Get birth date from local storage if not provided
-    let storageBirthDate = getLocalConfig<string | undefined>(
-      'birthDate',
-      undefined
-    );
-    let userBirthDate = birthDate ?? storageBirthDate;
-    // // console.log('[REOPEN_SESSION] Using birth date:', userBirthDate);
-
-    try {
-      // Show age verification if required and birth date not provided
-      if (!userBirthDate && !!minAge) {
-        // // console.log('[REOPEN_SESSION] Age verification required, showing modal');
-        setShowAgeVerification(true);
-        return;
-      }
-
-      // Check if authentication is needed based on privacy type and credentials
-      if (
-        memori.privacyType !== 'PUBLIC' &&
-        !memoriPassword &&
-        !memori.secretToken &&
-        !memoriPwd &&
-        !memoriTokens
-      ) {
-        // // console.log('[REOPEN_SESSION] Authentication required, showing modal');
-        setAuthModalState('password');
-        return;
-      }
-
-      // Get current URL as referral
-      let referral;
-      try {
-        referral = (() => {
-          return window.location.href;
-        })();
-        // console.log('[REOPEN_SESSION] Got referral:', referral);
-      } catch (err) {
-        console.debug('[REOPEN_SESSION] Error getting referral:', err);
-      }
-
-      // Initialize session with provided parameters
-      // // console.log('[REOPEN_SESSION] Initializing session...');
-      const { sessionID, currentState, ...response } = await initSession({
-        memoriID: memori.engineMemoriID ?? '',
-        password: memoriPassword || memoriPwd || memori.secretToken,
-        recoveryTokens: memoriTokens,
-        tag: personification?.tag,
-        pin: personification?.pin,
-        continueFromChatLogID: chatLog.chatLogID,
-        initialContextVars: {
-          PATHNAME: window.location.pathname,
-          ROUTE: window.location.pathname?.split('/')?.pop() || '',
-          ...(initialContextVars || {}),
-        },
-        initialQuestion,
-        birthDate: userBirthDate,
-        additionalInfo: {
-          ...(additionalInfo || {}),
-          loginToken:
-            userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
-          language: getCultureCodeByLanguage(userLang),
-          referral: referral,
-          timeZoneOffset: new Date().getTimezoneOffset().toString(),
-        },
-      });
-
-      // Handle successful session initialization
-      if (sessionID) {
-        // // console.log('[REOPEN_SESSION] Session initialized successfully:', sessionID);
-        setSessionId(sessionID);
-
-        // // console.log('[REOPEN_SESSION] Processing emission:', currentState.emission);
-        // Set initial message or append to existing history
-        setHistory(
-          chatLog.lines.map(log => ({
-            text: log.text,
-            emitter: log.emitter,
-            media: log.media?.map(m => ({
-              ...m,
-              mediumID:
-                'mediumID' in m ? String(m.mediumID) : crypto.randomUUID(),
-            })),
-            fromUser: log.inbound,
-            initial: false,
-            contextVars: log.contextVars,
-            date: log.timestamp,
-          }))
-        );
-
-        setChatLogs(questionsAndAnswers);
-      }
-
-      // Handle age restriction error
-      else if (
-        response?.resultMessage.startsWith('This Memori is aged restricted')
-      ) {
-        console.error('[REOPEN_SESSION] Age restriction error:', response);
-        toast.error(t('underageTwinSession', { age: minAge }));
-        setGotErrorInOpening(true);
-      }
-      // Handle authentication error
-      else if (response?.resultCode === 403) {
-        console.error('[REOPEN_SESSION] Authentication error');
-        setMemoriPwd(undefined);
-        setAuthModalState('password');
-      }
-      // Handle other errors
-      else {
-        console.error('[REOPEN_SESSION] Other error:', response);
-        toast.error(t(getErrori18nKey(response.resultCode)));
-        setGotErrorInOpening(true);
-      }
-    } catch (err) {
-      console.error('[RESUME_SESSION] Caught error:', err);
-    }
-
-    setLoading(false);
-  };
-
   const changeTag = async (
     memoriId: string,
     sessionId: string,
@@ -2513,10 +2383,11 @@ const MemoriWidget = ({
         const { currentState, ...response } = await getSession(sessionID!);
 
         if (response.resultCode !== 0 || !currentState) {
+          const { chatLogs } = await getSessionChatLogs(sessionID!, sessionID!);
           setGotErrorInOpening(true);
           setSessionId(undefined);
           setClickedStart(false);
-          await onClickStart(undefined, true);
+          await onClickStart(undefined, true, chatLogs?.[0]);
           return;
         }
 
@@ -2855,8 +2726,7 @@ const MemoriWidget = ({
   const showFullHistory =
     showOnlyLastMessages === undefined
       ? selectedLayout !== 'TOTEM' &&
-        selectedLayout !== 'WEBSITE_ASSISTANT' &&
-        selectedLayout !== 'HIDDEN_CHAT'
+        selectedLayout !== 'WEBSITE_ASSISTANT'
       : !showOnlyLastMessages;
 
   const headerProps: HeaderProps = {
@@ -3331,7 +3201,7 @@ const MemoriWidget = ({
             setShowLoginDrawer(false);
             setLocalConfig('loginToken', token);
           }}
-          // setUser={setUser}
+          setUser={setUser}
           onLogout={() => {
             if (!loginToken) return;
 

package/src/components/layouts/HiddenChat.tsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import Spin from '../ui/Spin';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 import { useTranslation } from 'react-i18next';
+import { useArtifact } from '../MemoriArtifactSystem/context/ArtifactContext';
 import QuestionHelp from '../icons/QuestionHelp';
 import Close from '../icons/Close';
-import { useArtifact } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 const HiddenChatLayout: React.FC<LayoutProps> = ({
   Header,
@@ -24,7 +24,7 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
   const [fullScreen, setFullScreen] = useState(false);
   const [hasTriggeredAutostart, setHasTriggeredAutostart] = useState(false);
 
-  const { state } = useArtifact();
+  const { state, closeArtifact } = useArtifact();
   const { onClickStart, hasInitialSession } = startPanelProps || {};
 
   // Use refs to store original sidebar properties to restore them later
@@ -72,17 +72,11 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
       mainDiv.style.width = '100%';
       mainDiv.style.marginRight = '0';
       mainDiv.style.marginLeft = '0';
+      closeArtifact();
     }
   }, [isOpen, fullScreen]);
 
   const handleSidebarToggle = () => {
-    console.log('[HiddenChatLayout] Sidebar toggle clicked:', {
-      currentState: isOpen,
-      autoStart,
-      sessionId,
-      hasInitialSession,
-      hasTriggeredAutostart
-    });
 
     // Only trigger autostart when opening the sidebar for the first time
     // and when we haven't already triggered it
@@ -202,6 +196,7 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
         >
           <QuestionHelp className="memori-icon" aria-label={t('expand')} />
         </label>
+        
         <aside
           className={`memori-sidebar ${
             fullScreen ? 'memori-sidebar-fullscreen' : ''

package/src/components/layouts/hidden-chat.css

@@ -9,7 +9,19 @@
 .memori-sidebar-toggle {
   display: none;
 }
+.memori-chat--content{
+  padding: 0;
+}
+
+.memori-chat-inputs{
+  padding: 8px 24px;
+}
 
+.memori-chat-history{
+  height: calc(100% - 75px);
+  margin: 0;
+}
+/* Modern floating toggle button */
 .memori-sidebar-toggle-label {
   position: absolute;
   top: 50%;
@@ -19,7 +31,7 @@
   height: 80px;
   align-items: center;
   justify-content: center;
-  padding: 10px 5px;
+  padding: 12px 8px;
   background-color: var(--memori-primary);
   color: white;
   cursor: pointer;
@@ -37,10 +49,9 @@
 
 .memori-close-label {
   right: 350px;
-  border-radius: 0 5px 5px 0;
+  border-radius: 5px 0 0 5px;
   opacity: 0;
   pointer-events: none;
-  transform: rotate(180deg);
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, right 0.3s ease-in-out;
 }
 

package/src/helpers/utils.ts

@@ -232,7 +232,7 @@ export const stripReasoningTags = (text: string) => {
   const strippedText = text.replace(reasoningTagRegex, '');
 
   // Recursively strip nested reasoning tags
-  return stripOutputTags(strippedText);
+  return strippedText;
 };
 
 export const stripHTML = (text: string) => {

package/src/components/AccountForm/AccountForm.tsx

@@ -1,325 +0,0 @@
-import { User, Tenant } from '@memori.ai/memori-api-client/dist/types';
-import React, { useEffect, useState } from 'react';
-import Button from '../ui/Button';
-import { useTranslation } from 'react-i18next';
-import memoriApiClient from '@memori.ai/memori-api-client';
-import toast from 'react-hot-toast';
-import { mailRegEx, pwdRegEx, usernameRegEx } from '../../helpers/utils';
-import { getErrori18nKey } from '../../helpers/error';
-import Tooltip from '../ui/Tooltip';
-
-export interface Props {
-  user: User;
-  loginToken: string;
-  apiClient: ReturnType<typeof memoriApiClient>;
-  onUserUpdate: (user: User) => void;
-}
-
-const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
-
-const AccountForm = ({ user, loginToken, apiClient, onUserUpdate }: Props) => {
-  const { t, i18n } = useTranslation();
-  const lang = i18n.language === 'it' ? 'it' : 'en';
-
-  const { updateUser, uploadAsset } = apiClient.backend;
-
-  const [email, setEmail] = useState<string>();
-  const [password, setPassword] = useState<string>();
-  const [confirmPassword, setConfirmPassword] = useState<string>();
-
-  const pwdAcceptable = !password || (password && pwdRegEx.test(password));
-  const pwdGreen = pwdAcceptable && password && password.length >= 24;
-  const pwdEmpty = !password || password.length === 0;
-  const pwdMeterValue =
-    !pwdAcceptable || pwdEmpty
-      ? 0
-      : password.length < 8
-      ? 15
-      : password.length >= 32
-      ? 100
-      : (password.length - 8) * (50 / 24) + 50;
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const sendUserUpdate = async (userID: string, user: Partial<User>) => {
-    try {
-      const { user: updatedUser, ...resp } = await updateUser(
-        loginToken,
-        userID,
-        user
-      );
-
-      if (resp.resultCode !== 0) {
-        console.error(resp);
-        toast.error(t(getErrori18nKey(resp.resultCode)));
-      } else if (updatedUser) {
-        toast.success(t('success'));
-        onUserUpdate(updatedUser);
-      }
-    } catch (e) {
-      let err = e as Error;
-      console.error('[signup]', err);
-      if (err?.message) toast.error(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const submitUserUpdate = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!user.userID) return;
-    const userID = user.userID;
-
-    const form = e.currentTarget as HTMLFormElement;
-
-    const eMail = form.eMail.value ?? email;
-    const newPassword = form.newPassword.value ?? password;
-    const currentPassword = form.password.value;
-    const confirmPassword = form.confirmPassword.value;
-    const pAndCUAccepted = (form.pAndCUAccepted as HTMLInputElement | null)
-      ?.checked;
-    const avatar = (form.avatar as HTMLInputElement | null)?.files?.[0];
-
-    setLoading(true);
-    setError(null);
-
-    if (newPassword?.length && newPassword !== confirmPassword) {
-      setError(t('login.passwordMatchingError'));
-      setLoading(false);
-      return;
-    }
-
-    let patchedUser: User = {
-      ...(eMail?.length && eMail !== user.eMail ? { eMail } : {}),
-      ...(newPassword ? { password: currentPassword, newPassword } : {}),
-      ...(pAndCUAccepted !== undefined && pAndCUAccepted !== user.pAndCUAccepted
-        ? { pAndCUAccepted, pAndCUAcceptanceDate: new Date().toISOString() }
-        : {}),
-    };
-
-    if (Object.values(patchedUser).length === 0 && !avatar) {
-      console.debug('No changes to submit');
-      setLoading(false);
-      return;
-    }
-
-    if (avatar) {
-      const reader = new FileReader();
-      reader.onload = async e => {
-        try {
-          const { asset: avatarAsset, ...resp } = await uploadAsset(
-            avatar.name ?? 'avatar',
-            e.target?.result as string,
-            loginToken
-          );
-
-          if (resp.resultCode !== 0) {
-            console.error(resp);
-            toast.error(t(getErrori18nKey(resp.resultCode)));
-          } else if (avatarAsset) {
-            patchedUser.avatarURL = avatarAsset.assetURL;
-
-            await sendUserUpdate(userID, patchedUser);
-          }
-        } catch (e) {
-          let err = e as Error;
-          console.error('[avatar upload]', err);
-
-          if (err?.message) toast.error(err.message);
-        }
-      };
-      reader.readAsDataURL(avatar);
-    } else {
-      await sendUserUpdate(userID, patchedUser);
-    }
-  };
-
-  return (
-    <>
-      <h3 className="memori--login-drawer--edit-account-title">
-        {t('login.editAccount')}
-      </h3>
-
-      <form
-        className="memori--login-drawer--form memori--login-drawer--account-form"
-        onSubmit={submitUserUpdate}
-      >
-        <details className="memori--details">
-          <summary>{t('login.emailChange')}</summary>
-
-          <label htmlFor="#eMail">
-            {t('login.email')}
-            <input
-              type="email"
-              name="eMail"
-              id="eMail"
-              autoComplete="email"
-              placeholder={user.eMail}
-              onChange={e => setEmail(e.target.value)}
-              aria-invalid={!!email?.length && !mailRegEx.test(email)}
-            />
-          </label>
-          {!!email?.length && !mailRegEx.test(email) && (
-            <p className="memori--login-drawer--inline-error">
-              {t('login.emailFormatError')}
-            </p>
-          )}
-        </details>
-
-        <details className="memori--details">
-          <summary>{t('login.passwordChange')}</summary>
-
-          <label htmlFor="#password">
-            {t('login.currentPassword')}
-            <input
-              id="password"
-              name="password"
-              type="password"
-              autoComplete="password"
-              placeholder={t('login.currentPassword') || 'Password'}
-            />
-          </label>
-
-          <label htmlFor="#newPassword">
-            {t('login.newPassword')}
-            <input
-              id="newPassword"
-              name="newPassword"
-              type="password"
-              autoComplete="new-password"
-              placeholder={t('login.password') || 'Password'}
-              onChange={e => setPassword(e.target.value)}
-              aria-invalid={!pwdAcceptable}
-            />
-          </label>
-          {!pwdAcceptable && (
-            <p className="memori--login-drawer--inline-error">
-              {t('login.passwordFormatError')}
-            </p>
-          )}
-
-          <label htmlFor="#confirm-password">
-            {t('login.confirmPassword')}
-            <input
-              id="confirm-password"
-              name="confirmPassword"
-              type="password"
-              autoComplete="new-password"
-              placeholder={t('login.confirmPassword') || 'Password'}
-              onChange={e => setConfirmPassword(e.target.value)}
-              aria-invalid={
-                !!password?.length &&
-                !!confirmPassword?.length &&
-                password !== confirmPassword
-              }
-            />
-          </label>
-          {!!password?.length &&
-            !!confirmPassword?.length &&
-            password !== confirmPassword && (
-              <p className="memori--login-drawer--inline-error">
-                {t('login.passwordMatchingError')}
-              </p>
-            )}
-
-          <meter
-            className="memori--login-drawer--password-meter"
-            min={0}
-            low={33}
-            high={66}
-            optimum={80}
-            max={100}
-            value={pwdMeterValue}
-            id="password-strength-meter"
-          />
-          <small>
-            {t(
-              `login.pwd${
-                pwdGreen ? 'Strong' : pwdAcceptable ? 'Acceptable' : 'Weak'
-              }`
-            )}
-          </small>
-        </details>
-
-        <details className="memori--details">
-          <summary>{t('login.avatarChange')}</summary>
-
-          <label htmlFor="#avatar">
-            Avatar
-            <input
-              type="file"
-              name="avatar"
-              id="avatar"
-              accept={imgMimeTypes.join(', ')}
-              placeholder={user.avatarURL}
-            />
-          </label>
-        </details>
-
-        <label className="memori-checkbox memori-checkbox--disabled">
-          <span className="memori-checkbox--input-wrapper">
-            <input
-              type="checkbox"
-              name="tnCAndPPAccepted"
-              disabled
-              defaultChecked={user.tnCAndPPAccepted}
-              checked={user.tnCAndPPAccepted}
-              className="memori-checkbox--input"
-            />
-            <span className="memori-checkbox--inner" />
-          </span>
-          <span className="memori-checkbox--text">
-            {t('login.privacyLabel')}{' '}
-            <a
-              href={`https://memori.ai/${lang}/privacy_and_cookie`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t('login.privacyAndCookiePolicy')}
-            </a>{' '}
-            {t('login.and')}{' '}
-            <a
-              href={`https://memori.ai/${lang}/tos`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t('login.termsOfService')}
-            </a>
-          </span>
-        </label>
-
-        <label className="memori-checkbox">
-          <span className="memori-checkbox--input-wrapper">
-            <input
-              type="checkbox"
-              name="pAndCUAccepted"
-              className="memori-checkbox--input"
-              defaultChecked={user.pAndCUAccepted}
-            />
-            <span className="memori-checkbox--inner" />
-          </span>
-          <Tooltip align="left" content={t('login.deepThoughtExplaination')}>
-            <span className="memori-checkbox--text">
-              {t('login.pAndCUAccepted')}{' '}
-              <small>
-                <em>({t('login.optional')})</em>
-              </small>
-            </span>
-          </Tooltip>
-        </label>
-
-        <Button htmlType="submit" primary loading={loading}>
-          {t('login.save')}
-        </Button>
-      </form>
-      {error && (
-        <p role="alert" className="memori--login-drawer--error">
-          {error}
-        </p>
-      )}
-    </>
-  );
-};
-
-export default AccountForm;