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
1
import { whisper } from '@oliveai/ldk';
2
import {
3
  Color,
4
  TextAlign,
5
  Urgency,
6
  WhisperComponentType,
7
} from '@oliveai/ldk/dist/whisper/types';
8
​
9
export const messageWhisper = async () => {
10
  await whisper.create({
11
    label: 'Olive Helps Message Example Loop',
12
    components: [
13
      {
14
          header: 'Message None',
15
          body: 'Message None [Link](https://docs.oliveai.dev/)',
16
          style: Urgency.None,
17
          type: WhisperComponentType.Message,
18
        },
19
        {
20
          header: 'Message Error Left',
21
          body: 'Message Error Left [Link](https://docs.oliveai.dev/)',
22
          style: Urgency.Error,
23
          textAlign: TextAlign.Left,
24
          type: WhisperComponentType.Message,
25
        },
26
        {
27
          header: 'Message Success Center',
28
          body: 'Message Success Center [Link](https://docs.oliveai.dev/)',
29
          style: Urgency.Success,
30
          textAlign: TextAlign.Center,
31
          type: WhisperComponentType.Message,
32
        },
33
        {
34
          header: 'Message Warning Right',
35
          body: 'Message Warning Right [Link](https://docs.oliveai.dev/)',
36
          style: Urgency.Warning,
37
          textAlign: TextAlign.Right,
38
          type: WhisperComponentType.Message,
39
        },
40
        {
41
          header: 'Message Color Center',
42
          body: 'Message Color Center [Link](https://docs.oliveai.dev/)',
43
          style: Color.Accent,
44
          textAlign: TextAlign.Center,
45
          type: WhisperComponentType.Message,
46
        },
47
    ],
48
  });
49
}
50
​
Copied!
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import { Color, TextAlign, Urgency } from '@oliveai/ldk/dist/whisper/types';
3
​
4
ReactWhisper.renderNewWhisper(
5
  <oh-whisper label="Olive Helps Message Example Loop" onClose={() => {}}>
6
    <oh-message
7
      header="Message None"
8
      body="Message None [Link](https://docs.oliveai.dev/)"
9
      style={Urgency.None}
10
    />
11
    <oh-message
12
      header="Message Error Left"
13
      body="Message Error Left [Link](https://docs.oliveai.dev/)"
14
      style={Urgency.Error}
15
      textAlign={TextAlign.Left}
16
    />
17
    <oh-message
18
      header="Message Success Center"
19
      body="Message Success Center [Link](https://docs.oliveai.dev/)"
20
      style={Urgency.Success}
21
      textAlign={TextAlign.Center}
22
    />
23
    <oh-message
24
      header="Message Warning Right"
25
      body="Message Warning Right [Link](https://docs.oliveai.dev/)"
26
      style={Urgency.Warning}
27
      textAlign={TextAlign.Right}
28
    />
29
    <oh-message
30
      header="Message Color Center"
31
      body="Message Color Center [Link](https://docs.oliveai.dev/)"
32
      style={Color.Accent}
33
      textAlign={TextAlign.Center}
34
    />
35
  </oh-whisper>
36
);
37
​
Copied!
​
​

Whisper Components - Previous

Markdown

Next - Whisper Components

Password

Last modified 21d ago

Copy link

Contents

Props:

Examples