Chat

Updated Oct 16, 2026 v0.0.10

v0.0.10StableComponentStatelessApache-2.0

Installation mix mishka.ui.gen.component chat

Source View Source

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.

Overview of the Phoenix and LiveView chat bubble Component

Hey, check out this photo I just took on my hike!

22:10

Delivered

Wow! That looks absolutely stunning. Where is this?

22:13

Delivered

Whoa, no way! That looks like something straight out of a postcard. Did you hike all the way up there, or is there a secret drive up spot you're not telling us about?

22:14

Delivered

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.

Base color and variants

Mona Aghili

Base is the default variant of chat component, providing a clean and professional appearance for your chat interface.

12:10

Delivered

heex

<!--It's not necessary to specify color and variant: base is the default variant and natural is the default color-->
<.chat>
  <.chat_section>
    <div>Mona Aghili</div>
    <p>This is base variant of chat component.</p>
  </.chat_section>
</.chat>

Chat section component in Phoenix 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.

Chat section component in Phoenix LiveView chat component

Shahryar Tavakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

22:10

Delivered

heex

<.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.

Chat section status slot

Shahryar Tavakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

22:10

Delivered

heex

<.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.

Chat meta slot

Shahryar Tavakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

heex

<.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.

Chat section font weight prop

Shahryar Tavakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

22:10

Delivered

heex

<.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-light">
    <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.

Default variant of Phoenix and LiveView chat component

Shahryar Tavakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

22:10

Delivered

heex

<.chat variant="default" color="natural">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="primary">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="white">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="dark">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="secondary">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="success">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="warning">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="danger">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="info">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="silver">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" color="misc">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

<.chat variant="default" 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.

Outline variant of chat component

Shahryar Tavakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

22:10

Delivered

heex

<.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.

Shadow variant of chat component

Shahryar Tvakkoli

Mishka Chelekom is easy to install and use for fast integration with your Phoenix LiveView projects.

22:10

Delivered

heex

<.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.

Bordered variant of chat component

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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.

Gradient variant of chat component

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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.

Transparent variant of chat component

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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">
  <.chat_section>
    <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.

Border prop

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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.

Rounded prop

Mona

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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.

Padding prop in Phoenix LiveView chat component

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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.

Size prop

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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 within the chat bubble.

Space prop

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<.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 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.

Position prop in Phoenix LiveView chat component

Shahryar Tvakkoli

That's awesome. I think our users will really appreciate the improvements.

22:10

Delivered

heex

<!-- Default is position="normal", no need to specify it-->
<.chat position="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 thechat andchat_section components together, we can create a conversation between two users. Each user’s message is displayed within a chat bubble using thechat_section, and their avatar is represented with theavatar 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.

A chat flow

Hey, have you checked out the new Mishka Chelekom UI Kit?

22:10

Delivered

Yeah, I did! The components are so easy to integrate with Phoenix LiveView.

22:11

Delivered

I agree. I used the button component in my project, and it works perfectly with the design!

22:10

Delivered

Exactly. The fact that you can adjust the size and even add icons made my layout so much cleaner!

22:11

Delivered

heex

<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>

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	No	A unique identifier is used to manage state and interaction
`class`	`any`	—	—	No	Custom CSS class for additional styling
`variant`	`string`	`base`	`defaultoutlinetransparentshadowgradientborderedbase`	No	Determines the style
`color`	`string`	`natural`	`basewhitenaturalprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`	No	Determines color theme
`border`	`string`	`extra_small`	—	No	Determines border style
`rounded`	`string`	`extra_large`	`extra_smallsmallmediumlargeextra_largenone`	No	Determines the border radius
`size`	`string`	`medium`	`extra_smallsmallmediumlargeextra_large`	No	Determines the overall size of the elements, including padding, font size, and other items
`space`	`string`	`extra_small`	`extra_smallsmallmediumlargeextra_largenone`	No	Space between items
`position`	`string`	`normal`	`normalflipped`	No	Determines the element position
`padding`	`string`	`small`	`extra_smallsmallmediumlargeextra_large`	No	Determines padding for items
`rest`	`global`	—	—	No	Global attributes can define defaults which are merged with attributes provided by the caller

Slots

Name	Required	Description
`inner_block`	No	Inner block that renders HEEx content

Options

Each option takes one or more of its values, separated by commas.

Option	Values
`--variant`	`defaultoutlinetransparentshadowgradientborderedbase`
`--color`	`basewhitenaturalprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`
`--size`	`extra_smallsmallmediumlargeextra_large`
`--rounded`	`extra_smallsmallmediumlargeextra_largenone`
`--space`	`extra_smallsmallmediumlargeextra_largenone`
`--padding`	`extra_smallsmallmediumlargeextra_large`
`--type`	`chatchat_section`
`--module`	A module name of your own

What it generates

Functions chatchat_section

Helpers None

Generated with it None

Command mix mishka.ui.gen.component chat