use details tag for chat

This commit is contained in:
kritzl 2026-05-15 11:36:15 +02:00
commit ff05a8c2ee
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM

View file

@ -23,30 +23,31 @@ const responses =
const templateInjectChat = `
<div class="fab">
<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">
<i data-lucide="stars"></i>
</div>
<div class="card min-h-120 max-h-200 w-80 bg-base-300 p-4">
<div class="w-full overflow-auto h-full" id="chat"></div>
<div class="chat chat-start w-full hidden" id="chat-waiting">
<div class="chat-bubble chat-bubble-primary whitespace-normal">
<span class="loading loading-dots loading-md"></span>
<details class="dropdown dropdown-top dropdown-end absolute right-4 bottom-4" id="chat-root">
<summary class="btn btn-lg btn-circle btn-primary">
<i data-lucide="stars"></i>
</summary>
<div class="dropdown-content card min-h-120 max-h-200 w-80 bg-base-300 p-4 mb-4">
<div class="w-full overflow-auto h-full prose leading-5" id="chat"></div>
<div class="chat chat-start w-full hidden" id="chat-waiting">
<div class="chat-bubble chat-bubble-primary whitespace-normal">
<span class="loading loading-dots loading-md"></span>
</div>
</div>
</div>
<div class="join mt-auto w-full">
<div class="w-full">
<label class="input join-item">
<input type="text" id="chat-text" />
</label>
<div class="mt-4"></div>
<div class="join mt-auto w-full">
<div class="w-full">
<label class="input join-item">
<input type="text" id="chat-text" />
</label>
</div>
<button class="btn btn-secondary join-item" id="send-chat">
<i data-lucide="send"></i>
</button>
</div>
<button class="btn btn-secondary join-item" id="send-chat">
<i data-lucide="send"></i>
</button>
</div>
</div>
</div>`
</details>
`
type ChatMessage = {
type: "bot" | "user",