diff --git a/lib/phlexy_ui/chat.rb b/lib/phlexy_ui/chat.rb
new file mode 100644
index 0000000..6f418f4
--- /dev/null
+++ b/lib/phlexy_ui/chat.rb
@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+ # @component html class="chat"
+ class Chat < Base
+ def initialize(*, as: :div, **)
+ super(*, **)
+ @as = as
+ end
+
+ def view_template(&)
+ generate_classes!(
+ # "chat"
+ component_html_class: :chat,
+ modifiers_map: modifiers,
+ base_modifiers:,
+ options:
+ ).then do |classes|
+ public_send(as, class: classes, **options, &)
+ end
+ end
+
+ def image(**options, &)
+ generate_classes!(
+ # "chat-image"
+ component_html_class: :"chat-image",
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+
+ def header(**options, &)
+ generate_classes!(
+ # "chat-header"
+ component_html_class: :"chat-header",
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+
+ def bubble(*modifiers, **options, &)
+ generate_classes!(
+ # "chat-bubble"
+ component_html_class: :"chat-bubble",
+ modifiers_map: bubble_modifiers,
+ base_modifiers: modifiers,
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+
+ def bubble_modifiers
+ {
+ # "sm:chat-bubble-neutral"
+ # "@sm:chat-bubble-neutral"
+ # "md:chat-bubble-neutral"
+ # "@md:chat-bubble-neutral"
+ # "lg:chat-bubble-neutral"
+ # "@lg:chat-bubble-neutral"
+ neutral: "chat-bubble-neutral",
+ # "sm:chat-bubble-primary"
+ # "@sm:chat-bubble-primary"
+ # "md:chat-bubble-primary"
+ # "@md:chat-bubble-primary"
+ # "lg:chat-bubble-primary"
+ # "@lg:chat-bubble-primary"
+ primary: "chat-bubble-primary",
+ # "sm:chat-bubble-secondary"
+ # "@sm:chat-bubble-secondary"
+ # "md:chat-bubble-secondary"
+ # "@md:chat-bubble-secondary"
+ # "lg:chat-bubble-secondary"
+ # "@lg:chat-bubble-secondary"
+ secondary: "chat-bubble-secondary",
+ # "sm:chat-bubble-accent"
+ # "@sm:chat-bubble-accent"
+ # "md:chat-bubble-accent"
+ # "@md:chat-bubble-accent"
+ # "lg:chat-bubble-accent"
+ # "@lg:chat-bubble-accent"
+ accent: "chat-bubble-accent",
+ # "sm:chat-bubble-info"
+ # "@sm:chat-bubble-info"
+ # "md:chat-bubble-info"
+ # "@md:chat-bubble-info"
+ # "lg:chat-bubble-info"
+ # "@lg:chat-bubble-info"
+ info: "chat-bubble-info",
+ # "sm:chat-bubble-success"
+ # "@sm:chat-bubble-success"
+ # "md:chat-bubble-success"
+ # "@md:chat-bubble-success"
+ # "lg:chat-bubble-success"
+ # "@lg:chat-bubble-success"
+ success: "chat-bubble-success",
+ # "sm:chat-bubble-warning"
+ # "@sm:chat-bubble-warning"
+ # "md:chat-bubble-warning"
+ # "@md:chat-bubble-warning"
+ # "lg:chat-bubble-warning"
+ # "@lg:chat-bubble-warning"
+ warning: "chat-bubble-warning",
+ # "sm:chat-bubble-error"
+ # "@sm:chat-bubble-error"
+ # "md:chat-bubble-error"
+ # "@md:chat-bubble-error"
+ # "lg:chat-bubble-error"
+ # "@lg:chat-bubble-error"
+ error: "chat-bubble-error"
+ }
+ end
+
+ def footer(**options, &)
+ generate_classes!(
+ # "chat-footer"
+ component_html_class: :"chat-footer",
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+
+ register_modifiers(
+ # "sm:chat-start"
+ # "@sm:chat-start"
+ # "md:chat-start"
+ # "@md:chat-start"
+ # "lg:chat-start"
+ # "@lg:chat-start"
+ start: "chat-start",
+ # "sm:chat-end"
+ # "@sm:chat-end"
+ # "md:chat-end"
+ # "@md:chat-end"
+ # "lg:chat-end"
+ # "@lg:chat-end"
+ end: "chat-end"
+ )
+ end
+end
diff --git a/spec/lib/phlexy_ui/chat_spec.rb b/spec/lib/phlexy_ui/chat_spec.rb
new file mode 100644
index 0000000..6b27e82
--- /dev/null
+++ b/spec/lib/phlexy_ui/chat_spec.rb
@@ -0,0 +1,131 @@
+require "spec_helper"
+
+describe PhlexyUI::Chat do
+ subject(:output) { render described_class.new }
+
+ it "is expected to match the formatted HTML" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ is_expected.to eq(expected_html)
+ end
+
+ describe "with part methods" do
+ subject(:output) do
+ render described_class.new do |c|
+ c.image { "Image" }
+ c.header { "Header" }
+ c.bubble { "Message" }
+ c.footer { "Footer" }
+ end
+ end
+
+ it "renders all parts" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "conditions" do
+ {
+ start: "chat-start",
+ end: "chat-end"
+ }.each do |modifier, css|
+ context "when given :#{modifier} modifier" do
+ subject(:output) { render described_class.new(modifier) }
+
+ it "renders it apart from the main class" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+ end
+ end
+
+ describe "bubble colors" do
+ {
+ primary: "chat-bubble-primary",
+ secondary: "chat-bubble-secondary",
+ accent: "chat-bubble-accent",
+ neutral: "chat-bubble-neutral",
+ info: "chat-bubble-info",
+ success: "chat-bubble-success",
+ warning: "chat-bubble-warning",
+ error: "chat-bubble-error"
+ }.each do |color, css|
+ context "when bubble is given :#{color} modifier" do
+ subject(:output) do
+ render described_class.new do |c|
+ c.bubble(color) { "Message" }
+ end
+ end
+
+ it "renders bubble with color class" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+ end
+ end
+
+ describe "data" do
+ subject(:output) do
+ render described_class.new(data: {foo: "bar"})
+ end
+
+ it "renders it correctly" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "responsiveness" do
+ %i[sm md lg xl @sm @md @lg @xl].each do |viewport|
+ context "when given an :#{viewport} responsive option" do
+ subject(:output) do
+ render described_class.new(:start, responsive: {viewport => :end})
+ end
+
+ it "renders it separately with a responsive prefix" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+ end
+ end
+
+ describe "passing :as option" do
+ subject(:output) { render described_class.new(as: :section) }
+
+ it "renders as the given tag" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+end