added loading spinner

Added a spinner component whenever waiting for a query response, so that users know something is still happening
digitalbuiltenvironment · Mar 1, 2024 · ef69e3b · ef69e3b
1 parent 7d9d30d
commit ef69e3b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 4 deletions.
diff --git a/frontend/app/components/ui/chat/chat-actions.tsx b/frontend/app/components/ui/chat/chat-actions.tsx
@@ -7,7 +7,7 @@ export default function ChatActions(
   props: Pick<ChatHandler, "stop" | "reload"> & {
     showReload?: boolean;
     showStop?: boolean;
-  },
+  }
 ) {
   return (
     <div className="space-x-4">

diff --git a/frontend/app/components/ui/chat/chat-messages.tsx b/frontend/app/components/ui/chat/chat-messages.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, CSSProperties } from "react";
 
+import PuffLoader from "react-spinners/PuffLoader";
 import ChatActions from "./chat-actions";
 import ChatMessage from "./chat-message";
 import { ChatHandler } from "./chat.interface";
 
 export default function ChatMessages(
-  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,
+  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">
 ) {
   const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
   const messageLength = props.messages.length;
@@ -28,8 +29,27 @@ export default function ChatMessages(
     scrollToBottom();
   }, [messageLength, lastMessage]);
 
+  // State to manage the visibility of the ellipsis
+  const [showEllipsis, setShowEllipsis] = useState(true);
+
+  useEffect(() => {
+    // Toggle the visibility of the ellipsis every second
+    const interval = setInterval(() => {
+      setShowEllipsis((prev) => !prev);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []); // Empty dependency array to run only once on component mount
+
   return (
-    <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0">
+    <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0 relative">
+      {props.isLoading && (
+        <div className="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-white dark:bg-zinc-700/30 z-10">
+          <p className="text-gray-700 dark:text-gray-300 text-lg font-semibold">
+            <PuffLoader size={150} color={"#ffffff"} speedMultiplier={2} />
+          </p>
+        </div>
+      )}
       <div
         className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
         ref={scrollableChatContainerRef}
@@ -49,3 +69,55 @@ export default function ChatMessages(
     </div>
   );
 }
+
+// import { useEffect, useRef } from "react";
+
+// import ChatActions from "./chat-actions";
+// import ChatMessage from "./chat-message";
+// import { ChatHandler } from "./chat.interface";
+
+// export default function ChatMessages(
+//   props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,
+// ) {
+//   const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
+//   const messageLength = props.messages.length;
+//   const lastMessage = props.messages[messageLength - 1];
+
+//   const scrollToBottom = () => {
+//     if (scrollableChatContainerRef.current) {
+//       scrollableChatContainerRef.current.scrollTop =
+//         scrollableChatContainerRef.current.scrollHeight;
+//     }
+//   };
+
+//   const isLastMessageFromAssistant =
+//     messageLength > 0 && lastMessage?.role !== "user";
+//   const showReload =
+//     props.reload && !props.isLoading && isLastMessageFromAssistant;
+//   const showStop = props.stop && props.isLoading;
+
+//   useEffect(() => {
+//     scrollToBottom();
+//   }, [messageLength, lastMessage]);
+
+//   return (
+//     <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0">
+//       <div
+//         className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
+//         ref={scrollableChatContainerRef}
+//       >
+//         {props.messages.map((m) => (
+//           <ChatMessage key={m.id} {...m} />
+//         ))}
+//       </div>
+//       <div className="flex justify-end py-4">
+//         <ChatActions
+//           reload={props.reload}
+//           stop={props.stop}
+//           showReload={showReload}
+//           showStop={showStop}
+//         />
+//       </div>
+//     </div>
+//   );
+// }