fix: Adding conditional check to apply styles for TitleDescriptionWithIcon and added some examples (#398)

Author: laileni-aws

example/src/config.ts

@@ -32,6 +32,11 @@ export const tabbarButtons: TabBarMainAction[] = [
                 text: 'Welcome screen',
                 icon: MynahIcons.Q,
             },
+            {
+                id: 'account-details',
+                text: 'Non chat tab (Account Details)',
+                icon: MynahIcons.USER,
+            },
             {
                 id: 'splash-loader',
                 text: 'Show splash loader',

example/src/main.ts

@@ -53,6 +53,7 @@ import {
     mcpToolRunSampleCard,
     mcpToolRunSampleCardInit,
     sampleRulesList,
+    accountDetailsTabData,
 } from './samples/sample-data';
 import escapeHTML from 'escape-html';
 import './styles/styles.scss';
@@ -990,6 +991,8 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
                     ...mynahUIDefaults.store,
                     ...welcomeScreenTabData.store,
                 });
+            } else if (buttonId === 'account-details') {
+                mynahUI.updateStore('', accountDetailsTabData);
             } else if (buttonId === 'export-chat-md') {
                 const serializedChat = mynahUI.serializeChat(tabId, 'markdown');
                 const blob = new Blob([serializedChat], { type: 'text/plain' });

example/src/samples/sample-data.ts

@@ -445,6 +445,39 @@ Transform your java project from an old version to a new one.
     ],
 };
 
+export const accountDetailsTabData: MynahUIDataModel = {
+    tabBackground: false,
+    compactMode: false,
+    tabTitle: 'Account Details',
+    promptInputVisible: false,
+    tabHeaderDetails: {
+        title: `Account details`,
+    },
+    chatItems: [
+        {
+            type: ChatItemType.ANSWER,
+            body: `### Subscription
+Free Tier
+`,
+            buttons: [
+                {
+                    status: 'primary',
+                    id: 'upgrade-subscription',
+                    text: `Upgrade`,
+                },
+            ],
+        },
+        {
+            type: ChatItemType.ANSWER,
+            body: `### Usage
+591/1000 queries used
+$0.00 incurred in overages
+Limits reset on 8/1/2025 at 12:00:00 GMT
+`,
+        },
+    ],
+};
+
 export const qAgentQuickActions: MynahUIDataModel['quickActionCommands'] = [
     {
         commands: [

src/components/title-description-with-icon.ts

@@ -24,7 +24,11 @@ export class TitleDescriptionWithIcon {
     this.render = DomBuilder.getInstance().build({
       type: 'div',
       testId: props.testId,
-      classNames: [ 'mynah-ui-title-description-icon-wrapper', ...(this.props.classNames ?? []) ],
+      // Apply icon wrapper styles only if icon is provided
+      classNames: [
+        ...(this.props.icon !== undefined ? [ 'mynah-ui-title-description-icon-wrapper' ] : []),
+        ...(this.props.classNames ?? [])
+      ],
       children: [
         ...(this.props.icon !== undefined
           ? [ {