This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section.
<%= 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" }) %>
Avoid changing the format of this kit. Keep the layout true to its original design.