Add globe indicator for chats with public links

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

@@ -1,8 +1,9 @@
 "use client";
 
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Globe, User, Users } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { currentThreadAtom, setThreadVisibilityAtom } from "@/atoms/chat/current-thread.atom";
@@ -11,6 +12,7 @@ import { createPublicChatSnapshotMutationAtom } from "@/atoms/public-chat-snapsh
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { chatThreadsApiService } from "@/lib/apis/chat-threads-api.service";
 import {
 	type ChatVisibility,
 	type ThreadRecord,
@@ -46,6 +48,8 @@ const visibilityOptions: {
 
 export function ChatShareButton({ thread, onVisibilityChange, className }: ChatShareButtonProps) {
 	const queryClient = useQueryClient();
+	const router = useRouter();
+	const params = useParams();
 	const [open, setOpen] = useState(false);
 
 	// Use Jotai atom for visibility (single source of truth)
@@ -65,6 +69,16 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 		return access.permissions?.includes("public_sharing:create") ?? false;
 	}, [access]);
 
+	// Query to check if thread has public snapshots
+	const { data: snapshotsData } = useQuery({
+		queryKey: ["thread-snapshots", thread?.id],
+		queryFn: () => chatThreadsApiService.listPublicChatSnapshots({ thread_id: thread!.id }),
+		enabled: !!thread?.id,
+		staleTime: 30000, // Cache for 30 seconds
+	});
+	const hasPublicSnapshots = (snapshotsData?.snapshots?.length ?? 0) > 0;
+	const snapshotCount = snapshotsData?.snapshots?.length ?? 0;
+
 	// Use Jotai visibility if available (synced from chat page), otherwise fall back to thread prop
 	const currentVisibility = currentThreadState.visibility ?? thread?.visibility ?? "PRIVATE";
 
@@ -106,11 +120,13 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 
 		try {
 			await createSnapshot({ thread_id: thread.id });
+			// Refetch snapshots to show the globe indicator
+			await queryClient.invalidateQueries({ queryKey: ["thread-snapshots", thread.id] });
 			setOpen(false);
 		} catch (error) {
 			console.error("Failed to create public link:", error);
 		}
-	}, [thread, createSnapshot]);
+	}, [thread, createSnapshot, queryClient]);
 
 	// Don't show if no thread (new chat that hasn't been created yet)
 	if (!thread) {
@@ -121,6 +137,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 	const buttonLabel = currentVisibility === "PRIVATE" ? "Private" : "Shared";
 
 	return (
+		<div className={cn("flex items-center gap-1", className)}>
 			<Popover open={open} onOpenChange={setOpen}>
 				<Tooltip>
 					<TooltipTrigger asChild>
@@ -128,10 +145,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 							<Button
 								variant="outline"
 								size="icon"
-							className={cn(
+								className="h-8 w-8 md:w-auto md:px-3 md:gap-2 relative bg-muted hover:bg-muted/80 border-0"
-								"h-8 w-8 md:w-auto md:px-3 md:gap-2 relative bg-muted hover:bg-muted/80 border-0",
-								className
-							)}
 							>
 								<CurrentIcon className="h-4 w-4" />
 								<span className="hidden md:inline text-sm">{buttonLabel}</span>
@@ -228,5 +242,26 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 					</div>
 				</PopoverContent>
 			</Popover>
+
+				{/* Globe indicator when public snapshots exist - clicks to settings */}
+			{hasPublicSnapshots && (
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<button
+							type="button"
+							onClick={() => router.push(`/dashboard/${params.search_space_id}/settings`)}
+							className="flex items-center justify-center h-8 w-8 rounded-md bg-muted/50 hover:bg-muted transition-colors"
+						>
+							<Globe className="h-4 w-4 text-muted-foreground" />
+						</button>
+					</TooltipTrigger>
+					<TooltipContent>
+						{snapshotCount === 1
+							? "This chat has a public link - Click to manage"
+							: `This chat has ${snapshotCount} public links - Click to manage`}
+					</TooltipContent>
+				</Tooltip>
+			)}
+		</div>
 	);
 }