Message

Compose sender identity, message content, metadata, and contextual actions.

Can you review the September close?

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultMessage =
    Message.create "Jordan Lee" (p { "Can you review the September close?" })
    |> Message.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add message --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultMessage =
    Message.create "Jordan Lee" (p { "Can you review the September close?" })
    |> Message.render

Sender and receiver

Can you review the September close before lunch?

Yes. I’ll add notes to the two entries that need attention.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let messageRows =
    div {
        _class "grid gap-5"
        Message.create "Jordan Lee" (p { "Can you review the September close before lunch?" })
        |> Message.withAvatar (Avatar.create "Jordan Lee" "JL" |> Avatar.withSize AvatarSize.Small |> Avatar.render)
        |> Message.withMetadata "09:12"
        |> Message.render
        Message.create "Andy Meier" (p { "Yes. I’ll add notes to the two entries that need attention." })
        |> Message.withSide MessageSide.Sender
        |> Message.withMetadata "09:14"
        |> Message.withStatus "Delivered"
        |> Message.render
    }

Metadata and actions without an avatar

The export is ready. It contains 184 account records.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let messageWithoutAvatar =
    Message.create "Support bot" (p { _class "whitespace-pre-wrap"; "The export is ready.\nIt contains 184 account records." })
    |> Message.withMetadata "Just now"
    |> Message.withActions (Button.create (ButtonContent.Text "Download") |> Button.withVariant ButtonVariant.Ghost |> Button.withSize ControlSize.Small |> Button.render)
    |> Message.render

API reference

type MessageSide =
    | Sender
    | Receiver

type MessageConfig

module Message =
    val create : sender:string -> content:HtmlElement -> MessageConfig
    val withSide : side:MessageSide -> config:MessageConfig -> MessageConfig
    val withAvatar : avatar:HtmlElement -> config:MessageConfig -> MessageConfig
    val withMetadata : metadata:string -> config:MessageConfig -> MessageConfig
    val withStatus : status:string -> config:MessageConfig -> MessageConfig
    val withActions : actions:HtmlElement -> config:MessageConfig -> MessageConfig
    val withAttributes : attributes:HtmlAttribute list -> config:MessageConfig -> MessageConfig
    val render : config:MessageConfig -> HtmlElement