@aws/mynah-ui 4.15.11 → 4.16.0

package/.eslintrc.js

@@ -1,50 +1,37 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "standard-with-typescript"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "project": "./tsconfig.json",
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "prettier"
-  ],
-  "rules": {
-    "no-case-declarations": "off",
-    "@typescript-eslint/no-floating-promises": "off",
-    "@typescript-eslint/semi": [
-      2,
-      "always"
-    ],
-    "comma-dangle": [
-      2,
-      "only-multiline"
-    ],
-    "array-bracket-spacing": [
-      2,
-      "always"
-    ],
-    "no-useless-call": "off",
-    "@typescript-eslint/member-delimiter-style": [
-      "error",
-      {
-        "multiline": {
-          "delimiter": "semi",
-          "requireLast": true
-        },
-        "singleline": {
-          "delimiter": "semi",
-          "requireLast": false
-        }
-      }
-    ]
-  }
-}
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+    },
+    extends: ['standard-with-typescript'],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        tsconfigRootDir: __dirname,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        project: ['./tsconfig.json', './ui-tests/tsconfig.json'],
+    },
+    plugins: ['@typescript-eslint', 'prettier'],
+    rules: {
+        'no-case-declarations': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/semi': [2, 'always'],
+        'comma-dangle': [2, 'only-multiline'],
+        'array-bracket-spacing': [2, 'always'],
+        'no-useless-call': 'off',
+        '@typescript-eslint/member-delimiter-style': [
+            'error',
+            {
+                multiline: {
+                    delimiter: 'semi',
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: 'semi',
+                    requireLast: false,
+                },
+            },
+        ],
+    },
+};

package/.husky/pre-push

@@ -0,0 +1,3 @@
+npm run lint
+npm run format:check
+npm run tests:e2e

package/.prettierignore

@@ -0,0 +1,9 @@
+*.*ts
+*.md
+package-lock.json
+.github
+.husky
+api-docs
+docs
+dist
+build

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "semi": true,
+    "bracketSpacing": true,
+    "endOfLine": "lf"
+}

package/README.md

@@ -30,9 +30,10 @@ Mynah UI operates independently of any framework or UI library, enabling seamles
 > Local environment quick start
  ```console
  git clone git@github.com:aws/mynah-ui.git
- cd mynah-ui
- npm run dev
+ cd mynah-ui && npm install
+ cd example && npm install
 ```
+Now run `npm watch` in both the `mynah-ui` and the `example` directories, and open `mynah-ui/example/dist/index.html` in a browser of choice.
 
 #### Guides and documentation
 Please refer to the following guides:

package/dist/components/button.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps {
     classNames?: string[];
     attributes?: Record<string, string>;
     icon?: HTMLElement | ExtendedHTMLElement;
+    testId?: string;
     label?: HTMLElement | ExtendedHTMLElement | string;
     tooltip?: string;
     tooltipVerticalDirection?: OverlayVerticalDirection;

package/dist/components/card/card-body.d.ts

@@ -19,6 +19,7 @@ export declare const PARTS_CLASS_NAME = "typewriter-part";
 export declare const PARTS_CLASS_NAME_VISIBLE = "typewriter";
 export interface CardBodyProps {
     body?: string;
+    testId?: string;
     children?: Array<ExtendedHTMLElement | HTMLElement | string | DomBuilderObject>;
     childLocation?: 'above-body' | 'below-body';
     highlightRangeWithTooltip?: ReferenceTrackerInformation[];

package/dist/components/chat-item/chat-item-buttons.d.ts

@@ -6,11 +6,11 @@ import { ExtendedHTMLElement } from '../../helper/dom';
 import { ChatItemButton } from '../../static';
 import { ChatItemFormItemsWrapper } from './chat-item-form-items';
 export interface ChatItemButtonsWrapperProps {
-    tabId: string;
+    tabId?: string;
     classNames?: string[];
     buttons: ChatItemButton[];
-    formItems: ChatItemFormItemsWrapper | null;
-    onActionClick: (action: ChatItemButton, e?: Event) => void;
+    formItems?: ChatItemFormItemsWrapper | null;
+    onActionClick?: (action: ChatItemButton, e?: Event) => void;
 }
 export declare class ChatItemButtonsWrapper {
     private readonly props;

package/dist/components/chat-item/chat-item-card-content.d.ts

@@ -7,6 +7,7 @@ import { CardRenderDetails, CodeBlockActions, OnCodeBlockActionFunction, OnCopie
 import { CardBody } from '../card/card-body';
 export interface ChatItemCardContentProps {
     body?: string;
+    testId?: string;
     renderAsStream?: boolean;
     classNames?: string[];
     codeReference?: ReferenceTrackerInformation[];

package/dist/components/chat-item/chat-prompt-input.d.ts

@@ -6,6 +6,7 @@ import { ExtendedHTMLElement } from '../../helper/dom';
 import { PromptAttachmentType } from '../../static';
 export declare const MAX_USER_INPUT_THRESHOLD = 96;
 export declare const MAX_USER_INPUT: () => number;
+export declare const INPUT_LENGTH_WARNING_THRESHOLD: () => number;
 export interface ChatPromptInputProps {
     tabId: string;
 }
@@ -15,9 +16,11 @@ export declare class ChatPromptInput {
     private readonly attachmentWrapper;
     private readonly promptTextInput;
     private readonly promptTextInputCommand;
-    private readonly remainingCharsIndicator;
     private readonly sendButton;
+    private readonly progressIndicator;
     private readonly promptAttachment;
+    private readonly chatPrompt;
+    private remainingCharsOverlay;
     private quickPickTriggerIndex;
     private quickPickType;
     private textAfter;

package/dist/components/chat-item/prompt-input/prompt-progress.d.ts

@@ -0,0 +1,11 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+export interface PromptInputProgressProps {
+    tabId: string;
+}
+export declare class PromptInputProgress {
+    render: ExtendedHTMLElement;
+    private readonly progressIndicator;
+    private progressData;
+    private readonly props;
+    constructor(props: PromptInputProgressProps);
+}

package/dist/components/chat-item/prompt-input/prompt-text-input.d.ts

@@ -7,6 +7,7 @@ export interface PromptTextInputProps {
     onKeydown: (e: KeyboardEvent) => void;
     onInput?: (e: KeyboardEvent) => void;
     onFocus?: () => void;
+    onBlur?: () => void;
 }
 export declare class PromptTextInput {
     render: ExtendedHTMLElement;

package/dist/components/collapsible-content.d.ts

@@ -6,6 +6,7 @@ import { DomBuilderObject, ExtendedHTMLElement } from '../helper/dom';
 import '../styles/components/_collapsible-content.scss';
 interface CollapsibleContentProps {
     title: string | ExtendedHTMLElement | HTMLElement | DomBuilderObject;
+    testId?: string;
     children: Array<string | ExtendedHTMLElement | HTMLElement | DomBuilderObject>;
     classNames?: string[];
     initialCollapsedState?: boolean;

package/dist/components/form-items/radio-group.d.ts

@@ -16,6 +16,8 @@ export interface RadioGroupProps {
     optional?: boolean;
     options?: SelectOption[];
     onChange?: (value: string) => void;
+    wrapperTestId?: string;
+    optionTestId?: string;
 }
 export declare abstract class RadioGroupAbstract {
     render: ExtendedHTMLElement;

package/dist/components/form-items/select.d.ts

@@ -19,6 +19,8 @@ export interface SelectProps {
     options?: SelectOption[];
     placeholder?: string;
     onChange?: (value: string) => void;
+    wrapperTestId?: string;
+    optionTestId?: string;
 }
 export declare abstract class SelectAbstract {
     render: ExtendedHTMLElement;

package/dist/components/form-items/stars.d.ts

@@ -12,6 +12,8 @@ export interface StarsProps {
     value?: string;
     onChange?: (value: string) => void;
     initStar?: StarValues;
+    wrapperTestId?: string;
+    optionTestId?: string;
 }
 export declare class Stars {
     private readonly starsContainer;

package/dist/components/form-items/text-area.d.ts

@@ -11,6 +11,7 @@ export interface TextAreaProps {
     placeholder?: string;
     value?: string;
     onChange?: (value: string) => void;
+    testId?: string;
 }
 export declare abstract class TextAreaAbstract {
     render: ExtendedHTMLElement;

package/dist/components/form-items/text-input.d.ts

@@ -12,6 +12,7 @@ export interface TextInputProps {
     type?: 'text' | 'number' | 'email';
     value?: string;
     onChange?: (value: string) => void;
+    testId?: string;
 }
 export declare abstract class TextInputAbstract {
     render: ExtendedHTMLElement;

package/dist/components/icon.d.ts

@@ -55,7 +55,14 @@ export declare enum MynahIcons {
     CURSOR_INSERT = "cursor-insert",
     TEXT_SELECT = "text-select",
     REVERT = "revert",
-    ASTERISK = "asterisk"
+    ASTERISK = "asterisk",
+    BUG = "bug",
+    CHECK_LIST = "check-list",
+    DEPLOY = "deploy",
+    HELP = "help",
+    MESSAGE = "message",
+    TRASH = "trash",
+    TRANSFORM = "transform"
 }
 export interface IconProps {
     icon: MynahIcons;

package/dist/components/overlay.d.ts

@@ -56,6 +56,7 @@ export declare enum OverlayVerticalDirection {
     CENTER = "vertical-direction-at-center"
 }
 export interface OverlayProps {
+    testId?: string;
     referenceElement?: HTMLElement | ExtendedHTMLElement;
     referencePoint?: {
         top: number;

package/dist/components/progress.d.ts

@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../helper/dom';
+import '../styles/components/_collapsible-content.scss';
+import { ChatItemButton, ProgressField } from '../static';
+import '../styles/components/_progress.scss';
+interface ProgressIndicatorProps extends ProgressField {
+    testId?: string;
+    classNames?: string[];
+    onClick?: () => void;
+    onActionClick?: (actionName: ChatItemButton, e?: Event) => void;
+}
+export declare class ProgressIndicator {
+    render: ExtendedHTMLElement;
+    private readonly wrapper;
+    private readonly text;
+    private readonly valueText;
+    private readonly valueBar;
+    private buttonsWrapper;
+    private props;
+    constructor(props: ProgressIndicatorProps);
+    private readonly getButtonsWrapper;
+    isEmpty: () => boolean;
+    update: (props: Partial<ProgressField> | null) => void;
+}
+export {};

package/dist/components/toggle.d.ts

@@ -14,6 +14,7 @@ export interface ToggleOption {
     disabledTooltip?: string | ExtendedHTMLElement;
 }
 export interface ToggleProps {
+    testId?: string;
     options: ToggleOption[];
     direction?: 'horizontal' | 'vertical';
     value?: string | null;

package/dist/helper/dom.d.ts

@@ -25,6 +25,7 @@ export interface DomBuilderObject extends GenericDomBuilderAttributes {
     type: string;
     children?: Array<string | DomBuilderObject | HTMLElement | ExtendedHTMLElement> | undefined;
     innerHTML?: string | undefined;
+    testId?: string;
     persistent?: boolean | undefined;
 }
 export interface DomBuilderObjectFilled {
@@ -33,6 +34,7 @@ export interface DomBuilderObjectFilled {
     events?: Record<string, (event?: any) => any>;
     children?: Array<string | DomBuilderObject | HTMLElement | ExtendedHTMLElement>;
     innerHTML?: string | undefined;
+    testId?: string;
     persistent?: boolean;
 }
 export interface ExtendedHTMLElement extends HTMLInputElement {

package/dist/helper/test-ids.d.ts

@@ -0,0 +1,141 @@
+declare const _default: {
+    selector: string;
+    prompt: {
+        wrapper: string;
+        attachmentWrapper: string;
+        attachment: string;
+        attachmentRemove: string;
+        send: string;
+        input: string;
+        inputWrapper: string;
+        remainingCharsIndicator: string;
+        selectedCommand: string;
+        quickPicksWrapper: string;
+        quickPicksGroup: string;
+        quickPicksGroupTitle: string;
+        quickPickItem: string;
+        footerInfo: string;
+        footerInfoBody: string;
+        stickyCard: string;
+        progress: string;
+    };
+    chat: {
+        wrapper: string;
+        chatItemsContainer: string;
+        middleBlockWrapper: string;
+        stopButton: string;
+    };
+    chatItem: {
+        type: {
+            any: string;
+            answer: string;
+            answerStream: string;
+            prompt: string;
+            aiPrompt: string;
+            systemPrompt: string;
+        };
+        card: string;
+        cardBody: string;
+        buttons: {
+            wrapper: string;
+            button: string;
+        };
+        chatItemFollowup: {
+            optionsWrapper: string;
+            optionButton: string;
+            title: string;
+            wrapper: string;
+        };
+        syntaxHighlighter: {
+            wrapper: string;
+            codeBlock: string;
+            lineNumbers: string;
+            language: string;
+            buttonsWrapper: string;
+            button: string;
+        };
+        chatItemForm: {
+            wrapper: string;
+            title: string;
+            itemSelectWrapper: string;
+            itemSelect: string;
+            itemRadioWrapper: string;
+            itemRadio: string;
+            itemInput: string;
+            itemStarsWrapper: string;
+            itemStars: string;
+            itemTextArea: string;
+        };
+        vote: {
+            wrapper: string;
+            upvote: string;
+            upvoteLabel: string;
+            downvote: string;
+            downvoteLabel: string;
+            reportButton: string;
+            thanks: string;
+        };
+        relatedLinks: {
+            showMore: string;
+            wrapper: string;
+            title: string;
+            linkWrapper: string;
+            link: string;
+            linkPreviewOverlay: string;
+            linkPreviewOverlayCard: string;
+        };
+        fileTree: {
+            wrapper: string;
+            title: string;
+            license: string;
+            folder: string;
+            file: string;
+            fileAction: string;
+            fileTooltipWrapper: string;
+        };
+    };
+    feedbackForm: {
+        wrapper: string;
+        title: string;
+        optionsSelectWrapper: string;
+        optionsSelect: string;
+        comment: string;
+        closeButton: string;
+        cancelButton: string;
+        submitButton: string;
+    };
+    customFeedbackForm: {
+        wrapper: string;
+        title: string;
+        description: string;
+        closeButton: string;
+    };
+    tabBar: {
+        wrapper: string;
+        buttonsWrapper: string;
+        button: string;
+        menuButton: string;
+        menuOption: string;
+        tabsWrapper: string;
+        tabOptionWrapper: string;
+        tabOption: string;
+        tabOptionLabel: string;
+        tabOptionCloseButton: string;
+        tabAddButton: string;
+        maxTabsReachedOverlay: string;
+        tabCloseConfirmationOverlay: string;
+        tabCloseConfirmationBody: string;
+        tabCloseConfirmationCancelButton: string;
+        tabCloseConfirmationAcceptButton: string;
+    };
+    noTabs: {
+        wrapper: string;
+        newTabButton: string;
+    };
+    notification: {
+        wrapper: string;
+        title: string;
+        content: string;
+    };
+};
+export default _default;

package/dist/main.d.ts

@@ -17,6 +17,7 @@ export { SelectProps, SelectAbstract } from './components/form-items/select';
 export { TextInputProps, TextInputAbstract } from './components/form-items/text-input';
 export { TextAreaProps, TextAreaAbstract } from './components/form-items/text-area';
 export { ChatItemCardContent, ChatItemCardContentProps } from './components/chat-item/chat-item-card-content';
+export { default as MynahUITestIds } from './helper/test-ids';
 export interface MynahUIProps {
     rootSelector?: string;
     defaults?: MynahUITabStoreTab;
@@ -29,6 +30,10 @@ export interface MynahUIProps {
     onStopChatResponse?: (tabId: string, eventId?: string) => void;
     onResetStore?: (tabId: string) => void;
     onChatPrompt?: (tabId: string, prompt: ChatPrompt, eventId?: string) => void;
+    onChatPromptProgressActionButtonClicked?: (tabId: string, action: {
+        id: string;
+        text?: string;
+    }, eventId?: string) => void;
     onFollowUpClicked?: (tabId: string, messageId: string, followUp: ChatItemAction, eventId?: string) => void;
     onInBodyButtonClicked?: (tabId: string, messageId: string, action: {
         id: string;