⚠️ Get Chatballoons better (not 100% yet)

src/hooks/rooms/widgets/useChatWidget.ts

@@ -38,42 +38,78 @@ const useChatWidgetState = () =>
         }
     }, [ chatSettings ]);
 
-    const setFigureImage = (figure: string) =>
+    const setFigureImage = (figure: string, username: string): Promise<string | null> => {
-    {
+        return new Promise((resolve) => {
-        const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, null, {
+            console.log('setFigureImage called with figure:', figure, 'username:', username);
-            resetFigure: figure => 
-            {
-                if(isDisposed.current) return;
 
-                setFigureImage(figure);
+            const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, null, {
-            },
+                resetFigure: figure => {
-            dispose: () => 
+                    if (isDisposed.current) return;
-            {},
+                    setFigureImage(figure, username);
-            disposed: false
+                },
+                dispose: () => {},
+                disposed: false
+            });
+
+            console.log('avatarImage result:', avatarImage);
+
+            if (!avatarImage) {
+                console.log('Failed to create avatarImage for figure:', figure);
+                resolve('https://via.placeholder.com/40');
+                return;
+            }
+
+            avatarImage.getCroppedImage(AvatarSetType.HEAD).then(image => {
+                console.log('Cropped image:', image, 'Image src:', image?.src);
+
+                if (!image || !image.src) {
+                    console.log('Failed to get cropped image or src for figure:', figure);
+                    avatarImage.dispose();
+                    resolve('https://via.placeholder.com/40');
+                    return;
+                }
+
+                const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST);
+                console.log('Avatar color:', color, 'RGB:', color?.rgb);
+
+                avatarColorCache.set(figure, ((color && color.rgb) || 16777215));
+                avatarImageCache.set(figure, image.src);
+                console.log('Cached image src:', image.src);
+
+                // Update existing chat messages for this username
+                setChatMessages(prevValue => {
+                    const updatedMessages = prevValue.map(chat => {
+                        if (chat.username === username && chat.imageUrl !== image.src) {
+                            chat.imageUrl = image.src; // Update in-place
+                            return { ...chat }; // Shallow copy to trigger re-render
+                        }
+                        return chat;
+                    });
+                    return updatedMessages;
+                });
+
+                avatarImage.dispose();
+                resolve(image.src);
+            }).catch(error => {
+                console.error('Error in setFigureImage:', error);
+                avatarImage.dispose();
+                resolve('https://via.placeholder.com/40');
+            });
         });
+    };
 
-        if(!avatarImage) return;
+    const getUserImage = (figure: string, username: string): string | null => {
-
-        const image = avatarImage.getCroppedImage(AvatarSetType.HEAD);
-        const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST);
-
-        avatarColorCache.set(figure, ((color && color.rgb) || 16777215));
-
-        avatarImage.dispose();
-
-        avatarImageCache.set(figure, image.src);
-
-        return image.src;
-    }
-
-    const getUserImage = (figure: string) =>
-    {
         let existing = avatarImageCache.get(figure);
 
-        if(!existing) existing = setFigureImage(figure);
+        if (!existing) {
+            setFigureImage(figure, username).then(src => {
+                avatarImageCache.set(figure, src);
+            });
+            return 'https://via.placeholder.com/40';
+        }
 
         return existing;
-    }
+    };
 
     const getPetImage = (figure: string, direction: number, _arg_3: boolean, scale: number = 64, posture: string = null) =>
     {
@@ -88,49 +124,57 @@ const useChatWidgetState = () =>
         if(image)
         {
             existing = TextureUtils.generateImageUrl(image.data);
-
             petImageCache.set((figure + posture), existing);
         }
 
         return existing;
-    }
+    };
 
     useRoomSessionManagerEvent<RoomSessionChatEvent>(RoomSessionChatEvent.CHAT_EVENT, event =>
     {
-		const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, event.objectId, RoomObjectCategory.UNIT);
+        const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, event.objectId, RoomObjectCategory.UNIT);
         const bubbleLocation = roomObject ? GetRoomObjectScreenLocation(roomSession.roomId, roomObject?.id, RoomObjectCategory.UNIT) : new NitroPoint();
         const userData = roomObject ? roomSession.userDataManager.getUserDataByIndex(event.objectId) : new RoomUserData(-1);
 
         let username = '';
         let avatarColor = 0;
-        let imageUrl: string = null;
+        let imageUrl: string | null = null;
         let chatType = event.chatType;
         let styleId = event.style;
         let userType = 0;
         let petType = -1;
         let text = event.message;
-		let chatColours = event._chatColours
+        let chatColours = event._chatColours;
 
-		if(userData)
+        if(userData)
         {
             userType = userData.type;
 
             const figure = userData.figure;
 
+            console.log('Chat Event Debug:', {
+                userId: event.objectId,
+                username: userData.name,
+                userType,
+                figure,
+                roomObjectExists: !!roomObject
+            });
+
             switch(userType)
             {
                 case RoomObjectType.PET:
                     imageUrl = getPetImage(figure, 2, true, 64, roomObject.model.getValue<string>(RoomObjectVariable.FIGURE_POSTURE));
                     petType = new PetFigureData(figure).typeId;
-					chatColours = "black"
+                    chatColours = "black";
                     break;
                 case RoomObjectType.USER:
-                    imageUrl = getUserImage(figure);
+                    imageUrl = getUserImage(figure, userData.name);
+                    console.log('getUserImage result:', { figure, imageUrl });
                     break;
                 case RoomObjectType.RENTABLE_BOT:
                 case RoomObjectType.BOT:
                     styleId = SystemChatStyleEnum.BOT;
-					chatColours = "black"
+                    chatColours = "black";
                     break;
             }
 
@@ -209,7 +253,8 @@ const useChatWidgetState = () =>
             styleId,
             imageUrl,
             color,
-			chatColours);
+            chatColours
+        );
 
         setChatMessages(prevValue => [ ...prevValue, chatMessage ]);
         addChatEntry({ id: -1, webId: userData.webID, entityId: userData.roomIndex, name: username, imageUrl, style: styleId, chatType: chatType, entityType: userData.type, message: formattedText, timestamp: ChatHistoryCurrentDate(), type: ChatEntryType.TYPE_CHAT, roomId: roomSession.roomId, color, chatColours });
@@ -251,6 +296,6 @@ const useChatWidgetState = () =>
     }, []);
 
     return { chatMessages, setChatMessages, chatSettings, getScrollSpeed };
-}
+};
 
 export const useChatWidget = useChatWidgetState;

submodules/renderer/src/pixi-proxy/TextureUtils.ts

@@ -14,7 +14,6 @@ export class TextureUtils
     {
         if (!this._extract && renderer) {
             this._extract = new Extract(renderer);
-            console.log('TextureUtils: Initialized Extract plugin', { renderer });
         }
     }
 
@@ -38,13 +37,11 @@ export class TextureUtils
             }
 
             const image = await extractor.image(target);
-            console.log('generateImage: Extracted image', { src: image?.src, isValid: image?.src?.startsWith('data:image/') });
 
             if (!image || !image.src || !image.src.startsWith('data:image/')) {
                 const canvas = extractor.canvas(target);
                 if (canvas) {
                     const dataUrl = canvas.toDataURL('image/png');
-                    console.log('generateImage: Fallback canvas', { dataUrl });
                     if (dataUrl && dataUrl.startsWith('data:image/')) {
                         const fallbackImage = new Image();
                         fallbackImage.src = dataUrl;