@aws/mynah-ui 3.2.10 → 3.3.1

package/.eslintrc.js

@@ -18,6 +18,8 @@ module.exports = {
     "prettier"
   ],
   "rules": {
+    "no-case-declarations": "off",
+    "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/semi": [
       2,
       "always"

package/README.md

@@ -1,216 +1,26 @@
-<image width="100px" src="./src/components/icon/icons/chat.svg?raw=true" />
-
 # Mynah UI
+### *A Data & Event Drivent Chat Interface Library for Browsers and Webviews*
 
-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
-
-``` console
-npm install @aws/mynah-ui
-```
-
-## How to use
-When you import `@aws/mynah-ui` it provides you the `MynahUI` class to generate a new all-in-one object to create the UI. You can connect to user interaction events through the initial properties have provide to the UI.
-
-``` typescript
-import { MynahUI } from '@aws/mynah-ui';
-
-export const createMynahUI = () => {
-    const mynahUI = new MynahUI({
-        rootSelector?: string;
-        defaults?: MynahUITabStoreTab;
-        tabs?: MynahUITabStoreModel;
-        config?: ConfigModel;
-        onShowMoreWebResultsClick?: (tabId: string, messageId: string) => void;
-        onReady?: () => 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;
-    });
-}
-```
-
-MynahUI also provides some accessible functions to help developer show a notification or more importantly update the UI state data store. When you update the data store, it will automatically rerender the parts that is subscribed to that particular data part.
-
-``` typescript
-import { MynahUI } from '@aws/mynah-ui';
-
-export const createMynahUI = () => {
-    let mynahUI:MynahUI;
-    ...
-}
-```
-
-In addition to MynahUI class, there are also some exported type definitions that can be handy for function returns or proper usage of arguments.
-
-``` typescript
-import {
-  FeedbackPayload,
-  RelevancyVoteType,
-  EngagementType,
-  Engagement,
-  MynahUIDataModel,
-  NotificationType,
-  ChatItem,
-  ChatItemFollowUp,
-  ChatItemType,
-  ChatPrompt,
-  SourceLink,
-  MynahIcons
-} from '@aws/mynah-ui';
-```
-
-## Styles
-
-Almost all css parameters are connected to [css custom properties](https://www.w3.org/TR/css-variables-1/) to let developer easily adjust desired parameters.
-Provide your own styles file after the import of MynahUI.
-``` typescript
-import { MynahUI } from '@aws/mynah-ui';
-import './custom-style.css';
-```
-
-You can provide any of the following css custom property values:
-``` css
-:root {
-    --mynah-font-family: ...;
-    font-size: ...;
-    font-family: ...;
-    --mynah-max-width: ...;
-    --mynah-sizing-base: ...;
-    --mynah-sizing-half: ...;
-    --mynah-sizing-1: ...;
-    --mynah-sizing-2: ...;
-    --mynah-sizing-3: ...;
-    --mynah-sizing-4: ...;
-    --mynah-sizing-5: ...;
-    --mynah-sizing-6: ...;
-    --mynah-sizing-7: ...;
-    --mynah-sizing-8: ...;
-    --mynah-sizing-9: ...;
-    --mynah-sizing-10: ...;
-    --mynah-sizing-11: ...;
-    --mynah-sizing-12: ...;
-    --mynah-sizing-13: ...;
-    --mynah-sizing-14: ...;
-    --mynah-sizing-15: ...;
-    --mynah-sizing-16: ...;
-    --mynah-sizing-17: ...;
-    --mynah-sizing-18: ...;
-    --mynah-button-border-width: ...;
-    --mynah-border-width: ...;
-
-    --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-default: ...;
-    --mynah-color-input-bg: ...;
-
-    --mynah-color-highlight: ...;
-    --mynah-color-highlight-text: ...;
-
-    --mynah-color-context-must-contain: ...;
-    --mynah-color-context-should-contain: ...;
-    --mynah-color-context-must-not-contain: ...;
-    --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: ...;
-    --mynah-color-status-error: ...;
-
-    --mynah-color-button: ...;
-    --mynah-color-button-reverse: ...;
-
-    --mynah-color-alternate: ...;
-    --mynah-color-alternate-reverse: ...;
-
-    --mynah-color-code-bg: ...;
-    --mynah-color-code-text: ...;
-
-    --mynah-color-main: ...;
-    --mynah-color-main-reverse: ...;
-
-    --mynah-card-bg: ...;
-
-    --mynah-shadow-generic: ...;
-    --mynah-shadow-card: ...;
-    --mynah-shadow-card-more: ...;
-    --mynah-shadow-card-active: ...;
-    --mynah-shadow-overlay: ...;
-    --mynah-shadow-feedback-form: ...;
-
-    --mynah-font-size-xxsmall: ...;
-    --mynah-font-size-xsmall: ...;
-    --mynah-font-size-small: ...;
-    --mynah-font-size-medium: ...;
-    --mynah-font-size-large: ...;
-    --mynah-font-size-xlarge: ...;
+As you can understand from the title too, **Mynah UI** is a **_data and event_** driven chat interface for browsers and webviews on IDEs or any platform which supports latest web technologies which is also used by Amazon Q for [VSCode](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode) and [JetBrains](https://plugins.jetbrains.com/plugin/11349-aws-toolkit--amazon-q-codewhisperer-and-more) comes together with AWS Toolkit extension.
 
-    --mynah-card-radius: ...;
-    --mynah-button-radius: ...;
+Since it is not depending on any framework or a UI library, you can use it inside any web based project without a hassle. Reason behind that decision is to keep it highly configurable for theming to support various use cases. It works standalone, you just need to tell it where to render on the DOMTree.
 
-    --mynah-bottom-panel-transition: ...;
-    --mynah-very-short-transition: ...;
-    --mynah-short-transition-transform: ...;
-    --mynah-long-transition: ...;
-    --mynah-pretty-long-transition: ...;
-    --mynah-very-long-transition: ...;
-    --mynah-short-transition: ...;
-    --mynah-short-transition-rev: ...;
-    --mynah-short-transition-rev-opacity: ...;
-    --mynah-short-transition-reflection: ...;
-    --mynah-short-transition-turbo: ...;
-    --mynah-short-transition-turbo-bounce: ...;
-    --mynah-short-transition-bounce: ...;
+Please continue with one of the following guides:
 
-    --mynah-mask-image:  ...;
-    --mynah-mask-image-rev: ...;
-    --mynah-mask-image-main: ...;
-    --mynah-mask-image-main-rev: ...;
-    --mynah-mask-image-skeleton: ...;
+## How to setup, configure and use Mynah UI
+### [Startup Guide](./docs/STARTUP.md)
+### [Constructor Properties](./docs/PROPERTIES.md)
+### [Configuration](./docs/CONFIG.md)
+### [How to use MynahUI](./docs/USAGE.md)
+### [Data Model](./docs/DATAMODEL.md)
+### [Styling Configuration](./docs/STYLING.md)
 
-    --mynah-policy-group-filter: ...;
-}
-```
+<p align="center">
+  <img src="./docs/img/splash.gif" alt="MynahUI" style="max-width:1024px; width:100%;border: 1px solid #e0e0e0;">
+</p>
 
 ## Supported browsers
-**MynahUI** <em>-because of it's css structure-</em> only supports ever-green browsers including webkit-base WebUI renderers.
+**Mynah UI** <em>-because of it's extensive css structure-</em> only supports ever-green browsers including webkit based WebUI renderers.
 
 
 ## Security

package/THIRD-PARTY-LICENSES

@@ -25,3 +25,70 @@ THE SOFTWARE.
 
 ------
 
+** marked; version 7.0.3 -- https://github.com/markedjs/marked/
+
+MIT LICENSE
+
+Copyright (c) 2011-2022 Christopher Jeffrey.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+------
+
+** escape-html; version 1.0.3 -- https://github.com/component/escape-html/
+
+MIT License
+
+Copyright (c) 2012-2013 TJ Holowaychuk
+Copyright (c) 2015 Andreas Lubbe
+Copyright (c) 2015 Tiancheng "Timothy" Gu
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+------
+
+** unescape-html; version 1.1.0 -- https://github.com/ForbesLindesay/
+
+MIT LICENSE
+
+Copyright (c) 2013 Forbes Lindesay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

package/dist/__test__/main.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__test__/button.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/__test__/toggle.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helper/store.d.ts

@@ -15,6 +15,7 @@ export declare class MynahUIDataStore {
     constructor(tabId: string, initialData?: MynahUIDataModel);
     setDefaults: (defaults: MynahUIDataModel | null) => void;
     getDefaults: () => MynahUIDataModel | null;
+    getStore: () => MynahUIDataModel | null;
     subscribe: (storeKey: keyof MynahUIDataModel, handler: (newValue: any, oldValue?: any) => void) => string;
     unsubscribe: (storeKey: keyof MynahUIDataModel, subscriptionId: string) => void;
     getValue: (storeKey: keyof MynahUIDataModel) => any;

package/dist/main.d.ts

@@ -44,6 +44,8 @@ export declare class MynahUI {
     addChatItem: (tabId: string, chatItem: ChatItem) => void;
     updateLastChatAnswer: (tabId: string, updateWith: Partial<ChatItem>) => void;
     updateStore: (tabId: string | '', data: MynahUIDataModel) => string | undefined;
+    getSelectedTabId: () => string | undefined;
+    getAllTabs: () => MynahUITabStoreModel;
     notify: (props: {
         duration?: number;
         type?: NotificationType;