From d54ea63f8b362860b8bb540114b923e3f8d36d31 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 25 Feb 2022 15:28:36 -0500
Subject: [PATCH] Update chat widget

---
 src/assets/styles/utils.scss                  |  17 +
 .../{message => }/ChatWidgetMessageView.tsx   |  25 +-
 .../room/widgets/chat/ChatWidgetView.scss     | 905 ++++++++++++++++-
 .../room/widgets/chat/ChatWidgetView.tsx      |  17 +-
 .../{utils => common}/ChatBubbleMessage.ts    |   0
 .../chat/message/ChatWidgetMessageView.scss   | 921 ------------------
 .../message/ChatWidgetMessageView.types.ts    |   8 -
 .../widgets/chat/utils/ChatWidgetUtilities.ts |  32 -
 8 files changed, 936 insertions(+), 989 deletions(-)
 rename src/views/room/widgets/chat/{message => }/ChatWidgetMessageView.tsx (78%)
 rename src/views/room/widgets/chat/{utils => common}/ChatBubbleMessage.ts (100%)
 delete mode 100644 src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
 delete mode 100644 src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
 delete mode 100644 src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts

diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
index 029f054e..8db17555 100644
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@@ -97,3 +97,20 @@ ul {
         background-color: $table-striped-bg;
     }
 }
+
+@keyframes bounceIn {
+    0% {
+       opacity: 0;
+       transform: scale(.3);
+    }
+    50% {
+       opacity: 1;
+       transform: scale(1.1);
+    }
+    70% {
+       transform: scale(.9);
+    }
+    100% {
+       transform: scale(1);
+    }
+}
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx b/src/views/room/widgets/chat/ChatWidgetMessageView.tsx
similarity index 78%
rename from src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
rename to src/views/room/widgets/chat/ChatWidgetMessageView.tsx
index 6ea5eea4..190d7629 100644
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.tsx
+++ b/src/views/room/widgets/chat/ChatWidgetMessageView.tsx
@@ -1,20 +1,20 @@
-import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { useRoomContext } from '../../../context/RoomContext';
-import { ChatWidgetMessageViewProps } from './ChatWidgetMessageView.types';
+import { FC, MouseEvent, useEffect, useRef, useState } from 'react';
+import { ChatBubbleMessage } from './common/ChatBubbleMessage';
+
+interface ChatWidgetMessageViewProps
+{
+    chat: ChatBubbleMessage;
+    makeRoom: (chat: ChatBubbleMessage) => void;
+    onChatClicked: (chat: ChatBubbleMessage) => void;
+}
 
 export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
 {
     const { chat = null, makeRoom = null, onChatClicked = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
-    const { widgetHandler = null } = useRoomContext();
     const elementRef = useRef<HTMLDivElement>();
 
-    const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
-    {
-        if(event.shiftKey) return;
-
-        onChatClicked(chat);
-    }, [ chat, onChatClicked ]);
+    const onMouseDown = (event: MouseEvent<HTMLDivElement>) => ((event.shiftKey) && onChatClicked(chat));
 
     useEffect(() =>
     {
@@ -54,10 +54,7 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
         }
     }, [ elementRef, chat, makeRoom ]);
 
-    useEffect(() =>
-    {
-        setIsVisible(chat.visible);
-    }, [ chat.visible ]);
+    useEffect(() => setIsVisible(chat.visible), [ chat.visible ]);
 
     return (
         <div ref={ elementRef } className="bubble-container" style={ { visibility: (isVisible ? 'visible' : 'hidden') } } onMouseDown={ onMouseDown }>
diff --git a/src/views/room/widgets/chat/ChatWidgetView.scss b/src/views/room/widgets/chat/ChatWidgetView.scss
index 53904e1d..d2b8c923 100644
--- a/src/views/room/widgets/chat/ChatWidgetView.scss
+++ b/src/views/room/widgets/chat/ChatWidgetView.scss
@@ -13,4 +13,907 @@
     pointer-events: none;
 }
 
-@import './message/ChatWidgetMessageView';
+.chat-mention {
+    padding: 1px 5px;
+    font-weight: bold;
+    background: rgba(0, 0, 0, .2);
+    cursor: pointer;
+    border-radius: 100px;
+
+    &:hover {
+        color: blue;
+    }
+}
+
+.bubble-container {
+    position: absolute;
+    width: fit-content;
+    transition: top 0.2s ease 0s;
+    user-select: none;
+    pointer-events: all;
+
+    // -webkit-animation-duration: 0.2s;
+    // animation-duration: 0.2s;
+    // -webkit-animation-fill-mode: both;
+    // animation-fill-mode: both;
+    // -webkit-animation-name: bounceIn; 
+    // animation-name: bounceIn;
+
+    &:hover,
+    &:active {
+        pointer-events: none;
+    }
+
+    .user-container-bg {
+        position: absolute;
+        top: -1px;
+        left: 1px;
+        width: 30px;
+        height: calc(100% - 0.5px);
+        border-radius: 7px;
+        z-index: 1;
+    }
+
+    .chat-bubble {
+        position: relative;
+        z-index: 1;
+        word-break: break-word;
+        max-width: 350px;
+        min-height: 25px;
+        font-size: 15px;
+
+        border-image-slice: 17 6 6 29 fill;
+        border-image-width: 17px 6px 6px 29px;
+        border-image-outset: 2px 0px 0px 0px;
+        border-image-repeat: repeat repeat;
+
+        .pointer {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+
+            width: 9px;
+            height: 6px;
+            bottom: -5px;
+        }
+
+        &.type-0 { // normal
+            .message {
+                font-weight: 400;
+            }
+        }
+
+        &.type-1 { // whisper
+            .message {
+                font-weight: 400;
+                font-style: italic;
+                color: #595959;
+            }
+        }
+
+        &.type-2 { // shout
+            .message {
+                font-weight: 700;
+            }
+        }
+
+        &.bubble-0 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_0_transparent.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+                bottom: -5px;
+            }
+        }
+
+        &.bubble-1 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_1.png');
+
+            border-image-slice: 18 6 6 29 fill;
+            border-image-width: 18px 6px 6px 29px;
+            border-image-outset: 3px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-2, &.bubble-31 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_2.png');
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                color: rgba($white, 1);
+            }
+
+            .message {
+                color: rgba($white, 1) !important;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
+                height: 7px;
+            }
+        }
+
+        &.bubble-3 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_3.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png');
+            }
+        }
+
+        &.bubble-4 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_4.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png');
+            }
+        }
+
+        &.bubble-5 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_5.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png');
+            }
+        }
+
+        &.bubble-6 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_6.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png');
+            }
+        }
+
+        &.bubble-7 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_7.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png');
+            }
+        }
+
+        &.bubble-8 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_8.png');
+
+            border-image-slice: 20 6 6 27 fill;
+            border-image-width: 20px 6px 6px 27px;
+            border-image-outset: 5px 0px 0px 0px;
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png');
+            }
+        }
+
+        &.bubble-9 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_9.png');
+
+            border-image-slice: 17 18 12 19 fill;
+            border-image-width: 17px 18px 12px 19px;
+            border-image-outset: 7px 7px 0px 9px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png');
+                width: 7px;
+                height: 10px;
+                bottom: -6px;
+            }
+        }
+
+        &.bubble-10 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_10.png');
+
+            border-image-slice: 29 18 8 37 fill;
+            border-image-width: 29px 18px 8px 37px;
+            border-image-outset: 12px 7px 1px 5px;
+
+            .chat-content {
+                margin-left: 24px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png');
+                width: 7px;
+                height: 8px;
+                bottom: -3px;
+            }
+        }
+
+        &.bubble-11 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_11.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png');
+            }
+        }
+
+        &.bubble-12 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_12.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png');
+            }
+        }
+
+        &.bubble-13 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_13.png');
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png');
+            }
+        }
+
+        &.bubble-14 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_14.png');
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png');
+            }
+        }
+
+        &.bubble-15 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_15.png');
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png');
+            }
+        }
+
+        &.bubble-16 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_16.png');
+
+            border-image-slice: 13 6 10 31 fill;
+            border-image-width: 13px 6px 10px 31px;
+            border-image-outset: 6px 0px 0px 0px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_16_pointer.png');
+                height: 8px;
+            }
+        }
+
+        &.bubble-17 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_17.png');
+
+            border-image-slice: 24 6 8 35 fill;
+            border-image-width: 24px 6px 8px 35px;
+            border-image-outset: 9px 0px 2px 5px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_17_pointer.png');
+            }
+        }
+
+        &.bubble-18 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_18.png');
+
+            border-image-slice: 7 16 8 16 fill;
+            border-image-width: 7px 16px 8px 16px;
+            border-image-outset: 3px 10px 2px 11px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png');
+                height: 8px;
+            }
+        }
+
+        &.bubble-19 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_19.png');
+
+            border-image-slice: 17 6 9 19 fill;
+            border-image-width: 17px 6px 9px 19px;
+            border-image-outset: 5px 0px 0px 8px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
+            }
+        }
+
+        &.bubble-20 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_20.png');
+
+            border-image-slice: 18 6 8 19 fill;
+            border-image-width: 18px 6px 8px 19px;
+            border-image-outset: 5px 0px 0px 8px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
+            }
+        }
+
+        &.bubble-21 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_21.png');
+
+            border-image-slice: 20 6 12 24 fill;
+            border-image-width: 20px 6px 12px 24px;
+            border-image-outset: 13px 2px 1px 3px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-22 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_22.png');
+
+            border-image-slice: 18 19 11 33 fill;
+            border-image-width: 18px 19px 11px 33px;
+            border-image-outset: 7px 1px 1px 5px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png');
+            }
+        }
+
+        &.bubble-23 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_23.png');
+
+            border-image-slice: 16 6 7 32 fill;
+            border-image-width: 16px 6px 7px 32px;
+            border-image-outset: 5px 0px 0px 3px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
+            }
+        }
+
+        &.bubble-24 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_24.png');
+
+            border-image-slice: 23 8 6 40 fill;
+            border-image-width: 23px 8px 6px 40px;
+            border-image-outset: 6px 0px 0px 6px;
+
+            .chat-content {
+                margin-left: 30px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-25 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_25.png');
+
+            border-image-slice: 10 13 8 28 fill;
+            border-image-width: 10px 13px 8px 28px;
+            border-image-outset: 6px 3px 2px 0px;
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png');
+                height: 9px;
+                bottom: -7px;
+            }
+        }
+
+        &.bubble-26 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_26.png');
+
+            border-image-slice: 16 9 8 29 fill;
+            border-image-width: 16px 9px 8px 29px;
+            border-image-outset: 2px 2px 2px 0px;
+
+            .chat-content {
+                color: #c59432;
+                text-shadow: 1px 1px rgba(0, 0, 0, .3);
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png');
+                height: 10px;
+                bottom: -6px;
+            }
+        }
+
+        &.bubble-27 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_27.png');
+
+            border-image-slice: 25 6 5 36 fill;
+            border-image-width: 25px 6px 5px 36px;
+            border-image-outset: 8px 0px 0px 5px;
+
+            .chat-content {
+                margin-left: 30px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png');
+            }
+        }
+
+        &.bubble-28 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_28.png');
+
+            border-image-slice: 16 7 7 27 fill;
+            border-image-width: 16px 7px 7px 27px;
+            border-image-outset: 3px 0px 0px 0px;
+
+            .chat-content {
+                margin-left: 25px;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png');
+            }
+        }
+
+        &.bubble-29 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_29.png');
+
+            border-image-slice: 10 7 15 31 fill;
+            border-image-width: 10px 7px 15px 31px;
+            border-image-outset: 2px 0px 0px 1px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_29_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-30 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_30.png');
+
+            .user-container {
+                display: none;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_30_pointer.png');
+                height: 7px;
+            }
+        }
+
+        &.bubble-32 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_32.png');
+
+            border-image-slice: 15 7 7 30 fill;
+            border-image-width: 15px 7px 7px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_32_pointer.png');
+            }
+        }
+
+        &.bubble-33 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+            border-image-slice: 7 6 6 39 fill;
+            border-image-width: 7px 6px 6px 39px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .chat-content {
+                margin-left: 35px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 9px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-34 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+            border-image-slice: 7 6 6 39 fill;
+            border-image-width: 7px 6px 6px 39px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            &.type-1 {
+
+                .message {
+                    font-style: unset;
+                    color: inherit;
+                }
+            }
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .chat-content {
+                margin-left: 35px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 9px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-35 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
+
+            border-image-slice: 19 6 5 29 fill;
+            border-image-width: 19px 6px 5px 29px;
+            border-image-outset: 4px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png');
+            }
+        }
+
+        &.bubble-36 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_36.png');
+
+            border-image-slice: 17 7 5 30 fill;
+            border-image-width: 17px 7px 5px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 13px;
+                height: 18px;
+                left: 5px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png');
+            }
+        }
+
+        &.bubble-37 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_37.png');
+
+            border-image-slice: 16 6 7 32 fill;
+            border-image-width: 16px 6px 7px 32px;
+            border-image-outset: 5px 0px 0px 3px;
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
+            }
+        }
+
+        &.bubble-38 {
+            border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_38.png');
+
+            border-image-slice: 17 7 5 30 fill;
+            border-image-width: 17px 7px 5px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 3px;
+                top: 2px;
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
+            }
+
+            .pointer {
+                background: url('../../../../assets/images/chat/chatbubbles/bubble_38_pointer.png');
+            }
+        }
+
+        .user-container {
+            z-index: 3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            max-height: 24px;
+            overflow: hidden;
+
+            .user-image {
+                position: absolute;
+                top: -48px;
+                left: -32.5px;
+                width: 90px;
+                height: 130px;
+                background-repeat: no-repeat;
+                background-position: center;
+                transform: scale(0.5);
+                overflow: hidden;
+                image-rendering: -webkit-optimize-contrast;
+            }
+        }
+
+        .chat-content {
+            padding: 5px 6px 5px 4px;
+            margin-left: 27px;
+            line-height: 1;
+            color: $black;
+            min-height: 25px;
+        }
+    }
+}
+
+.chat-bubble-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.bubble-0 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_0.png');
+    }
+
+    &.bubble-1 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_1.png');
+        height: 25px;
+    }
+
+    &.bubble-2, &.bubble-31 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_2.png');
+    }
+
+    &.bubble-3 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_3.png');
+    }
+
+    &.bubble-4 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_4.png');
+    }
+
+    &.bubble-5 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_5.png');
+    }
+
+    &.bubble-6 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_6.png');
+    }
+
+    &.bubble-7 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_7.png');
+    }
+
+    &.bubble-8 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_8.png');
+    }
+
+    &.bubble-9 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_9.png');
+    }
+
+    &.bubble-10 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_10.png');
+    }
+
+    &.bubble-11 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_11.png');
+    }
+
+    &.bubble-12 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_12.png');
+    }
+
+    &.bubble-13 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_13.png');
+    }
+
+    &.bubble-14 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_14.png');
+    }
+
+    &.bubble-15 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_15.png');
+    }
+
+    &.bubble-16 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_16.png');
+    }
+
+    &.bubble-17 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_17.png');
+    }
+
+    &.bubble-18 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_18.png');
+    }
+
+    &.bubble-19 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_19.png');
+    }
+
+    &.bubble-20 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_20.png');
+    }
+
+    &.bubble-21 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_21.png');
+    }
+
+    &.bubble-22 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_22.png');
+    }
+
+    &.bubble-23 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_23.png');
+    }
+
+    &.bubble-24 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_24.png');
+    }
+
+    &.bubble-25 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_25.png');
+    }
+
+    &.bubble-26 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_26.png');
+    }
+
+    &.bubble-27 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_27.png');
+    }
+
+    &.bubble-28 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_28.png');
+    }
+
+    &.bubble-29 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_29.png');
+    }
+
+    &.bubble-30 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_30.png');
+    }
+
+    &.bubble-32 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_32.png');
+    }
+
+    &.bubble-33 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
+        }
+    }
+
+    &.bubble-34 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
+        }
+    }
+
+    &.bubble-35 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
+    }
+
+    &.bubble-36 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_36.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 13px;
+            height: 18px;
+            left: 13px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
+        }
+    }
+
+    &.bubble-37 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
+    }
+
+    &.bubble-38 {
+        background-image: url('../../../../assets/images/chat/chatbubbles/bubble_38.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
+        }
+    }
+}
diff --git a/src/views/room/widgets/chat/ChatWidgetView.tsx b/src/views/room/widgets/chat/ChatWidgetView.tsx
index 6dab7b50..9181ffa3 100644
--- a/src/views/room/widgets/chat/ChatWidgetView.tsx
+++ b/src/views/room/widgets/chat/ChatWidgetView.tsx
@@ -3,8 +3,8 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { RoomWidgetChatSelectAvatarMessage, RoomWidgetRoomObjectMessage, RoomWidgetUpdateChatEvent } from '../../../../api';
 import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../hooks/events';
 import { useRoomContext } from '../../context/RoomContext';
-import { ChatWidgetMessageView } from './message/ChatWidgetMessageView';
-import { ChatBubbleMessage } from './utils/ChatBubbleMessage';
+import { ChatWidgetMessageView } from './ChatWidgetMessageView';
+import { ChatBubbleMessage } from './common/ChatBubbleMessage';
 
 export const ChatWidgetView: FC<{}> = props =>
 {
@@ -54,13 +54,7 @@ export const ChatWidgetView: FC<{}> = props =>
         }
     }, [ chatMessages, moveChatUp, removeHiddenChats ]);
 
-    const addChat = useCallback((chat: ChatBubbleMessage) =>
-    {
-        setChatMessages(prevValue =>
-            {
-                return [ ...prevValue, chat ];
-            });
-    }, []);
+    const addChat = useCallback((chat: ChatBubbleMessage) => setChatMessages(prevValue => [ ...prevValue, chat ]), []);
 
     const onRoomWidgetUpdateChatEvent = useCallback((event: RoomWidgetUpdateChatEvent) =>
     {
@@ -115,10 +109,7 @@ export const ChatWidgetView: FC<{}> = props =>
 
     return (
         <div ref={ elementRef } className="nitro-chat-widget">
-            { chatMessages.map(chat =>
-                {
-                    return <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } onChatClicked={ onChatClicked } />
-                })}
+            { chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } onChatClicked={ onChatClicked } />) }
         </div>
     );
 }
diff --git a/src/views/room/widgets/chat/utils/ChatBubbleMessage.ts b/src/views/room/widgets/chat/common/ChatBubbleMessage.ts
similarity index 100%
rename from src/views/room/widgets/chat/utils/ChatBubbleMessage.ts
rename to src/views/room/widgets/chat/common/ChatBubbleMessage.ts
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
deleted file mode 100644
index 9337ed85..00000000
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
+++ /dev/null
@@ -1,921 +0,0 @@
-@keyframes bounceIn {
-    0% {
-       opacity: 0;
-       transform: scale(.3);
-    }
-    50% {
-       opacity: 1;
-       transform: scale(1.1);
-    }
-    70% {
-       transform: scale(.9);
-    }
-    100% {
-       transform: scale(1);
-    }
-}
-
-.chat-mention {
-    padding: 1px 5px;
-    font-weight: bold;
-    background: rgba(0, 0, 0, .2);
-    cursor: pointer;
-    border-radius: 100px;
-
-    &:hover {
-        color: blue;
-    }
-}
-
-.bubble-container {
-    position: absolute;
-    width: fit-content;
-    transition: top 0.2s ease 0s;
-    user-select: none;
-    pointer-events: all;
-
-    // -webkit-animation-duration: 0.2s;
-    // animation-duration: 0.2s;
-    // -webkit-animation-fill-mode: both;
-    // animation-fill-mode: both;
-    // -webkit-animation-name: bounceIn; 
-    // animation-name: bounceIn;
-
-    &:hover,
-    &:active {
-        pointer-events: none;
-    }
-
-    .user-container-bg {
-        position: absolute;
-        top: -1px;
-        left: 1px;
-        width: 30px;
-        height: calc(100% - 0.5px);
-        border-radius: 7px;
-        z-index: 1;
-    }
-
-    .chat-bubble {
-        position: relative;
-        z-index: 1;
-        word-break: break-word;
-        max-width: 350px;
-        min-height: 25px;
-        font-size: 15px;
-
-        border-image-slice: 17 6 6 29 fill;
-        border-image-width: 17px 6px 6px 29px;
-        border-image-outset: 2px 0px 0px 0px;
-        border-image-repeat: repeat repeat;
-
-        .pointer {
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-
-            width: 9px;
-            height: 6px;
-            bottom: -5px;
-        }
-
-        &.type-0 { // normal
-            .message {
-                font-weight: 400;
-            }
-        }
-
-        &.type-1 { // whisper
-            .message {
-                font-weight: 400;
-                font-style: italic;
-                color: #595959;
-            }
-        }
-
-        &.type-2 { // shout
-            .message {
-                font-weight: 700;
-            }
-        }
-
-        &.bubble-0 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_0_transparent.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-                bottom: -5px;
-            }
-        }
-
-        &.bubble-1 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_1.png');
-
-            border-image-slice: 18 6 6 29 fill;
-            border-image-width: 18px 6px 6px 29px;
-            border-image-outset: 3px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            .username {
-                display: none;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-            }
-        }
-
-        &.bubble-2, &.bubble-31 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_2.png');
-
-            .user-container {
-                display: none;
-            }
-
-            .username {
-                color: rgba($white, 1);
-            }
-
-            .message {
-                color: rgba($white, 1) !important;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
-                height: 7px;
-            }
-        }
-
-        &.bubble-3 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_3.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png');
-            }
-        }
-
-        &.bubble-4 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_4.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png');
-            }
-        }
-
-        &.bubble-5 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_5.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png');
-            }
-        }
-
-        &.bubble-6 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_6.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png');
-            }
-        }
-
-        &.bubble-7 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_7.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png');
-            }
-        }
-
-        &.bubble-8 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_8.png');
-
-            border-image-slice: 20 6 6 27 fill;
-            border-image-width: 20px 6px 6px 27px;
-            border-image-outset: 5px 0px 0px 0px;
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png');
-            }
-        }
-
-        &.bubble-9 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_9.png');
-
-            border-image-slice: 17 18 12 19 fill;
-            border-image-width: 17px 18px 12px 19px;
-            border-image-outset: 7px 7px 0px 9px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png');
-                width: 7px;
-                height: 10px;
-                bottom: -6px;
-            }
-        }
-
-        &.bubble-10 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_10.png');
-
-            border-image-slice: 29 18 8 37 fill;
-            border-image-width: 29px 18px 8px 37px;
-            border-image-outset: 12px 7px 1px 5px;
-
-            .chat-content {
-                margin-left: 24px;
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png');
-                width: 7px;
-                height: 8px;
-                bottom: -3px;
-            }
-        }
-
-        &.bubble-11 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_11.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png');
-            }
-        }
-
-        &.bubble-12 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_12.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png');
-            }
-        }
-
-        &.bubble-13 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_13.png');
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png');
-            }
-        }
-
-        &.bubble-14 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_14.png');
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png');
-            }
-        }
-
-        &.bubble-15 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_15.png');
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png');
-            }
-        }
-
-        &.bubble-16 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_16.png');
-
-            border-image-slice: 13 6 10 31 fill;
-            border-image-width: 13px 6px 10px 31px;
-            border-image-outset: 6px 0px 0px 0px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_16_pointer.png');
-                height: 8px;
-            }
-        }
-
-        &.bubble-17 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_17.png');
-
-            border-image-slice: 24 6 8 35 fill;
-            border-image-width: 24px 6px 8px 35px;
-            border-image-outset: 9px 0px 2px 5px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_17_pointer.png');
-            }
-        }
-
-        &.bubble-18 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_18.png');
-
-            border-image-slice: 7 16 8 16 fill;
-            border-image-width: 7px 16px 8px 16px;
-            border-image-outset: 3px 10px 2px 11px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png');
-                height: 8px;
-            }
-        }
-
-        &.bubble-19 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_19.png');
-
-            border-image-slice: 17 6 9 19 fill;
-            border-image-width: 17px 6px 9px 19px;
-            border-image-outset: 5px 0px 0px 8px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
-            }
-        }
-
-        &.bubble-20 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_20.png');
-
-            border-image-slice: 18 6 8 19 fill;
-            border-image-width: 18px 6px 8px 19px;
-            border-image-outset: 5px 0px 0px 8px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
-            }
-        }
-
-        &.bubble-21 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_21.png');
-
-            border-image-slice: 20 6 12 24 fill;
-            border-image-width: 20px 6px 12px 24px;
-            border-image-outset: 13px 2px 1px 3px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png');
-                bottom: -4px;
-            }
-        }
-
-        &.bubble-22 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_22.png');
-
-            border-image-slice: 18 19 11 33 fill;
-            border-image-width: 18px 19px 11px 33px;
-            border-image-outset: 7px 1px 1px 5px;
-
-            .chat-content {
-                margin-left: 20px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png');
-            }
-        }
-
-        &.bubble-23 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_23.png');
-
-            border-image-slice: 16 6 7 32 fill;
-            border-image-width: 16px 6px 7px 32px;
-            border-image-outset: 5px 0px 0px 3px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
-            }
-        }
-
-        &.bubble-24 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_24.png');
-
-            border-image-slice: 23 8 6 40 fill;
-            border-image-width: 23px 8px 6px 40px;
-            border-image-outset: 6px 0px 0px 6px;
-
-            .chat-content {
-                margin-left: 30px;
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png');
-                bottom: -4px;
-            }
-        }
-
-        &.bubble-25 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_25.png');
-
-            border-image-slice: 10 13 8 28 fill;
-            border-image-width: 10px 13px 8px 28px;
-            border-image-outset: 6px 3px 2px 0px;
-
-            .chat-content {
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png');
-                height: 9px;
-                bottom: -7px;
-            }
-        }
-
-        &.bubble-26 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_26.png');
-
-            border-image-slice: 16 9 8 29 fill;
-            border-image-width: 16px 9px 8px 29px;
-            border-image-outset: 2px 2px 2px 0px;
-
-            .chat-content {
-                color: #c59432;
-                text-shadow: 1px 1px rgba(0, 0, 0, .3);
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png');
-                height: 10px;
-                bottom: -6px;
-            }
-        }
-
-        &.bubble-27 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_27.png');
-
-            border-image-slice: 25 6 5 36 fill;
-            border-image-width: 25px 6px 5px 36px;
-            border-image-outset: 8px 0px 0px 5px;
-
-            .chat-content {
-                margin-left: 30px;
-                color: #fff;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png');
-            }
-        }
-
-        &.bubble-28 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_28.png');
-
-            border-image-slice: 16 7 7 27 fill;
-            border-image-width: 16px 7px 7px 27px;
-            border-image-outset: 3px 0px 0px 0px;
-
-            .chat-content {
-                margin-left: 25px;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png');
-            }
-        }
-
-        &.bubble-29 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_29.png');
-
-            border-image-slice: 10 7 15 31 fill;
-            border-image-width: 10px 7px 15px 31px;
-            border-image-outset: 2px 0px 0px 1px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_29_pointer.png');
-                bottom: -4px;
-            }
-        }
-
-        &.bubble-30 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_30.png');
-
-            .user-container {
-                display: none;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_30_pointer.png');
-                height: 7px;
-            }
-        }
-
-        &.bubble-32 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_32.png');
-
-            border-image-slice: 15 7 7 30 fill;
-            border-image-width: 15px 7px 7px 30px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_32_pointer.png');
-            }
-        }
-
-        &.bubble-33 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-            border-image-slice: 7 6 6 39 fill;
-            border-image-width: 7px 6px 6px 39px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            .chat-content {
-                margin-left: 35px;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 19px;
-                height: 19px;
-                left: 9px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-            }
-        }
-
-        &.bubble-34 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-            border-image-slice: 7 6 6 39 fill;
-            border-image-width: 7px 6px 6px 39px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            &.type-1 {
-
-                .message {
-                    font-style: unset;
-                    color: inherit;
-                }
-            }
-
-            .user-container {
-                display: none;
-            }
-
-            .username {
-                display: none;
-            }
-
-            .chat-content {
-                margin-left: 35px;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 19px;
-                height: 19px;
-                left: 9px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
-            }
-        }
-
-        &.bubble-35 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_35.png');
-
-            border-image-slice: 19 6 5 29 fill;
-            border-image-width: 19px 6px 5px 29px;
-            border-image-outset: 4px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png');
-            }
-        }
-
-        &.bubble-36 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_36.png');
-
-            border-image-slice: 17 7 5 30 fill;
-            border-image-width: 17px 7px 5px 30px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 13px;
-                height: 18px;
-                left: 5px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png');
-            }
-        }
-
-        &.bubble-37 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_37.png');
-
-            border-image-slice: 16 6 7 32 fill;
-            border-image-width: 16px 6px 7px 32px;
-            border-image-outset: 5px 0px 0px 3px;
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
-            }
-        }
-
-        &.bubble-38 {
-            border-image-source: url('../../../../../assets/images/chat/chatbubbles/bubble_38.png');
-
-            border-image-slice: 17 7 5 30 fill;
-            border-image-width: 17px 7px 5px 30px;
-            border-image-outset: 2px 0px 0px 0px;
-
-            .user-container {
-                display: none;
-            }
-
-            &::before {
-                content: ' ';
-                position: absolute;
-                width: 19px;
-                height: 19px;
-                left: 3px;
-                top: 2px;
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
-            }
-
-            .pointer {
-                background: url('../../../../../assets/images/chat/chatbubbles/bubble_38_pointer.png');
-            }
-        }
-
-        .user-container {
-            z-index: 3;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            max-height: 24px;
-            overflow: hidden;
-
-            .user-image {
-                position: absolute;
-                top: -48px;
-                left: -32.5px;
-                width: 90px;
-                height: 130px;
-                background-repeat: no-repeat;
-                background-position: center;
-                transform: scale(0.5);
-                overflow: hidden;
-                image-rendering: -webkit-optimize-contrast;
-            }
-        }
-
-        .chat-content {
-            padding: 5px 6px 5px 4px;
-            margin-left: 27px;
-            line-height: 1;
-            color: $black;
-            min-height: 25px;
-        }
-    }
-}
-
-.chat-bubble-icon {
-    background-repeat: no-repeat;
-    background-position: center;
-
-    &.bubble-0 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_0.png');
-    }
-
-    &.bubble-1 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_1.png');
-        height: 25px;
-    }
-
-    &.bubble-2, &.bubble-31 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_2.png');
-    }
-
-    &.bubble-3 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_3.png');
-    }
-
-    &.bubble-4 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_4.png');
-    }
-
-    &.bubble-5 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_5.png');
-    }
-
-    &.bubble-6 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_6.png');
-    }
-
-    &.bubble-7 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_7.png');
-    }
-
-    &.bubble-8 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_8.png');
-    }
-
-    &.bubble-9 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_9.png');
-    }
-
-    &.bubble-10 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_10.png');
-    }
-
-    &.bubble-11 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_11.png');
-    }
-
-    &.bubble-12 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_12.png');
-    }
-
-    &.bubble-13 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_13.png');
-    }
-
-    &.bubble-14 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_14.png');
-    }
-
-    &.bubble-15 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_15.png');
-    }
-
-    &.bubble-16 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_16.png');
-    }
-
-    &.bubble-17 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_17.png');
-    }
-
-    &.bubble-18 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_18.png');
-    }
-
-    &.bubble-19 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_19.png');
-    }
-
-    &.bubble-20 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_20.png');
-    }
-
-    &.bubble-21 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_21.png');
-    }
-
-    &.bubble-22 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_22.png');
-    }
-
-    &.bubble-23 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_23.png');
-    }
-
-    &.bubble-24 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_24.png');
-    }
-
-    &.bubble-25 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_25.png');
-    }
-
-    &.bubble-26 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_26.png');
-    }
-
-    &.bubble-27 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_27.png');
-    }
-
-    &.bubble-28 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_28.png');
-    }
-
-    &.bubble-29 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_29.png');
-    }
-
-    &.bubble-30 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_30.png');
-    }
-
-    &.bubble-32 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_32.png');
-    }
-
-    &.bubble-33 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 19px;
-            height: 19px;
-            left: 11px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
-        }
-    }
-
-    &.bubble-34 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_33_34.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 19px;
-            height: 19px;
-            left: 11px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
-        }
-    }
-
-    &.bubble-35 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_35.png');
-    }
-
-    &.bubble-36 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_36.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 13px;
-            height: 18px;
-            left: 13px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
-        }
-    }
-
-    &.bubble-37 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_35.png');
-    }
-
-    &.bubble-38 {
-        background-image: url('../../../../../assets/images/chat/chatbubbles/bubble_38.png');
-
-        &::before {
-            content: ' ';
-            position: absolute;
-            width: 19px;
-            height: 19px;
-            left: 11px;
-            top: 10px;
-            background: url('../../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
-        }
-    }
-}
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts b/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
deleted file mode 100644
index 330b2886..00000000
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ChatBubbleMessage } from '../utils/ChatBubbleMessage';
-
-export interface ChatWidgetMessageViewProps
-{
-    chat: ChatBubbleMessage;
-    makeRoom: (chat: ChatBubbleMessage) => void;
-    onChatClicked: (chat: ChatBubbleMessage) => void;
-}
diff --git a/src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts b/src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts
deleted file mode 100644
index 220b6bae..00000000
--- a/src/views/room/widgets/chat/utils/ChatWidgetUtilities.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { INitroPoint, IVector3D, NitroPoint } from '@nitrots/nitro-renderer';
-import { GetRoomEngine } from '../../../../../api';
-
-export function GetBubbleLocation(roomId: number, userLocation: IVector3D, canvasId = 1): INitroPoint
-{
-    const geometry = GetRoomEngine().getRoomInstanceGeometry(roomId, canvasId);
-    const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomId, canvasId);
-
-    let x = ((document.body.offsetWidth * scale) / 2);
-    let y = ((document.body.offsetHeight * scale) / 2);
-
-    if(geometry && userLocation)
-    {
-        const screenPoint = geometry.getScreenPoint(userLocation);
-
-        if(screenPoint)
-        {
-            x = (x + (screenPoint.x * scale));
-            y = (y + (screenPoint.y * scale));
-
-            const offsetPoint = GetRoomEngine().getRoomInstanceRenderingCanvasOffset(roomId, canvasId);
-
-            if(offsetPoint)
-            {
-                x = (x + offsetPoint.x);
-                y = (y + offsetPoint.y);
-            }
-        }
-    }
-
-    return new NitroPoint(x, y);
-}