LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples

Was this helpful?

  1. Whisper Components

Message

Message is a banner that shows important content.

PreviousMarkdownNextPassword

Last updated 3 years ago

Was this helpful?

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.

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>
);

Five separate List Pair components with different style prop values and a markdown link