apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-11 00:32:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(chat): improve AssistantMessage component with fixed comment trigger slot and enhanced visibility handling

Browse source
This commit is contained in:
Anish Sarkar 2026-05-01 04:28:24 +05:30
parent 0883ac88fb
commit 04da62a554
1 changed files with 39 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

70
surfsense_web/components/assistant-ui/assistant-message.tsx
View file

@ -548,8 +548,10 @@ const AssistantMessageInner: FC = () => {
</div> </div>
)} )}
<div className="aui-assistant-message-footer mt-3 mb-5 ml-2 flex items-center gap-2"> <div className="aui-assistant-message-footer mt-3 mb-5 ml-2 h-6">
<AssistantActionBar /> <div className="h-full opacity-100 transition-opacity">
<AssistantActionBar />
</div>
</div> </div>
</CitationMetadataProvider> </CitationMetadataProvider>
); );
@ -642,35 +644,41 @@ export const AssistantMessage: FC = () => {
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" 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" data-role="assistant"
> >
{/* Comment trigger — right-aligned, just below user query on all screen sizes */} {/* Fixed trigger slot prevents any vertical reflow when visibility changes */}
{showCommentTrigger && ( <div className="mr-2 mb-1 flex h-7 justify-end">
<div className="mr-2 mb-1 flex justify-end"> <button
<button ref={isDesktop ? commentTriggerRef : undefined}
ref={isDesktop ? commentTriggerRef : undefined} type="button"
type="button" onClick={
onClick={ showCommentTrigger
isDesktop ? () => setIsInlineOpen((prev) => !prev) : () => setIsSheetOpen(true) ? isDesktop
} ? () => setIsInlineOpen((prev) => !prev)
className={cn( : () => setIsSheetOpen(true)
"flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors", : undefined
isDesktop && isInlineOpen }
? "bg-primary/10 text-primary" aria-hidden={!showCommentTrigger}
: hasComments tabIndex={showCommentTrigger ? 0 : -1}
? "text-primary hover:bg-primary/10" className={cn(
: "text-muted-foreground hover:text-foreground hover:bg-muted" "flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
)} "opacity-0 pointer-events-none",
> showCommentTrigger && "opacity-100 pointer-events-auto",
<MessageCircleReply className={cn("size-3.5", hasComments && "fill-current")} /> isDesktop && isInlineOpen
{hasComments ? ( ? "bg-primary/10 text-primary"
<span> : hasComments
{commentCount} {commentCount === 1 ? "comment" : "comments"} ? "text-primary hover:bg-primary/10"
</span> : "text-muted-foreground hover:text-foreground hover:bg-muted"
) : ( )}
<span>Add comment</span> >
)} <MessageCircleReply className={cn("size-3.5", hasComments && "fill-current")} />
</button> {hasComments ? (
</div> <span>
)} {commentCount} {commentCount === 1 ? "comment" : "comments"}
</span>
) : (
<span>Add comment</span>
)}
</button>
</div>
{/* Desktop floating comment panel — overlays on top of chat content */} {/* Desktop floating comment panel — overlays on top of chat content */}
{showCommentTrigger && isDesktop && isInlineOpen && dbMessageId && ( {showCommentTrigger && isDesktop && isInlineOpen && dbMessageId && (