Message

# frozen_string_literal: true

module RubyUI
  class Message < Base
    def initialize(align: :start, **attrs)
      @align = align
      super(**attrs)
    end

    def view_template(&)
      div(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "message", align: @align},
        class: "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class MessageAvatar < Base
    def view_template(&)
      div(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "message-avatar"},
        class: "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class MessageContent < Base
    def view_template(&)
      div(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "message-content"},
        class: "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:[&>[data-slot]]:self-end"
      }
    end
  end
end

# frozen_string_literal: true

class Views::Docs::Message < Views::Base
  def view_template
    component = "Message"

    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
      render Docs::Header.new(title: "Message", description: "A chat message layout that pairs an avatar with bubbles, headers, and footers. Built on top of Avatar and Bubble.")

      Heading(level: 2) { "Usage" }

      render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
        <<~RUBY
          div(class: "flex flex-col gap-6") do
            Message(align: :end) do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
                  AvatarFallback { "ME" }
                end
              end
              MessageContent do
                Bubble do
                  BubbleContent { "Deploying to prod real quick." }
                end
              end
            end

            Message do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                  AvatarFallback { "R" }
                end
              end
              MessageContent do
                Bubble(variant: :muted) do
                  BubbleContent { "It's 4:55 PM. On a Friday." }
                end
              end
            end

            Message(align: :end) do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
                  AvatarFallback { "ME" }
                end
              end
              MessageContent do
                Bubble do
                  BubbleContent { "It's a one-line change." }
                end
                MessageFooter { "Delivered" }
              end
            end

            Message do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                  AvatarFallback { "R" }
                end
              end
              MessageContent do
                BubbleGroup do
                  Bubble(variant: :muted) do
                    BubbleContent { "It's always a one-line change 😭." }
                  end
                  Bubble(variant: :muted) do
                    BubbleContent { "Alright, let me take a look." }
                    BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
                      span { "👍" }
                    end
                  end
                end
              end
            end
          end
        RUBY
      end

      Heading(level: 2) { "With header" }

      render Docs::VisualCodeExample.new(title: "Header and footer", context: self) do
        <<~RUBY
          Message do
            MessageAvatar do
              Avatar(size: :sm) do
                AvatarImage(src: "https://github.com/shadcn.png", alt: "@oliver")
                AvatarFallback { "OL" }
              end
            end
            MessageContent do
              MessageHeader { "Oliver" }
              Bubble(variant: :muted) do
                BubbleContent { "Pushed the fix, can you review?" }
              end
              MessageFooter { "9:41 AM" }
            end
          end
        RUBY
      end

      Heading(level: 2) { "Alignment" }

      render Docs::VisualCodeExample.new(title: "Sender and receiver", context: self) do
        <<~RUBY
          div(class: "flex flex-col gap-6") do
            Message do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                  AvatarFallback { "R" }
                end
              end
              MessageContent do
                Bubble(variant: :muted) { BubbleContent { "Aligned to the start." } }
              end
            end
            Message(align: :end) do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
                  AvatarFallback { "ME" }
                end
              end
              MessageContent do
                Bubble { BubbleContent { "Aligned to the end." } }
              end
            end
          end
        RUBY
      end

      Heading(level: 2) { "Group" }

      render Docs::VisualCodeExample.new(title: "Message group", context: self) do
        <<~RUBY
          MessageGroup do
            Message do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                  AvatarFallback { "R" }
                end
              end
              MessageContent do
                Bubble(variant: :muted) { BubbleContent { "First message." } }
              end
            end
            Message do
              MessageAvatar do
                Avatar(size: :sm) do
                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
                  AvatarFallback { "R" }
                end
              end
              MessageContent do
                Bubble(variant: :muted) { BubbleContent { "Second, tighter spacing." } }
              end
            end
          end
        RUBY
      end

      render Components::ComponentSetup::Tabs.new(component_name: component)

      # components
      render Docs::ComponentsTable.new(component_files(component))
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class MessageFooter < Base
    def view_template(&)
      div(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "message-footer"},
        class: "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-data-[align=end]/message:justify-end group-has-data-[variant=ghost]/message:px-0"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class MessageGroup < Base
    def view_template(&)
      div(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "message-group"},
        class: "flex min-w-0 flex-col gap-2"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class MessageHeader < Base
    def view_template(&)
      div(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "message-header"},
        class: "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0"
      }
    end
  end
end