@aws/mynah-ui 4.17.1 → 4.18.1-beta.1

package/dist/static.d.ts

@@ -4,7 +4,7 @@
  */
 import { MynahIcons } from './components/icon';
 import { ChatItemBodyRenderer } from './helper/dom';
-import { SelectAbstract, SelectProps, RadioGroupAbstract, RadioGroupProps, ButtonAbstract, ButtonProps, TextInputProps, TextInputAbstract, TextAreaProps, TextAreaAbstract } from './main';
+import { SelectAbstract, SelectProps, RadioGroupAbstract, RadioGroupProps, ButtonAbstract, ButtonProps, TextInputProps, TextInputAbstract, TextAreaProps, TextAreaAbstract, ToggleOption } from './main';
 export interface QuickActionCommand {
     command: string;
     disabled?: boolean;
@@ -24,6 +24,10 @@ export interface MynahUIDataModel {
      * Tab title
      * */
     tabTitle?: string;
+    /**
+     * Tab title
+     * */
+    tabBackground?: boolean;
     /**
      * If tab is running an action (loadingChat = true) this markdown will be shown before close in a popup
      */
@@ -61,6 +65,18 @@ export interface MynahUIDataModel {
     */
     promptInputPlaceholder?: string;
     /**
+    * Prompt input text
+    */
+    promptInputText?: string;
+    /**
+      * Label to be shown on top of the prompt input
+      */
+    promptInputLabel?: string | null;
+    /**
+      * Label to be shown on top of the prompt input
+      */
+    promptInputVisible?: boolean;
+    /**
     * Info block to be shown under prompt input
     */
     promptInputInfo?: string;
@@ -88,6 +104,14 @@ export interface MynahUIDataModel {
      * Tab bar buttons next to the tab items
      */
     tabBarButtons?: TabBarMainAction[];
+    /**
+     * Tab content compact mode which keeps everything in the middle
+     */
+    compactMode?: boolean;
+    /**
+     * Tab content header details, only visibile when showTabHeaderDetails is set to 'true'
+     */
+    tabHeaderDetails?: TabHeaderDetails | null;
 }
 export interface MynahUITabStoreTab {
     /**
@@ -120,6 +144,7 @@ export declare enum MynahEventNames {
     CHAT_ITEM_ADD = "chatItemAdd",
     FOLLOW_UP_CLICKED = "followUpClicked",
     BODY_ACTION_CLICKED = "bodyActionClicked",
+    TABBED_CONTENT_SWITCH = "tabbedContentSwitch",
     SHOW_MORE_WEB_RESULTS_CLICK = "showMoreWebResultsClick",
     SHOW_FEEDBACK_FORM = "showFeedbackForm",
     FILE_CLICK = "fileClick",
@@ -192,19 +217,20 @@ export interface TreeNodeDetails {
     icon?: MynahIcons;
     label?: string;
     description?: string;
+    clickable?: boolean;
 }
 export interface ChatItemContent {
-    body?: string;
-    customRenderer?: string | ChatItemBodyRenderer | ChatItemBodyRenderer[];
+    body?: string | null;
+    customRenderer?: string | ChatItemBodyRenderer | ChatItemBodyRenderer[] | null;
     followUp?: {
         text?: string;
         options?: ChatItemAction[];
-    };
+    } | null;
     relatedContent?: {
         title?: string;
         content: SourceLink[];
-    };
-    codeReference?: ReferenceTrackerInformation[];
+    } | null;
+    codeReference?: ReferenceTrackerInformation[] | null;
     fileList?: {
         fileTreeTitle?: string;
         rootFolderTitle?: string;
@@ -212,10 +238,10 @@ export interface ChatItemContent {
         deletedFiles?: string[];
         actions?: Record<string, FileNodeAction[]>;
         details?: Record<string, TreeNodeDetails>;
-    };
-    buttons?: ChatItemButton[];
-    formItems?: ChatItemFormItem[];
-    footer?: ChatItemContent;
+    } | null;
+    buttons?: ChatItemButton[] | null;
+    formItems?: ChatItemFormItem[] | null;
+    footer?: ChatItemContent | null;
     informationCard?: {
         title?: string;
         status?: {
@@ -226,8 +252,11 @@ export interface ChatItemContent {
         description?: string;
         icon?: MynahIcons;
         content: ChatItemContent;
-    };
-    codeBlockActions?: CodeBlockActions;
+    } | null;
+    tabbedContent?: Array<ToggleOption & {
+        content: ChatItemContent;
+    }> | null;
+    codeBlockActions?: CodeBlockActions | null;
 }
 export interface ChatItem extends ChatItemContent {
     type: ChatItemType;
@@ -235,6 +264,7 @@ export interface ChatItem extends ChatItemContent {
     snapToTop?: boolean;
     canBeVoted?: boolean;
     icon?: MynahIcons;
+    hoverEffect?: boolean;
     status?: Status;
 }
 export interface ChatItemFormItem {
@@ -270,8 +300,10 @@ export interface ChatItemButton {
     id: string;
     disabled?: boolean;
     description?: string;
-    status?: 'primary' | Status;
+    status?: 'main' | 'primary' | 'clear' | Status;
+    flash?: 'infinite' | 'once';
     icon?: MynahIcons;
+    position?: 'inside' | 'outside';
 }
 export interface TabBarAction {
     text?: string;
@@ -382,12 +414,18 @@ export declare enum NotificationType {
     WARNING = "warning",
     ERROR = "error"
 }
+export interface TabHeaderDetails {
+    icon?: MynahIcons;
+    title?: string;
+    description?: string;
+}
 export interface CodeBlockAction {
     id: 'copy' | 'insert-to-cursor' | string;
     label: string;
     description?: string;
     icon?: MynahIcons;
     data?: any;
+    flash?: 'infinite' | 'once';
     acceptedLanguages?: string[];
 }
 export type CodeBlockActions = Record<'copy' | 'insert-to-cursor' | string, CodeBlockAction | undefined | null>;
@@ -419,6 +457,7 @@ export interface ConfigTexts {
     tabCloseConfirmationCloseButton: string;
     noTabsOpen: string;
     openNewTab: string;
+    commandConfirmation: string;
 }
 type PickMatching<T, V> = {
     [K in keyof T as T[K] extends V ? K : never]: T[K];

package/docs/CONFIG.md

@@ -35,6 +35,7 @@ interface ConfigModel {
         tabCloseConfirmationCloseButton?: string;
         noTabsOpen: string; // Supports markdown
         openNewTab: string;
+        commandConfirmation: string;
     };
     // Options to show up on the overlay feedback form
     // after user clicks to downvote on a chat item
@@ -202,6 +203,13 @@ Default tab title text if it is not set through store data for that tab.
 
 ---
 
+## commandConfirmation
+<p align="center">
+  <img src="./img/texts/commandConfirmation.png" alt="commandConfirmation" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
 <p><br/></p>
 
 # `feedbackOptions`
@@ -321,6 +329,9 @@ With this parameter, you can add global code block actions to the code blocks. B
 ### Note
 If you want to show that action only for certain coding languages, you can set the array for `acceptedLanguages` parameter. Keep in mind that it will check an exact mathc. If the incoming language is same with one of the acceptedLanguages list, it will show the action.
 
+#### flash
+You can also make the code block actions flash once or foverer when user hovers the the containing card. Until user hovers to the action itself, whenever they hover to the card it will flash the code block action. It you set it to `once` it will only flash once for every hover to the container card, if you set it to `infinite` it will keep flashing forever every 3 seconds until user hovers to the action itself. Whe user hovers to the action, it will not flash again.
+
 #### By default, we add `copy` and `insert to cursor position` ones:
 
 ```typescript