From 81b1dbfefb7ac3026c1993c1466bcc07a0224632 Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Sun, 20 Apr 2025 21:07:46 +0800
Subject: [PATCH] feat: replace with simplified `Tooltip`

---
 web/src/app/_components/image.tsx             | 39 ++++++-------
 web/src/app/_components/input-box.tsx         | 42 ++++++--------
 web/src/app/_components/markdown.tsx          | 57 ++++++++-----------
 web/src/app/_components/message-list-view.tsx | 27 ++++-----
 web/src/app/_components/research-block.tsx    | 31 ++++------
 .../app/_components/research-report-block.tsx | 39 ++++++-------
 web/src/app/_components/theme-toggle.tsx      |  3 +
 web/src/app/_components/tooltip.tsx           | 25 ++++++++
 8 files changed, 124 insertions(+), 139 deletions(-)
 create mode 100644 web/src/app/_components/tooltip.tsx

diff --git a/web/src/app/_components/image.tsx b/web/src/app/_components/image.tsx
index 8f227d1..0a583ef 100644
--- a/web/src/app/_components/image.tsx
+++ b/web/src/app/_components/image.tsx
@@ -1,12 +1,12 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { memo, useCallback, useEffect, useState } from "react";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import { cn } from "~/lib/utils";
 
+import { Tooltip } from "./tooltip";
+
 function Image({
   className,
   imageClassName,
@@ -47,23 +47,18 @@ function Image({
       {isError ? (
         fallback
       ) : (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <img
-              className={cn(
-                "size-full object-cover",
-                imageTransition && "transition-all duration-200 ease-out",
-                imageClassName,
-              )}
-              src={src}
-              alt={alt}
-              onLoad={handleLoad}
-              onError={handleError}
-            />
-          </TooltipTrigger>
-          <TooltipContent>
-            <p className="max-w-64 text-sm">{alt ?? "No caption"}</p>
-          </TooltipContent>
+        <Tooltip title={alt ?? "No caption"}>
+          <img
+            className={cn(
+              "size-full object-cover",
+              imageTransition && "transition-all duration-200 ease-out",
+              imageClassName,
+            )}
+            src={src}
+            alt={alt}
+            onLoad={handleLoad}
+            onError={handleError}
+          />
         </Tooltip>
       )}
     </span>
diff --git a/web/src/app/_components/input-box.tsx b/web/src/app/_components/input-box.tsx
index c8384fa..fd3efa9 100644
--- a/web/src/app/_components/input-box.tsx
+++ b/web/src/app/_components/input-box.tsx
@@ -12,14 +12,11 @@ import {
 } from "react";
 
 import { Button } from "~/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import type { Option } from "~/core/messages";
 import { cn } from "~/lib/utils";
 
+import { Tooltip } from "./tooltip";
+
 export function InputBox({
   className,
   size,
@@ -139,26 +136,21 @@ export function InputBox({
       <div className="flex items-center px-4 py-2">
         <div className="flex grow"></div>
         <div className="flex shrink-0 items-center gap-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className={cn("h-10 w-10 rounded-full")}
-                onClick={handleSendMessage}
-              >
-                {responding ? (
-                  <div className="flex h-10 w-10 items-center justify-center">
-                    <div className="bg-foreground h-4 w-4 rounded-sm opacity-70" />
-                  </div>
-                ) : (
-                  <ArrowUpOutlined />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{responding ? "Stop" : "Send"}</p>
-            </TooltipContent>
+          <Tooltip title={responding ? "Stop" : "Send"}>
+            <Button
+              variant="outline"
+              size="icon"
+              className={cn("h-10 w-10 rounded-full")}
+              onClick={handleSendMessage}
+            >
+              {responding ? (
+                <div className="flex h-10 w-10 items-center justify-center">
+                  <div className="bg-foreground h-4 w-4 rounded-sm opacity-70" />
+                </div>
+              ) : (
+                <ArrowUpOutlined />
+              )}
+            </Button>
           </Tooltip>
         </div>
       </div>
diff --git a/web/src/app/_components/markdown.tsx b/web/src/app/_components/markdown.tsx
index 8446dfc..9cfe3c1 100644
--- a/web/src/app/_components/markdown.tsx
+++ b/web/src/app/_components/markdown.tsx
@@ -12,15 +12,11 @@ import remarkMath from "remark-math";
 import "katex/dist/katex.min.css";
 
 import { Button } from "~/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import { rehypeSplitWordsIntoSpans } from "~/core/rehype";
 import { cn } from "~/lib/utils";
 
 import Image from "./image";
+import { Tooltip } from "./tooltip";
 
 export function Markdown({
   className,
@@ -77,34 +73,29 @@ export function Markdown({
 function CopyButton({ content }: { content: string }) {
   const [copied, setCopied] = useState(false);
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="rounded-full"
-          onClick={async () => {
-            try {
-              await navigator.clipboard.writeText(content);
-              setCopied(true);
-              setTimeout(() => {
-                setCopied(false);
-              }, 1000);
-            } catch (error) {
-              console.error(error);
-            }
-          }}
-        >
-          {copied ? (
-            <CheckOutlined className="h-4 w-4" />
-          ) : (
-            <CopyOutlined className="h-4 w-4" />
-          )}{" "}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Copy</p>
-      </TooltipContent>
+    <Tooltip title="Copy">
+      <Button
+        variant="outline"
+        size="sm"
+        className="rounded-full"
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(content);
+            setCopied(true);
+            setTimeout(() => {
+              setCopied(false);
+            }, 1000);
+          } catch (error) {
+            console.error(error);
+          }
+        }}
+      >
+        {copied ? (
+          <CheckOutlined className="h-4 w-4" />
+        ) : (
+          <CopyOutlined className="h-4 w-4" />
+        )}{" "}
+      </Button>
     </Tooltip>
   );
 }
diff --git a/web/src/app/_components/message-list-view.tsx b/web/src/app/_components/message-list-view.tsx
index f19001b..ee8be71 100644
--- a/web/src/app/_components/message-list-view.tsx
+++ b/web/src/app/_components/message-list-view.tsx
@@ -18,11 +18,6 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import type { Message, Option } from "~/core/messages";
 import {
   openResearch,
@@ -38,6 +33,7 @@ import { Markdown } from "./markdown";
 import { RainbowText } from "./rainbow-text";
 import { RollingText } from "./rolling-text";
 import { ScrollContainer } from "./scroll-container";
+import { Tooltip } from "./tooltip";
 
 export function MessageListView({
   className,
@@ -398,18 +394,15 @@ function PodcastCard({
           </div>
           {!isGenerating && (
             <div className="flex">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" asChild>
-                    <a
-                      href={audioUrl}
-                      download={`${(title ?? "podcast").replaceAll(" ", "-")}.mp3`}
-                    >
-                      <DownloadOutlined />
-                    </a>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Download podcast</TooltipContent>
+              <Tooltip title="Download podcast">
+                <Button variant="ghost" size="icon" asChild>
+                  <a
+                    href={audioUrl}
+                    download={`${(title ?? "podcast").replaceAll(" ", "-")}.mp3`}
+                  >
+                    <DownloadOutlined />
+                  </a>
+                </Button>
               </Tooltip>
             </div>
           )}
diff --git a/web/src/app/_components/research-block.tsx b/web/src/app/_components/research-block.tsx
index c926b27..c58397a 100644
--- a/web/src/app/_components/research-block.tsx
+++ b/web/src/app/_components/research-block.tsx
@@ -7,17 +7,13 @@ import { useEffect, useState } from "react";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
 import { openResearch, useStore } from "~/core/store";
 import { cn } from "~/lib/utils";
 
 import { ResearchActivitiesBlock } from "./research-activities-block";
 import { ResearchReportBlock } from "./research-report-block";
 import { ScrollContainer } from "./scroll-container";
+import { Tooltip } from "./tooltip";
 
 export function ResearchBlock({
   className,
@@ -43,20 +39,17 @@ export function ResearchBlock({
     <div className={cn("h-full w-full", className)}>
       <Card className={cn("relative h-full w-full pt-4", className)}>
         <div className="absolute right-4 flex h-9 items-center">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                className="text-gray-400"
-                size="sm"
-                variant="ghost"
-                onClick={() => {
-                  openResearch(null);
-                }}
-              >
-                <CloseOutlined />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Close</TooltipContent>
+          <Tooltip title="Close">
+            <Button
+              className="text-gray-400"
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                openResearch(null);
+              }}
+            >
+              <CloseOutlined />
+            </Button>
           </Tooltip>
         </div>
         <Tabs
diff --git a/web/src/app/_components/research-report-block.tsx b/web/src/app/_components/research-report-block.tsx
index 19c7153..45aa167 100644
--- a/web/src/app/_components/research-report-block.tsx
+++ b/web/src/app/_components/research-report-block.tsx
@@ -5,16 +5,12 @@ import { SoundOutlined } from "@ant-design/icons";
 import { useCallback, useRef, useState } from "react";
 
 import { Button } from "~/components/ui/button";
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "~/components/ui/tooltip";
 import { listenToPodcast, useMessage } from "~/core/store";
 import { cn } from "~/lib/utils";
 
 import { LoadingAnimation } from "./loading-animation";
 import { Markdown } from "./markdown";
+import { Tooltip } from "./tooltip";
 
 export function ResearchReportBlock({
   className,
@@ -42,24 +38,21 @@ export function ResearchReportBlock({
     >
       <div className="absolute top-2 right-6">
         {message?.content && !message.isStreaming && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                disabled={isGenerated}
-                onClick={() => {
-                  void handleListenToReport();
-                }}
-              >
-                <SoundOutlined />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                {isGenerated ? "The podcast is generated" : "Generate podcast"}
-              </p>
-            </TooltipContent>
+          <Tooltip
+            title={
+              isGenerated ? "The podcast is generated" : "Generate podcast"
+            }
+          >
+            <Button
+              variant="outline"
+              size="icon"
+              disabled={isGenerated}
+              onClick={() => {
+                void handleListenToReport();
+              }}
+            >
+              <SoundOutlined />
+            </Button>
           </Tooltip>
         )}
       </div>
diff --git a/web/src/app/_components/theme-toggle.tsx b/web/src/app/_components/theme-toggle.tsx
index 17fa748..957f8c5 100644
--- a/web/src/app/_components/theme-toggle.tsx
+++ b/web/src/app/_components/theme-toggle.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
diff --git a/web/src/app/_components/tooltip.tsx b/web/src/app/_components/tooltip.tsx
new file mode 100644
index 0000000..e07d6f3
--- /dev/null
+++ b/web/src/app/_components/tooltip.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function Tooltip({
+  className,
+  children,
+  title,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  title: React.ReactNode;
+}) {
+  return (
+    <ShadcnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent className={className}>{title}</TooltipContent>
+    </ShadcnTooltip>
+  );
+}