feat(chat): implement target comment navigation and highlight functionality in chat components

surfsense_web/components/assistant-ui/assistant-message.tsx

@@ -5,14 +5,16 @@ import {
 	MessagePrimitive,
 	useAssistantState,
 } from "@assistant-ui/react";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { CheckIcon, CopyIcon, DownloadIcon, MessageSquare, RefreshCwIcon } from "lucide-react";
 import type { FC } from "react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import {
 	addingCommentToMessageIdAtom,
+	clearTargetCommentIdAtom,
 	commentsCollapsedAtom,
 	commentsEnabledAtom,
+	targetCommentIdAtom,
 } from "@/atoms/chat/current-thread.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { BranchPicker } from "@/components/assistant-ui/branch-picker";
@@ -117,11 +119,23 @@ export const AssistantMessage: FC = () => {
 	const isLastMessage = useAssistantState(({ message }) => message?.isLast ?? false);
 	const isMessageStreaming = isThreadRunning && isLastMessage;
 
-	const { data: commentsData } = useComments({
+	const { data: commentsData, isSuccess: commentsLoaded } = useComments({
 		messageId: dbMessageId ?? 0,
 		enabled: !!dbMessageId,
 	});
 
+	// Target comment navigation - read target from global atom
+	const targetCommentId = useAtomValue(targetCommentIdAtom);
+	const clearTargetCommentId = useSetAtom(clearTargetCommentIdAtom);
+
+	// Check if target comment belongs to this message (including replies)
+	const hasTargetComment = useMemo(() => {
+		if (!targetCommentId || !commentsData?.comments) return false;
+		return commentsData.comments.some(
+			(c) => c.id === targetCommentId || c.replies?.some((r) => r.id === targetCommentId)
+		);
+	}, [targetCommentId, commentsData]);
+
 	const commentCount = commentsData?.total_count ?? 0;
 	const hasComments = commentCount > 0;
 	const isAddingComment = dbMessageId !== null && addingCommentToMessageId === dbMessageId;
@@ -146,6 +160,24 @@ export const AssistantMessage: FC = () => {
 		return () => observer.disconnect();
 	}, []);
 
+	// Auto-open sheet on mobile/tablet when this message has the target comment
+	useEffect(() => {
+		if (hasTargetComment && !isDesktop && commentsLoaded) {
+			setIsSheetOpen(true);
+		}
+	}, [hasTargetComment, isDesktop, commentsLoaded]);
+
+	// Scroll message into view when it contains target comment (desktop)
+	useEffect(() => {
+		if (hasTargetComment && isDesktop && commentsLoaded && messageRef.current) {
+			// Small delay to ensure DOM is ready after comments render
+			const timeoutId = setTimeout(() => {
+				messageRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+			}, 100);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [hasTargetComment, isDesktop, commentsLoaded]);
+
 	const showCommentTrigger = searchSpaceId && commentsEnabled && !isMessageStreaming && dbMessageId;
 
 	// Determine sheet side based on screen size

surfsense_web/components/chat-comments/comment-item/comment-item.tsx

@@ -1,6 +1,12 @@
 "use client";
 
+import { useAtomValue, useSetAtom } from "jotai";
 import { MessageSquare } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+	clearTargetCommentIdAtom,
+	targetCommentIdAtom,
+} from "@/atoms/chat/current-thread.atom";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -113,6 +119,37 @@ export function CommentItem({
 	members = [],
 	membersLoading = false,
 }: CommentItemProps) {
+	const commentRef = useRef<HTMLDivElement>(null);
+	const [isHighlighted, setIsHighlighted] = useState(false);
+
+	// Target comment navigation
+	const targetCommentId = useAtomValue(targetCommentIdAtom);
+	const clearTargetCommentId = useSetAtom(clearTargetCommentIdAtom);
+
+	const isTarget = targetCommentId === comment.id;
+
+	// Scroll into view and highlight when this is the target comment
+	useEffect(() => {
+		if (isTarget && commentRef.current) {
+			// Small delay to ensure DOM is ready
+			const scrollTimeoutId = setTimeout(() => {
+				commentRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+				setIsHighlighted(true);
+			}, 150);
+
+			// Remove highlight and clear target after delay
+			const clearTimeoutId = setTimeout(() => {
+				setIsHighlighted(false);
+				clearTargetCommentId();
+			}, 3000);
+
+			return () => {
+				clearTimeout(scrollTimeoutId);
+				clearTimeout(clearTimeoutId);
+			};
+		}
+	}, [isTarget, clearTargetCommentId]);
+
 	const displayName =
 		comment.author?.displayName || comment.author?.email.split("@")[0] || "Unknown";
 	const email = comment.author?.email || "";
@@ -122,7 +159,14 @@ export function CommentItem({
 	};
 
 	return (
-		<div className={cn("group flex gap-3")} data-comment-id={comment.id}>
+		<div
+			ref={commentRef}
+			className={cn(
+				"group flex gap-3 rounded-lg p-1 -m-1 transition-all duration-300",
+				isHighlighted && "ring-2 ring-primary ring-offset-2 ring-offset-background"
+			)}
+			data-comment-id={comment.id}
+		>
 			<Avatar className="size-8 shrink-0">
 				{comment.author?.avatarUrl && (
 					<AvatarImage src={comment.author.avatarUrl} alt={displayName} />

surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx

@@ -21,7 +21,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { setCommentsCollapsedAtom } from "@/atoms/chat/current-thread.atom";
+import { setCommentsCollapsedAtom, setTargetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
 import { convertRenderedToDisplay } from "@/components/chat-comments/comment-item/comment-item";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
@@ -175,6 +175,8 @@ export function InboxSidebar({
 
 	// Comments collapsed state (desktop only, when docked)
 	const [, setCommentsCollapsed] = useAtom(setCommentsCollapsedAtom);
+	// Target comment for navigation - also ensures comments panel is visible
+	const [, setTargetCommentId] = useAtom(setTargetCommentIdAtom);
 
 	const [searchQuery, setSearchQuery] = useState("");
 	const [activeTab, setActiveTab] = useState<InboxTab>("mentions");
@@ -346,6 +348,12 @@ export function InboxSidebar({
 					const commentId = item.metadata.comment_id;
 
 					if (searchSpaceId && threadId) {
+						// Pre-set target comment ID before navigation
+						// This also ensures comments panel is not collapsed
+						if (commentId) {
+							setTargetCommentId(commentId);
+						}
+
 						const url = commentId
 							? `/dashboard/${searchSpaceId}/new-chat/${threadId}?commentId=${commentId}`
 							: `/dashboard/${searchSpaceId}/new-chat/${threadId}`;
@@ -356,7 +364,7 @@ export function InboxSidebar({
 				}
 			}
 		},
-		[markAsRead, router, onOpenChange, onCloseMobileSidebar]
+		[markAsRead, router, onOpenChange, onCloseMobileSidebar, setTargetCommentId]
 	);
 
 	const handleMarkAllAsRead = useCallback(async () => {