refactor: extract components folder

2026-05-23 16:35:59 +00:00 · 2025-05-02 10:43:14 +08:00
parent 18d896d15d
commit fdfc607747
44 changed files with 44 additions and 44 deletions
@@ -0,0 +1,71 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { useCallback, useRef } from "react";
+
+import { LoadingAnimation } from "~/components/deer-flow/loading-animation";
+import { Markdown } from "~/components/deer-flow/markdown";
+import ReportEditor from "~/components/editor";
+import { useReplay } from "~/core/replay";
+import { useMessage, useStore } from "~/core/store";
+import { cn } from "~/lib/utils";
+
+export function ResearchReportBlock({
+  className,
+  messageId,
+}: {
+  className?: string;
+  researchId: string;
+  messageId: string;
+}) {
+  const message = useMessage(messageId);
+  const { isReplay } = useReplay();
+  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)}
+    >
+      {!isReplay && isCompleted ? (
+        <ReportEditor
+          content={message?.content}
+          onMarkdownChange={handleMarkdownChange}
+        />
+      ) : (
+        <>
+          <Markdown animate>{message?.content}</Markdown>
+          {message?.isStreaming && <LoadingAnimation className="my-12" />}
+        </>
+      )}
+    </div>
+  );
+}