Message
Message is a banner that shows important content.
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. | |
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>
);
Last modified 1yr ago