@aws/mynah-ui 4.36.0-beta.1 → 4.36.1

package/dist/static.d.ts

@@ -237,7 +237,7 @@ export declare enum MynahEventNames {
     TOP_BAR_BUTTON_CLICK = "promptInputTopBarButtonClick",
     CONTEXT_PINNED = "contextPinned",
     FILES_DROPPED = "filesDropped",
-    CONTEXT_INSERTED = "contextInserted"
+    RESET_TOP_BAR_CLICKED = "resetTopBarClicked"
 }
 export declare enum MynahPortalNames {
     WRAPPER = "wrapper",
@@ -459,6 +459,7 @@ interface BaseFormItem {
     description?: string;
     tooltip?: string;
     icon?: MynahIcons | MynahIconsType;
+    boldTitle?: boolean;
 }
 export type TextBasedFormItem = BaseFormItem & {
     type: 'textarea' | 'textinput' | 'numericinput' | 'email';
@@ -469,6 +470,7 @@ export type TextBasedFormItem = BaseFormItem & {
         genericValidationErrorMessage?: string;
         patterns: ValidationPattern[];
     };
+    validateOnChange?: boolean;
 };
 type DropdownFormItem = BaseFormItem & {
     type: 'select';
@@ -477,7 +479,10 @@ type DropdownFormItem = BaseFormItem & {
     options?: Array<{
         value: string;
         label: string;
+        description?: string;
     }>;
+    disabled?: boolean;
+    selectTooltip?: string;
 };
 type Stars = BaseFormItem & {
     type: 'stars';
@@ -512,6 +517,7 @@ export interface ListFormItem {
     description?: string;
     tooltip?: string;
     icon?: MynahIcons | MynahIconsType;
+    boldTitle?: boolean;
     items: SingularFormItem[];
     value: ListItemEntry[];
 }
@@ -695,6 +701,7 @@ export interface ConfigTexts {
     add: string;
     pleaseSelect: string;
     stopGenerating: string;
+    stopGeneratingTooltip?: string;
     copyToClipboard: string;
     noMoreTabsTooltip: string;
     codeSuggestionWithReferenceTitle: string;
@@ -705,6 +712,8 @@ export interface ConfigTexts {
     noTabsOpen: string;
     openNewTab: string;
     commandConfirmation: string;
+    pinContextHint: string;
+    dragOverlayText: string;
 }
 type PickMatching<T, V> = {
     [K in keyof T as T[K] extends V ? K : never]: T[K];
@@ -737,6 +746,8 @@ export interface ConfigOptions {
     codeInsertToCursorEnabled?: boolean;
     codeCopyToClipboardEnabled?: boolean;
     test?: boolean;
+    dragOverlayIcon?: MynahIcons | MynahIconsType | CustomIcon;
+    enableSearchKeyboardShortcut?: boolean;
 }
 export interface ConfigModel extends ConfigOptions {
     texts: Partial<ConfigTexts>;

package/docs/CONFIG.md

@@ -37,6 +37,8 @@ interface ConfigModel {
         noTabsOpen: string; // Supports markdown
         openNewTab: string;
         commandConfirmation: string;
+        pinContextHint: string;
+        dragOverlayText: string;
     };
     // Options to show up on the overlay feedback form
     // after user clicks to downvote on a chat item
@@ -53,6 +55,8 @@ interface ConfigModel {
     autoFocus: boolean; // auto focuses to input panel after every action
     maxTabs: number; // set 1 to hide tabs panel
     showPromptField: boolean; // shows prompt field (default: true)
+    dragOverlayIcon?: MynahIcons | MynahIconsType | CustomIcon; // icon displayed in the overlay when a file is dragged into the chat area
+    enableSearchKeyboardShortcut?: boolean; // if true, calls onSearchShortcut on Command + f or Ctrl + f (default: false)
 }
 ...
 ```
@@ -209,6 +213,16 @@ Default tab title text if it is not set through store data for that tab.
   <img src="./img/texts/commandConfirmation.png" alt="commandConfirmation" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
 
+## pinContextHint
+<p align="center">
+  <img src="./img/texts/pinContextHint.png" alt="pinContextHint" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+---
+
+## dragOverlayText
+<p align="center">
+  <img src="./img/texts/dragOverlayText.png" alt="dragOverlayText" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
 ---
 
 <p><br/></p>
@@ -377,4 +391,27 @@ _If you set `showPromptField` to `false`_
 
 <p align="center">
   <img src="./img/noPrompt.png" alt="noPrompt" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
-</p>
+</p>
+
+---
+
+## dragOverlayIcon
+
+**Type:** `MynahIcons | MynahIconsType | CustomIcon`
+
+**Description:**
+Specifies the icon to display in the drag-and-drop overlay for adding files (such as images) to the chat context. This allows consumers to customize the overlay icon.
+
+**Default:** `MynahIcons.IMAGE`
+
+<p align="center">
+  <img src="./img/dragOverlayIcon.png" alt="noPrompt" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+## enableSearchKeyboardShortcut
+
+**Type:** `boolean`
+
+When set to `true`, this option enables capturing the search keyboard shortcut. When enabled, pressing Command+F (Mac) or Ctrl+F (Windows/Linux) will trigger the `onSearchShortcut` event instead of the browser's default search behavior. This allows implementing custom search functionality within the chat interface.
+
+Default: `false`

package/docs/DATAMODEL.md

@@ -1170,12 +1170,14 @@ interface BaseFormItem {
   description?: string;
   tooltip?: string;
   icon?: MynahIcons | MynahIconsType;
+  boldTitle?: boolean;
 }
 
 export type TextBasedFormItem = BaseFormItem & {
   type: 'textarea' | 'textinput' | 'numericinput' | 'email';
   autoFocus?: boolean;
   checkModifierEnterKeyPress?: boolean;
+  validateOnChange?: boolean;
   validationPatterns?: {
     operator?: 'and' | 'or';
     genericValidationErrorMessage?: string;
@@ -1190,7 +1192,10 @@ type DropdownFormItem = BaseFormItem & {
   options?: Array<{
     value: string;
     label: string;
+    description?: string;
   }>;
+  disabled?: boolean;
+  selectTooltip?: string;
 };
 
 type Stars = BaseFormItem & {
@@ -2802,10 +2807,15 @@ interface ChatItemFormItem {
   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
+  validateOnChange?: boolean; // Only applicable to text input: whether the form should validate on this field's change. If this field is false (or not set), form will validate onBlur by default
   options?: Array<{ // Only applicable to select and radiogroup types
     value: string;
     label: string;
+    description?: string; // Only applicable to select types. This will add a description below the label to add more context for the option
   }>;
+  disabled?: boolean; // this is only applicable to DropDownFormItem. If this is set to true, the dropdown is disabled. User cannot use the dropdown.
+  boldTitle?: boolean; // this will make the title of the input bold
+  selectTooltip?: string; // this is only applicable to DropDownFormItem. This will make the tooltip float right above the dropdown, not the wrapper object (or the title to be specific)
 }
 ```
 
@@ -2813,8 +2823,9 @@ Since you can give unlimited form items with several different types, it might b
 
 `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...`
+**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...`. 
 
+**Important note for DropdownFormItem:** If you set `disabled` to `true` for `DropdownFormItem`, the dropdown will be disabled and the user cannot interact with it. When you have a default value and want to ensure it's always displayed, you can combine `mandatory: true` with `disabled: true` - this will automatically select and display the first value in `options` while preventing user interaction.
 
 _**NOTE**: If you set `options` for `textinput` for example, it won't affect the textinput to be rendered and work properly._
 

package/docs/PROPERTIES.md

@@ -1296,3 +1296,23 @@ onFilesDropped: (tabId, files, insertPosition) => {
 ```
 
 ---
+
+### `onSearchShortcut`
+
+This event will be fired when the user presses Command+F (Mac) or Ctrl+F (Windows/Linux). It passes the `tabId` of the current tab and the `eventId` for tracking user intent. This allows the consumer to implement custom search functionality when the standard browser search shortcut is pressed.
+
+```typescript
+...
+onSearchShortcut?: (
+    tabId: string,
+    eventId?: string) => void;
+...
+```
+
+**Example:**
+```typescript
+onSearchShortcut: (tabId, eventId) => {
+  console.log(`Search shortcut triggered in tab: ${tabId}`);
+  // Implement custom search functionality, such as opening a history sheet
+},
+```

package/docs/USAGE.md

@@ -30,6 +30,8 @@ mynahUI.showCustomForm(...);
 mynahUI.updateTabDefaults(...);
 mynahUI.toggleSplashLoader(...);
 mynahUI.addCustomContextToPrompt(...);
+mynahUI.resetTopBarClicked(...);
+mynahUI.setDragOverlayVisible(...);
 mynahUI.destroy();
 ```
 
@@ -710,3 +712,40 @@ When called, this function will:
 - 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.
+
+---
+
+# Show or hide the drag-and-drop overlay (`setDragOverlayVisible`)
+
+Show or hide the drag-and-drop overlay for a specific tab programmatically.
+
+**Signature:**
+```ts
+setDragOverlayVisible(tabId: string, visible: boolean): void
+```
+
+- `tabId`: The ID of the tab for which to show/hide the overlay.
+- `visible`: `true` to show the overlay, `false` to hide it.
+
+**Example:**
+```ts
+mynahUI.setDragOverlayVisible('tab-1', true);  // Show overlay
+mynahUI.setDragOverlayVisible('tab-1', false); // Hide overlay
+```
+
+---
+# Reset Top Bar Clicked Method (`resetTopBarClicked`)
+
+Programmatically resets topBarClicked for the specified tab by dispatching a RESET_TOP_BAR_CLICKED event. This is useful for scenarios like drag-and-drop
+
+**Signature:**
+```ts
+resetTopBarClicked(tabId: string): void
+```
+
+- `tabId`: The ID of the tab for which to reset the top bar overlay.
+
+**Example:**
+```ts
+mynahUI.resetTopBarClicked('tab-1');
+```

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.36.0-beta.1",
+    "version": "4.36.1",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",
@@ -73,6 +73,7 @@
         "@types/glob": "7.1.3",
         "@types/jest": "^29.5.5",
         "@types/json-schema": "7.0.7",
+        "@types/minimatch": "^5.1.2",
         "@types/node": "17.0.29",
         "@types/sanitize-html": "^2.11.0",
         "@typescript-eslint/eslint-plugin": "^5.34.0",