@aws/mynah-ui 4.35.6 → 4.35.7

package/dist/static.d.ts

@@ -19,12 +19,21 @@ export interface QuickActionCommand {
     children?: QuickActionCommandGroup[];
     route?: string[];
 }
+export interface CustomQuickActionCommand extends QuickActionCommand {
+    content?: Uint8Array;
+}
 export interface QuickActionCommandGroup {
     groupName?: string;
     icon?: MynahIcons | MynahIconsType;
     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
  */
@@ -74,6 +83,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[];
@@ -157,6 +170,10 @@ export interface MynahUIDataModel {
     tabMetadata?: {
         [key: string]: string | boolean | number;
     };
+    /**
+     * Custom context commands to be inserted into the prompt input.
+     */
+    customContextCommand?: QuickActionCommand[];
 }
 export interface MynahUITabStoreTab {
     /**
@@ -213,10 +230,14 @@ export declare enum MynahEventNames {
     PROMPT_PROGRESS_ACTION_CLICK = "promptProgressActionClick",
     ROOT_RESIZE = "rootResize",
     CONTEXT_SELECTED = "contextSelected",
+    OPEN_FILE_SYSTEM = "openFileSystem",
+    ADD_CUSTOM_CONTEXT = "addCustomContext",
     TOP_BAR_ITEM_ADD = "promptInputTopBarItemAdd",
     TOP_BAR_ITEM_REMOVE = "promptInputTopBarItemRemove",
     TOP_BAR_BUTTON_CLICK = "promptInputTopBarButtonClick",
-    CONTEXT_PINNED = "contextPinned"
+    CONTEXT_PINNED = "contextPinned",
+    FILES_DROPPED = "filesDropped",
+    CONTEXT_INSERTED = "contextInserted"
 }
 export declare enum MynahPortalNames {
     WRAPPER = "wrapper",
@@ -421,6 +442,8 @@ export interface ChatItem extends ChatItemContent {
     hoverEffect?: boolean;
     status?: Status;
     shimmer?: boolean;
+    collapse?: boolean;
+    border?: boolean;
 }
 export interface ValidationPattern {
     pattern: string | RegExp;

package/docs/DATAMODEL.md

@@ -122,6 +122,10 @@ interface MynahUIDataModel {
    * application state management for that purpose.
    */
   tabMetadata?: { [key: string]: string | boolean | number };
+  /**
+   * Custom context commands to be inserted into the prompt input.
+   */
+  customContextCommand: []
 }
 ```
 
@@ -3562,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.
+
+---

package/docs/PROPERTIES.md

@@ -189,6 +189,16 @@ export interface MynahUIProps {
     tabId: string,
     topBarButton: ChatItemButton,
     eventId?: string) => void;
+  onOpenFileDialogClick?: (
+    tabId: string,
+    fileType: string,
+    insertPosition: number
+  ) => void;
+  onFilesDropped?: (
+    tabId: string,
+    files: FileList,
+    insertPosition: number
+  ) => void;
 }
 ```
 _Let's deep dive into each property you can set._
@@ -1233,3 +1243,56 @@ onPromptTopBarButtonClick?: (
     };
 ...
 ```
+
+---
+
+### `onOpenFileDialogClick`
+
+This event will be fired when the user triggers the open file dialog action (for example, by typing `@image:`). It passes the `tabId` of the current tab, the `fileType` (such as 'image', 'file', etc.), and the `insertPosition` indicating where in the prompt input the file should be inserted.
+
+```typescript
+...
+onOpenFileDialogClick?: (
+  tabId: string,
+  fileType: string,
+  insertPosition: number
+) => void;
+...
+```
+
+**Example:**
+```typescript
+onOpenFileDialogClick: (tabId, fileType, insertPosition) => {
+  console.log(`Open file dialog for type '${fileType}' in tab '${tabId}' at position ${insertPosition}`);
+  // You can open your own file picker here
+},
+```
+
+---
+
+### `onFilesDropped`
+
+This event will be fired when the user drops files into the chat window. It passes the `tabId` of the current tab, the `files` (as a FileList), and the `insertPosition` indicating where in the prompt input the files should be inserted.
+
+```typescript
+...
+onFilesDropped?: (
+  tabId: string,
+  files: FileList,
+  insertPosition: number
+) => void;
+...
+```
+
+**Example:**
+```typescript
+onFilesDropped: (tabId, files, insertPosition) => {
+  console.log(`Files dropped in tab '${tabId}' at position ${insertPosition}`);
+  for (const file of files) {
+    console.log(`File: ${file.name}`);
+  }
+  // Handle the dropped files as needed
+},
+```
+
+---

package/docs/USAGE.md

@@ -29,6 +29,7 @@ mynahUI.notify(...);
 mynahUI.showCustomForm(...);
 mynahUI.updateTabDefaults(...);
 mynahUI.toggleSplashLoader(...);
+mynahUI.addCustomContextToPrompt(...);
 mynahUI.destroy();
 ```
 
@@ -678,4 +679,34 @@ The overlay will appear positioned relative to the specified top bar button, dis
 
 <p align="center">
   <img src="./img/topBarButtonOverlay.png" alt="Top Bar Button Overlay" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
-</p>
+</p>
+
+# Adding Custom Context to Prompt (`addCustomContextToPrompt`)
+
+You can programmatically add custom context items to the prompt input of a specific tab using the `addCustomContextToPrompt` function. This is useful for injecting custom context directly into the user's prompt field, and ensures the context is also tracked in the tab's data store.
+
+```typescript
+mynahUI.addCustomContextToPrompt(
+  tabId, // The ID of the tab to add the context to
+  [
+    {
+      command: 'sampleimage.png',
+      label: 'image',
+      description: 'This is a custom context item.',
+      icon: MynahIcons.IMAGE,
+    },
+    // ... more QuickActionCommand objects if needed
+  ],
+  0 // (Optional) Insert position in the prompt input. If omitted, appends to the end.
+);
+```
+
+- **tabId**: The string ID of the tab where the context should be added.
+- **contextItem**: An array of `QuickActionCommand` objects to insert. Each object can include `command`, `label`, `description`, `icon`, and other properties as defined in the data model.
+- **insertPosition** (optional): The position in the prompt input where the context should be inserted. If not provided, the context is appended to the end.
+
+When called, this function will:
+- Insert the provided context items as context pills in the prompt input field of the specified tab.
+- Update the tab's data store so that the custom context is tracked and can be referenced or removed later.
+
+**Note:** If the prompt input is not currently visible or the tab does not exist, the function will have no effect.

package/package.json

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