Chat

New version v0.0.9 🚀

Interactive chat bubbles and chat containers for Phoenix LiveView applications, with customizable styles, colors.

Installation:

mix mishka.ui.gen.component chat

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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.

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.

Base color and variantis

Mona Aghili

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

12:10

Delivered

<!--It's not necessayr to specifiy color and variant as base is the default-->
<.chat>
  <.chat_section>
    <div>Mona Aghili</div>
    <p>This is base variant of chat component.</p>
  </.chat_section>
</.chat>

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.

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

Shahryar Tavakkoli

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

22:10

Delivered

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

Shahryar Tavakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

Shahryar Tvakkoli

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

22:10

Delivered

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

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.

Mona

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

Chat component props

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, bordered. Default: default.
color	string	No	Determines the color theme. Supported values: natural, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn. Default: natural. The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
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.

Chat Section component props

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.
status.time_class	string	No	Custom classes for time
status.deliver_class	string	No	Custom classes for delivery status of the message.
meta	string	No	Defines a slot for adding custom metadata or additional information.

Chat CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - gradient - bordered - base	Yes
`--color`	string	base - white - natural - primary - secondary - dark - success - warning - danger - info - silver - 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