From fcbf1f824253b75937c3339e9fa3ddb9313436fc Mon Sep 17 00:00:00 2001
From: PierrunoYT <95778421+PierrunoYT@users.noreply.github.com>
Date: Wed, 26 Jun 2024 04:15:04 +0200
Subject: [PATCH] feat(frontend): Add Typing Indicator for Agent Response using
 Tailwind CSS (#2630)

* feat(frontend): Add Typing Indicator for Agent Response

* finetuning and linting

* evil lil linter

* TailwindCSS styles now

* improve bounce

* merge fix

* merge fix 2

* one more fix

* poetry.lock fix

---------

Co-authored-by: tobitege <tobitege@gmx.de>
---
 .../src/components/chat/ChatInterface.tsx     | 36 ++++++++++++-------
 .../src/components/chat/TypingIndicator.tsx   | 22 ++++++++++++
 2 files changed, 45 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/chat/TypingIndicator.tsx

diff --git a/frontend/src/components/chat/ChatInterface.tsx b/frontend/src/components/chat/ChatInterface.tsx
index f6d7c12f65..c4fde682af 100644
--- a/frontend/src/components/chat/ChatInterface.tsx
+++ b/frontend/src/components/chat/ChatInterface.tsx
@@ -1,3 +1,4 @@
+// frontend/src/components/chat/ChatInterface.tsx
 import React, { useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { IoMdChatbubbles } from "react-icons/io";
@@ -8,6 +9,7 @@ import { FaRegThumbsDown, FaRegThumbsUp } from "react-icons/fa";
 import { useDisclosure } from "@nextui-org/react";
 import ChatInput from "./ChatInput";
 import Chat from "./Chat";
+import TypingIndicator from "./TypingIndicator";
 import { RootState } from "#/store";
 import AgentState from "#/types/AgentState";
 import { sendChatMessage } from "#/services/chatService";
@@ -127,19 +129,27 @@ function ChatInterface() {
 
       <div className="relative">
         <div className="absolute bottom-2 left-0 right-0 flex items-center justify-center">
-          {!hitBottom &&
-            ScrollButton({
-              onClick: scrollDomToBottom,
-              icon: <VscArrowDown className="inline mr-2 w-3 h-3" />,
-              label: t(I18nKey.CHAT_INTERFACE$TO_BOTTOM),
-            })}
-          {curAgentState === AgentState.AWAITING_USER_INPUT &&
-            hitBottom &&
-            ScrollButton({
-              onClick: handleSendContinueMsg,
-              icon: <RiArrowRightDoubleLine className="inline mr-2 w-3 h-3" />,
-              label: t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE),
-            })}
+          {!hitBottom && (
+            <ScrollButton
+              onClick={scrollDomToBottom}
+              icon={<VscArrowDown className="inline mr-2 w-3 h-3" />}
+              label={t(I18nKey.CHAT_INTERFACE$TO_BOTTOM)}
+            />
+          )}
+          {hitBottom && (
+            <>
+              {curAgentState === AgentState.AWAITING_USER_INPUT && (
+                <ScrollButton
+                  onClick={handleSendContinueMsg}
+                  icon={
+                    <RiArrowRightDoubleLine className="inline mr-2 w-3 h-3" />
+                  }
+                  label={t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE)}
+                />
+              )}
+              {curAgentState === AgentState.RUNNING && <TypingIndicator />}
+            </>
+          )}
         </div>
 
         {feedbackShared !== messages.length && messages.length > 3 && (
diff --git a/frontend/src/components/chat/TypingIndicator.tsx b/frontend/src/components/chat/TypingIndicator.tsx
new file mode 100644
index 0000000000..528bc45c40
--- /dev/null
+++ b/frontend/src/components/chat/TypingIndicator.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function TypingIndicator(): React.ReactElement {
+  return (
+    <div className="flex items-center space-x-1.5 bg-neutral-700 px-3 py-1.5 rounded-full">
+      <span
+        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
+        style={{ animationDelay: "0ms" }}
+      />
+      <span
+        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
+        style={{ animationDelay: "75ms" }}
+      />
+      <span
+        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
+        style={{ animationDelay: "150ms" }}
+      />
+    </div>
+  );
+}
+
+export default TypingIndicator;