@aws/mynah-ui 4.23.0-beta.5 → 4.23.0-beta.7

package/dist/static.d.ts

@@ -158,11 +158,13 @@ export declare enum MynahEventNames {
     FILE_ACTION_CLICK = "fileActionClick",
     TAB_FOCUS = "tabFocus",
     CUSTOM_FORM_ACTION_CLICK = "customFormActionClick",
+    FORM_MODIFIER_ENTER_PRESS = "formModifierEnterPress",
     ADD_ATTACHMENT = "addAttachment",
     REMOVE_ATTACHMENT = "removeAttachment",
     TAB_BAR_BUTTON_CLICK = "tabBarButtonClick",
     PROMPT_PROGRESS_ACTION_CLICK = "promptProgressActionClick",
-    ROOT_RESIZE = "rootResize"
+    ROOT_RESIZE = "rootResize",
+    CONTEXT_SELECTED = "contextSelected"
 }
 export declare enum MynahPortalNames {
     WRAPPER = "wrapper",
@@ -228,6 +230,7 @@ export interface TreeNodeDetails {
     clickable?: boolean;
 }
 export interface ChatItemContent {
+    header?: ChatItemContent | null;
     body?: string | null;
     customRenderer?: string | ChatItemBodyRenderer | ChatItemBodyRenderer[] | null;
     followUp?: {
@@ -244,6 +247,8 @@ export interface ChatItemContent {
         rootFolderTitle?: string;
         filePaths?: string[];
         deletedFiles?: string[];
+        collapsedByDefault?: boolean;
+        hideFileCount?: boolean;
         actions?: Record<string, FileNodeAction[]>;
         details?: Record<string, TreeNodeDetails>;
     } | null;
@@ -288,9 +293,11 @@ interface BaseFormItem {
     title?: string;
     placeholder?: string;
     value?: string;
+    description?: string;
 }
 export type TextBasedFormItem = BaseFormItem & {
     type: 'textarea' | 'textinput' | 'numericinput' | 'email';
+    checkModifierEnterKeyPress?: boolean;
     validationPatterns?: {
         operator?: 'and' | 'or';
         genericValidationErrorMessage?: string;

package/docs/DATAMODEL.md

@@ -868,6 +868,7 @@ type CodeBlockActions = Record<'copy' | 'insert-to-cursor' | string, CodeBlockAc
 
 // ################################# 
 interface ChatItemContent {
+  header?: ChatItemContent | null;
   body?: string | null;
   customRenderer?: string | ChatItemBodyRenderer | ChatItemBodyRenderer[] | null;
   followUp?: {
@@ -884,6 +885,8 @@ interface ChatItemContent {
     rootFolderTitle?: string;
     filePaths?: string[];
     deletedFiles?: string[];
+    collapsedByDefault?: boolean;
+    hideFileCount?: boolean;
     actions?: Record<string, FileNodeAction[]>;
     details?: Record<string, TreeNodeDetails>;
   } | null;
@@ -1075,6 +1078,43 @@ mynahUI.addChatItem('tab-1', {
 
 ---
 
+## `header`
+With this parameter, you can add a `ChatItem` at the top of a ChatItem, before the body, but still within the card itself.
+
+```typescript
+const mynahUI = new MynahUI({
+    tabs: {
+        'tab-1': {
+            ...
+        }
+    }
+});
+
+mynahUI.addChatItem(tabId, {
+  type: ChatItemType.ANSWER,
+  body: `SOME CONTENT`,
+  header: {
+    fileList: { // For example, want to show which file is used to generate that answer
+      rootFolderTitle: undefined,
+      fileTreeTitle: '',
+      filePaths: ['./src/index.ts'],
+      details: {
+        './src/index.ts': {
+          icon: MynahIcons.FILE,
+          description: `SOME DESCRIPTION.`
+        }
+      }
+    }
+  }
+});
+```
+
+<p align="center">
+  <img src="./img/data-model/chatItems/header.png" alt="header" style="max-width:600px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
 ## `body`
 Basically the body of the card. Which you can send a full markdown string. Allows code blocks, links etc. 
 
@@ -1732,6 +1772,8 @@ mynahUI.addChatItem(tabId, {
     deletedFiles: ['src/devfile.yaml'],
     // fileTreeTitle: "Custom file tree card title";
     // rootFolderTitle: "Custom root folder title";
+    // collapsedByDefault: true // Collapse the root folder by default
+    // hideFileCount: true // Hide the file counter next to folders
     actions: {
       'src/App.tsx': [
         {
@@ -2034,8 +2076,10 @@ interface ChatItemFormItem {
   type: 'select' | 'textarea' | 'textinput' | 'numericinput' | 'stars' | 'radiogroup'; // type (see below for each of them)
   mandatory?: boolean; // If it is set to true, buttons in the same card with waitMandatoryFormItems set to true will wait them to be filled
   title?: string; // Label of the input
+  description?: string; // The description, showing under the input field itself
   placeholder?: string; // Placeholder for input, but only applicable to textarea, textinput and numericinput
   value?: string; // Initial value of the item. All types of form items will get and return string values, conversion of the value type is up to you
+  checkModifierEnterKeyPress?: boolean; // Only applicable to textual inputs: whether the onFormModifierEnterPress event can be triggered from this input field
   options?: Array<{ // Only applicable to select and radiogroup types
     value: string;
     label: string;
@@ -2122,6 +2166,7 @@ mynahUI.addChatItem(tabId, {
             mandatory: true,
             title: `Email`,
             placeholder: 'email',
+            checkModifierEnterKeyPress: true
         },
         {
             id: 'name',

package/docs/PROPERTIES.md

@@ -45,6 +45,9 @@ export interface MynahUIProps {
   onTabAdd?: (
     tabId: string,
     eventId?: string) => void;
+  onContextSelected?: (
+    contextItem: QuickActionCommand,
+  ) => boolean;
   onTabRemove?: (
     tabId: string,
     eventId?: string) => void;
@@ -115,6 +118,10 @@ export interface MynahUIProps {
     tabId: string,
     feedbackPayload: FeedbackPayload,
     eventId?: string) => void;
+  onFormModifierEnterPress?: (
+    formData: Record<string, string>,
+    tabId: string,
+    eventId?: string) => void;
   onCustomFormAction?: (
     tabId: string,
     action: {
@@ -512,6 +519,26 @@ onTabAdd?: (tabId: string):void => {
 
 ---
 
+### `onContextSelected`
+
+This event will be fired whenever a user selects an item from the context (`@`) list either using mouse click or keyboard actions. It is only triggered for items without children, i.e. only leaves in the tree. The data of the selected context item can be accessed through the `contextItem`. This event handler expects a boolean return:
+- Returning `true` indicates that the context item should be added to the prompt input text.
+- Returning `false` indicates that nothing should be added to the prompt input, and the triggering string should be cleared. E.g. if a user types `@wor` and presses tab on the `@workspace` action, the `@wor` would be removed from the prompt input and no context item will be added.
+
+```typescript
+...
+onContextSelected(contextItem: QuickActionCommand) {
+  if (contextItem.command === 'add_prompt') {
+    Log('Custom context action triggered for adding a prompt!')
+    return false;
+  }
+  return true;
+},
+...
+```
+
+---
+
 ### `onBeforeTabRemove`
 
 This event will be fired when user clicks the close button but before actually closing the tab. You have **partial control over the tab close**. If you return false to this function, it will not immediately close the tab and will ask an approval from the user. Otherwise it will close the tab. You can set the texts which will be appeared on the confirmation overlay on **[Config/TEXTS](./CONFIG.md#texts)**. It will only pass `tabId` for the closed tab as argument.
@@ -826,6 +853,26 @@ onSendFeedback?: (
     };
 ...
 ```
+
+---
+
+### `onFormModifierEnterPress`
+
+This event will be fired when the user presses the modifier key (`cmd` on macOS, and `ctrl` on Windows / Linux) and the `enter` key at the same time, while focused on a textual form input field. The event will only be triggered for input fields that have set `checkModifierEnterKeyPress: true`, and it will only be triggered if the form is valid and can be submitted. An example use case for this would be submitting the form through a keyboard hotkey action.
+
+```typescript
+...
+onFormModifierEnterPress?: (
+    formData: Record<string, string>,
+    tabId: string,
+    eventId?: string): void => {
+      console.log(`Form modifier enter pressed on tab <b>${tabId}</b>:<br/>
+      Form data: <b>${JSON.stringify(formData)}</b><br/>
+      `);
+    },
+...
+```
+
 ---
 
 ### `onCustomFormAction`

package/docs/STARTUP.md

@@ -28,6 +28,7 @@ const mynahUI = new MynahUI({
     onBodyActionClicked: ...,
     onTabChange: ...,
     onTabAdd: ...,
+    onContextSelected: ...,
     onTabRemove: ...,
     onChatItemEngagement: ...,
     onCopyCodeToClipboard: ...,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.23.0-beta.5",
+    "version": "4.23.0-beta.7",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",