From 450db9f81739c950d10fd2c7a0bfa63e1366fa82 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sun, 14 Jun 2026 21:05:47 +0200
Subject: [PATCH] feat(chat-input): style selector trigger shows selected
 bubble preview + caret
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the generic grayscale styles-icon trigger with a ▼ caret plus a small
clipped preview of the currently-selected chat bubble (chat-bubble bubble-N),
matching the reference layout.
---
 .../widgets/chat-input/ChatInputStyleSelectorView.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
index 15f2863..a35f391 100644
--- a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
@@ -11,7 +11,7 @@ interface ChatInputStyleSelectorViewProps
 
 export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = props =>
 {
-    const { chatStyleIds = null, selectChatStyleId = null } = props;
+    const { chatStyleId = 0, chatStyleIds = null, selectChatStyleId = null } = props;
     const [ selectorVisible, setSelectorVisible ] = useState(false);
 
     const selectStyle = (styleId: number) =>
@@ -23,8 +23,13 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
     return (
         <Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}>
             <Popover.Trigger asChild>
-                <div className="chatstyles-anchor">
-                    <div className="nitro-icon chatstyles-icon" />
+                <div className="flex h-[26px] items-center gap-[3px] cursor-pointer select-none pl-[2px]" aria-label="Stili chat">
+                    <svg className="h-[9px] w-[9px] shrink-0 text-black/70" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 3 } d="M19 9l-7 7-7-7" />
+                    </svg>
+                    <div className="relative h-[24px] w-[30px] overflow-hidden pointer-events-none">
+                        <div className={ `chat-bubble bubble-${ chatStyleId } absolute left-0 top-[1px] h-[22px] w-[52px]` } />
+                    </div>
                 </div>
             </Popover.Trigger>
             <Popover.Portal>