feat: Add LaTeX support to the markdown renderer

Adds LaTeX support to the markdown renderer using `rehype-katex` for math equations.

- Replaces block-level LaTeX delimiters `\[ \]` with `$$ $$`.
- Replaces inline LaTeX delimiters `\( \)` with `$ $`.
- Preprocesses the message before rendering to ensure correct delimiters.

This improves the rendering of markdown messages containing mathematical expressions, enhancing the user experience.

src/hooks/useSmartScroll.tsx

@@ -1,35 +1,42 @@
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState } from "react"
 
 export const useSmartScroll = (messages: any[], streaming: boolean) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isAtBottom, setIsAtBottom] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isAtBottom, setIsAtBottom] = useState(true)
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
+    const container = containerRef.current
+    if (!container) return
 
     const handleScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 50);
-    };
+      const { scrollTop, scrollHeight, clientHeight } = container
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 50)
+    }
 
-    container.addEventListener('scroll', handleScroll);
-    return () => container.removeEventListener('scroll', handleScroll);
-  }, []);
+    container.addEventListener("scroll", handleScroll)
+    return () => container.removeEventListener("scroll", handleScroll)
+  }, [])
 
   useEffect(() => {
+    if (messages.length === 0) {
+      setIsAtBottom(true)
+      return
+    }
+
     if (isAtBottom && containerRef.current) {
       const scrollOptions: ScrollIntoViewOptions = streaming
-        ? { behavior: 'smooth', block: 'end' }
-        : { behavior: 'auto', block: 'end' };
-      containerRef.current.lastElementChild?.scrollIntoView(scrollOptions);
+        ? { behavior: "smooth", block: "end" }
+        : { behavior: "auto", block: "end" }
+      containerRef.current.lastElementChild?.scrollIntoView(scrollOptions)
     }
-  }, [messages, streaming, isAtBottom]);
+  }, [messages, streaming, isAtBottom])
 
   const scrollToBottom = () => {
-    containerRef.current?.lastElementChild?.scrollIntoView({ behavior: 'smooth', block: 'end' });
-  };
+    containerRef.current?.lastElementChild?.scrollIntoView({
+      behavior: "smooth",
+      block: "end"
+    })
+  }
 
-  
-  return { containerRef, isAtBottom, scrollToBottom };
-};
+  return { containerRef, isAtBottom, scrollToBottom }
+}