From 1dc1b215f26d0ac71d61edb0afc9c71ccefa9bbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 17 Apr 2026 15:29:48 +0200
Subject: [PATCH] Chat Prompt Suggestions Chat story: Add stylingMode into
 option panel

---
 apps/react-storybook/stories/chat/Chat.stories.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/react-storybook/stories/chat/Chat.stories.tsx b/apps/react-storybook/stories/chat/Chat.stories.tsx
index d352ab9d1804..76bc58f640d2 100644
--- a/apps/react-storybook/stories/chat/Chat.stories.tsx
+++ b/apps/react-storybook/stories/chat/Chat.stories.tsx
@@ -1052,14 +1052,20 @@ const suggestionItems: ButtonGroupItem[] = [
 export const Suggestions: Story = {
     args: {
         sendImmediately: false,
+        stylingMode: 'outlined',
     },
     argTypes: {
         sendImmediately: {
             name: 'Send immediately on suggestion click',
             control: 'boolean',
         },
+        stylingMode: {
+            name: 'Suggestions styling mode',
+            control: 'select',
+            options: ['contained', 'outlined', 'text'],
+        },
     },
-    render: ({ sendImmediately }) => {
+    render: ({ sendImmediately, stylingMode }) => {
         const [messages, setMessages] = useState<ChatTypes.Message[]>([]);
         const [inputFieldText, setInputFieldText] = useState('');
 
@@ -1070,6 +1076,7 @@ export const Suggestions: Story = {
 
         const suggestions = useMemo<ChatTypes.Properties['suggestions']>(() => ({
             items: suggestionItems,
+            stylingMode,
             onItemClick: (e: ButtonGroupItemClickEvent) => {
                 if (sendImmediately) {
                     setMessages((prev) => [...prev, {
@@ -1081,7 +1088,7 @@ export const Suggestions: Story = {
                     setInputFieldText(e.itemData?.text ?? '');
                 }
             },
-        }), [sendImmediately]);
+        }), [sendImmediately, stylingMode]);
 
         return (
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>