@aws/mynah-ui 4.36.3 → 4.36.4

package/dist/static.d.ts

@@ -219,6 +219,8 @@ export declare enum MynahEventNames {
     FILE_ACTION_CLICK = "fileActionClick",
     TAB_FOCUS = "tabFocus",
     CUSTOM_FORM_ACTION_CLICK = "customFormActionClick",
+    DROPDOWN_OPTION_CHANGE = "dropdownOptionChange",
+    DROPDOWN_LINK_CLICK = "dropdownLinkClick",
     PROMPT_INPUT_OPTIONS_CHANGE = "promptInputOptionsChange",
     PROMPT_INPUT_BUTTON_CLICK = "promptInputButtonClick",
     FORM_MODIFIER_ENTER_PRESS = "formModifierEnterPress",
@@ -361,6 +363,29 @@ export interface TreeNodeDetails {
     clickable?: boolean;
     data?: Record<string, string>;
 }
+export interface DropdownListOption {
+    id: string;
+    label: string;
+    value: string;
+    selected?: boolean;
+}
+export interface DropdownListProps {
+    description?: string;
+    descriptionLink?: {
+        id: string;
+        text: string;
+        destination: string;
+        onClick?: () => void;
+    };
+    options: DropdownListOption[];
+    onChange?: (selectedOptions: DropdownListOption[]) => void;
+    tabId?: string;
+    messageId?: string;
+    classNames?: string[];
+}
+export interface DropdownFactoryProps extends DropdownListProps {
+    type: 'select' | 'radio' | 'checkbox';
+}
 export interface ChatItemContent {
     header?: (ChatItemContent & {
         icon?: MynahIcons | MynahIconsType | CustomIcon;
@@ -423,6 +448,7 @@ export interface ChatItemContent {
     tabbedContent?: Array<ToggleOption & {
         content: ChatItemContent;
     }> | null;
+    quickSettings?: DropdownFactoryProps | null;
     codeBlockActions?: CodeBlockActions | null;
     fullWidth?: boolean;
     padding?: boolean;

package/docs/DATAMODEL.md

@@ -1370,6 +1370,7 @@ interface ChatItemContent {
     content: ChatItemContent;
   }> | null;
   codeBlockActions?: CodeBlockActions | null;
+  quickSettings?: DropdownFactoryProps | null;
   fullWidth?: boolean;
   padding?: boolean;
   wrapCodes?: boolean;
@@ -2315,6 +2316,105 @@ mynahUI.addChatItem(tabId, {
 
 ---
 
+## `quickSettings`
+This parameter allows you to add a dropdown selector to the footer of a chat item card. The `quickSettings` component provides a flexible dropdown interface that can be extended for different form item types in the future (radio buttons, checkboxes, etc.).
+
+Currently, it supports the `select` type for single-selection dropdowns with visual feedback and customizable options.
+
+The `DropdownList` component provides a customizable dropdown selector that allows users to choose from a list of options. It supports single selection with visual feedback and can be positioned relative to its parent elements.
+
+```typescript
+interface DropdownListOption {
+  id: string;      // Unique identifier for the option
+  label: string;   // Display text for the option
+  value: string;   // Value associated with the option
+  selected?: boolean; // Whether the option is initially selected
+}
+
+interface DropdownFactoryProps {
+  type: 'select';              // Type of dropdown (currently only 'select', extensible for 'radio', 'checkbox', etc.)
+  title: string;               // The title displayed in the dropdown header
+  titleIcon?: MynahIcons;      // Icon displayed next to the title
+  description?: string;        // Description text displayed below the title
+  descriptionLink?: {          // Optional clickable link that appears within the description text
+    id: string;                // Unique identifier for the link
+    text: string;              // Display text for the link
+    destination: string;       // Link destination
+    onClick?: () => void;      // Optional callback function triggered when the link is clicked
+  };
+  options: DropdownListOption[]; // Array of options to display in the dropdown
+  onChange?: (selectedOptions: DropdownListOption[]) => void; // Callback when selection changes
+  tabId?: string;              // Tab identifier for event dispatching
+  messageId?: string;          // Message identifier for event dispatching
+  classNames?: string[];       // Additional CSS class names to apply
+}
+```
+
+When a dropdown option is selected, the component dispatches a `MynahEventNames.DROPDOWN_OPTION_CHANGE` event with the selected options. You can handle this event by implementing the [`onDropDownOptionChange`](./PROPERTIES.md#ondropdownoptionchange) callback in your MynahUI constructor properties.
+
+When a link in the dropdown description is clicked, the component dispatches a `MynahEventNames.DROP_DOWN_LINK_CLICK` event. You can handle this event by implementing the [`onDropDownLinkClick`](./PROPERTIES.md#ondropdownlinkclick) callback in your MynahUI constructor properties.
+
+```typescript
+const mynahUI = new MynahUI({
+    tabs: {
+        'tab-1': {
+            ...
+        }
+    }
+});
+
+mynahUI.addChatItem('tab-1', {
+    type: ChatItemType.ANSWER,
+    messageId: 'dropdown-example',
+    body: 'Please select your preferred option:',
+    quickSettings: {
+        type: 'select',
+        title: 'Select an option',
+        description: 'Choose one of the following options',
+        tabId: 'tab-1',
+        messageId: 'dropdown-example',
+        options: [
+            { id: 'option1', label: 'Option 1', value: 'option1', selected: false },
+            { id: 'option2', label: 'Option 2', value: 'option2', selected: true },
+            { id: 'option3', label: 'Option 3', value: 'option3', selected: false }
+        ]
+    }
+});
+
+// Example with descriptionLink
+mynahUI.addChatItem('tab-1', {
+    type: ChatItemType.ANSWER,
+    messageId: 'dropdown-with-link-example',
+    body: 'Configure your settings:',
+    quickSettings: {
+        type: 'select',
+        title: 'Model Selection',
+        description: 'Choose your preferred AI model. Need help choosing?',
+        descriptionLink: {
+            id: 'model-help-link',
+            text: 'Learn more about models',
+            onClick: () => {
+                console.log('Help link clicked - opening model documentation');
+                // Handle the link click, e.g., open documentation or show help dialog
+            }
+        },
+        tabId: 'tab-1',
+        messageId: 'dropdown-with-link-example',
+        options: [
+            { id: 'gpt4', label: 'GPT-4', value: 'gpt4', selected: true },
+            { id: 'claude', label: 'Claude', value: 'claude', selected: false },
+            { id: 'llama', label: 'Llama', value: 'llama', selected: false }
+        ]
+    }
+});
+```
+
+<p align="center">
+  <img src="./img/data-model/chatItems/dropdown-list.png" alt="QuickSettings dropdown" style="max-width:300px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
 ## `footer`
 With this parameter, you can add another `ChatItem` only with contents to the footer of a ChatItem. 
 
@@ -3660,7 +3760,6 @@ export interface DetailedListItem {
   children?: DetailedListItemGroup[];
   keywords?: string[];
 }
-}
 ```
 
 ---
@@ -3698,4 +3797,4 @@ mynahUI.updateStore('tab-1', {
 
 The header will appear above the quick action commands list and provides information to users about new features.
 
----
+---

package/docs/PROPERTIES.md

@@ -989,6 +989,53 @@ onFormChange?: (
 ...
 ```
 
+---
+
+### `onDropDownOptionChange`
+
+This event will be fired when a user selects an option from a dropdown list. It passes the `tabId`, `messageId`, and the selected options.
+
+```typescript
+...
+onDropDownOptionChange?: (
+    tabId: string,
+    messageId: string,
+    selectedOptions: DropdownListOption[]): void => {
+      console.log(`Dropdown selection changed in tab: ${tabId}`);
+      console.log(`From message: ${messageId}`);
+      console.log(`Selected option: ${selectedOptions[0].label}`);
+    };
+...
+```
+
+<p align="center">
+  <img src="./img/onDropDownOptionChange.png" alt="Dropdown List" style="max-width:300px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+### `onDropDownLinkClick`
+
+This event will be fired when a user clicks on a link within a dropdown list's description. It passes the `tabId` and the `actionId` of the clicked link.
+
+```typescript
+...
+onDropDownLinkClick?: (
+    tabId: string,
+    destination: string,
+    actionId: string): void => {
+      console.log(`Dropdown link clicked in tab: ${tabId}`);
+      console.log(`Link action ID: ${actionId}`);
+      console.log(`Destination ID: ${destination}`);
+    };
+...
+```
+
+<p align="center">
+  <img src="./img/onDropDownLinkClick.png" alt="Dropdown List" style="max-width:300px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+
 ---
 
 ### `onCustomFormAction`

package/package.json

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