Repository: Mintplex-Labs/anything-llm
File: frontend/src/components/UserIcon/index.jsx (JavaScript)

Code before:

export default function Jazzicon({ size = 10, user, role }) {
  const [workspacePfp, setWorkspacePfp] = useState(null);
  const { pfp } = usePfp();
  const divRef = useRef(null);
  const seed = user?.uid
    ? toPseudoRandomInteger(user.uid)
    : Math.floor(100000 + Math.random() * 900000);

  useEffect(() => {
    if (!divRef.current || (role === "user" && pfp)) return;

    const result = JAZZ(size, seed);
    divRef.current.appendChild(result);
  }, [pfp, role, seed, size]);

  useEffect(() => {
    async function fetchWorkspacePfp() {
      const pfpUrl = await Workspace.fetchPfp(user?.uid);
      setWorkspacePfp(pfpUrl);
    }
    if (role === "assistant") {
      fetchWorkspacePfp();
    }
  }, [role, user?.uid]);

  return (
    <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"
        />
      )}
      {role === "assistant" && workspacePfp && (
        <img
          src={workspacePfp}
          alt="Workspace profile picture"
          className="absolute top-0 left-0 w-full h-full object-cover rounded-full bg-white"
        />
      )}
    </div>
  );
}

function toPseudoRandomInteger(uidString = "") {
  return uidString.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
}


Review comment (performance):
This will fire hundreds of times on a response chunk and will constantly make a call to the backend for the PFP. On only a small response it called over 80 times. We should be local-caching this image aggressively (maybe even when the workspace is GET on the chat page).

The image request should only be called once and then retrieved from cache then on until some expiration date.


Lastly, UseEffects need to return a function so rewriting this as 
```jsx
useEffect(() => {
    async function fetchWorkspacePfp() {
     if(role !== "assistant") return false;
      const pfpUrl = await Workspace.fetchPfp(user?.uid);
      setWorkspacePfp(pfpUrl);
    }
      fetchWorkspacePfp();
  }, [role, user?.uid]);
  ```
  
  makes more sense here

Code after:
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);

  useEffect(() => {
    if (!divRef.current || (role === "user" && pfp)) return;

    const result = JAZZ(size, seed);
    divRef.current.appendChild(result);
  }, [pfp, role, seed, size]);

  return (
    <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 = "") {
  return uidString.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
}