refactor: replace MessageSquare with MessageCircleReply across various components

- Updated icon imports and usages in AssistantMessage, CommentItem, CommentSheet, CommentThread, and InboxSidebar components.
- Enhanced visual consistency by standardizing the reply icon throughout the chat-related UI elements.

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

@@ -15,7 +15,7 @@ import {
 	DownloadIcon,
 	ExternalLink,
 	Globe,
-	MessageSquare,
+	MessageCircleReply,
 	MoreHorizontalIcon,
 	RefreshCwIcon,
 } from "lucide-react";
@@ -657,7 +657,7 @@ export const AssistantMessage: FC = () => {
 									: "text-muted-foreground hover:text-foreground hover:bg-muted"
 						)}
 					>
-						<MessageSquare className={cn("size-3.5", hasComments && "fill-current")} />
+						<MessageCircleReply className={cn("size-3.5", hasComments && "fill-current")} />
 						{hasComments ? (
 							<span>
 								{commentCount} {commentCount === 1 ? "comment" : "comments"}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue, useSetAtom } from "jotai";
-import { MessageSquare } from "lucide-react";
+import { MessageCircleReply } 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";
@@ -216,7 +216,7 @@ export function CommentItem({
 						className="mt-1 h-7 w-fit px-2 text-xs text-muted-foreground hover:text-foreground"
 						onClick={() => onReply(comment.id)}
 					>
-						<MessageSquare className="mr-1 size-3" />
+						<MessageCircleReply className="mr-1 size-3" />
 						Reply
 					</Button>
 				)}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { MessageSquare } from "lucide-react";
+import { MessageCircleReply } from "lucide-react";
 import {
 	Drawer,
 	DrawerContent,
@@ -30,7 +30,7 @@ export function CommentSheet({
 					<DrawerHandle />
 					<DrawerHeader className="px-4 pb-3 pt-2">
 						<DrawerTitle className="flex items-center gap-2 text-base font-semibold">
-							<MessageSquare className="size-5" />
+							<MessageCircleReply className="size-5" />
 							Comments
 							{commentCount > 0 && (
 								<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
@@ -56,7 +56,7 @@ export function CommentSheet({
 			>
 				<SheetHeader className="flex-shrink-0 px-4 py-4">
 					<SheetTitle className="flex items-center gap-2 text-base font-semibold">
-						<MessageSquare className="size-5" />
+						<MessageCircleReply className="size-5" />
 						Comments
 						{commentCount > 0 && (
 							<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDown, ChevronRight, MessageSquare } from "lucide-react";
+import { ChevronDown, ChevronRight, MessageCircleReply } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { CommentComposer } from "../comment-composer/comment-composer";
@@ -143,7 +143,7 @@ export function CommentThread({
 							</div>
 						) : (
 							<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleReply}>
-								<MessageSquare className="mr-1 size-3" />
+								<MessageCircleReply className="mr-1 size-3" />
 								Reply
 							</Button>
 						)}
@@ -155,7 +155,7 @@ export function CommentThread({
 			{!hasReplies && !isReplyComposerOpen && (
 				<div className="ml-7 mt-1">
 					<Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={handleReply}>
-						<MessageSquare className="mr-1 size-3" />
+						<MessageCircleReply className="mr-1 size-3" />
 						Reply
 					</Button>
 				</div>

surfsense_web/components/editor-panel/editor-panel.tsx

@@ -321,7 +321,7 @@ export function EditorPanelContent({
 						</div>
 					</div>
 					<div className="flex h-10 items-center justify-between gap-2 border-t px-4">
-						<div className="min-w-0 flex-1">
+						<div className="min-w-0 flex flex-1 items-center gap-2">
 							<p className="truncate text-sm text-muted-foreground">{displayTitle}</p>
 						</div>
 						<div className="flex items-center gap-1 shrink-0">
@@ -352,6 +352,12 @@ export function EditorPanelContent({
 								</>
 							) : (
 								<>
+									{!isLocalFileMode && editorDoc?.document_type && documentId && (
+										<VersionHistoryButton
+											documentId={documentId}
+											documentType={editorDoc.document_type}
+										/>
+									)}
 									<Button
 										variant="ghost"
 										size="icon"
@@ -383,15 +389,12 @@ export function EditorPanelContent({
 									)}
 								</>
 							)}
-							{!showEditingActions && !isLocalFileMode && editorDoc?.document_type && documentId && (
-								<VersionHistoryButton documentId={documentId} documentType={editorDoc.document_type} />
-							)}
 						</div>
 					</div>
 				</div>
 			) : (
 				<div className="flex h-14 items-center justify-between border-b px-4 shrink-0">
-					<div className="flex-1 min-w-0">
+					<div className="flex flex-1 min-w-0 items-center gap-2">
 						<h2 className="text-sm font-semibold truncate">{displayTitle}</h2>
 					</div>
 					<div className="flex items-center gap-1 shrink-0">
@@ -422,6 +425,12 @@ export function EditorPanelContent({
 							</>
 						) : (
 							<>
+								{!isLocalFileMode && editorDoc?.document_type && documentId && (
+									<VersionHistoryButton
+										documentId={documentId}
+										documentType={editorDoc.document_type}
+									/>
+								)}
 								<Button
 									variant="ghost"
 									size="icon"
@@ -451,12 +460,6 @@ export function EditorPanelContent({
 										<span className="sr-only">Edit document</span>
 									</Button>
 								)}
-								{!isLocalFileMode && editorDoc?.document_type && documentId && (
-									<VersionHistoryButton
-										documentId={documentId}
-										documentType={editorDoc.document_type}
-									/>
-								)}
 							</>
 						)}
 					</div>

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

@@ -14,7 +14,7 @@ import {
 	Inbox,
 	LayoutGrid,
 	ListFilter,
-	MessageSquare,
+	MessageCircleReply,
 	Search,
 	X,
 } from "lucide-react";
@@ -847,7 +847,7 @@ export function InboxSidebarContent({
 				<TabsList stretch showBottomBorder size="sm">
 					<TabsTrigger value="comments">
 						<span className="inline-flex items-center gap-1.5">
-							<MessageSquare className="h-4 w-4" />
+							<MessageCircleReply className="h-4 w-4" />
 							<span>{t("comments") || "Comments"}</span>
 							<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
 								{formatInboxCount(comments.unreadCount)}
@@ -1032,7 +1032,7 @@ export function InboxSidebarContent({
 				) : (
 					<div className="text-center py-8">
 						{activeTab === "comments" ? (
-							<MessageSquare className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
+							<MessageCircleReply className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
 						) : (
 							<History className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
 						)}

surfsense_web/components/new-chat/model-selector.tsx

@@ -8,7 +8,7 @@ import {
 	ChevronLeft,
 	ChevronRight,
 	ChevronUp,
-	Edit3,
+	Pencil,
 	ImageIcon,
 	Layers,
 	Plus,
@@ -923,7 +923,7 @@ export function ModelSelector({
 							className="size-7 rounded-md hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
 							onClick={(e) => handleEditItem(e, item)}
 						>
-							<Edit3 className="size-3.5 text-muted-foreground" />
+							<Pencil className="size-3.5 text-muted-foreground" />
 						</Button>
 					)}
 					{isSelected && <Check className="size-4 text-primary shrink-0" />}

surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx

@@ -79,8 +79,11 @@ export function PublicChatSnapshotRow({
 								variant="ghost"
 								size="icon"
 								className={cn(
-									"absolute right-0 h-6 w-6 shrink-0 hover:bg-transparent",
-									dropdownOpen ? "opacity-100" : "sm:opacity-0 sm:group-hover:opacity-100"
+									"absolute right-0 h-6 w-6 shrink-0",
+									"hover:bg-accent",
+									dropdownOpen
+										? "opacity-100 bg-accent hover:bg-accent"
+										: "sm:opacity-0 sm:group-hover:opacity-100"
 								)}
 							>
 								<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />

surfsense_web/components/settings/agent-model-manager.tsx

@@ -4,10 +4,9 @@ import { useAtomValue } from "jotai";
 import {
 	AlertCircle,
 	Dot,
-	Edit3,
 	FileText,
 	Info,
-	MessageSquareQuote,
+	Pencil,
 	RefreshCw,
 	Trash2,
 } from "lucide-react";
@@ -288,7 +287,7 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 																				onClick={() => openEditDialog(config)}
 																				className="h-7 w-7 rounded-lg text-muted-foreground hover:text-foreground"
 																			>
-																				<Edit3 className="h-3 w-3" />
+																				<Pencil className="h-3 w-3" />
 																			</Button>
 																		</TooltipTrigger>
 																		<TooltipContent>Edit</TooltipContent>
@@ -323,7 +322,6 @@ export function AgentModelManager({ searchSpaceId }: AgentModelManagerProps) {
 															variant="secondary"
 															className="text-[10px] px-1.5 py-0.5 border-0 text-muted-foreground bg-muted"
 														>
-															<MessageSquareQuote className="h-2.5 w-2.5 mr-1" />
 															Citations
 														</Badge>
 													)}

surfsense_web/components/settings/image-model-manager.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2 } from "lucide-react";
+import { AlertCircle, Dot, Info, Pencil, RefreshCw, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { deleteImageGenConfigMutationAtom } from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
 import {
@@ -116,8 +116,8 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 
 	return (
 		<div className="space-y-4 md:space-y-6">
-			{/* Header */}
-			<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+			{/* Header actions */}
+			<div className="flex items-center justify-between">
 				<Button
 					variant="secondary"
 					size="sm"
@@ -284,7 +284,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 																				onClick={() => openEditDialog(config)}
 																				className="h-7 w-7 rounded-lg text-muted-foreground hover:text-foreground"
 																			>
-																				<Edit3 className="h-3 w-3" />
+																				<Pencil className="h-3 w-3" />
 																			</Button>
 																		</TooltipTrigger>
 																		<TooltipContent>Edit</TooltipContent>

surfsense_web/components/settings/roles-manager.tsx

@@ -4,21 +4,25 @@ import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import {
 	Bot,
-	ChevronDown,
-	Edit2,
+	ChevronRight,
+	ScanEye,
+	Pencil,
 	FileText,
-	Globe,
+	Earth,
+	Image,
 	Logs,
 	type LucideIcon,
-	MessageCircle,
+	MessageCircleReply,
 	MessageSquare,
 	Mic,
 	MoreHorizontal,
-	Plug,
+	Unplug,
 	Settings,
 	Shield,
+	SlidersHorizontal,
 	Trash2,
 	Users,
+	Video,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -88,7 +92,7 @@ const CATEGORY_CONFIG: Record<
 	},
 	comments: {
 		label: "Comments",
-		icon: MessageCircle,
+		icon: MessageCircleReply,
 		description: "Add annotations to documents",
 		order: 3,
 	},
@@ -98,6 +102,24 @@ const CATEGORY_CONFIG: Record<
 		description: "Configure AI model settings",
 		order: 4,
 	},
+	image_generations: {
+		label: "Image Models",
+		icon: Image,
+		description: "Configure image generation model settings",
+		order: 4.1,
+	},
+	vision_configs: {
+		label: "Vision Models",
+		icon: ScanEye,
+		description: "Configure vision model settings",
+		order: 4.2,
+	},
+	video_presentations: {
+		label: "Video Presentations",
+		icon: Video,
+		description: "Generate and manage video presentations",
+		order: 4.3,
+	},
 	podcasts: {
 		label: "Podcasts",
 		icon: Mic,
@@ -105,8 +127,8 @@ const CATEGORY_CONFIG: Record<
 		order: 5,
 	},
 	connectors: {
-		label: "Integrations",
-		icon: Plug,
+		label: "Connectors",
+		icon: Unplug,
 		description: "Connect external data sources",
 		order: 6,
 	},
@@ -136,10 +158,16 @@ const CATEGORY_CONFIG: Record<
 	},
 	public_sharing: {
 		label: "Public Chat Sharing",
-		icon: Globe,
+		icon: Earth,
 		description: "Share chats publicly via links",
 		order: 11,
 	},
+	general: {
+		label: "General",
+		icon: SlidersHorizontal,
+		description: "General search space permissions",
+		order: 12,
+	},
 };
 
 const ACTION_LABELS: Record<string, string> = {
@@ -434,12 +462,11 @@ function RolesContent({
 
 					return (
 						<div key={role.id} className="rounded-lg border border-border/60 overflow-hidden">
-							<div className="flex items-center gap-4 p-4 transition-colors hover:bg-muted/30">
-								<button
-									type="button"
-									className="flex-1 min-w-0 text-left cursor-pointer"
-									onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
-								>
+							<div
+								className="flex items-center gap-4 p-4 transition-colors hover:bg-muted/30 cursor-pointer"
+								onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
+							>
+								<div className="flex-1 min-w-0 text-left">
 									<div className="flex items-center gap-2">
 										<span className="font-medium text-sm">{role.name}</span>
 										{role.is_system_role && (
@@ -458,14 +485,14 @@ function RolesContent({
 											{role.description}
 										</p>
 									)}
-								</button>
+								</div>
 
 								<div className="shrink-0">
 									<PermissionsBadge permissions={role.permissions} />
 								</div>
 
 								{!role.is_system_role && (
-									<div className="shrink-0" role="none">
+									<div className="shrink-0" role="none" onClick={(e) => e.stopPropagation()}>
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
 												<Button variant="ghost" size="icon" className="h-8 w-8">
@@ -475,7 +502,7 @@ function RolesContent({
 											<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
 												{canUpdate && (
 													<DropdownMenuItem onClick={() => setEditingRoleId(role.id)}>
-														<Edit2 className="h-4 w-4 mr-2" />
+														<Pencil className="h-4 w-4 mr-2" />
 														Edit Role
 													</DropdownMenuItem>
 												)}
@@ -515,18 +542,14 @@ function RolesContent({
 									</div>
 								)}
 
-								<button
-									type="button"
-									className="shrink-0 p-1 cursor-pointer"
-									onClick={() => setExpandedRoleId(isExpanded ? null : role.id)}
-								>
-									<ChevronDown
+								<div className="shrink-0 p-1">
+									<ChevronRight
 										className={cn(
 											"h-4 w-4 text-muted-foreground transition-transform duration-200",
-											isExpanded && "rotate-180"
+											isExpanded && "rotate-90"
 										)}
 									/>
-								</button>
+								</div>
 							</div>
 
 							{isExpanded && (
@@ -659,52 +682,30 @@ function PermissionsEditor({
 
 					return (
 						<div key={category} className="rounded-lg border border-border/60 overflow-hidden">
-							<div className="flex items-center justify-between px-3 py-2.5 hover:bg-muted/40 transition-colors">
-								<button
-									type="button"
-									className="flex-1 flex items-center gap-2.5 cursor-pointer"
-									onClick={() => toggleCategoryExpanded(category)}
-								>
+							<div
+								className="flex items-center justify-between px-3 py-2.5 hover:bg-muted/40 transition-colors cursor-pointer"
+								onClick={() => toggleCategoryExpanded(category)}
+							>
+								<div className="flex-1 flex items-center gap-2.5">
 									<IconComponent className="h-4 w-4 text-muted-foreground shrink-0" />
 									<span className="font-medium text-sm">{config.label}</span>
 									<span className="text-[11px] text-muted-foreground tabular-nums">
 										{stats.selected}/{stats.total}
 									</span>
-								</button>
+								</div>
 								<div className="flex items-center gap-2">
 									<Checkbox
 										checked={stats.allSelected}
+										onClick={(e) => e.stopPropagation()}
 										onCheckedChange={() => onToggleCategory(category)}
 										aria-label={`Select all ${config.label} permissions`}
 									/>
-									<button
-										type="button"
-										className="cursor-pointer"
-										onClick={() => toggleCategoryExpanded(category)}
-									>
-										<div
-											className={cn(
-												"transition-transform duration-200",
-												isExpanded && "rotate-180"
-											)}
-										>
-											<svg
-												className="h-4 w-4 text-muted-foreground"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke="currentColor"
-												aria-hidden="true"
-											>
-												<title>Toggle</title>
-												<path
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													strokeWidth={2}
-													d="M19 9l-7 7-7-7"
-												/>
-											</svg>
-										</div>
-									</button>
+									<ChevronRight
+										className={cn(
+											"h-4 w-4 text-muted-foreground transition-transform duration-200",
+											isExpanded && "rotate-90"
+										)}
+									/>
 								</div>
 							</div>
 
@@ -726,7 +727,7 @@ function PermissionsEditor({
 												>
 													<button
 														type="button"
-														className="flex-1 min-w-0 text-left cursor-pointer"
+														className="flex-1 min-w-0 text-left cursor-pointer focus:outline-none focus-visible:outline-none"
 														onClick={() => onTogglePermission(perm.value)}
 													>
 														<span className="text-sm font-medium">{actionLabel}</span>
@@ -855,7 +856,8 @@ function CreateRoleDialog({
 										type="button"
 										onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)}
 										className={cn(
-											"p-3 rounded-lg border text-left transition-colors hover:bg-muted/40",
+											"p-3 rounded-lg border transition-colors hover:bg-muted/40",
+											"flex items-center justify-center text-center sm:block sm:text-left",
 											selectedPermissions.length > 0 &&
 												preset.permissions.every((p) => selectedPermissions.includes(p))
 												? "border-foreground/30 bg-muted/40"
@@ -863,7 +865,7 @@ function CreateRoleDialog({
 										)}
 									>
 										<span className="font-medium text-sm">{preset.name}</span>
-										<p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+										<p className="hidden sm:block text-xs text-muted-foreground mt-0.5 line-clamp-2">
 											{preset.description}
 										</p>
 									</button>

surfsense_web/components/settings/vision-model-manager.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2 } from "lucide-react";
+import { AlertCircle, Dot, Info, Pencil, RefreshCw, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
 import { deleteVisionLLMConfigMutationAtom } from "@/atoms/vision-llm-config/vision-llm-config-mutation.atoms";
@@ -121,7 +121,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 
 	return (
 		<div className="space-y-4 md:space-y-6">
-			<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+			<div className="flex items-center justify-between">
 				<Button
 					variant="secondary"
 					size="sm"
@@ -282,7 +282,7 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 																				onClick={() => openEditDialog(config)}
 																				className="h-6 w-6 text-muted-foreground hover:text-foreground"
 																			>
-																				<Edit3 className="h-3 w-3" />
+																				<Pencil className="h-3 w-3" />
 																			</Button>
 																		</TooltipTrigger>
 																		<TooltipContent>Edit</TooltipContent>