<div data-controller="chat hotkey">
  <%= turbo_frame_tag chat_frame do %>
    <%= turbo_stream_from @chat %>

    <h1 class="sr-only"><%= @chat.title %></h1>

    <div class="flex flex-col h-full">
      <div class="md:p-4">
        <%= render "chats/chat_nav", chat: @chat %>

        <% if show_demo_warning? %>
          <%= render "shared/demo_warning",
            title: t("chats.demo_banner_title"),
            message: t("chats.demo_banner_message") %>
        <% end %>
      </div>

      <div id="<%= @chat.messages_target %>" class="grow overflow-y-auto p-4 space-y-6 lg:pb-4" data-chat-target="messages">
        <% if @chat.conversation_messages.any? %>
          <% @chat.conversation_messages.ordered.each do |message| %>
            <%= render message %>
          <% end %>
        <% else %>
          <div class="mt-auto">
            <%= render "chats/ai_greeting", context: "chat" %>
          </div>
        <% end %>

        <% if @chat.error.present? && @chat.needs_assistant_response? %>
          <%= render "chats/error", chat: @chat %>
        <% end %>
      </div>

      <%# DESKTOP - Chat form %>
      <div class="px-4 pt-4 lg:pt-0 lg:mt-auto sticky lg:static left-0 bottom-0 w-full bg-surface">
        <%= render "messages/chat_form", chat: @chat %>
      </div>
    </div>
  <% end %>
</div>
