Merging feat/quickAction-experience to main (#383)

* feat: add generic bordered card (#376)

* fix: only show commandActionHeader when it is not null

* fix: unit test cases

---------

Co-authored-by: Randall-Jiang <[email protected]>

Author: laileni-aws

example/src/commands.ts

@@ -21,6 +21,7 @@ export enum Commands {
     INFORMATION_CARDS = '/information-cards',
     CONFIRMATION_BUTTONS = '/confirmation-buttons',
     BUTTONS = '/buttons',
+    BORDERED_CARDS = '/bordered-cards',
 
     NOTIFY = '/show-notification',
     CLEAR = '/clear',

example/src/config.ts

@@ -215,6 +215,12 @@ export const QuickActionCommands: QuickActionCommandGroup[] = [
                 description:
                     'You can set the position of the followups too. By simply setting the type of the ChatItem.',
             },
+            {
+                command: Commands.BORDERED_CARDS,
+                icon: MynahIcons.INFO,
+                description:
+                    'ChatItem cards with border styling for important notifications or reroute messages.',
+            },
         ],
     },
     {

example/src/main.ts

@@ -38,6 +38,7 @@ import {
     sampleAllInOneList,
     sampleTableList,
     exampleInformationCard,
+    exampleBorderedCard,
     exploreTabData,
     qAgentQuickActions,
     welcomeScreenTabData,
@@ -1725,6 +1726,10 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
                     mynahUI.addChatItem(tabId, exampleInformationCard('success', 'Successfully completed this task!'));
                     mynahUI.addChatItem(tabId, defaultFollowUps);
                     break;
+                case Commands.BORDERED_CARDS:
+                    mynahUI.addChatItem(tabId, exampleBorderedCard());
+                    mynahUI.addChatItem(tabId, defaultFollowUps);
+                    break;
                 case Commands.CONFIRMATION_BUTTONS:
                     mynahUI.addChatItem(tabId, exampleConfirmationButtons);
                     mynahUI.addChatItem(tabId, defaultFollowUps);

example/src/samples/sample-data.ts

@@ -576,6 +576,10 @@ export const defaultFollowUps: ChatItem = {
                 command: Commands.HEADER_TYPES,
                 pillText: 'Cards with headers',
             },
+            {
+                command: Commands.BORDERED_CARDS,
+                pillText: 'Bordered cards',
+            },
             {
                 command: Commands.SUMMARY_CARD,
                 pillText: 'Card with summary field',
@@ -1251,6 +1255,7 @@ export const exampleCustomRendererWithDomBuilderJson: ChatItem = {
     ],
 };
 
+
 export const exampleDownloadFile: ChatItem = {
     messageId: new Date().getTime().toString(),
     type: ChatItemType.ANSWER,
@@ -1297,13 +1302,13 @@ export const exampleInformationCard = (
     };
 };
 
-export const exampleBorderCard = (): ChatItem => {
+export const exampleBorderedCard = (): ChatItem => {
     return {
         messageId: generateUID(),
         type: ChatItemType.ANSWER,
         border: true,
-        padding: true,
         header: {
+            padding: true,
             iconForegroundStatus: 'warning',
             icon: MynahIcons.INFO,
             body: '### /dev is going away soon!'

src/components/chat-item/chat-item-card.ts

@@ -112,8 +112,18 @@ export class ChatItemCard {
       testId: testIds.chatItem.card,
       children: this.initialSpinner ?? [],
       background: this.props.inline !== true && this.props.chatItem.type !== ChatItemType.DIRECTIVE && !(this.props.chatItem.fullWidth !== true && (this.props.chatItem.type === ChatItemType.ANSWER || this.props.chatItem.type === ChatItemType.ANSWER_STREAM)),
-      border: this.props.inline !== true && this.props.chatItem.type !== ChatItemType.DIRECTIVE && !(this.props.chatItem.fullWidth !== true && (this.props.chatItem.type === ChatItemType.ANSWER || this.props.chatItem.type === ChatItemType.ANSWER_STREAM)),
-      padding: this.props.inline === true || this.props.chatItem.padding === false || (this.props.chatItem.fullWidth !== true && (this.props.chatItem.type === ChatItemType.ANSWER || this.props.chatItem.type === ChatItemType.ANSWER_STREAM)) ? 'none' : undefined,
+      border: (this.props.inline !== true &&
+        this.props.chatItem.type !== ChatItemType.DIRECTIVE &&
+        !(this.props.chatItem.fullWidth !== true &&
+          (this.props.chatItem.type === ChatItemType.ANSWER ||
+           this.props.chatItem.type === ChatItemType.ANSWER_STREAM))) ||
+        // Auto border for warning/info headers
+        (this.props.chatItem.border === true),
+      padding: ((this.props.inline === true || this.props.chatItem.padding === false || (this.props.chatItem.fullWidth !== true && (this.props.chatItem.type === ChatItemType.ANSWER || this.props.chatItem.type === ChatItemType.ANSWER_STREAM))) &&
+        // Exception: warning/info headers should have padding
+        !(this.props.chatItem.header?.padding === true))
+        ? 'none'
+        : undefined,
     });
     this.updateCardContent();
     this.render = this.generateCard();
@@ -214,6 +224,7 @@ export class ChatItemCard {
       ...(this.props.chatItem.icon !== undefined ? [ 'mynah-chat-item-card-has-icon' ] : []),
       ...(this.props.chatItem.fullWidth === true || this.props.chatItem.type === ChatItemType.ANSWER || this.props.chatItem.type === ChatItemType.ANSWER_STREAM ? [ 'full-width' ] : []),
       ...(this.props.chatItem.padding === false ? [ 'no-padding' ] : []),
+
       ...(this.props.inline === true ? [ 'mynah-ui-chat-item-inline-card' ] : []),
       ...(this.props.chatItem.muted === true ? [ 'muted' ] : []),
       ...(this.props.small === true ? [ 'mynah-ui-chat-item-small-card' ] : []),

src/components/chat-item/chat-prompt-input.ts

@@ -734,11 +734,18 @@ export class ChatPromptInput {
       headerComponent = newHeaderComponent;
     });
 
+    // Only show header if it has meaningful content
+    const hasHeaderContent = headerInfo != null && (
+      (headerInfo.title != null && headerInfo.title.trim() !== '') ||
+      (headerInfo.description != null && headerInfo.description.trim() !== '') ||
+      headerInfo.icon != null
+    );
+
     return DomBuilder.getInstance().build({
       type: 'div',
       classNames: [ 'mynah-chat-prompt-quick-picks-overlay-wrapper' ],
       children: [
-        ...(this.quickPickType === 'quick-action' && headerInfo != null
+        ...(this.quickPickType === 'quick-action' && hasHeaderContent
           ? [ headerComponent ]
           : []),
         this.quickPickItemsSelectorContainer.render

src/static.ts

@@ -474,6 +474,7 @@ export interface ChatItem extends ChatItemContent {
   status?: Status;
   shimmer?: boolean;
   collapse?: boolean;
+  border?: boolean;
 }
 
 export interface ValidationPattern {

src/styles/components/chat/_chat-item-card.scss

@@ -15,6 +15,7 @@
     transform-origin: center bottom;
     gap: var(--mynah-sizing-4);
     z-index: var(--mynah-z-1);
+
     &-status {
         @each $status in $mynah-statuses {
             &-#{$status} {