From c6512be476aaf8c519ff1d1c86e70d91db12c8a3 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 03:23:20 -0500
Subject: [PATCH] Update avatar info widget

---
 .../AvatarInfoRentableBotChatView.tsx         | 71 ++++++++++++++
 .../AvatarInfoUseProductConfirmView.tsx       | 76 ++++++++-------
 .../AvatarInfoUseProductView.tsx              | 20 ++--
 .../AvatarInfoWidgetAvatarView.tsx            | 86 +++++++++--------
 .../AvatarInfoWidgetDecorateView.tsx          | 25 ++---
 .../name => }/AvatarInfoWidgetNameView.tsx    | 16 ++--
 .../AvatarInfoWidgetOwnAvatarView.tsx         | 68 +++++++------
 .../AvatarInfoWidgetOwnPetView.tsx            | 81 +++++++++-------
 .../pet => }/AvatarInfoWidgetPetView.tsx      | 83 ++++++++--------
 .../AvatarInfoWidgetRentableBotView.tsx       | 95 ++++++++++---------
 .../avatar-info/AvatarInfoWidgetView.tsx      | 20 ++--
 .../AvatarInfoWidgetAvatarView.types.ts       |  7 --
 .../AvatarInfoWidgetDecorateView.types.ts     |  7 --
 .../name/AvatarInfoWidgetNameView.types.ts    |  7 --
 .../AvatarInfoWidgetOwnAvatarView.types.ts    |  8 --
 .../AvatarInfoWidgetOwnPetView.types.ts       |  7 --
 .../pet/AvatarInfoWidgetPetView.types.ts      |  7 --
 .../AvatarInfoRentableBotChatView.tsx         | 65 -------------
 .../AvatarInfoRentableBotChatView.types.ts    |  7 --
 .../AvatarInfoWidgetRentableBotView.types.ts  | 14 ---
 .../AvatarInfoUseProductConfirmView.types.ts  |  7 --
 .../AvatarInfoUseProductView.types.ts         |  8 --
 .../widgets/context-menu/ContextMenu.scss     |  5 +
 .../context-menu/ContextMenuHeaderView.tsx    | 18 ++++
 .../context-menu/ContextMenuListItemView.tsx  | 32 +++++++
 .../context-menu/ContextMenuListView.tsx      | 18 ++++
 .../widgets/context-menu/ContextMenuView.tsx  | 65 +++++++++----
 .../context-menu/ContextMenuView.types.ts     |  9 --
 .../views/header/ContextMenuHeaderView.tsx    | 13 ---
 .../header/ContextMenuHeaderView.types.ts     |  5 -
 .../list-item/ContextMenuListItemView.tsx     | 20 ----
 .../ContextMenuListItemView.types.ts          |  8 --
 .../views/list/ContextMenuListView.tsx        | 13 ---
 .../views/list/ContextMenuListView.types.ts   |  4 -
 34 files changed, 505 insertions(+), 490 deletions(-)
 create mode 100644 src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
 rename src/views/room/widgets/avatar-info/{views/use-product-confirm => }/AvatarInfoUseProductConfirmView.tsx (73%)
 rename src/views/room/widgets/avatar-info/{views/use-product => }/AvatarInfoUseProductView.tsx (89%)
 rename src/views/room/widgets/avatar-info/{views/avatar => }/AvatarInfoWidgetAvatarView.tsx (89%)
 rename src/views/room/widgets/avatar-info/{views/decorate => }/AvatarInfoWidgetDecorateView.tsx (53%)
 rename src/views/room/widgets/avatar-info/{views/name => }/AvatarInfoWidgetNameView.tsx (58%)
 rename src/views/room/widgets/avatar-info/{views/own-avatar => }/AvatarInfoWidgetOwnAvatarView.tsx (87%)
 rename src/views/room/widgets/avatar-info/{views/own-pet => }/AvatarInfoWidgetOwnPetView.tsx (87%)
 rename src/views/room/widgets/avatar-info/{views/pet => }/AvatarInfoWidgetPetView.tsx (82%)
 rename src/views/room/widgets/avatar-info/{views/rentable-bot => }/AvatarInfoWidgetRentableBotView.tsx (68%)
 delete mode 100644 src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
 delete mode 100644 src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts
 delete mode 100644 src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts
 create mode 100644 src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx
 create mode 100644 src/views/room/widgets/context-menu/ContextMenuListItemView.tsx
 create mode 100644 src/views/room/widgets/context-menu/ContextMenuListView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/ContextMenuView.types.ts
 delete mode 100644 src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts
 delete mode 100644 src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts
 delete mode 100644 src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
 delete mode 100644 src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts

diff --git a/src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
new file mode 100644
index 00000000..60a34d1e
--- /dev/null
+++ b/src/views/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
@@ -0,0 +1,71 @@
+import { BotSkillSaveComposer } from '@nitrots/nitro-renderer';
+import { FC, useMemo, useState } from 'react';
+import { GetRoomObjectBounds, GetRoomSession, LocalizeText, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../common';
+import { SendMessageHook } from '../../../../hooks';
+import { DraggableWindow, DraggableWindowPosition } from '../../../../layout';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { BotSkillsEnum } from './common/BotSkillsEnum';
+
+interface AvatarInfoRentableBotChatViewProps
+{
+    chatEvent: RoomWidgetUpdateRentableBotChatEvent;
+    close(): void;
+}
+
+export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
+{
+    const { chatEvent = null, close = null } = props;
+    // eslint-disable-next-line no-template-curly-in-string
+    const [ newText, setNewText ] = useState<string>(chatEvent.chat === '${bot.skill.chatter.configuration.text.placeholder}' ? '' : chatEvent.chat);
+    const [ automaticChat, setAutomaticChat ] = useState<boolean>(chatEvent.automaticChat);
+    const [ mixSentences, setMixSentences ] = useState<boolean>(chatEvent.mixSentences);
+    const [ chatDelay, setChatDelay ] = useState<number>(chatEvent.chatDelay);
+
+    const getObjectLocation = useMemo(() => GetRoomObjectBounds(GetRoomSession().roomId, chatEvent.objectId, chatEvent.category, 1), [ chatEvent ]);
+
+    const formatChatString = (value: string) => value.replace(/;#;/g, ' ').replace(/\r\n|\r|\n/g, '\r');
+
+    const save = () =>
+    {
+        const chatConfiguration = formatChatString(newText) + ';#;' + automaticChat + ';#;' + chatDelay + ';#;' + mixSentences;
+
+        SendMessageHook(new BotSkillSaveComposer(chatEvent.botId, BotSkillsEnum.SETUP_CHAT, chatConfiguration));
+
+        close();
+    }
+    
+    return (
+        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
+            <Base className="nitro-context-menu bot-chat">
+                <ContextMenuHeaderView className="drag-handler">
+                    { LocalizeText('bot.skill.chatter.configuration.title') }
+                </ContextMenuHeaderView>
+                <Column className="p-1">
+                    <Column gap={ 1 }>
+                        <Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text>
+                        <textarea className="form-control form-control-sm" placeholder={LocalizeText('bot.skill.chatter.configuration.text.placeholder')} value={newText} rows={7} onChange={e => setNewText(e.target.value)} />
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                            <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</Text>
+                            <input type="checkbox" className="form-check-input" checked={ automaticChat } onChange={ event => setAutomaticChat(event.target.checked) } />
+                        </Flex>
+                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                            <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.markov') }</Text>
+                            <input type="checkbox" className="form-check-input" checked={ mixSentences } onChange={ event => setMixSentences(event.target.checked) } />
+                        </Flex>
+                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                            <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.delay') }</Text>
+                            <input type="number" className="form-control form-control-sm" value={ chatDelay } onChange={ event => setChatDelay(event.target.valueAsNumber) }/>
+                        </Flex>
+                    </Column>
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Button fullWidth variant="primary" onClick={ close }>{ LocalizeText('cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ save }>{ LocalizeText('save') }</Button>
+                    </Flex>
+                </Column>
+            </Base>
+        </DraggableWindow>
+    );
+}
diff --git a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
similarity index 73%
rename from src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
index 3f06e3c9..1ecfa537 100644
--- a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
@@ -1,11 +1,17 @@
 import { IFurnitureData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomUserData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
-import { PetImageView } from '../../../../../shared/pet-image/PetImageView';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { AvatarInfoUseProductConfirmViewProps } from './AvatarInfoUseProductConfirmView.types';
+import { GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, RoomWidgetUseProductMessage, UseProductItem } from '../../../../api';
+import { Base, Button, Column, Flex, Text } from '../../../../common';
+import { FurniCategory } from '../../../../components/inventory/common/FurniCategory';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { PetImageView } from '../../../shared/pet-image/PetImageView';
+import { useRoomContext } from '../../context/RoomContext';
+
+interface AvatarInfoUseProductConfirmViewProps
+{
+    item: UseProductItem;
+    close: () => void;
+}
 
 const _Str_5091: number = -1;
 const _Str_11906: number = 0;
@@ -221,57 +227,57 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
     return (
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title', [ 'name' ], [ petData.name ]) } onCloseClick={ close } />
-            <NitroCardContentView>
-                <div className="row">
-                    <div className="w-unset">
-                        <div className="product-preview cursor-pointer" onClick={ selectRoomObject }>
+            <NitroCardContentView center>
+                <Flex gap={ 2 } overflow="hidden">
+                    <Column>
+                        <Base pointer className="product-preview" onClick={ selectRoomObject }>
                             { getPetImage }
-                        </div>
-                    </div>
-                    <div className="col d-flex flex-column justify-content-between">
-                        <div className="d-flex flex-column">
+                        </Base>
+                    </Column>
+                    <Column justifyContent="between" overflow="auto">
+                        <Column gap={ 2 }>
                             { (mode === _Str_11906) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.shampoo') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.shampoo') }</Text>
                                 </> }
                             { (mode === _Str_11214) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.custompart') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.custompart') }</Text>
                                 </> }
                             { (mode === _Str_11733) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.custompartshampoo') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.custompartshampoo') }</Text>
                                 </> }
                             { (mode === _Str_11369) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.saddle') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.saddle') }</Text>
                                 </> }
                             { (mode === _Str_8759) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.revive_monsterplant') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.revive_monsterplant') }</Text>
                                 </> }
                             { (mode === _Str_8432) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }</Text>
                                 </> }
                             { (mode === _Str_9653) && 
                                 <>
-                                    <div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
-                                    <div className="text-black">{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</div>
+                                    <Text>{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }</Text>
+                                    <Text>{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</Text>
                                 </> }
-                        </div>
-                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
-                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
-                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('useproduct.widget.use') }</button>
-                        </div>
-                    </div>
-                </div>
+                        </Column>
+                        <Flex alignItems="center" justifyContent="between">
+                            <Button variant="danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</Button>
+                            <Button variant="success" onClick={ useProduct }>{ LocalizeText('useproduct.widget.use') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     )
diff --git a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
similarity index 89%
rename from src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
index fe202c16..bbb5c9fb 100644
--- a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
@@ -1,12 +1,18 @@
 import { RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetFurnitureDataForRoomObject, LocalizeText } from '../../../../../../api';
-import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoUseProductViewProps } from './AvatarInfoUseProductView.types';
+import { GetFurnitureDataForRoomObject, LocalizeText, UseProductItem } from '../../../../api';
+import { FurniCategory } from '../../../../components/inventory/common/FurniCategory';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoUseProductViewProps
+{
+    item: UseProductItem;
+    updateConfirmingProduct: (product: UseProductItem) => void;
+    close: () => void;
+}
 
 const PRODUCT_PAGE_UKNOWN: number = 0;
 const PRODUCT_PAGE_SHAMPOO: number = 1;
diff --git a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx
similarity index 89%
rename from src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx
index b926a175..1bcd842e 100644
--- a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetAvatarView.tsx
@@ -1,11 +1,18 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomControllerLevel, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetOwnRoomObject, GetUserProfile, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetAvatarViewProps } from './AvatarInfoWidgetAvatarView.types';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetOwnRoomObject, GetUserProfile, LocalizeText, RoomWidgetMessage, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { BatchUpdates } from '../../../../hooks';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetAvatarViewProps
+{
+    userData: RoomWidgetUpdateInfostandUserEvent;
+    close: () => void;
+}
 
 const MODE_NORMAL = 0;
 const MODE_MODERATE = 1;
@@ -21,12 +28,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
     const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
-    {
-        setMode(MODE_NORMAL);
-        setRespectsLeft(userData.respectLeft);
-    }, [ userData ])
-
     const isShowGiveRights = useMemo(() =>
     {
         return (userData.amIOwner && (userData.targetRoomControllerLevel < RoomControllerLevel.GUEST) && !userData.isGuildRoom);
@@ -42,7 +43,23 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
         return (userData.canBeKicked || userData.canBeBanned || userData.canBeMuted || isShowGiveRights || isShowRemoveRights);
     }, [ isShowGiveRights, isShowRemoveRights, userData ]);
 
-    const processAction = useCallback((name: string) =>
+    const canGiveHandItem = useMemo(() =>
+    {
+        let flag = false;
+
+        const roomObject = GetOwnRoomObject();
+
+        if(roomObject)
+        {
+            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
+
+            if((carryId > 0) && (carryId < 999999)) flag = true;
+        }
+
+        return flag;
+    }, []);
+
+    const processAction = (name: string) =>
     {
         let messageType: string = null;
         let message: RoomWidgetMessage = null;
@@ -173,23 +190,16 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
         }
 
         if(hideMenu) close();
-    }, [ widgetHandler, userData, close ]);
+    }
 
-    const canGiveHandItem = useMemo(() =>
+    useEffect(() =>
     {
-        let flag = false;
-
-        const roomObject = GetOwnRoomObject();
-
-        if(roomObject)
+        BatchUpdates(() =>
         {
-            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
-
-            if((carryId > 0) && (carryId < 999999)) flag = true;
-        }
-
-        return flag;
-    }, []);
+            setMode(MODE_NORMAL);
+            setRespectsLeft(userData.respectLeft);
+        });
+    }, [ userData ]);
 
     return (
         <ContextMenuView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ userData.userType } close={ close }>
@@ -225,12 +235,12 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                     </ContextMenuListItemView>
                     { moderateMenuHasContent &&
                         <ContextMenuListItemView onClick={ event => processAction('moderate') }>
-                            <i className="fas fa-chevron-right right" />
+                            <FontAwesomeIcon icon="chevron-right" className="right" />
                             { LocalizeText('infostand.link.moderate') }
                         </ContextMenuListItemView> }
                     { userData.isAmbassador &&
                         <ContextMenuListItemView onClick={ event => processAction('ambassador') }>
-                            <i className="fas fa-chevron-right right" />
+                            <FontAwesomeIcon icon="chevron-right" className="right" />
                             { LocalizeText('infostand.link.ambassador') }
                         </ContextMenuListItemView> }
                     { canGiveHandItem && <ContextMenuListItemView onClick={ event => processAction('pass_hand_item') }>
@@ -243,11 +253,11 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.kick') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('mute') }>
-                        <i className="fas fa-chevron-right right" />
+                        <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.button.mute') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('ban') }>
-                        <i className="fas fa-chevron-right right" />
+                        <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.button.ban') }
                     </ContextMenuListItemView>
                     { isShowGiveRights &&
@@ -259,7 +269,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                             { LocalizeText('infostand.button.removerights') }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -275,7 +285,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.perm_ban') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_moderate') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -291,7 +301,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.mute_10min') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_moderate') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -304,11 +314,11 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.kick') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('ambassador_mute') }>
-                        <i className="fas fa-chevron-right right" />
                         { LocalizeText('infostand.button.mute') }
+                        <FontAwesomeIcon icon="chevron-right" className="right" />
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -327,7 +337,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.mute_18hour') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_ambassador') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetDecorateView.tsx
similarity index 53%
rename from src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetDecorateView.tsx
index 95b752b0..e05f32b8 100644
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetDecorateView.tsx
@@ -1,21 +1,24 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { LocalizeText, RoomWidgetUpdateDecorateModeEvent } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { ContextMenuListView } from '../../../context-menu/views/list/ContextMenuListView';
-import { AvatarInfoWidgetDecorateViewProps } from './AvatarInfoWidgetDecorateView.types';
+import { FC } from 'react';
+import { LocalizeText, RoomWidgetUpdateDecorateModeEvent } from '../../../../api';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuListView } from '../context-menu/ContextMenuListView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetDecorateViewProps
+{
+    userId: number;
+    userName: string;
+    roomIndex: number;
+}
 
 export const AvatarInfoWidgetDecorateView: FC<AvatarInfoWidgetDecorateViewProps> = props =>
 {
     const { userId = -1, userName = '', roomIndex = -1 } = props;
     const { eventDispatcher = null } = useRoomContext();
 
-    const stopDecorating = useCallback(() =>
-    {
-        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
-    }, [ eventDispatcher ]);
+    const stopDecorating = () => eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
     
     return (
         <ContextMenuView objectId={ roomIndex } category={ RoomObjectCategory.UNIT } close={ null }>
diff --git a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetNameView.tsx
similarity index 58%
rename from src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetNameView.tsx
index d30da446..85dcf506 100644
--- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetNameView.tsx
@@ -1,16 +1,18 @@
 import { FC, useMemo } from 'react';
-import { GetSessionDataManager } from '../../../../../../api';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { AvatarInfoWidgetNameViewProps } from './AvatarInfoWidgetNameView.types';
+import { GetSessionDataManager, RoomWidgetObjectNameEvent } from '../../../../api';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetNameViewProps
+{
+    nameData: RoomWidgetObjectNameEvent;
+    close: () => void;
+}
 
 export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props =>
 {
     const { nameData = null, close = null } = props;
 
-    const fades = useMemo(() =>
-    {
-        return (nameData.id !== GetSessionDataManager().userId);
-    }, [ nameData ]);
+    const fades = useMemo(() => (nameData.id !== GetSessionDataManager().userId), [ nameData ]);
 
     return (
         <ContextMenuView objectId={ nameData.roomIndex } category={ nameData.category } userType={ nameData.userType } fades={ fades } className="name-only" close= { close }>
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx
similarity index 87%
rename from src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx
index c83c58b5..5c40631f 100644
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnAvatarView.tsx
@@ -1,15 +1,23 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AvatarAction, AvatarExpressionEnum, RoomControllerLevel, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { AvatarEditorEvent } from '../../../../../../events';
-import { HelpNameChangeEvent } from '../../../../../../events/help/HelpNameChangeEvent';
-import { dispatchUiEvent } from '../../../../../../hooks';
-import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetOwnAvatarViewProps } from './AvatarInfoWidgetOwnAvatarView.types';
+import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { Flex } from '../../../../common';
+import { AvatarEditorEvent } from '../../../../events';
+import { HelpNameChangeEvent } from '../../../../events/help/HelpNameChangeEvent';
+import { dispatchUiEvent } from '../../../../hooks';
+import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetOwnAvatarViewProps
+{
+    userData: RoomWidgetUpdateInfostandUserEvent;
+    isDancing: boolean;
+    close: () => void;
+}
 
 const MODE_NORMAL = 0;
 const MODE_CLUB_DANCES = 1;
@@ -134,7 +142,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                     </ContextMenuListItemView>
                     { (HasHabboClub() && !isRidingHorse) &&
                         <ContextMenuListItemView onClick={ event => processAction('dance_menu') }>
-                            <i className="fas fa-chevron-right right" />
+                            <FontAwesomeIcon icon="chevron-right" className="right" />
                             { LocalizeText('widget.memenu.dance') }
                         </ContextMenuListItemView> }
                     { (!isDancing && !HasHabboClub() && !isRidingHorse) &&
@@ -146,11 +154,11 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                             { LocalizeText('widget.memenu.dance.stop') }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('expressions') }>
-                        <i className="fas fa-chevron-right right" />
+                    <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.link.expressions') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('signs') }>
-                        <i className="fas fa-chevron-right right" />
+                    <FontAwesomeIcon icon="chevron-right" className="right" />
                         { LocalizeText('infostand.show.signs') }
                     </ContextMenuListItemView>
                     { (userData.carryItem > 0) &&
@@ -177,7 +185,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         { LocalizeText('widget.memenu.dance4') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -196,12 +204,12 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                             { LocalizeText('widget.memenu.wave') }
                         </ContextMenuListItemView> }
                     { GetCanUseExpression() &&
-                        <ContextMenuListItemView canSelect={ HasHabboVip() } onClick={ event => processAction('laugh') }>
+                        <ContextMenuListItemView disabled={ !HasHabboVip() } onClick={ event => processAction('laugh') }>
                             <CurrencyIcon type="hc" />
                             { LocalizeText('widget.memenu.laugh') }
                         </ContextMenuListItemView> }
                     { GetCanUseExpression() &&
-                        <ContextMenuListItemView canSelect={ HasHabboVip() } onClick={ event => processAction('blow') }>
+                        <ContextMenuListItemView disabled={ !HasHabboVip() } onClick={ event => processAction('blow') }>
                             <CurrencyIcon type="hc" />
                             { LocalizeText('widget.memenu.blow') }
                         </ContextMenuListItemView> }
@@ -209,13 +217,13 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         { LocalizeText('widget.memenu.idle') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
             { (mode === MODE_SIGNS) &&
                 <>
-                    <div className="d-flex menu-list-split-3">
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_1') }>
                             1
                         </ContextMenuListItemView>
@@ -225,8 +233,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_3') }>
                             3
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_4') }>
                             4
                         </ContextMenuListItemView>
@@ -236,8 +244,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_6') }>
                             6
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_7') }>
                             7
                         </ContextMenuListItemView>
@@ -247,8 +255,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_9') }>
                             9
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_10') }>
                             10
                         </ContextMenuListItemView>
@@ -258,8 +266,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_15') }>
                             <i className="icon icon-sign-smile" />
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_12') }>
                             <i className="icon icon-sign-skull" />
                         </ContextMenuListItemView>
@@ -269,8 +277,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_17') }>
                             <i className="icon icon-sign-yellow" />
                         </ContextMenuListItemView>
-                    </div>
-                    <div className="d-flex menu-list-split-3">
+                    </Flex>
+                    <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_16') }>
                             <i className="icon icon-sign-red" />
                         </ContextMenuListItemView>
@@ -280,9 +288,9 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_11') }>
                             <i className="icon icon-sign-heart" />
                         </ContextMenuListItemView>
-                    </div>
+                    </Flex>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <i className="fas fa-chevron-left left" />
+                        <FontAwesomeIcon icon="chevron-left" className="left" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
diff --git a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx
similarity index 87%
rename from src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx
index 48b775eb..c7acce73 100644
--- a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetOwnPetView.tsx
@@ -1,11 +1,17 @@
 import { PetType, RoomObjectCategory, RoomObjectType, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetOwnRoomObject, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetOwnPetViewProps } from './AvatarInfoWidgetOwnPetView.types';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetOwnRoomObject, LocalizeText, RoomWidgetMessage, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { BatchUpdates } from '../../../../hooks';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetOwnPetViewProps
+{
+    petData: RoomWidgetUpdateInfostandPetEvent;
+    close: () => void;
+}
 
 const _Str_2906: number = 0;
 const _Str_5818: number = 1;
@@ -19,21 +25,23 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
     const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
+    const canGiveHandItem = useMemo(() =>
     {
-        setMode(prevValue =>
-            {
-                if(petData.petType === PetType.MONSTERPLANT) return _Str_10946;
-                else if(petData.saddle && !petData.rider) return _Str_5818;
-                else if(petData.rider) return _Str_5938;
+        let flag = false;
 
-                return _Str_2906;
-            });
+        const roomObject = GetOwnRoomObject();
 
-        setRespectsLeft(petData.respectsPetLeft);
-    }, [ petData ])
+        if(roomObject)
+        {
+            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
 
-    const processAction = useCallback((name: string) =>
+            if((carryId > 0) && (carryId < 999999)) flag = true;
+        }
+
+        return flag;
+    }, []);
+
+    const processAction = (name: string) =>
     {
         let messageType: string = null;
         let message: RoomWidgetMessage = null;
@@ -118,23 +126,24 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
         }
 
         if(hideMenu) close();
-    }, [ widgetHandler, petData, mode, close ]);
+    }
 
-    const canGiveHandItem = useMemo(() =>
+    useEffect(() =>
     {
-        let flag = false;
-
-        const roomObject = GetOwnRoomObject();
-
-        if(roomObject)
+        BatchUpdates(() =>
         {
-            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
-
-            if((carryId > 0) && (carryId < 999999)) flag = true;
-        }
-
-        return flag;
-    }, []);
+            setMode(prevValue =>
+                {
+                    if(petData.petType === PetType.MONSTERPLANT) return _Str_10946;
+                    else if(petData.saddle && !petData.rider) return _Str_5818;
+                    else if(petData.rider) return _Str_5938;
+    
+                    return _Str_2906;
+                });
+    
+            setRespectsLeft(petData.respectsPetLeft);
+        });
+    }, [ petData ]);
 
     return (
         <ContextMenuView objectId={ petData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } close={ close }>
@@ -167,8 +176,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                     <ContextMenuListItemView onClick={ event => processAction('mount') }>
                         { LocalizeText('infostand.button.mount') }
                     </ContextMenuListItemView>
-                    <ContextMenuListItemView onClick={ event => processAction('toggle_riding_permission') }>
-                        <input type="checkbox" className="me-1" checked={ !!petData.publiclyRideable } readOnly={ true }  />
+                    <ContextMenuListItemView onClick={ event => processAction('toggle_riding_permission') } gap={ 1 }>
+                        <input type="checkbox" checked={ !!petData.publiclyRideable } readOnly={ true }  />
                         { LocalizeText('infostand.button.toggle_riding_permission') }
                     </ContextMenuListItemView>
                     { (respectsLeft > 0) &&
@@ -214,8 +223,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                         </ContextMenuListItemView> }
                     { !petData.dead && (petData.level === petData.maximumLevel) && petData.breedable &&
                         <>
-                            <ContextMenuListItemView onClick={ event => processAction('toggle_breeding_permission') }>
-                                <input type="checkbox" className="me-1" checked={ petData.publiclyBreedable } readOnly={ true }  />
+                            <ContextMenuListItemView onClick={ event => processAction('toggle_breeding_permission') } gap={ 1 }>
+                                <input type="checkbox" checked={ petData.publiclyBreedable } readOnly={ true }  />
                                 { LocalizeText('infostand.button.toggle_breeding_permission') }
                             </ContextMenuListItemView>
                             <ContextMenuListItemView onClick={ event => processAction('breed') }>
diff --git a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx
similarity index 82%
rename from src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx
index fdcd9ff1..1ba9f5c2 100644
--- a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetPetView.tsx
@@ -1,11 +1,17 @@
 import { PetType, RoomControllerLevel, RoomObjectCategory, RoomObjectType, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetOwnRoomObject, GetSessionDataManager, LocalizeText, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { AvatarInfoWidgetPetViewProps } from './AvatarInfoWidgetPetView.types';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetOwnRoomObject, GetSessionDataManager, LocalizeText, RoomWidgetMessage, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUserActionMessage } from '../../../../api';
+import { BatchUpdates } from '../../../../hooks';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+
+interface AvatarInfoWidgetPetViewProps
+{
+    petData: RoomWidgetUpdateInfostandPetEvent;
+    close: () => void;
+}
 
 const _Str_2906: number = 0;
 const _Str_5818: number = 1;
@@ -19,21 +25,28 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
     const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { roomSession = null, widgetHandler = null } = useRoomContext();
 
-    useEffect(() =>
+    const canPickUp = useMemo(() =>
     {
-        setMode(prevValue =>
-            {
-                if(petData.petType === PetType.MONSTERPLANT) return _Str_13388;
-                else if(petData.saddle && !petData.rider) return _Str_5818;
-                else if(petData.rider) return _Str_5938;
+        return (roomSession.isRoomOwner || (roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator);
+    }, [ roomSession ]);
 
-                return _Str_2906;
-            });
+    const canGiveHandItem = useMemo(() =>
+    {
+        let flag = false;
 
-        setRespectsLeft(petData.respectsPetLeft);
-    }, [ petData ])
+        const roomObject = GetOwnRoomObject();
 
-    const processAction = useCallback((name: string) =>
+        if(roomObject)
+        {
+            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
+
+            if((carryId > 0) && (carryId < 999999)) flag = true;
+        }
+
+        return flag;
+    }, []);
+
+    const processAction = (name: string) =>
     {
         let messageType: string = null;
         let message: RoomWidgetMessage = null;
@@ -80,28 +93,24 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
         }
 
         if(hideMenu) close();
-    }, [ widgetHandler, petData, close ]);
+    }
 
-    const canPickUp = useMemo(() =>
+    useEffect(() =>
     {
-        return (roomSession.isRoomOwner || (roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator);
-    }, [ roomSession ]);
-
-    const canGiveHandItem = useMemo(() =>
-    {
-        let flag = false;
-
-        const roomObject = GetOwnRoomObject();
-
-        if(roomObject)
+        BatchUpdates(() =>
         {
-            const carryId = roomObject.model.getValue<number>(RoomObjectVariable.FIGURE_CARRY_OBJECT);
-
-            if((carryId > 0) && (carryId < 999999)) flag = true;
-        }
-
-        return flag;
-    }, []);
+            setMode(prevValue =>
+                {
+                    if(petData.petType === PetType.MONSTERPLANT) return _Str_13388;
+                    else if(petData.saddle && !petData.rider) return _Str_5818;
+                    else if(petData.rider) return _Str_5938;
+    
+                    return _Str_2906;
+                });
+    
+            setRespectsLeft(petData.respectsPetLeft);
+        });
+    }, [ petData ]);
 
     return (
         <ContextMenuView objectId={ petData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } close={ close }>
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx
similarity index 68%
rename from src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
rename to src/views/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx
index ecbe9c1a..345257e3 100644
--- a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetRentableBotView.tsx
@@ -1,13 +1,19 @@
 import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, RequestBotCommandConfigurationComposer, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetNitroInstance, LocalizeText, RoomWidgetUpdateRentableBotChatEvent } from '../../../../../../api';
-import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages';
-import { useRoomContext } from '../../../../context/RoomContext';
-import { ContextMenuView } from '../../../context-menu/ContextMenuView';
-import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView';
-import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
-import { BotSkillsEnum } from '../../common/BotSkillsEnum';
-import { AvatarInfoWidgetRentableBotViewProps } from './AvatarInfoWidgetRentableBotView.types';
+import { GetNitroInstance, LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
+import { Button, Column, Flex, Text } from '../../../../common';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { useRoomContext } from '../../context/RoomContext';
+import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../context-menu/ContextMenuView';
+import { BotSkillsEnum } from './common/BotSkillsEnum';
+
+interface AvatarInfoWidgetRentableBotViewProps
+{
+    rentableBotData: RoomWidgetUpdateInfostandRentableBotEvent;
+    close: () => void;
+}
 
 const MODE_NORMAL = 0;
 const MODE_CHANGE_NAME = 1;
@@ -21,17 +27,10 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
     const [ newMotto, setNewMotto ] = useState('');
     const { eventDispatcher = null } = useRoomContext();
 
-    useEffect(() =>
-    {
-        setMode(MODE_NORMAL);
-    }, [ rentableBotData ]);
-
     const onBotCommandConfigurationEvent = useCallback((event: BotCommandConfigurationEvent) =>
     {
         const parser = event.getParser();
 
-        if(!parser) return;
-
         if(parser.botId !== rentableBotData.webID) return;
 
         switch(parser.commandId)
@@ -69,12 +68,9 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
 
     CreateMessageHook(BotCommandConfigurationEvent, onBotCommandConfigurationEvent);
 
-    const requestBotCommandConfiguration = useCallback((skillType: number) =>
-    {
-        SendMessageHook(new RequestBotCommandConfigurationComposer(rentableBotData.webID, skillType));
-    }, [ rentableBotData ]);
+    const requestBotCommandConfiguration = (skillType: number) => SendMessageHook(new RequestBotCommandConfigurationComposer(rentableBotData.webID, skillType));
 
-    const processAction = useCallback((name: string) =>
+    const processAction = (name: string) =>
     {
         let hideMenu = true;
 
@@ -130,7 +126,12 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
         }
 
         if(hideMenu) close();
-    }, [ rentableBotData, newName, newMotto, requestBotCommandConfiguration, close ]);
+    }
+
+    useEffect(() =>
+    {
+        setMode(MODE_NORMAL);
+    }, [ rentableBotData ]);
 
     const canControl = (rentableBotData.amIOwner || rentableBotData.amIAnyRoomController);
 
@@ -139,63 +140,63 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
             <ContextMenuHeaderView>
                 { rentableBotData.name }
             </ContextMenuHeaderView>
-            { (mode === MODE_NORMAL) &&
+            { (mode === MODE_NORMAL) && canControl &&
                 <>
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_ALL) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_ALL) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('donate_to_all') }>
                             { LocalizeText('avatar.widget.donate_to_all') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_USER) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DONATE_TO_USER) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('donate_to_user') }>
                             { LocalizeText('avatar.widget.donate_to_user') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_NAME) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_NAME) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('change_bot_name') }>
                             { LocalizeText('avatar.widget.change_bot_name') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_MOTTO) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.CHANGE_BOT_MOTTO) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('change_bot_motto') }>
                             { LocalizeText('avatar.widget.change_bot_motto') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DRESS_UP) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DRESS_UP) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('dress_up') }>
                             { LocalizeText('avatar.widget.dress_up') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.RANDOM_WALK) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.RANDOM_WALK) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('random_walk') }>
                             { LocalizeText('avatar.widget.random_walk') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.SETUP_CHAT) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.SETUP_CHAT) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('setup_chat') }>
                             { LocalizeText('avatar.widget.setup_chat') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.DANCE) >= 0) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.DANCE) >= 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('dance') }>
                             { LocalizeText('avatar.widget.dance') }
                         </ContextMenuListItemView> }
-                    { ((rentableBotData.botSkills.indexOf(BotSkillsEnum.NO_PICK_UP) === -1) && canControl) &&
+                    { (rentableBotData.botSkills.indexOf(BotSkillsEnum.NO_PICK_UP) === -1) &&
                         <ContextMenuListItemView onClick={ event => processAction('pick') }>
                             { LocalizeText('avatar.widget.pick_up') }
                         </ContextMenuListItemView> }
                 </> }
             { (mode === MODE_CHANGE_NAME) &&
-                <div className="d-flex flex-column menu-item" onClick={ null }>
-                    <p className="mb-1">{ LocalizeText('bot.skill.name.configuration.new.name') }</p>
-                    <input type="text" className="form-control form-control-sm mb-2" value={ newName } onChange={ event => setNewName(event.target.value) } />
-                    <div className="d-flex justify-content-between align-items-center">
-                        <button type="button" className="btn btn-secondary btn-sm" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</button>
-                        <button type="button" className="btn btn-success btn-sm"  onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</button>
-                    </div>
-                </div> }
+                <Column className="menu-item" onClick={ null } gap={ 1 }>
+                    <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.name') }</Text>
+                    <input type="text" className="form-control form-control-sm" value={ newName } onChange={ event => setNewName(event.target.value) } />
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</Button>
+                    </Flex>
+                </Column> }
             { (mode === MODE_CHANGE_MOTTO) &&
-                <div className="d-flex flex-column menu-item" onClick={ null }>
-                    <p className="mb-1">{ LocalizeText('bot.skill.name.configuration.new.motto') }</p>
-                    <input type="text" className="form-control form-control-sm mb-2" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
-                    <div className="d-flex justify-content-between align-items-center">
-                        <button type="button" className="btn btn-secondary btn-sm" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</button>
-                        <button type="button" className="btn btn-success btn-sm"  onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</button>
-                    </div>
-                </div> }
+                <Column className="menu-item" onClick={ null } gap={ 1 }>
+                    <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.motto') }</Text>
+                    <input type="text" className="form-control form-control-sm" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
+                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                        <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</Button>
+                    </Flex>
+                </Column> }
         </ContextMenuView>
     );
 }
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index 5ac5f7a0..6788475a 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -3,16 +3,16 @@ import { FC, useCallback, useMemo, useState } from 'react';
 import { GetRoomSession, GetSessionDataManager, RoomWidgetObjectNameEvent, RoomWidgetRoomObjectMessage, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUpdateRoomEngineEvent, RoomWidgetUpdateRoomObjectEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
-import { AvatarInfoWidgetAvatarView } from './views/avatar/AvatarInfoWidgetAvatarView';
-import { AvatarInfoWidgetDecorateView } from './views/decorate/AvatarInfoWidgetDecorateView';
-import { AvatarInfoWidgetNameView } from './views/name/AvatarInfoWidgetNameView';
-import { AvatarInfoWidgetOwnAvatarView } from './views/own-avatar/AvatarInfoWidgetOwnAvatarView';
-import { AvatarInfoWidgetOwnPetView } from './views/own-pet/AvatarInfoWidgetOwnPetView';
-import { AvatarInfoWidgetPetView } from './views/pet/AvatarInfoWidgetPetView';
-import { AvatarInfoRentableBotChatView } from './views/rentable-bot-chat/AvatarInfoRentableBotChatView';
-import { AvatarInfoWidgetRentableBotView } from './views/rentable-bot/AvatarInfoWidgetRentableBotView';
-import { AvatarInfoUseProductConfirmView } from './views/use-product-confirm/AvatarInfoUseProductConfirmView';
-import { AvatarInfoUseProductView } from './views/use-product/AvatarInfoUseProductView';
+import { AvatarInfoRentableBotChatView } from './AvatarInfoRentableBotChatView';
+import { AvatarInfoUseProductConfirmView } from './AvatarInfoUseProductConfirmView';
+import { AvatarInfoUseProductView } from './AvatarInfoUseProductView';
+import { AvatarInfoWidgetAvatarView } from './AvatarInfoWidgetAvatarView';
+import { AvatarInfoWidgetDecorateView } from './AvatarInfoWidgetDecorateView';
+import { AvatarInfoWidgetNameView } from './AvatarInfoWidgetNameView';
+import { AvatarInfoWidgetOwnAvatarView } from './AvatarInfoWidgetOwnAvatarView';
+import { AvatarInfoWidgetOwnPetView } from './AvatarInfoWidgetOwnPetView';
+import { AvatarInfoWidgetPetView } from './AvatarInfoWidgetPetView';
+import { AvatarInfoWidgetRentableBotView } from './AvatarInfoWidgetRentableBotView';
 
 export const AvatarInfoWidgetView: FC<{}> = props =>
 {
diff --git a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts b/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts
deleted file mode 100644
index 4533b9fb..00000000
--- a/src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetAvatarViewProps
-{
-    userData: RoomWidgetUpdateInfostandUserEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
deleted file mode 100644
index 86c19e35..00000000
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-
-export interface AvatarInfoWidgetDecorateViewProps
-{
-    userId: number;
-    userName: string;
-    roomIndex: number;
-}
diff --git a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts
deleted file mode 100644
index f99c0426..00000000
--- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetObjectNameEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetNameViewProps
-{
-    nameData: RoomWidgetObjectNameEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
deleted file mode 100644
index 00db768e..00000000
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetOwnAvatarViewProps
-{
-    userData: RoomWidgetUpdateInfostandUserEvent;
-    isDancing: boolean;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts b/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts
deleted file mode 100644
index 90badc4c..00000000
--- a/src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandPetEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetOwnPetViewProps
-{
-    petData: RoomWidgetUpdateInfostandPetEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts b/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts
deleted file mode 100644
index cfe73cb3..00000000
--- a/src/views/room/widgets/avatar-info/views/pet/AvatarInfoWidgetPetView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateInfostandPetEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetPetViewProps
-{
-    petData: RoomWidgetUpdateInfostandPetEvent;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
deleted file mode 100644
index e4d54eaa..00000000
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { BotSkillSaveComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { GetRoomObjectBounds, GetRoomSession, LocalizeText } from '../../../../../../api';
-import { SendMessageHook } from '../../../../../../hooks';
-import { DraggableWindow, DraggableWindowPosition } from '../../../../../../layout';
-import { BotSkillsEnum } from '../../common/BotSkillsEnum';
-import { AvatarInfoRentableBotChatViewProps } from './AvatarInfoRentableBotChatView.types';
-
-export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
-{
-    const { chatEvent = null, close = null } = props;
-    // eslint-disable-next-line no-template-curly-in-string
-    const [ newText, setNewText ] = useState<string>(chatEvent.chat === '${bot.skill.chatter.configuration.text.placeholder}' ? '' : chatEvent.chat);
-    const [ automaticChat, setAutomaticChat ] = useState<boolean>(chatEvent.automaticChat);
-    const [ mixSentences, setMixSentences ] = useState<boolean>(chatEvent.mixSentences);
-    const [ chatDelay, setChatDelay ] = useState<number>(chatEvent.chatDelay);
-
-    const getObjectLocation = useMemo(() =>
-    {
-        return GetRoomObjectBounds(GetRoomSession().roomId, chatEvent.objectId, chatEvent.category, 1);
-    }, [ chatEvent ]);
-
-    const formatChatString = useCallback((value: string) =>
-    {
-        return value.replace(/;#;/g, ' ').replace(/\r\n|\r|\n/g, '\r');
-    }, []);
-
-    const save = useCallback(() =>
-    {
-        const chatConfiguration = formatChatString(newText) + ';#;' + automaticChat + ';#;' + chatDelay + ';#;' + mixSentences;
-        SendMessageHook(new BotSkillSaveComposer(chatEvent.botId, BotSkillsEnum.SETUP_CHAT, chatConfiguration));
-        close();
-    }, [automaticChat, chatDelay, chatEvent.botId, close, formatChatString, mixSentences, newText]);
-
-    return (
-        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
-            <div className="nitro-context-menu">
-                <div className="drag-handler">
-                <div className="px-2">
-                    <div className="d-flex flex-column menu-item">
-                        <p className="mb-1">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</p>
-                        <textarea className="form-control form-control-sm mb-2" placeholder={LocalizeText('bot.skill.chatter.configuration.text.placeholder')} value={newText} rows={7} onChange={e => setNewText(e.target.value)}/>
-                    </div>
-                    <div className="d-flex flex-row menu-item">
-                        <p className="mb-1 me-2">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</p>
-                        <input type="checkbox" className="form-check-input" checked={automaticChat} onChange={e => setAutomaticChat(e.target.checked)} />
-                    </div>
-                    <div className="d-flex flex-row menu-item">
-                        <p className="mb-1 me-2">{ LocalizeText('bot.skill.chatter.configuration.markov')}</p>
-                        <input type="checkbox" className="form-check-input" checked={mixSentences} onChange={ e => setMixSentences(e.target.checked)} />
-                    </div>
-                    <div className="d-flex flex-row menu-item">
-                        <p className="mb-1 me-2">{ LocalizeText('bot.skill.chatter.configuration.chat.delay') }</p>
-                        <input type="number" className="form-control form-control-sm mb-2" value={chatDelay} onChange={e => setChatDelay(e.target.valueAsNumber)}/>
-                    </div>
-                    <div className="d-flex flex-row justify-content-between mt-1">
-                        <button type="button" className="btn btn-secondary btn-sm" onClick={close}>{ LocalizeText('cancel')}</button>
-                        <button type="button" className="btn btn-success btn-sm" onClick={save}>{ LocalizeText('save') }</button>
-                    </div>
-                </div>
-                </div>
-            </div>
-        </DraggableWindow>
-    );
-}
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
deleted file mode 100644
index ce82b743..00000000
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RoomWidgetUpdateRentableBotChatEvent } from '../../../../../../api';
-
-export interface AvatarInfoRentableBotChatViewProps
-{
-    chatEvent: RoomWidgetUpdateRentableBotChatEvent;
-    close(): void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts b/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts
deleted file mode 100644
index cedb2d4a..00000000
--- a/src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { RoomWidgetUpdateInfostandRentableBotEvent } from '../../../../../../api';
-
-export interface AvatarInfoWidgetRentableBotViewProps
-{
-    rentableBotData: RoomWidgetUpdateInfostandRentableBotEvent;
-    close: () => void;
-}
-
-export interface BotChatOptions
-{
-    automaticChat: boolean;
-    chatDelay: number;
-    mixSentences: boolean;
-}
diff --git a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts b/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts
deleted file mode 100644
index 9cae4f3f..00000000
--- a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { UseProductItem } from '../../../../../../api';
-
-export interface AvatarInfoUseProductConfirmViewProps
-{
-    item: UseProductItem;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts b/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts
deleted file mode 100644
index b242e789..00000000
--- a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { UseProductItem } from '../../../../../../api';
-
-export interface AvatarInfoUseProductViewProps
-{
-    item: UseProductItem;
-    updateConfirmingProduct: (product: UseProductItem) => void;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/context-menu/ContextMenu.scss b/src/views/room/widgets/context-menu/ContextMenu.scss
index a78566cf..cb7351d7 100644
--- a/src/views/room/widgets/context-menu/ContextMenu.scss
+++ b/src/views/room/widgets/context-menu/ContextMenu.scss
@@ -9,6 +9,11 @@
     z-index: $context-menu-zindex;
     pointer-events: all;
 
+    &.bot-chat {
+        max-width: 250px;
+        width: 250px;
+    }
+
     &.name-only {
         background-color: rgba($black, 0.5);
         padding: 1px 8px;
diff --git a/src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx b/src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx
new file mode 100644
index 00000000..db1f5448
--- /dev/null
+++ b/src/views/room/widgets/context-menu/ContextMenuHeaderView.tsx
@@ -0,0 +1,18 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../../../../common';
+
+export const ContextMenuHeaderView: FC<FlexProps> = props =>
+{
+    const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'menu-header', 'p-1' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return <Flex justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } { ...rest } />;
+}
diff --git a/src/views/room/widgets/context-menu/ContextMenuListItemView.tsx b/src/views/room/widgets/context-menu/ContextMenuListItemView.tsx
new file mode 100644
index 00000000..01d3df80
--- /dev/null
+++ b/src/views/room/widgets/context-menu/ContextMenuListItemView.tsx
@@ -0,0 +1,32 @@
+import { FC, MouseEvent, useMemo } from 'react';
+import { Flex, FlexProps } from '../../../../common';
+
+interface ContextMenuListItemViewProps extends FlexProps
+{
+    disabled?: boolean;
+}
+
+export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
+{
+    const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props;
+
+    const handleClick = (event: MouseEvent<HTMLDivElement>) =>
+    {
+        if(disabled) return;
+
+        if(onClick) onClick(event);
+    }
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'menu-item', 'list-item' ];
+
+        if(disabled) newClassNames.push('disabled');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ disabled, classNames ]);
+
+    return <Flex fullWidth={ fullWidth } justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } onClick={ handleClick } { ...rest } />;
+}
diff --git a/src/views/room/widgets/context-menu/ContextMenuListView.tsx b/src/views/room/widgets/context-menu/ContextMenuListView.tsx
new file mode 100644
index 00000000..6c38cf11
--- /dev/null
+++ b/src/views/room/widgets/context-menu/ContextMenuListView.tsx
@@ -0,0 +1,18 @@
+import { FC, useMemo } from 'react';
+import { Column, ColumnProps } from '../../../../common';
+
+export const ContextMenuListView: FC<ColumnProps> = props =>
+{
+    const { classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'menu-list' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return <Column classNames={ getClassNames } { ...rest } />
+}
diff --git a/src/views/room/widgets/context-menu/ContextMenuView.tsx b/src/views/room/widgets/context-menu/ContextMenuView.tsx
index 81a28b5a..7a10c8ee 100644
--- a/src/views/room/widgets/context-menu/ContextMenuView.tsx
+++ b/src/views/room/widgets/context-menu/ContextMenuView.tsx
@@ -1,7 +1,17 @@
 import { FixedSizeStack, NitroPoint, NitroRectangle, RoomObjectType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { GetNitroInstance, GetRoomEngine, GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
-import { ContextMenuViewProps } from './ContextMenuView.types';
+import { Base, BaseProps } from '../../../../common';
+import { BatchUpdates } from '../../../../hooks';
+
+interface ContextMenuViewProps extends BaseProps<HTMLDivElement>
+{
+    objectId: number;
+    category: number;
+    userType?: number;
+    fades?: boolean;
+    close: () => void;
+}
 
 const LOCATION_STACK_SIZE: number = 25;
 const BUBBLE_DROP_SPEED: number = 3;
@@ -11,7 +21,7 @@ const SPACE_AROUND_EDGES = 10;
 
 export const ContextMenuView: FC<ContextMenuViewProps> = props =>
 {
-    const { objectId = -1, category = -1, userType = -1, fades = false, className = '', close = null, children = null } = props;
+    const { objectId = -1, category = -1, userType = -1, fades = false, close = null, position = 'absolute', classNames = [], style = {}, ...rest } = props;
     const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: null, y: null });
     const [ deltaYStack, setDeltaYStack ] = useState<FixedSizeStack>(null);
     const [ currentDeltaY, setCurrentDeltaY ] = useState(-1000000);
@@ -92,8 +102,11 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         if(y < SPACE_AROUND_EDGES) y = SPACE_AROUND_EDGES;
         else if(y > maxTop) y = maxTop;
 
-        setCurrentDeltaY(maxStack);
-        setPos({ x, y });
+        BatchUpdates(() =>
+        {
+            setCurrentDeltaY(maxStack);
+            setPos({ x, y });
+        });
     }, [ deltaYStack, currentDeltaY, getOffset ]);
 
     const update = useCallback((time: number) =>
@@ -106,10 +119,37 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         updatePosition(bounds, location);
     }, [ objectId, category, updateFade, updatePosition ]);
 
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-context-menu' ];
+
+        newClassNames.push((pos.x !== null) ? 'visible' : 'invisible');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ pos, classNames ]);
+
+    const getStyle = useMemo(() =>
+    {
+        let newStyle: CSSProperties = {};
+
+        newStyle.left = (pos.x || 0);
+        newStyle.top = (pos.y || 0);
+        newStyle.opacity = opacity;
+
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+        return newStyle;
+    }, [ pos, opacity, style ]);
+
     useEffect(() =>
     {
-        setDeltaYStack(new FixedSizeStack(LOCATION_STACK_SIZE));
-        setCurrentDeltaY(-1000000);
+        BatchUpdates(() =>
+        {
+            setDeltaYStack(new FixedSizeStack(LOCATION_STACK_SIZE));
+            setCurrentDeltaY(-1000000);
+        });
     }, []);
 
     useEffect(() =>
@@ -135,15 +175,8 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
 
         const timeout = setTimeout(() => setIsFading(true), fadeDelay);
 
-        return () =>
-        {
-            clearTimeout(timeout);
-        }
+        return () => clearTimeout(timeout);
     }, [ fades ]);
 
-    return (
-        <div ref={ elementRef } className={ `position-absolute nitro-context-menu ${ className }${ (pos.x !== null ? ' visible' : ' invisible') }` } style={ { left: (pos.x || 0), top: (pos.y || 0), opacity: opacity } }>
-            { children }
-        </div>
-    );
+    return <Base innerRef={ elementRef } position={ position } classNames={ getClassNames } style={ getStyle } { ...rest } />;
 }
diff --git a/src/views/room/widgets/context-menu/ContextMenuView.types.ts b/src/views/room/widgets/context-menu/ContextMenuView.types.ts
deleted file mode 100644
index c1527ad9..00000000
--- a/src/views/room/widgets/context-menu/ContextMenuView.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface ContextMenuViewProps
-{
-    objectId: number;
-    category: number;
-    userType?: number;
-    fades?: boolean;
-    className?: string;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx b/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
deleted file mode 100644
index 2a1adf1f..00000000
--- a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { ContextMenuHeaderViewProps } from './ContextMenuHeaderView.types';
-
-export const ContextMenuHeaderView: FC<ContextMenuHeaderViewProps> = props =>
-{
-    const { className = null, onClick = null, children = null } = props;
-
-    return (
-        <div className={ 'd-flex justify-content-center align-items-center menu-header p-1' + (className ? ' ' + className : '') } onClick={ onClick }>
-            { children }
-        </div>
-    );
-}
diff --git a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts b/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts
deleted file mode 100644
index 11d98094..00000000
--- a/src/views/room/widgets/context-menu/views/header/ContextMenuHeaderView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ContextMenuHeaderViewProps
-{
-    className?: string;
-    onClick?: (e) => void;
-}
diff --git a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx b/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
deleted file mode 100644
index 29cc7658..00000000
--- a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FC, MouseEvent, useCallback } from 'react';
-import { ContextMenuListItemViewProps } from './ContextMenuListItemView.types';
-
-export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
-{
-    const { className = '', canSelect = true, onClick = null, children = null } = props;
-
-    const handleClick = useCallback((event: MouseEvent<HTMLDivElement>) =>
-    {
-        if(!canSelect) return;
-
-        onClick(event);
-    }, [ canSelect, onClick ]);
-
-    return (
-        <div className={ `d-flex justify-content-center align-items-center w-100 menu-item list-item ${ !canSelect ? 'disabled ' : '' }${ className }` } onClick={ handleClick }>
-            { children }
-        </div>
-    )
-}
diff --git a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts b/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts
deleted file mode 100644
index 32b49235..00000000
--- a/src/views/room/widgets/context-menu/views/list-item/ContextMenuListItemView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { MouseEvent } from 'react';
-
-export interface ContextMenuListItemViewProps
-{
-    className?: string;
-    canSelect?: boolean;
-    onClick: (event: MouseEvent) => void;
-}
diff --git a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx b/src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
deleted file mode 100644
index c4e8f42d..00000000
--- a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { ContextMenuListViewProps } from './ContextMenuListView.types';
-
-export const ContextMenuListView: FC<ContextMenuListViewProps> = props =>
-{
-    const { columns = 1, children = null } = props;
-
-    return (
-        <div className={ 'd-flex flex-column menu-list' }>
-            { children }
-        </div>
-    );
-}
diff --git a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts b/src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts
deleted file mode 100644
index 6a62d64b..00000000
--- a/src/views/room/widgets/context-menu/views/list/ContextMenuListView.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface ContextMenuListViewProps
-{
-    columns?: number;
-}