Message
Message is a banner that shows important content.

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!
​
​
Copy link