Message

<%= pb_rails("message", props: {
  label: "Anna Black",
  message: "How can we assist you today?",
  timestamp: "20 seconds ago",
  avatar_name: "Mike Bishop",
  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
  avatar_status: "online"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Patrick Welch",
  message: "We'll escalate this issue to a Senior Support agent.",
  timestamp: "9 minutes ago",
  avatar_name: "Wade Winningham",
  avatar_url: "https://randomuser.me/api/portraits/men/14.jpg",
  align_timestamp: "left"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Lucille Sanchez",
  message: "Application for Kate Smith is waiting for your approval",
  timestamp: "4 hours ago",
  avatar_name: "Becca Jacobs",
  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Beverly Reyes",
  message: "We're so sorry you had a bad experience!",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Keith Craig",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  message: "We're so sorry you had a bad experience!",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) do %>
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<% end %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) do %>
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<% end %>

<%= pb_rails("message", props: {
  label: "Anna Black",
  message: "Hover over me to check out the real time I was made!",
  timestamp: "4 hours ago",
  timestamp_object: DateTime.current,
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>
<br><br>
<%= pb_rails("message", props: {
  label: "Becca Jacobs",
  message: "Application for Kate Smith is waiting for your approval",
  timestamp: "12.20p",
  align_timestamp: "left",
  timestamp_object: DateTime.current,
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>