disabled sending a message while the LLM is forming a response

hazelgrove · Jan 26, 2025 · a76dd16 · a76dd16
1 parent 55c55af
commit a76dd16
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/haz3lweb/app/assistant/AssistantView.re b/src/haz3lweb/app/assistant/AssistantView.re
@@ -144,8 +144,9 @@ let message_input =
   };
   let handle_keydown = event => {
     let key = Js.Optdef.to_option(Js.Unsafe.get(event, "key"));
-    switch (key) {
-    | Some("Enter") => send_message()
+    switch (key, ListUtil.last_opt(assistantModel.chat)) {
+    | (_, Some({party: LLM, content: "..."})) => Virtual_dom.Vdom.Effect.Ignore
+    | (Some("Enter"), _) => send_message()
     | _ => Virtual_dom.Vdom.Effect.Ignore
     };
   };
@@ -166,14 +167,25 @@ let message_input =
         ],
         (),
       ),
-      div(
-        ~attrs=[
-          clss(["send-button", "icon"]),
-          Attr.on_click(send_message),
-          Attr.title("Submit Message"),
-        ],
-        [Icons.send],
-      ),
+      switch (ListUtil.last_opt(assistantModel.chat)) {
+      | Some({party: LLM, content: "..."}) =>
+        div(
+          ~attrs=[
+            clss(["disabled-send-button", "icon"]),
+            Attr.title("Submitting Message Disabled"),
+          ],
+          [Icons.thin_x],
+        )
+      | _ =>
+        div(
+          ~attrs=[
+            clss(["send-button", "icon"]),
+            Attr.on_click(send_message),
+            Attr.title("Submit Message"),
+          ],
+          [Icons.send],
+        )
+      },
     ],
   );
 };

diff --git a/src/haz3lweb/www/style/assistant.css b/src/haz3lweb/www/style/assistant.css
@@ -88,6 +88,18 @@
     box-shadow: 0px 0px 1px var(--SHADOW), 0 0 0 1px var(--SHADOW);
 }
 
+#assistant .send-button-disabled {
+    background-color: var(--SAND);
+    color: var(--STONE);
+    padding: .65em .75em;
+    border: 0 solid var(--SAND);
+    border-radius: .5em;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    pointer-events: none;
+}
+
 #assistant .send-button {
     background-color: var(--SAND);
     color: var(--STONE);