feat: add react-rough-notation dependency and update chat components for improved UI

surfsense_web/components/chat/AnimatedEmptyState.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { Manrope } from "next/font/google";
+import React, { useRef, useEffect, useState } from "react";
+import { RoughNotation, RoughNotationGroup } from "react-rough-notation";
+import { useInView } from "framer-motion";
+import { useSidebar } from "@/components/ui/sidebar";
+
+const manrope = Manrope({ subsets: ["latin"], weight: ["400", "700"] });
+
+export function AnimatedEmptyState() {
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+  const { state } = useSidebar();
+  const [shouldShowHighlight, setShouldShowHighlight] = useState(false);
+  const [layoutStable, setLayoutStable] = useState(true);
+
+  // Track sidebar state changes and manage highlight visibility
+  useEffect(() => {
+    // Set layout as unstable when sidebar state changes
+    setLayoutStable(false);
+    setShouldShowHighlight(false);
+
+    // Wait for layout to stabilize after sidebar transition
+    const stabilizeTimer = setTimeout(() => {
+      setLayoutStable(true);
+    }, 300); // Wait for sidebar transition (200ms) + buffer
+
+    return () => clearTimeout(stabilizeTimer);
+  }, [state]);
+
+  // Re-enable highlights after layout stabilizes and component is in view
+  useEffect(() => {
+    if (layoutStable && isInView) {
+      const showTimer = setTimeout(() => {
+        setShouldShowHighlight(true);
+      }, 100); // Small delay to ensure layout is fully settled
+
+      return () => clearTimeout(showTimer);
+    } else {
+      setShouldShowHighlight(false);
+    }
+  }, [layoutStable, isInView]);
+
+  return (
+    <div
+      ref={ref}
+      className="flex-1 flex items-center justify-center w-full min-h-[400px]"
+    >
+      <div className="max-w-4xl mx-auto px-4 py-10 text-center">
+        <RoughNotationGroup show={shouldShowHighlight}>
+          <h1
+            className={cn(
+              "text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 mb-6",
+              manrope.className,
+            )}
+          >
+            <RoughNotation
+              type="highlight"
+              animationDuration={2000}
+              iterations={3}
+              color="#3b82f680"
+              multiline
+            >
+              <span>SurfSense</span>
+            </RoughNotation>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-neutral-600 dark:text-neutral-300 mb-8 max-w-2xl mx-auto">
+            <RoughNotation
+              type="underline"
+              animationDuration={2000}
+              iterations={3}
+              color="#10b981"
+            >
+              Let's Start Surfing
+            </RoughNotation>{" "}
+            through your knowledge base.
+          </p>
+        </RoughNotationGroup>
+      </div>
+    </div>
+  );
+}