feat: improve public chat UI and shared components

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-	"biome.configurationPath": "./surfsense_web/biome.json"
+	"biome.configurationPath": "./surfsense_web/biome.json",
+	"deepscan.ignoreConfirmWarning": true
 }

surfsense_backend/app/services/public_chat_service.py

@@ -23,9 +23,18 @@ UI_TOOLS = {
 
 
 def strip_citations(text: str) -> str:
-    """Remove [citation:X] and [citation:doc-X] patterns from text."""
+    """
-    text = re.sub(r"\[citation:(doc-)?\d+\]", "", text)
+    Remove [citation:X] and [citation:doc-X] patterns from text.
-    text = re.sub(r"\s+", " ", text)
+    Preserves newlines to maintain markdown formatting.
+    """
+    # Remove citation patterns (including Chinese brackets 【】)
+    text = re.sub(r"[\[【]citation:(doc-)?\d+[\]】]", "", text)
+    # Collapse multiple spaces/tabs (but NOT newlines) into single space
+    text = re.sub(r"[^\S\n]+", " ", text)
+    # Normalize excessive blank lines (3+ newlines → 2)
+    text = re.sub(r"\n{3,}", "\n\n", text)
+    # Clean up spaces around newlines
+    text = re.sub(r" *\n *", "\n", text)
     return text.strip()
 
 

surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx

@@ -44,6 +44,7 @@ import {
 	looksLikePodcastRequest,
 	setActivePodcastTaskId,
 } from "@/lib/chat/podcast-state";
+import { convertToThreadMessage } from "@/lib/chat/message-utils";
 import {
 	appendMessage,
 	type ChatVisibility,
@@ -108,111 +109,6 @@ function extractMentionedDocuments(content: unknown): MentionedDocumentInfo[] {
 	return [];
 }
 
-/**
- * Zod schema for persisted attachment info
- */
-const PersistedAttachmentSchema = z.object({
-	id: z.string(),
-	name: z.string(),
-	type: z.string(),
-	contentType: z.string().optional(),
-	imageDataUrl: z.string().optional(),
-	extractedContent: z.string().optional(),
-});
-
-const AttachmentsPartSchema = z.object({
-	type: z.literal("attachments"),
-	items: z.array(PersistedAttachmentSchema),
-});
-
-type PersistedAttachment = z.infer<typeof PersistedAttachmentSchema>;
-
-/**
- * Extract persisted attachments from message content (type-safe with Zod)
- */
-function extractPersistedAttachments(content: unknown): PersistedAttachment[] {
-	if (!Array.isArray(content)) return [];
-
-	for (const part of content) {
-		const result = AttachmentsPartSchema.safeParse(part);
-		if (result.success) {
-			return result.data.items;
-		}
-	}
-
-	return [];
-}
-
-/**
- * Convert backend message to assistant-ui ThreadMessageLike format
- * Filters out 'thinking-steps' part as it's handled separately via messageThinkingSteps
- * Restores attachments for user messages from persisted data
- */
-function convertToThreadMessage(msg: MessageRecord): ThreadMessageLike {
-	let content: ThreadMessageLike["content"];
-
-	if (typeof msg.content === "string") {
-		content = [{ type: "text", text: msg.content }];
-	} else if (Array.isArray(msg.content)) {
-		// Filter out custom metadata parts - they're handled separately
-		const filteredContent = msg.content.filter((part: unknown) => {
-			if (typeof part !== "object" || part === null || !("type" in part)) return true;
-			const partType = (part as { type: string }).type;
-			// Filter out thinking-steps, mentioned-documents, and attachments
-			return (
-				partType !== "thinking-steps" &&
-				partType !== "mentioned-documents" &&
-				partType !== "attachments"
-			);
-		});
-		content =
-			filteredContent.length > 0
-				? (filteredContent as ThreadMessageLike["content"])
-				: [{ type: "text", text: "" }];
-	} else {
-		content = [{ type: "text", text: String(msg.content) }];
-	}
-
-	// Restore attachments for user messages
-	let attachments: ThreadMessageLike["attachments"];
-	if (msg.role === "user") {
-		const persistedAttachments = extractPersistedAttachments(msg.content);
-		if (persistedAttachments.length > 0) {
-			attachments = persistedAttachments.map((att) => ({
-				id: att.id,
-				name: att.name,
-				type: att.type as "document" | "image" | "file",
-				contentType: att.contentType || "application/octet-stream",
-				status: { type: "complete" as const },
-				content: [],
-				// Custom fields for our ChatAttachment interface
-				imageDataUrl: att.imageDataUrl,
-				extractedContent: att.extractedContent,
-			}));
-		}
-	}
-
-	// Build metadata.custom for author display in shared chats
-	const metadata = msg.author_id
-		? {
-				custom: {
-					author: {
-						displayName: msg.author_display_name ?? null,
-						avatarUrl: msg.author_avatar_url ?? null,
-					},
-				},
-			}
-		: undefined;
-
-	return {
-		id: `msg-${msg.id}`,
-		role: msg.role,
-		content,
-		createdAt: new Date(msg.created_at),
-		attachments,
-		metadata,
-	};
-}
 
 /**
  * Tools that should render custom UI in the chat.
@@ -458,6 +354,8 @@ export default function NewChatPage() {
 			visibility: currentThread?.visibility ?? null,
 			hasComments: currentThread?.has_comments ?? false,
 			addingCommentToMessageId: null,
+			publicShareEnabled: currentThread?.public_share_enabled ?? false,
+			publicShareToken: null, 
 		});
 	}, [currentThread, setCurrentThreadState]);
 

surfsense_web/atoms/chat/chat-thread-mutation.atoms.ts

@@ -0,0 +1,28 @@
+import { atomWithMutation } from "jotai-tanstack-query";
+import { toast } from "sonner";
+import type {
+	TogglePublicShareRequest,
+	TogglePublicShareResponse,
+} from "@/contracts/types/chat-threads.types";
+import { chatThreadsApiService } from "@/lib/apis/chat-threads-api.service";
+
+export const togglePublicShareMutationAtom = atomWithMutation(() => ({
+	mutationFn: async (request: TogglePublicShareRequest) => {
+		return chatThreadsApiService.togglePublicShare(request);
+	},
+	onSuccess: (response: TogglePublicShareResponse) => {
+		if (response.enabled && response.share_token) {
+			const publicUrl = `${window.location.origin}/public/${response.share_token}`;
+			navigator.clipboard.writeText(publicUrl);
+			toast.success("Public link copied to clipboard", {
+				description: "Anyone with this link can view the chat",
+			});
+		} else {
+			toast.success("Public sharing disabled");
+		}
+	},
+	onError: (error: Error) => {
+		console.error("Failed to toggle public share:", error);
+		toast.error("Failed to update public sharing");
+	},
+}));

surfsense_web/atoms/chat/current-thread.atom.ts

@@ -17,6 +17,8 @@ interface CurrentThreadState {
 	visibility: ChatVisibility | null;
 	hasComments: boolean;
 	addingCommentToMessageId: number | null;
+	publicShareEnabled: boolean;
+	publicShareToken: string | null;
 }
 
 const initialState: CurrentThreadState = {
@@ -24,6 +26,8 @@ const initialState: CurrentThreadState = {
 	visibility: null,
 	hasComments: false,
 	addingCommentToMessageId: null,
+	publicShareEnabled: false,
+	publicShareToken: null,
 };
 
 export const currentThreadAtom = atom<CurrentThreadState>(initialState);

surfsense_web/components/auth/sign-in-button.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { motion } from "motion/react";
+import Link from "next/link";
+import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
+import { trackLoginAttempt } from "@/lib/posthog/events";
+import { cn } from "@/lib/utils";
+
+// Official Google "G" logo with brand colors
+const GoogleLogo = ({ className }: { className?: string }) => (
+	<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+			fill="#4285F4"
+		/>
+		<path
+			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+			fill="#34A853"
+		/>
+		<path
+			d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+			fill="#FBBC05"
+		/>
+		<path
+			d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+			fill="#EA4335"
+		/>
+	</svg>
+);
+
+interface SignInButtonProps {
+	/** 
+	 * - "desktop": Hidden on mobile, visible on md+ (for navbar with separate mobile menu)
+	 * - "mobile": Full width, always visible (for mobile menu)
+	 * - "compact": Always visible, compact size (for headers)
+	 */
+	variant?: "desktop" | "mobile" | "compact";
+}
+
+export const SignInButton = ({ variant = "desktop" }: SignInButtonProps) => {
+	const isGoogleAuth = AUTH_TYPE === "GOOGLE";
+
+	const handleGoogleLogin = () => {
+		trackLoginAttempt("google");
+		window.location.href = `${BACKEND_URL}/auth/google/authorize-redirect`;
+	};
+
+	const getClassName = () => {
+		if (variant === "desktop") {
+			return isGoogleAuth
+				? "hidden rounded-full bg-white px-5 py-2 text-sm text-neutral-700 shadow-md ring-1 ring-neutral-200/50 hover:shadow-lg md:flex dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50"
+				: "hidden rounded-full bg-black px-8 py-2 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] md:block dark:bg-white dark:text-black";
+		}
+		if (variant === "compact") {
+			return isGoogleAuth
+				? "rounded-full bg-white px-4 py-1.5 text-sm text-neutral-700 shadow-md ring-1 ring-neutral-200/50 hover:shadow-lg dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50"
+				: "rounded-full bg-black px-6 py-1.5 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black";
+		}
+		// mobile
+		return isGoogleAuth
+			? "w-full rounded-lg bg-white px-8 py-2.5 text-neutral-700 shadow-md ring-1 ring-neutral-200/50 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50 touch-manipulation"
+			: "w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation";
+	};
+
+	if (isGoogleAuth) {
+		return (
+			<motion.button
+				type="button"
+				onClick={handleGoogleLogin}
+				whileHover={{ scale: 1.02 }}
+				whileTap={{ scale: 0.98 }}
+				className={cn(
+					"flex items-center justify-center gap-2 font-semibold transition-all duration-200",
+					getClassName()
+				)}
+			>
+				<GoogleLogo className="h-4 w-4" />
+				<span>Sign In</span>
+			</motion.button>
+		);
+	}
+
+	return (
+		<Link href="/login" className={getClassName()}>
+			Sign In
+		</Link>
+	);
+};

surfsense_web/components/homepage/navbar.tsx

@@ -9,78 +9,12 @@ import {
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 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 { useGithubStars } from "@/hooks/use-github-stars";
-import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
-import { trackLoginAttempt } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";
 
-// Official Google "G" logo with brand colors
-const GoogleLogo = ({ className }: { className?: string }) => (
-	<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<path
-			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-			fill="#4285F4"
-		/>
-		<path
-			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-			fill="#34A853"
-		/>
-		<path
-			d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-			fill="#FBBC05"
-		/>
-		<path
-			d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-			fill="#EA4335"
-		/>
-	</svg>
-);
-
-// Sign in button component that handles both Google OAuth and local auth
-const SignInButton = ({ variant = "desktop" }: { variant?: "desktop" | "mobile" }) => {
-	const isGoogleAuth = AUTH_TYPE === "GOOGLE";
-
-	const handleGoogleLogin = () => {
-		trackLoginAttempt("google");
-		window.location.href = `${BACKEND_URL}/auth/google/authorize-redirect`;
-	};
-
-	if (isGoogleAuth) {
-		return (
-			<motion.button
-				type="button"
-				onClick={handleGoogleLogin}
-				whileHover={{ scale: 1.02 }}
-				whileTap={{ scale: 0.98 }}
-				className={cn(
-					"flex items-center justify-center gap-2 font-semibold transition-all duration-200",
-					variant === "desktop"
-						? "hidden rounded-full bg-white px-5 py-2 text-sm text-neutral-700 shadow-md ring-1 ring-neutral-200/50 hover:shadow-lg md:flex dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50"
-						: "w-full rounded-lg bg-white px-8 py-2.5 text-neutral-700 shadow-md ring-1 ring-neutral-200/50 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50 touch-manipulation"
-				)}
-			>
-				<GoogleLogo className="h-4 w-4" />
-				<span>Sign In</span>
-			</motion.button>
-		);
-	}
-
-	return (
-		<Link
-			href="/login"
-			className={cn(
-				variant === "desktop"
-					? "hidden rounded-full bg-black px-8 py-2 text-sm font-bold text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] md:block dark:bg-white dark:text-black"
-					: "w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black text-center touch-manipulation"
-			)}
-		>
-			Sign In
-		</Link>
-	);
-};
-
 export const Navbar = () => {
 	const [isScrolled, setIsScrolled] = useState(false);
 

surfsense_web/components/new-chat/chat-share-button.tsx

@@ -2,18 +2,15 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
-import { User, Users } from "lucide-react";
+import { Globe, Link2, User, Users } from "lucide-react";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
+import { togglePublicShareMutationAtom } from "@/atoms/chat/chat-thread-mutation.atoms";
 import { currentThreadAtom, setThreadVisibilityAtom } from "@/atoms/chat/current-thread.atom";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import {
+import { type ChatVisibility, type ThreadRecord, updateThreadVisibility } from "@/lib/chat/thread-persistence";
-	type ChatVisibility,
-	type ThreadRecord,
-	updateThreadVisibility,
-} from "@/lib/chat/thread-persistence";
 import { cn } from "@/lib/utils";
 
 interface ChatShareButtonProps {
@@ -48,11 +45,19 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 
 	// Use Jotai atom for visibility (single source of truth)
 	const currentThreadState = useAtomValue(currentThreadAtom);
+	const setCurrentThreadState = useSetAtom(currentThreadAtom);
 	const setThreadVisibility = useSetAtom(setThreadVisibilityAtom);
 
+	// Public share mutation
+	const { mutateAsync: togglePublicShare, isPending: isTogglingPublic } = useAtomValue(
+		togglePublicShareMutationAtom
+	);
+
 	// Use Jotai visibility if available (synced from chat page), otherwise fall back to thread prop
 	const currentVisibility = currentThreadState.visibility ?? thread?.visibility ?? "PRIVATE";
-	const isOwnThread = thread?.created_by_id !== null; // If we have the thread, we can modify it
+	const isPublicEnabled =
+		currentThreadState.publicShareEnabled ?? thread?.public_share_enabled ?? false;
+	const publicShareToken = currentThreadState.publicShareToken ?? null;
 
 	const handleVisibilityChange = useCallback(
 		async (newVisibility: ChatVisibility) => {
@@ -87,12 +92,41 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 		[thread, currentVisibility, onVisibilityChange, queryClient, setThreadVisibility]
 	);
 
+	const handlePublicShareToggle = useCallback(async () => {
+		if (!thread) return;
+
+		try {
+			const response = await togglePublicShare({
+				thread_id: thread.id,
+				enabled: !isPublicEnabled,
+			});
+
+			// Update atom state with response
+			setCurrentThreadState((prev) => ({
+				...prev,
+				publicShareEnabled: response.enabled,
+				publicShareToken: response.share_token,
+			}));
+		} catch(error) {
+			console.error("Failed to toggle public share:", error);
+		}
+	}, [thread, isPublicEnabled, togglePublicShare, setCurrentThreadState]);
+
+	const handleCopyPublicLink = useCallback(async () => {
+		if (!publicShareToken) return;
+
+		const publicUrl = `${window.location.origin}/public/${publicShareToken}`;
+		await navigator.clipboard.writeText(publicUrl);
+		toast.success("Public link copied to clipboard");
+	}, [publicShareToken]);
+
 	// Don't show if no thread (new chat that hasn't been created yet)
 	if (!thread) {
 		return null;
 	}
 
-	const CurrentIcon = currentVisibility === "PRIVATE" ? User : Users;
+	const CurrentIcon = isPublicEnabled ? Globe : currentVisibility === "PRIVATE" ? User : Users;
+	const buttonLabel = isPublicEnabled ? "Public" : currentVisibility === "PRIVATE" ? "Private" : "Shared";
 
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
@@ -108,9 +142,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 							)}
 						>
 							<CurrentIcon className="h-4 w-4" />
-							<span className="hidden md:inline text-sm">
+							<span className="hidden md:inline text-sm">{buttonLabel}</span>
-								{currentVisibility === "PRIVATE" ? "Private" : "Shared"}
-							</span>
 						</Button>
 					</PopoverTrigger>
 				</TooltipTrigger>
@@ -124,6 +156,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 				onCloseAutoFocus={(e) => e.preventDefault()}
 			>
 				<div className="p-1.5 space-y-1">
+					{/* Visibility Options */}
 					{visibilityOptions.map((option) => {
 						const isSelected = currentVisibility === option.value;
 						const Icon = option.icon;
@@ -166,6 +199,65 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 							</button>
 						);
 					})}
+
+					{/* Divider */}
+					<div className="border-t border-border my-1" />
+
+					{/* Public Share Option */}
+					<button
+						type="button"
+						onClick={handlePublicShareToggle}
+						disabled={isTogglingPublic}
+						className={cn(
+							"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
+							"hover:bg-accent/50 cursor-pointer",
+							"focus:outline-none",
+							"disabled:opacity-50 disabled:cursor-not-allowed",
+							isPublicEnabled && "bg-accent/80"
+						)}
+					>
+						<div
+							className={cn(
+								"size-7 rounded-md shrink-0 grid place-items-center",
+								isPublicEnabled ? "bg-primary/10" : "bg-muted"
+							)}
+						>
+							<Globe
+								className={cn(
+									"size-4 block",
+									isPublicEnabled ? "text-primary" : "text-muted-foreground"
+								)}
+							/>
+						</div>
+						<div className="flex-1 text-left min-w-0">
+							<div className="flex items-center gap-1.5">
+								<span className={cn("text-sm font-medium", isPublicEnabled && "text-primary")}>
+									Public
+								</span>
+								{isPublicEnabled && (
+									<span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">
+										ON
+									</span>
+								)}
+							</div>
+							<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
+								Anyone with the link can read
+							</p>
+						</div>
+						{isPublicEnabled && publicShareToken && (
+							<button
+								type="button"
+								onClick={(e) => {
+									e.stopPropagation();
+									handleCopyPublicLink();
+								}}
+								className="shrink-0 p-1.5 rounded-md hover:bg-muted transition-colors"
+								title="Copy public link"
+							>
+								<Link2 className="size-4 text-muted-foreground" />
+							</button>
+						)}
+					</button>
 				</div>
 			</PopoverContent>
 		</Popover>

surfsense_web/components/public-chat/public-chat-header.tsx

@@ -1,34 +0,0 @@
-import { formatDistanceToNow } from "date-fns";
-import Image from "next/image";
-import Link from "next/link";
-
-interface PublicChatHeaderProps {
-	title: string;
-	createdAt: string;
-}
-
-export function PublicChatHeader({ title, createdAt }: PublicChatHeaderProps) {
-	const timeAgo = formatDistanceToNow(new Date(createdAt), { addSuffix: true });
-
-	return (
-		<header className="sticky top-0 z-10 -mx-4 mb-4 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-			<div className="mx-auto flex max-w-(--thread-max-width) items-center justify-between py-3">
-				<div className="flex items-center gap-3">
-					<Link href="/" className="shrink-0">
-						<Image
-							src="/surfsenselogo.png"
-							alt="SurfSense"
-							width={32}
-							height={32}
-							className="rounded"
-						/>
-					</Link>
-					<div className="min-w-0">
-						<h1 className="truncate font-medium">{title}</h1>
-						<p className="text-xs text-muted-foreground">{timeAgo}</p>
-					</div>
-				</div>
-			</div>
-		</header>
-	);
-}

surfsense_web/components/public-chat/public-chat-view.tsx

@@ -2,6 +2,7 @@
 
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { Loader2 } from "lucide-react";
+import { Navbar } from "@/components/homepage/navbar";
 import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
 import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
 import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
@@ -9,7 +10,6 @@ import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
 import { usePublicChat } from "@/hooks/use-public-chat";
 import { usePublicChatRuntime } from "@/hooks/use-public-chat-runtime";
 import { PublicChatFooter } from "./public-chat-footer";
-import { PublicChatHeader } from "./public-chat-header";
 import { PublicThread } from "./public-thread";
 
 interface PublicChatViewProps {
@@ -22,37 +22,43 @@ export function PublicChatView({ shareToken }: PublicChatViewProps) {
 
 	if (isLoading) {
 		return (
-			<div className="flex h-screen items-center justify-center">
+			<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
-				<Loader2 className="size-8 animate-spin text-muted-foreground" />
+				<Navbar />
-			</div>
+				<div className="flex h-screen items-center justify-center">
+					<Loader2 className="size-8 animate-spin text-muted-foreground" />
+				</div>
+			</main>
 		);
 	}
 
 	if (error || !data) {
 		return (
-			<div className="flex h-screen flex-col items-center justify-center gap-4 px-4 text-center">
+			<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
-				<h1 className="text-2xl font-semibold">Chat not found</h1>
+				<Navbar />
-				<p className="text-muted-foreground">
+				<div className="flex h-screen flex-col items-center justify-center gap-4 px-4 text-center">
-					This chat may have been removed or is no longer public.
+					<h1 className="text-2xl font-semibold">Chat not found</h1>
-				</p>
+					<p className="text-muted-foreground">
-			</div>
+						This chat may have been removed or is no longer public.
+					</p>
+				</div>
+			</main>
 		);
 	}
 
 	return (
-		<AssistantRuntimeProvider runtime={runtime}>
+		<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
-			{/* Tool UIs for rendering tool results */}
+			<Navbar />
-			<GeneratePodcastToolUI />
+			<AssistantRuntimeProvider runtime={runtime}>
-			<LinkPreviewToolUI />
+				{/* Tool UIs for rendering tool results */}
-			<DisplayImageToolUI />
+				<GeneratePodcastToolUI />
-			<ScrapeWebpageToolUI />
+				<LinkPreviewToolUI />
+				<DisplayImageToolUI />
+				<ScrapeWebpageToolUI />
 
-			<div className="flex h-screen flex-col bg-background">
+				<div className="flex h-screen flex-col pt-16">
-				<PublicThread
+					<PublicThread footer={<PublicChatFooter shareToken={shareToken} />} />
-					header={<PublicChatHeader title={data.thread.title} createdAt={data.thread.created_at} />}
+				</div>
-					footer={<PublicChatFooter shareToken={shareToken} />}
+			</AssistantRuntimeProvider>
-				/>
+		</main>
-			</div>
-		</AssistantRuntimeProvider>
 	);
 }

surfsense_web/components/public-chat/public-thread.tsx

@@ -12,10 +12,8 @@ import { type FC, type ReactNode, useState } from "react";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { cn } from "@/lib/utils";
 
 interface PublicThreadProps {
-	header?: ReactNode;
 	footer?: ReactNode;
 }
 
@@ -23,7 +21,7 @@ interface PublicThreadProps {
  * Read-only thread component for public chat viewing.
  * No composer, no edit capabilities - just message display.
  */
-export const PublicThread: FC<PublicThreadProps> = ({ header, footer }) => {
+export const PublicThread: FC<PublicThreadProps> = ({ footer }) => {
 	return (
 		<ThreadPrimitive.Root
 			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
@@ -32,8 +30,6 @@ export const PublicThread: FC<PublicThreadProps> = ({ header, footer }) => {
 			}}
 		>
 			<ThreadPrimitive.Viewport className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4">
-				{header}
-
 				<ThreadPrimitive.Messages
 					components={{
 						UserMessage: PublicUserMessage,
@@ -159,10 +155,8 @@ const PublicAssistantActionBar: FC = () => {
 	return (
 		<ActionBarPrimitive.Root
 			autohide="not-last"
-			className={cn(
+			autohideFloat="single-branch"
-				"aui-assistant-action-bar-root -ml-1 flex gap-1 text-muted-foreground",
+			className="aui-assistant-action-bar-root -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
-				"opacity-0 group-hover:opacity-100 transition-opacity"
-			)}
 		>
 			<ActionBarPrimitive.Copy asChild>
 				<TooltipIconButton tooltip="Copy">

surfsense_web/hooks/use-public-chat-runtime.ts

@@ -1,17 +1,31 @@
 "use client";
 
-import {
+import { type AppendMessage, useExternalStoreRuntime } from "@assistant-ui/react";
-	type AppendMessage,
-	type ThreadMessageLike,
-	useExternalStoreRuntime,
-} from "@assistant-ui/react";
 import { useCallback, useMemo } from "react";
 import type { GetPublicChatResponse, PublicChatMessage } from "@/contracts/types/public-chat.types";
+import { convertToThreadMessage } from "@/lib/chat/message-utils";
+import type { MessageRecord } from "@/lib/chat/thread-persistence";
 
 interface UsePublicChatRuntimeOptions {
 	data: GetPublicChatResponse | undefined;
 }
 
+/**
+ * Map PublicChatMessage to MessageRecord shape for reuse of convertToThreadMessage
+ */
+function toMessageRecord(msg: PublicChatMessage, idx: number): MessageRecord {
+	return {
+		id: idx,
+		thread_id: 0,
+		role: msg.role as "user" | "assistant" | "system",
+		content: msg.content,
+		created_at: msg.created_at,
+		author_id: msg.author ? "public" : null,
+		author_display_name: msg.author?.display_name ?? null,
+		author_avatar_url: msg.author?.avatar_url ?? null,
+	};
+}
+
 /**
  * Creates a read-only runtime for public chat viewing.
  */
@@ -21,24 +35,8 @@ export function usePublicChatRuntime({ data }: UsePublicChatRuntimeOptions) {
 	// No-op - public chat is read-only
 	const onNew = useCallback(async (_message: AppendMessage) => {}, []);
 
-	// Convert PublicChatMessage to ThreadMessageLike
 	const convertMessage = useCallback(
-		(msg: PublicChatMessage, idx: number): ThreadMessageLike => ({
+		(msg: PublicChatMessage, idx: number) => convertToThreadMessage(toMessageRecord(msg, idx)),
-			id: `public-msg-${idx}`,
-			role: msg.role as "user" | "assistant",
-			content: msg.content as ThreadMessageLike["content"],
-			createdAt: new Date(msg.created_at),
-			metadata: msg.author
-				? {
-						custom: {
-							author: {
-								displayName: msg.author.display_name,
-								avatarUrl: msg.author.avatar_url,
-							},
-						},
-					}
-				: undefined,
-		}),
 		[]
 	);
 

surfsense_web/lib/chat/message-utils.ts

@@ -0,0 +1,109 @@
+import type { ThreadMessageLike } from "@assistant-ui/react";
+import { z } from "zod";
+import type { MessageRecord } from "./thread-persistence";
+
+/**
+ * Zod schema for persisted attachment info
+ */
+const PersistedAttachmentSchema = z.object({
+	id: z.string(),
+	name: z.string(),
+	type: z.string(),
+	contentType: z.string().optional(),
+	imageDataUrl: z.string().optional(),
+	extractedContent: z.string().optional(),
+});
+
+const AttachmentsPartSchema = z.object({
+	type: z.literal("attachments"),
+	items: z.array(PersistedAttachmentSchema),
+});
+
+type PersistedAttachment = z.infer<typeof PersistedAttachmentSchema>;
+
+/**
+ * Extract persisted attachments from message content (type-safe with Zod)
+ */
+function extractPersistedAttachments(content: unknown): PersistedAttachment[] {
+	if (!Array.isArray(content)) return [];
+
+	for (const part of content) {
+		const result = AttachmentsPartSchema.safeParse(part);
+		if (result.success) {
+			return result.data.items;
+		}
+	}
+
+	return [];
+}
+
+/**
+ * Convert backend message to assistant-ui ThreadMessageLike format
+ * Filters out 'thinking-steps' part as it's handled separately via messageThinkingSteps
+ * Restores attachments for user messages from persisted data
+ */
+export function convertToThreadMessage(msg: MessageRecord): ThreadMessageLike {
+	let content: ThreadMessageLike["content"];
+
+	if (typeof msg.content === "string") {
+		content = [{ type: "text", text: msg.content }];
+	} else if (Array.isArray(msg.content)) {
+		// Filter out custom metadata parts - they're handled separately
+		const filteredContent = msg.content.filter((part: unknown) => {
+			if (typeof part !== "object" || part === null || !("type" in part)) return true;
+			const partType = (part as { type: string }).type;
+			// Filter out thinking-steps, mentioned-documents, and attachments
+			return (
+				partType !== "thinking-steps" &&
+				partType !== "mentioned-documents" &&
+				partType !== "attachments"
+			);
+		});
+		content =
+			filteredContent.length > 0
+				? (filteredContent as ThreadMessageLike["content"])
+				: [{ type: "text", text: "" }];
+	} else {
+		content = [{ type: "text", text: String(msg.content) }];
+	}
+
+	// Restore attachments for user messages
+	let attachments: ThreadMessageLike["attachments"];
+	if (msg.role === "user") {
+		const persistedAttachments = extractPersistedAttachments(msg.content);
+		if (persistedAttachments.length > 0) {
+			attachments = persistedAttachments.map((att) => ({
+				id: att.id,
+				name: att.name,
+				type: att.type as "document" | "image" | "file",
+				contentType: att.contentType || "application/octet-stream",
+				status: { type: "complete" as const },
+				content: [],
+				// Custom fields for our ChatAttachment interface
+				imageDataUrl: att.imageDataUrl,
+				extractedContent: att.extractedContent,
+			}));
+		}
+	}
+
+	// Build metadata.custom for author display in shared chats
+	const metadata = msg.author_id
+		? {
+				custom: {
+					author: {
+						displayName: msg.author_display_name ?? null,
+						avatarUrl: msg.author_avatar_url ?? null,
+					},
+				},
+			}
+		: undefined;
+
+	return {
+		id: `msg-${msg.id}`,
+		role: msg.role,
+		content,
+		createdAt: new Date(msg.created_at),
+		attachments,
+		metadata,
+	};
+}

surfsense_web/lib/chat/thread-persistence.ts

@@ -24,6 +24,7 @@ export interface ThreadRecord {
 	created_at: string;
 	updated_at: string;
 	has_comments?: boolean;
+	public_share_enabled?: boolean;
 }
 
 export interface MessageRecord {