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