@aws/mynah-ui 1.4.0 → 2.0.0-beta.2

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/button.d.ts

@@ -16,5 +16,6 @@ export interface ButtonProps {
 export declare class Button {
     render: ExtendedHTMLElement;
     constructor(props: ButtonProps);
+    updateLabel: (label: HTMLElement | ExtendedHTMLElement | string) => void;
     setEnabled: (enabled: boolean) => void;
 }

package/dist/components/chat-item/chat-item-card.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 { ChatItem } from '../../static';
+import { SuggestionCardBody } from '../suggestion-card/suggestion-card-body';
+export interface ChatItemCardProps {
+    chatItem: ChatItem;
+    onShowAllWebResultsClick?: () => void;
+}
+export declare class ChatItemCard {
+    private readonly chatItem;
+    private readonly relatedContentWrapper;
+    private readonly referencesWrapper;
+    private readonly showMoreButtonBlock;
+    private relatedContentPreview;
+    private relatedContentPreviewTimeout;
+    render: ExtendedHTMLElement;
+    suggestionCardBody: SuggestionCardBody;
+    chatAvatar: ExtendedHTMLElement;
+    constructor(props: ChatItemCardProps);
+    private readonly checkIsMuted;
+    private readonly showLinkPreview;
+    private readonly hideLinkPreview;
+    private readonly getChatAvatar;
+    readonly updateAnswerBody: (body: string) => void;
+}

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

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+import { ChatItem } from '../../static';
+export interface ChatItemFollowUpProps {
+    chatItem: ChatItem;
+}
+export declare class ChatItemFollowUpContainer {
+    private readonly chatItem;
+    render: ExtendedHTMLElement;
+    constructor(props: ChatItemFollowUpProps);
+}

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

@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+export interface CharPromptInputProps {
+    onStopChatResponse?: () => void;
+    showFeedbackButton?: boolean;
+}
+export declare class ChatPromptInput {
+    render: ExtendedHTMLElement;
+    private readonly attachmentWrapper;
+    private readonly promptTextInputWrapper;
+    private readonly promptTextInput;
+    private readonly promptTextInputSizer;
+    private sendButton;
+    private readonly clearButton;
+    private readonly loading;
+    private readonly onStopChatResponse;
+    private attachment?;
+    constructor(props?: CharPromptInputProps);
+    private readonly getButton;
+    private readonly handleInputKeydown;
+    private readonly calculateTextAreaHeight;
+    private readonly resetTextAreaHeight;
+    private readonly triggerSearch;
+}

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

@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+export interface ChatWrapperProps {
+    onStopChatResponse?: () => void;
+    onShowAllWebResultsClick?: () => void;
+    showFeedbackButton?: boolean;
+}
+export declare class ChatWrapper {
+    private readonly props?;
+    private readonly chatItemsContainer;
+    private readonly spinner;
+    private readonly promptInput;
+    private lastChatItemCard;
+    private containerScollState;
+    render: ExtendedHTMLElement;
+    constructor(props?: ChatWrapperProps);
+    private readonly insertChatItem;
+    private readonly scrollToStreamingCardBottom;
+    removeAllExceptAnswersAndPrompts: () => void;
+}

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

@@ -8,14 +8,12 @@ export interface FeedbackFormProps {
     initPayload?: FeedbackPayload;
 }
 export declare class FeedbackForm {
-    private formOverlay;
+    private feedbackFormWrapper;
     private readonly feedbackStars;
     private readonly feedbackComment;
     private feedbackPayload;
-    private readonly triggerButton;
     private readonly feedbackSubmitButton;
     readonly feedbackFormContainer: ExtendedHTMLElement;
-    readonly feedbackContainer: ExtendedHTMLElement;
     constructor(props?: FeedbackFormProps);
     private readonly onFeedbackSet;
 }

package/dist/components/icon.d.ts

@@ -4,6 +4,7 @@
  */
 import { ExtendedHTMLElement } from '../helper/dom';
 export declare enum MynahIcons {
+    MYNAH = "mynah",
     MENU = "menu",
     MINUS = "minus",
     SEARCH = "search",
@@ -15,6 +16,7 @@ export declare enum MynahIcons {
     CALENDAR = "calendar",
     MEGAPHONE = "megaphone",
     EYE = "eye",
+    ELLIPSIS = "ellipsis",
     OK = "ok",
     UP_CIRCLED = "up-circled",
     UP_OPEN = "up-open",

package/dist/components/main-container.d.ts

@@ -5,11 +5,14 @@
 import { ExtendedHTMLElement } from '../helper/dom';
 import { Suggestion } from '../static';
 export interface MainContainerProps {
-    onScroll?: (e: Event) => void;
+    onNavigationTabChange?: (selectedTab: string) => void;
+    onCloseButtonClick?: () => void;
 }
 export declare class MainContainer {
+    private readonly navTabs;
     private readonly cardsWrapper;
     private readonly skeletonWrapper;
+    private readonly mainContainer;
     render: ExtendedHTMLElement;
     constructor(props: MainContainerProps);
     clearCards: () => void;

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

@@ -0,0 +1,13 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../helper/dom';
+import { NavivationTabsProps } from './navigation-tabs';
+export declare class NavivationTabsVertical {
+    render: ExtendedHTMLElement;
+    private readonly props;
+    constructor(props: NavivationTabsProps);
+    private readonly setLoading;
+    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;
@@ -65,6 +29,7 @@ export interface OverlayProps {
     verticalDirection?: OverlayVerticalDirection;
     dimOutside?: boolean;
     closeOnOutsideClick?: boolean;
+    background?: boolean;
     onClose?: () => void;
 }
 export declare class Overlay {

package/dist/components/query-text-short-view.d.ts

@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../helper/dom';
+export declare class QueryTextShortView {
+    render: ExtendedHTMLElement;
+    private readonly textBlock;
+    constructor();
+}

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

@@ -5,9 +5,18 @@
 import { ExtendedHTMLElement } from '../../helper/dom';
 import { Suggestion } from '../../static';
 export interface SuggestionCardBodyProps {
-    suggestion: Suggestion;
+    suggestion: Partial<Suggestion>;
+    showFooterButtons?: boolean;
+    onLinkMouseEnter?: (e: MouseEvent, url: string) => void;
+    onLinkMouseLeave?: (e: MouseEvent, url: string) => void;
 }
 export declare class SuggestionCardBody {
     render: ExtendedHTMLElement;
+    cardBody: ExtendedHTMLElement;
+    matchingLanguage: string;
+    props: SuggestionCardBodyProps;
     constructor(props: SuggestionCardBodyProps);
+    private readonly processNode;
+    private readonly getCardBodyChildren;
+    readonly updateCardBody: (body: string) => void;
 }

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

@@ -14,6 +14,5 @@ export interface SuggestionCardHeaderProps {
 export declare class SuggestionCardHeader {
     render: ExtendedHTMLElement;
     constructor(props: SuggestionCardHeaderProps);
-    private readonly getSourceMetaBlockClassName;
     private readonly getSourceMetaBlock;
 }

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

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

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

@@ -0,0 +1,5 @@
+import { ExtendedHTMLElement } from '../../helper/dom';
+export declare class SuggestionSkeleton {
+    readonly render: ExtendedHTMLElement;
+    constructor();
+}

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

@@ -35,6 +35,7 @@ export interface SyntaxHighlighterProps {
     language?: SupportedCodingLanguagesType;
     keepHighlights?: boolean;
     showLineNumbers?: boolean;
+    block?: boolean;
     startingLineNumber?: number;
     showCopyOptions?: boolean;
     onCopiedToClipboard?: OnCopiedToClipboardFunction;

package/dist/components/toggle.d.ts

@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../helper/dom';
+import { MynahIcons } from './icon';
 export interface ToggleOption {
     label?: ExtendedHTMLElement | string | HTMLElement;
     color?: string;
+    icon?: MynahIcons;
     disabled?: boolean;
     selected?: boolean;
     value: string;
@@ -14,6 +16,7 @@ export interface ToggleOption {
 export interface ToggleProps {
     options: ToggleOption[];
     type?: 'switch' | 'tabs';
+    direction?: 'horizontal' | 'vertical';
     value?: string | null;
     name: string;
     disabled?: boolean;

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?: {
+export declare const getTimeDiff: (differenceInMs: number, show?: 1 | 2 | 3 | 4 | 5 | 6 | {
     years?: boolean | undefined;
     months?: boolean | undefined;
     weeks?: boolean | undefined;
     days?: boolean | undefined;
     hours?: boolean | undefined;
     minutes?: boolean | undefined;
-} | 1 | 2 | 3 | 4 | 5 | 6 | undefined, separator?: string | undefined) => string;
+} | undefined, separator?: string | undefined) => string;

package/dist/helper/dom.d.ts

@@ -49,3 +49,4 @@ export declare class DomBuilder {
     getPortal: (portalName: string) => ExtendedHTMLElement;
     removePortal: (portalName: string) => 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/find-language.d.ts

@@ -3,15 +3,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Suggestion } from '../static';
-/**
- * Finds the coding language if there is a match witnin the supported languages from context or body or from the title
- * @param suggestion SuggestionType
- * @returns string | undefined
- */
-export declare const findLanguageFromSuggestion: (suggestion: Suggestion) => string | undefined;
-/**
- * Finds the coding language if there is a match within the supported languages from the given file name
- * @param fileName string
- * @returns string | undefined
- */
+export declare const findLanguageFromSuggestion: (suggestion: Partial<Suggestion>) => string | undefined;
 export declare const getLanguageFromFileName: (fileName: string) => string | undefined;

package/dist/helper/store.d.ts

@@ -14,47 +14,12 @@ export declare class MynahUIDataStore {
     private defaults;
     private constructor();
     static getInstance: (initialData?: MynahUIDataModel | undefined) => MynahUIDataStore;
-    /**
-     * Sets the defaults to use while clearing the store
-     * @param defaults partial set of MynahUIDataModel for defaults
-     */
     setDefaults: (defaults: MynahUIDataModel | null) => void;
-    /**
-     * Get the defaults to use while generating an empty store data
-     */
     getDefaults: () => MynahUIDataModel | null;
-    /**
-     * Subscribe to value changes of a specific item in data store
-     * @param storeKey One of the keys in MynahUIDataModel
-     * @param handler function will be called when value of the given key is updated in store with new and old values
-     * @returns subscriptionId which needed to unsubscribe
-     */
     subscribe: (storeKey: keyof MynahUIDataModel, handler: (newValue: any, oldValue?: any) => void) => string;
-    /**
-     * Unsubscribe from changes of a specific item in data store
-     * @param storeKey One of the keys in MynahUIDataModel
-     * @param subscriptionId subsciptionId which is returned from subscribe function
-     */
     unsubscribe: (storeKey: keyof MynahUIDataModel, subscriptionId: string) => void;
-    /**
-     * Returns current value of an item in data store
-     * @param storeKey One of the keys in MynahUIDataModel
-     * @returns value of the given key in data store
-     */
     getValue: (storeKey: keyof MynahUIDataModel) => any;
-    /**
-     * Returns current value of an item in data store
-     * @param storeKey One of the keys in MynahUIDataModel
-     * @returns value of the given key in data store
-     */
     getDefaultValue: (storeKey: keyof MynahUIDataModel) => any;
-    /**
-     * Updates the store and informs the subscribers.
-     * @param data A full or partial set of store data model with values.
-     */
     updateStore: (data: MynahUIDataModel, skipSubscribers?: boolean | undefined) => void;
-    /**
-     * Clears store data and informs all the subscribers
-     */
     resetStore: () => void;
 }

package/dist/helper/url.d.ts

@@ -0,0 +1 @@
+export declare const getOrigin: (site: string) => string;

package/dist/main.d.ts

@@ -2,66 +2,50 @@
  * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { SuggestionEngagement, Suggestion, SearchPayload, LiveSearchState, SuggestionEventName, RelevancyVoteType, FeedbackPayload, MynahUIDataModel, ContextChangeType, ContextType, SearchHistoryFilters, NotificationType } from './static';
+import { SuggestionEngagement, Suggestion, SearchPayload, SuggestionEventName, RelevancyVoteType, FeedbackPayload, MynahUIDataModel, NotificationType, ChatItem, ChatItemFollowUp, ChatPrompt, MynahMode } from './static';
 import './styles/styles.scss';
-export { AutocompleteItem, SearchPayloadCodeSelection, FeedbackPayload, RelevancyVoteType, LiveSearchState, SearchPayload, Suggestion, ContextType, SearchHistoryItem, EngagementType, SuggestionEngagement, SuggestionEventName, SearchHistoryFilters, MynahUIDataModel, ContextChangeType, ContextSource, ContextTypes, NotificationType, } from './static';
+export { SearchPayloadCodeSelection, FeedbackPayload, RelevancyVoteType, SearchPayload, Suggestion, EngagementType, SuggestionEngagement, SuggestionEventName, MynahUIDataModel, NotificationType, MynahMode, ChatItem, ChatItemFollowUp, ChatItemType, ChatPrompt } from './static';
+export { ToggleOption } from './components/toggle';
+export { MynahIcons } from './components/icon';
 export { transformPayloadData, validateRulesOnPayloadData, PayloadTransformRule, } from './helper/payload-transformer';
 export interface MynahUIProps {
     rootSelector?: string;
     storeData?: MynahUIDataModel;
-    onSearch?: ((searchPayload: SearchPayload, isFromHistory?: boolean, isFromAutocomplete?: boolean) => void) | ((searchPayload: SearchPayload, isFromHistory?: boolean, isFromAutocomplete?: boolean) => MynahUIDataModel);
+    onSearch?: ((searchPayload: SearchPayload) => void) | ((searchPayload: SearchPayload) => MynahUIDataModel);
+    onShowMoreWebResultsClick?: () => void;
     onReady?: () => void;
     onClickSuggestionVote?: (suggestion: Suggestion, vote: RelevancyVoteType) => void;
-    onClickCodeDetails?: (code: string, fileName?: string, range?: {
-        start: {
-            row: string;
-            column?: string;
-        };
-        end?: {
-            row: string;
-            column?: string;
-        };
-    }) => void;
+    onClearChat?: () => void;
+    onStopChatResponse?: () => void;
     onResetStore?: () => void;
-    onChangeContext?: (changeType: ContextChangeType, queryContext: ContextType) => void;
+    onChatPrompt?: (prompt: ChatPrompt) => void;
+    onFollowUpClicked?: (followUp: ChatItemFollowUp) => void;
+    onSuggestionAttachedToChatPrompt?: (attachment: Suggestion) => void;
     onNavigationTabChange?: (selectedTab: string) => void;
+    onSideNavigationTabChange?: (selectedTab: string) => void;
     onSuggestionEngagement?: (engagement: SuggestionEngagement) => void;
     onSuggestionClipboardInteraction?: (suggestionId: string, type?: string, text?: string) => void;
     onSuggestionInteraction?: (eventName: SuggestionEventName, suggestion: Suggestion, mouseEvent?: MouseEvent) => void;
     onSendFeedback?: (feedbackPayload: FeedbackPayload) => void;
-    onRequestHistoryRecords?: (filterPayload: SearchHistoryFilters) => void;
-    onInputQueryChange?: (input: string) => void;
-    onChangeLiveSearchState?: (liveSearchState: LiveSearchState) => void;
-    onClickAutocompleteItem?: (text: string, currSelected?: number, suggestionCount?: number) => void;
 }
 export declare class MynahUI {
     private readonly props;
     private readonly wrapper;
-    private readonly searchCard;
-    private readonly navTabs;
+    private readonly sideNav;
+    private readonly feedbackForm?;
     private readonly mainContainer;
+    private readonly chatWrapper;
     private readonly config;
     constructor(props: MynahUIProps);
+    private readonly sideNavigationTabChanged;
     private readonly addGlobalListeners;
-    /**
-     * Updates only the UI with the given data.
-     * @param data A full or partial set of data with values.
-     */
+    addChatAnswer: (answer: ChatItem) => void;
+    getLastChatAnswer: () => ChatItem | undefined;
+    updateLastChatAnswerStream: (body: string) => void;
     updateStore: (data: MynahUIDataModel) => void;
-    /**
-     * Sets store defaults to use while clearing the store
-     * To clear the defaults, send `null`
-     * @param defaults partial set of MynahUIDataModel for defaults
-     */
+    getMode: () => MynahMode | undefined;
     setStoreDefaults: (defaults: MynahUIDataModel | null) => void;
-    /**
-     * Returns the current search payload
-     */
     getSearchPayload: () => SearchPayload;
-    /**
-     * Simply creates and shows a notification
-     * @param props NotificationProps
-     */
     notify: (props: {
         duration?: number;
         type?: NotificationType;