UI: block messages while agent is replying, visualize status

example/webui/index.html

@@ -51,6 +51,7 @@
         </div>
         <!-- https://github.com/bigskysoftware/htmx/issues/1882#issuecomment-1783463192 -->
         <div sse-swap="messages" hx-swap="beforeend" id="messages"  hx-on:htmx:after-settle="document.getElementById('messages').scrollIntoView(false)"></div>
+        <div sse-swap="message_status" ></div>
     </div>
 
     
@@ -65,7 +66,7 @@
 
     <!-- Message Input -->
     <div class="p-4 border-t border-gray-200">
-        <input name="message" type="text" hx-post="/chat"  hx-target="#results" hx-indicator=".htmx-indicator"
+        <input id="inputMessage" name="message" type="text" hx-post="/chat"  hx-target="#results" hx-indicator=".htmx-indicator"
         class="p-2 border rounded w-full" placeholder="Type a message..." _="on htmx:afterRequest set my value to ''">
         <div class="my-2 htmx-indicator" >Loading...</div>
         <div id="results" class="flex justify-center"></div>

example/webui/main.go

@@ -193,12 +193,19 @@ func (a *App) Chat(m sse.Manager) func(w http.ResponseWriter, r *http.Request) {
 				sse.NewMessage(
 					chatDiv(res.Response, "red"),
 				).WithEvent("messages"))
-			result := `<i>done</i>`
+			m.Send(
-			_, _ = w.Write([]byte(result))
+				sse.NewMessage(
+					"<script> document.getElementById('inputMessage').disabled = false;</script>",
+				).WithEvent("message_status"))
+
+			//result := `<i>done</i>`
+			//	_, _ = w.Write([]byte(result))
 		}()
 
-		result := `<i>loading</i>`
+		m.Send(
-		_, _ = w.Write([]byte(result))
+			sse.NewMessage(
+				chatDiv("...", "red") + "<script> document.getElementById('inputMessage').disabled = true;</script>",
+			).WithEvent("message_status"))
 	}
 }