apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-03 12:52:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(web): integrate comment gutter with thread layout

Browse source
This commit is contained in:
CREDO23 2026-01-19 14:37:06 +02:00
parent f86beaece1
commit d99722cfdc
3 changed files with 109 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,10 +5,14 @@ import {
MessagePrimitive,
useAssistantState,
} from "@assistant-ui/react";
import { useAtomValue } from "jotai";
import { useAtom, useAtomValue } from "jotai";
import { CheckIcon, CopyIcon, DownloadIcon, RefreshCwIcon } from "lucide-react";
import type { FC } from "react";
import { useContext, useState } from "react";
import { useContext, useEffect, useRef, useState } from "react";
import {
addingCommentToMessageIdAtom,
commentsEnabledAtom,
} from "@/atoms/chat/current-thread.atom";
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { BranchPicker } from "@/components/assistant-ui/branch-picker";
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
@ -88,44 +92,80 @@ function parseMessageId(assistantUiMessageId: string | undefined): number | null
}
export const AssistantMessage: FC = () => {
const [isCommentPanelOpen, setIsCommentPanelOpen] = useState(false);
const [messageHeight, setMessageHeight] = useState<number | undefined>(undefined);
const messageRef = useRef<HTMLDivElement>(null);
const messageId = useAssistantState(({ message }) => message?.id);
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
const dbMessageId = parseMessageId(messageId);
const commentsEnabled = useAtomValue(commentsEnabledAtom);
const [addingCommentToMessageId, setAddingCommentToMessageId] = useAtom(
addingCommentToMessageIdAtom
);
const isThreadRunning = useAssistantState(({ thread }) => thread.isRunning);
const isLastMessage = useAssistantState(({ message }) => message?.isLast ?? false);
const isMessageStreaming = isThreadRunning && isLastMessage;
const { data: commentsData } = useComments({
messageId: dbMessageId ?? 0,
enabled: !!dbMessageId,
});
const commentCount = commentsData?.total_count ?? 0;
const hasComments = (commentsData?.total_count ?? 0) > 0;
const isAddingComment = dbMessageId !== null && addingCommentToMessageId === dbMessageId;
const showCommentPanel = hasComments || isAddingComment;
const handleToggleAddComment = () => {
if (!dbMessageId) return;
setAddingCommentToMessageId(isAddingComment ? null : dbMessageId);
};
useEffect(() => {
if (!messageRef.current) return;
const el = messageRef.current;
const update = () => setMessageHeight(el.offsetHeight);
update();
const observer = new ResizeObserver(update);
observer.observe(el);
return () => observer.disconnect();
}, []);
return (
<MessagePrimitive.Root
ref={messageRef}
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"
>
<AssistantMessageInner />
{/* Comment trigger and floating panel */}
{dbMessageId && searchSpaceId && (
<div className="absolute -right-10 top-3">
<CommentTrigger
commentCount={commentCount}
isOpen={isCommentPanelOpen}
onClick={() => setIsCommentPanelOpen(!isCommentPanelOpen)}
/>
{isCommentPanelOpen && (
<div className="absolute top-full left-0 z-50 mt-2 animate-in fade-in slide-in-from-top-2 duration-200">
<CommentPanelContainer
messageId={dbMessageId}
searchSpaceId={Number(searchSpaceId)}
isOpen={true}
onClose={() => setIsCommentPanelOpen(false)}
maxHeight={400}
{searchSpaceId && commentsEnabled && !isMessageStreaming && (
<div className="absolute left-full top-0 ml-4 hidden lg:block w-72">
<div
className={`sticky top-3 ${showCommentPanel ? "opacity-100" : "opacity-0 group-hover:opacity-100"} transition-opacity`}
>
{!hasComments && (
<CommentTrigger
commentCount={0}
isOpen={isAddingComment}
onClick={handleToggleAddComment}
disabled={!dbMessageId}
/>
</div>
)}
)}
{showCommentPanel && dbMessageId && (
<div
className={
hasComments ? "" : "mt-2 animate-in fade-in slide-in-from-top-2 duration-200"
}
>
<CommentPanelContainer
messageId={dbMessageId}
isOpen={true}
maxHeight={messageHeight}
/>
</div>
)}
</div>
</div>
)}
</MessagePrimitive.Root>