Chat

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.

Shahryar Tavakkoli

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

22:10

Delivered

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

Shahryar Tavakkoli

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

22:10

Delivered

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

Shahryar Tavakkoli

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

20:40

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

Shahryar Tavakkoli

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

22:10

Delivered

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

Shahryar Tavakkoli

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

22:10

Delivered

<.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="secondary">
  <.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="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>

<!-- This is for the light color(default). Omit this prop when using the light color-->
<.chat>
  <.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.

Shahryar Tavakkoli

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

22:10

Delivered

<.chat color="white" 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="dark" 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>

<!-- This is for the light color(default), no need to specify color="light" when using it-->
<.chat 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.

Shahryar Tvakkoli

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

22:10

Delivered

Shahryar Tvakkoli

<.chat color="white" 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="dark" 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>

<!-- This is for the light color(default), no need to specify color="light" when using it-->
<.chat 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>

Unbordered variant of chat component

With the variant="unbordered" prop, the chat has a background.

Shahryar Tvakkoli

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

22:10

Delivered

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

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

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

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

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

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

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

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

<!-- This is for the light color(default), no need to specify color="light" when using it-->
<.chat variant="unbordered">
  <.chat_section>
    <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

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

<.chat color="dawn" variant="unbordered">
  <.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.

Shahryar Tvakkoli

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

22:10

Delivered

<.chat color="white" 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="dark" 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>

<!-- This is for the light color (default), no need to specify color="light" when using it-->
<.chat 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.

Shahryar Tvakkoli

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

22:10

Delivered

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

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

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

<.chat color="dark" 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 font_weigh        <p>Mishka Chelekom is easy to install.</p>
    <:status time="22:10" deliver="Delivered" />
  </.chat_section>
</.chat>

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

<.chat color="danger" variant="transparent">
  <.chat_section font_weigh        <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>

<!-- This is for the light color(default), no need to specify color="light" when using it-->
<.chat variant="transparent"="font-light">
    <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.

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

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

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

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
variant	string	No	Determines the style of the chat. Supported values: default, outline, transparent, shadow, gradient, unbordered. Default: default.
color	string	No	Determines the color theme. Supported values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn. Default: light.
border	string	No	Determines border style. Default: extra_small.
rounded	string	No	Determines the border radius. Default: extra_large.
size	string	No	Determines the overall size of the chat elements, including padding and font size. Default: medium.
space	string	No	Space between items in the chat. Default: extra_small.
position	string	No	Determines the chat message position. Supported values: normal, flipped. Default: normal.
padding	string	No	Determines the padding for chat items. Default: small.

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
font_weight	string	No	Determines custom class for the font weight. Default: font-normal.
class	string	No	Custom CSS class for additional styling.
status.time	string	No	Displays the time of the chat message.
status.deliver	string	No	Indicates the delivery status of the message.
meta	string	No	Defines a slot for adding custom metadata or additional information.

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - gradient - unbordered	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large	Yes
`--type`	string	chat - chat_section	Yes
`--only`	string	chat - chat_section	Yes
`--module`	string	Something	NO

Mishka

Overview of the Phoenix and LiveView chat bubble Component

Chat section component in Phenix LiveView chat component

Chat section status slot

Chat meta slot

Chat section font weight prop

Default variant of Phoenix and LiveView chat component

Outline variant of chat component

Shadow variant of chat component

Unbordered variant of chat component

Gradient variant of chat component

Transparent variant of chat component

Border prop

Rounded prop

Padding prop in Phoenix LiveView chat component

Size prop

Space prop

Position prop in Phoenix LiveView chat component

A chat flow

Chat component props

Chat Section component props

Chat CLI Arguments