Show progressive blur at scroll ends in AI view

apps/desktop/src/components/main/body/ai.tsx

@@ -1,5 +1,5 @@
 import { AudioLinesIcon, SparklesIcon } from "lucide-react";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
@@ -52,6 +52,11 @@ export function TabContentAI({ tab }: { tab: Extract<Tab, { type: "ai" }> }) {
 function AIView({ tab }: { tab: Extract<Tab, { type: "ai" }> }) {
   const updateAiTabState = useTabs((state) => state.updateAiTabState);
   const activeTab = tab.state.tab ?? "transcription";
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [scrollState, setScrollState] = useState({
+    atStart: true,
+    atEnd: true,
+  });
 
   const setActiveTab = useCallback(
     (newTab: AITabKey) => {
@@ -60,6 +65,31 @@ function AIView({ tab }: { tab: Extract<Tab, { type: "ai" }> }) {
     [updateAiTabState, tab],
   );
 
+  const updateScrollState = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const atStart = scrollTop <= 1;
+    const atEnd = scrollTop + clientHeight >= scrollHeight - 1;
+    setScrollState({ atStart, atEnd });
+  }, []);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    updateScrollState();
+    container.addEventListener("scroll", updateScrollState);
+    const resizeObserver = new ResizeObserver(updateScrollState);
+    resizeObserver.observe(container);
+
+    return () => {
+      container.removeEventListener("scroll", updateScrollState);
+      resizeObserver.disconnect();
+    };
+  }, [updateScrollState, activeTab]);
+
   return (
     <div className="flex flex-col flex-1 w-full overflow-hidden">
       <div className="flex gap-1 px-6 pt-6 pb-2">
@@ -89,8 +119,19 @@ function AIView({ tab }: { tab: Extract<Tab, { type: "ai" }> }) {
           <span className="text-xs">Intelligence</span>
         </Button>
       </div>
-      <div className="flex-1 w-full overflow-y-auto scrollbar-hide px-6 pb-6">
-        {activeTab === "transcription" ? <STT /> : <LLM />}
+      <div className="relative flex-1 w-full overflow-hidden">
+        <div
+          ref={scrollContainerRef}
+          className="flex-1 w-full h-full overflow-y-auto scrollbar-hide px-6 pb-6"
+        >
+          {activeTab === "transcription" ? <STT /> : <LLM />}
+        </div>
+        {!scrollState.atStart && (
+          <div className="absolute left-0 top-0 w-full h-8 z-20 pointer-events-none bg-gradient-to-b from-white to-transparent" />
+        )}
+        {!scrollState.atEnd && (
+          <div className="absolute left-0 bottom-0 w-full h-8 z-20 pointer-events-none bg-gradient-to-t from-white to-transparent" />
+        )}
       </div>
     </div>
   );