- (initialState);
+
+/** Derived read-only atom for checking if panel is open */
+export const reportPanelOpenAtom = atom((get) => get(reportPanelAtom).isOpen);
+
+/** Action atom to open the report panel with a specific report */
+export const openReportPanelAtom = atom(
+ null,
+ (
+ _get,
+ set,
+ {
+ reportId,
+ title,
+ wordCount,
+ shareToken,
+ }: { reportId: number; title: string; wordCount?: number; shareToken?: string | null }
+ ) => {
+ set(reportPanelAtom, {
+ isOpen: true,
+ reportId,
+ title,
+ wordCount: wordCount ?? null,
+ shareToken: shareToken ?? null,
+ });
+ }
+);
+
+/** Action atom to close the report panel */
+export const closeReportPanelAtom = atom(null, (_, set) => {
+ set(reportPanelAtom, initialState);
+});
diff --git a/surfsense_web/components/announcements/AnnouncementToastProvider.tsx b/surfsense_web/components/announcements/AnnouncementToastProvider.tsx
new file mode 100644
index 000000000..cf955fe0f
--- /dev/null
+++ b/surfsense_web/components/announcements/AnnouncementToastProvider.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { Megaphone } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import type { Announcement } from "@/contracts/types/announcement.types";
+import { announcements } from "@/lib/announcements/announcements-data";
+import {
+ isAnnouncementToasted,
+ markAnnouncementRead,
+ markAnnouncementToasted,
+} from "@/lib/announcements/announcements-storage";
+
+/** Map announcement category to the Sonner toast method */
+const categoryToVariant: Record = {
+ update: "info",
+ feature: "success",
+ maintenance: "warning",
+ info: "info",
+};
+
+/** Show a single announcement as a toast */
+function showAnnouncementToast(announcement: Announcement) {
+ const variant = categoryToVariant[announcement.category] ?? "info";
+
+ const options = {
+ description: truncateText(announcement.description, 120),
+ duration: 12000,
+ icon: {
if (!editorRef.current) return "";
- let text = "";
- const walker = document.createTreeWalker(
- editorRef.current,
- NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
- {
- acceptNode: (node) => {
- // Skip chip elements entirely
- if (node.nodeType === Node.ELEMENT_NODE) {
- const el = node as Element;
- if (el.hasAttribute(CHIP_DATA_ATTR)) {
- return NodeFilter.FILTER_REJECT; // Skip this subtree
- }
- return NodeFilter.FILTER_SKIP; // Continue into children
- }
- return NodeFilter.FILTER_ACCEPT;
- },
- }
- );
-
- let node: Node | null = walker.nextNode();
- while (node) {
+ const extractText = (node: Node): string => {
if (node.nodeType === Node.TEXT_NODE) {
- text += node.textContent;
+ return node.textContent ?? "";
}
- node = walker.nextNode();
- }
- return text.trim();
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ const element = node as Element;
+
+ // Preserve mention chips as inline @title tokens.
+ if (element.hasAttribute(CHIP_DATA_ATTR)) {
+ const title = element.querySelector("[data-mention-title='true']")?.textContent?.trim();
+ if (title) {
+ return `@${title}`;
+ }
+ return "";
+ }
+
+ let result = "";
+ for (const child of Array.from(element.childNodes)) {
+ result += extractText(child);
+ }
+ return result;
+ }
+
+ return "";
+ };
+
+ return extractText(editorRef.current).trim();
}, []);
// Get all mentioned documents
diff --git a/surfsense_web/components/assistant-ui/markdown-text.tsx b/surfsense_web/components/assistant-ui/markdown-text.tsx
index cc8cec5d9..779d6fa5c 100644
--- a/surfsense_web/components/assistant-ui/markdown-text.tsx
+++ b/surfsense_web/components/assistant-ui/markdown-text.tsx
@@ -10,11 +10,46 @@ import {
} from "@assistant-ui/react-markdown";
import { CheckIcon, CopyIcon } from "lucide-react";
import { type FC, memo, type ReactNode, useState } from "react";
+import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import "katex/dist/katex.min.css";
import { InlineCitation } from "@/components/assistant-ui/inline-citation";
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
import { cn } from "@/lib/utils";
+/**
+ * Convert all LaTeX delimiter styles to the dollar-sign syntax
+ * that remark-math understands. LLMs use various delimiters
+ * (\(...\), \[...\], \begin{equation}, etc.) and we need to
+ * normalise them all to $ / $$ before the markdown parser runs.
+ */
+function convertLatexDelimiters(content: string): string {
+ // 1. Block math: \[...\] → $$...$$
+ content = content.replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => `$$${inner}$$`);
+ // 2. Inline math: \(...\) → $...$
+ content = content.replace(/\\\(([\s\S]*?)\\\)/g, (_, inner) => `$${inner}$`);
+ // 3. Block: \begin{equation}...\end{equation} → $$...$$
+ content = content.replace(
+ /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g,
+ (_, inner) => `$$${inner}$$`
+ );
+ // 4. Block: \begin{displaymath}...\end{displaymath} → $$...$$
+ content = content.replace(
+ /\\begin\{displaymath\}([\s\S]*?)\\end\{displaymath\}/g,
+ (_, inner) => `$$${inner}$$`
+ );
+ // 5. Inline: \begin{math}...\end{math} → $...$
+ content = content.replace(/\\begin\{math\}([\s\S]*?)\\end\{math\}/g, (_, inner) => `$${inner}$`);
+ // 6. Strip backtick wrapping around math: `$$...$$` → $$...$$ and `$...$` → $...$
+ content = content.replace(/`(\${1,2})((?:(?!\1).)+)\1`/g, "$1$2$1");
+
+ // Ensure markdown headings (## ...) always start on their own line.
+ content = content.replace(/([^\n])(#{1,6}\s)/g, "$1\n\n$2");
+
+ return content;
+}
+
// Citation pattern: [citation:CHUNK_ID] or [citation:doc-CHUNK_ID]
// Also matches Chinese brackets 【】 and handles zero-width spaces that LLM sometimes inserts
const CITATION_REGEX = /[[【]\u200B?citation:(doc-)?(\d+)\u200B?[\]】]/g;
@@ -59,7 +94,8 @@ function parseTextWithCitations(text: string): ReactNode[] {
// Reset regex state
CITATION_REGEX.lastIndex = 0;
- while ((match = CITATION_REGEX.exec(text)) !== null) {
+ match = CITATION_REGEX.exec(text);
+ while (match !== null) {
// Add text before the citation
if (match.index > lastIndex) {
parts.push(text.substring(lastIndex, match.index));
@@ -80,6 +116,7 @@ function parseTextWithCitations(text: string): ReactNode[] {
lastIndex = match.index + match[0].length;
instanceIndex++;
+ match = CITATION_REGEX.exec(text);
}
// Add any remaining text after the last citation
@@ -93,9 +130,11 @@ function parseTextWithCitations(text: string): ReactNode[] {
const MarkdownTextImpl = () => {
return (
Then chat with it in real-time, even alongside your team.
- {
)}
+
+
+
+
+
+ {expanded &&
+
+ );
+}
+
+export function UseCasesGrid() {
+ return (
+
+
+ );
+}
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index ed96b84ca..aa6d2984d 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -2,7 +2,15 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAtomValue, useSetAtom } from "jotai";
-import { AlertTriangle, Inbox, LogOut, PencilIcon, SquareLibrary, Trash2 } from "lucide-react";
+import {
+ AlertTriangle,
+ Inbox,
+ LogOut,
+ Megaphone,
+ PencilIcon,
+ SquareLibrary,
+ Trash2,
+} from "lucide-react";
import { useParams, usePathname, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useTheme } from "next-themes";
@@ -23,6 +31,7 @@ import {
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { isPageLimitExceededMetadata } from "@/contracts/types/inbox.types";
+import { useAnnouncements } from "@/hooks/use-announcements";
import { useInbox } from "@/hooks/use-inbox";
import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
import { logout } from "@/lib/auth-utils";
@@ -65,6 +74,9 @@ export function LayoutDataProvider({
const queryClient = useQueryClient();
const { theme, setTheme } = useTheme();
+ // Announcements
+ const { unreadCount: announcementUnreadCount } = useAnnouncements();
+
// Atoms
const { data: user } = useAtomValue(currentUserAtom);
const { data: searchSpacesData, refetch: refetchSearchSpaces } = useAtomValue(searchSpacesAtom);
@@ -293,8 +305,15 @@ export function LayoutDataProvider({
icon: SquareLibrary,
isActive: pathname?.includes("/documents"),
},
+ {
+ title: "Announcements",
+ url: "/announcements",
+ icon: Megaphone,
+ isActive: pathname?.includes("/announcements"),
+ badge: announcementUnreadCount > 0 ? formatInboxCount(announcementUnreadCount) : undefined,
+ },
],
- [searchSpaceId, pathname, isInboxSidebarOpen, totalUnreadCount]
+ [searchSpaceId, pathname, isInboxSidebarOpen, totalUnreadCount, announcementUnreadCount]
);
// Handlers
diff --git a/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx b/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx
index 134c109dd..dd10709ce 100644
--- a/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx
+++ b/surfsense_web/components/layout/ui/icon-rail/SearchSpaceAvatar.tsx
@@ -126,7 +126,7 @@ export function SearchSpaceAvatar({
type="button"
onClick={onClick}
className={cn(
- "relative flex items-center justify-center rounded-lg font-semibold text-white transition-all",
+ "relative flex items-center justify-center rounded-lg font-semibold text-white transition-all select-none",
"hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
sizeClasses,
isActive && "ring-2 ring-primary ring-offset-1 ring-offset-background"
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index a30b3e626..3ba7bb2a0 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -111,7 +111,7 @@ function UserAvatar({
return (
+
);
diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css
index 3b87e4356..4095fc660 100644
--- a/surfsense_web/app/globals.css
+++ b/surfsense_web/app/globals.css
@@ -187,6 +187,23 @@ button {
background-color: hsl(var(--muted-foreground) / 0.4);
}
+/* Human-in-the-loop approval card animations */
+@keyframes pulse-subtle {
+ 0%,
+ 100% {
+ opacity: 1;
+ box-shadow: 0 0 0 0 rgb(0 0 0 / 0.15);
+ }
+ 50% {
+ opacity: 1;
+ box-shadow: 0 0 20px 4px rgb(0 0 0 / 0.12);
+ }
+}
+
+.animate-pulse-subtle {
+ animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
/* Integrations section — vertical column auto-scroll */
@keyframes integrations-scroll-up {
0% {
@@ -208,3 +225,5 @@ button {
@source '../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
@source '../node_modules/streamdown/dist/*.js';
+@source '../node_modules/@streamdown/code/dist/*.js';
+@source '../node_modules/@streamdown/math/dist/*.js';
diff --git a/surfsense_web/app/layout.tsx b/surfsense_web/app/layout.tsx
index 047baa27b..5e8fa394f 100644
--- a/surfsense_web/app/layout.tsx
+++ b/surfsense_web/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
import "./globals.css";
import { RootProvider } from "fumadocs-ui/provider/next";
import { Roboto } from "next/font/google";
+import { AnnouncementToastProvider } from "@/components/announcements/AnnouncementToastProvider";
import { ElectricProvider } from "@/components/providers/ElectricProvider";
import { GlobalLoadingProvider } from "@/components/providers/GlobalLoadingProvider";
import { I18nProvider } from "@/components/providers/I18nProvider";
@@ -124,6 +125,7 @@ export default function RootLayout({
+
+
+
;
- parentRef: React.RefObject;
- beamOptions?: {
- initialX?: number;
- translateX?: number;
- initialY?: number;
- translateY?: number;
- rotate?: number;
- className?: string;
- duration?: number;
- delay?: number;
- repeatDelay?: number;
- };
- }
->(({ parentRef, containerRef, beamOptions = {} }, ref) => {
+const CollisionMechanism = ({
+ parentRef,
+ beamOptions = {},
+}: {
+ parentRef: React.RefObject;
+ beamOptions?: {
+ initialX?: number;
+ translateX?: number;
+ initialY?: number;
+ translateY?: number;
+ rotate?: number;
+ className?: string;
+ duration?: number;
+ delay?: number;
+ repeatDelay?: number;
+ };
+}) => {
const beamRef = useRef(null);
const [collision, setCollision] = useState<{
detected: boolean;
@@ -264,14 +238,14 @@ const CollisionMechanism = React.forwardRef<
useEffect(() => {
const checkCollision = () => {
- if (beamRef.current && containerRef.current && parentRef.current && !cycleCollisionDetected) {
+ if (beamRef.current && parentRef.current && !cycleCollisionDetected) {
const beamRect = beamRef.current.getBoundingClientRect();
- const containerRect = containerRef.current.getBoundingClientRect();
const parentRect = parentRef.current.getBoundingClientRect();
+ const rightEdge = parentRect.right;
- if (beamRect.bottom >= containerRect.top) {
- const relativeX = beamRect.left - parentRect.left + beamRect.width / 2;
- const relativeY = beamRect.bottom - parentRect.top;
+ if (beamRect.right >= rightEdge - 20) {
+ const relativeX = parentRect.width - 20;
+ const relativeY = beamRect.top - parentRect.top + beamRect.height / 2;
setCollision({
detected: true,
@@ -288,7 +262,7 @@ const CollisionMechanism = React.forwardRef<
const animationInterval = setInterval(checkCollision, 100);
return () => clearInterval(animationInterval);
- }, [cycleCollisionDetected, containerRef]);
+ }, [cycleCollisionDetected, parentRef]);
useEffect(() => {
if (collision.detected && collision.coordinates) {
@@ -354,9 +328,7 @@ const CollisionMechanism = React.forwardRef<
);
-});
-
-CollisionMechanism.displayName = "CollisionMechanism";
+};
const Explosion = ({ ...props }: React.HTMLProps) => {
const spans = Array.from({ length: 20 }, (_, index) => ({
diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index 670e3c810..fd118b50a 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -4,6 +4,7 @@ import {
IconBrandGithub,
IconBrandReddit,
IconMenu2,
+ IconSpeakerphone,
IconX,
} from "@tabler/icons-react";
import { AnimatePresence, motion } from "motion/react";
@@ -12,6 +13,7 @@ import { useEffect, useState } from "react";
import { SignInButton } from "@/components/auth/sign-in-button";
import { Logo } from "@/components/Logo";
import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
+import { useAnnouncements } from "@/hooks/use-announcements";
import { useGithubStars } from "@/hooks/use-github-stars";
import { cn } from "@/lib/utils";
@@ -47,7 +49,11 @@ export const Navbar = () => {
const DesktopNav = ({ navItems, isScrolled }: any) => {
const [hovered, setHovered] = useState(null);
+ const [mounted, setMounted] = useState(false);
const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
+ const { unreadCount } = useAnnouncements();
+
+ useEffect(() => setMounted(true), []);
return (
{
@@ -118,6 +124,17 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
)}
+
+
@@ -127,7 +144,11 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
const MobileNav = ({ navItems, isScrolled }: any) => {
const [open, setOpen] = useState(false);
+ const [mounted, setMounted] = useState(false);
const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
+ const { unreadCount } = useAnnouncements();
+
+ useEffect(() => setMounted(true), []);
return (
-
);
@@ -236,24 +211,23 @@ const BackgroundGrids = () => {
);
};
-const CollisionMechanism = React.forwardRef<
- HTMLDivElement,
- {
- containerRef: React.RefObject
- {/* Light mode image */}
-
+
+
+ 
+
+
+
+ {title}
+{description}
+
+
+
+ {/* Row 1: 2 larger cards */}
+ + What You Can Do +
+
+ {useCases.slice(0, 2).map((useCase) => (
+
+
+ {/* Row 2: 3 equal cards */}
+
+ {useCases.slice(2, 5).map((useCase) => (
+
+
+ {/* Row 3: 2 cards */}
+
+ {useCases.slice(5).map((useCase) => (
+
+
+ + And more coming soon. +
+
{initials}
diff --git a/surfsense_web/components/markdown-viewer.tsx b/surfsense_web/components/markdown-viewer.tsx
index 91f97830a..297c850e0 100644
--- a/surfsense_web/components/markdown-viewer.tsx
+++ b/surfsense_web/components/markdown-viewer.tsx
@@ -1,23 +1,87 @@
+import { createCodePlugin } from "@streamdown/code";
+import { createMathPlugin } from "@streamdown/math";
import Image from "next/image";
import { Streamdown, type StreamdownProps } from "streamdown";
+import "katex/dist/katex.min.css";
import { cn } from "@/lib/utils";
+const code = createCodePlugin({
+ themes: ["nord", "nord"],
+});
+
+const math = createMathPlugin({
+ singleDollarTextMath: true,
+});
+
interface MarkdownViewerProps {
content: string;
className?: string;
}
+/**
+ * If the entire content is wrapped in a single ```markdown or ```md
+ * code fence, strip the fence so the inner markdown renders properly.
+ */
+function stripOuterMarkdownFence(content: string): string {
+ const trimmed = content.trim();
+ const match = trimmed.match(/^```(?:markdown|md)?\s*\n([\s\S]+?)\n```\s*$/);
+ return match ? match[1] : content;
+}
+
+/**
+ * Convert all LaTeX delimiter styles to the double-dollar syntax
+ * that Streamdown's @streamdown/math plugin understands.
+ *
+ * Streamdown math conventions (different from remark-math!):
+ * $$...$$ on the SAME line → inline math
+ * $$\n...\n$$ on SEPARATE lines → block (display) math
+ *
+ * Conversions performed:
+ * \[...\] → $$\n ... \n$$ (block math)
+ * \(...\) → $$...$$ (inline math, same line)
+ * \begin{equation}...\end{equation} → $$\n ... \n$$ (block math)
+ * \begin{displaymath}...\end{displaymath} → $$\n ... \n$$ (block math)
+ * \begin{math}...\end{math} → $$...$$ (inline math, same line)
+ * `$$ … $$` → $$ … $$ (strip wrapping backtick code)
+ * `$ … $` → $ … $ (strip wrapping backtick code)
+ * $...$ → $$...$$ (normalise single-$ to double-$$)
+ */
+function convertLatexDelimiters(content: string): string {
+ // 1. Block math: \[...\] → $$\n...\n$$ (display math on separate lines)
+ content = content.replace(/\\\[([\s\S]*?)\\\]/g, (_, inner) => `\n$$\n${inner.trim()}\n$$\n`);
+ // 2. Inline math: \(...\) → $$...$$ (inline math on same line)
+ content = content.replace(/\\\(([\s\S]*?)\\\)/g, (_, inner) => `$$${inner.trim()}$$`);
+ // 3. Block: \begin{equation}...\end{equation} → $$\n...\n$$
+ content = content.replace(
+ /\\begin\{equation\}([\s\S]*?)\\end\{equation\}/g,
+ (_, inner) => `\n$$\n${inner.trim()}\n$$\n`
+ );
+ // 4. Block: \begin{displaymath}...\end{displaymath} → $$\n...\n$$
+ content = content.replace(
+ /\\begin\{displaymath\}([\s\S]*?)\\end\{displaymath\}/g,
+ (_, inner) => `\n$$\n${inner.trim()}\n$$\n`
+ );
+ // 5. Inline: \begin{math}...\end{math} → $$...$$
+ content = content.replace(
+ /\\begin\{math\}([\s\S]*?)\\end\{math\}/g,
+ (_, inner) => `$$${inner.trim()}$$`
+ );
+ // 6. Strip backtick wrapping around math: `$$...$$` → $$...$$ and `$...$` → $...$
+ content = content.replace(/`(\${1,2})((?:(?!\1).)+)\1`/g, "$1$2$1");
+ // 7. Normalise single-dollar $...$ to double-dollar $$...$$ so they render
+ // reliably in Streamdown (single-$ has strict no-space rules that often fail).
+ // We match $…$ where the content starts with a backslash (LaTeX command)
+ // to avoid converting currency like $50.
+ content = content.replace(
+ /(? `$$${inner.trim()}$$`
+ );
+ return content;
+}
+
export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
+ const processedContent = convertLatexDelimiters(stripOuterMarkdownFence(content));
const components: StreamdownProps["components"] = {
- // Define custom components for markdown elements
- callout: ({ children, ...props }) => (
-
{/* Tool UIs for rendering tool results */}
- {children}
-
- ),
p: ({ children, ...props }) => (
{children} @@ -71,42 +135,41 @@ export function MarkdownViewer({ content, className }: MarkdownViewerProps) { /> ), table: ({ ...props }) => ( -
-
+
-
-
-
-
- {snapshotCount === 1
- ? "This chat has a public link"
- : `This chat has ${snapshotCount} public links`}
-
-
- )}
);
}
diff --git a/surfsense_web/components/public-chat/public-chat-view.tsx b/surfsense_web/components/public-chat/public-chat-view.tsx
index a1e6008ff..bfe370bf0 100644
--- a/surfsense_web/components/public-chat/public-chat-view.tsx
+++ b/surfsense_web/components/public-chat/public-chat-view.tsx
@@ -2,8 +2,10 @@
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { Navbar } from "@/components/homepage/navbar";
+import { ReportPanel } from "@/components/report-panel/report-panel";
import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
+import { GenerateReportToolUI } from "@/components/tool-ui/generate-report";
import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
import { Spinner } from "@/components/ui/spinner";
@@ -42,12 +44,16 @@ export function PublicChatView({ shareToken }: PublicChatViewProps) {
+
),
- th: ({ ...props }) =>
- {children}
-
- );
- }
-
- // For code blocks, let Streamdown handle syntax highlighting
- return (
-
- {children}
-
- );
- },
+ th: ({ ...props }) => (
+ *]:!border-none [&_[data-streamdown=code-block]>*]:![box-shadow:none]",
+ "[&_[data-streamdown=code-block-download-button]]:!hidden",
className
)}
>
-
- {content}
+
+ {processedContent}
);
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index c9e693b21..ece5f7fae 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -138,6 +138,26 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
return (
+ {/* Globe indicator when public snapshots exist - clicks to settings */}
+ {hasPublicSnapshots && (
+
+
+
+
+
+ {snapshotCount === 1
+ ? "This chat has a public link"
+ : `This chat has ${snapshotCount} public links`}
+
+
+ )}
+
@@ -242,26 +262,6 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
-
- {/* Globe indicator when public snapshots exist - clicks to settings */}
- {hasPublicSnapshots && (
-
- ;
+type VersionInfo = z.infer;
+
+/**
+ * Shimmer loading skeleton for report panel
+ */
+function ReportPanelSkeleton() {
+ return (
+ (null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [copied, setCopied] = useState(false);
+ const [exporting, setExporting] = useState<"pdf" | "docx" | "md" | null>(null);
+
+ // Version state
+ const [activeReportId, setActiveReportId] = useState(reportId);
+ const [versions, setVersions] = useState([]);
+
+ // Reset active version when the external reportId changes (e.g. clicking a different card)
+ useEffect(() => {
+ setActiveReportId(reportId);
+ }, [reportId]);
+
+ // Fetch report content (re-runs when activeReportId changes for version switching)
+ useEffect(() => {
+ let cancelled = false;
+ const fetchContent = async () => {
+ setIsLoading(true);
+ setError(null);
+ try {
+ const url = shareToken
+ ? `/api/v1/public/${shareToken}/reports/${activeReportId}/content`
+ : `/api/v1/reports/${activeReportId}/content`;
+ const rawData = await baseApiService.get(url);
+ if (cancelled) return;
+ const parsed = ReportContentResponseSchema.safeParse(rawData);
+ if (parsed.success) {
+ // Check if the report was marked as failed in metadata
+ if (parsed.data.report_metadata?.status === "failed") {
+ setError(parsed.data.report_metadata?.error_message || "Report generation failed");
+ } else {
+ setReportContent(parsed.data);
+ // Update versions from the response
+ if (parsed.data.versions && parsed.data.versions.length > 0) {
+ setVersions(parsed.data.versions);
+ }
+ }
+ } else {
+ console.warn("Invalid report content response:", parsed.error.issues);
+ setError("Invalid response format");
+ }
+ } catch (err) {
+ if (cancelled) return;
+ console.error("Error fetching report content:", err);
+ setError(err instanceof Error ? err.message : "Failed to load report");
+ } finally {
+ if (!cancelled) setIsLoading(false);
+ }
+ };
+
+ fetchContent();
+ return () => {
+ cancelled = true;
+ };
+ }, [activeReportId, shareToken]);
+
+ // Copy markdown content
+ const handleCopy = useCallback(async () => {
+ if (!reportContent?.content) return;
+ try {
+ await navigator.clipboard.writeText(reportContent.content);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error("Failed to copy:", err);
+ }
+ }, [reportContent?.content]);
+
+ // Export report
+ const handleExport = useCallback(
+ async (format: "pdf" | "docx" | "md") => {
+ setExporting(format);
+ const safeTitle =
+ title
+ .replace(/[^a-zA-Z0-9 _-]/g, "_")
+ .trim()
+ .slice(0, 80) || "report";
+ try {
+ if (format === "md") {
+ // Download markdown content directly as a .md file
+ if (!reportContent?.content) return;
+ const blob = new Blob([reportContent.content], {
+ type: "text/markdown;charset=utf-8",
+ });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `${safeTitle}.md`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ } else {
+ const response = await authenticatedFetch(
+ `${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/reports/${activeReportId}/export?format=${format}`,
+ { method: "GET" }
+ );
+
+ if (!response.ok) {
+ throw new Error(`Export failed: ${response.status}`);
+ }
+
+ const blob = await response.blob();
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `${safeTitle}.${format}`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+ } catch (err) {
+ console.error(`Export ${format} failed:`, err);
+ } finally {
+ setExporting(null);
+ }
+ },
+ [activeReportId, title, reportContent?.content]
+ );
+
+ // Show full-page skeleton only on initial load (no data loaded yet).
+ // Once we have versions/content from a prior fetch, keep the action bar visible.
+ const hasLoadedBefore = versions.length > 0 || reportContent !== null;
+
+ if (isLoading && !hasLoadedBefore) {
+ return (
+ <>
+ {/* Minimal top bar with close button even during initial load */}
+ (null);
+
+ // Close panel on Escape key
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ closePanel();
+ }
+ };
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [closePanel]);
+
+ if (!panelState.isOpen || !panelState.reportId) return null;
+
+ return (
+ {
+ if (!open) closePanel();
+ }}
+ shouldScaleBackground={false}
+ >
+
+
+
+ );
+}
+
+/**
+ * ReportPanel — responsive report viewer
+ *
+ * On desktop (lg+): Renders as a right-side split panel (flex sibling to the chat thread)
+ * On mobile/tablet: Renders as a Vaul bottom drawer
+ *
+ * When open on desktop, the comments gutter is automatically suppressed
+ * (handled via showCommentsGutterAtom in current-thread.atom.ts)
+ */
+export function ReportPanel() {
+ const panelState = useAtomValue(reportPanelAtom);
+ const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+ // Don't render anything if panel is not open
+ if (!panelState.isOpen || !panelState.reportId) return null;
+
+ if (isDesktop) {
+ return setFailed(true)}
+ unoptimized
+ />
+ );
+}
+
/**
* Article card component for displaying scraped webpage content
*/
@@ -198,27 +223,35 @@ export function Article({
}}
>
{/* Header */}
-
-
+
diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
new file mode 100644
index 000000000..84b271511
--- /dev/null
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -0,0 +1,487 @@
+"use client";
+
+import { useAtomValue, useSetAtom } from "jotai";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { z } from "zod";
+import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
+import { MarkdownViewer } from "@/components/markdown-viewer";
+import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerHandle } from "@/components/ui/drawer";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { baseApiService } from "@/lib/apis/base-api.service";
+import { authenticatedFetch } from "@/lib/auth-utils";
+
+/**
+ * Zod schema for a single version entry
+ */
+const VersionInfoSchema = z.object({
+ id: z.number(),
+ created_at: z.string().nullish(),
+});
+
+/**
+ * Zod schema for the report content API response
+ */
+const ReportContentResponseSchema = z.object({
+ id: z.number(),
+ title: z.string(),
+ content: z.string().nullish(),
+ report_metadata: z
+ .object({
+ status: z.enum(["ready", "failed"]).nullish(),
+ error_message: z.string().nullish(),
+ word_count: z.number().nullish(),
+ char_count: z.number().nullish(),
+ section_count: z.number().nullish(),
+ })
+ .nullish(),
+ report_group_id: z.number().nullish(),
+ versions: z.array(VersionInfoSchema).nullish(),
+});
+
+type ReportContentResponse = z.infer
+
+
+ {/* Title skeleton */}
+
+
+ {/* Paragraph 1 */}
+
+ );
+}
+
+/**
+ * Inner content component used by both desktop panel and mobile drawer
+ */
+function ReportPanelContent({
+ reportId,
+ title,
+ onClose,
+ insideDrawer = false,
+ shareToken,
+}: {
+ reportId: number;
+ title: string;
+ onClose?: () => void;
+ /** When true, adjusts dropdown behavior to work inside a Vaul drawer on mobile */
+ insideDrawer?: boolean;
+ /** When set, uses public endpoint for fetching report data (public shared chat) */
+ shareToken?: string | null;
+}) {
+ const [reportContent, setReportContent] = useState
+
+
+
+
+
+
+ {/* Heading */}
+
+
+ {/* Paragraph 2 */}
+
+
+
+
+
+
+ {/* Heading */}
+
+
+ {/* Paragraph 3 */}
+
+
+
+
+
+
+ {onClose && (
+
+ )}
+
+
+
+
+ {/* Report content — skeleton/error/content shown only in this area */}
+
+ {/* Copy button */}
+
+
+ {/* Export dropdown */}
+
+
+
+
+
+ handleExport("md")}>
+ Download Markdown
+
+ {/* PDF/DOCX export requires server-side conversion via authenticated endpoint.
+ Hide for public viewers who have no auth token. */}
+ {!shareToken && (
+ <>
+ handleExport("pdf")}
+ disabled={exporting !== null}
+ >
+ Download PDF
+
+ handleExport("docx")}
+ disabled={exporting !== null}
+ >
+ Download DOCX
+
+
+ )}
+
+
+
+ {/* Version switcher — only shown when multiple versions exist */}
+ {versions.length > 1 &&
+ (insideDrawer ? (
+ /* Mobile: compact dropdown */
+
+
+
+
+
+ {versions.map((v, i) => (
+ setActiveReportId(v.id)}
+ className={v.id === activeReportId ? "bg-accent font-medium" : ""}
+ >
+ Version {i + 1}
+
+ ))}
+
+
+ ) : (
+ /* Desktop: inline version buttons */
+
+ {onClose && (
+
+ )}
+
+
+ ))}
+
+ {versions.map((v, i) => (
+
+ ))}
+
+
+ {activeVersionIndex + 1} of {versions.length}
+
+
+ {isLoading ? (
+
+
+ );
+}
+
+/**
+ * Desktop report panel — renders as a right-side flex sibling
+ */
+function DesktopReportPanel() {
+ const panelState = useAtomValue(reportPanelAtom);
+ const closePanel = useSetAtom(closeReportPanelAtom);
+ const panelRef = useRef
+
+ ) : (
+
+
+ Failed to load report
+{error || "An unknown error occurred"}
+
+ {reportContent.content ? (
+
+ )}
+ No content available.
+ )} +
+
+ );
+}
+
+/**
+ * Mobile report drawer — uses Vaul (same pattern as comment sheet)
+ */
+function MobileReportDrawer() {
+ const panelState = useAtomValue(reportPanelAtom);
+ const closePanel = useSetAtom(closeReportPanelAtom);
+
+ if (!panelState.reportId) return null;
+
+ return (
+
+
+
- {/* Icon */}
-
+
-
+
+ {/* Favicon / Icon */}
+ {domain ? (
+ ;
+ description?: string;
+ }>;
+ review_configs: Array<{
+ action_name: string;
+ allowed_decisions: Array<"approve" | "edit" | "reject">;
+ }>;
+ interrupt_type?: string;
+ message?: string;
+ context?: {
+ accounts?: Array<{
+ id: number;
+ name: string;
+ workspace_id: string | null;
+ workspace_name: string;
+ workspace_icon: string;
+ }>;
+ parent_pages?: Record<
+ number,
+ Array<{
+ page_id: string;
+ title: string;
+ document_id: number;
+ }>
+ >;
+ error?: string;
+ };
+}
+
+interface SuccessResult {
+ status: "success";
+ page_id: string;
+ title: string;
+ url: string;
+ content_preview?: string;
+ content_length?: number;
+ message?: string;
+}
+
+interface ErrorResult {
+ status: "error";
+ message: string;
+}
+
+type CreateNotionPageResult = InterruptResult | SuccessResult | ErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+ return (
+ typeof result === "object" &&
+ result !== null &&
+ "__interrupt__" in result &&
+ (result as InterruptResult).__interrupt__ === true
+ );
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+ return (
+ typeof result === "object" &&
+ result !== null &&
+ "status" in result &&
+ (result as ErrorResult).status === "error"
+ );
+}
+
+function ApprovalCard({
+ args,
+ interruptData,
+ onDecision,
+}: {
+ args: Record;
+ interruptData: InterruptResult;
+ onDecision: (decision: {
+ type: "approve" | "reject" | "edit";
+ message?: string;
+ edited_action?: { name: string; args: Record };
+ }) => void;
+}) {
+ const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
+ interruptData.__decided__ ?? null
+ );
+ const [isEditing, setIsEditing] = useState(false);
+ const [editedArgs, setEditedArgs] = useState>(args);
+
+ const accounts = interruptData.context?.accounts ?? [];
+ const parentPages = interruptData.context?.parent_pages ?? {};
+
+ const defaultAccountId = useMemo(() => {
+ if (args.connector_id) return String(args.connector_id);
+ if (accounts.length === 1) return String(accounts[0].id);
+ return "";
+ }, [args.connector_id, accounts]);
+
+ const [selectedAccountId, setSelectedAccountId] = useState(defaultAccountId);
+ const [selectedParentPageId, setSelectedParentPageId] = useState(
+ args.parent_page_id ? String(args.parent_page_id) : "__none__"
+ );
+
+ const availableParentPages = useMemo(() => {
+ if (!selectedAccountId) return [];
+ return parentPages[Number(selectedAccountId)] ?? [];
+ }, [selectedAccountId, parentPages]);
+
+ const isTitleValid = useMemo(() => {
+ const currentTitle = isEditing ? editedArgs.title : args.title;
+ return currentTitle && typeof currentTitle === "string" && currentTitle.trim().length > 0;
+ }, [isEditing, editedArgs.title, args.title]);
+
+ const reviewConfig = interruptData.review_configs[0];
+ const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
+ const canEdit = allowedDecisions.includes("edit");
+
+ return (
+
+
+ ) : (
+
+
+ )}
{/* Content */}
{/* Title */}
-
+
{/* Response actions */}
diff --git a/surfsense_web/components/tool-ui/create-notion-page.tsx b/surfsense_web/components/tool-ui/create-notion-page.tsx
new file mode 100644
index 000000000..e148c71ba
--- /dev/null
+++ b/surfsense_web/components/tool-ui/create-notion-page.tsx
@@ -0,0 +1,503 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { AlertTriangleIcon, CheckIcon, Loader2Icon, PencilIcon, XIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+interface InterruptResult {
+ __interrupt__: true;
+ __decided__?: "approve" | "reject" | "edit";
+ action_requests: Array<{
+ name: string;
+ args: Record
+
{title}
{/* Description */}
{description && (
-
{description}
++ {description} +
)} {/* Metadata row */} -
+
-
- {/* External link indicator */}
- {href && (
-
{domain && (
@@ -274,13 +307,6 @@ export function Article({
)}
-
- )}
+
+
+
+ {/* Context section - account and parent page selection */}
+ {!decided && interruptData.context && (
+
+
+
+
+ + Create Notion Page +
++ {isEditing ? "You can edit the arguments below" : "Requires your approval to proceed"} +
+
+ {interruptData.context.error ? (
+
+ )}
+
+ {/* Display mode - show args as read-only */}
+ {!isEditing && (
+ {interruptData.context.error}
+ ) : ( + <> + {accounts.length > 0 && ( +
+
+ )}
+
+ {selectedAccountId && (
+
+ Notion Account *
+
+
+
+
+ )}
+
+ )}
+
+ Parent Page (optional)
+
+
+ {availableParentPages.length === 0 && selectedAccountId && (
+ + No pages available. Page will be created at workspace root. +
+ )} +
+ {args.title != null && (
+
+ )}
+
+ {/* Edit mode - show editable form fields */}
+ {isEditing && !decided && (
+
+
+ )}
+ {args.content != null && (
+ Title
+{String(args.title)}
+
+
+ )}
+ Content
++ {String(args.content)} +
+
+
+
+ setEditedArgs({ ...editedArgs, title: e.target.value })}
+ placeholder="Enter page title"
+ className={!isTitleValid ? "border-destructive" : ""}
+ />
+ {!isTitleValid && (
+
+ Title is required and cannot be empty
+ )} +
+
+