Updated loading spinner to use native svg/tailwinds & moved it in 'se…

…nd' button
digitalbuiltenvironment · Mar 5, 2024 · 568c742 · 568c742
1 parent ef69e3b
commit 568c742
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 91 deletions.
diff --git a/frontend/app/components/ui/chat/chat-actions.tsx b/frontend/app/components/ui/chat/chat-actions.tsx
@@ -1,13 +1,13 @@
 import { PauseCircle, RefreshCw } from "lucide-react";
 
-import { Button } from "../button";
-import { ChatHandler } from "./chat.interface";
+import { Button } from "@/app/components/ui/button";
+import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
 
 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-input.tsx b/frontend/app/components/ui/chat/chat-input.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/app/components/ui/button";
 import { Input } from "@/app/components/ui/input";
 import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
+import { IconSpinner } from "@/app/components/ui/icons";
 import { Send } from "lucide-react";
 
 export default function ChatInput(
@@ -23,12 +24,23 @@ export default function ChatInput(
         value={props.input}
         onChange={props.handleInputChange}
       />
-      <Button type="submit" disabled={props.isLoading} className="hidden md:flex items-center transition duration-300 ease-in-out transform hover:scale-110">
-        <span className="pr-2">Send</span>
-        <Send className="h-5 w-5" />
+      <Button type="submit" disabled={props.isLoading} className="hidden md:flex items-center transition duration-300 ease-in-out transform hover:scale-110 z-10">
+        {props.isLoading ? (
+          <IconSpinner className="animate-spin" />
+        ) : (
+          // Fragment to avoid wrapping the text in a button
+          <>
+            <span className="pr-2">Send</span>
+            <Send className="h-5 w-5" />
+          </>
+        )}
       </Button>
-      <Button type="submit" disabled={props.isLoading} className="md:hidden"> {/* Hide on larger screens */}
-        <Send className="h-5 w-5" />
+      <Button type="submit" disabled={props.isLoading} className="md:hidden z-10"> {/* Hide on larger screens */}
+        {props.isLoading ? (
+          <IconSpinner className="animate-spin" />
+        ) : (
+          <Send className="h-5 w-5" />
+        )}
       </Button>
     </form>
   );

diff --git a/frontend/app/components/ui/chat/chat-message.tsx b/frontend/app/components/ui/chat/chat-message.tsx
@@ -1,10 +1,10 @@
 import { Check, Copy } from "lucide-react";
 
-import { Button } from "../button";
-import ChatAvatar from "./chat-avatar";
-import { Message } from "./chat.interface";
-import Markdown from "./markdown";
-import { useCopyToClipboard } from "./use-copy-to-clipboard";
+import { Button } from "@/app/components/ui/button";
+import ChatAvatar from "@/app/components/ui/chat/chat-avatar";
+import { Message } from "@/app/components/ui/chat/chat.interface";
+import Markdown from "@/app/components/ui/chat/markdown";
+import { useCopyToClipboard } from "@/app/components/ui/chat/use-copy-to-clipboard";
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 

diff --git a/frontend/app/components/ui/chat/chat-messages.tsx b/frontend/app/components/ui/chat/chat-messages.tsx
@@ -1,12 +1,11 @@
-import { useEffect, useRef, useState, CSSProperties } from "react";
+import { useEffect, useRef } from "react";
 
-import PuffLoader from "react-spinners/PuffLoader";
-import ChatActions from "./chat-actions";
-import ChatMessage from "./chat-message";
-import { ChatHandler } from "./chat.interface";
+import ChatActions from "@/app/components/ui/chat/chat-actions";
+import ChatMessage from "@/app/components/ui/chat/chat-message";
+import { ChatHandler } from "@/app/components/ui/chat/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;
@@ -29,27 +28,8 @@ 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 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="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}
@@ -69,55 +49,3 @@ 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>
-//   );
-// }