<turbo-stream action="replace" target="chat"><template>
  <turbo-frame id="chat">
    <turbo-cable-stream-source channel="Turbo::StreamsChannel" signed-stream-name="Im1lc3NhZ2VzXzMzOCI=--f9db9d59c93573bfea53352744c4b1e8595d07ad6ff5b0c2abb7b0b66b3a4419"></turbo-cable-stream-source>

<div class="fixed inset-0 z-50 flex justify-center items-end sm:items-center sm:bg-black sm:bg-opacity-50" data-controller="chat-form">
  <div class="bg-white w-full max-w-md rounded-lg shadow-xl flex flex-col h-[100%] sm:h-[600px]">
    <!-- Modal Header -->
    <div class="flex justify-between items-center p-4 border-b">
      <h3 class="text-lg font-semibold">Chat with Julio</h3>
      <a class="text-gray-500 hover:text-gray-700" data-turbo-stream="true" href="/chats/end">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
</a>    </div>

    <!-- Chat Messages Container -->
    <div id="messages_container"class="flex-1 overflow-y-auto p-4">
      <!-- Bot Message Example -->
      <turbo-frame id="messages">
        <div class="flex items-start space-x-2">
          <img src=/assets/profile-7c45da11.jpg alt="Julio's Profile Picture" class="w-8 h-8 rounded-full">
          <div class="flex flex-col space-y-2 max-w-[80%]">
            <div class="bg-gray-100 rounded-lg p-3">
              <p class="text-gray-800">👋 Hello! What would you like to know about me?</p>
            </div>
            <div class="bg-gray-100 rounded-lg p-3">
              <p class="text-gray-800">Did you know my favorite food is 🌮? what a surprise, eh!</p>
            </div>
          </div>
        </div>
</turbo-frame>    </div>

    <!-- Chat Input -->
    <div class="chat-input border-t p-4">
      <form class="flex space-x-2" data-chat-form-target="form" data-action="turbo:submit-end-&gt;chat-form#submitEnd" action="/chats/338/messages" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="osXV0_LnKD6u-z0eCgrAZtBsWXN0jmzu4g3h6Z5FVHujx20gOswThcSmQHX2H4GriGLpOlOdH7313VDpXZ3E8w" autocomplete="off" />
        <input class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type your message..." data-chat-form-target="chatMessageInput" data-action="keydown.enter-&gt;chat-form#submit" type="text" name="content" id="content" />
        <button type="submit" 
                class="secondary-button"
                data-action="chat-form#submit"
                data-chat-form-target="submitButton">
          <svg data-chat-form-target="submitIcon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
          <svg data-chat-form-target="loadingIcon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 animate-spin hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
          </svg>
        </button>
</form>    </div>
  </div>
</div>

</turbo-frame></template></turbo-stream>