Merge pull request #375 from Randall-Jiang/quickActionHeader

feat: Add quickActionHeader for agentic

Author: Randall-Jiang

docs/DATAMODEL.md

@@ -3566,4 +3566,41 @@ export interface DetailedListItem {
   keywords?: string[];
 }
 }
-```
+```
+
+---
+
+### `quickActionCommandsHeader` (default: `{}`)
+Quick action commands header displays an informational banner above the quick action commands list when users hit `/` in the input. This is useful for providing additional context, warnings, or guidance about the available commands.
+
+The header supports various status styles (info, success, warning, error) and can include an icon, title, and description.
+
+```typescript
+const mynahUI = new MynahUI({
+    tabs: {
+        'tab-1': {
+            ...
+        }
+    }
+});
+
+mynahUI.updateStore('tab-1', {
+    quickActionCommands: [
+        // ... your commands here
+    ],
+    quickActionCommandsHeader: {
+        status: 'warning',
+        icon: MynahIcons.INFO,
+        title: 'New agentic capabilities',
+        description: 'You can now ask Q directly in the chat. You don\'t need to explicitly use /dev, /test, or /doc commands anymore.',
+    }
+})
+```
+
+<p align="center">
+  <img src="./img/data-model/tabStore/quickActionCommandsHeader.png" alt="quickActionCommandsHeader" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+The header will appear above the quick action commands list and provides information to users about new features.
+
+---

docs/img/data-model/tabStore/quickActionCommandsHeader.png

@@ -447,30 +447,35 @@ Transform your java project from an old version to a new one.
 
 export const qAgentQuickActions: MynahUIDataModel['quickActionCommands'] = [
     {
-        groupName: 'Amazon Q Agents',
         commands: [
             {
                 command: '/dev',
                 icon: MynahIcons.CODE_BLOCK,
-                description: 'Generate code across files with a task description.',
-                placeholder: 'Type your question',
+                description: 'Generate code to make a change in your project',
+                placeholder: 'Describe your task or issue in as much detail as possible',
             },
             {
-                command: '/write',
-                icon: MynahIcons.BUG,
-                description: 'Automatically write code and commit it',
+                command: '/doc',
+                icon: MynahIcons.DOC,
+                description: 'Generate documentation',
                 placeholder: 'Type your question',
             },
             {
-                command: '/generate',
+                command: '/test',
                 icon: MynahIcons.CHECK_LIST,
-                description: 'Generate code for selected codebase (supports python & java)',
+                description: 'Generate unit tests for selected code',
+                placeholder: 'Specify a function(s) in the current file (optional)',
+            },
+            {
+                command: '/review',
+                icon: MynahIcons.BUG,
+                description: '... and fix code issues before committing',
                 placeholder: 'Type your question',
             },
             {
                 command: '/transform',
                 icon: MynahIcons.TRANSFORM,
-                description: 'Transform your java project',
+                description: 'Transform your Java project',
                 placeholder: 'Type your question',
             },
         ],
@@ -481,6 +486,12 @@ export const welcomeScreenTabData: MynahUITabStoreTab = {
     isSelected: true,
     store: {
         quickActionCommands: qAgentQuickActions,
+        quickActionCommandsHeader: {
+            status: 'warning',
+            icon: MynahIcons.INFO,
+            title: 'Q Developer agentic capabilities',
+            description: 'You can now ask Q directly in the chat to generate code, documentation, and unit tests. You don\'t need to explicitly use /dev, /test, or /doc',
+        },
         tabTitle: 'Welcome to Q',
         tabBackground: true,
         chatItems: [
@@ -1286,6 +1297,28 @@ export const exampleInformationCard = (
     };
 };
 
+export const exampleBorderCard = (): ChatItem => {
+    return {
+        messageId: generateUID(),
+        type: ChatItemType.ANSWER,
+        border: true,
+        padding: true,
+        header: {
+            iconForegroundStatus: 'warning',
+            icon: MynahIcons.INFO,
+            body: '### /dev is going away soon!'
+        },
+        body: `With agentic coding, you can now ask me any coding question directly in the chat instead of using /dev.
+
+You can ask me to do things like:
+1. Create a project
+2. Add a feature
+3. Modify your files
+
+Try it out by typing your request in the chat!`,
+    };
+};
+
 export const exampleConfirmationButtons: ChatItem = {
     type: ChatItemType.ANSWER,
     messageId: new Date().getTime().toString(),

example/src/samples/sample-data.ts

@@ -4,17 +4,9 @@
  */
 
 import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
-import {
-  ChatItemButton,
-  ChatPrompt, DetailedList,
-  FilterOption,
-  KeyMap,
-  MynahEventNames,
-  PromptAttachmentType,
-  QuickActionCommand,
-  QuickActionCommandGroup
-} from '../../static';
-import { cancelEvent, MynahUIGlobalEvents } from '../../helper/events';
+import { ChatItemButton, ChatPrompt, DetailedList, FilterOption, KeyMap, MynahEventNames, PromptAttachmentType, QuickActionCommand, QuickActionCommandGroup, QuickActionCommandsHeader } from '../../static';
+import { TitleDescriptionWithIcon } from '../title-description-with-icon';
+import { MynahUIGlobalEvents, cancelEvent } from '../../helper/events';
 import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay';
 import { MynahUITabsStore } from '../../helper/tabs-store';
 import escapeHTML from 'escape-html';
@@ -724,10 +716,31 @@ export class ChatPromptInput {
         list: detailedListItemsGroup
       });
     }
+
+    const headerInfo: QuickActionCommandsHeader = MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('quickActionCommandsHeader');
+    let headerComponent = new TitleDescriptionWithIcon({
+      ...headerInfo,
+      classNames: [ 'mynah-chat-prompt-quick-picks-header', `status-${headerInfo.status ?? 'default'}` ]
+    }).render;
+
+    // const subscriptionId =
+    MynahUITabsStore.getInstance().addListenerToDataStore(this.props.tabId, 'quickActionCommandsHeader', (newHeader: QuickActionCommandsHeader) => {
+      const newHeaderComponent = new TitleDescriptionWithIcon({
+        ...newHeader,
+        classNames: [ 'mynah-chat-prompt-quick-picks-header', `status-${newHeader.status ?? 'default'}` ]
+      }).render;
+
+      headerComponent.replaceWith(newHeaderComponent);
+      headerComponent = newHeaderComponent;
+    });
+
     return DomBuilder.getInstance().build({
       type: 'div',
       classNames: [ 'mynah-chat-prompt-quick-picks-overlay-wrapper' ],
       children: [
+        ...(this.quickPickType === 'quick-action' && headerInfo != null
+          ? [ headerComponent ]
+          : []),
         this.quickPickItemsSelectorContainer.render
       ]
     });

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

@@ -22,6 +22,7 @@ const emptyDataModelObject: Required<MynahUIDataModel> = {
   cancelButtonWhenLoading: true,
   showChatAvatars: false,
   quickActionCommands: [],
+  quickActionCommandsHeader: {},
   contextCommands: [],
   promptInputPlaceholder: '',
   promptTopBarContextItems: [],

src/helper/store.ts

@@ -43,6 +43,13 @@ export interface QuickActionCommandGroup {
   actions?: Action[];
   commands: QuickActionCommand[];
 }
+
+export interface QuickActionCommandsHeader {
+  icon?: MynahIcons | MynahIconsType;
+  title?: string;
+  description?: string;
+  status?: Status;
+}
 /**
  * data store model to update the mynah ui partially or fully
  */
@@ -92,6 +99,10 @@ export interface MynahUIDataModel {
   */
   quickActionCommands?: QuickActionCommandGroup[];
   /**
+  * Quick Action commands header information block
+  */
+  quickActionCommandsHeader?: QuickActionCommandsHeader;
+  /**
   * Context commands to show when user hits @ to the input any point
   */
   contextCommands?: QuickActionCommandGroup[];
@@ -462,6 +473,7 @@ export interface ChatItem extends ChatItemContent {
   hoverEffect?: boolean;
   status?: Status;
   shimmer?: boolean;
+  collapse?: boolean;
 }
 
 export interface ValidationPattern {

src/static.ts

@@ -119,6 +119,7 @@
     --mynah-shadow-button: none;
     --mynah-shadow-card: none;
     --mynah-shadow-card-hover: 0 40px 25px -15px rgba(0, 0, 0, 0.35);
+    --mynah-shadow-card-border: 0 2px 8px rgba(0, 0, 0, 0.08);
     --mynah-shadow-overlay: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
 
     // ==========

src/styles/_variables.scss

@@ -417,7 +417,7 @@
         border-radius: var(--mynah-input-radius);
         box-sizing: border-box;
         margin: var(--mynah-chat-wrapper-spacing);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--mynah-shadow-card-border);
         width: calc(100% - 2 * var(--mynah-chat-wrapper-spacing));
     }
 

src/styles/components/chat/_chat-prompt-wrapper.scss

@@ -1,4 +1,5 @@
 @import '../../mixins';
+@import '../../scss-variables';
 
 .mynah-chat-prompt-overlay-buttons-container {
     display: inline-flex;
@@ -250,7 +251,28 @@
     max-height: 70vh;
     height: auto;
     display: flex;
+    flex-direction: column;
     overflow: hidden;
+
+    // Quick pick selector info header styling
+    > .mynah-chat-prompt-quick-picks-header {
+        padding: var(--mynah-sizing-3);
+        > .mynah-ui-title-description-icon-title {
+            font-weight: bold;
+            color: var(--mynah-color-text-strong);
+        }
+        > .mynah-ui-title-description-icon-description {
+            color: var(--mynah-color-text-weak);
+        }
+        @each $status in $mynah-statuses {
+            &.status-#{$status} {
+                > .mynah-ui-title-description-icon-icon {
+                    color: var(--mynah-color-status-#{$status});
+                }
+            }
+        }
+    }
+
     > .mynah-detailed-list {
         padding: var(--mynah-sizing-2);
         flex: 1;