Message

Props:
Properties
Descriptions
Required
Default
copyable
Copies the body text.
​
body
Text that displays under the header and supports markdown.
​
header
Bolded text that goes above the body text.
​
onCopy
Executes the provided function when the body is copied.
​
style
Background of the message component. 
​
textAlign
TextAlign.Left - The inline contents are aligned to the left edge of the whisper content area.

TextAlign.Right - The inline contents are aligned to the right edge of the whisper content area.

TextAlign.Center - The inline contents are centered within the whisper content area.
TextAlign.Left
tooltip
Text that appears when hovering over the message component.
​
Examples
Now let's take a closer look of Message component. Below we have five separate Message components with different style prop values and a markdown link.
Five separate List Pair components with different style prop values and a markdown link
​
Type Script Example
React Example
import { whisper } from '@oliveai/ldk';
import {
  Color,
  TextAlign,
  Urgency,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
​
export const messageWhisper = async () => {
  await whisper.create({
    label: 'Olive Helps Message Example Loop',
    components: [
      {
          header: 'Message None',
          body: 'Message None [Link](https://docs.oliveai.dev/)',
          style: Urgency.None,
          type: WhisperComponentType.Message,
        },
        {
          header: 'Message Error Left',
          body: 'Message Error Left [Link](https://docs.oliveai.dev/)',
          style: Urgency.Error,
          textAlign: TextAlign.Left,
          type: WhisperComponentType.Message,
        },
        {
          header: 'Message Success Center',
          body: 'Message Success Center [Link](https://docs.oliveai.dev/)',
          style: Urgency.Success,
          textAlign: TextAlign.Center,
          type: WhisperComponentType.Message,
        },
        {
          header: 'Message Warning Right',
          body: 'Message Warning Right [Link](https://docs.oliveai.dev/)',
          style: Urgency.Warning,
          textAlign: TextAlign.Right,
          type: WhisperComponentType.Message,
        },
        {
          header: 'Message Color Center',
          body: 'Message Color Center [Link](https://docs.oliveai.dev/)',
          style: Color.Accent,
          textAlign: TextAlign.Center,
          type: WhisperComponentType.Message,
        },
    ],
  });
}
​
import { React, ReactWhisper } from '@oliveai/ldk';
import { Color, TextAlign, Urgency } from '@oliveai/ldk/dist/whisper/types';
​
ReactWhisper.renderNewWhisper(
  <oh-whisper label="Olive Helps Message Example Loop" onClose={() => {}}>
    <oh-message
      header="Message None"
      body="Message None [Link](https://docs.oliveai.dev/)"
      style={Urgency.None}
    />
    <oh-message
      header="Message Error Left"
      body="Message Error Left [Link](https://docs.oliveai.dev/)"
      style={Urgency.Error}
      textAlign={TextAlign.Left}
    />
    <oh-message
      header="Message Success Center"
      body="Message Success Center [Link](https://docs.oliveai.dev/)"
      style={Urgency.Success}
      textAlign={TextAlign.Center}
    />
    <oh-message
      header="Message Warning Right"
      body="Message Warning Right [Link](https://docs.oliveai.dev/)"
      style={Urgency.Warning}
      textAlign={TextAlign.Right}
    />
    <oh-message
      header="Message Color Center"
      body="Message Color Center [Link](https://docs.oliveai.dev/)"
      style={Color.Accent}
      textAlign={TextAlign.Center}
    />
  </oh-whisper>
);
​
​
​

Whisper Components - Previous

Markdown

Next - Whisper Components

Password

Last modified 4mo ago

Copy link

On this page

Props:

Examples