How do I style the new "chat" button in the sfaiassistview

[Michael Brown]

How do I style the new "Chat" or "new and incognitor" chat button that is at the top right of the SfAiAssistView control? I tried everything.

Second to this, how do we style the preview chat pane? Some clear doc updates on this would be super nice.

Here is what I tried. I can style literally every other part of the control.

<!--  AI Conversation History Drawer  -->
<Color x:Key="ConversationDrawerBackground">#1F2933</Color>
<Color x:Key="ConversationTitleTextColor">#EBEDEF</Color>
<x:Double x:Key="ConversationTitleFontSize">15</x:Double>
<x:String x:Key="ConversationTitleFontFamily">RobotoMedium</x:String>
<Color x:Key="ConversationItemTextColor">#C8C8D4</Color>
<x:Double x:Key="ConversationItemFontSize">14</x:Double>
<x:String x:Key="ConversationItemFontFamily">RegularFont</x:String>
<Color x:Key="ConversationSectionLabelTextColor">#919191</Color>
<Color x:Key="ConversationDividerBackground">#3E4C59</Color>
<x:Double x:Key="ConversationDividerStrokeThickness">0.5</x:Double>
<Color x:Key="ConversationListViewSelectionBackground">#323E4A</Color>
<Color x:Key="ConversationSearchSelectionBackground">#323E4A</Color>
<!--  Conversation Empty State  -->
<Color x:Key="ConversationEmptyViewHeaderTextColor">#C8C8D4</Color>
<Color x:Key="ConversationEmptyViewContentTextColor">#919191</Color>
<!--  Conversation Search  -->
<Color x:Key="SearchViewBackground">#1F2933</Color>
<Color x:Key="SearchBarTextColor">#EBEDEF</Color>
<Color x:Key="SearchBarPlaceholderTextColor">#6E6E6E</Color>
<Color x:Key="SearchViewSearchIconTextColor">#C8C8D4</Color>
<Color x:Key="SearchViewCancelIconTextColor">#C8C8D4</Color>
<!--  "New Chat" / Chat Mode Context Menu (the + button in the drawer)  -->
<Color x:Key="ChatModeContextMenuItemHoverBackground">#323E4A</Color>
<Color x:Key="ChatModeContextMenuItemIconColor">#EBEDEF</Color>
<!--  Menu / Hamburger Icon (opens the conversation drawer)  -->
<Color x:Key="MenuIconColor">#FFFFFF</Color>

Attachment: 20260402_015002_a137edb2.png

[Muthupandy Ramakrishnan]

Hi Michael Brown,

We are currently analyzing your query and validating the details on our end. We will provide you with an update on or before April 06, 2026.

We appreciate your patience and understanding in the meantime.

Best Regards,
muthupandy R.

[Muthupandy Ramakrishnan]

Hi  Michael Brown,

We have shared the appropriate and supported theme keys for the specified component. Kindly refer to these keys and apply them in your project to achieve the required customization. 

<ContentPage.Resources>

    <syncTheme:SyncfusionThemeDictionary>

        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries>

            <ResourceDictionary>

           <x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>

                <Color x:Key="SfAIAssistViewBackground">#323E4A</Color>

               

                <!--  AI Conversation History Drawer  -->

                <Color x:Key="SfAIAssistViewConversationDrawerBackground">#1F2933</Color>

                <Color x:Key="SfAIAssistViewConversationDrawerHeaderTextColor">#EBEDEF</Color>

                <x:Double x:Key="SfAIAssistViewConversationDrawerHeaderFontSize">15</x:Double>

                <x:String x:Key="SfAIAssistViewConversationDrawerHeaderFontFamily">RobotoMedium</x:String>

                <Color x:Key="SfAIAssistViewConversationItemTextColor">#C8C8D4</Color>

                <x:Double x:Key="SfAIAssistViewConversationItemFontSize">14</x:Double>

                <x:String x:Key="SfAIAssistViewConversationItemFontFamily">RegularFont</x:String>

                <Color x:Key="SfAIAssistViewConversationSectionLabelTextColor">#919191</Color>

                <Color x:Key="SfAIAssistViewConversationDividerBackground">#3E4C59</Color>

                <x:Double x:Key="SfAIAssistViewConversationDividerStrokeThickness">0.5</x:Double>

                <Color x:Key="SfListViewHoverListViewItemBackground">Black</Color>

               

                <!--Conversation Search View-->

                <Color x:Key="SfAIAssistViewConversationSearchTextColor">Red</Color>

                <Color x:Key="SfAIAssistViewConversationSearchSelectionBackground">#323E4A</Color>

                <x:Double x:Key="SfAIAssistViewConversationSearchFontSize">14</x:Double>

                <x:String x:Key="SfAIAssistViewConversationSearchFontFamily">RegularFont</x:String>

               

                <!--  Conversation search Empty State  -->

                <Color x:Key="SfAIAssistViewSearchPanelEmptyViewTextColor">#919191</Color>

                <x:Double x:Key="SfAIAssistViewSearchPanelEmptyViewFontSize">14</x:Double>

                <x:String x:Key="SfAIAssistViewSearchPanelEmptyViewFontFamily">RegularFont</x:String>

               

                <!--  Conversation Search  -->

                <Color x:Key="SfAIAssistViewSearchPanelBackground">#1F2933</Color>

                <Color x:Key="SfAIAssistViewSearchBarTextColor">Green</Color>

                <Color x:Key="SfAIAssistViewSearchBarPlaceholderTextColor">#6E6E6E</Color>

                <Color x:Key="SfAIAssistViewSearchPanelSearchIconTextColor">#C8C8D4</Color>

                <Color x:Key="SfAIAssistViewSearchPanelCancelIconTextColor">#C8C8D4</Color>

                <Color x:Key="SfAIAssistViewSearchPanelSearchbarStroke">Yellow</Color>

                <x:Double x:Key="SfAIAssistViewSearchPanelSearchbarStrokeThickness">1</x:Double>

                <Color x:Key="SfAIAssistViewSearchPanelSearchbarFocusedStroke">Green</Color>

                <x:Double x:Key="SfAIAssistViewSearchPanelSearchbarFocusedStrokeThickness">2</x:Double>

               

                <!--Conversation Search Items-->

                <Color x:Key="SfAIAssistViewSearchPanelGroupHeaderTextColor">#C8C8D4</Color>

                <x:Double x:Key="SfAIAssistViewSearchPanelGroupHeaderFontSize">14</x:Double>

                <x:String x:Key="SfAIAssistViewSearchPanelGroupHeaderFontFamily">RegularFont</x:String>

                <Color x:Key="SfAIAssistViewSearchPanelConversationItemTextColor">#C8C8D4</Color>

                <x:Double x:Key="SfAIAssistViewSearchPanelConversationItemFontSize">14</x:Double>

                <x:String x:Key="SfAIAssistViewSearchPanelConversationItemFontFamily">RegularFont</x:String>

               

                <!--Toolbar -->

                <Color x:Key="SfAIAssistViewToolBarTitleTextColor">Orange</Color>

                <x:Double x:Key="SfAIAssistViewToolBarTitleFontSize">16</x:Double>

                <x:String x:Key="SfAIAssistViewToolBarTitleFontFamily">RegularFont</x:String>

                <Color x:Key="SfAIAssistViewToolBarViewBackground">Blue</Color>

                <Color x:Key="SfAIAssistViewToolBarChatModeBackground">grey</Color>

                <Color x:Key="SfAIAssistViewToolBarChatModeTextColor">White</Color>

               

                <!-- Toolbar context menu-->

                <Color x:Key="SfAIAssistViewChatModeContextMenuPopupBackground">Yellow</Color>

                <x:Double x:Key="SfAIAssistViewChatModeContextMenuItemFontSize">14</x:Double>

                <Color x:Key="SfAIAssistViewChatModeContextMenuItemTextColor">Blue</Color>

                <!--  Menu / Hamburger Icon (opens the conversation drawer)  -->

                <Color x:Key="SfAIAssistViewMenuIconColor">#FFFFFF</Color>

            </ResourceDictionary>

        </syncTheme:SyncfusionThemeDictionary.MergedDictionaries>

    </syncTheme:SyncfusionThemeDictionary>

</ContentPage.Resources>

We will be updating the theme keys required to customize the new SfAIAssistView components in our UG documentation shortly. If you require any further clarification or assistance while applying these changes, feel free to reach out to us—we will be happy to help.

Best Regards,
Muthupandy R.

[Michael Brown]

This is exactly what I needed!  Thank you so much.

[Muthupandy Ramakrishnan]

Hi Michael Brown, 
Thank you so much for your kind words! 😊

We’re really glad to hear that this solution met your expectations and helped resolve your requirement.

If you need any further assistance with SfAIAssistView customization or have additional questions in the future, please don’t hesitate to reach out—we’ll be happy to help.

Best Regards,
Muthupandy R.