Add frontend support for cancellation

crates/chatbot/src/lib.rs

@@ -44,7 +44,7 @@ impl Chatbot {
     ///
     /// Warning: may take a few seconds!
     pub async fn query_chat(&mut self, messages: &[String], docs: &[String]) -> Vec<String> {
-        std::thread::sleep(Duration::from_secs(2));
+        tokio::time::sleep(Duration::from_secs(2)).await;
         let most_recent = messages.last().unwrap();
         let emoji = &self.emojis[self.emoji_counter];
         self.emoji_counter = (self.emoji_counter + 1) % self.emojis.len();

crates/server/index.html

@@ -26,6 +26,7 @@ <h1>ChatABC</h1>
     <form id="input">
       <input type="text" />
       <input type="submit" />
+      <button id="cancel" type="button">Cancel</button>
       <span id="spinner"></span>
     </form>
     <div id="messages"></div>
@@ -35,6 +36,7 @@ <h1>ChatABC</h1>
       let msgContainer = document.getElementById("messages");
       let textEl = document.querySelector("form input[type=text]");
       let spinnerEl = document.getElementById("spinner");
+      let cancelEl = document.getElementById("cancel");
 
       async function fetchChat(chat) {
         spinnerEl.classList.add("active");
@@ -46,7 +48,13 @@ <h1>ChatABC</h1>
             body: JSON.stringify(chat)
           });
           if (!response.ok) throw new Error(response.statusText);
-          return await response.json();
+          let json = await response.json();
+          if (json.type === "Success") {
+            return json;
+          } else {
+            alert("Cancelled");
+            throw new Error("Cancelled");
+          }
         } finally {
           spinnerEl.classList.remove("active");
           textEl.removeAttribute("disabled");
@@ -65,11 +73,13 @@ <h1>ChatABC</h1>
         event.preventDefault();
         chat.messages.push(textEl.value);
         textEl.value = "";
+        updateChat(chat);
         fetchChat(chat).then(updateChat);
       }
 
       function main() {
         document.getElementById("input").addEventListener("submit", onSubmit);        
+        cancelEl.addEventListener("click", () => fetch("/cancel", {method: "post"}));
       }
 
       main();