Mintplex-Labs · timothycarambat · Dec 7, 2023 · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -8,6 +8,8 @@ import PrivateRoute, {
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import Login from "@/pages/Login";
+import { PfpProvider } from "./PfpContext";
+import { LogoProvider } from "./LogoContext";
 
 const Main = lazy(() => import("@/pages/Main"));
 const InvitePage = lazy(() => import("@/pages/Invite"));
@@ -40,69 +42,73 @@ export default function App() {
   return (
     <Suspense fallback={<div />}>
       <ContextWrapper>
-        <Routes>
-          <Route path="/" element={<PrivateRoute Component={Main} />} />
-          <Route path="/login" element={<Login />} />
-          <Route
-            path="/workspace/:slug"
-            element={<PrivateRoute Component={WorkspaceChat} />}
-          />
-          <Route path="/accept-invite/:code" element={<InvitePage />} />
+        <LogoProvider>
+          <PfpProvider>
+            <Routes>
+              <Route path="/" element={<PrivateRoute Component={Main} />} />
+              <Route path="/login" element={<Login />} />
+              <Route
+                path="/workspace/:slug"
+                element={<PrivateRoute Component={WorkspaceChat} />}
+              />
+              <Route path="/accept-invite/:code" element={<InvitePage />} />
 
-          {/* Admin */}
-          <Route
-            path="/settings/llm-preference"
-            element={<AdminRoute Component={GeneralLLMPreference} />}
-          />
-          <Route
-            path="/settings/embedding-preference"
-            element={<AdminRoute Component={GeneralEmbeddingPreference} />}
-          />
-          <Route
-            path="/settings/vector-database"
-            element={<AdminRoute Component={GeneralVectorDatabase} />}
-          />
-          {/* Manager */}
-          <Route
-            path="/settings/export-import"
-            element={<ManagerRoute Component={GeneralExportImport} />}
-          />
-          <Route
-            path="/settings/security"
-            element={<ManagerRoute Component={GeneralSecurity} />}
-          />
-          <Route
-            path="/settings/appearance"
-            element={<ManagerRoute Component={GeneralAppearance} />}
-          />
-          <Route
-            path="/settings/api-keys"
-            element={<ManagerRoute Component={GeneralApiKeys} />}
-          />
-          <Route
-            path="/settings/workspace-chats"
-            element={<ManagerRoute Component={GeneralChats} />}
-          />
-          <Route
-            path="/settings/system-preferences"
-            element={<ManagerRoute Component={AdminSystem} />}
-          />
-          <Route
-            path="/settings/invites"
-            element={<ManagerRoute Component={AdminInvites} />}
-          />
-          <Route
-            path="/settings/users"
-            element={<ManagerRoute Component={AdminUsers} />}
-          />
-          <Route
-            path="/settings/workspaces"
-            element={<ManagerRoute Component={AdminWorkspaces} />}
-          />
-          {/* Onboarding Flow */}
-          <Route path="/onboarding" element={<OnboardingFlow />} />
-        </Routes>
-        <ToastContainer />
+              {/* Admin */}
+              <Route
+                path="/settings/llm-preference"
+                element={<AdminRoute Component={GeneralLLMPreference} />}
+              />
+              <Route
+                path="/settings/embedding-preference"
+                element={<AdminRoute Component={GeneralEmbeddingPreference} />}
+              />
+              <Route
+                path="/settings/vector-database"
+                element={<AdminRoute Component={GeneralVectorDatabase} />}
+              />
+              {/* Manager */}
+              <Route
+                path="/settings/export-import"
+                element={<ManagerRoute Component={GeneralExportImport} />}
+              />
+              <Route
+                path="/settings/security"
+                element={<ManagerRoute Component={GeneralSecurity} />}
+              />
+              <Route
+                path="/settings/appearance"
+                element={<ManagerRoute Component={GeneralAppearance} />}
+              />
+              <Route
+                path="/settings/api-keys"
+                element={<ManagerRoute Component={GeneralApiKeys} />}
+              />
+              <Route
+                path="/settings/workspace-chats"
+                element={<ManagerRoute Component={GeneralChats} />}
+              />
+              <Route
+                path="/settings/system-preferences"
+                element={<ManagerRoute Component={AdminSystem} />}
+              />
+              <Route
+                path="/settings/invites"
+                element={<ManagerRoute Component={AdminInvites} />}
+              />
+              <Route
+                path="/settings/users"
+                element={<ManagerRoute Component={AdminUsers} />}
+              />
+              <Route
+                path="/settings/workspaces"
+                element={<ManagerRoute Component={AdminWorkspaces} />}
+              />
+              {/* Onboarding Flow */}
+              <Route path="/onboarding" element={<OnboardingFlow />} />
+            </Routes>
+            <ToastContainer />
+          </PfpProvider>
+        </LogoProvider>
       </ContextWrapper>
     </Suspense>
   );

diff --git a/frontend/src/LogoContext.jsx b/frontend/src/LogoContext.jsx
@@ -0,0 +1,28 @@
+import { createContext, useEffect, useState } from "react";
+import AnythingLLM from "./media/logo/anything-llm.png";
+import System from "./models/system";
+
+export const LogoContext = createContext();
+
+export function LogoProvider({ children }) {
+  const [logo, setLogo] = useState("");
+
+  useEffect(() => {
+    async function fetchInstanceLogo() {
+      try {
+        const logoURL = await System.fetchLogo();
+        logoURL ? setLogo(logoURL) : setLogo(AnythingLLM);
+      } catch (err) {
+        setLogo(AnythingLLM);
+        console.error("Failed to fetch logo:", err);
+      }
+    }
+    fetchInstanceLogo();
+  }, []);
+
+  return (
+    <LogoContext.Provider value={{ logo, setLogo }}>
+      {children}
+    </LogoContext.Provider>
+  );
+}
diff --git a/frontend/src/PfpContext.jsx b/frontend/src/PfpContext.jsx
@@ -0,0 +1,30 @@
+import React, { createContext, useState, useEffect } from "react";
+import useUser from "./hooks/useUser";
+import System from "./models/system";
+
+export const PfpContext = createContext();
+
+export function PfpProvider({ children }) {
+  const [pfp, setPfp] = useState(null);
+  const { user } = useUser();
+
+  useEffect(() => {
+    async function fetchPfp() {
+      if (!user?.id) return;
+      try {
+        const pfpUrl = await System.fetchPfp(user.id);
+        setPfp(pfpUrl);
+      } catch (err) {
+        setPfp(null);
+        console.error("Failed to fetch pfp:", err);
+      }
+    }
+    fetchPfp();
+  }, [user?.id]);
+
+  return (
+    <PfpContext.Provider value={{ pfp, setPfp }}>
+      {children}
+    </PfpContext.Provider>
+  );
+}
diff --git a/frontend/src/components/UserIcon/index.jsx b/frontend/src/components/UserIcon/index.jsx
@@ -1,32 +1,35 @@
 import React, { useRef, useEffect } from "react";
 import JAZZ from "@metamask/jazzicon";
+import usePfp from "../../hooks/usePfp";
 
 export default function Jazzicon({ size = 10, user, role }) {
+  const { pfp } = usePfp();
   const divRef = useRef(null);
   const seed = user?.uid
     ? toPseudoRandomInteger(user.uid)
     : Math.floor(100000 + Math.random() * 900000);
-  const result = JAZZ(size, seed);
 
   useEffect(() => {
-    if (!divRef || !divRef.current) return null;
+    if (!divRef.current || (role === "user" && pfp)) return;
 
+    const result = JAZZ(size, seed);
     divRef.current.appendChild(result);
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [pfp, role, seed, size]);
 
   return (
-    <div
-      className={`flex ${role === "user" ? "user-reply" : ""}`}
-      ref={divRef}
-    />
+    <div className="relative w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden">
+      <div ref={divRef} />
+      {role === "user" && pfp && (
+        <img
+          src={pfp}
+          alt="User profile picture"
+          className="absolute top-0 left-0 w-full h-full object-cover rounded-full bg-white"
+        />
+      )}
+    </div>
   );
 }
 
 function toPseudoRandomInteger(uidString = "") {
-  var numberArray = [uidString.length];
-  for (var i = 0; i < uidString.length; i++) {
-    numberArray[i] = uidString.charCodeAt(i);
-  }
-
-  return numberArray.reduce((a, b) => a + b, 0);
+  return uidString.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
 }