minne/html-router/templates/chat/new_chat_first_response.html

{% include "chat/streaming_response.html" %}
<!-- OOB swap targeting the form element directly -->
<form id="chat-form" hx-post="/chat/{{conversation.id}}" hx-target="#chat_container" hx-swap="beforeend"
  class="relative flex gap-2" hx-swap-oob="true">
  <textarea autofocus required name="content" placeholder="Type your message..." rows="2"
    class="nb-input h-24 pr-8 pl-2 pt-2 pb-2 flex-grow resize-none" id="chat-input"></textarea>
  <button type="submit" class="absolute p-2 cursor-pointer right-0.5 btn-ghost btn-sm top-1">
    {% include "icons/send_icon.html" %}
  </button>
  <label for="my-drawer-2" class="absolute cursor-pointer top-9 right-0.5 p-2 drawer-button xl:hidden z-20 ">
    {% include "icons/hamburger_icon.html" %}
  </label>
</form>
<script>
  (function () {
    const newChatStreamId = 'ai-stream-{{ user_message.id }}';

    document.getElementById('chat-input').addEventListener('keydown', function (e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        htmx.trigger('#chat-form', 'submit');
      }
    });
    // Clear textarea after successful submission
    document.getElementById('chat-form').addEventListener('htmx:afterRequest', function (e) {
      if (e.detail.successful) { // Check if the request was successful
        document.getElementById('chat-input').value = ''; // Clear the textarea
      }
    });

    const refreshSidebarAfterFirstResponse = function (e) {
      const streamEl = document.getElementById(newChatStreamId);
      if (!streamEl || e.target !== streamEl) return;

      htmx.ajax('GET', '/chat/sidebar', {
        target: '.drawer-side',
        swap: 'outerHTML'
      });

      document.body.removeEventListener('htmx:sseClose', refreshSidebarAfterFirstResponse);
    };

    document.body.addEventListener('htmx:sseClose', refreshSidebarAfterFirstResponse);
  })();
</script>