71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import { useCallback, useRef } from "react";
|
|
|
|
import ReportEditor from "~/components/editor";
|
|
import { useMessage, useStore } from "~/core/store";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
import { LoadingAnimation } from "./loading-animation";
|
|
import { Markdown } from "./markdown";
|
|
|
|
export function ResearchReportBlock({
|
|
className,
|
|
messageId,
|
|
}: {
|
|
className?: string;
|
|
researchId: string;
|
|
messageId: string;
|
|
}) {
|
|
const message = useMessage(messageId);
|
|
const handleMarkdownChange = useCallback(
|
|
(markdown: string) => {
|
|
if (message) {
|
|
message.content = markdown;
|
|
useStore.setState({
|
|
messages: new Map(useStore.getState().messages).set(
|
|
message.id,
|
|
message,
|
|
),
|
|
});
|
|
}
|
|
},
|
|
[message],
|
|
);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const isCompleted = message?.isStreaming === false && message?.content !== "";
|
|
// TODO: scroll to top when completed, but it's not working
|
|
// useEffect(() => {
|
|
// if (isCompleted && contentRef.current) {
|
|
// setTimeout(() => {
|
|
// contentRef
|
|
// .current!.closest("[data-radix-scroll-area-viewport]")
|
|
// ?.scrollTo({
|
|
// top: 0,
|
|
// behavior: "smooth",
|
|
// });
|
|
// }, 500);
|
|
// }
|
|
// }, [isCompleted]);
|
|
|
|
return (
|
|
<div
|
|
ref={contentRef}
|
|
className={cn("relative flex flex-col pt-4 pb-8", className)}
|
|
>
|
|
{isCompleted ? (
|
|
<ReportEditor
|
|
content={message?.content}
|
|
onMarkdownChange={handleMarkdownChange}
|
|
/>
|
|
) : (
|
|
<>
|
|
<Markdown animate>{message?.content}</Markdown>
|
|
{message?.isStreaming && <LoadingAnimation className="my-12" />}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|