Merge pull request #833 from MODSetter/dev

chore: couple fixes

surfsense_backend/app/tasks/chat/stream_new_chat.py

@@ -15,6 +15,8 @@ from dataclasses import dataclass
 from typing import Any
 from uuid import UUID
 
+import logging
+
 from langchain_core.messages import HumanMessage
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.future import select
@@ -28,7 +30,7 @@ from app.agents.new_chat.llm_config import (
     load_agent_config,
     load_llm_config_from_yaml,
 )
-from app.db import ChatVisibility, Document, Report, SurfsenseDocsDocument
+from app.db import ChatVisibility, Document, Report, SurfsenseDocsDocument, async_session_maker
 from app.prompts import TITLE_GENERATION_PROMPT_TEMPLATE
 from app.services.chat_session_state_service import (
     clear_ai_responding,
@@ -1276,8 +1278,21 @@ async def stream_new_chat(
         yield streaming_service.format_done()
 
     finally:
-        # Clear AI responding state for live collaboration
+        # Clear AI responding state for live collaboration.
-        await clear_ai_responding(session, chat_id)
+        # The original session may be broken (client disconnect / CancelledError
+        # can corrupt the underlying DB connection), so we try a rollback first
+        # and fall back to a fresh session if the original is unusable.
+        try:
+            await session.rollback()
+            await clear_ai_responding(session, chat_id)
+        except Exception:
+            try:
+                async with async_session_maker() as fresh_session:
+                    await clear_ai_responding(fresh_session, chat_id)
+            except Exception:
+                logging.getLogger(__name__).warning(
+                    "Failed to clear AI responding state for thread %s", chat_id
+                )
 
 
 async def stream_resume_chat(
@@ -1397,4 +1412,14 @@ async def stream_resume_chat(
         yield streaming_service.format_done()
 
     finally:
-        await clear_ai_responding(session, chat_id)
+        try:
+            await session.rollback()
+            await clear_ai_responding(session, chat_id)
+        except Exception:
+            try:
+                async with async_session_maker() as fresh_session:
+                    await clear_ai_responding(fresh_session, chat_id)
+            except Exception:
+                logging.getLogger(__name__).warning(
+                    "Failed to clear AI responding state for thread %s", chat_id
+                )

surfsense_web/app/(home)/page.tsx

@@ -5,13 +5,11 @@ import { FeaturesBentoGrid } from "@/components/homepage/features-bento-grid";
 import { FeaturesCards } from "@/components/homepage/features-card";
 import { HeroSection } from "@/components/homepage/hero-section";
 import ExternalIntegrations from "@/components/homepage/integrations";
-import { UseCasesGrid } from "@/components/homepage/use-cases-grid";
 
 export default function HomePage() {
 	return (
 		<main className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white">
 			<HeroSection />
-			<UseCasesGrid />
 			<FeaturesCards />
 			<FeaturesBentoGrid />
 			<ExternalIntegrations />

surfsense_web/components/homepage/hero-section.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import Balancer from "react-wrap-balancer";
-import { WalkthroughScroll } from "@/components/ui/walkthrough-scroll";
+import { HeroCarousel } from "@/components/ui/hero-carousel";
 import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
 import { trackLoginAttempt } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";
@@ -97,18 +97,18 @@ export function HeroSection() {
 				)}
 			</h2>
 			{/* // TODO:aCTUAL DESCRITION */}
-			<p className="relative z-50 mx-auto mt-4 max-w-lg px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
+			<p className="relative z-50 mx-auto mt-4 max-w-xl px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
 				Connect any AI to your documents, Drive, Notion and more,
 			</p>
-			<p className="relative z-50 mx-auto mt-0 max-w-lg px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
+			<p className="relative z-50 mx-auto mt-0 max-w-xl px-4 text-center text-base/6 text-gray-600 dark:text-gray-200">
-				then chat with it, invite your team, or generate podcasts and reports.
+				then chat with it, generate podcasts and reports, or even invite your team.
 			</p>
 			<div className="mb-6 mt-6 flex w-full flex-col items-center justify-center gap-4 px-8 sm:flex-row md:mb-10">
 				<GetStartedButton />
 				{/* <ContactSalesButton /> */}
 			</div>
-			<div ref={containerRef} className="relative w-full">
+			<div ref={containerRef} className="relative w-full z-51">
-				<WalkthroughScroll />
+				<HeroCarousel />
 			</div>
 		</div>
 	);

surfsense_web/components/ui/expanded-gif-overlay.tsx

@@ -2,6 +2,7 @@
 
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 function ExpandedGifOverlay({
 	src,
@@ -20,7 +21,7 @@ function ExpandedGifOverlay({
 		return () => document.removeEventListener("keydown", handleKey);
 	}, [onClose]);
 
-	return (
+	return createPortal(
 		<motion.div
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
@@ -36,10 +37,10 @@ function ExpandedGifOverlay({
 				transition={{ duration: 0.25, ease: "easeOut" }}
 				src={src}
 				alt={alt}
-				className="max-h-[90vh] max-w-[90vw] rounded-2xl shadow-2xl"
+				className="max-h-[90vh] max-w-[90vw] cursor-pointer rounded-2xl shadow-2xl"
-				onClick={(e) => e.stopPropagation()}
 			/>
-		</motion.div>
+		</motion.div>,
+		document.body,
 	);
 }
 

surfsense_web/components/ui/hero-carousel.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay";
+
+const carouselItems = [
+	{
+		title: "Connect & Sync",
+		description:
+			"Connect data sources like Notion, Drive and Gmail. Automatically sync to keep them updated.",
+		src: "/homepage/hero_tutorial/ConnectorFlowGif.gif",
+	},
+	{
+		title: "Upload Documents",
+		description: "Upload documents directly, from images to massive PDFs.",
+		src: "/homepage/hero_tutorial/DocUploadGif.gif",
+	},
+	{
+		title: "Search & Citation",
+		description:
+			"Ask questions and get cited responses from your knowledge base.",
+		src: "/homepage/hero_tutorial/BSNCGif.gif",
+	},
+	{
+		title: "Targeted Document Q&A",
+		description: "Mention specific documents in chat for targeted answers.",
+		src: "/homepage/hero_tutorial/BQnaGif_compressed.gif",
+	},
+	{
+		title: "Produce Reports Instantly",
+		description: "Generate reports from your sources in many formats.",
+		src: "/homepage/hero_tutorial/ReportGenGif_compressed.gif",
+	},
+	{
+		title: "Create Podcasts",
+		description: "Turn anything into a podcast in under 20 seconds.",
+		src: "/homepage/hero_tutorial/PodcastGenGif.gif",
+	},
+	{
+		title: "Image Generation",
+		description: "Generate high-quality images easily from your conversations.",
+		src: "/homepage/hero_tutorial/ImageGenGif.gif",
+	},
+	{
+		title: "Collaborative AI Chat",
+		description: "Collaborate on AI-powered conversations in realtime with your team.",
+		src: "/homepage/hero_realtime/RealTimeChatGif.gif",
+	},
+	{
+		title: "Realtime Comments",
+		description: "Add comments and tag teammates on any message.",
+		src: "/homepage/hero_realtime/RealTimeCommentsFlow.gif",
+	},
+];
+
+function HeroCarouselCard({
+	index,
+	title,
+	description,
+	src,
+	isActive,
+	onExpandedChange,
+}: {
+	index: number;
+	title: string;
+	description: string;
+	src: string;
+	isActive: boolean;
+	onExpandedChange?: (expanded: boolean) => void;
+}) {
+	const { expanded, open, close } = useExpandedGif();
+
+	useEffect(() => {
+		onExpandedChange?.(expanded);
+	}, [expanded, onExpandedChange]);
+	const imgRef = useRef<HTMLImageElement>(null);
+	const [frozenFrame, setFrozenFrame] = useState<string | null>(null);
+	const [playKey, setPlayKey] = useState(0);
+
+	const captureFrame = useCallback((img: HTMLImageElement) => {
+		try {
+			const canvas = document.createElement("canvas");
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			canvas.getContext("2d")?.drawImage(img, 0, 0);
+			setFrozenFrame(canvas.toDataURL());
+		} catch {
+			/* cross-origin or other issue */
+		}
+	}, []);
+
+	useEffect(() => {
+		if (isActive) {
+			setPlayKey((k) => k + 1);
+			setFrozenFrame(null);
+		} else {
+			const img = imgRef.current;
+			if (img && img.complete && img.naturalWidth > 0) {
+				captureFrame(img);
+			}
+		}
+	}, [isActive, captureFrame]);
+
+	useEffect(() => {
+		if (!isActive && !frozenFrame) {
+			const img = new Image();
+			img.onload = () => captureFrame(img);
+			img.src = src;
+		}
+	}, [isActive, frozenFrame, src, captureFrame]);
+
+	return (
+		<>
+			<div className="rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
+				<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
+					{/* <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-xs font-semibold text-white sm:h-8 sm:w-8 sm:text-sm dark:bg-white dark:text-neutral-900">
+						{index + 1}
+					</span> */}
+					<div className="min-w-0">
+						<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-xl dark:text-white">
+							{title}
+						</h3>
+						<p className="text-sm text-neutral-500 dark:text-neutral-400">
+							{description}
+						</p>
+					</div>
+				</div>
+				<div
+					className={`bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950 ${
+						isActive ? "cursor-pointer" : "pointer-events-none"
+					}`}
+					onClick={isActive ? open : undefined}
+				>
+					{isActive ? (
+						<img
+							ref={imgRef}
+							key={`gif_${index}_${playKey}`}
+							src={src}
+							alt={title}
+							className="w-full rounded-lg sm:rounded-xl"
+						/>
+					) : frozenFrame ? (
+						<img
+							src={frozenFrame}
+							alt={title}
+							className="w-full rounded-lg sm:rounded-xl"
+						/>
+					) : (
+						<div className="aspect-video w-full rounded-lg bg-neutral-100 sm:rounded-xl dark:bg-neutral-800" />
+					)}
+				</div>
+			</div>
+
+			<AnimatePresence>
+				{expanded && <ExpandedGifOverlay src={src} alt={title} onClose={close} />}
+			</AnimatePresence>
+		</>
+	);
+}
+
+function HeroCarousel() {
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [isPaused, setIsPaused] = useState(false);
+	const [isGifExpanded, setIsGifExpanded] = useState(false);
+	const [containerWidth, setContainerWidth] = useState(0);
+	const [cardHeight, setCardHeight] = useState(420);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const activeCardRef = useRef<HTMLDivElement>(null);
+	const directionRef = useRef<"forward" | "backward">("forward");
+
+	const goTo = useCallback(
+		(newIndex: number) => {
+			directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
+			setActiveIndex(newIndex);
+		},
+		[activeIndex],
+	);
+
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const update = () => setContainerWidth(el.offsetWidth);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+
+	useEffect(() => {
+		const el = activeCardRef.current;
+		if (!el) return;
+		const update = () => setCardHeight(el.offsetHeight);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [activeIndex, containerWidth]);
+
+	useEffect(() => {
+		if (isPaused || isGifExpanded) return;
+		const timer = setTimeout(() => {
+			directionRef.current = "forward";
+			setActiveIndex((prev) => (prev >= carouselItems.length - 1 ? 0 : prev + 1));
+		}, 8000);
+		return () => clearTimeout(timer);
+	}, [activeIndex, isPaused, isGifExpanded]);
+
+	const cardWidth =
+		containerWidth < 640
+			? containerWidth * 0.85
+			: containerWidth < 1024
+				? Math.min(containerWidth * 0.7, 680)
+				: Math.min(containerWidth * 0.55, 900);
+
+	const baseOffset =
+		containerWidth < 640
+			? containerWidth * 0.2
+			: containerWidth < 1024
+				? containerWidth * 0.15
+				: 150;
+
+	const stackGap = containerWidth < 640 ? 35 : containerWidth < 1024 ? 45 : 55;
+	const perspective = containerWidth < 640 ? 800 : containerWidth < 1024 ? 1000 : 1200;
+
+	const getCardStyle = useCallback(
+		(index: number) => {
+			const diff = index - activeIndex;
+
+			if (diff === 0) {
+				const originX = directionRef.current === "forward" ? 1 : 0;
+				return { x: -cardWidth / 2, rotateY: 0, zIndex: 20, originX, overlayOpacity: 0, blur: 0 };
+			}
+
+			const dist = Math.abs(diff);
+			const isLeft = diff < 0;
+			const offset = baseOffset + (dist - 1) * stackGap;
+			const t = Math.min(1, dist / 3);
+
+			return {
+				x: -cardWidth / 2 + (isLeft ? -offset : offset),
+				rotateY: isLeft ? 90 : -90,
+				zIndex: 20 - dist,
+				originX: isLeft ? 0 : 1,
+				overlayOpacity: t,
+				blur: t * 6,
+			};
+		},
+		[activeIndex, cardWidth, baseOffset, stackGap],
+	);
+
+	return (
+		<div className="w-full py-4 sm:py-8">
+			<div
+				ref={containerRef}
+				className="relative mx-auto w-full"
+				onMouseEnter={() => setIsPaused(true)}
+				onMouseLeave={() => setIsPaused(false)}
+				onTouchStart={() => setIsPaused(true)}
+				onTouchEnd={() => setIsPaused(false)}
+			>
+				<div
+					className="relative z-6 transition-[height] duration-700"
+					style={{ perspective: `${perspective}px`, height: cardHeight }}
+				>
+					{containerWidth > 0 &&
+						carouselItems.map((item, i) => {
+							const style = getCardStyle(i);
+							return (
+								<motion.div
+									key={`carousel_${i}`}
+									ref={i === activeIndex ? activeCardRef : undefined}
+									className="absolute top-0"
+									style={{
+										left: "50%",
+										width: cardWidth,
+										transformStyle: "preserve-3d",
+										zIndex: style.zIndex,
+										transformOrigin: `${style.originX * 100}% 50%`,
+										cursor: i !== activeIndex ? "pointer" : undefined,
+									}}
+									onClick={i !== activeIndex && !isGifExpanded ? () => goTo(i) : undefined}
+									animate={{
+										x: style.x,
+										rotateY: style.rotateY,
+									}}
+									transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
+								>
+									<motion.div
+									animate={{ filter: `blur(${style.blur}px)` }}
+									transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
+								>
+									<HeroCarouselCard
+										index={i}
+										title={item.title}
+										description={item.description}
+										src={item.src}
+										isActive={i === activeIndex}
+										onExpandedChange={setIsGifExpanded}
+									/>
+								</motion.div>
+									<motion.div
+										className="pointer-events-none absolute inset-0 rounded-2xl bg-black sm:rounded-3xl"
+										animate={{ opacity: style.overlayOpacity }}
+										transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
+									/>
+								</motion.div>
+							);
+						})}
+				</div>
+			</div>
+
+			<div className="relative z-5 mt-6 flex justify-center gap-2">
+				{carouselItems.map((_, i) => (
+					<button
+						key={`dot_${i}`}
+						type="button"
+						onClick={() => !isGifExpanded && goTo(i)}
+						className={`h-2 rounded-full transition-all duration-300 ${
+							i === activeIndex
+								? "w-6 bg-neutral-900 dark:bg-white"
+								: "w-2 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
+						}`}
+						aria-label={`Go to slide ${i + 1}`}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export { HeroCarousel, HeroCarouselCard };

surfsense_web/components/ui/walkthrough-scroll.tsx

@@ -1,123 +0,0 @@
-"use client";
-
-import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
-import { useRef } from "react";
-import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay";
-
-const walkthroughSteps = [
-	{
-		step: 1,
-		title: "Login",
-		description: "Login to get started.",
-		src: "/homepage/hero_tutorial/LoginFlowGif.gif",
-	},
-	{
-		step: 2,
-		title: "Connect & Sync",
-		description: "Connect your connectors and sync. Enable periodic syncing to keep them updated.",
-		src: "/homepage/hero_tutorial/ConnectorFlowGif.gif",
-	},
-	{
-		step: 3,
-		title: "Upload Documents",
-		description: "While connectors index, upload your documents directly.",
-		src: "/homepage/hero_tutorial/DocUploadGif.gif",
-	},
-];
-
-function WalkthroughCard({
-	i,
-	step,
-	title,
-	description,
-	src,
-	progress,
-	range,
-	targetScale,
-}: {
-	i: number;
-	step: number;
-	title: string;
-	description: string;
-	src: string;
-	progress: ReturnType<typeof useScroll>["scrollYProgress"];
-	range: [number, number];
-	targetScale: number;
-}) {
-	const container = useRef<HTMLDivElement>(null);
-	const scale = useTransform(progress, range, [1, targetScale]);
-	const { expanded, open, close } = useExpandedGif();
-
-	return (
-		<>
-			<div
-				ref={container}
-				className="sticky top-0 flex items-center justify-center px-4 sm:px-6 lg:px-8"
-			>
-				<motion.div
-					style={{
-						scale,
-						top: `calc(10vh + ${i * 30}px)`,
-					}}
-					className="relative flex origin-top flex-col overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900
-						w-full max-w-[340px] sm:max-w-[520px] md:max-w-[680px] lg:max-w-[900px]"
-				>
-					<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
-						<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-xs font-semibold text-white sm:h-8 sm:w-8 sm:text-sm dark:bg-white dark:text-neutral-900">
-							{step}
-						</span>
-						<div className="min-w-0">
-							<h3 className="truncate text-sm font-semibold text-neutral-900 sm:text-base dark:text-white">
-								{title}
-							</h3>
-							<p className="hidden text-xs text-neutral-500 sm:block dark:text-neutral-400">
-								{description}
-							</p>
-						</div>
-					</div>
-					<div
-						className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950"
-						onClick={open}
-					>
-						<img src={src} alt={title} className="w-full rounded-lg object-cover sm:rounded-xl" />
-					</div>
-				</motion.div>
-			</div>
-
-			<AnimatePresence>
-				{expanded && <ExpandedGifOverlay src={src} alt={title} onClose={close} />}
-			</AnimatePresence>
-		</>
-	);
-}
-
-function WalkthroughScroll() {
-	const container = useRef<HTMLDivElement>(null);
-	const { scrollYProgress } = useScroll({
-		target: container,
-		offset: ["start start", "end end"],
-	});
-
-	return (
-		<div
-			ref={container}
-			className="relative flex w-full flex-col items-center justify-center pb-[15vh] pt-[1vh] sm:pb-[18vh] sm:pt-[2vh]"
-		>
-			{walkthroughSteps.map((project, i) => {
-				const targetScale = Math.max(0.6, 1 - (walkthroughSteps.length - i - 1) * 0.05);
-				return (
-					<WalkthroughCard
-						key={`walkthrough_${i}`}
-						i={i}
-						{...project}
-						progress={scrollYProgress}
-						range={[i * (1 / walkthroughSteps.length), 1]}
-						targetScale={targetScale}
-					/>
-				);
-			})}
-		</div>
-	);
-}
-
-export { WalkthroughScroll, WalkthroughCard };