@aws/mynah-ui 4.22.1 → 4.23.0-beta.10

package/dist/static.d.ts

@@ -2,18 +2,23 @@
  * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { MynahIcons } from './components/icon';
+import { MynahIcons, MynahIconsType } from './components/icon';
 import { ChatItemBodyRenderer } from './helper/dom';
 import { SelectAbstract, SelectProps, RadioGroupAbstract, RadioGroupProps, ButtonAbstract, ButtonProps, TextInputProps, TextInputAbstract, TextAreaProps, TextAreaAbstract, ToggleOption } from './main';
 export interface QuickActionCommand {
     command: string;
+    id?: string;
+    label?: string;
     disabled?: boolean;
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
     description?: string;
     placeholder?: string;
+    children?: QuickActionCommandGroup[];
+    route?: string[];
 }
 export interface QuickActionCommandGroup {
     groupName?: string;
+    actions?: Action[];
     commands: QuickActionCommand[];
 }
 /**
@@ -145,6 +150,7 @@ export declare enum MynahEventNames {
     CHAT_ITEM_ADD = "chatItemAdd",
     FOLLOW_UP_CLICKED = "followUpClicked",
     BODY_ACTION_CLICKED = "bodyActionClicked",
+    QUICK_COMMAND_GROUP_ACTION_CLICK = "quickCommandGroupActionClicked",
     TABBED_CONTENT_SWITCH = "tabbedContentSwitch",
     SHOW_MORE_WEB_RESULTS_CLICK = "showMoreWebResultsClick",
     SHOW_FEEDBACK_FORM = "showFeedbackForm",
@@ -152,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",
@@ -216,12 +224,13 @@ export interface ProgressField {
 }
 export interface TreeNodeDetails {
     status?: Status;
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
     label?: string;
     description?: string;
     clickable?: boolean;
 }
 export interface ChatItemContent {
+    header?: ChatItemContent | null;
     body?: string | null;
     customRenderer?: string | ChatItemBodyRenderer | ChatItemBodyRenderer[] | null;
     followUp?: {
@@ -238,6 +247,10 @@ export interface ChatItemContent {
         rootFolderTitle?: string;
         filePaths?: string[];
         deletedFiles?: string[];
+        flatList?: boolean;
+        folderIcon?: MynahIcons | MynahIconsType | null;
+        collapsed?: boolean;
+        hideFileCount?: boolean;
         actions?: Record<string, FileNodeAction[]>;
         details?: Record<string, TreeNodeDetails>;
     } | null;
@@ -251,11 +264,11 @@ export interface ChatItemContent {
         title?: string;
         status?: {
             status?: Status;
-            icon?: MynahIcons;
+            icon?: MynahIcons | MynahIconsType;
             body?: string;
         };
         description?: string;
-        icon?: MynahIcons;
+        icon?: MynahIcons | MynahIconsType;
         content: ChatItemContent;
     } | null;
     tabbedContent?: Array<ToggleOption & {
@@ -268,27 +281,51 @@ export interface ChatItem extends ChatItemContent {
     messageId?: string;
     snapToTop?: boolean;
     canBeVoted?: boolean;
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
     hoverEffect?: boolean;
     status?: Status;
 }
-export interface ChatItemFormItem {
+export interface ValidationPattern {
+    pattern: string | RegExp;
+    errorMessage?: string;
+}
+interface BaseFormItem {
     id: string;
-    type: 'select' | 'textarea' | 'textinput' | 'numericinput' | 'stars' | 'radiogroup' | 'email';
     mandatory?: boolean;
     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;
+        patterns: ValidationPattern[];
+    };
+};
+type SelectFormItem = BaseFormItem & {
+    type: 'select';
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+};
+type OtherFormItem = BaseFormItem & {
+    type: 'stars' | 'radiogroup';
     options?: Array<{
         value: string;
         label: string;
     }>;
-}
+};
+export type ChatItemFormItem = TextBasedFormItem | SelectFormItem | OtherFormItem;
 export interface ChatPrompt {
     prompt?: string;
     escapedPrompt?: string;
     command?: string;
-    context?: string[];
+    context?: string[] | QuickActionCommand[];
 }
 export interface ChatItemAction extends ChatPrompt {
     type?: string;
@@ -296,28 +333,25 @@ export interface ChatItemAction extends ChatPrompt {
     disabled?: boolean;
     description?: string;
     status?: 'primary' | Status;
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
 }
-export interface ChatItemButton {
+export interface ChatItemButton extends Omit<Action, 'status'> {
     keepCardAfterClick?: boolean;
     waitMandatoryFormItems?: boolean;
-    text: string;
-    id: string;
-    disabled?: boolean;
-    description?: string;
     status?: 'main' | 'primary' | 'clear' | Status;
     flash?: 'infinite' | 'once';
     fillState?: 'hover' | 'always';
-    icon?: MynahIcons;
     position?: 'inside' | 'outside';
 }
-export interface TabBarAction {
+export interface Action {
     text?: string;
     id: string;
     disabled?: boolean;
     description?: string;
     status?: Status;
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
+}
+export interface TabBarAction extends Action {
 }
 export interface TabBarMainAction extends TabBarAction {
     items?: TabBarAction[];
@@ -328,7 +362,7 @@ export interface FileNodeAction {
     disabled?: boolean;
     description?: string;
     status?: Status;
-    icon: MynahIcons;
+    icon: MynahIcons | MynahIconsType;
 }
 export declare enum KeyMap {
     ESCAPE = "Escape",
@@ -421,7 +455,7 @@ export declare enum NotificationType {
     ERROR = "error"
 }
 export interface TabHeaderDetails {
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
     title?: string;
     description?: string;
 }
@@ -429,7 +463,7 @@ export interface CodeBlockAction {
     id: 'copy' | 'insert-to-cursor' | string;
     label: string;
     description?: string;
-    icon?: MynahIcons;
+    icon?: MynahIcons | MynahIconsType;
     data?: any;
     flash?: 'infinite' | 'once';
     acceptedLanguages?: 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,9 @@ interface ChatItemContent {
     rootFolderTitle?: string;
     filePaths?: string[];
     deletedFiles?: string[];
+    flatList?: boolean;
+    collapsed?: boolean;
+    hideFileCount?: boolean;
     actions?: Record<string, FileNodeAction[]>;
     details?: Record<string, TreeNodeDetails>;
   } | null;
@@ -1075,6 +1079,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 +1773,9 @@ mynahUI.addChatItem(tabId, {
     deletedFiles: ['src/devfile.yaml'],
     // fileTreeTitle: "Custom file tree card title";
     // rootFolderTitle: "Custom root folder title";
+    // collapsed: true // Collapse the root folder by default
+    // hideFileCount: true // Hide the file counter next to folders
+    // flatList: true // Enable to generate a flat list with one parent folder and no sub folders
     actions: {
       'src/App.tsx': [
         {
@@ -1776,6 +1820,8 @@ mynahUI.addChatItem(tabId, {
 
 **NOTE 3:** In case you want to show one single file (or folder by giving it a folder icon) and not make it clickable, use the `details` section with the file name and set the `clickable` to `false`.
 
+**NOTE 4:** In case you want a flat list, where all subfolders are not rendered but just all the files, you can pass `true` to the `flatList` prop.
+
 <p align="center">
   <img src="./img/data-model/chatItems/codeResult.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
@@ -2034,8 +2080,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 +2170,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/docs/USAGE.md

@@ -18,6 +18,7 @@ mynahUI.addToUserPrompt(...);
 mynahUI.updateLastChatAnswer(...);
 mynahUI.updateChatAnswerWithMessageId(...);
 mynahUI.endMessageStream(...);
+mynahUI.serializeChat(...);
 mynahUI.updateStore(...);
 mynahUI.selectTab(...);
 mynahUI.removeTab(...);
@@ -390,6 +391,25 @@ Can you end stream for a card you already ended the stream? Basically yes becaus
 
 ---
 
+## Serializing a chat (`serializeChat`)
+
+You can serialize an entire chat from a specific tab using this function. Only the card bodies will be included, meaning that buttons and other interactable components are left out. There are two output options for the serialization:
+- **Markdown:** get all the bodies from chat items in markdown format so that it serves as the contents of a valid `.md` file. Each card body is separated by `\n\n---\n\n`.
+- **HTML:** get a string which serves as the contents of a valid `.html` file. It consists of a centered chat container, containing all the chat item bodies in cards. All the relevant stylesheets from MynahUI are included in the `<style>` section of the string.
+
+The following example shows how serialization could be used to download an export of a tab's chat:
+```typescript
+const serializedChat = mynahUI.serializeChat(tabId, 'markdown')
+const blob = new Blob([serializedChat], { type: 'text/plain' });
+const url = URL.createObjectURL(blob);
+const link = document.createElement('a');
+link.download = 'exported-chat.md';
+link.href = url;
+link.click();
+```
+
+---
+
 ## Adding code attachments to prompt field (`addToUserPrompt`)
 
 You can add code attachments under the prompt field of the desired tab. When user fills the prompt field and sends it, the attached code block will be appended at the end of the prompt text. It accepts max chars set through **[CONFIG](./CONFIG.md#maxUserInput)** however you don't need to worry about it. MynahUI will automatically crop it depending on the available chars left from the prompt field itself by using a `96` chars of threshold. **So beware that for example if you want 4000 chars exact, you need to give 4096 to the config.**

package/package.json

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

package/ui-tests/dist/index.html

@@ -1,9 +0,0 @@
-<html theme="base-light">
-    <head>
-        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
-    <script defer src="main.js"></script></head>
-
-    <body>
-        <div id="mynah-ui-wrapper"></div>
-    </body>
-</html>