@aws/mynah-ui 4.35.3 → 4.35.5

package/Dockerfile

@@ -0,0 +1,34 @@
+# Use the official Playwright image which includes browsers
+FROM mcr.microsoft.com/playwright:v1.53.0
+
+# Set working directory
+WORKDIR /app
+
+# Copy the src from the root
+COPY ./src /app/src
+
+# Copy config files from root
+COPY ./package.json /app
+COPY ./package-lock.json /app
+COPY ./postinstall.js /app
+COPY ./webpack.config.js /app
+COPY ./tsconfig.json /app
+
+# Copy required files from ui-tests
+COPY ./ui-tests/package.json /app/ui-tests/
+COPY ./ui-tests/playwright.config.ts /app/ui-tests/
+COPY ./ui-tests/tsconfig.json /app/ui-tests/
+COPY ./ui-tests/webpack.config.js /app/ui-tests/
+
+# Copy the directories from ui-tests
+COPY ./ui-tests/__test__ /app/ui-tests/__test__
+COPY ./ui-tests/src /app/ui-tests/src
+COPY ./ui-tests/__snapshots__ /app/ui-tests/__snapshots__
+
+# Install dependencies and build MynahUI
+RUN npm install
+RUN npm run build
+RUN cd ./ui-tests && npm install && npm run prepare
+
+# Default command to run the tests
+CMD ["sh", "-c", "cd ./ui-tests && npm run e2e${BROWSER:+:$BROWSER}"]

package/README.md

@@ -51,6 +51,7 @@ Please refer to the following guides:
 * [Data model](./docs/DATAMODEL.md)
 * [Usage](./docs/USAGE.md)
 * [Styling](./docs/STYLING.md)
+* [Testing](./docs/TESTING.md)
 * [Developer guidelines (contribution)](./docs/DEVELOPER.md)
 
 #### Preview

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

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
-import { PromptAttachmentType } from '../../static';
+import { DetailedList, PromptAttachmentType } from '../../static';
+import { TopBarButtonOverlayProps } from './prompt-input/prompt-top-bar/top-bar-button';
 export declare const MAX_USER_INPUT_THRESHOLD = 96;
 export declare const MAX_USER_INPUT: () => number;
 export declare const INPUT_LENGTH_WARNING_THRESHOLD: () => number;
@@ -23,13 +24,22 @@ export declare class ChatPromptInput {
     private readonly progressIndicator;
     private readonly promptAttachment;
     private readonly promptOptions;
+    private readonly promptTopBar;
     private readonly chatPrompt;
     private quickPickItemsSelectorContainer;
     private promptTextInputLabel;
     private remainingCharsOverlay;
+    /**
+     * Preserves cursor position when `@` key is pressed
+     */
     private quickPickTriggerIndex;
+    /**
+     * Preserves selection range when `@` key is pressed
+     */
+    private quickPickTriggerRange?;
     private quickPickType;
     private quickPickItemGroups;
+    private topBarTitleClicked;
     private filteredQuickPickItemGroups;
     private searchTerm;
     private quickPick;
@@ -40,8 +50,10 @@ export declare class ChatPromptInput {
     private lastUnsentUserPrompt;
     private readonly markerRemovalRegex;
     constructor(props: ChatPromptInputProps);
+    private readonly onContextSelectorButtonClick;
     private readonly updateAvailableCharactersIndicator;
     private readonly handleInputKeydown;
+    private readonly tabBarTitleOverlayKeyPressHandler;
     private readonly openQuickPick;
     private readonly handleInputFocus;
     private readonly getQuickPickItemGroups;
@@ -51,4 +63,7 @@ export declare class ChatPromptInput {
     private readonly getPromptInputTextLabel;
     readonly clearTextArea: (keepAttachment?: boolean) => void;
     readonly addAttachment: (attachmentContent: string, type?: PromptAttachmentType) => void;
+    readonly openTopBarButtonItemOverlay: (data: TopBarButtonOverlayProps) => void;
+    readonly updateTopBarButtonItemOverlay: (data: DetailedList) => void;
+    readonly closeTopBarButtonItemOverlay: () => void;
 }

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

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
-import { CardRenderDetails, ChatItem, PromptAttachmentType } from '../../static';
+import { CardRenderDetails, ChatItem, DetailedList, PromptAttachmentType } from '../../static';
+import { TopBarButtonOverlayProps } from './prompt-input/prompt-top-bar/top-bar-button';
 export declare const CONTAINER_GAP = 12;
 export interface ChatWrapperProps {
     onStopChatResponse?: (tabId: string) => void;
@@ -42,4 +43,7 @@ export declare class ChatWrapper {
     endStreamWithMessageId: (messageId: string, updateWith: Partial<ChatItem>) => void;
     updateChatAnswerWithMessageId: (messageId: string, updateWith: Partial<ChatItem>) => void;
     addAttachmentToPrompt: (textToAdd: string, type?: PromptAttachmentType) => void;
+    openTopBarButtonItemOverlay: (data: TopBarButtonOverlayProps) => void;
+    updateTopBarButtonItemOverlay: (data: DetailedList) => void;
+    closeTopBarButtonItemOverlay: () => void;
 }

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

@@ -21,6 +21,7 @@ export declare class PromptTextInput {
     private contextTooltip;
     private contextTooltipTimeout;
     constructor(props: PromptTextInputProps);
+    readonly restoreRange: (range: Range) => void;
     private readonly updateCursorPos;
     private readonly checkIsEmpty;
     private readonly removeContextPlaceholderOverlay;
@@ -28,7 +29,7 @@ export declare class PromptTextInput {
     private readonly moveCursorToEnd;
     private readonly showContextTooltip;
     private readonly hideContextTooltip;
-    readonly insertContextItem: (contextItem: QuickActionCommand, position: number) => void;
+    readonly insertContextItem: (contextItem: QuickActionCommand, position: number, topBarHidden?: boolean) => void;
     readonly getCursorPos: () => number;
     readonly clear: () => void;
     readonly focus: () => void;

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

@@ -0,0 +1,47 @@
+import { ExtendedHTMLElement } from '../../../../helper/dom';
+import { ChatItemButton, DetailedList, DetailedListItemGroup, QuickActionCommand } from '../../../../static';
+import { DetailedListWrapper } from '../../../detailed-list/detailed-list';
+import { Overlay } from '../../../overlay';
+import { TopBarButton } from './top-bar-button';
+export interface PromptTopBarProps {
+    classNames?: string[];
+    tabId: string;
+    contextItems?: QuickActionCommand[];
+    title?: string;
+    onTopBarTitleClick?: () => void;
+    onContextItemAdd?: (contextItems: QuickActionCommand) => void;
+    onContextItemRemove?: (contextItems: QuickActionCommand) => void;
+    topBarButton?: ChatItemButton;
+    onTopBarButtonClick?: (action: ChatItemButton) => void;
+}
+export declare class PromptTopBar {
+    render: ExtendedHTMLElement;
+    visibleCount: number;
+    overflowOverlay?: Overlay;
+    topBarButton: TopBarButton;
+    overflowListContainer: DetailedListWrapper;
+    private contextTooltip;
+    private contextTooltipTimeout;
+    private readonly props;
+    private titleButton;
+    private overflowButton;
+    constructor(props: PromptTopBarProps);
+    update(newProps?: Partial<PromptTopBarProps>): void;
+    updateTopBarButtonOverlay(topBarButtonOverlay: DetailedList): void;
+    isHidden(): boolean;
+    generateTitle(): ExtendedHTMLElement | string;
+    getVisibleContextItems(): QuickActionCommand[];
+    getOverflowContextItems(): QuickActionCommand[];
+    generateContextPills(): Array<ExtendedHTMLElement | string>;
+    private readonly showContextTooltip;
+    private readonly hideContextTooltip;
+    removeContextPill(id: string): void;
+    addContextPill(contextItem: QuickActionCommand): void;
+    getOverflowCount(): number;
+    generateOverflowPill(): ExtendedHTMLElement | string;
+    showOverflowOverlay(e: Event): void;
+    generateOverflowOverlayChildren(): ExtendedHTMLElement;
+    getOverflowItemsAsDetailedListGroup(): DetailedListItemGroup[];
+    private setupResizeObserver;
+    private recalculateVisibleItems;
+}

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

@@ -0,0 +1,32 @@
+import { ExtendedHTMLElement } from '../../../../helper/dom';
+import { DetailedList, DetailedListItem, ChatItemButton } from '../../../../static';
+export interface TopBarButtonOverlayProps {
+    tabId: string;
+    topBarButtonOverlay: DetailedList;
+    events?: {
+        onKeyPress?: (e: KeyboardEvent) => void;
+        onGroupClick?: (groupName: string) => void;
+        onItemClick?: (detailedListItem: DetailedListItem) => void;
+        onClose?: () => void;
+    };
+}
+export interface TopBarButtonProps {
+    topBarButton?: ChatItemButton;
+    onTopBarButtonClick?: (action: ChatItemButton) => void;
+}
+export declare class TopBarButton {
+    render: ExtendedHTMLElement;
+    private readonly props;
+    private overlay?;
+    private checklistSelectorContainer;
+    private overlayData;
+    private topBarButton;
+    private keyPressHandler;
+    constructor(props: TopBarButtonProps);
+    update(newProps: TopBarButtonProps): void;
+    closeOverlay(): void;
+    showOverlay(topBarButtonOverlay: TopBarButtonOverlayProps): void;
+    getTopBarButtonChildren(): Array<string | ExtendedHTMLElement>;
+    private readonly getItemGroups;
+    onTopBarButtonOverlayChanged(topBarButtonOverlay: DetailedList): void;
+}

package/dist/components/detailed-list/detailed-list.d.ts

@@ -4,7 +4,8 @@ export interface DetailedListWrapperProps {
     detailedList: DetailedList;
     descriptionTextDirection?: 'ltr' | 'rtl';
     onFilterValueChange?: (filterValues: Record<string, any>, isValid: boolean) => void;
-    onGroupActionClick?: (action: ChatItemButton) => void;
+    onGroupActionClick?: (action: ChatItemButton, groupName?: string) => void;
+    onGroupClick?: (groupName: string) => void;
     onItemSelect?: (detailedListItem: DetailedListItem) => void;
     onItemClick?: (detailedListItem: DetailedListItem) => void;
     onItemActionClick?: (action: ChatItemButton, detailedListItem?: DetailedListItem) => void;
@@ -22,6 +23,17 @@ export declare class DetailedListWrapper {
     private activeTargetElementIndex;
     private allSelectableDetailedListElements;
     constructor(props: DetailedListWrapperProps);
+    /**
+     * Handles scroll events to implement virtualization for the detailed list:
+     *
+     * 1. Initially creating empty placeholder blocks with appropriate height for each chunk of list items
+     * 2. On scroll, determining which blocks are visible in the viewport (or near it)
+     * 3. Dynamically rendering content only for visible blocks by:
+     *    - Adding DOM elements for blocks entering the viewport
+     *    - Removing DOM elements for blocks that are no longer visible
+     *
+     */
+    private readonly handleScroll;
     private readonly getHeader;
     private readonly getFilters;
     private readonly getFilterActions;
@@ -29,5 +41,5 @@ export declare class DetailedListWrapper {
     private readonly getDetailedListItemElements;
     readonly changeTarget: (direction: 'up' | 'down', snapOnLastAndFirst?: boolean, scrollIntoView?: boolean) => void;
     readonly getTargetElement: () => DetailedListItem | null;
-    readonly update: (detailedList: DetailedList) => void;
+    readonly update: (detailedList: DetailedList, preserveScrollPosition?: boolean) => void;
 }

package/dist/components/icon.d.ts

@@ -14,6 +14,7 @@ export declare enum MynahIcons {
     SEARCH = "search",
     PLUS = "plus",
     PAPER_CLIP = "paper-clip",
+    PIN = "pin",
     LIST_ADD = "list-add",
     TABS = "tabs",
     CHAT = "chat",

package/dist/components/overlay.d.ts

@@ -79,6 +79,13 @@ export declare class Overlay {
     private readonly guid;
     private readonly onClose;
     constructor(props: OverlayProps);
+    /**
+     * Applying a transform with a fractional pixel value causes bluriness on certain displays.
+     *
+     * Since transform uses --overlayTopPos which is a percentage of the overlay's height, and the height can be a fractional
+     * pixel value if line-height is fractional, this function rounds --overlayTopPos to an integer pixel value to prevent bluriness.
+     */
+    private readonly preventTransformBlur;
     close: () => void;
     private readonly windowBlurHandler;
     private readonly getCalculatedLeft;

package/dist/helper/quick-pick-data-handler.d.ts

@@ -1,5 +1,5 @@
 import { DetailedListItem, DetailedListItemGroup, QuickActionCommand, QuickActionCommandGroup } from '../static';
-export declare const filterQuickPickItems: (commands: QuickActionCommandGroup[], searchTerm: string) => QuickActionCommandGroup[];
+export declare const filterQuickPickItems: (commands: QuickActionCommandGroup[], searchTerm: string, hideSearchGroup?: boolean) => QuickActionCommandGroup[];
 export declare const MARK_OPEN = "<mark>";
 export declare const MARK_CLOSE = "</mark>";
 export declare const convertDetailedListGroupsToQuickActionCommandGroups: (detailedListItemGroups: DetailedListItemGroup[]) => QuickActionCommandGroup[];

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

@@ -21,6 +21,13 @@ declare const _default: {
         stickyCard: string;
         progress: string;
         label: string;
+        topBar: string;
+        topBarButton: string;
+        topBarContextPill: string;
+        topBarContextTooltip: string;
+        tobBarOverflowPill: string;
+        tobBarOverflowOverlay: string;
+        tobBarActionOverlay: string;
     };
     chat: {
         wrapper: string;

package/dist/main.d.ts

@@ -5,6 +5,7 @@
 import { RelevancyVoteType, FeedbackPayload, MynahUIDataModel, NotificationType, ChatItem, ChatItemAction, ChatPrompt, MynahUITabStoreModel, MynahUITabStoreTab, ConfigModel, ReferenceTrackerInformation, CodeSelectionType, Engagement, ChatItemFormItem, ChatItemButton, CardRenderDetails, PromptAttachmentType, QuickActionCommand, DetailedList, TreeNodeDetails, Action } from './static';
 import { DetailedListSheetProps } from './components/detailed-list/detailed-list-sheet';
 import { MynahUIDataStore } from './helper/store';
+import { TopBarButtonOverlayProps } from './components/chat-item/prompt-input/prompt-top-bar/top-bar-button';
 export { generateUID } from './helper/guid';
 export { ChatItemBodyRenderer, } from './helper/dom';
 export { AllowedAttributesInCustomRenderer, AllowedTagsInCustomRenderer } from './helper/sanitize';
@@ -82,6 +83,9 @@ export interface MynahUIProps {
     }, eventId?: string) => void;
     onPromptInputOptionChange?: (tabId: string, optionsValues: Record<string, string>, eventId?: string) => void;
     onPromptInputButtonClick?: (tabId: string, buttonId: string, eventId?: string) => void;
+    onPromptTopBarItemAdded?: (tabId: string, item: QuickActionCommand, eventId?: string) => void;
+    onPromptTopBarItemRemoved?: (tabId: string, item: QuickActionCommand, eventId?: string) => void;
+    onPromptTopBarButtonClick?: (tabId: string, button: ChatItemButton, eventId?: string) => void;
     /**
      * @deprecated since version 4.6.3. Will be dropped after version 5.x.x. Use {@link onFileClick} instead
      */
@@ -211,6 +215,10 @@ export declare class MynahUI {
      * Simply creates and shows a custom form
      */
     showCustomForm: (tabId: string, formItems?: ChatItemFormItem[], buttons?: ChatItemButton[], title?: string, description?: string) => void;
+    openTopBarButtonOverlay: (data: TopBarButtonOverlayProps) => {
+        update: (data: DetailedList) => void;
+        close: () => void;
+    };
     openDetailedList: (data: DetailedListSheetProps, showBackButton?: boolean) => {
         update: (data: DetailedList, showBackButton?: boolean) => void;
         close: () => void;