@aws/mynah-ui 4.11.2 → 4.13.0

package/dist/static.d.ts

@@ -4,6 +4,7 @@
  */
 import { MynahIcons } from './components/icon';
 import { ChatItemBodyRenderer } from './helper/dom';
+import { SelectAbstract, SelectProps, RadioGroupAbstract, RadioGroupProps, ButtonAbstract, ButtonProps, TextInputProps, TextInputAbstract, TextAreaProps, TextAreaAbstract } from './main';
 export interface QuickActionCommand {
     command: string;
     disabled?: boolean;
@@ -51,6 +52,10 @@ export interface MynahUIDataModel {
     */
     quickActionCommands?: QuickActionCommandGroup[];
     /**
+    * Context commands to show when user hits @ to the input any point
+    */
+    contextCommands?: QuickActionCommandGroup[];
+    /**
     * Placeholder to be shown on prompt input
     */
     promptInputPlaceholder?: string;
@@ -191,7 +196,7 @@ export interface ChatItem {
 }
 export interface ChatItemFormItem {
     id: string;
-    type: 'select' | 'textarea' | 'textinput' | 'numericinput' | 'stars' | 'radiogroup';
+    type: 'select' | 'textarea' | 'textinput' | 'numericinput' | 'stars' | 'radiogroup' | 'email';
     mandatory?: boolean;
     title?: string;
     placeholder?: string;
@@ -205,6 +210,7 @@ export interface ChatPrompt {
     prompt?: string;
     escapedPrompt?: string;
     command?: string;
+    context?: string[];
 }
 export interface ChatItemAction extends ChatPrompt {
     type?: string;
@@ -262,6 +268,7 @@ export declare enum KeyMap {
     SHIFT = "Shift",
     CONTROL = "Control",
     ALT = "Alt",
+    AT = "@",
     SLASH = "/",
     BACK_SLASH = "\\"
 }
@@ -361,6 +368,17 @@ export interface ConfigTexts {
     noTabsOpen: string;
     openNewTab: string;
 }
+type PickMatching<T, V> = {
+    [K in keyof T as T[K] extends V ? K : never]: T[K];
+};
+type ExtractMethods<T> = PickMatching<T, any>;
+export interface ComponentOverrides {
+    Button?: new (props: ButtonProps) => ExtractMethods<ButtonAbstract>;
+    RadioGroup?: new (props: RadioGroupProps) => ExtractMethods<RadioGroupAbstract>;
+    Select?: new (props: SelectProps) => ExtractMethods<SelectAbstract>;
+    TextInput?: new (props: TextInputProps) => ExtractMethods<TextInputAbstract>;
+    TextArea?: new (props: TextAreaProps) => ExtractMethods<TextAreaAbstract>;
+}
 export interface ConfigOptions {
     feedbackOptions: Array<{
         label: string;
@@ -376,7 +394,9 @@ export interface ConfigOptions {
 }
 export interface ConfigModel extends ConfigOptions {
     texts: Partial<ConfigTexts>;
+    componentOverrides: Partial<ComponentOverrides>;
 }
 export interface CardRenderDetails {
     totalNumberOfCodeBlocks?: number;
 }
+export {};

package/docs/CONFIG.md

@@ -0,0 +1,311 @@
+# MynahUI Config
+
+You can set the config from the constructor parameters while creating a new instance of `mynah-ui`.
+
+_**Note:** You cannot set it on runtime. It is getting used just once during the initialization._
+
+```typescript
+...
+interface ConfigModel {
+    // Do not forget that you have to provide all of them
+    // Config allows partial set of texts
+    texts: {
+        mainTitle?: string;
+        feedbackFormTitle?: string;
+        feedbackFormOptionsLabel?: string;
+        feedbackFormCommentLabel?: string;
+        feedbackThanks?: string;
+        feedbackReportButtonLabel?: string;
+        codeSuggestions?: string;
+        files?: string;
+        insertAtCursorLabel?: string;
+        copy?: string;
+        showMore?: string;
+        save?: string;
+        cancel?: string;
+        submit?: string;
+        pleaseSelect?: string;
+        stopGenerating?: string;
+        copyToClipboard?: string;
+        noMoreTabsTooltip?: string;
+        codeSuggestionWithReferenceTitle?: string;
+        spinnerText?: string;
+        tabCloseConfirmationMessage?: string;
+        tabCloseConfirmationKeepButton?: string;
+        tabCloseConfirmationCloseButton?: string;
+        noTabsOpen: string; // Supports markdown
+        openNewTab: string;
+    };
+    // Options to show up on the overlay feedback form
+    // after user clicks to downvote on a chat item
+    // and clicks 'Report' again
+    feedbackOptions: Array<{
+        label: string;
+        value: string;
+    }>;
+    tabBarButtons?: TabBarMainAction[]; // Tab bar buttons will be shown on the right of the tab
+    maxUserInput: number; // max number of chars for the input field
+    codeInsertToCursorEnabled?: boolean; // show or hide copy buttons on code blocks system wide
+    codeCopyToClipboardEnabled?: boolean; // show or hide insert to cursor buttons on code blocks system wide
+    autoFocus: boolean; // auto focuses to input panel after every action
+    maxTabs: number; // set 1 to hide tabs panel
+    showPromptField: boolean; // shows prompt field (default: true)
+}
+...
+```
+---
+
+<p><br/></p>
+
+
+# `tabBarButtons`
+
+You can put buttons on the right of the tab bar also with some inner buttons inside a menu. You can do it in two different ways. If you want the buttons globally available for every tab you can use the `tabBarButtons` in the config. If you want them set individually for different tabs check the **[DATAMODEL Documentation](./DATAMODEL.md#tabbarbuttons)**.
+
+```typescript
+const mynahUI = new MynahUI({
+    ...
+    config: {
+      ...
+      tabBarButtons: [
+        {
+          id: 'clear',
+          description: 'Clear messages in this tab',
+          icon: MynahIcons.REFRESH,
+        },
+        {
+          id: 'multi',
+          icon: MynahIcons.ELLIPSIS,
+          items: [
+            {
+              id: 'menu-action-1',
+              text: 'Menu action 1!',
+              icon: MynahIcons.CHAT,
+            },
+            {
+              id: 'menu-action-2',
+              text: 'Menu action 2!',
+              icon: MynahIcons.CODE_BLOCK,
+            },
+            {
+              id: 'menu-action-3',
+              text: 'Menu action 3!'
+            }
+          ]
+        }
+      ]
+    }
+    ...
+});
+```
+
+<p align="center">
+  <img src="./img/data-model/tabStore/tabBarButtons1.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+  <br/>
+  <img src="./img/data-model/tabStore/tabBarButtons2.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+
+
+# `texts`
+All static texts will be shown on UI. 
+Please take a look at each image to identify which text blongs to which item on UI.
+
+## mainTitle
+Default tab title text if it is not set through store data for that tab.
+
+<p align="center">
+  <img src="./img/texts/mainTitle.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## feedbackFormTitle, feedbackFormOptionsLabel, feedbackFormCommentLabel, submit, cancel
+<p align="center">
+  <img src="./img/texts/feedbackForm.png" alt="feedbackForm" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+
+---
+
+## fileTreeTitle, rootFolderTitle, feedbackFormCommentLabel, submit, cancel
+<p align="center">
+  <img src="./img/texts/fileTreeTitle.png" alt="fileTree" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+
+---
+
+## pleaseSelect
+<p align="center">
+  <img src="./img/texts/pleaseSelect.png" alt="feedbackForm" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## feedbackThanks, feedbackReportButtonLabel, showMore
+<p align="center">
+  <img src="./img/texts/voteAndSourceActions.png" alt="voteAndSourceActions" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## stopGenerating
+<p align="center">
+  <img src="./img/texts/stopGenerating.png" alt="stopGenerating" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## insertAtCursorLabel, copy
+<p align="center">
+  <img src="./img/texts/copyInsertToCursor.png" alt="copyInsertToCursor" style="border-radius: 10px; max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## codeSuggestions, files, codeSuggestionWithReferenceTitle
+<p align="center">
+  <img src="./img/texts/codeFileSuggestions.png" alt="codeFileSuggestions" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## spinnerText
+<p align="center">
+  <img src="./img/texts/spinnerText.png" alt="spinnerText" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## tabCloseConfirmationMessage, tabCloseConfirmationKeepButton, tabCloseConfirmationCloseButton
+<p align="center">
+  <img src="./img/texts/tabCloseConfirmation.png" alt="tabCloseConfirmation" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## noMoreTabsTooltip
+<p align="center">
+  <img src="./img/texts/noMoreTabs.png" alt="noMoreTabsTooltip" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+## noTabsOpen, openNewTab
+<p align="center">
+  <img src="./img/texts/noTabsOpen.png" alt="noTabsOpen" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+<p><br/></p>
+
+# `feedbackOptions`
+
+Feedback type options to be shown on feedback form.
+defaults:
+```typescript
+...
+feedbackOptions: [
+    {
+      value: 'inaccurate-response',
+      label: 'Inaccurate response',
+    },
+    {
+      value: 'harmful-content',
+      label: 'Harmful content'
+    },
+    {
+      value: 'overlap',
+      label: 'Overlaps with existing content'
+    },
+    {
+      value: 'incorrect-syntax',
+      label: 'Incorrect syntax'
+    },
+    {
+      value: 'buggy-code',
+      label: 'Buggy code'
+    },
+    {
+      value: 'low-quality',
+      label: 'Low quality'
+    },
+    {
+      value: 'other',
+      label: 'Other'
+    }
+  ],
+...
+```
+
+<p align="center">
+  <img src="./img/feedbackOptions.png" alt="feedbackOptions" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+<p><br/></p>
+
+# `maxTabs`
+Maximum number of tabs user/system can open in a single instance of `mynah-ui`.
+
+default: `1000`
+
+An important note here is that if you provide **`1`** to maxTabs, it will not show the tab bar at all. However you still need to add a tab then initially to show a content.
+
+And finally, if you try to add tabs more than given `maxTabs` amount while initializing the MynahUI with [Constructor Properties](./PROPERTIES.md), it will only generate the tabs till it reaches the `maxTabs` limit.
+
+_Assume that you've provided `1` for `maxTabs`._
+
+
+<p align="center">
+  <img src="./img/maxTabs1.png" alt="maxTabs1" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+<p><br/></p>
+
+# `autoFocus`
+Just auto focus to prompt input field after every response arrival or initialization.
+
+default: `true`
+
+---
+
+<p><br/></p>
+
+# `maxUserInput`
+Max number of chars user can insert into the prompt field. But, as might know you can also add code attachments under the prompt field. A treshold of `96` chars will be automatically reduced from the `maxUserInput`.
+
+**So beware that if you want 4000 chars exact, you need to give 4096 to the config.**
+
+default: `4096`
+
+---
+
+## `codeInsertToCursorEnabled` and `codeCopyToClipboardEnabled` (default: true)
+These two parameters allow you to make copy and insert buttons disabled system wide. If you want to disable it specifically for a message you can do it through `ChatItem` object. Please see [DATAMODEL Documentation](./DATAMODEL.md#codeinserttocursorenabled-and-codecopytoclipboardenabled-default-true).
+
+<p align="center">
+  <img src="./img/data-model/chatItems/codeInsertAndCopyButtons.png" alt="codeInsertAndCopy" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
+<p><br/></p>
+
+# `showPromptField`
+Show or hide the prompt input field completely. You may want to hide the prompt field by setting `showPromptField` to `false` to make the chat work one way only. Just to provide answers or information.
+
+default: `true`
+
+_If you set `showPromptField` to `false`_
+
+<p align="center">
+  <img src="./img/noPrompt.png" alt="noPrompt" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>