feat: Log camera update response data for debugging purposes; adjust user position parameter in findEnvironment function

app/src/modules/collaboration/users/Avatar.tsx

@@ -7,6 +7,7 @@ interface AvatarProps {
   size?: number;
   index?: number;
   textColor?: string;
+  color?: string; // Optional color prop for future use
 }
 
 const CustomAvatar: React.FC<AvatarProps> = ({
@@ -14,6 +15,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
   size = 100,
   index = 0,
   textColor = "#ffffff",
+  color, // Optional color prop for future use
 }) => {
   const [imageSrc, setImageSrc] = useState<string | null>(null);
 
@@ -26,7 +28,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
       const initials = getInitials(name); // Convert name to initials if needed
 
       // Draw background
-      ctx.fillStyle = getAvatarColor(index);
+      ctx.fillStyle = color || getAvatarColor(index); // Use color prop or generate color based on index
       ctx.fillRect(0, 0, size, size);
 
       // Draw initials
@@ -40,7 +42,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
       const dataURL = canvas.toDataURL("image/png");
       setImageSrc(dataURL);
     }
-  }, [name, size, textColor]);
+  }, [name, size, textColor, index]);
 
   if (!imageSrc) {
     return null; // Return null while the image is being generated
@@ -53,6 +55,18 @@ const CustomAvatar: React.FC<AvatarProps> = ({
       alt="User Avatar"
       style={{ width: "100%", height: "100%" }}
     />
+    // <div
+    //   className="user-image"
+    //   style={{
+    //     width: size,
+    //     height: size,
+    //     borderRadius: "50%",
+    //     overflow: "hidden",
+    //     backgroundSize: "cover",
+    //     backgroundPosition: "center",
+    //   }}>
+    //     {name[0]}
+    //   </div>
   );
 };