Message

This multi kit consists of a an avatar, a status, a caption, a body text, and a time stamp, all of which are optional.

Default

message-default


VStack(alignment: .leading, spacing: Spacing.small) {
  PBMessage(
    avatar: AnyView(picAnna),
    label: "Anna Black",
    message: "How can we assist you today?",
    timestamp: Date().addingTimeInterval(-20)
  )

  PBMessage(
    avatar: AnyView(picPatric),
    label: "Patrick Welch",
    message: "We will escalate this issue to a Senior Support agent.",
    timestamp: Date().addingTimeInterval(-540),
    timestampAlignment: .leading
  )

  PBMessage(
    avatar: AnyView(picLuccile),
    label: "Lucille Sanchez",
    message: "Application for Kate Smith is waiting for your approval",
    timestamp: Date().addingTimeInterval(-200000)
  )

  PBMessage(
    avatar: AnyView(PBAvatar(name: "Beverly Reyes", size: .xSmall)),
    label: "Beverly Reyes",
    message: "We are so sorry you had a bad experience!",
    timestamp: Date().addingTimeInterval(-200000)
  )

  PBMessage(
    label: "Keith Craig",
    message: "Please hold for one moment, I will check with my manager.",
    timestamp: Date().addingTimeInterval(-200000)
  ) {}

  PBMessage(
    label: "Keith Craig",
    timestamp: Date().addingTimeInterval(-200000)
  ) {
    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
  }

  PBMessage(
    label: "Keith Craig",
    message: "Please hold for one moment, I will check with my manager.",
    timestamp: Date().addingTimeInterval(-200000)
  ) {
    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
  }
}

Props

Name Type Description Default Values
Avatar AnyView Sets avatar image nil
Label String Sets the name of the sender ""
Message String Sets the message text nil
Timestamp Date Adds a date nil
Timestamp Alignment TimestampAlignment Changes the style of the timestamp .trailing .leading .trailing
Change TimeStamp On Hover Bool Changes the timestamp hover functionality false true false
Vertical Padding CGFloat Changes vertical padding Spacing.xSmall Spacing.none Spacing.xxSmall Spacing.xSmall Spacing.small Spacing.medium Spacing.large Spacing.xLarge
Horizontal Padding CGFloat Changes horizontal padding Spacing.xSmall Spacing.none Spacing.xxSmall Spacing.xSmall Spacing.small Spacing.medium Spacing.large Spacing.xLarge
Timestamp Variant PBTimestamp.Variant Changes the style of the Message .standard .standard .hideUserElapsed