@memori.ai/memori-react 6.4.5 → 6.5.0

package/src/components/AccountForm/AccountForm.tsx

@@ -0,0 +1,326 @@
+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;
+  apiUrl: string;
+  onUserUpdate: (user: User) => void;
+}
+
+const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
+
+const AccountForm = ({ user, loginToken, apiUrl, onUserUpdate }: Props) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language === 'it' ? 'it' : 'en';
+
+  const client = memoriApiClient(apiUrl);
+
+  const { updateUser, uploadAsset } = client.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) {
+      console.debug('No changes to submit');
+      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;

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

@@ -0,0 +1,202 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders AccountForm unchanged 1`] = `
+<div>
+  <h3
+    class="memori--login-drawer--edit-account-title"
+  >
+    login.editAccount
+  </h3>
+  <form
+    class="memori--login-drawer--form memori--login-drawer--account-form"
+  >
+    <details
+      class="memori--details"
+    >
+      <summary>
+        login.emailChange
+      </summary>
+      <label
+        for="#eMail"
+      >
+        login.email
+        <input
+          aria-invalid="false"
+          autocomplete="email"
+          id="eMail"
+          name="eMail"
+          placeholder="nicola@nzambello.dev"
+          type="email"
+        />
+      </label>
+    </details>
+    <details
+      class="memori--details"
+    >
+      <summary>
+        login.passwordChange
+      </summary>
+      <label
+        for="#password"
+      >
+        login.currentPassword
+        <input
+          autocomplete="password"
+          id="password"
+          name="password"
+          placeholder="login.currentPassword"
+          type="password"
+        />
+      </label>
+      <label
+        for="#newPassword"
+      >
+        login.newPassword
+        <input
+          aria-invalid="false"
+          autocomplete="new-password"
+          id="newPassword"
+          name="newPassword"
+          placeholder="login.password"
+          type="password"
+        />
+      </label>
+      <label
+        for="#confirm-password"
+      >
+        login.confirmPassword
+        <input
+          aria-invalid="false"
+          autocomplete="new-password"
+          id="confirm-password"
+          name="confirmPassword"
+          placeholder="login.confirmPassword"
+          type="password"
+        />
+      </label>
+      <meter
+        class="memori--login-drawer--password-meter"
+        high="66"
+        id="password-strength-meter"
+        low="33"
+        max="100"
+        min="0"
+        optimum="80"
+        value="0"
+      />
+      <small>
+        login.pwdAcceptable
+      </small>
+    </details>
+    <details
+      class="memori--details"
+    >
+      <summary>
+        login.avatarChange
+      </summary>
+      <label
+        for="#avatar"
+      >
+        Avatar
+        <input
+          accept="image/jpeg, image/png, image/jpg, image/gif"
+          id="avatar"
+          name="avatar"
+          placeholder="https://avatars.githubusercontent.com/u/21101435?v=4"
+          type="file"
+        />
+      </label>
+    </details>
+    <label
+      class="memori-checkbox memori-checkbox--disabled"
+    >
+      <span
+        class="memori-checkbox--input-wrapper"
+      >
+        <input
+          checked=""
+          class="memori-checkbox--input"
+          disabled=""
+          name="tnCAndPPAccepted"
+          type="checkbox"
+        />
+        <span
+          class="memori-checkbox--inner"
+        />
+      </span>
+      <span
+        class="memori-checkbox--text"
+      >
+        login.privacyLabel
+         
+        <a
+          href="https://memori.ai/en/privacy_and_cookie"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          login.privacyAndCookiePolicy
+        </a>
+         
+        login.and
+         
+        <a
+          href="https://memori.ai/en/tos"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          login.termsOfService
+        </a>
+      </span>
+    </label>
+    <label
+      class="memori-checkbox"
+    >
+      <span
+        class="memori-checkbox--input-wrapper"
+      >
+        <input
+          checked=""
+          class="memori-checkbox--input"
+          name="pAndCUAccepted"
+          type="checkbox"
+        />
+        <span
+          class="memori-checkbox--inner"
+        />
+      </span>
+      <div
+        class="memori-tooltip memori-tooltip--align-left"
+      >
+        <div
+          class="memori-tooltip--content"
+        >
+          login.deepThoughtExplaination
+        </div>
+        <div
+          class="memori-tooltip--trigger"
+        >
+          <span
+            class="memori-checkbox--text"
+          >
+            login.pAndCUAccepted
+             
+            <small>
+              <em>
+                (
+                login.optional
+                )
+              </em>
+            </small>
+          </span>
+        </div>
+      </div>
+    </label>
+    <button
+      class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
+      type="submit"
+    >
+      login.save
+    </button>
+  </form>
+</div>
+`;

package/src/components/Chat/Chat.tsx

@@ -40,6 +40,7 @@ export interface Props {
   showDates?: boolean;
   showContextPerLine?: boolean;
   showAIicon?: boolean;
+  showWhyThisAnswer?: boolean;
   client: ReturnType<typeof memoriApiClient>;
   selectReceiverTag: (tag: string) => Promise<void>;
   preview?: boolean;
@@ -84,6 +85,7 @@ const Chat: React.FC<Props> = ({
   showDates = false,
   showContextPerLine = false,
   showAIicon = true,
+  showWhyThisAnswer = true,
   selectReceiverTag,
   preview = false,
   instruct = false,
@@ -205,6 +207,7 @@ const Chat: React.FC<Props> = ({
                 sessionID={sessionID}
                 simulateUserPrompt={simulateUserPrompt}
                 showAIicon={showAIicon}
+                showWhyThisAnswer={showWhyThisAnswer}
                 showFeedback={
                   index === history.length - 1 &&
                   !message.fromUser &&

package/src/components/LoginDrawer/LoginDrawer.css

@@ -1,5 +1,5 @@
 .memori--login-drawer {
-    z-index: 1000;
+    z-index: 10000;
 }
 
 .memori--login-drawer .memori-drawer--panel {
@@ -14,7 +14,7 @@
     --memori-drawer--width--lg: 30%;
 }
 
-h2.memori--login-drawer--title {
+.memori--login-drawer--title {
     margin: 0;
     font-size: inherit;
     font-weight: 400;
@@ -33,6 +33,13 @@ p.memori--login-drawer--error {
     text-align: center;
 }
 
+p.memori--login-drawer--inline-error {
+    margin: 0 0 0.5rem;
+    color: var(--memori-error-color);
+    font-size: 0.875rem;
+    text-align: center;
+}
+
 .memori--login-drawer--form label:not(.memori-checkbox) {
     display: flex;
     flex-direction: column;
@@ -63,6 +70,10 @@ p.memori--login-drawer--error {
     outline: none;
 }
 
+.memori--login-drawer--form input[aria-invalid="true"] {
+    border-color: var(--memori-error-color);
+}
+
 .memori--login-drawer--form a {
     color: var(--memori-primary);
     text-decoration: underline;
@@ -79,10 +90,55 @@ p.memori--login-drawer--error {
     margin-top: 1rem;
 }
 
-.memori--login-drawer--signup {
+.memori--login-drawer--form small {
+    color: #666;
+    font-size: 0.8rem;
+}
+
+p.memori--login-drawer--signup {
     margin-top: 1.5rem;
 }
 
 .memori--login-drawer--signup p:not(:last-of-type) {
     margin-bottom: 0.5rem;
+}
+
+.memori--login-drawer--password-meter {
+    margin: 0;
+    text-align: center;
+}
+
+meter.memori--login-drawer--password-meter {
+    width: 100%;
+}
+
+meter.memori--login-drawer--password-meter+small {
+    display: inline-block;
+    text-align: center;
+}
+
+figure.memori--login-drawer--avatar {
+    display: flex;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin: 0 0 1rem 1rem;
+    float: right;
+}
+
+figure.memori--login-drawer--avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+h3.memori--login-drawer--edit-account-title {
+    margin: 2.5rem 0 0.5rem;
+    font-size: 1.33rem;
+    font-weight: 400;
+    line-height: 1.2;
 }

package/src/components/LoginDrawer/LoginDrawer.stories.tsx

@@ -50,6 +50,25 @@ NeedsMissingData.args = {
   __TEST__needMissingData: true,
 };
 
+export const Signup = Template.bind({});
+Signup.args = {
+  open: true,
+  __TEST__signup: true,
+};
+
+export const SignupWaitingForOtp = Template.bind({});
+SignupWaitingForOtp.args = {
+  open: true,
+  __TEST__signup: true,
+  __TEST__waitingForOtp: true,
+};
+
+export const ChangePassword = Template.bind({});
+ChangePassword.args = {
+  open: true,
+  __TEST__changePwd: true,
+};
+
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   open: true,