From ff05a8c2ee3c1d8f2da9eea2451ba34c3474ca02 Mon Sep 17 00:00:00 2001
From: kritzl <kritzl@kritzl.dev>
Date: Fri, 15 May 2026 11:36:15 +0200
Subject: [PATCH] use details tag for chat

---
 app/src/assets/chat.ts | 43 +++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/app/src/assets/chat.ts b/app/src/assets/chat.ts
index 5ed94f2..e4dc2ba 100644
--- a/app/src/assets/chat.ts
+++ b/app/src/assets/chat.ts
@@ -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",