🆕 Updated Chooser & Furni command - now glowing !

src/api/room/widgets/ChooserSelectionVisualizer.ts

@@ -0,0 +1,100 @@
+import { ChooserSelectionFilter, GetRoomEngine, IRoomObjectSpriteVisualization, RoomObjectCategory } from '@nitrots/nitro-renderer';
+
+export class chooserSelectionVisualizer
+{
+    private static activeFilters: Map<string, ChooserSelectionFilter> = new Map();
+    private static animationFrameId: number | null = null;
+
+    private static startAnimation(): void
+    {
+        if (this.animationFrameId !== null) return;
+
+        const animate = (time: number) => {
+            const elapsed = time / 1000; // Convert to seconds
+            this.activeFilters.forEach(filter => {
+                filter.time = elapsed; // Update time uniform
+            });
+            this.animationFrameId = requestAnimationFrame(animate);
+        };
+
+        this.animationFrameId = requestAnimationFrame(animate);
+    }
+
+    private static stopAnimation(): void
+    {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+
+    public static show(id: number, category: number = RoomObjectCategory.FLOOR): void
+    {
+        const roomObject = GetRoomEngine().getRoomObject(GetRoomEngine().activeRoomId, id, category);
+        if (!roomObject) return;
+
+        const visualization = roomObject.visualization as IRoomObjectSpriteVisualization;
+        if (!visualization || !visualization.sprites || !visualization.sprites.length) return;
+
+        const filter = new ChooserSelectionFilter(
+            [0.700, 0.880, 0.950],
+            [0.290, 0.350, 0.390]
+        );
+        const key = `${id}_${category}`;
+        this.activeFilters.set(key, filter);
+
+        for (const sprite of visualization.sprites)
+        {
+            if (sprite.blendMode === 1) continue;
+            const existing = (sprite.filters || []).filter(f => !(f instanceof ChooserSelectionFilter));
+            sprite.filters = [...existing, filter];
+        }
+
+        this.startAnimation();
+    }
+
+    public static hide(id: number, category: number = RoomObjectCategory.FLOOR): void
+    {
+        const roomObject = GetRoomEngine().getRoomObject(GetRoomEngine().activeRoomId, id, category);
+        if (!roomObject) return;
+
+        const visualization = roomObject.visualization as IRoomObjectSpriteVisualization;
+        if (!visualization) return;
+
+        const key = `${id}_${category}`;
+        this.activeFilters.delete(key);
+
+        for (const sprite of visualization.sprites)
+        {
+            sprite.filters = (sprite.filters || []).filter(f => !(f instanceof ChooserSelectionFilter));
+        }
+
+        if (this.activeFilters.size === 0) {
+            this.stopAnimation();
+        }
+    }
+
+    public static clearAll(): void
+    {
+        const roomEngine = GetRoomEngine();
+
+        const roomObjects = [
+            ...roomEngine.getRoomObjects(roomEngine.activeRoomId, RoomObjectCategory.FLOOR),
+            ...roomEngine.getRoomObjects(roomEngine.activeRoomId, RoomObjectCategory.WALL)
+        ];
+
+        for (const roomObject of roomObjects)
+        {
+            const visualization = roomObject.visualization as IRoomObjectSpriteVisualization;
+            if (!visualization) continue;
+
+            for (const sprite of visualization.sprites)
+            {
+                sprite.filters = (sprite.filters || []).filter(f => !(f instanceof ChooserSelectionFilter));
+            }
+        }
+
+        this.activeFilters.clear();
+        this.stopAnimation();
+    }
+}

src/api/room/widgets/RoomObjectItem.ts

@@ -3,12 +3,18 @@ export class RoomObjectItem
     private _id: number;
     private _category: number;
     private _name: string;
+    private _ownerId: number;
+    private _ownerName: string;
+    private _type?: string;
 
-    constructor(id: number, category: number, name: string)
+    constructor(id: number, category: number, name: string, ownerId: number = 0, ownerName: string = '#', type?: string)
     {
         this._id = id;
         this._category = category;
         this._name = name;
+        this._ownerId = ownerId;
+        this._ownerName = ownerName;
+        this._type = type;
     }
 
     public get id(): number
@@ -25,4 +31,19 @@ export class RoomObjectItem
     {
         return this._name;
     }
+
+    public get ownerId(): number
+    {
+        return this._ownerId;
+    }
+
+    public get ownerName(): string
+    {
+        return this._ownerName ?? '#';
+    }
+
+    public get type(): string
+    {
+        return this._type ?? '-';
+    }
 }

src/api/room/widgets/index.ts

@@ -1,4 +1,5 @@
 export * from './AvatarInfoFurni';
+export * from './ChooserSelectionVisualizer';
 export * from './AvatarInfoName';
 export * from './AvatarInfoPet';
 export * from './AvatarInfoRentableBot';

src/components/room/widgets/choosers/ChooserWidgetView.tsx

@@ -1,88 +1,201 @@
-import { GetSessionDataManager, FurniturePickupAllComposer } from '@nitrots/nitro-renderer';
+import { FurniturePickupAllComposer, GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { LocalizeText, RoomObjectItem, SendMessageComposer } from '../../../../api';
+import { LocalizeText, RoomObjectItem, SendMessageComposer, chooserSelectionVisualizer } from '../../../../api';
 import { Button, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { NitroInput, classNames } from '../../../../layout';
 
 const LIMIT_FURNI_PICKALL = 100;
 
-interface ChooserWidgetViewProps {
+interface ChooserWidgetViewProps
+{
     title: string;
     items: RoomObjectItem[];
     selectItem: (item: RoomObjectItem) => void;
     onClose: () => void;
     pickallFurni?: boolean;
+    type?: 'furni' | 'users';
 }
 
-export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props => {
+export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
-    const { title = null, items = [], selectItem = null, onClose = null, pickallFurni = false } = props;
+{
-    const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
+    const { title = null, items = [], selectItem = null, onClose = null, pickallFurni = false, type = 'furni' } = props;
+    const [ selectedItems, setSelectedItems ] = useState<RoomObjectItem[]>([]);
     const [ searchValue, setSearchValue ] = useState('');
     const [ checkAll, setCheckAll ] = useState(false);
     const [ checkedIds, setCheckedIds ] = useState<number[]>([]);
     const canSeeId = GetSessionDataManager().isModerator;
 
-    const checkedId = (id?: number) => {
+    const ownerNames = useMemo(() =>
-        if (id) {
+    {
-            if (isChecked(id))
+        const names = Array.from(new Set(items.map(item => item.ownerName || 'Unknown')));
+        return names.sort();
+    }, [ items ]);
+
+    const [ selectedFilter, setSelectedFilter ] = useState(() =>
+    {
+        if(pickallFurni) return 'all';
+        return ownerNames.length > 0 ? ownerNames[0] : '';
+    });
+
+    useEffect(() =>
+    {
+        if(!pickallFurni && ownerNames.length > 0 && !selectedFilter)
+            setSelectedFilter(ownerNames[0]);
+    }, [ pickallFurni, ownerNames, selectedFilter ]);
+
+    const checkedId = (id?: number) =>
+    {
+        if(id)
+        {
+            if(isChecked(id))
                 setCheckedIds(checkedIds.filter(x => x !== id));
-            else if (checkedIds.length < LIMIT_FURNI_PICKALL)
+            else if(checkedIds.length < LIMIT_FURNI_PICKALL)
                 setCheckedIds([ ...checkedIds, id ]);
-        } else {
+        }
+        else
+        {
             setCheckAll(value => !value);
-            if (!checkAll) {
+
-                const itemIds = filteredItems.map(x => x.id).slice(0, LIMIT_FURNI_PICKALL);
+            if(!checkAll)
-                setCheckedIds(itemIds);
+            {
-            } else {
+                const allItems = filteredItems.slice(0, LIMIT_FURNI_PICKALL);
+                setCheckedIds(allItems.map(x => x.id));
+                setSelectedItems(allItems);
+            }
+            else
+            {
                 setCheckedIds([]);
+                setSelectedItems([]);
+                chooserSelectionVisualizer.clearAll();
             }
         }
     }
 
     const isChecked = (id: number) => checkedIds.includes(id);
 
-    const onClickPickAll = () => {
+    const onClickPickAll = () =>
+    {
         SendMessageComposer(new FurniturePickupAllComposer(...checkedIds));
         setCheckedIds([]);
         setCheckAll(false);
+        chooserSelectionVisualizer.clearAll();
+        setSelectedItems([]);
     }
 
-    const filteredItems = useMemo(() => {
+    const filteredItems = useMemo(() =>
+    {
         const value = searchValue.toLocaleLowerCase();
-        const itemsFilter = items.filter(item => item.name?.toLocaleLowerCase().includes(value));
-        return itemsFilter.sort((a, b) => a.name.localeCompare(b.name));
-    }, [ items, searchValue ]);
 
-    useEffect(() => {
+        return items
-        if (!selectedItem) return;
+            .filter(item =>
-        selectItem(selectedItem);
+            {
-    }, [ selectedItem, selectItem ]);
+                const matchesSearch = item.name?.toLocaleLowerCase().includes(value);
+                const matchesFilter = !pickallFurni
+                    ? (selectedFilter ? item.ownerName === selectedFilter : true)
+                    : (selectedFilter === 'all' || item.ownerName === selectedFilter);
+                return matchesSearch && matchesFilter;
+            })
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }, [ items, searchValue, selectedFilter, pickallFurni ]);
+
+    useEffect(() =>
+    {
+        if(selectedItems.length === 0) return;
+
+        selectItem(selectedItems[selectedItems.length - 1]);
+
+        chooserSelectionVisualizer.clearAll();
+        selectedItems.forEach(item =>
+        {
+            if(item.id && item.category)
+                chooserSelectionVisualizer.show(item.id, item.category);
+        });
+    }, [ selectedItems, selectItem ]);
+
+    const toggleItemSelection = (item: RoomObjectItem) =>
+    {
+        setSelectedItems(prev =>
+        {
+            if(prev.some(selected => selected.id === item.id))
+            {
+                chooserSelectionVisualizer.hide(item.id, item.category);
+                return prev.filter(selected => selected.id !== item.id);
+            }
+            else
+            {
+                return [ ...prev, item ];
+            }
+        });
+    };
+
+    const handleClose = () =>
+    {
+        chooserSelectionVisualizer.clearAll();
+        setSelectedItems([]);
+        onClose();
+    };
 
     return (
-        <NitroCardView className="w-[200px] h-[200px]" theme="primary-slim">
+        <NitroCardView className="w-[420px] h-[400px]" theme="primary-slim">
-            <NitroCardHeaderView headerText={ title + (pickallFurni ? ` (${filteredItems.length})` : '') } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText={ title + ' (' + filteredItems.length + ')' } onCloseClick={ handleClose } />
-            <NitroCardContentView gap={ 2 } overflow="hidden">
+            <NitroCardContentView overflow="hidden" gap={ 1 }>
-                <NitroInput placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                <Flex gap={ 2 }>
+                    <NitroInput
+                        type="text"
+                        placeholder={ LocalizeText('generic.search') }
+                        value={ searchValue }
+                        onChange={ event => setSearchValue(event.target.value) }
+                    />
+                    { pickallFurni && (
+                        <select
+                            className="form-control form-control-sm"
+                            value={ selectedFilter }
+                            onChange={ event => setSelectedFilter(event.target.value) }
+                        >
+                            <option value="all">{ LocalizeText('roomsettings.access_rights.anyone') }</option>
+                            { ownerNames.length > 0 ? (
+                                ownerNames.map((value, index) => (
+                                    <option key={ index } value={ value }>{ value }</option>
+                                ))
+                            ) : (
+                                <option disabled>No owners found</option>
+                            )}
+                        </select>
+                    )}
+                </Flex>
                 { pickallFurni && (
                     <Flex gap={ 2 }>
-                        <input className="form-check-input" type="checkbox" checked={ checkAll } onChange={ () => checkedId() } />
+                        <input
+                            className="form-check-input"
+                            type="checkbox"
+                            checked={ checkAll }
+                            onChange={ () => checkedId() }
+                        />
                         <Text>{ LocalizeText('widget.chooser.checkall') }</Text>
                     </Flex>
                 )}
-                <InfiniteScroll rowRender={ row => (
+                <InfiniteScroll rows={ filteredItems } rowRender={ row => (
-                    <Flex pointer alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } onClick={ () => setSelectedItem(row) }>
+                    <Flex
+                        alignItems="center"
+                        className={ classNames('rounded p-1', selectedItems.some(item => item.id === row.id) && 'bg-muted') }
+                        pointer
+                        onClick={ () => { toggleItemSelection(row); if(pickallFurni) checkedId(row.id); } }
+                    >
                         { pickallFurni && (
                             <input
                                 className="shrink-0 mx-1 form-check-input"
                                 type="checkbox"
                                 checked={ isChecked(row.id) }
                                 onChange={ () => checkedId(row.id) }
-                                onClick={ e => e.stopPropagation() }
+                                onClick={ e => { e.stopPropagation(); toggleItemSelection(row); } }
                             />
                         )}
-                        <Text truncate>{ row.name } { canSeeId && (' - ' + row.id) }</Text>
+                        <Text truncate>
+                            { row.name }{ canSeeId && (' - ' + row.id) }
+                            { type === 'furni' && row.ownerName && row.ownerName !== '-' && ` (Owner: ${row.ownerName})` }
+                        </Text>
                     </Flex>
-                )} rows={ filteredItems } />
+                )} />
                 { pickallFurni && (
                     <Button variant="secondary" onClick={ onClickPickAll } disabled={ !checkedIds.length }>
                         { LocalizeText('widget.chooser.btn.pickall') }

src/components/room/widgets/choosers/FurniChooserWidgetView.tsx

@@ -1,17 +1,21 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, chooserSelectionVisualizer } from '../../../../api';
 import { useFurniChooserWidget, useRoom } from '../../../../hooks';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
-export const FurniChooserWidgetView: FC<{}> = props => {
+export const FurniChooserWidgetView: FC<{}> = props =>
+{
     const { items = null, onClose = null, selectItem = null, populateChooser = null } = useFurniChooserWidget();
     const { roomSession = null } = useRoom();
 
-    useEffect(() => {
+    useEffect(() =>
+    {
         const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) => {
+            linkReceived: (url: string) =>
+            {
                 const parts = url.split('/');
+
                 populateChooser();
             },
             eventUrlPrefix: 'furni-chooser/'
@@ -19,12 +23,27 @@ export const FurniChooserWidgetView: FC<{}> = props => {
 
         AddLinkEventTracker(linkTracker);
 
-        return () => RemoveLinkEventTracker(linkTracker);
+        return () =>
+        {
+            chooserSelectionVisualizer.clearAll();
+            RemoveLinkEventTracker(linkTracker);
+        };
     }, [ populateChooser ]);
 
-    if (!items) return null;
+    if(!items) return null;
 
     return (
-        <ChooserWidgetView className="w-[200px] h-[200px]" items={ items } selectItem={ selectItem } title={ LocalizeText('widget.chooser.furni.title') } onClose={ onClose } pickallFurni={ roomSession?.isRoomOwner } />
+        <ChooserWidgetView
+            title={ LocalizeText('widget.chooser.furni.title') }
+            items={ items }
+            selectItem={ selectItem }
+            onClose={ () =>
+            {
+                chooserSelectionVisualizer.clearAll();
+                onClose();
+            }}
+            pickallFurni={ roomSession?.isRoomOwner }
+            type="furni"
+        />
     );
 };

src/components/room/widgets/choosers/UserChooserWidgetView.tsx

@@ -1,6 +1,6 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, chooserSelectionVisualizer } from '../../../../api';
 import { useUserChooserWidget } from '../../../../hooks';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
@@ -22,10 +22,27 @@ export const UserChooserWidgetView: FC<{}> = props =>
 
         AddLinkEventTracker(linkTracker);
 
-        return () => RemoveLinkEventTracker(linkTracker);
+        return () =>
+        {
+            chooserSelectionVisualizer.clearAll();
+            RemoveLinkEventTracker(linkTracker);
+        };
     }, [ populateChooser ]);
 
     if(!items) return null;
 
-    return <ChooserWidgetView items={ items } selectItem={ selectItem } title={ LocalizeText('widget.chooser.user.title') } onClose={ onClose } />;
+    return (
+        <ChooserWidgetView
+            title={ LocalizeText('widget.chooser.user.title') }
+            items={ items }
+            selectItem={ selectItem }
+            onClose={ () =>
+            {
+                chooserSelectionVisualizer.clearAll();
+                onClose();
+            }}
+            pickallFurni={ false }
+            type="users"
+        />
+    );
 };

src/hooks/rooms/widgets/useFurniChooserWidget.ts

@@ -4,6 +4,13 @@ import { GetRoomSession, LocalizeText, RoomObjectItem } from '../../../api';
 import { useFurniAddedEvent, useFurniRemovedEvent } from '../engine';
 import { useRoom } from '../useRoom';
 
+const isPetOrBot = (roomObjectType: string): boolean =>
+    roomObjectType.includes('pet_') ||
+    roomObjectType.includes('bot_') ||
+    roomObjectType === 'pet' ||
+    roomObjectType === 'bot' ||
+    roomObjectType.includes('rentableBot');
+
 const useFurniChooserWidgetState = () =>
 {
     const [ items, setItems ] = useState<RoomObjectItem[]>(null);
@@ -22,6 +29,7 @@ const useFurniChooserWidgetState = () =>
         const wallItems = wallObjects.map(roomObject =>
         {
             if(roomObject.id < 0) return null;
+            if(isPetOrBot(roomObject.type)) return null;
 
             let name = roomObject.type;
 
@@ -37,12 +45,18 @@ const useFurniChooserWidgetState = () =>
                 if(furniData && furniData.name.length) name = furniData.name;
             }
 
-            return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name);
+            const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
-        });
+            const ownerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
+                (sessionDataManager.getUserData ? sessionDataManager.getUserData(ownerId)?.name : null) ||
+                `User_${ownerId}`;
+
+            return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName, 'furniture');
+        }).filter(item => item !== null);
 
         const floorItems = floorObjects.map(roomObject =>
         {
             if(roomObject.id < 0) return null;
+            if(isPetOrBot(roomObject.type)) return null;
 
             let name = roomObject.type;
 
@@ -51,8 +65,13 @@ const useFurniChooserWidgetState = () =>
 
             if(furniData && furniData.name.length) name = furniData.name;
 
-            return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name);
+            const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
-        });
+            const ownerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
+                (sessionDataManager.getUserData ? sessionDataManager.getUserData(ownerId)?.name : null) ||
+                `User_${ownerId}`;
+
+            return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName, 'furniture');
+        }).filter(item => item !== null);
 
         setItems([ ...wallItems, ...floorItems ].sort((a, b) => ((a.name < b.name) ? -1 : 1)));
     };
@@ -64,6 +83,7 @@ const useFurniChooserWidgetState = () =>
         const roomObject = GetRoomEngine().getRoomObject(GetRoomSession().roomId, event.id, event.category);
 
         if(!roomObject) return;
+        if(isPetOrBot(roomObject.type)) return;
 
         let item: RoomObjectItem = null;
 
@@ -84,8 +104,12 @@ const useFurniChooserWidgetState = () =>
                     if(furniData && furniData.name.length) name = furniData.name;
                 }
 
-                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name);
+                const wallOwnerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
+                const wallOwnerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
+                    (GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(wallOwnerId)?.name : null) ||
+                    `User_${wallOwnerId}`;
 
+                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, wallOwnerId, wallOwnerName, 'furniture');
                 break;
             }
             case RoomObjectCategory.FLOOR: {
@@ -96,11 +120,16 @@ const useFurniChooserWidgetState = () =>
 
                 if(furniData && furniData.name.length) name = furniData.name;
 
-                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name);
+                const floorOwnerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID) || 0;
+                const floorOwnerName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_OWNER_NAME) ||
+                    (GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(floorOwnerId)?.name : null) ||
+                    `User_${floorOwnerId}`;
+
+                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, floorOwnerId, floorOwnerName, 'furniture');
             }
         }
 
-        setItems(prevValue => [ ...prevValue, item ].sort((a, b) => ((a.name < b.name) ? -1 : 1)));
+        if(item) setItems(prevValue => [ ...prevValue, item ].sort((a, b) => ((a.name < b.name) ? -1 : 1)));
     });
 
     useFurniRemovedEvent(!!items, event =>

src/hooks/rooms/widgets/useUserChooserWidget.ts

@@ -4,6 +4,17 @@ import { GetRoomSession, RoomObjectItem } from '../../../api';
 import { useUserAddedEvent, useUserRemovedEvent } from '../engine';
 import { useRoom } from '../useRoom';
 
+const resolveUserType = (userType: number): string =>
+{
+    switch(userType)
+    {
+        case 1: return 'Habbo';
+        case 2: return 'Pet';
+        case 3: return 'Bot';
+        default: return '-';
+    }
+}
+
 const useUserChooserWidgetState = () =>
 {
     const [ items, setItems ] = useState<RoomObjectItem[]>(null);
@@ -26,9 +37,12 @@ const useUserChooserWidgetState = () =>
                 const userData = roomSession.userDataManager.getUserDataByIndex(roomObject.id);
 
                 if(!userData) return null;
+                if(userData.type !== 1) return null;
 
-                return new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name);
+                const type = resolveUserType(userData.type);
+                return new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name, 0, '-', type);
             })
+            .filter(Boolean)
             .sort((a, b) => ((a.name < b.name) ? -1 : 1)));
     };
 
@@ -39,12 +53,15 @@ const useUserChooserWidgetState = () =>
         const userData = GetRoomSession().userDataManager.getUserDataByIndex(event.id);
 
         if(!userData) return;
+        if(userData.type !== 1) return;
+
+        const type = resolveUserType(userData.type);
 
         setItems(prevValue =>
         {
             const newValue = [ ...prevValue ];
 
-            newValue.push(new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name));
+            newValue.push(new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name, 0, '-', type));
             newValue.sort((a, b) => ((a.name < b.name) ? -1 : 1));
 
             return newValue;