@aws/mynah-ui 4.23.0-beta.8 → 4.23.0

package/dist/static.d.ts

@@ -247,7 +247,9 @@ export interface ChatItemContent {
         rootFolderTitle?: string;
         filePaths?: string[];
         deletedFiles?: string[];
-        collapsedByDefault?: boolean;
+        flatList?: boolean;
+        folderIcon?: MynahIcons | MynahIconsType | null;
+        collapsed?: boolean;
         hideFileCount?: boolean;
         actions?: Record<string, FileNodeAction[]>;
         details?: Record<string, TreeNodeDetails>;
@@ -304,21 +306,14 @@ export type TextBasedFormItem = BaseFormItem & {
         patterns: ValidationPattern[];
     };
 };
-type SelectFormItem = BaseFormItem & {
-    type: 'select';
-    options: Array<{
-        value: string;
-        label: string;
-    }>;
-};
 type OtherFormItem = BaseFormItem & {
-    type: 'stars' | 'radiogroup';
+    type: 'select' | 'stars' | 'radiogroup';
     options?: Array<{
         value: string;
         label: string;
     }>;
 };
-export type ChatItemFormItem = TextBasedFormItem | SelectFormItem | OtherFormItem;
+export type ChatItemFormItem = TextBasedFormItem | OtherFormItem;
 export interface ChatPrompt {
     prompt?: string;
     escapedPrompt?: string;

package/docs/DATAMODEL.md

@@ -312,32 +312,127 @@ const mynahUI = new MynahUI({
 });
 
 mynahUI.updateStore('tab-1', {
-    contextCommands: [
+contextCommands: [
       {
-        groupName: 'Mention code',
-        commands:[
+        commands: [
           {
-            command: '@ws',
-            description: '(BETA) Reference all code in workspace.'
+            command: 'workspace',
+            icon: MynahIcons.ASTERISK,
+            placeholder: 'Yes, you selected workspace :P',
+            description: 'Reference all code in workspace.'
           },
           {
-            command: '@folder',
-            placeholder: 'mention a specific folder',
+            command: 'folder',
+            icon: MynahIcons.FOLDER,
+            children: [
+              {
+                groupName: 'Folders',
+                commands: [
+                  {
+                    command: 'src',
+                    icon: MynahIcons.FOLDER,
+                    children: [
+                      {
+                        groupName: 'src/',
+                        commands: [
+                          {
+                            command: 'index.ts',
+                            icon: MynahIcons.FILE,
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    command: 'main',
+                    description: './src/',
+                    icon: MynahIcons.FOLDER,
+                  },
+                  {
+                    command: 'src',
+                    description: './example/',
+                    icon: MynahIcons.FOLDER,
+                  }
+                ]
+              }
+            ],
+            placeholder: 'Mention a specific folder',
             description: 'All files within a specific folder'
           },
           {
-            command: '@file',
-            placeholder: 'mention a specific file',
+            command: 'file',
+            icon: MynahIcons.FILE,
+            children: [
+              {
+                groupName: 'Files',
+                commands: [
+                  {
+                    command: 'monarch.ts',
+                    description: './src/',
+                    icon: MynahIcons.FILE,
+                  },
+                  {
+                    command: '_dark.scss',
+                    description: './src/styles/',
+                    icon: MynahIcons.FILE,
+                  }
+                ]
+              }
+            ],
+            placeholder: 'Mention a specific file',
             description: 'Reference a specific file'
           },
           {
-            command: '@code',
-            placeholder: 'mention a specific file/folder, or leave blank for full project',
+            command: 'symbols',
+            icon: MynahIcons.CODE_BLOCK,
+            children: [
+              {
+                groupName: 'Symbols',
+                commands: [
+                  {
+                    command: 'DomBuilder',
+                    icon: MynahIcons.CODE_BLOCK,
+                    description: 'The DomGeneration function in dom.ts file'
+                  }
+                ]
+              }
+            ],
+            placeholder: 'Select a symbol',
             description: 'After that mention a specific file/folder, or leave blank for full project'
           },
           {
-            command: '@gitlab',
-            description: 'Ask about data in gitlab account'
+            command: 'prompts',
+            icon: MynahIcons.CHAT,
+            description: 'Saved prompts, to reuse them in your current prompt',
+            children: [
+              {
+                groupName: 'Prompts',
+                actions: [
+                  {
+                    id: 'add-new-prompt',
+                    icon: 'plus',
+                    text: 'Add',
+                    description: 'Add new prompt'
+                  }
+                ],
+                commands: [
+                  {
+                    command: 'python_expert',
+                    icon: MynahIcons.CHAT,
+                    description: 'Expert on python stuff'
+                  },
+                  {
+                    command: 'javascript_expert',
+                    icon: MynahIcons.CHAT,
+                    description: 'Expert on Javascript and typescript'
+                  },
+                  {
+                    command: 'Add Prompt',
+                    icon: MynahIcons.PLUS,
+                  }
+                ]
+              }
+            ]
           }
         ]
       }
@@ -349,7 +444,25 @@ mynahUI.updateStore('tab-1', {
   <img src="./img/data-model/tabStore/contextCommands.png" alt="contextCommands" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
 
-To see which context is used, check the incoming array in the prompt object comes with the `onChatPrompt` event.
+When hovered, context items will display a tooltip with the same information provided in the context menu list:
+
+<p align="center">
+  <img src="./img/data-model/tabStore/contextItem.png" alt="contextItem" style="max-width:140px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+Groups can have as many children as you'd like, which allows for a tree-like structure. Items with children will display a right-arrow icon when hovered / focused:
+
+<p align="center">
+  <img src="./img/data-model/tabStore/hoveredContextItem.png" alt="hoveredContextItem" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+Groups can have actions (see `add-new-prompt` action in the example code block above), which adds an action button on the top right:
+
+<p align="center">
+  <img src="./img/data-model/tabStore/groupAction.png" alt="groupAction" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+To see which context is used, check the incoming string array in the prompt object comes with the `onChatPrompt` event.
 
 ```typescript
 const mynahUI = new MynahUI({
@@ -885,7 +998,9 @@ interface ChatItemContent {
     rootFolderTitle?: string;
     filePaths?: string[];
     deletedFiles?: string[];
-    collapsedByDefault?: boolean;
+    flatList?: boolean;
+    folderIcon?: MynahIcons | MynahIconsType | null;
+    collapsed?: boolean;
     hideFileCount?: boolean;
     actions?: Record<string, FileNodeAction[]>;
     details?: Record<string, TreeNodeDetails>;
@@ -1772,8 +1887,10 @@ 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
+    // 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
+    // folderIcon: 'folder' // Specify a custom icon for folders
     actions: {
       'src/App.tsx': [
         {
@@ -1818,6 +1935,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>
@@ -2077,6 +2196,11 @@ interface ChatItemFormItem {
   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
+  validationPatterns?: {
+    operator?: 'and' | 'or';
+    genericValidationErrorMessage?: string;
+    patterns: ValidationPattern[];
+  };
   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
@@ -2089,6 +2213,8 @@ interface ChatItemFormItem {
 
 Since you can give unlimited form items with several different types, it might be good to know that some attributes are only applicable to some types. Like `options` attribute is only getting used by `select` and `radiogroup` items. Or `placeholder` is only getting used by `textarea`, `textinput` and `numericinput`.
 
+`validationPattenrs` works only for textual inputs. You can define one or more validation regex patterns, use an operator between them as `AND` or `OR`. You can show individual error messages for each validation or use one generic message if the combined validation fails (Might be useful for `OR` operator).
+
 **Another thing which might be interesting** is to know that if you set the `select` or the `radiogroup` mandatory, they'll be rendered as the first item's of them selected if you don't provide an initial value. And you cannot deselet a radio item in any case. For select, if it is mandatory there won't be the option `Please select...`
 
 

package/docs/PROPERTIES.md

@@ -528,7 +528,7 @@ This event will be fired whenever a user selects an item from the context (`@`)
 ```typescript
 ...
 onContextSelected(contextItem: QuickActionCommand) {
-  if (contextItem.command === 'add_prompt') {
+  if (contextItem.command === 'Add Prompt') {
     Log('Custom context action triggered for adding a prompt!')
     return false;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.23.0-beta.8",
+    "version": "4.23.0",
     "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

@@ -0,0 +1,9 @@
+<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>