Overview of the Phoenix and LiveView chat bubble Component
The Mishka Chelekom chat component is a Phoenix LiveView component that enables developers to create interactive and customizable chat bubbles, perfect for real-time messaging and communication within applications. It offers flexibility in layout, allowing for easy adjustment of size, colors, and message alignment, ensuring a polished and user-friendly look.
This Phoenix LiveView component also supports adding avatars , message status, and metadata, making it ideal for improving both the visual appeal and clarity of chat interfaces. With its responsive design and ease of use, this chat bubble component enhances user engagement and communication.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.
Chat section component in Phenix LiveView chat component
The
chat_section
component is used inside the
chat
component to create individual chat bubbles. It provides a structured layout for displaying messages, ensuring each chat bubble is distinct and customizable. The
chat_section
is essential for building clean and user-friendly chat interfaces, improving the readability and flow of conversations within the application.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat> <.chat_section> <div>Shahryar Tavakkoli</div> <p>Mishka Chelekom is easy to install.</p> </.chat_section> </.chat>
Chat section status slot
The
status
slot in the
chat_section
component allows developers to display important metadata related to each chat message, such as the time a message was sent and its delivery status. By including attributes like
time
to show when the message was delivered and
deliver
to indicate its status, the
status
slot provides a clear, user-friendly way to inform users about the state of their messages, enhancing the overall chat experience.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat> <.chat_section> <div>Shahryar Tavakkoli</div> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Chat meta slot
The
meta
slot in the
chat_section
component offers flexibility to include any custom metadata or additional information related to the chat message. Since it accepts HTML, you can display various elements like icons, SVGs, or even custom components to represent delivery status, user information, or other message-related details. This slot gives you the freedom to go beyond basic text or status indicators, allowing for a more enriched and visually dynamic presentation of chat metadata.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat> <.chat_section> <div>Shahryar Tavakkoli</div> <p>Mishka Chelekom is easy to install.</p> <:meta> <div class="flex justify-between items-center"> <div>20:40</div> <.icon name="hero-check" /> </div> </:meta> </.chat_section> </.chat>
Chat section font weight prop
The
font_weight
prop in the
chat_section
component allows you to control the thickness of the text displayed within the chat bubble. By using Tailwind CSS classes like
font-light
,
font-normal
, or
font-bold
, you can easily customize the text's appearance based on your design needs. This provides flexibility in making the chat message text stand out or appear more subtle, depending on the context of the message.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat> <.chat_section font_weight="font-bold"> <div>Shahryar Tavakkoli</div> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat> <.chat_section font_weight="font-silver"> <div>Shahryar Tavakkoli</div> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Default variant of Phoenix and LiveView chat component
The default variant of the Mishka Chelekom chat automatically applies a solid background and border, ideal for primary actions. With just a single prop, you can choose from a variety of colors.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="primary"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="white"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dark"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="secondary"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="success"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="warning"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="danger"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="info"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="silver"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="misc"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dawn"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Outline variant of chat component
With the
variant="outline"
prop, the chat has a transparent background and a border available in various colors.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat color="natural" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="primary" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="secondary" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="success" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="warning" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="danger" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="info" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="silver" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="misc" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dawn" variant="outline"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Shadow variant of chat component
With the
variant="shadow"
prop, the chat resembles the default style but includes a shadow effect, adding depth.
Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.
<.chat color="natural" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="primary" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="secondary" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="success" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="warning" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="danger" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="info" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="silver" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="misc" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dawn" variant="shadow"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Bordered variant of chat component
With the
variant="bordered"
prop, the chat has a lighter background in compare of default variant and a border.
That's awesome. I think our users will really appreciate the improvements.
<.chat color="natural" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="white" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="primary" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="secondary" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dark" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="success" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="warning" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="danger" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="info" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="silver" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="misc" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dawn" variant="bordered"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Gradient variant of chat component
With the
variant="gradient"
prop, the chat features a gradient background.
That's awesome. I think our users will really appreciate the improvements.
<.chat color="natural" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="primary" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="secondary" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="success" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="warning" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="danger" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="info" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="silver" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="misc" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dawn" variant="gradient"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Transparent variant of chat component
With the
variant="transparent"
prop, the chat has a transparent background and border, providing a minimal look.
That's awesome. I think our users will really appreciate the improvements.
<.chat color="natural" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="primary" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="secondary" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="success" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="warning" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="danger" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="info" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat variant="transparent" color="silver"> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="misc" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat color="dawn" variant="transparent"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Border prop
The border prop offers values like
extra_small
,
small
,
medium
,
large
,
extra_large
, and
none
. These values control the border size of the chat bubble, allowing you to adjust the thickness to suit your design.
That's awesome. I think our users will really appreciate the improvements.
<.chat border="extra_small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat border="small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat border="medium"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat border="large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat border="extra_large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Rounded prop
The rounded prop offers values like
extra_small
,
small
,
medium
,
large
,
extra_large
, and
none
. These values control the radius size of the chat bubble.
That's awesome. I think our users will really appreciate the improvements.
<.chat rounded="extra_small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat rounded="small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat rounded="medium"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat rounded="large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat rounded="extra_large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Padding prop in Phoenix LiveView chat component
The padding prop offers values like
extra_small
,
small
,
medium
,
large
,
extra_large
, and
none
. These values control the padding size of the chat bubble.
That's awesome. I think our users will really appreciate the improvements.
<.chat padding="extra_small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat padding="small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat padding="medium"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat padding="large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat padding="extra_large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Size prop
The size prop offers values like
extra_small
,
small
,
medium
,
large
,
extra_large
, and
none
. These values control the text and chat bubble max width size.
That's awesome. I think our users will really appreciate the improvements.
<.chat size="extra_small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat size="small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat size="medium"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat size="large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat size="extra_large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Space prop
The space prop offers values like
extra_small
,
small
,
medium
,
large
,
extra_large
, and
none
. These values control the vertical space size whithin the chat bubble.
That's awesome. I think our users will really appreciate the improvements.
<.chat space="extra_small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat space="small"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat space="medium"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat space="large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat space="extra_large"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
Position prop in Phoenix LiveView chat component
The
position
attribute in the
chat_section
component controls the alignment of the chat bubble. By default, it's set to
normal
for left-aligned bubbles. You can change it to
flipped
for right-aligned bubbles, which is useful for distinguishing between senders. The
rounded_size
function ensures the bubble has the appropriate border radius based on its position and size.
That's awesome. I think our users will really appreciate the improvements.
<!-- Default is postion="normal", no need to specify it--> <.chat postion="normal"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat position="flipped"> <.chat_section> <p>Mishka Chelekom is easy to install.</p> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat>
A chat flow
To demonstrate how to use the
chat
and
chat_section
components together, we can create a conversation between two users. Each user’s message is displayed within a chat bubble using the
chat_section
, and their avatar is represented with the
avatar
component. The chat bubbles can include metadata like the time of the message and delivery status using the
:status
slot. By alternating the position of the chat bubbles with the position prop (set to "flipped" or "normal"), you can visually represent messages from different users. This combination creates a dynamic and realistic chat interface where avatars, messages, and statuses work together to simulate a conversation between two users.
<div class="space-y-14 p-5"> <.chat variant="gradient" color="misc"> <.avatar src={~p"/images/avatar1.jpg"} size="medium" rounded="full" border="small" color="silver" /> <.chat_section> <div> Hey, have you checked out the new Mishka Chelekom UI Kit? </div> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat position="flipped" variant="gradient" color="misc"> <.avatar size="medium" rounded="full" border="small" color="silver">ST</.avatar> <.chat_section> <div> Yeah, I did! The components are so easy to integrate with Phoenix LiveView. </div> <:status time="22:11" deliver="Delivered" /> </.chat_section> </.chat> <.chat variant="gradient" color="misc"> <.avatar src={~p"/images/avatar1.jpg"} size="medium" rounded="full" border="small" color="silver" /> <.chat_section> <div> I agree. I used the button component in my project, and it works perfectly with the design! </div> <:status time="22:10" deliver="Delivered" /> </.chat_section> </.chat> <.chat position="flipped" variant="gradient" color="misc"> <.avatar size="medium" rounded="full" border="small" color="silver">ST</.avatar> <.chat_section> <div> Exactly. The fact that you can adjust the size and even add icons made my layout so much cleaner! </div> <:status time="22:11" deliver="Delivered" /> </.chat_section> </.chat> </div>