From af28bcd4dd5ed0a9965c8d2a4e5b07eef62c6421 Mon Sep 17 00:00:00 2001
From: Mat Jordan <mat@northwestern.edu>
Date: Tue, 17 Dec 2024 10:55:11 -0500
Subject: [PATCH] Add interstitial for tool_start messages.

---
 components/Chat/Response/Response.styled.tsx | 21 +++++++++++++
 components/Chat/Response/Response.tsx        | 32 ++++++++++++++++++++
 components/Shared/BouncingLoader.tsx         |  2 +-
 types/components/chat.ts                     | 27 +++++++++--------
 4 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/components/Chat/Response/Response.styled.tsx b/components/Chat/Response/Response.styled.tsx
index 6be7c532..0d3462a0 100644
--- a/components/Chat/Response/Response.styled.tsx
+++ b/components/Chat/Response/Response.styled.tsx
@@ -27,6 +27,26 @@ const StyledResponse = styled("section", {
   },
 });
 
+const StyledInterstitial = styled("div", {
+  color: "$black",
+  padding: "$gr2 0",
+  fontFamily: "$northwesternSansBold",
+  fontSize: "$gr3",
+  display: "flex",
+  alignItems: "center",
+  gap: "$gr2",
+  margin: "0",
+
+  div: {
+    display: "block",
+    width: "1.5rem",
+    height: "1.5rem",
+    borderRadius: "50%",
+    backgroundColor: "$brightBlueB",
+    content: "",
+  },
+});
+
 const StyledResponseAside = styled("aside", {});
 
 const StyledResponseContent = styled("div", {});
@@ -154,6 +174,7 @@ export {
   StyledResponseDisclaimer,
   StyledResponseWrapper,
   StyledImages,
+  StyledInterstitial,
   StyledQuestion,
   StyledResponseMarkdown,
   StyledUnsubmitted,
diff --git a/components/Chat/Response/Response.tsx b/components/Chat/Response/Response.tsx
index 29a52a10..1d64e6d6 100644
--- a/components/Chat/Response/Response.tsx
+++ b/components/Chat/Response/Response.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  StyledInterstitial,
   StyledQuestion,
   StyledResponse,
   StyledResponseWrapper,
@@ -49,6 +50,37 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
       ));
     }
 
+    if (type === "tool_start") {
+      // @ts-ignore
+      const { tool, input } = message?.message;
+      let interstitialMessage = "";
+      switch (tool) {
+        case "discover_fields":
+          interstitialMessage = "Discovering fields";
+          break;
+        case "search":
+          interstitialMessage = `Searching for: ${input?.query}`;
+          break;
+        case "aggregate":
+          console.log(`aggregate input`, input);
+          interstitialMessage = `Aggregating ${input?.agg_field} by ${input?.term_field} ${input?.term}`;
+          break;
+        default:
+          console.warn("Unknown tool_start message", message);
+      }
+
+      // @ts-ignore
+      setRenderedMessage((prev) => (
+        <>
+          {prev}
+          <StyledInterstitial>
+            <div></div>
+            <label>{interstitialMessage}</label>
+          </StyledInterstitial>
+        </>
+      ));
+    }
+
     if (type === "search_result") {
       // @ts-ignore
       setRenderedMessage((prev) => (
diff --git a/components/Shared/BouncingLoader.tsx b/components/Shared/BouncingLoader.tsx
index 4859065b..97c70d1f 100644
--- a/components/Shared/BouncingLoader.tsx
+++ b/components/Shared/BouncingLoader.tsx
@@ -23,7 +23,7 @@ const bouncingLoader = keyframes({
 
 const StyledBouncingLoader = styled("div", {
   display: "flex",
-  margin: "$gr2 auto",
+  margin: "$gr2 0",
 
   "& > div": {
     width: "$gr2",
diff --git a/types/components/chat.ts b/types/components/chat.ts
index 8aca58c6..ca22a2fb 100644
--- a/types/components/chat.ts
+++ b/types/components/chat.ts
@@ -28,18 +28,21 @@ type MessageModel = {
   model: string;
 };
 
-type MessageTool = {
-  input: {
-    query:
-      | string
-      | {
-          agg_field: string;
-          term_field: string;
-          term: string;
-        };
-  };
-  tool: "search" | "aggregate";
-};
+type MessageTool =
+  | {
+      tool: "discover_fields";
+      input: {};
+    }
+  | {
+      tool: "search";
+      input: {
+        query: string;
+      };
+    }
+  | {
+      tool: "aggregate";
+      input: { agg_field: string; term_field: string; term: string };
+    };
 
 type MessageShape =
   | string