Add more inprogress messages and randomly display one in the UI (#87)

src/client/components/AgentLoader.tsx

@@ -1,4 +1,30 @@
+import React, { useState, useEffect } from "react";
+import Markdown from "markdown-to-jsx";
+
 export default function AgentLoader({ logo }: { logo: string }) {
+  const responseContentOptions = [
+    "<span>I'm currently setting sail through the uncharted waters of your request.<br/>Kindly stay anchored, and I promise not to send you adrift; I'll return with the treasure trove of information soon!</span>",
+    "<span>I'm presently charting a course through the mystic waters of your inquiry.<br/>Please stay anchored, and I'll navigate through the data waves to reach you swiftly like a nimble pirate searching for treasure.</span>",
+    "<span>I'm currently sailing through the vast sea of your request.<br/>Please stay anchored, and I'll respond like a trusty lighthouse once I've spotted the information on the horizon.</span>",
+    "<span>I'm cruising through the open waters of your inquiry right now.<br/>Please remain anchored, and I'll make sure to steer clear of any data whirlpools as I return with the information you seek.</span>",
+    "<span>I'm navigating the tides of your inquiry at the moment.<br/>Stay moored, and I'll ensure to respond promptly, just like a seasoned sailor catching a favorable wind.</span>",
+    "<span>I'm currently exploring the depths of your request.<br/>Please stay anchored, and I'll dive into the ocean of information to bring you back a pearl of wisdom soon!</span>",
+    "<span>I'm currently navigating the waters of your request, like a sailor on a quest for buried treasure.<br/>Stay anchored, and I'll return with the information booty soon!</span>",
+    "<span>I'm exploring the vast ocean of your request, like a captain on a digital voyage.<br/>Remain anchored, and I'll navigate through the data waves to bring you the treasure map you seek!</span>",
+    "<span>I am presently navigating the waters of your request.<br />Kindly stay anchored, and I will promptly return to you once I have information to share.</span>",
+    "<span>I'm currently charting a course through your inquiry's waters.<br/>Please stay anchored, and I'll swiftly respond once I have the relevant information.</span>",
+  ];
+
+  const [waitingForResponseContent, setWaitingForResponseContent] =
+    useState<string>("");
+
+  useEffect(() => {
+    const shuffledOptions = [...responseContentOptions].sort(
+      () => Math.random() - 0.5
+    );
+    setWaitingForResponseContent(shuffledOptions[0]);
+  }, []);
+
   return (
     <div
       data-testid="agent-loader"
@@ -26,12 +52,7 @@ export default function AgentLoader({ logo }: { logo: string }) {
           />
         </span>
         <div className="chat-conversations text-base flex flex-col gap-2">
-          <span>
-            I am presently navigating the waters of your request.
-            <br />
-            Kindly stay anchored, and I will promptly return to you once I have
-            information to share.
-          </span>
+          <Markdown>{waitingForResponseContent}</Markdown>
         </div>
       </div>
     </div>