feat: add public chat frontend

surfsense_web/app/public/[token]/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { PublicChatView } from "@/components/public-chat/public-chat-view";
+
+export default function PublicChatPage() {
+	const params = useParams();
+	const token = params.token as string;
+
+	return <PublicChatView shareToken={token} />;
+}

surfsense_web/components/homepage/navbar.tsx

@@ -1,5 +1,11 @@
 "use client";
-import { IconBrandDiscord, IconBrandGithub, IconBrandReddit, IconMenu2, IconX } from "@tabler/icons-react";
+import {
+	IconBrandDiscord,
+	IconBrandGithub,
+	IconBrandReddit,
+	IconMenu2,
+	IconX,
+} from "@tabler/icons-react";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { Copy, Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { publicChatApiService } from "@/lib/apis/public-chat-api.service";
+import { getBearerToken } from "@/lib/auth-utils";
+
+interface PublicChatFooterProps {
+	shareToken: string;
+}
+
+export function PublicChatFooter({ shareToken }: PublicChatFooterProps) {
+	const router = useRouter();
+	const [isCloning, setIsCloning] = useState(false);
+
+	const handleCopyAndContinue = async () => {
+		const token = getBearerToken();
+
+		if (!token) {
+			const returnUrl = encodeURIComponent(`/public/${shareToken}`);
+			router.push(`/login?returnUrl=${returnUrl}&action=clone`);
+			return;
+		}
+
+		setIsCloning(true);
+
+		try {
+			await publicChatApiService.clonePublicChat({
+				share_token: shareToken,
+			});
+
+			toast.success("Copying chat to your account...", {
+				description: "You'll be notified when it's ready.",
+			});
+
+			router.push("/dashboard");
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Failed to copy chat";
+			toast.error(message);
+		} finally {
+			setIsCloning(false);
+		}
+	};
+
+	return (
+		<div className="mx-auto flex max-w-(--thread-max-width) items-center justify-center px-4 py-4">
+			<Button size="lg" onClick={handleCopyAndContinue} disabled={isCloning} className="gap-2">
+				{isCloning ? <Loader2 className="size-4 animate-spin" /> : <Copy className="size-4" />}
+				Copy and continue this chat
+			</Button>
+		</div>
+	);
+}

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,58 @@
+"use client";
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { Loader2 } from "lucide-react";
+import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
+import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
+import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
+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 {
+	shareToken: string;
+}
+
+export function PublicChatView({ shareToken }: PublicChatViewProps) {
+	const { data, isLoading, error } = usePublicChat(shareToken);
+	const runtime = usePublicChatRuntime({ data });
+
+	if (isLoading) {
+		return (
+			<div className="flex h-screen items-center justify-center">
+				<Loader2 className="size-8 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (error || !data) {
+		return (
+			<div className="flex h-screen flex-col items-center justify-center gap-4 px-4 text-center">
+				<h1 className="text-2xl font-semibold">Chat not found</h1>
+				<p className="text-muted-foreground">
+					This chat may have been removed or is no longer public.
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<AssistantRuntimeProvider runtime={runtime}>
+			{/* Tool UIs for rendering tool results */}
+			<GeneratePodcastToolUI />
+			<LinkPreviewToolUI />
+			<DisplayImageToolUI />
+			<ScrapeWebpageToolUI />
+
+			<div className="flex h-screen flex-col bg-background">
+				<PublicThread
+					header={<PublicChatHeader title={data.thread.title} createdAt={data.thread.created_at} />}
+					footer={<PublicChatFooter shareToken={shareToken} />}
+				/>
+			</div>
+		</AssistantRuntimeProvider>
+	);
+}

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

@@ -0,0 +1,179 @@
+"use client";
+
+import {
+	ActionBarPrimitive,
+	AssistantIf,
+	MessagePrimitive,
+	ThreadPrimitive,
+	useAssistantState,
+} from "@assistant-ui/react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+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;
+}
+
+/**
+ * Read-only thread component for public chat viewing.
+ * No composer, no edit capabilities - just message display.
+ */
+export const PublicThread: FC<PublicThreadProps> = ({ header, footer }) => {
+	return (
+		<ThreadPrimitive.Root
+			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
+			style={{
+				["--thread-max-width" as string]: "44rem",
+			}}
+		>
+			<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,
+						AssistantMessage: PublicAssistantMessage,
+					}}
+				/>
+
+				{/* Spacer to ensure footer doesn't overlap last message */}
+				<div className="h-24" />
+			</ThreadPrimitive.Viewport>
+
+			{footer && (
+				<div className="sticky bottom-0 z-20 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+					{footer}
+				</div>
+			)}
+		</ThreadPrimitive.Root>
+	);
+};
+
+/**
+ * User avatar component with fallback to initials
+ */
+interface AuthorMetadata {
+	displayName: string | null;
+	avatarUrl: string | null;
+}
+
+const UserAvatar: FC<AuthorMetadata & { hasError: boolean; onError: () => void }> = ({
+	displayName,
+	avatarUrl,
+	hasError,
+	onError,
+}) => {
+	const initials = displayName
+		? displayName
+				.split(" ")
+				.map((n) => n[0])
+				.join("")
+				.toUpperCase()
+				.slice(0, 2)
+		: "U";
+
+	if (avatarUrl && !hasError) {
+		return (
+			<img
+				src={avatarUrl}
+				alt={displayName || "User"}
+				className="size-8 rounded-full object-cover"
+				referrerPolicy="no-referrer"
+				onError={onError}
+			/>
+		);
+	}
+
+	return (
+		<div className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+			{initials}
+		</div>
+	);
+};
+
+const PublicUserMessage: FC = () => {
+	const metadata = useAssistantState(({ message }) => message?.metadata);
+	const author = metadata?.custom?.author as AuthorMetadata | undefined;
+
+	return (
+		<MessagePrimitive.Root
+			className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
+			data-role="user"
+		>
+			<div className="aui-user-message-content-wrapper col-start-2 min-w-0 flex items-end gap-2">
+				<div className="flex-1 min-w-0">
+					<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+						<MessagePrimitive.Parts />
+					</div>
+				</div>
+				{author && (
+					<div className="shrink-0 mb-1.5">
+						<UserAvatarWithState displayName={author.displayName} avatarUrl={author.avatarUrl} />
+					</div>
+				)}
+			</div>
+		</MessagePrimitive.Root>
+	);
+};
+
+const UserAvatarWithState: FC<AuthorMetadata> = ({ displayName, avatarUrl }) => {
+	const [hasError, setHasError] = useState(false);
+	return (
+		<UserAvatar
+			displayName={displayName}
+			avatarUrl={avatarUrl}
+			hasError={hasError}
+			onError={() => setHasError(true)}
+		/>
+	);
+};
+
+const PublicAssistantMessage: FC = () => {
+	return (
+		<MessagePrimitive.Root
+			className="aui-assistant-message-root group fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
+			data-role="assistant"
+		>
+			<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+				<MessagePrimitive.Parts
+					components={{
+						Text: MarkdownText,
+						tools: { Fallback: ToolFallback },
+					}}
+				/>
+			</div>
+
+			<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
+				<PublicAssistantActionBar />
+			</div>
+		</MessagePrimitive.Root>
+	);
+};
+
+const PublicAssistantActionBar: FC = () => {
+	return (
+		<ActionBarPrimitive.Root
+			autohide="not-last"
+			className={cn(
+				"aui-assistant-action-bar-root -ml-1 flex gap-1 text-muted-foreground",
+				"opacity-0 group-hover:opacity-100 transition-opacity"
+			)}
+		>
+			<ActionBarPrimitive.Copy asChild>
+				<TooltipIconButton tooltip="Copy">
+					<AssistantIf condition={({ message }) => message.isCopied}>
+						<CheckIcon />
+					</AssistantIf>
+					<AssistantIf condition={({ message }) => !message.isCopied}>
+						<CopyIcon />
+					</AssistantIf>
+				</TooltipIconButton>
+			</ActionBarPrimitive.Copy>
+		</ActionBarPrimitive.Root>
+	);
+};

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

@@ -0,0 +1,53 @@
+"use client";
+
+import {
+	type AppendMessage,
+	type ThreadMessageLike,
+	useExternalStoreRuntime,
+} from "@assistant-ui/react";
+import { useCallback, useMemo } from "react";
+import type { GetPublicChatResponse, PublicChatMessage } from "@/contracts/types/public-chat.types";
+
+interface UsePublicChatRuntimeOptions {
+	data: GetPublicChatResponse | undefined;
+}
+
+/**
+ * Creates a read-only runtime for public chat viewing.
+ */
+export function usePublicChatRuntime({ data }: UsePublicChatRuntimeOptions) {
+	const messages = useMemo(() => data?.messages ?? [], [data?.messages]);
+
+	// 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 => ({
+			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,
+		}),
+		[]
+	);
+
+	const runtime = useExternalStoreRuntime({
+		isRunning: false,
+		messages,
+		onNew,
+		convertMessage,
+	});
+
+	return runtime;
+}

surfsense_web/hooks/use-public-chat.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import type { GetPublicChatResponse } from "@/contracts/types/public-chat.types";
+import { publicChatApiService } from "@/lib/apis/public-chat-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+
+export function usePublicChat(shareToken: string) {
+	return useQuery<GetPublicChatResponse, Error>({
+		queryKey: cacheKeys.publicChat.byToken(shareToken),
+		queryFn: () => publicChatApiService.getPublicChat({ share_token: shareToken }),
+		enabled: !!shareToken,
+		staleTime: 30_000,
+		retry: false,
+	});
+}

surfsense_web/lib/query-client/cache-keys.ts

@@ -75,4 +75,7 @@ export const cacheKeys = {
 	comments: {
 		byMessage: (messageId: number) => ["comments", "message", messageId] as const,
 	},
+	publicChat: {
+		byToken: (shareToken: string) => ["public-chat", shareToken] as const,
+	},
 };