From 34bb34f89021a1df459cdf9c3487dcf8b727f352 Mon Sep 17 00:00:00 2001
From: Eric-Guo <eric.guocz@gmail.com>
Date: Sat, 13 Sep 2025 17:12:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8[Error]=20Maximum=20update=20depth=20e?=
 =?UTF-8?q?xceeded.=20This=20can=20happen=20when=20a=20component=20calls?=
 =?UTF-8?q?=20setState=20inside=20useEffect,=20but=20useEffect=20either=20?=
 =?UTF-8?q?doesn't=20have=20a=20dependency=20array,=20or=20one=20of=20the?=
 =?UTF-8?q?=20dependencies=20changes=20on=20every=20render.=20=09error=20(?=
 =?UTF-8?q?intercept-console-error.js:57)=20=09getRootForUpdatedFiber=20(r?=
 =?UTF-8?q?eact-dom-client.development.js:3899)=20=09dispatchSetStateInter?=
 =?UTF-8?q?nal=20(react-dom-client.development.js:8249)=20=09dispatchSetSt?=
 =?UTF-8?q?ate=20(react-dom-client.development.js:8209)=20=09(anonymous=20?=
 =?UTF-8?q?function)=20(react-tooltip.min.mjs:18:14416)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/base/tooltip/index.tsx | 46 +++++++++++++++++----------
 app/components/welcome/index.tsx      |  1 -
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/app/components/base/tooltip/index.tsx b/app/components/base/tooltip/index.tsx
index 610f17b..e047a65 100644
--- a/app/components/base/tooltip/index.tsx
+++ b/app/components/base/tooltip/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 import classNames from 'classnames'
 import type { FC } from 'react'
-import React from 'react'
-import { Tooltip as ReactTooltip } from 'react-tooltip' // fixed version to 5.8.3 https://github.com/ReactTooltip/react-tooltip/issues/972
-import 'react-tooltip/dist/react-tooltip.css'
+import React, { useState } from 'react'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 type TooltipProps = {
   selector: string
@@ -15,6 +14,10 @@ type TooltipProps = {
   children: React.ReactNode
 }
 
+const arrow = (
+  <svg className="absolute text-white h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255"><polygon className="fill-current" points="0,0 127.5,127.5 255,0"></polygon></svg>
+)
+
 const Tooltip: FC<TooltipProps> = ({
   selector,
   content,
@@ -24,22 +27,31 @@ const Tooltip: FC<TooltipProps> = ({
   className,
   clickable,
 }) => {
+  const [open, setOpen] = useState(false)
+  const triggerMethod = clickable ? 'click' : 'hover'
+
   return (
-    <div className='tooltip-container'>
-      {React.cloneElement(children as React.ReactElement, {
-        'data-tooltip-id': selector,
-      })
-      }
-      <ReactTooltip
-        id={selector}
-        content={content}
-        className={classNames('!bg-white !text-xs !font-normal !text-gray-700 !shadow-lg !opacity-100', className)}
-        place={position}
-        clickable={clickable}
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement={position}
+      offset={10}
+    >
+      <PortalToFollowElemTrigger
+        data-selector={selector}
+        onClick={() => triggerMethod === 'click' && setOpen(v => !v)}
+        onMouseEnter={() => triggerMethod === 'hover' && setOpen(true)}
+        onMouseLeave={() => triggerMethod === 'hover' && setOpen(false)}
       >
-        {htmlContent && htmlContent}
-      </ReactTooltip>
-    </div>
+        {children}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-[999]">
+        <div className={classNames('relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg', className)}>
+          {htmlContent ?? content}
+          {arrow}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
diff --git a/app/components/welcome/index.tsx b/app/components/welcome/index.tsx
index b795261..9925259 100644
--- a/app/components/welcome/index.tsx
+++ b/app/components/welcome/index.tsx
@@ -37,7 +37,6 @@ const Welcome: FC<IWelcomeProps> = ({
   savedInputs,
   onInputsChange,
 }) => {
-  console.log(promptConfig)
   const { t } = useTranslation()
   const hasVar = promptConfig.prompt_variables.length > 0
   const [isFold, setIsFold] = useState<boolean>(true)