@aws/mynah-ui 2.0.0-beta.9.2 → 3.0.1

package/.eslintrc.js

@@ -0,0 +1,48 @@
+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": {
+    "@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/README.md

@@ -16,71 +16,27 @@ import { MynahUI } from '@aws/mynah-ui';
 
 export const createMynahUI = () => {
     const mynahUI = new MynahUI({
-        // initial UI state data
-        // It doesn't have to be matched with backend data
-        // but to update the UI and rerender its desired parts, 
-        // it expects the data in type of MynahUIDataModel.
-        storeData?: MynahUIDataModel;
-        
-        // All below items trigger when;
-        // User hits search button or enter inside query input
-        onSearch?: (
-            searchPayload: SearchPayload,
-            isFromHistory?: boolean,
-            isFromAutocomplete?: boolean
-        ) => void;
-
-        // UI is ready
+        rootSelector?: string;
+        defaults?: MynahUITabStoreTab;
+        tabs?: MynahUITabStoreModel;
+        config?: ConfigModel;
+        onShowMoreWebResultsClick?: (tabId: string, messageId: string) => void;
         onReady?: () => void;
-
-        // User votes a suggestion
-        onClickSuggestionVote?: (suggestion: Suggestion, vote: RelevancyVoteType) => void;
-        // User opens the detail view of selected code block
-        onClickCodeDetails?: (
-            code: string,
-            fileName?: string,
-            range?: {
-            start: { row: string; column?: string };
-            end?: { row: string; column?: string };
-            }
-        ) => void;
-
-        // Data store is reset
-        onResetStore?: () => void;
-
-        // Matching policy is changed (context items)
-        onChangeContext?: (changeType: ContextChangeType, queryContext: ContextType) => void;
-
-        // When navigation tab is changed
-        onNavigationTabChange?: (selectedTab: string) => void;
-
-        // User engages with a suggestion
-        onSuggestionEngagement?: (engagement: SuggestionEngagement) => void;
-
-        // User copies text from suggestion
-        onSuggestionClipboardInteraction?: (suggestionId: string, type?: string, text?: string) => void;
-
-        // User clicks to the title, clicks or copies the link of the suggestion
-        onSuggestionInteraction?: (eventName: SuggestionEventName, suggestion: Suggestion) => void;
-
-        // User sends feedback
-        onSendFeedback?: (feedbackPayload: FeedbackPayload) => void;
-
-        // Search history panel view opens
-        onRequestHistoryRecords?: (filterPayload: SearchHistoryFilters) => void;
-
-        // Autocomplete items list block opens
-        onRequestAutocompleteList?: (input: string) => void;
-
-        // User changes live search state
-        onChangeLiveSearchState?: (liveSearchState: LiveSearchState) => void;
-
-        // User selects and autocomplete item
-        onClickAutocompleteItem?: (
-            text: string,
-            currSelected?: number,
-            suggestionCount?: number
-        ) => void;
+        onVote?: (tabId: string, messageId: string, vote: RelevancyVoteType) => void;
+        onStopChatResponse?: (tabId: string) => void;
+        onResetStore?: (tabId: string) => void;
+        onChatPrompt?: (tabId: string, prompt: ChatPrompt) => void;
+        onFollowUpClicked?: (tabId: string, messageId: string, followUp: ChatItemFollowUp) => void;
+        onTabChange?: (tabId: string) => void;
+        onTabAdd?: (tabId: string) => void;
+        onTabRemove?: (tabId: string) => void;
+        onChatItemEngagement?: (tabId: string, messageId: string, engagement: Engagement) => void;
+        onCopyCodeToClipboard?: (tabId: string, messageId: string, code?: string, type?: CodeSelectionType, referenceTrackerInformation?: ReferenceTrackerInformation[]) => void;
+        onCodeInsertToCursorPosition?: (tabId: string, messageId: string, code?: string, type?: CodeSelectionType, referenceTrackerInformation?: ReferenceTrackerInformation[]) => void;
+        onSourceLinkClick?: (tabId: string, messageId: string, link: string, mouseEvent?: MouseEvent) => void;
+        onLinkClick?: (tabId: string, messageId: string, link: string, mouseEvent?: MouseEvent) => void;
+        onSendFeedback?: (tabId: string, feedbackPayload: FeedbackPayload) => void;
+        onOpenDiff?: (tabId: string, filePath: string, deleted: boolean, messageId?: string) => void;
     });
 }
 ```
@@ -92,37 +48,7 @@ import { MynahUI } from '@aws/mynah-ui';
 
 export const createMynahUI = () => {
     let mynahUI:MynahUI;
-    const getSuggestions = (searchPayload) => {
-        mynahUI.updateStore({loading: true});
-        // get suggestions list
-        const suggestions = await getSuggestions(searchPayload);
-        if(suggestions){
-            mynahUI.updateStore({suggestions, loading: false});
-        } else {
-            mynahUI.updateStore({loading: false});
-            mynahUI.notify({
-                content: "Couldn't get suggestions!",
-                type: NotificationType.ERROR,
-            });
-        }
-        
-    }
-    const mynahUI = new MynahUI({
-        ...,
-        onSearch: getSuggestions
-    });
-
-    // to update the store fully or partially
-    mynahUI.updateStore(...);
-
-    // set default values for the UI data store fully or partially
-    mynahUI.setStoreDefaults(...);
-
-    // get current search payload
-    mynahUI.getSearchPayload();
-
-    // Show a notification balloon
-    mynahUI.notify(...);
+    ...
 }
 ```
 
@@ -130,24 +56,18 @@ In addition to MynahUI class, there are also some exported type definitions that
 
 ``` typescript
 import {
-  AutocompleteItem,
-  SearchPayloadCodeSelection,
   FeedbackPayload,
   RelevancyVoteType,
-  LiveSearchState,
-  SearchPayload,
-  Suggestion,
-  ContextType,
-  SearchHistoryItem,
   EngagementType,
-  SuggestionEngagement,
-  SuggestionEventName,
-  SearchHistoryFilters,
+  Engagement,
   MynahUIDataModel,
-  ContextChangeType,
-  ContextSource,
-  ContextTypes,
   NotificationType,
+  ChatItem,
+  ChatItemFollowUp,
+  ChatItemType,
+  ChatPrompt,
+  SourceLink,
+  MynahIcons
 } from '@aws/mynah-ui';
 ```
 
@@ -163,9 +83,10 @@ import './custom-style.css';
 You can provide any of the following css custom property values:
 ``` css
 :root {
-    font-size: 1rem;
+    --mynah-font-family: ...;
+    font-size: ...;
     font-family: ...;
-
+    --mynah-max-width: ...;
     --mynah-sizing-base: ...;
     --mynah-sizing-half: ...;
     --mynah-sizing-1: ...;
@@ -187,19 +108,22 @@ You can provide any of the following css custom property values:
     --mynah-sizing-17: ...;
     --mynah-sizing-18: ...;
     --mynah-button-border-width: ...;
+    --mynah-border-width: ...;
 
-    --mynah-color-text-...: ...;
+    --mynah-color-text-default: ...;
     --mynah-color-text-strong: ...;
     --mynah-color-text-weak: ...;
     --mynah-color-text-link: ...;
     --mynah-color-text-input: ...;
 
     --mynah-color-bg: ...;
+    --mynah-color-bg-alt: ...;
+    --mynah-color-tab-active: ...;
     --mynah-color-light: ...;
 
     --mynah-color-deep: ...;
     --mynah-color-deep-reverse: ...;
-    --mynah-color-border-...: ...;
+    --mynah-color-border-default: ...;
     --mynah-color-input-bg: ...;
 
     --mynah-color-highlight: ...;
@@ -211,6 +135,18 @@ You can provide any of the following css custom property values:
     --mynah-color-context-reverse: ...;
     --mynah-color-context-filter: ...;
 
+    --mynah-color-syntax-bg: ...;
+    --mynah-color-syntax-variable: ...;
+    --mynah-color-syntax-function: ...;
+    --mynah-color-syntax-operator: ...;
+    --mynah-color-syntax-attr-value: ...;
+    --mynah-color-syntax-attr: ...;
+    --mynah-color-syntax-property: ...;
+    --mynah-color-syntax-comment: ...;
+    --mynah-color-syntax-code: ...;
+    --mynah-syntax-code-font-family: ...;
+    --mynah-syntax-code-font-size: ...;
+
     --mynah-color-status-info: ...;
     --mynah-color-status-success: ...;
     --mynah-color-status-warning: ...;
@@ -237,6 +173,7 @@ You can provide any of the following css custom property values:
     --mynah-shadow-prioritization-menu: ...;
     --mynah-shadow-feedback-form: ...;
 
+    --mynah-font-size-xxsmall: ...;
     --mynah-font-size-xsmall: ...;
     --mynah-font-size-small: ...;
     --mynah-font-size-medium: ...;
@@ -246,6 +183,7 @@ You can provide any of the following css custom property values:
     --mynah-card-radius: ...;
     --mynah-button-radius: ...;
 
+    --mynah-bottom-panel-transition: ...;
     --mynah-very-short-transition: ...;
     --mynah-short-transition-transform: ...;
     --mynah-long-transition: ...;
@@ -259,12 +197,13 @@ You can provide any of the following css custom property values:
     --mynah-short-transition-turbo-bounce: ...;
     --mynah-short-transition-bounce: ...;
 
-    --mynah-mask-image: ...;
+    --mynah-mask-image:  ...;
     --mynah-mask-image-rev: ...;
     --mynah-mask-image-main: ...;
     --mynah-mask-image-main-rev: ...;
-
     --mynah-mask-image-skeleton: ...;
+
+    --mynah-policy-group-filter: ...;
 }
 ```
 

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

@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { OnCopiedToClipboardFunction, OnInsertToCursorPositionFunction, ReferenceTrackerInformation } from '../../static';
+export declare const highlightersWithTooltip: {
+    start: {
+        markupStart: string;
+        markupAttributes: (markerIndex: string) => string;
+        markupEnd: string;
+    };
+    end: {
+        markup: string;
+    };
+};
+export interface CardBodyProps {
+    body: string;
+    children?: Array<ExtendedHTMLElement | HTMLElement | string | DomBuilderObject>;
+    highlightRangeWithTooltip?: ReferenceTrackerInformation[];
+    onLinkClick?: (url: string, e: MouseEvent) => void;
+    onCopiedToClipboard?: OnCopiedToClipboardFunction;
+    onInsertToCursorPosition?: OnInsertToCursorPositionFunction;
+}
+export declare class CardBody {
+    render: ExtendedHTMLElement;
+    props: CardBodyProps;
+    private highlightRangeTooltip;
+    private highlightRangeTooltipTimeout;
+    constructor(props: CardBodyProps);
+    private readonly processNode;
+    private readonly getReferenceTrackerInformationFromElement;
+    private readonly showHighlightRangeTooltip;
+    private readonly hideHighlightRangeTooltip;
+    private readonly getContentBodyChildren;
+}

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

@@ -0,0 +1,32 @@
+import { DomBuilderObject, ExtendedHTMLElement } from '../../helper/dom';
+import { EngagementType } from '../../static';
+export interface CardProps extends Partial<DomBuilderObject> {
+    border?: boolean;
+    background?: boolean;
+    padding?: 'small' | 'medium' | 'large' | 'none';
+    children?: Array<HTMLElement | ExtendedHTMLElement | string>;
+    onCardEngaged?: (engagement: {
+        engagementDurationTillTrigger: number;
+        engagementType: EngagementType;
+        totalMouseDistanceTraveled: {
+            x: number;
+            y: number;
+        };
+        selectionDistanceTraveled?: {
+            x: number;
+            y: number;
+            selectedText?: string | undefined;
+        };
+    }) => void;
+}
+export declare class Card {
+    private readonly props;
+    private engagementStartTime;
+    private totalMouseDistanceTraveled;
+    private previousMousePosition;
+    private mouseDownInfo;
+    render: ExtendedHTMLElement;
+    constructor(props: CardProps);
+    private readonly resetEngagement;
+    private readonly handleEngagement;
+}

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

@@ -4,25 +4,21 @@
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
 import { ChatItem } from '../../static';
-import { SuggestionCardBody } from '../suggestion-card/suggestion-card-body';
+import { CardBody } from '../card/card-body';
 export interface ChatItemCardProps {
     tabId: string;
     chatItem: ChatItem;
 }
 export declare class ChatItemCard {
-    private readonly props;
-    private readonly relatedContentWrapper;
-    private readonly referencesWrapper;
-    private readonly showMoreButtonBlock;
-    private relatedContentPreview;
-    private relatedContentPreviewTimeout;
+    readonly props: ChatItemCardProps;
     render: ExtendedHTMLElement;
-    suggestionCardBody: SuggestionCardBody;
+    contentBody: CardBody;
     chatAvatar: ExtendedHTMLElement;
+    private updateTimer;
     constructor(props: ChatItemCardProps);
-    private readonly checkIsMuted;
-    private readonly showLinkPreview;
-    private readonly hideLinkPreview;
+    private readonly generateCard;
+    private readonly getCardClasses;
+    private readonly getCardContent;
     private readonly getChatAvatar;
-    readonly updateAnswerBody: (body: ExtendedHTMLElement | HTMLElement | string) => void;
+    readonly updateCard: (updateWith: Partial<ChatItem>) => void;
 }

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

@@ -11,5 +11,9 @@ export interface ChatItemFollowUpProps {
 export declare class ChatItemFollowUpContainer {
     private readonly props;
     render: ExtendedHTMLElement;
+    private followupTooltip;
+    private followupTooltipTimeout;
     constructor(props: ChatItemFollowUpProps);
+    private readonly showCroppedFollowupText;
+    private readonly hideCroppedFollowupText;
 }

package/dist/components/chat-item/chat-item-source-links.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+import { SourceLink } from '../../static';
+export interface ChatItemSourceLinksContainerProps {
+    tabId: string;
+    messageId: string;
+    title?: string;
+    relatedContent?: SourceLink[];
+}
+export declare class ChatItemSourceLinksContainer {
+    private readonly props;
+    private readonly showMoreButtonBlock;
+    render: ExtendedHTMLElement;
+    chatAvatar: ExtendedHTMLElement;
+    constructor(props: ChatItemSourceLinksContainerProps);
+}

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

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+import { ReferenceTrackerInformation } from '../../static';
+export interface ChatItemTreeViewLicenseProps {
+    referenceSuggestionLabel: string;
+    references: ReferenceTrackerInformation[];
+}
+export declare class ChatItemTreeViewLicense {
+    render: ExtendedHTMLElement;
+    constructor(props: ChatItemTreeViewLicenseProps);
+    private readonly buildDropdownChildren;
+}

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

@@ -3,10 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
+import { ReferenceTrackerInformation } from '../../static';
 export interface ChatItemTreeViewWrapperProps {
     tabId: string;
     messageId: string;
     files: string[];
+    deletedFiles: string[];
+    referenceSuggestionLabel: string;
+    references: ReferenceTrackerInformation[];
 }
 export declare class ChatItemTreeViewWrapper {
     render: ExtendedHTMLElement;

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

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+export interface ChatPromptInputCommandProps {
+    command: string;
+    onRemoveClick: () => void;
+}
+export declare class ChatPromptInputCommand {
+    render: ExtendedHTMLElement;
+    private readonly props;
+    private readonly promptTextInputCommand;
+    constructor(props: ChatPromptInputCommandProps);
+    setCommand: (command: string) => void;
+}

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

@@ -0,0 +1,12 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ExtendedHTMLElement } from '../../helper/dom';
+export interface ChatPromptInputInfoProps {
+    tabId: string;
+}
+export declare class ChatPromptInputInfo {
+    render: ExtendedHTMLElement;
+    constructor(props: ChatPromptInputInfoProps);
+}

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

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
+export declare const MAX_USER_INPUT = 4000;
 export interface ChatPromptInputProps {
     tabId: string;
 }
@@ -10,20 +11,23 @@ export declare class ChatPromptInput {
     render: ExtendedHTMLElement;
     private readonly props;
     private readonly attachmentWrapper;
-    private readonly promptTextInputWrapper;
     private readonly promptTextInput;
-    private readonly promptTextInputSizer;
+    private readonly promptTextInputCommand;
+    private readonly remainingCharsIndicator;
     private readonly sendButton;
+    private readonly codeSnippet;
     private quickActionCommands;
     private commandSelector;
     private commandSelectorOpen;
-    private inputDisabled;
+    private selectedCommand;
     private attachment?;
     private filteredCommandsList;
     constructor(props: ChatPromptInputProps);
+    private readonly updateAvailableCharactersIndicator;
     private readonly handleInputKeydown;
     private readonly getQuickCommandActions;
-    private readonly calculateTextAreaHeight;
-    private readonly resetTextAreaHeight;
+    private readonly handleCommandSelection;
+    readonly clearTextArea: () => void;
+    readonly addText: (textToAdd: string) => void;
     private readonly sendPrompt;
 }

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { ExtendedHTMLElement } from '../../helper/dom';
-import { Suggestion } from '../../static';
+import { ChatItem } from '../../static';
 export interface ChatWrapperProps {
     onStopChatResponse?: (tabId: string) => void;
     tabId: string;
@@ -12,14 +12,13 @@ export declare class ChatWrapper {
     private readonly props;
     private readonly chatItemsContainer;
     private readonly intermediateBlockContainer;
+    private readonly promptInputElement;
     private readonly promptInput;
+    private readonly promptInfo;
     private lastChatItemCard;
     render: ExtendedHTMLElement;
     constructor(props: ChatWrapperProps);
     private readonly insertChatItem;
-    removeAllExceptAnswersAndPrompts: () => void;
-    updateLastCharAnswerStream: (updateWith: string | {
-        title: string | boolean;
-        suggestions: Suggestion[];
-    }) => void;
+    updateLastChatAnswer: (updateWith: Partial<ChatItem>) => void;
+    addToPrompt: (textToAdd: string) => void;
 }

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

@@ -0,0 +1,14 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+export interface ICodeSnippetWidgetProps {
+    tabId: string;
+    markdownText: string;
+}
+export declare class CodeSnippetWidget {
+    private readonly props;
+    private previewOverlay;
+    render: ExtendedHTMLElement;
+    constructor(props: ICodeSnippetWidgetProps);
+    private readonly showPreviewOverLay;
+    private readonly closePreviewOverLay;
+    private readonly renderCodeSnippetWidget;
+}

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

@@ -0,0 +1,16 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+export interface ICodeSnippetProps {
+    tabId: string;
+}
+export interface ISelectCodeSnippetEvent {
+    tabId: string;
+    selectedCodeSnippet?: string;
+}
+export declare class CodeSnippet {
+    private readonly _props;
+    private readonly _render;
+    constructor(props: ICodeSnippetProps);
+    get render(): ExtendedHTMLElement;
+    readonly updateSelectedCodeSnippet: (selectedCodeSnippet: string | undefined) => void;
+    readonly clear: () => void;
+}

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

@@ -0,0 +1,21 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+export interface IPromptTextInputProps {
+    tabId: string;
+    onKeydown: (e: KeyboardEvent) => void;
+    onInput?: (e: KeyboardEvent) => void;
+}
+export declare class PromptTextInput {
+    private readonly _props;
+    private readonly _render;
+    private readonly _promptTextInputSizer;
+    private readonly _promptTextInput;
+    constructor(props: IPromptTextInputProps);
+    get render(): ExtendedHTMLElement;
+    private readonly updatePromptTextInputSizer;
+    readonly clear: () => void;
+    readonly focus: () => void;
+    readonly getTextInputValue: () => string;
+    readonly updateTextInputValue: (value: string) => void;
+    readonly updateTextInputMaxLength: (maxLength: number) => void;
+    readonly updateTextInputPlaceholder: (text: string) => void;
+}

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

@@ -0,0 +1,11 @@
+import { ExtendedHTMLElement } from '../../../helper/dom';
+export interface ISendButtonProps {
+    tabId: string;
+    onClick: () => void;
+}
+export declare class SendButton {
+    private readonly _props;
+    private readonly _render;
+    constructor(props: ISendButtonProps);
+    get render(): ExtendedHTMLElement;
+}

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

@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DomBuilderObject, ExtendedHTMLElement } from '../helper/dom';
+interface CollapsibleContentProps {
+    title: string | ExtendedHTMLElement | HTMLElement | DomBuilderObject;
+    children: Array<string | ExtendedHTMLElement | HTMLElement | DomBuilderObject>;
+    classNames?: string[];
+    initialCollapsedState?: boolean;
+    onCollapseStateChange?: (collapsed: boolean) => void;
+}
+export declare class CollapsibleContent {
+    render: ExtendedHTMLElement;
+    private readonly props;
+    private readonly uid;
+    private icon;
+    constructor(props: CollapsibleContentProps);
+}
+export {};

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

@@ -8,10 +8,16 @@ export interface TabsProps {
 }
 export declare class Tabs {
     render: ExtendedHTMLElement;
-    private tabIdSubscriptions;
+    private tabIdTitleSubscriptions;
+    private tabIdChatItemsSubscriptions;
     private toggleGroup;
+    private previewOverlay;
     private readonly props;
     constructor(props: TabsProps);
     private readonly getTabOptionsFromTabStoreData;
     private readonly getTabsRender;
+    private readonly showPreviewOverLay;
+    private readonly closePreviewOverLay;
+    private readonly assignListener;
+    private readonly removeListenerAssignments;
 }