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