From f35131da1964a4b52474fc1a1caf572c5ce8c23d Mon Sep 17 00:00:00 2001
From: Jiang Feng <jiangfeng.11@bytedance.com>
Date: Sun, 27 Apr 2025 14:51:00 +0800
Subject: [PATCH] feat: enhance ResearchBlock tab functionality

---
 web/src/app/_components/research-block.tsx    |   9 +-
 .../app/_components/research-report-block.tsx |   3 +-
 web/src/app/editor/page.tsx                   |   3 +
 web/src/components/editor/content.ts          | 356 ------------------
 web/src/components/editor/extensions.tsx      |   3 +
 .../generative/ai-completion-command.tsx      |   3 +
 .../generative/ai-selector-commands.tsx       |   4 +
 .../editor/generative/ai-selector.tsx         |   3 +
 .../generative/generative-menu-switch.tsx     |   3 +
 web/src/components/editor/image-upload.ts     |   7 +-
 web/src/components/editor/index.tsx           |   3 +
 .../editor/selectors/color-selector.tsx       |   3 +
 .../editor/selectors/link-selector.tsx        |   3 +
 .../editor/selectors/math-selector.tsx        |   3 +
 .../editor/selectors/node-selector.tsx        |   3 +
 .../editor/selectors/text-buttons.tsx         |   3 +
 web/src/components/editor/slash-command.tsx   |   3 +
 web/src/styles/globals.css                    |  57 ++-
 18 files changed, 77 insertions(+), 395 deletions(-)
 delete mode 100644 web/src/components/editor/content.ts

diff --git a/web/src/app/_components/research-block.tsx b/web/src/app/_components/research-block.tsx
index fe842e6..2671195 100644
--- a/web/src/app/_components/research-block.tsx
+++ b/web/src/app/_components/research-block.tsx
@@ -124,7 +124,12 @@ export function ResearchBlock({
               </TabsTrigger>
             </TabsList>
           </div>
-          <TabsContent className="h-full min-h-0 flex-grow px-8" value="report">
+          <TabsContent
+            className="h-full min-h-0 flex-grow px-8"
+            value="report"
+            forceMount
+            hidden={activeTab !== "report"}
+          >
             <ScrollContainer
               className="px-5pb-20 h-full"
               scrollShadowColor="var(--card)"
@@ -141,6 +146,8 @@ export function ResearchBlock({
           <TabsContent
             className="h-full min-h-0 flex-grow px-8"
             value="activities"
+            forceMount
+            hidden={activeTab !== "activities"}
           >
             <ScrollContainer className="h-full" scrollShadowColor="var(--card)">
               {researchId && (
diff --git a/web/src/app/_components/research-report-block.tsx b/web/src/app/_components/research-report-block.tsx
index ac8f121..444a09f 100644
--- a/web/src/app/_components/research-report-block.tsx
+++ b/web/src/app/_components/research-report-block.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 
 import ReportEditor from "~/components/editor";
 import { useMessage, useStore } from "~/core/store";
@@ -48,6 +48,7 @@ export function ResearchReportBlock({
   //     }, 500);
   //   }
   // }, [isCompleted]);
+
   return (
     <div
       ref={contentRef}
diff --git a/web/src/app/editor/page.tsx b/web/src/app/editor/page.tsx
index 8f51c50..1f57a62 100644
--- a/web/src/app/editor/page.tsx
+++ b/web/src/app/editor/page.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import ReportEditor from "~/components/editor";
 
 const content = `
diff --git a/web/src/components/editor/content.ts b/web/src/components/editor/content.ts
deleted file mode 100644
index 3ed5da6..0000000
--- a/web/src/components/editor/content.ts
+++ /dev/null
@@ -1,356 +0,0 @@
-export const defaultEditorContent = {
-  type: "doc",
-  content: [
-    {
-      type: "heading",
-      attrs: { level: 2 },
-      content: [{ type: "text", text: "Introducing Novel" }],
-    },
-    {
-      type: "paragraph",
-      content: [
-        {
-          type: "text",
-          marks: [
-            {
-              type: "link",
-              attrs: {
-                href: "https://github.com/steven-tey/novel",
-                target: "_blank",
-              },
-            },
-          ],
-          text: "Novel",
-        },
-        {
-          type: "text",
-          text: " is a Notion-style WYSIWYG editor with AI-powered autocompletion. Built with ",
-        },
-        {
-          type: "text",
-          marks: [
-            {
-              type: "link",
-              attrs: {
-                href: "https://tiptap.dev/",
-                target: "_blank",
-              },
-            },
-          ],
-          text: "Tiptap",
-        },
-        { type: "text", text: " + " },
-        {
-          type: "text",
-          marks: [
-            {
-              type: "link",
-              attrs: {
-                href: "https://sdk.vercel.ai/docs",
-                target: "_blank",
-              },
-            },
-          ],
-          text: "Vercel AI SDK",
-        },
-        { type: "text", text: "." },
-      ],
-    },
-    {
-      type: "heading",
-      attrs: { level: 3 },
-      content: [{ type: "text", text: "Installation" }],
-    },
-    {
-      type: "codeBlock",
-      attrs: { language: null },
-      content: [{ type: "text", text: "npm i novel" }],
-    },
-    {
-      type: "heading",
-      attrs: { level: 3 },
-      content: [{ type: "text", text: "Usage" }],
-    },
-    {
-      type: "codeBlock",
-      attrs: { language: null },
-      content: [
-        {
-          type: "text",
-          text: 'import { Editor } from "novel";\n\nexport default function App() {\n  return (\n     <Editor />\n  )\n}',
-        },
-      ],
-    },
-    {
-      type: "heading",
-      attrs: { level: 3 },
-      content: [{ type: "text", text: "Features" }],
-    },
-    {
-      type: "orderedList",
-      attrs: { tight: true, start: 1 },
-      content: [
-        {
-          type: "listItem",
-          content: [
-            {
-              type: "paragraph",
-              content: [{ type: "text", text: "Slash menu & bubble menu" }],
-            },
-          ],
-        },
-        {
-          type: "listItem",
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                { type: "text", text: "AI autocomplete (type " },
-                { type: "text", marks: [{ type: "code" }], text: "++" },
-                {
-                  type: "text",
-                  text: " to activate, or select from slash menu)",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: "listItem",
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                {
-                  type: "text",
-                  text: "Image uploads (drag & drop / copy & paste, or select from slash menu) ",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: "listItem",
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                {
-                  type: "text",
-                  text: "Add tweets from the command slash menu:",
-                },
-              ],
-            },
-            {
-              type: "twitter",
-              attrs: {
-                src: "https://x.com/elonmusk/status/1800759252224729577",
-              },
-            },
-          ],
-        },
-        {
-          type: "listItem",
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                {
-                  type: "text",
-                  text: "Mathematical symbols with LaTeX expression:",
-                },
-              ],
-            },
-            {
-              type: "orderedList",
-              attrs: {
-                tight: true,
-                start: 1,
-              },
-              content: [
-                {
-                  type: "listItem",
-                  content: [
-                    {
-                      type: "paragraph",
-                      content: [
-                        {
-                          type: "math",
-                          attrs: {
-                            latex: "E = mc^2",
-                          },
-                        },
-                      ],
-                    },
-                  ],
-                },
-                {
-                  type: "listItem",
-                  content: [
-                    {
-                      type: "paragraph",
-                      content: [
-                        {
-                          type: "math",
-                          attrs: {
-                            latex: "a^2 = \\sqrt{b^2 + c^2}",
-                          },
-                        },
-                      ],
-                    },
-                  ],
-                },
-                {
-                  type: "listItem",
-                  content: [
-                    {
-                      type: "paragraph",
-                      content: [
-                        {
-                          type: "math",
-                          attrs: {
-                            latex:
-                              "\\hat{f} (\\xi)=\\int_{-\\infty}^{\\infty}f(x)e^{-2\\pi ix\\xi}dx",
-                          },
-                        },
-                      ],
-                    },
-                  ],
-                },
-                {
-                  type: "listItem",
-                  content: [
-                    {
-                      type: "paragraph",
-                      content: [
-                        {
-                          type: "math",
-                          attrs: {
-                            latex:
-                              "A=\\begin{bmatrix}a&b\\\\c&d \\end{bmatrix}",
-                          },
-                        },
-                      ],
-                    },
-                  ],
-                },
-                {
-                  type: "listItem",
-                  content: [
-                    {
-                      type: "paragraph",
-                      content: [
-                        {
-                          type: "math",
-                          attrs: {
-                            latex: "\\sum_{i=0}^n x_i",
-                          },
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      type: "image",
-      attrs: {
-        src: "https://public.blob.vercel-storage.com/pJrjXbdONOnAeZAZ/banner-2wQk82qTwyVgvlhTW21GIkWgqPGD2C.png",
-        alt: "banner.png",
-        title: "banner.png",
-        width: null,
-        height: null,
-      },
-    },
-    { type: "horizontalRule" },
-    {
-      type: "heading",
-      attrs: { level: 3 },
-      content: [{ type: "text", text: "Learn more" }],
-    },
-    {
-      type: "taskList",
-      content: [
-        {
-          type: "taskItem",
-          attrs: { checked: false },
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                { type: "text", text: "Star us on " },
-                {
-                  type: "text",
-                  marks: [
-                    {
-                      type: "link",
-                      attrs: {
-                        href: "https://github.com/steven-tey/novel",
-                        target: "_blank",
-                      },
-                    },
-                  ],
-                  text: "GitHub",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: "taskItem",
-          attrs: { checked: false },
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                { type: "text", text: "Install the " },
-                {
-                  type: "text",
-                  marks: [
-                    {
-                      type: "link",
-                      attrs: {
-                        href: "https://www.npmjs.com/package/novel",
-                        target: "_blank",
-                      },
-                    },
-                  ],
-                  text: "NPM package",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: "taskItem",
-          attrs: { checked: false },
-          content: [
-            {
-              type: "paragraph",
-              content: [
-                {
-                  type: "text",
-                  marks: [
-                    {
-                      type: "link",
-                      attrs: {
-                        href: "https://vercel.com/templates/next.js/novel",
-                        target: "_blank",
-                      },
-                    },
-                  ],
-                  text: "Deploy your own",
-                },
-                { type: "text", text: " to Vercel" },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
diff --git a/web/src/components/editor/extensions.tsx b/web/src/components/editor/extensions.tsx
index 23790a7..da060d7 100644
--- a/web/src/components/editor/extensions.tsx
+++ b/web/src/components/editor/extensions.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import {
   AIHighlight,
   CharacterCount,
diff --git a/web/src/components/editor/generative/ai-completion-command.tsx b/web/src/components/editor/generative/ai-completion-command.tsx
index eec566c..50eaada 100644
--- a/web/src/components/editor/generative/ai-completion-command.tsx
+++ b/web/src/components/editor/generative/ai-completion-command.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { CommandGroup, CommandItem, CommandSeparator } from "../../ui/command";
 import { useEditor } from "novel";
 import { Check, TextQuote, TrashIcon } from "lucide-react";
diff --git a/web/src/components/editor/generative/ai-selector-commands.tsx b/web/src/components/editor/generative/ai-selector-commands.tsx
index 455712e..1e0ceb8 100644
--- a/web/src/components/editor/generative/ai-selector-commands.tsx
+++ b/web/src/components/editor/generative/ai-selector-commands.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import {
   ArrowDownWideNarrow,
   CheckCheck,
@@ -14,6 +17,7 @@ const options = [
     label: "Improve writing",
     icon: RefreshCcwDot,
   },
+  // TODO: add this back in
   // {
   //   value: "fix",
   //   label: "Fix grammar",
diff --git a/web/src/components/editor/generative/ai-selector.tsx b/web/src/components/editor/generative/ai-selector.tsx
index 2eeac89..3f5774b 100644
--- a/web/src/components/editor/generative/ai-selector.tsx
+++ b/web/src/components/editor/generative/ai-selector.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 "use client";
 
 import { Command, CommandInput } from "../../ui/command";
diff --git a/web/src/components/editor/generative/generative-menu-switch.tsx b/web/src/components/editor/generative/generative-menu-switch.tsx
index a9b0fac..7110f11 100644
--- a/web/src/components/editor/generative/generative-menu-switch.tsx
+++ b/web/src/components/editor/generative/generative-menu-switch.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { EditorBubble, removeAIHighlight, useEditor } from "novel";
 import { Fragment, type ReactNode, useEffect } from "react";
 import { Button } from "../../ui/button";
diff --git a/web/src/components/editor/image-upload.ts b/web/src/components/editor/image-upload.ts
index fb5dbd9..6d07742 100644
--- a/web/src/components/editor/image-upload.ts
+++ b/web/src/components/editor/image-upload.ts
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { createImageUpload } from "novel";
 import { toast } from "sonner";
 
@@ -26,7 +29,9 @@ const onUpload = (file: File) => {
           // No blob store configured
         } else if (res.status === 401) {
           resolve(file);
-          throw new Error("`BLOB_READ_WRITE_TOKEN` environment variable not found, reading image locally instead.");
+          throw new Error(
+            "`BLOB_READ_WRITE_TOKEN` environment variable not found, reading image locally instead.",
+          );
           // Unknown error
         } else {
           throw new Error("Error uploading image. Please try again.");
diff --git a/web/src/components/editor/index.tsx b/web/src/components/editor/index.tsx
index 1896dab..7e95ff5 100644
--- a/web/src/components/editor/index.tsx
+++ b/web/src/components/editor/index.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 "use client";
 
 import {
diff --git a/web/src/components/editor/selectors/color-selector.tsx b/web/src/components/editor/selectors/color-selector.tsx
index b41aa42..1d220fd 100644
--- a/web/src/components/editor/selectors/color-selector.tsx
+++ b/web/src/components/editor/selectors/color-selector.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { Check, ChevronDown } from "lucide-react";
 import { EditorBubbleItem, useEditor } from "novel";
 
diff --git a/web/src/components/editor/selectors/link-selector.tsx b/web/src/components/editor/selectors/link-selector.tsx
index 0be053a..9a3f59e 100644
--- a/web/src/components/editor/selectors/link-selector.tsx
+++ b/web/src/components/editor/selectors/link-selector.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { Button } from "../../ui/button";
 import { PopoverContent } from "../../ui/popover";
 import { cn } from "../../../lib/utils";
diff --git a/web/src/components/editor/selectors/math-selector.tsx b/web/src/components/editor/selectors/math-selector.tsx
index 06b83b5..d029bbe 100644
--- a/web/src/components/editor/selectors/math-selector.tsx
+++ b/web/src/components/editor/selectors/math-selector.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { Button } from "../../ui/button";
 import { cn } from "../../../lib/utils";
 import { SigmaIcon } from "lucide-react";
diff --git a/web/src/components/editor/selectors/node-selector.tsx b/web/src/components/editor/selectors/node-selector.tsx
index 6785801..c61d85d 100644
--- a/web/src/components/editor/selectors/node-selector.tsx
+++ b/web/src/components/editor/selectors/node-selector.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import {
   Check,
   CheckSquare,
diff --git a/web/src/components/editor/selectors/text-buttons.tsx b/web/src/components/editor/selectors/text-buttons.tsx
index 34dc54a..9aee990 100644
--- a/web/src/components/editor/selectors/text-buttons.tsx
+++ b/web/src/components/editor/selectors/text-buttons.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { Button } from "../../ui/button";
 import { cn } from "../../../lib/utils";
 import {
diff --git a/web/src/components/editor/slash-command.tsx b/web/src/components/editor/slash-command.tsx
index f24c5ff..435a976 100644
--- a/web/src/components/editor/slash-command.tsx
+++ b/web/src/components/editor/slash-command.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import {
   CheckSquare,
   Code,
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 8390da8..527758c 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -58,38 +58,27 @@
   --color-sidebar-ring: var(--sidebar-ring);
   --color-app: var(--app-background);
   --color-brand: var(--brand);
-  --animate-aurora:
-    aurora 8s ease-in-out infinite alternate;
+  --animate-aurora: aurora 8s ease-in-out infinite alternate;
   @keyframes aurora {
-  0% {
-    background-position:
-    0% 50%;
-    transform:
-    rotate(-5deg) scale(0.9);
+    0% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
     }
-  25% {
-    background-position:
-    50% 100%;
-    transform:
-    rotate(5deg) scale(1.1);
+    25% {
+      background-position: 50% 100%;
+      transform: rotate(5deg) scale(1.1);
     }
-  50% {
-    background-position:
-    100% 50%;
-    transform:
-    rotate(-3deg) scale(0.95);
+    50% {
+      background-position: 100% 50%;
+      transform: rotate(-3deg) scale(0.95);
     }
-  75% {
-    background-position:
-    50% 0%;
-    transform:
-    rotate(3deg) scale(1.05);
+    75% {
+      background-position: 50% 0%;
+      transform: rotate(3deg) scale(1.05);
     }
-  100% {
-    background-position:
-    0% 50%;
-    transform:
-    rotate(-5deg) scale(0.9);
+    100% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
     }
   }
 }
@@ -192,7 +181,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply text-foreground;
+    @apply bg-background text-foreground;
   }
 }
 
@@ -201,11 +190,7 @@ textarea {
   outline: none;
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+[role="button"],
+button {
+  cursor: pointer;
+}