v4.21.3

This version adds a destroy function for completely resetting MynahUI state without needing to reinstantiate it.

What's Changed

• feat: add public destroy command for resetting MynahUI state by @jpinkney-aws in #204

Full Changelog: v4.21.2...v4.22.3

v4.21.2

This version fixes two minor issues related to the recently introduced up/down arrows prompt navigation (like in the terminal).

Fixed

1. When user is currently writing a prompt without sending it, and navigate through previous prompts via up/down arrows, and then goes back to the top of the list (current last unsent prompt), the unsent prompt was deleted, with this update the current unsent prompt is still visible and accessible. (#198)
2. In VSCode and JetBrains, we fix the way code attachments are shown (when navigating to previous prompts which have a code attachment) by removing ``` at the beginning and end of the code snippets and potentially avoiding any replacement of the first instance of ~~~~~~~~~~ in the code snippet (#200)

Full changelog: v4.21.1...v4.21.2

v4.21.1

This version fixes the font size issue on the footer (below prompt input field) and the line-height issue in general like the body content, tooltips, footer etc.

What's Changed

• Adjust footer text size by @dogusata in #197

Full Changelog: v4.21.0...v4.21.1

v4.21.0

This version adds a small quality of life improvement and fallback colors for the code syntax highlighter.

Added

• You can now access prompt history through the up/down arrows on the keyboard (like in the terminal), to easily modify and resend previous prompts (#186)

Fixed

• The updated syntax highlighting was having issues on several themes in several instances. Fallbacks have been added to combat these issues. (#192)

Full Changelog: v4.20.0...v4.21.0

v4.20.0

This version includes updateTabDefaults method addition to update the defaults for newly opened tabs.

Added

• updateTabDefaults to update default tab data for new tabs (see documentation)
• fillState for buttons to show their fill state only when they're in hover state or with flash and parent card is in hover state. (see documentation)
• Documentation for toggleSplashLoader

Updated

• tabbedCards to not show the tab switch buttons if there is only one tab
• Syntax highlighter styling to refine IDE compatibility

Also, added documentation.

Full Changelog: v4.19.0...v4.20.0

v4.19.0

This version includes the addition of the new spinner for streaming chat load states and also a new splash screen loader with the same spinner animation.

Added

• Splash screen loader animation

Fixed

• Border crops on followups, buttons and file lists
• Buttons vertical rendering order on narrow screens (bottom to top fixed to top to bottom)
• Cursor visibility during user 'Enter' prompt to trigger the quick action command

Updated

• Streaming card initial spinner animation
• Syntax highlighter to support IDE styles better
• Button colors with more background and clear readability
• Vulnerable dependencies

New Contributors

• @francescoopiccoli made their first contribution in #175
• @rahmaniaam made their first contribution in #184

Full Changelog: v4.18.1...v4.19.0

v4.18.1-beta.1

This beta release includes an improvement on status button styling for visibility purposes.

Updated

• Added a colored background with low opacity to status buttons and tweaked their styling to be more clear / accessible on different (darker) themes

Full Changelog: v4.18.1...v4.18.1-beta.1

v4.18.1

This release includes various bug fixes and improvements.

Updated

• Added quick action commands confirmation step
  • it requires user attention before selecting and directly running the commands
• Increased icon size and made icon color more vivid in Quick Actions command picker

Fixed

• File details and name unnecessary crop
• Chat container exceeds width of panel

New Contributors

• @natdurlik made their first contribution in #166

Full Changelog: v4.18.0...v4.18.1

v4.18.0

This version includes a bunch of UI adjustments and new functionalities. Most notably; the addition of welcome screens. You can find all the additions and changes below.

Added

tabbedContent

ChatItem object now has a new field called tabbedContent which you can use multiple ChatItems with different tab names for a tabbed view inside a ChatItem. The placement order will be at the end of the chat item contents just before the buttons.

Tip

If you want to use these tabbed cards after the buttons, please use them inside the footer attribute of the ChatItem which also accepts a ChatItem as its value.

tabbedContent.mov

tabbedContent Example data

mynahUI.addChatItem(tabId, {
        type: ChatItemType.ANSWER,
        hoverEffect: true,
        body: `### Scan
Identify and fix code issues before committing.`,
        icon: MynahIcons.BUG,
        buttons: [
          {
            status: 'clear',
            id: 'user-guide-scan',
            disabled: false,
            text: 'Read user guide'
          },
          {
            status: 'primary',
            disabled: false,
            icon: MynahIcons.RIGHT_OPEN,
            flash: 'once',
            id: 'quick-start-scan',
            text: `Quick start with **/scan**`
          }
      ],
      footer: {
            tabbedContent: [{
                label: 'Overview',
                value: 'overview',
                icon: MynahIcons.COMMENT,
                content:{
                fileList: {
                    fileTreeTitle: 'Suggestions',
                    filePaths: ['fruits/oranges.py', 'fruits/apples.py'],
                    details: {
                    'fruits/oranges.py': {
                        clickable: false,
                        icon: MynahIcons.PLUS,
                        status: 'success'
                    },
                    'fruits/apples.py': {
                        clickable: false,
                        icon: MynahIcons.MINUS,
                        status: 'error'
                    }
                    }
                }
                }
            },
            {
                label: 'Examples',
                value: 'examples',
                icon: MynahIcons.PLAY,
                content:{
                    body: `**Here are some examples you can find:**`,
                    customRenderer: `<img aspect-ratio src="https://d1.awsstatic.com/logos/aws-logo-lockups/poweredbyaws/PB_AWS_logo_RGB_REV_SQ.8c88ac215fe4e441dc42865dd6962ed4f444a90d.png" alt="Powered by AWS">`
                }
            }
        ]
});

buttons: new status options, flash, position for out-of-card buttons, new test

New status values

Model of the buttons item now contains two more status values: main and clear.

buttons Example data

mynahUI.addChatItem(tabId, {
    type: ChatItemType.ANSWER,
    messageId: new Date().getTime().toString(),
    body: `This is a card with actions inside!`,
    buttons: [
          {
              text: 'Action 1',
              id: 'action-1',
              status: 'info',
              icon: MynahIcons.CHAT
          },
          {
              text: 'Action 2',
              description: 'This action will not remove the card!',
              id: 'action-2',
              keepCardAfterClick: false, // So when this button is clicked, it will remove the whole card.
          },
          {
              text: 'Action 3',
              description: 'This is disabled for some reason!',
              id: 'action-3',
              disabled: true,
          },
          {
              text: 'Primary',
              description: 'This is colored!',
              id: 'action-3',
              status: 'primary',
          },
          {
              text: 'Main',
              description: 'This is more colored!',
              id: 'action-3',
              status: 'main',
          },
          {
              text: 'Clear',
              description: 'This is clear!',
              id: 'action-3',
              status: 'clear',
          },
      ],
});

Note

In version 5.X.X, these status values will be split into two different attributes: status and type

flash attribute to animate the button when parent card is hovered

Sometimes we may want to take attention to some action, without being annoying, you can flash the buttons and codeBlockActions with this new property.

button-flash-card-hover.mov

(Confirmation) buttons outside card

You can now make buttons appear after the container chat card. A common usage for this use case is to add confirmation and rejection buttons to a particular card.

Example code

mynahUI.addChatItem(tabId, {
    type: ChatItemType.ANSWER,
    messageId: new Date().getTime().toString(),
    body: 'Do you wish to continue?',
    buttons: [
        {
            id: 'confirmation-buttons-cancel',
            text: 'Cancel',
            status: 'error',
            icon: MynahIcons.CANCEL_CIRCLE,
            position: 'outside'
        },
        {
            id: 'confirmation-buttons-confirm',
            text: 'Confirm',
            status: 'success',
            icon: MynahIcons.OK_CIRCLED,
            position: 'outside'
        },
    ]
});

hoverEffect on ChatItem

There is a new field on ChatItem which allows you to add a hover effect to help popping out the card a little bit more. You can use hoverEffect for each individual card.

button-flash-card-hover.mov

New welcome screens (#155)

There are new welcome screens, used to give an introduction to the user and explain the chat bot's features. It makes use of the new tabbed cards and TitleDescriptionWithIcon component, and introduces a number of new options and related features.

Added a `compactMode`, which is dynamically changeable in the store of a particular tab

mynahUI.updateStore('tab-1', {
    compactMode: true,
})

Added the option to add a background to a tab (`tabBackground` in tab store), in the case of the welcome screens: a gradient background

mynahUI.updateStore('tab-1', {
    tabBackground: true
})

Added `TabHeaderDetails`, which is only visible when `showTabHeaderDetails` is set to `true`. This refers to the "Hi, I'm Amazon Q" welcome header seen on the initial welcome screen

mynahUI.updateStore('tab-1', {
    tabHeaderDetails: {
      icon: MynahIcons.Q,
      title: "Welcome to Q Developer",
      description: "What kind of questions you have?"
    },
})

You can now show / hide prompt input field's visibility, which is being used for the welcome screen pages without prompt fields at the bottom

mynahUI.updateStore('tab-1', {
    promptInputVisible: false,
})

You can now update the prompt input field's label

mynahUI.updateStore('tab-1', {
    promptInputLabel: 'Prompt input text label'
})

You can now update prompt input field's text content

mynahUI.updateStore('tab-1', {
    promptInputText: '/dev'
})

Check out the updated DATAMODEL.md for all new ways with interacting with welcome screens and related new features. A full preview of the new welcome screens can be found in the following video:

Untitled.mov

---

Updated

• Link (anchor) colors inside card body to improve visibility on several themes (#151)
• Scrollbar styling, now more subtle on darker themes (#148)
• Fixed <span> tags not being closed in (inline) code blocks (#157)
• Fixed file tree item's action icons shrinking when title is too long (#158)

Full Changelog: v4.17.1...v4.18.0

v4.17.1

This version includes a fix for the postinstall NPM script causing issues on VSCode. (#149)

Fixed

• Removed the global npm install -g liveserver installation on postinstall, this should now be installed manually (#149)
• Updated PR template to include checkboxes for testing on both VSCode and JetBrains