Link

The Link component provides the ability to customize anchor elements with four urgency styles

Props:

Examples

Let's take a closer look at the Link component and its different styles. In this code block, you can:

  • Create four different links with different Urgency options.

  • Create a link without style set up, the link will use its default style, which is Urgency.None.

  • Create a link for Olive Helps. By clicking this link, it will direct you to a new page.

  • Create a link to Update the Whisper. By clicking the link, it will update the Whisper. The updated Whisper should look like the screenshot below.

import { whisper } from '@oliveai/ldk';
import {
  TextAlign,
  Urgency,
  Whisper,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

export const linkWhisper = async () => {
  await whisper.create({
    label: 'Links',
    onClose: () => {
      console.debug('closed');
    },
    components: [
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('success');
        },
        text: `Urgency.Success`,
        style: Urgency.Success,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('warning');
        },
        text: `Urgency.Warning`,
        style: Urgency.Warning,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('error');
        },
        text: `Urgency.Error`,
        style: Urgency.Error,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('none');
        },
        text: `Urgency.None`,
        style: Urgency.None,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('default');
        },
        text: `Default`,
      },
      {
        type: WhisperComponentType.Link,
        text: `Olive Helps`,
        textAlign: TextAlign.Left,
        href: 'https://oliveai.com/developers/helps',
        onClick: () => {
          console.log('success');
        },
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        text: `Update the Whisper`,
        onClick: (_error: Error, onClickWhisper: Whisper) => {
          onClickWhisper.update({
            components: [
              {
                type: WhisperComponentType.Message,
                body: 'You just updated this whisper by clicking the link!',
              },
            ],
          });
        },
      },
    ],
  });
}

If you have any questions about Updating Whispers, please check Whisper Updates.

Last updated