Whisper

The Whisper Aptitude provides the ability to display pieces of information (Whispers) in the Olive Helps sidebar.

API

create

Displays a new Whisper in Olive Helps based on the configuration provided in the method signature.

import { whisper } from '@oliveai/ldk';

const whisperConfig = {
    label: 'The Label of the Whisper',
    onClose: () => {
        // Called when the 'X' button is clicked to close this whisper
    },
    components: [
        // Components supplied here are rendered in the whisper in the
        // order that they are provided
    ],
};

whisper.create(whisperConfig);

Example

Whispers are the main way that your Loop conveys and receives information from your user. They also serve as the primary UI for your Loop. As such, the Whisper Aptitude will more than likely one of your most commonly used resources.

As an initial example, let's say that we want to display to the user a simple message with a link. To achieve this, we would use both the Markdown and Link component like this:

import { whisper } from '@oliveai/ldk';

const whisperConfig = {
    label: 'Link To Documentation',
    onClose: () => {
        // Does nothing
    },
    components: [
        {
            body: 'Check out this documentation!',
            type: WhisperComponentType.Markdown,
        },
        {
            href: 'https://www.oliveai.dev',
            style: Urgency.None,
            text: 'https://www.oliveai.dev',
            textAlign: TextAlign.Left,
            type: WhisperComponentType.Link,
        },
    ],
};

whisper.create(whisperConfig);

This will generate a Whisper that looks like this:

But this is just a brief explanation of a very simple use case. More examples can be found in the Whisper Updates or JSX Whispers articles.

Permissions

To use the Whisper Aptitude, simply set the following permissions in your package.json under the ldk object.

Please see our Permissions page for more information.

...
"ldk": {
  "permissions": {
    "whisper": {},
    ...
  }
},
...