From 9cd3de9ec1ba1e2fc1331feefc163ac4be5aeb49 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 26 May 2026 16:50:40 +0530
Subject: [PATCH] feat(web): update mention components to use Button component
 and enhance styling

---
 .../components/assistant-ui/inline-mention-editor.tsx | 11 +++++++----
 .../components/assistant-ui/mention-chip.tsx          |  9 ++++++---
 surfsense_web/components/assistant-ui/thread.tsx      |  6 +++---
 .../components/new-chat/composer-suggestion-popup.tsx |  3 +++
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
index f67fb36dc..67466532e 100644
--- a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
+++ b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
@@ -21,6 +21,7 @@ import {
 	useRef,
 } from "react";
 import { FOLDER_MENTION_DOCUMENT_TYPE } from "@/atoms/chat/mentioned-documents.atom";
+import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { Document } from "@/contracts/types/document.types";
 import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
@@ -160,8 +161,10 @@ const MentionElement: FC<PlateElementProps<MentionElementNode>> = ({
 							)}
 						</span>
 						{ctx ? (
-							<button
+							<Button
 								type="button"
+								variant="ghost"
+								size="icon"
 								aria-label={`Remove mention ${element.title}`}
 								title={`Remove ${element.title}`}
 								onMouseDown={(e) => e.preventDefault()}
@@ -169,10 +172,10 @@ const MentionElement: FC<PlateElementProps<MentionElementNode>> = ({
 									e.stopPropagation();
 									ctx.removeChip(element.id, element.document_type);
 								}}
-								className="absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity hover:text-primary focus-visible:opacity-100 focus-visible:outline-none group-hover:opacity-100"
+								className="absolute inset-0 size-3 rounded-sm p-0 opacity-0 transition-opacity hover:bg-transparent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-0 group-hover:opacity-100 [&_svg]:size-3"
 							>
-								<XIcon className="h-3 w-3" />
-							</button>
+								<XIcon />
+							</Button>
 						) : null}
 					</span>
 				</span>
diff --git a/surfsense_web/components/assistant-ui/mention-chip.tsx b/surfsense_web/components/assistant-ui/mention-chip.tsx
index 7197fccdc..526d4b8b4 100644
--- a/surfsense_web/components/assistant-ui/mention-chip.tsx
+++ b/surfsense_web/components/assistant-ui/mention-chip.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { MouseEventHandler, ReactNode } from "react";
+import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
@@ -60,13 +61,15 @@ export function MentionChip({
 	const isInteractive = Boolean(onClick) && !disabled;
 
 	const chip = (
-		<button
+		<Button
 			type="button"
+			variant="ghost"
+			size="sm"
 			onClick={onClick}
 			disabled={disabled}
 			aria-label={ariaLabel ?? label}
 			className={cn(
-				"inline-flex h-5 items-center gap-1 rounded bg-primary/10 px-1 align-middle text-xs font-bold text-primary/60 leading-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+				"h-5 gap-1 rounded bg-primary/10 px-1 align-middle text-xs font-bold text-primary/60 leading-none hover:bg-primary/10 hover:text-primary/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 				isInteractive ? "cursor-pointer" : "cursor-default",
 				disabled && "opacity-60",
 				className
@@ -74,7 +77,7 @@ export function MentionChip({
 		>
 			<span className="inline-flex shrink-0 text-muted-foreground">{icon}</span>
 			<span className="max-w-[120px] truncate leading-none">{label}</span>
-		</button>
+		</Button>
 	);
 
 	if (!tooltip) return chip;
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 39e1b4360..72fb2690b 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -564,7 +564,7 @@ const Composer: FC = () => {
 			setSuggestionAnchorPoint(null);
 			return;
 		}
-		setSuggestionAnchorPoint(anchorPoint);
+		setSuggestionAnchorPoint((current) => current ?? anchorPoint);
 		setShowDocumentPopover(true);
 		setMentionQuery(trigger.query);
 	}, []);
@@ -596,7 +596,7 @@ const Composer: FC = () => {
 			setSuggestionAnchorPoint(null);
 			return;
 		}
-		setSuggestionAnchorPoint(anchorPoint);
+		setSuggestionAnchorPoint((current) => current ?? anchorPoint);
 		setShowPromptPicker(true);
 		setActionQuery(trigger.query);
 	}, [clipboardInitialText]);
@@ -866,7 +866,7 @@ const Composer: FC = () => {
 							onDocumentRemove={handleDocumentRemove}
 							onSubmit={handleSubmit}
 							onKeyDown={handleKeyDown}
-							className="min-h-[24px]"
+							className="min-h-[24px] **:data-slate-placeholder:font-semibold"
 						/>
 					</div>
 					<ComposerAction isBlockedByOtherUser={isBlockedByOtherUser} />
diff --git a/surfsense_web/components/new-chat/composer-suggestion-popup.tsx b/surfsense_web/components/new-chat/composer-suggestion-popup.tsx
index d3e7b75bb..fd46d8ee7 100644
--- a/surfsense_web/components/new-chat/composer-suggestion-popup.tsx
+++ b/surfsense_web/components/new-chat/composer-suggestion-popup.tsx
@@ -14,6 +14,7 @@ function ComposerSuggestionPopoverContent({
 	collisionPadding = 12,
 	onOpenAutoFocus,
 	onCloseAutoFocus,
+	style,
 	...props
 }: React.ComponentProps<typeof PopoverContent>) {
 	return (
@@ -31,8 +32,10 @@ function ComposerSuggestionPopoverContent({
 			}}
 			className={cn(
 				"w-[280px] overflow-hidden rounded-md border border-popover-border bg-popover p-0 text-popover-foreground shadow-md sm:w-[320px]",
+				"data-[state=open]:!animate-none data-[state=closed]:!animate-none data-[state=open]:!duration-0 data-[state=closed]:!duration-0",
 				className
 			)}
+			style={{ ...style, animation: "none" }}
 			{...props}
 		/>
 	);