<div class="p-3 shadow sticky bottom-0">
  <div class="grow-wrap grid">
    <textarea id="prompt_textarea" type="text" class="w-full shadow-xl rounded-md bg-gray-700 text-gray-300 pl-3"
          placeholder="Send a message or type '/' for more options..." autocomplete="off" rows="1"
          onKeyUp="this.parentNode.dataset.replicatedValue = this.value"
          data-controller="autocomplete conversation"
          data-action="input->autocomplete#input blur->autocomplete#blur keydown->conversation#keydown keydown->autocomplete#keydown"
          <% if @conversation.grow? %>
            data-grow="true"
          <% end %>
          data-id="<%= @conversation&.id %>"></textarea>
    <button title="Send message" id="prompt_submit" class="absolute p-3 rounded-md text-gray-700 bottom-3 md:bottom-3 right-1 opacity-70">
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 mr-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <line x1="22" y1="2" x2="11" y2="13"></line>
        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
      </svg>
    </button>
  </div>
</div>
<div id="autocompleteList"
     class="sticky bottom-16 left-3 bg-gray-800 rounded-lg border-l-[30px] border-l-gray-900
            w-[80%] flex flex-col hidden overflow-hidden text-white cursor-pointer">
  <%= render "autocomplete_item", name: "/new", description: "Start a new conversation" %>
  <% if @conversation.messages.any? %>
    <%= render "autocomplete_item", name: "/clear", description: "Clear the current conversation transcript" %>
    <%= render "autocomplete_item", name: "/redo", description: "Discard the last prompt and try again" %>
    <% if @conversation.public_access? %>
      <%= render "autocomplete_item", name: "/private", description: "Make this conversation private again" %>
    <% else %>
      <%= render "autocomplete_item", name: "/public", description: "Make this conversation public" %>
    <% end %>
  <% end %>
  <%= render "autocomplete_item", name: "/grow", description: "Toggles input \"grow\" mode. Submit with cmd+enter" %>
  <%= render "autocomplete_item", name: "/delete", description: "Delete the conversation entirely" %>
  <%= render "autocomplete_item", name: "/stream", description: "Toggle live-streaming mode for responses" %>
  <%= render "autocomplete_item", name: "/settings", description: "Show current settings for this conversation" %>
  <% if current_user.admin? %>
    <%= render "autocomplete_item", name: "/debug", description: "Toggle display of hidden messages (Admin Only)" %>
  <% end %>
</div>
