feat: add custom wired show message bubble styles

src/components/wired-tools/WiredCreatorToolsView.tsx

@@ -3000,6 +3000,23 @@ export const WiredCreatorToolsView: FC<{}> = () =>
                 return;
             }
 
+            const selectedRoomObject = GetRoomEngine().getRoomObject(roomSession.roomId, selectedUser.roomIndex, RoomObjectCategory.UNIT);
+            const currentLocation = (selectedRoomObject?.getLocation() ?? new Vector3d(currentLiveState.positionX, currentLiveState.positionY, (currentLiveState.altitude / 100)));
+            const nextLocation = new Vector3d(nextX, nextY, currentLocation.z);
+            const nextDirectionVector = new Vector3d((nextDirection * 45));
+
+            GetRoomEngine().updateRoomObjectUserLocation(
+                roomSession.roomId,
+                selectedUser.roomIndex,
+                currentLocation,
+                nextLocation,
+                false,
+                0,
+                nextDirectionVector,
+                (nextDirection * 45),
+                false,
+                true);
+
             SendMessageComposer(new WiredUserInspectMoveComposer(selectedUser.roomIndex, nextX, nextY, nextDirection));
 
             setSelectedUserLiveState({

src/components/wired/views/actions/WiredActionChatView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
 import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
@@ -6,20 +6,26 @@ import { NitroInput } from '../../../../layout';
 import { WiredActionBaseView } from './WiredActionBaseView';
 import { WiredSourcesSelector } from '../WiredSourcesSelector';
 
+const SHOW_MESSAGE_STYLE_IDS = [ 34, 200, 201, 202, 210, 211, 212, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 250, 251, 252 ];
+const DEFAULT_SHOW_MESSAGE_STYLE_ID = 34;
+
 export const WiredActionChatView: FC<{}> = props =>
 {
     const [ message, setMessage ] = useState('');
+    const [ visibilitySelection, setVisibilitySelection ] = useState<number>(0);
+    const [ bubbleStyle, setBubbleStyle ] = useState<number>(DEFAULT_SHOW_MESSAGE_STYLE_ID);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
     const [ userSource, setUserSource ] = useState<number>(() =>
     {
         if(trigger?.intData?.length >= 1) return trigger.intData[0];
         return 0;
     });
+    const bubbleStyleIds = useMemo(() => SHOW_MESSAGE_STYLE_IDS, []);
 
     const save = () =>
     {
         setStringParam(message);
-        setIntParams([ userSource ]);
+        setIntParams([ userSource, visibilitySelection, bubbleStyle ]);
     };
 
     useEffect(() =>
@@ -27,6 +33,10 @@ export const WiredActionChatView: FC<{}> = props =>
         setMessage(trigger.stringData);
         if(trigger.intData.length >= 1) setUserSource(trigger.intData[0]);
         else setUserSource(0);
+        if(trigger.intData.length >= 2) setVisibilitySelection(trigger.intData[1]);
+        else setVisibilitySelection(0);
+        if((trigger.intData.length >= 3) && SHOW_MESSAGE_STYLE_IDS.includes(trigger.intData[2])) setBubbleStyle(trigger.intData[2]);
+        else setBubbleStyle(DEFAULT_SHOW_MESSAGE_STYLE_ID);
     }, [ trigger ]);
 
     return (
@@ -39,6 +49,28 @@ export const WiredActionChatView: FC<{}> = props =>
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <NitroInput maxLength={ GetConfigurationValue<number>('wired.action.chat.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
             </div>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.show_message.visibility_selection.title') }</Text>
+                <div className="flex items-center gap-1">
+                    <input checked={ (visibilitySelection === 0) } className="form-check-input" name="showMessageVisibilitySelection" type="radio" onChange={ () => setVisibilitySelection(0) } />
+                    <Text>{ LocalizeText('wiredfurni.params.show_message.visibility_selection.0') }</Text>
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (visibilitySelection === 1) } className="form-check-input" name="showMessageVisibilitySelection" type="radio" onChange={ () => setVisibilitySelection(1) } />
+                    <Text>{ LocalizeText('wiredfurni.params.show_message.visibility_selection.1') }</Text>
+                </div>
+            </div>
+            <div className="flex flex-col gap-1">
+                <Text bold>{ LocalizeText('wiredfurni.params.show_message.style_selection.title') }</Text>
+                <div className="flex items-center gap-2">
+                    <div className="bubble-container relative w-[50px] shrink-0">
+                        <div className={ `relative min-h-[26px] chat-bubble bubble-${ bubbleStyle }` } />
+                    </div>
+                    <select className="form-select form-select-sm" value={ bubbleStyle } onChange={ event => setBubbleStyle(Number(event.target.value)) }>
+                        { bubbleStyleIds.map(styleId => <option key={ styleId } value={ styleId }>{ LocalizeText(`wiredfurni.params.show_message.style_selection.${ styleId }`) }</option>) }
+                    </select>
+                </div>
+            </div>
         </WiredActionBaseView>
     );
 };

src/css/chat/Chats.css

@@ -807,6 +807,419 @@
             }
         }
 
+        &.bubble-200,
+        &.bubble-201,
+        &.bubble-202,
+        &.bubble-210,
+        &.bubble-211,
+        &.bubble-212,
+        &.bubble-220,
+        &.bubble-221,
+        &.bubble-222,
+        &.bubble-223,
+        &.bubble-224,
+        &.bubble-225,
+        &.bubble-226,
+        &.bubble-227,
+        &.bubble-228,
+        &.bubble-229,
+        &.bubble-250,
+        &.bubble-251,
+        &.bubble-252 {
+            border-image: none;
+            border: 1px solid #000;
+            border-radius: 6px;
+            background: #dbdbdb;
+            overflow: visible;
+
+            &::before {
+                content: '';
+                position: absolute;
+                inset: 0 auto 0 0;
+                width: 35px;
+                border-radius: 5px 0 0 5px;
+                background: var(--notification-color);
+                box-shadow: inset -1px 0 0 var(--notification-divider);
+                z-index: 0;
+            }
+
+            &.type-1 {
+                .message {
+                    font-style: unset;
+                    color: #000;
+                }
+            }
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .chat-content {
+                position: relative;
+                z-index: 1;
+                margin-left: 36px;
+                padding-left: 7px;
+                color: #000;
+            }
+
+            .pointer {
+                display: none;
+            }
+        }
+
+        &.bubble-200 {
+            --notification-color: #d43535;
+            --notification-divider: #a82424;
+
+            &::after {
+                content: '!';
+                position: absolute;
+                left: 9px;
+                top: 50%;
+                width: 16px;
+                height: 16px;
+                transform: translateY(-50%);
+                border-radius: 50%;
+                background: #fff;
+                color: #a82424;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 700;
+                font-size: 12px;
+                line-height: 1;
+                z-index: 1;
+            }
+        }
+
+        &.bubble-201 {
+            --notification-color: #35ff24;
+            --notification-divider: #349f00;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 8px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
+                z-index: 1;
+            }
+        }
+
+        &.bubble-202 {
+            --notification-color: #3879e3;
+            --notification-divider: #1b5ac2;
+
+            &::after {
+                content: '!';
+                position: absolute;
+                left: 9px;
+                top: 50%;
+                width: 16px;
+                height: 16px;
+                transform: translateY(-50%);
+                border-radius: 50%;
+                background: #fff;
+                color: #1b5ac2;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 700;
+                font-size: 12px;
+                line-height: 1;
+                z-index: 1;
+            }
+        }
+
+        &.bubble-210 {
+            --notification-color: #d43535;
+            --notification-divider: #a82424;
+
+            &::after {
+                content: '!';
+                position: absolute;
+                left: 9px;
+                top: 50%;
+                width: 16px;
+                height: 16px;
+                transform: translateY(-50%);
+                border-radius: 50%;
+                background: #fff;
+                color: #a82424;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 700;
+                font-size: 12px;
+                line-height: 1;
+                z-index: 1;
+            }
+        }
+
+        &.bubble-211 {
+            --notification-color: #3879e3;
+            --notification-divider: #1b5ac2;
+
+            &::after {
+                content: 'i';
+                position: absolute;
+                left: 9px;
+                top: 50%;
+                width: 16px;
+                height: 16px;
+                transform: translateY(-50%);
+                border-radius: 50%;
+                background: #fff;
+                color: #1b5ac2;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 700;
+                font-size: 11px;
+                line-height: 1;
+                z-index: 1;
+            }
+        }
+
+        &.bubble-212 {
+            --notification-color: #e3883f;
+            --notification-divider: #c7691d;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 6px;
+                top: 50%;
+                width: 22px;
+                height: 20px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath d='M11 2L20 18H2Z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11 6V12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='15' r='1.3' fill='white'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-220 {
+            --notification-color: #af3131;
+            --notification-divider: #872525;
+
+            &::after {
+                content: "\2715";
+                position: absolute;
+                left: 9px;
+                top: 50%;
+                transform: translateY(-54%);
+                color: #fff;
+                font-size: 16px;
+                font-weight: 700;
+                line-height: 1;
+                z-index: 1;
+            }
+        }
+
+        &.bubble-221 {
+            --notification-color: #af3131;
+            --notification-divider: #872525;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M6 6L12 12M12 6L6 12' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-222 {
+            --notification-color: #009c6c;
+            --notification-divider: #005e42;
+
+            &::after {
+                content: "\2713";
+                position: absolute;
+                left: 10px;
+                top: 50%;
+                transform: translateY(-55%);
+                color: #fff;
+                font-size: 16px;
+                font-weight: 700;
+                line-height: 1;
+                z-index: 1;
+            }
+        }
+
+        &.bubble-223 {
+            --notification-color: #009c6c;
+            --notification-divider: #005e42;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M5 9.2L7.6 11.8L13 6.4' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-224 {
+            --notification-color: #ab47ff;
+            --notification-divider: #7f00e9;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 6px;
+                top: 50%;
+                width: 20px;
+                height: 20px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='10' y='10.5' text-anchor='middle' dominant-baseline='middle' font-size='15.5' font-weight='900' font-family='Arial, sans-serif' fill='white' stroke='white' stroke-width='0.55' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-225 {
+            --notification-color: #ab47ff;
+            --notification-divider: #7f00e9;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Ctext x='9' y='9.4' text-anchor='middle' dominant-baseline='middle' font-size='12.5' font-weight='900' font-family='Arial, sans-serif' fill='%23ab47ff' stroke='%23ab47ff' stroke-width='0.45' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-226 {
+            --notification-color: #009c6c;
+            --notification-divider: #005e42;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5V12' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 7.4L9 4.7L11.7 7.4' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-227 {
+            --notification-color: #009c6c;
+            --notification-divider: #005e42;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M9 4.5V12' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 7.4L9 4.7L11.7 7.4' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-228 {
+            --notification-color: #af3131;
+            --notification-divider: #872525;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 5.8V13.2' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 10.3L9 13L11.7 10.3' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-229 {
+            --notification-color: #af3131;
+            --notification-divider: #872525;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 7px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M9 5.8V13.2' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 10.3L9 13L11.7 10.3' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+                z-index: 1;
+            }
+        }
+
+        &.bubble-250,
+        &.bubble-251 {
+            --notification-color: #2d2d2d;
+            --notification-divider: #0f0f0f;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 8px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png');
+                z-index: 1;
+            }
+        }
+
+        &.bubble-251 {
+            background: #8b8b8b;
+
+            .chat-content {
+                color: #fff;
+            }
+        }
+
+        &.bubble-252 {
+            --notification-color: #b4b4b4;
+            --notification-divider: #6b6b6b;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 8px;
+                top: 50%;
+                width: 18px;
+                height: 18px;
+                transform: translateY(-50%);
+                background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png');
+                z-index: 1;
+            }
+        }
+
         .user-container {
             z-index: 3;
             display: flex;
@@ -1097,4 +1510,304 @@
 	&.bubble-53 {
         background-image: url('@/assets/images/chat/chatbubbles/bubble_53.png');
     }
+
+    &.bubble-200 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_200.png');
+
+        &::before {
+            content: '!';
+            position: absolute;
+            left: 12px;
+            top: 10px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #fff;
+            color: #a82424;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            font-weight: 700;
+            line-height: 1;
+        }
+    }
+
+    &.bubble-201 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_201.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
+        }
+    }
+
+    &.bubble-202 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_202.png');
+
+        &::before {
+            content: '!';
+            position: absolute;
+            left: 12px;
+            top: 10px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #fff;
+            color: #1b5ac2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            font-weight: 700;
+            line-height: 1;
+        }
+    }
+
+    &.bubble-210 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_200.png');
+
+        &::before {
+            content: '!';
+            position: absolute;
+            left: 12px;
+            top: 10px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #fff;
+            color: #a82424;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            font-weight: 700;
+            line-height: 1;
+        }
+    }
+
+    &.bubble-211 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_202.png');
+
+        &::before {
+            content: 'i';
+            position: absolute;
+            left: 12px;
+            top: 10px;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #fff;
+            color: #1b5ac2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            font-weight: 700;
+            line-height: 1;
+        }
+    }
+
+    &.bubble-212 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_212.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 9px;
+            top: 7px;
+            width: 20px;
+            height: 18px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'%3E%3Cpath d='M10 2L18 16H2Z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 5.6V10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.4' r='1.2' fill='white'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-220 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_220.png');
+
+        &::before {
+                content: "\2715";
+            position: absolute;
+            left: 12px;
+            top: 9px;
+            color: #fff;
+            font-size: 15px;
+            font-weight: 700;
+            line-height: 1;
+        }
+    }
+
+    &.bubble-221 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_220.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M5.3 5.3L10.7 10.7M10.7 5.3L5.3 10.7' stroke='%23af3131' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-222 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_222.png');
+
+        &::before {
+                content: "\2713";
+            position: absolute;
+            left: 12px;
+            top: 8px;
+            color: #fff;
+            font-size: 15px;
+            font-weight: 700;
+            line-height: 1;
+        }
+    }
+
+    &.bubble-223 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_222.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M4.6 8.2L7 10.6L11.6 6' stroke='%23009c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-224 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_224.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 6px;
+            width: 20px;
+            height: 20px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='10' y='10.5' text-anchor='middle' dominant-baseline='middle' font-size='15.5' font-weight='900' font-family='Arial, sans-serif' fill='white' stroke='white' stroke-width='0.55' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-225 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_224.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ctext x='8' y='8.3' text-anchor='middle' dominant-baseline='middle' font-size='11.2' font-weight='900' font-family='Arial, sans-serif' fill='%23ab47ff' stroke='%23ab47ff' stroke-width='0.4' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-226 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_226.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.3V10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.6L8 4.4L10.2 6.6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-227 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_226.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M8 4.3V10.8' stroke='%23009c6c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.6L8 4.4L10.2 6.6' stroke='%23009c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-228 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_228.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.2V11.7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 9.5L8 11.7L10.2 9.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-229 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_228.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M8 5.2V11.7' stroke='%23af3131' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 9.5L8 11.7L10.2 9.5' stroke='%23af3131' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.bubble-250 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_250.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png');
+        }
+    }
+
+    &.bubble-251 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_251.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png');
+        }
+    }
+
+    &.bubble-252 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_252.png');
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 8px;
+            width: 16px;
+            height: 16px;
+            background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png');
+        }
+    }
 }