@aws/mynah-ui 4.16.1-beta.1 → 4.17.0

package/dist/static.d.ts

@@ -164,11 +164,12 @@ export declare enum ChatItemType {
     ANSWER_PART = "answer-part",
     CODE_RESULT = "code-result"
 }
+export type Status = 'info' | 'success' | 'warning' | 'error';
 export interface ProgressField {
     /**
      * Prompt input progress status
      */
-    status?: 'default' | 'info' | 'success' | 'warning' | 'error';
+    status?: 'default' | Status;
     /**
     * Prompt input progress text
     */
@@ -187,7 +188,7 @@ export interface ProgressField {
     actions?: ChatItemButton[];
 }
 export interface TreeNodeDetails {
-    status?: 'info' | 'success' | 'warning' | 'error';
+    status?: Status;
     icon?: MynahIcons;
     label?: string;
     description?: string;
@@ -215,6 +216,17 @@ export interface ChatItemContent {
     buttons?: ChatItemButton[];
     formItems?: ChatItemFormItem[];
     footer?: ChatItemContent;
+    informationCard?: {
+        title?: string;
+        status?: {
+            status?: Status;
+            icon?: MynahIcons;
+            body?: string;
+        };
+        description?: string;
+        icon?: MynahIcons;
+        content: ChatItemContent;
+    };
     codeBlockActions?: CodeBlockActions;
 }
 export interface ChatItem extends ChatItemContent {
@@ -223,7 +235,7 @@ export interface ChatItem extends ChatItemContent {
     snapToTop?: boolean;
     canBeVoted?: boolean;
     icon?: MynahIcons;
-    status?: 'info' | 'success' | 'warning' | 'error';
+    status?: Status;
 }
 export interface ChatItemFormItem {
     id: string;
@@ -248,7 +260,7 @@ export interface ChatItemAction extends ChatPrompt {
     pillText: string;
     disabled?: boolean;
     description?: string;
-    status?: 'primary' | 'info' | 'success' | 'warning' | 'error';
+    status?: 'primary' | Status;
     icon?: MynahIcons;
 }
 export interface ChatItemButton {
@@ -258,7 +270,7 @@ export interface ChatItemButton {
     id: string;
     disabled?: boolean;
     description?: string;
-    status?: 'primary' | 'info' | 'success' | 'warning' | 'error';
+    status?: 'primary' | Status;
     icon?: MynahIcons;
 }
 export interface TabBarAction {
@@ -266,7 +278,7 @@ export interface TabBarAction {
     id: string;
     disabled?: boolean;
     description?: string;
-    status?: 'info' | 'success' | 'warning' | 'error';
+    status?: Status;
     icon?: MynahIcons;
 }
 export interface TabBarMainAction extends TabBarAction {
@@ -277,7 +289,7 @@ export interface FileNodeAction {
     label?: string;
     disabled?: boolean;
     description?: string;
-    status?: 'info' | 'success' | 'warning' | 'error';
+    status?: Status;
     icon: MynahIcons;
 }
 export declare enum KeyMap {

package/docs/DATAMODEL.md

@@ -716,6 +716,17 @@ interface ChatItemContent {
   buttons?: ChatItemButton[];
   formItems?: ChatItemFormItem[];
   footer?: ChatItemContent;
+  informationCard?: {
+    title?: string;
+    status?: {
+      status?: Status;
+      icon?: MynahIcons;
+      body?: string;
+    };
+    description?: string;
+    icon?: MynahIcons;
+    content: ChatItemContent;
+  };
   codeBlockActions?: CodeBlockActions;
 }
 
@@ -1562,6 +1573,44 @@ mynahUI.addChatItem(tabId, {
 
 ---
 
+### `informationCard`
+
+Show a styled card for e.g. introducing or highlighting a particular feature.
+
+```typescript
+mynahUI.addChatItem(tabId, {
+    messageId: generateUID(),
+    type: ChatItemType.ANSWER,
+    informationCard: {
+        title: 'Information card',
+        description: 'With a description below the title and success status.',
+        icon: MynahIcons.BUG,
+        content: {
+            body: 'Some card body here'
+        },
+        status: {
+            status: 'success',
+            icon: MynahIcons.THUMBS_UP,
+            body: 'Successfully completed this task!'
+        }
+    },
+});
+```
+
+Information cards have a top section, including a title, description, and icon. The content of the card can be defined in the `content.body`. 
+
+A status can also be added to emphasize a particular state. The `status.status` supports either `success`, `warning`, or `error`. An icon and body message can also be defined.
+
+<p align="center">
+  <img src="./img/data-model/chatItems/information-card.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+<p align="center">
+  <img src="./img/data-model/chatItems/information-card-statuses.jpg" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+---
+
 ## `buttons`
 It allows you to add actions inside a chat item card. **BUT, beware that when those actions are clicked if you set the `keepCardAfterClick` to false, they will remove the card they are in.**. 
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.16.1-beta.1",
+    "version": "4.17.0",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",
@@ -19,7 +19,9 @@
         "packdemo": "cd ./example && npm run pack",
         "watch": "webpack --config webpack.config.js --mode development --watch",
         "watch:example": "cd ./example && npm run watch",
-        "start:example": "cd ./example && npm install && npm run build && npm run dev",
+        "watch:web": "run-p watch watch:example serve:example",
+        "serve:example": "live-server --port=9000 example/dist",
+        "start:example": "cd ./example && npm install && npm run build && cd .. && npm run watch:web",
         "dev": "npm run clean && npm install && npm run build && npm run start:example",
         "lint-fix": "npx eslint \"./**\" --fix",
         "lint": "npx eslint \"./**\"",
@@ -29,13 +31,13 @@
         "tests:e2e": "cd ./ui-tests && npm install && npm run prepare && npm run e2e",
         "api-docs": "npx typedoc src/main.ts --out ./api-docs",
         "api-doc-deploy": "npx typedoc src/main.ts --out ./example/dist/api-doc",
-        "postinstall": "node postinstall.js",
+        "postinstall": "npm install -g live-server && node postinstall.js",
         "prepare": "npx husky"
     },
     "dependencies": {
         "escape-html": "^1.0.3",
         "just-clone": "^6.2.0",
-        "marked": "^12.0.2",
+        "marked": "^14.1.0",
         "prismjs": "1.29.0",
         "sanitize-html": "^2.12.1",
         "unescape-html": "^1.1.0"

package/ui-tests/dist/index.html

@@ -0,0 +1,9 @@
+<html theme="base-light">
+    <head>
+        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
+    <script defer src="main.js"></script></head>
+
+    <body>
+        <div id="mynah-ui-wrapper"></div>
+    </body>
+</html>