<% if current_user == settings.conversation.user %>
  <div class="message settings w-full p-4 <%= "highlight" if params[:message] == settings.id %>">
    <div class="text-lg xl:max-w-[80%] mx-auto flex items-start gap-6">
      <div class="flex-shrink-0 relative h-[36px] w-[36px] rounded-md  text-red-100 flex items-center justify-center mt-1 bg-red-950 select-none">
        <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="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
      </div>
      <div class="flex-1 max-w-full relative min-h-[40px]">
        <%= form_with model: settings.conversation, class: "flex flex-col gap-4", data: { controller: "settings", gid: settings.conversation.to_global_id.to_s } do |f| %>
          <div class="flex flex-col gap-0">
            <div class="flex items-center gap-3">
              <%= f.label :model, it("AI Model"), class: "block text-gray-100 text-sm font-bold" %>
              <%= f.select :model, options_for_select([["GPT-3.5 Turbo", "gpt-3.5-turbo"], ["GPT-4", "gpt-4"]], selected: settings.conversation.model), {},
                        class: "border-0 rounded text-sm bg-transparent text-gray-100 pr-8" %>
            </div>
            <div class="text-gray-400 text-xs"><%= it("Choose the GPT version to work with. GPT-4 is slower but more awesome.") %></div>
          </div>
          <div class="field flex flex-col gap-1">
            <div class="flex items-center gap-3">
              <%= f.label :max_tokens, "Desired reply length (short to long)", class: "block text-gray-100 text-sm font-bold" %>
              <%= f.range_field :max_tokens, min: 20, max: 2000, step: 1, class: "" %>
              <span class="setting_value text-sm"><%= settings.conversation.max_tokens %></span>
            </div>
            <div class="text-gray-400 text-xs"><%= it("How long-winded would you like the bot to be in this conversation.") %></div>
          </div>
          <div class="field flex flex-col gap-1">
            <div class="flex items-center gap-3">
              <%= f.label :temperature, class: "block text-gray-100 text-sm font-bold" %>
              <%= f.range_field :temperature, min: 0, max: 2, step: 0.01, class: "" %>
              <span class="setting_value text-sm"><%= settings.conversation.temperature %></span>
            </div>
            <div class="text-gray-400 text-xs"><%= it("Higher values make the bot chaotic, while lower values make it consistent and predictable.") %></div>
          </div>
          <div class="field flex flex-col gap-1">
            <div class="flex items-center gap-3">
              <%= f.label :top_p, it("Creativity"), class: "block text-gray-100 text-sm font-bold" %>
              <%= f.range_field :top_p, min: 0, max: 1, step: 0.01, class: "" %>
              <span class="setting_value text-sm"><%= settings.conversation.top_p %></span>
            </div>
            <div class="text-gray-400 text-xs"><%= it("How creative should the bot be? Higher values are more creative. (top_p)") %></div>
          </div>
          <div class="field flex flex-col gap-1">
            <div class="flex items-center gap-3">
              <%= f.label :presence_penalty, it("Focus"), class: "block text-gray-100 text-sm font-bold" %>
              <%= f.range_field :presence_penalty, min: -2, max: 2, step: 0.01, class: "" %>
              <span class="setting_value text-sm"><%= settings.conversation.presence_penalty %></span>
            </div>
            <div class="text-gray-400 text-xs"><%= it("Higher values increase the bot's likelihood to talk about new topics. (presence_penalty)") %></div>
          </div>
          <div class="field flex flex-col gap-1">
            <div class="flex items-center gap-3">
              <%= f.label :frequency_penalty, class: "block text-gray-100 text-sm font-bold" %>
              <%= f.range_field :frequency_penalty, min: -2, max: 2, step: 0.01, class: "" %>
              <span class="setting_value text-sm"><%= settings.conversation.frequency_penalty %></span>
            </div>
            <div class="text-gray-400 text-xs"><%= it("Higher values decrease the bot's likelihood to repeat the same line verbatim. (frequency_penalty)") %></div>
          </div>
        <% end %>
      </div>
      <div class="menu-container relative" data-controller="messagemenu">
        <button data-messagemenu-target="button" data-action="click->messagemenu#toggle" class="rounded-full 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 mt-1 py-2 rounded-md overflow-hidden right-0 z-50 hidden">
          <a class="menu-item hover:bg-gray-300" href="#" data-reflex="click->Message#destroy" data-id="<%= settings.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>
        </div>
      </div>
    </div>
  </div>
<% end %>
