From 215c3ddbf731b6d1aec05996f1cc453cc89a11b0 Mon Sep 17 00:00:00 2001
From: mudler <mudler@localai.io>
Date: Sat, 6 Apr 2024 16:16:09 +0200
Subject: [PATCH] UI: block messages while agent is replying, visualize status

---
 example/webui/index.html |  3 ++-
 example/webui/main.go    | 15 +++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/example/webui/index.html b/example/webui/index.html
index c1be3ca..9077098 100644
--- a/example/webui/index.html
+++ b/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>
diff --git a/example/webui/main.go b/example/webui/main.go
index fa601b1..6131a35 100644
--- a/example/webui/main.go
+++ b/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>`
-			_, _ = w.Write([]byte(result))
+			m.Send(
+				sse.NewMessage(
+					"<script> document.getElementById('inputMessage').disabled = false;</script>",
+				).WithEvent("message_status"))
+
+			//result := `<i>done</i>`
+			//	_, _ = w.Write([]byte(result))
 		}()
 
-		result := `<i>loading</i>`
-		_, _ = w.Write([]byte(result))
+		m.Send(
+			sse.NewMessage(
+				chatDiv("...", "red") + "<script> document.getElementById('inputMessage').disabled = true;</script>",
+			).WithEvent("message_status"))
 	}
 }