fix the input section

Author: seraprogrammer

src/components/ChatInput.tsx

@@ -38,26 +38,28 @@ const ChatInput: React.FC<ChatInputProps> = ({
 }) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [loadingTime, setLoadingTime] = useState(0);
-  const loadingTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const loadingTimerRef = useRef<ReturnType<typeof setInterval>>();
   const [activeButton, setActiveButton] = useState<"search" | "think" | null>(
     null
   );
 
   useEffect(() => {
     if (isLoading) {
       setLoadingTime(0);
-      loadingTimerRef.current = setTimeout(() => {
-        setLoadingTime((prev) => prev + 1);
-      }, 1000);
+      const startTime = Date.now();
+      loadingTimerRef.current = setInterval(() => {
+        const elapsedMs = Date.now() - startTime;
+        setLoadingTime(elapsedMs);
+      }, 100); // Update more frequently for smoother display
     } else {
       if (loadingTimerRef.current) {
-        clearTimeout(loadingTimerRef.current);
+        clearInterval(loadingTimerRef.current);
       }
       setLoadingTime(0);
     }
     return () => {
       if (loadingTimerRef.current) {
-        clearTimeout(loadingTimerRef.current);
+        clearInterval(loadingTimerRef.current);
       }
     };
   }, [isLoading]);
@@ -127,6 +129,13 @@ const ChatInput: React.FC<ChatInputProps> = ({
     }
   };
 
+  const getLoadingTimeColor = () => {
+    if (loadingTime < 5000) return "text-green-400"; // Less than 5s - green
+    if (loadingTime < 10000) return "text-yellow-400"; // 5-10s - yellow
+    if (loadingTime < 15000) return "text-sky-400"; // 10-15s - sky blue
+    return "text-red-400"; // More than 15s - red
+  };
+
   return (
     <div className="fixed bottom-0 left-0 right-0 z-40 flex flex-col items-center w-full">
       <div className="relative w-full px-2 pb-3 sm:pb-4">
@@ -228,17 +237,25 @@ const ChatInput: React.FC<ChatInputProps> = ({
                   <button
                     type="submit"
                     disabled={isLoading || !message.trim()}
-                    className="group flex justify-center items-center h-9 w-9 rounded-full bg-gray-800 text-gray-400 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="group flex justify-center items-center h-9 w-9 rounded-full bg-gray-800 text-gray-400 hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed relative z-10"
+                    style={{ cursor: "pointer" }}
                   >
+                    {/* Invisible larger hit area */}
+                    <span className="absolute inset-0 -m-3 rounded-full pointer-events-auto" />
+
                     {isLoading ? (
                       <>
-                        <Loader2 className="w-5 h-5 animate-spin" />
-                        <span className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-gray-400">
-                          {loadingTime}s
+                        <Loader2
+                          className={`w-5 h-5 animate-spin ${getLoadingTimeColor()}`}
+                        />
+                        <span
+                          className={`absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs ${getLoadingTimeColor()} transition-colors`}
+                        >
+                          {(loadingTime / 1000).toFixed(1)}s
                         </span>
                       </>
                     ) : (
-                      <Send className="w-5 h-5" />
+                      <Send className="w-5 h-5 pointer-events-none" />
                     )}
                   </button>
                 </div>