@aws/mynah-ui 2.0.0-beta.1 → 2.0.0-beta.10.0

package/DEVELOPMENT.md

@@ -0,0 +1,24 @@
+# Mynah UI
+This package is the whole UI of AWS Codewhisperer Chat extension UI for Web, VSCode and Intellij IDEs written in typescript without any framework or third-party UI library dependency. Purpose of the separated UI is to handle the interactions and look & feel of the UI from one single source. 
+
+## How to release
+### Production 
+You need to create a new release from your desired branch with a tag which should follow the naming `v*.*` to release a production version to npm. The tag you're creating shouldn't be existed before. 
+
+### Beta releases
+If you need to release a beta version first you need to specify the version name inside `package.json` which should follow the versioning `2.0.0-beta.1`
+After that you need to create a new release from your desired branch with a tag which should follow the naming `beta*.*` to release a beta version to npm. The tag you're creating shouldn't be existed before. 
+
+``` console
+please see publish.yml and beta.yml for releasing details.
+```
+
+
+## Security
+
+See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.
+
+## License
+
+This project is licensed under the Apache-2.0 License.
+

package/README.md

@@ -1,6 +1,6 @@
 # Mynah UI
 
-This package is the whole UI of AWS Tookit Mynah extension UI for VSCode and Intellij IDEs written in typescript without any framework or third-party UI library dependency. Purpose of the separated UI is to handle the interactions and look & feel of the UI from one single source. 
+This package is the whole UI of AWS Codewhisperer Chat extension UI for Web, VSCode and Intellij IDEs written in typescript without any framework or third-party UI library dependency. Purpose of the separated UI is to handle the interactions and look & feel of the UI from one single source. 
 
 ## How to install
 

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

@@ -6,11 +6,11 @@ import { ExtendedHTMLElement } from '../../helper/dom';
 import { ChatItem } from '../../static';
 import { SuggestionCardBody } from '../suggestion-card/suggestion-card-body';
 export interface ChatItemCardProps {
+    tabId: string;
     chatItem: ChatItem;
-    onShowAllWebResultsClick?: () => void;
 }
 export declare class ChatItemCard {
-    private readonly chatItem;
+    private readonly props;
     private readonly relatedContentWrapper;
     private readonly referencesWrapper;
     private readonly showMoreButtonBlock;
@@ -24,5 +24,5 @@ export declare class ChatItemCard {
     private readonly showLinkPreview;
     private readonly hideLinkPreview;
     private readonly getChatAvatar;
-    readonly updateAnswerBody: (body: string) => void;
+    readonly updateAnswerBody: (body: ExtendedHTMLElement | HTMLElement | string) => void;
 }

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

@@ -5,10 +5,11 @@
 import { ExtendedHTMLElement } from '../../helper/dom';
 import { ChatItem } from '../../static';
 export interface ChatItemFollowUpProps {
+    tabId: string;
     chatItem: ChatItem;
 }
 export declare class ChatItemFollowUpContainer {
-    private readonly chatItem;
+    private readonly props;
     render: ExtendedHTMLElement;
     constructor(props: ChatItemFollowUpProps);
 }

package/dist/components/chat-item/chat-item-relevance-vote.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+export interface ChatItemRelevanceVoteProps {
+    tabId: string;
+    messageId: string;
+}
+export declare class ChatItemRelevanceVote {
+    private readonly votingId;
+    private sendFeedbackListenerId;
+    render: ExtendedHTMLElement;
+    props: ChatItemRelevanceVoteProps;
+    constructor(props: ChatItemRelevanceVoteProps);
+    private readonly handleVoteChange;
+}

package/dist/components/{suggestion-card/suggestion-card-context-wrapper.d.ts → chat-item/chat-item-tree-view-wrapper.d.ts}

@@ -3,10 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
-export interface SuggestionCardContextWrapperProps {
-    contextList: string[];
+export interface ChatItemTreeViewWrapperProps {
+    tabId: string;
+    messageId: string;
+    files: string[];
 }
-export declare class SuggestionCardContextWrapper {
+export declare class ChatItemTreeViewWrapper {
     render: ExtendedHTMLElement;
-    constructor(props: SuggestionCardContextWrapperProps);
+    constructor(props: ChatItemTreeViewWrapperProps);
 }

package/dist/components/chat-item/chat-item-tree-view.d.ts

@@ -0,0 +1,22 @@
+import { ExtendedHTMLElement } from '../../helper/dom';
+import { TreeNode } from '../../helper/file-tree';
+export interface ChatItemTreeViewProps {
+    node: TreeNode;
+    depth?: number;
+    tabId: string;
+    messageId: string;
+}
+export declare class ChatItemTreeView {
+    private readonly node;
+    private isOpen;
+    private readonly depth;
+    private readonly tabId;
+    private readonly messageId;
+    render: ExtendedHTMLElement;
+    constructor(props: ChatItemTreeViewProps);
+    getClassNames(): string[];
+    updateTree(): void;
+    buildFolderChildren(): ExtendedHTMLElement[];
+    buildFolderNode(): ExtendedHTMLElement[];
+    buildFileNode(): ExtendedHTMLElement[];
+}

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

@@ -3,25 +3,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
-export interface CharPromptInputProps {
-    onStopChatResponse?: () => void;
-    showFeedbackButton?: boolean;
+export interface ChatPromptInputProps {
+    tabId: string;
 }
 export declare class ChatPromptInput {
     render: ExtendedHTMLElement;
+    private readonly props;
     private readonly attachmentWrapper;
     private readonly promptTextInputWrapper;
     private readonly promptTextInput;
     private readonly promptTextInputSizer;
-    private sendButton;
-    private readonly clearButton;
-    private readonly loading;
-    private readonly onStopChatResponse;
+    private readonly sendButton;
+    private quickActionCommands;
+    private commandSelector;
+    private commandSelectorOpen;
+    private inputDisabled;
     private attachment?;
-    constructor(props?: CharPromptInputProps);
-    private readonly getButton;
+    private filteredCommandsList;
+    constructor(props: ChatPromptInputProps);
     private readonly handleInputKeydown;
+    private readonly getQuickCommandActions;
     private readonly calculateTextAreaHeight;
     private readonly resetTextAreaHeight;
-    private readonly triggerSearch;
+    private readonly sendPrompt;
 }

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

@@ -3,21 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
+import { Suggestion } from '../../static';
 export interface ChatWrapperProps {
-    onStopChatResponse?: () => void;
-    onShowAllWebResultsClick?: () => void;
-    showFeedbackButton?: boolean;
+    onStopChatResponse?: (tabId: string) => void;
+    tabId: string;
 }
 export declare class ChatWrapper {
-    private readonly props?;
+    private readonly props;
     private readonly chatItemsContainer;
-    private readonly spinner;
+    private readonly intermediateBlockContainer;
     private readonly promptInput;
     private lastChatItemCard;
-    private containerScollState;
     render: ExtendedHTMLElement;
-    constructor(props?: ChatWrapperProps);
+    constructor(props: ChatWrapperProps);
     private readonly insertChatItem;
-    private readonly scrollToStreamingCardBottom;
-    removeAllExceptAnswersAndPrompts: () => void;
+    updateLastCharAnswerStream: (updateWith: string | {
+        title: string | boolean;
+        suggestions: Suggestion[];
+    }) => void;
 }

package/dist/components/feedback-form/feedback-form-comment.d.ts

@@ -10,6 +10,6 @@ export interface FeedbackFormCommentProps {
 export declare class FeedbackFormComment {
     render: ExtendedHTMLElement;
     constructor(props: FeedbackFormCommentProps);
-    setEnabled: (enabled: boolean) => void;
-    setComment: (comment: string) => void;
+    getComment: () => string;
+    clear: () => void;
 }

package/dist/components/feedback-form/feedback-form.d.ts

@@ -9,11 +9,14 @@ export interface FeedbackFormProps {
 }
 export declare class FeedbackForm {
     private feedbackFormWrapper;
-    private readonly feedbackStars;
+    private readonly feedbackSelect;
+    private readonly feedbackOptionsWrapper;
     private readonly feedbackComment;
-    private feedbackPayload;
     private readonly feedbackSubmitButton;
+    private feedbackPayload;
     readonly feedbackFormContainer: ExtendedHTMLElement;
     constructor(props?: FeedbackFormProps);
     private readonly onFeedbackSet;
+    close: () => void;
+    show: () => void;
 }

package/dist/components/icon/icon-importer.d.ts

@@ -0,0 +1,9 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export declare class MynahUIIconImporter {
+    private static instance;
+    private constructor();
+    static getInstance: () => MynahUIIconImporter;
+}

package/dist/components/icon.d.ts

@@ -11,14 +11,15 @@ export declare enum MynahIcons {
     PLUS = "plus",
     CHAT = "chat",
     LINK = "link",
+    DOC = "doc",
     EXTERNAL = "external",
     CANCEL = "cancel",
     CALENDAR = "calendar",
     MEGAPHONE = "megaphone",
+    NOTIFICATION = "notification",
     EYE = "eye",
     ELLIPSIS = "ellipsis",
     OK = "ok",
-    UP_CIRCLED = "up-circled",
     UP_OPEN = "up-open",
     DOWN_OPEN = "down-open",
     RIGHT_OPEN = "right-open",
@@ -35,13 +36,15 @@ export declare enum MynahIcons {
     STAR = "star",
     LIGHT_BULB = "light-bulb",
     ENVELOPE_SEND = "envelope-send",
-    SEARCH_HISTORY = "search-history",
+    REFRESH = "refresh",
     USER = "user",
     PLAY = "play",
     PAUSE = "pause",
     CODE_BLOCK = "code-block",
     COPY = "copy",
-    TEXT_SELECT = "text-select"
+    CURSOR_INSERT = "cursor-insert",
+    TEXT_SELECT = "text-select",
+    REVERT = "revert"
 }
 export interface IconProps {
     icon: MynahIcons;

package/dist/components/navigation-tabs.d.ts

@@ -3,14 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../helper/dom';
-export declare const getSelectedTabValueFromStore: () => string;
-export interface NavivationTabsProps {
-    onChange?: (selectedValue: string) => void;
+export interface TabsProps {
+    onChange?: (selectedTabId: string) => void;
 }
-export declare class NavivationTabs {
+export declare class Tabs {
     render: ExtendedHTMLElement;
+    private tabIdSubscriptions;
+    private toggleGroup;
     private readonly props;
-    constructor(props: NavivationTabsProps);
-    private readonly setLoading;
+    constructor(props: TabsProps);
+    private readonly getTabOptionsFromTabStoreData;
     private readonly getTabsRender;
 }

package/dist/components/notification/notification.d.ts

@@ -20,10 +20,6 @@ export declare class Notification {
     private readonly props;
     constructor(props: NotificationProps);
     notify(): void;
-    /**
-       * Calculates the top according to the previously shown and still visible notifications
-       * @returns number
-       */
     private readonly getNextCalculatedTop;
     private readonly getChildren;
 }

package/dist/components/overlay/overlay.d.ts

@@ -4,58 +4,22 @@
  */
 import { DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
 export declare const OVERLAY_MARGIN = 8;
-/**
- * The horizontal creation direction of the overlay
- */
 export declare enum OverlayHorizontalDirection {
-    /**
-       * starts from the left edge of the reference element and opens to left
-       */
     TO_LEFT = "horizontal-direction-to-left",
-    /**
-       * starts from the right edge of the reference element and opens to left
-       */
     END_TO_LEFT = "horizontal-direction-from-end-to-left",
-    /**
-       * starts from the right edge of the reference element and opens to right
-       */
     TO_RIGHT = "horizontal-direction-to-right",
-    /**
-       * starts from the left edge of the reference element and opens to right
-       */
     START_TO_RIGHT = "horizontal-direction-from-start-to-right",
-    /**
-       * starts and opens at the center of the reference element
-       */
     CENTER = "horizontal-direction-at-center"
 }
-/**
- * The vertical creation direction of the overlay
- */
 export declare enum OverlayVerticalDirection {
-    /**
-       * starts from the bottom edge of the reference element and opens to bottom
-       */
     TO_BOTTOM = "vertical-direction-to-bottom",
-    /**
-       * starts from the top edge of the reference element and opens to bottom
-       */
     START_TO_BOTTOM = "vertical-direction-from-start-to-bottom",
-    /**
-       * starts from the top edge of the reference element and opens to top
-       */
     TO_TOP = "vertical-direction-to-top",
-    /**
-       * starts from the bottom edge of the reference element and opens to top
-       */
     END_TO_TOP = "vertical-direction-from-end-to-top",
-    /**
-       * starts and opens at the center of the reference element
-       */
     CENTER = "vertical-direction-at-center"
 }
 export interface OverlayProps {
-    referenceElement?: Element | ExtendedHTMLElement;
+    referenceElement?: HTMLElement | ExtendedHTMLElement;
     referencePoint?: {
         top: number;
         left: number;
@@ -63,10 +27,12 @@ export interface OverlayProps {
     children: Array<HTMLElement | ExtendedHTMLElement | DomBuilderObject>;
     horizontalDirection?: OverlayHorizontalDirection;
     verticalDirection?: OverlayVerticalDirection;
+    stretchWidth?: boolean;
     dimOutside?: boolean;
     closeOnOutsideClick?: boolean;
     background?: boolean;
     onClose?: () => void;
+    removeOtherOverlays?: boolean;
 }
 export declare class Overlay {
     render: ExtendedHTMLElement;
@@ -78,6 +44,7 @@ export declare class Overlay {
     close: () => void;
     private readonly windowBlurHandler;
     private readonly getCalculatedLeft;
+    private readonly getCalculatedWidth;
     private readonly getCalculatedTop;
     updateContent: (children: Array<string | DomBuilderObject | HTMLElement | ExtendedHTMLElement>) => void;
 }

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

@@ -13,10 +13,11 @@ export interface SuggestionCardBodyProps {
 export declare class SuggestionCardBody {
     render: ExtendedHTMLElement;
     cardBody: ExtendedHTMLElement;
-    matchingLanguage: string;
     props: SuggestionCardBodyProps;
+    private readonly syntaxHighlighterHighlightWithTooltipRangeItems;
     constructor(props: SuggestionCardBodyProps);
     private readonly processNode;
     private readonly getCardBodyChildren;
     readonly updateCardBody: (body: string) => void;
+    readonly addToCardBody: (elementToAdd: ExtendedHTMLElement | HTMLElement | string) => void;
 }

package/dist/components/suggestion-card/suggestion-card-header.d.ts

@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
-import { SuggestionMetaDataUnion } from '../../static';
+import { SuggestionMetaData } from '../../static';
 export interface SuggestionCardHeaderProps {
     title: string;
     url: string;
-    metadata?: SuggestionMetaDataUnion;
+    metadata?: Record<string, SuggestionMetaData>;
     onSuggestionTitleClick?: (e?: MouseEvent) => void;
     onSuggestionLinkCopy?: () => void;
 }

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

@@ -6,7 +6,7 @@ import { ExtendedHTMLElement } from '../../helper/dom';
 import { Suggestion } from '../../static';
 export interface SuggestionCardProps {
     suggestion: Suggestion;
-    compact?: 'withBody' | true;
+    compact?: 'flat' | true;
     showFooterButtons?: boolean;
 }
 export declare class SuggestionCard {

package/dist/components/syntax-highlighter.d.ts

@@ -9,7 +9,7 @@ import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-json';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
-import { OnCopiedToClipboardFunction, SupportedCodingLanguagesType } from '../static';
+import { OnCopiedToClipboardFunction, OnInsertToCursorPositionFunction, ReferenceTrackerInformation } from '../static';
 export declare const highlighters: {
     start: {
         markup: string;
@@ -20,6 +20,16 @@ export declare const highlighters: {
         textReplacement: string;
     };
 };
+export declare const highlightersWithTooltip: {
+    start: {
+        markup: string;
+        textReplacement: string;
+    };
+    end: {
+        markup: string;
+        textReplacement: string;
+    };
+};
 export declare const ellipsis: {
     start: {
         markup: string;
@@ -32,18 +42,26 @@ export declare const ellipsis: {
 };
 export interface SyntaxHighlighterProps {
     codeStringWithMarkup: string;
-    language?: SupportedCodingLanguagesType;
+    language?: string;
     keepHighlights?: boolean;
     showLineNumbers?: boolean;
     block?: boolean;
     startingLineNumber?: number;
     showCopyOptions?: boolean;
+    highlightRangeWithTooltip?: ReferenceTrackerInformation[];
     onCopiedToClipboard?: OnCopiedToClipboardFunction;
+    onInsertToCursorPosition?: OnInsertToCursorPositionFunction;
 }
 export declare class SyntaxHighlighter {
-    private readonly code;
     private readonly onCopiedToClipboard?;
+    private readonly onInsertToCursorPosition?;
+    private readonly highlightRangeWithTooltip;
+    private highlightRangeTooltipTimeout;
+    private highlightRangeTooltip;
     render: ExtendedHTMLElement;
     constructor(props: SyntaxHighlighterProps);
+    private readonly showHighlightRangeTooltip;
+    private readonly hideHighlightRangeTooltip;
+    private readonly getSelectedCode;
     private readonly copyToClipboard;
 }

package/dist/components/toggle.d.ts

@@ -6,7 +6,6 @@ import { ExtendedHTMLElement } from '../helper/dom';
 import { MynahIcons } from './icon';
 export interface ToggleOption {
     label?: ExtendedHTMLElement | string | HTMLElement;
-    color?: string;
     icon?: MynahIcons;
     disabled?: boolean;
     selected?: boolean;
@@ -15,22 +14,25 @@ export interface ToggleOption {
 }
 export interface ToggleProps {
     options: ToggleOption[];
-    type?: 'switch' | 'tabs';
     direction?: 'horizontal' | 'vertical';
     value?: string | null;
     name: string;
     disabled?: boolean;
     onChange?: (selectedValue: string) => void;
+    onRemove?: (selectedValue: string) => void;
 }
 export declare class Toggle {
     render: ExtendedHTMLElement;
     private readonly props;
     private currentValue?;
-    private readonly relocateTransitioner;
     constructor(props: ToggleProps);
+    private readonly transformScroll;
     private readonly getChildren;
-    private readonly setRelocatePosition;
     private readonly updateSelectionRender;
     setValue: (value: string) => void;
-    getValue: () => string | undefined;
+    addOption: (option: ToggleOption) => void;
+    removeOption: (value: string) => void;
+    updateOptionTitle: (value: string, title: string) => void;
+    snapToOption: (value: string) => void;
+    getValue: () => string | undefined | null;
 }

package/dist/helper/config.d.ts

@@ -2,9 +2,10 @@
  * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-export declare class MynahConfig {
-    private config;
-    constructor();
-    getConfig: (configName: string) => any;
-    setConfig: (configName: string, configValue: string) => void;
+import { ConfigModel } from '../static';
+export declare class Config {
+    private static instance;
+    config: ConfigModel;
+    private constructor();
+    static getInstance(config?: Partial<ConfigModel>): Config;
 }

package/dist/helper/date-time.d.ts

@@ -2,11 +2,11 @@
  * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-export declare const getTimeDiff: (differenceInMs: number, show?: 1 | {
+export declare const getTimeDiff: (differenceInMs: number, show?: 1 | 2 | 5 | 3 | 4 | 6 | {
     years?: boolean | undefined;
     months?: boolean | undefined;
     weeks?: boolean | undefined;
     days?: boolean | undefined;
     hours?: boolean | undefined;
     minutes?: boolean | undefined;
-} | 2 | 3 | 4 | 5 | 6 | undefined, separator?: string | undefined) => string;
+} | undefined, separator?: string | undefined) => string;

package/dist/helper/dom.d.ts

@@ -2,6 +2,7 @@
  * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+import { MynahPortalNames } from '../static';
 export declare const DS: typeof document.querySelectorAll;
 export interface DomBuilderObject {
     type: string;
@@ -48,5 +49,6 @@ export declare class DomBuilder {
     createPortal: (portalName: string, builderObject: DomBuilderObject, position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend') => ExtendedHTMLElement;
     getPortal: (portalName: string) => ExtendedHTMLElement;
     removePortal: (portalName: string) => void;
+    removeAllPortals: (portalsWithName: MynahPortalNames) => void;
 }
 export declare const htmlDecode: (input: string) => string;

package/dist/helper/events.d.ts

@@ -9,22 +9,7 @@ export declare class MynahUIGlobalEvents {
     private readonly listeners;
     private constructor();
     static getInstance: () => MynahUIGlobalEvents;
-    /**
-     * Subscribe to value changes of a specific item in data store
-     * @param eventKey One of the keys in MynahUIDataModel
-     * @param handler function will be called with optional data field
-     * @returns listenerId which will be necessary to removeListener
-     */
     addListener: (eventKey: MynahEventNames, handler: (data?: any) => void) => string;
-    /**
-     * Unsubscribe from changes of a specific item in data store
-     * @param eventKey One of the keys in MynahUIDataModel
-     * @param listenerId listenerId which is returned from addListener function
-     */
     removeListener: (eventKey: MynahEventNames, listenerId: string) => void;
-    /**
-     * Updates the store and informs the subscribers.
-     * @param data A full or partial set of store data model with values.
-     */
     dispatch: (eventKey: MynahEventNames, data?: any) => void;
 }

package/dist/helper/file-tree.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export declare type TreeNode = FolderNode | FileNode;
+export interface FileNode {
+    name: string;
+    type: 'file';
+    filePath: string;
+}
+export interface FolderNode {
+    name: string;
+    type: 'folder';
+    children: Array<FolderNode | FileNode>;
+}
+export declare const fileListToTree: (filePaths: string[]) => TreeNode;