<% if message.visible %>
  <div class="message <%= message.role %> w-full p-1 md:p-4 <%= "highlight" if params[:message] == message.id %>" id="<%= dom_id(message) %>">
    <div class="xl:max-w-[80%] mx-auto flex items-start gap-3 md:gap-6 p-1">
      <div class="flex-shrink-0 relative h-[36px] w-[36px] rounded-md  text-white flex items-center justify-center bg-gray-800 transition hover:bg-gray-900 select-none">
        <% if message.role.assistant? && message.conversation.bot.voice_id.present? %>
          <img src="<%= message.sender_image_url %>" alt="" class="transform origin-bottom object-fit rounded-md select-none cursor-pointer" referrerpolicy="no-referrer"
               data-controller="voiceplay"><audio controls preload="none"><source src="<%= tts_path(message) %>" type="audio/mpeg"></audio>
        <% else %>
          <img src="<%= message.sender_image_url %>" alt="" class="object-fit rounded-md select-none" referrerpolicy="no-referrer">
        <% end %>
      </div>
      <div class="messagecontent flex-1 max-w-full relative md:min-h-[40px]">
        <% if message.content.blank? %>
          <%= render "loading" %>
        <% else %>
          <%= tag.div(markdown(message.content)) %>
          <%= tag.div(message.content, id: dom_id(message, :content), class: "hidden") %>
        <% end %>
      </div>
      <% if current_user == message.conversation.user %>
        <div class="menu-container relative" data-controller="messagemenu">
          <button data-messagemenu-target="button" data-action="click->messagemenu#toggle" class="rounded-full md:p-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"/>
            </svg>
          </button>
          <div data-messagemenu-target="menu" class="absolute bg-gray-400 shadow-lg text-gray-700 text-sm flex flex-col gap-1 py-2 rounded-md overflow-hidden right-0 z-50 hidden">
            <% unless message.content.blank? %>
              <a class="menu-item hover:bg-gray-300" href="#" data-controller="clipboard"
                data-action="click->clipboard#target"
                data-message="<%= it("Copied to clipboard!") %>"
                data-target="<%= dom_id(message, :content) %>">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 m-1">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z" />
                </svg>
                <div class="flex-1 min-w-[200px]">
                  <div class="font-bold"><%= it("Copy") %></div>
                  <div class="text-xs"><%= it("Message content to clipboard") %></div>
                </div>
              </a>
              <a class="menu-item hover:bg-gray-300" href="#" data-action="click->messagemenu#edit">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" class="w-6 h-6 m-1">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                </svg>
                <div class="flex-1 min-w-[200px]">
                  <div class="font-bold"><%= it("Edit") %></div>
                  <div class="text-xs"><%= it("Change message without resending") %></div>
                </div>
              </a>
            <% end %>
            <a class="menu-item hover:bg-gray-300" href="#" data-reflex="click->Message#destroy" data-id="<%= message.id %>">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" class="w-6 h-6 m-1">
                <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
              </svg>
              <div class="flex-1 min-w-[200px]">
                <div class="font-bold"><%= it("Delete") %></div>
                <div class="text-xs"><%= it("Remove from transcript (no undo)") %></div>
              </div>
            </a>
            <% if message.role.assistant? && !message.content.blank? %>
              <div class="border-t border-gray-500 h-1"></div>
              <a class="menu-item hover:bg-gray-300" href="#" data-action="click->messagemenu#star">
                <div class="w-6 h-6 m-1 text-lg">🤩</div>
                <div class="flex-1 min-w-[200px]">
                  <div class="font-bold"><%= it("Awesome!!!") %></div>
                  <div class="text-xs"><%= it("Mark a response as amazing") %></div>
                </div>
              </a>
              <a class="menu-item hover:bg-gray-300" href="#" data-action="click->messagemenu#wtf">
                <div class="w-6 h-6 m-1 text-lg">🤬</div>
                <div class="flex-1 min-w-[200px]">
                  <div class="font-bold"><%= it("WTF?") %></div>
                  <div class="text-xs"><%= it("Flag a confusing or bad response") %></div>
                </div>
              </a>
            <% end %>
            <div class="border-t border-gray-500 h-1"></div>
            <div class="menu-item text-gray-500 text-xs flex justify-between">
              <%= "Sent #{distance_of_time_in_words_to_now(message.updated_at)} ago" %>
              <div class="text-xs"><%= message.tokens_count %> tokens</div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
<% elsif message.conversation.show_invisibles %>
  <div class="flex bg-slate-400 items-center justify-between">
    <div class="flex-1 p-2 opacity-75 text-sm">
      <code class="whitespace-break-spaces text-gray-700"><%= message.content.presence || "n/a" %></code>
      <div class="text-gray-600">
        <%= message.role.capitalize %> ・
        <%= "#{distance_of_time_in_words_to_now(message.updated_at)} ago" %>
        ・ <%= message.tokens_count %> tokens
      </div>
    </div>
    <div class="text-xs p-3 cursor-pointer" data-reflex="click->Message#destroy" data-id="<%= message.id %>">
      <%= heroicon("trash") %>
    </div>
  </div>
<% end %>
