Merge pull request #7 from e-roy:feat--typing-bubbles

added typing bubbles for better UX

src/app/globals.css

@@ -92,4 +92,20 @@
         scrollbar-width: none;
         /* Firefox */
     }
+}
+
+@keyframes typing-bounce {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-6px);
+    }
+}
+
+.typing-dot {
+    animation: typing-bounce 1.4s infinite;
 }

src/components/ChatContainer.tsx

@@ -12,6 +12,7 @@ import { Card } from "./ui/card";
 import { MarkdownViewer } from "./MarkdownViewer";
 import { useControlContext } from "@/providers/ControlContext";
 import { CommonForm } from "./CommonForm";
+import { TypingBubble } from "./TypingBubble";
 
 export const ChatContainer = () => {
   const { generalSettings, safetySettings } = useControlContext();
@@ -71,6 +72,11 @@ export const ChatContainer = () => {
             </div>
           ))}
           <div ref={messagesEndRef} />
+          {loading && (
+            <div className="mt-6 bg-primary/10 dark:bg-primary/10 px-4 py-4 rounded-lg m-4 justify-start w-16">
+              <TypingBubble />
+            </div>
+          )}
         </div>
         <CommonForm
           value={input}

src/components/TypingBubble.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const TypingBubble: React.FC = () => {
+  return (
+    <div className="flex items-center space-x-1">
+      <div className="typing-dot bg-primary/50 h-2 w-2 rounded-full animate-typing-bounce" />
+      <div
+        className="typing-dot bg-primary/50 h-2 w-2 rounded-full animate-typing-bounce"
+        style={{ animationDelay: "0.2s" }}
+      />
+      <div
+        className="typing-dot bg-primary/50 h-2 w-2 rounded-full animate-typing-bounce"
+        style={{ animationDelay: "0.4s" }}
+      />
+    </div>
+  );
+};

src/components/VisionContainer.tsx

@@ -1,11 +1,12 @@
 "use client";
 // componnets/VisionContainer.tsx
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useCallback } from "react";
 import { MarkdownViewer } from "@/components/MarkdownViewer";
 import { Card } from "@/components/ui/card";
 
 import { useControlContext } from "@/providers/ControlContext";
 import { CommonForm } from "./CommonForm";
+import { TypingBubble } from "./TypingBubble";
 
 export const VisionContainer = () => {
   const { generalSettings, safetySettings, mediaDataList } =
@@ -15,7 +16,6 @@ export const VisionContainer = () => {
   const [prompt, setPrompt] = useState<string>("");
   const [userQuestion, setUserQuestion] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const isFormSubmittable = useCallback(() => {
     return (
@@ -35,7 +35,6 @@ export const VisionContainer = () => {
       setUserQuestion(prompt);
       setResult("");
       setPrompt("");
-      resetTextareaHeight();
 
       // Filter out any invalid image data
       const validMediaData = mediaDataList.filter(
@@ -96,12 +95,6 @@ export const VisionContainer = () => {
     [generalSettings, safetySettings, mediaDataList, prompt]
   );
 
-  const resetTextareaHeight = useCallback(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "2.5rem";
-    }
-  }, []);
-
   return (
     <div className="flex flex-col h-[95vh]">
       <Card className="flex flex-col flex-1 overflow-hidden">
@@ -110,6 +103,11 @@ export const VisionContainer = () => {
         )}
         <div className="flex-1 overflow-y-auto p-4">
           <MarkdownViewer text={result} />
+          {loading && (
+            <div className="mt-6 bg-primary/10 dark:bg-primary/10 px-4 py-4 rounded-lg m-4 justify-start w-16">
+              <TypingBubble />
+            </div>
+          )}
           {mediaDataList.every(
             (media) => media === null || media?.data === ""
           ) && (