@memori.ai/memori-react 8.6.7 → 8.7.1

package/src/components/Header/Header.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { memori, history, user } from '../../mocks/data';
 import Header from './Header';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 it('renders Header unchanged', () => {
   const { container } = render(
@@ -20,6 +21,7 @@ it('renders Header unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -50,6 +52,7 @@ it('renders Header with position unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -72,6 +75,7 @@ it('renders Header with speaker muted unchanged', () => {
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -95,6 +99,7 @@ it('renders Header with audio disabled unchanged', () => {
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -117,6 +122,7 @@ it('renders Header with share button unchanged', () => {
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -139,6 +145,7 @@ it('renders Header with settings button unchanged', () => {
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -162,6 +169,7 @@ it('renders Header with clear button unchanged', () => {
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -184,6 +192,7 @@ it('renders Header with user activated speak unchanged', () => {
       clearHistory={jest.fn()}
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -210,6 +219,7 @@ it('renders Header with deep thought unlogged unchanged', () => {
       clearHistory={jest.fn()}
       showLogin
       setShowLoginDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -230,7 +240,7 @@ it('renders Header with deep thought logged but without permission flag unchange
       speakerMuted={false}
       setSpeakerMuted={jest.fn()}
       hasUserActivatedSpeak={false}
-
+      apiClient={memoriApiClient()}
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
@@ -264,6 +274,7 @@ it('renders Header with deep thought logged with permission flag unchanged', ()
       showShare={false}
       showSettings={false}
       clearHistory={jest.fn()}
+      apiClient={memoriApiClient()}
       loginToken="abcd"
       user={{
         ...user,
@@ -295,6 +306,7 @@ it('renders Header with deep thought and session open unchanged', () => {
       showSettings={false}
       clearHistory={jest.fn()}
       sessionID="1234"
+      apiClient={memoriApiClient()}
       loginToken="abcd"
       setShowLoginDrawer={jest.fn()}
       setShowChatHistoryDrawer={jest.fn()}
@@ -323,6 +335,7 @@ it('renders Header for board of experts unchanged', () => {
       clearHistory={jest.fn()}
       loginToken="abcd"
       setShowLoginDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
       setShowChatHistoryDrawer={jest.fn()}
     />
   );
@@ -350,6 +363,7 @@ it('renders Header for board of experts with session open unchanged', () => {
       sessionID="1234"
       loginToken="abcd"
       setShowLoginDrawer={jest.fn()}
+      apiClient={memoriApiClient()}
       setShowChatHistoryDrawer={jest.fn()}
     />
   );

package/src/components/Header/Header.tsx

@@ -8,6 +8,7 @@ import {
   User,
 } from '@memori.ai/memori-api-client/dist/types';
 import Button from '../ui/Button';
+import Dropdown from '../ui/Dropdown';
 import MapMarker from '../icons/MapMarker';
 import SoundDeactivated from '../icons/SoundDeactivated';
 import Sound from '../icons/Sound';
@@ -22,6 +23,12 @@ import DeepThought from '../icons/DeepThought';
 import Group from '../icons/Group';
 import UserIcon from '../icons/User';
 import MessageIcon from '../icons/Message';
+import Logout from '../icons/Logout';
+import { getErrori18nKey } from '../../helpers/error';
+import toast from 'react-hot-toast';
+import memoriApiClient from '@memori.ai/memori-api-client';
+
+const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
 
 export interface Props {
   className?: string;
@@ -51,6 +58,8 @@ export interface Props {
   sessionID?: string;
   baseUrl?: string;
   fullScreenHandler?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onLogout?: () => void;
+  apiClient: ReturnType<typeof memoriApiClient>;
 }
 
 const Header: React.FC<Props> = ({
@@ -81,8 +90,14 @@ const Header: React.FC<Props> = ({
   showChatHistory = true,
   fullScreenHandler,
   baseUrl,
+  onLogout,
+  apiClient,
 }) => {
   const { t } = useTranslation();
+  const {
+    uploadAsset,
+    pwlUpdateUser,
+  } = apiClient.backend;
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
   const [fullScreen, setFullScreen] = useState(false);
   useEffect(() => {
@@ -91,6 +106,52 @@ const Header: React.FC<Props> = ({
     }
   }, []);
 
+  const updateAvatar = async (avatar: Blob) => {
+    console.log('[updateAvatar] Starting avatar update', { avatar });
+    if (avatar && loginToken) {
+      const reader = new FileReader();
+      reader.onload = async e => {
+        console.log('[updateAvatar] FileReader loaded', { result: e.target?.result });
+        try {
+          console.log('[updateAvatar] Uploading asset...');
+          const { asset: avatarAsset, ...resp } = await uploadAsset(
+            avatar.name ?? 'avatar',
+            e.target?.result as string,
+            loginToken ?? ''
+          );
+          console.log('[updateAvatar] Upload response:', { avatarAsset, resp });
+
+          if (resp.resultCode !== 0) {
+            console.error('[updateAvatar] Upload failed:', resp);
+            toast.error(t(getErrori18nKey(resp.resultCode)));
+          } else if (avatarAsset) {
+            console.log('[updateAvatar] Upload successful, updating user...');
+            let newUser: Partial<User> = {
+              userID: user?.userID,
+              avatarURL: avatarAsset.assetURL,
+            };
+
+            const { user: patchedUser, ...resp } = await pwlUpdateUser(
+              loginToken ?? '',
+              user?.userID ?? '',
+              newUser
+            );
+            console.log('[updateAvatar] User update complete', { patchedUser, resp });
+          }
+        } catch (e) {
+          let err = e as Error;
+          console.error('[updateAvatar] Error:', err);
+
+          if (err?.message) toast.error(err.message);
+        }
+      };
+      reader.readAsDataURL(avatar as Blob);
+    } else {
+      console.error('[updateAvatar] Missing avatar or login token', { avatar, loginToken });
+      toast.error(t('login.avatarUploadError'));
+    }
+  };
+
   return (
     <div className={cx('memori-header', className)}>
       {memori.needsPosition && position && (
@@ -244,16 +305,91 @@ const Header: React.FC<Props> = ({
         />
       )}
       {showLogin && (
-        <Button
-          primary
-          shape="circle"
-          className="memori-header--button memori-header--button-login"
-          icon={<UserIcon />}
-          onClick={() => setShowLoginDrawer(true)}
-          title={
-            loginToken ? t('login.user') || 'User' : t('login.login') || 'Login'
-          }
-        />
+        <>
+          {loginToken && user ? (
+            <Dropdown
+              placement="bottom-right"
+              trigger={
+                <Button
+                  primary
+                  shape="circle"
+                  className="memori-header--button memori-header--button-login"
+                  icon={<UserIcon />}
+                  title={t('login.user') || 'User'}
+                />
+              }
+            >
+              <div className="memori-dropdown--user-profile">
+                <div className="memori-dropdown--user-info">
+                  {user.avatarURL ? (
+                    <>
+                    <img
+                      src={user.avatarURL}
+                      alt={user.userName || user.eMail}
+                      className="memori-dropdown--avatar"
+                    />
+                    <input
+                      type="file"
+                      name="avatar"
+                      id="avatar"
+                      className="memori-dropdown--avatar-input"
+                      onChange={e => updateAvatar(e.target.files?.[0] ?? null as unknown as Blob)}
+                      accept={imgMimeTypes.join(', ')}
+                    />
+                    </>
+                  ) : (
+                    <div className="memori-dropdown--avatar-placeholder">
+                      <span>
+                        {(user.userName || user.eMail || 'U')
+                          .charAt(0)
+                          .toUpperCase()}
+                      </span>
+                      <input
+                        type="file"
+                        name="avatar"
+                        id="avatar"
+                        className="memori-dropdown--avatar-input"
+                        onChange={e => updateAvatar(e.target.files?.[0] ?? null as unknown as Blob)}
+                        accept={imgMimeTypes.join(', ')}
+                      />
+                    </div>
+                  )}
+
+                  <div className="memori-dropdown--user-details">
+                    <h3 className="memori-dropdown--user-name">
+                      {user.userName || t('login.welcomeUser')}
+                    </h3>
+                    <p className="memori-dropdown--user-email">{user.eMail}</p>
+                    <div className="memori-dropdown--user-badge">
+                      {user.birthDate
+                        ? new Date(user.birthDate).toLocaleDateString()
+                        : t('login.notSet')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="memori-dropdown--actions">
+                <button
+                  className="memori-dropdown--action-button memori-dropdown--action-button--logout"
+                  onClick={onLogout}
+                >
+                  <Logout className="memori-dropdown--action-icon" />
+                  {t('login.logout') || 'Logout'}
+                </button>
+              </div>
+            </Dropdown>
+          ) : (
+            <Button
+              primary
+              shape="circle"
+              className="memori-header--button memori-header--button-login"
+              icon={<UserIcon />}
+              onClick={() => setShowLoginDrawer(true)}
+              title={t('login.login') || 'Login'}
+            />
+          )}
+        </>
       )}
     </div>
   );

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

@@ -75,7 +75,7 @@ exports[`renders Header for board of experts unchanged 1`] = `
     </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.user"
+      title="login.login"
     >
       <span
         class="memori-button--icon"
@@ -171,7 +171,7 @@ exports[`renders Header for board of experts with session open unchanged 1`] = `
     </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.user"
+      title="login.login"
     >
       <span
         class="memori-button--icon"
@@ -387,7 +387,7 @@ exports[`renders Header with deep thought and session open unchanged 1`] = `
     </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.user"
+      title="login.login"
     >
       <span
         class="memori-button--icon"
@@ -454,26 +454,34 @@ exports[`renders Header with deep thought logged but without permission flag unc
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.user"
+    <div
+      class="memori-dropdown"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-dropdown--trigger"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+          title="login.user"
         >
-          <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>
-    </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>
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -567,26 +575,34 @@ exports[`renders Header with deep thought logged with permission flag unchanged
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
-      title="login.user"
+    <div
+      class="memori-dropdown"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-dropdown--trigger"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+          title="login.user"
         >
-          <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>
-    </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>
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 `;