feat: tooltip (#7634)

web/app/components/base/chat/chat/answer/operation.tsx

@@ -17,7 +17,7 @@ import {
   ThumbsDown,
   ThumbsUp,
 } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import Log from '@/app/components/base/chat/chat/log'
 
 type OperationProps = {
@@ -162,28 +162,34 @@ const Operation: FC<OperationProps> = ({
         {
           config?.supportFeedback && !localFeedback?.rating && onFeedback && !isOpeningStatement && (
             <div className='hidden group-hover:flex ml-1 shrink-0 items-center px-0.5 bg-white border-[0.5px] border-gray-100 shadow-md text-gray-500 rounded-lg'>
-              <TooltipPlus popupContent={t('appDebug.operation.agree')}>
+              <Tooltip
+                popupContent={t('appDebug.operation.agree')}
+              >
                 <div
                   className='flex items-center justify-center mr-0.5 w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
                   onClick={() => handleFeedback('like')}
                 >
                   <ThumbsUp className='w-4 h-4' />
                 </div>
-              </TooltipPlus>
-              <TooltipPlus popupContent={t('appDebug.operation.disagree')}>
+              </Tooltip>
+              <Tooltip
+                popupContent={t('appDebug.operation.disagree')}
+              >
                 <div
                   className='flex items-center justify-center w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
                   onClick={() => handleFeedback('dislike')}
                 >
                   <ThumbsDown className='w-4 h-4' />
                 </div>
-              </TooltipPlus>
+              </Tooltip>
             </div>
           )
         }
         {
           config?.supportFeedback && localFeedback?.rating && onFeedback && !isOpeningStatement && (
-            <TooltipPlus popupContent={localFeedback.rating === 'like' ? t('appDebug.operation.cancelAgree') : t('appDebug.operation.cancelDisagree')}>
+            <Tooltip
+              popupContent={localFeedback.rating === 'like' ? t('appDebug.operation.cancelAgree') : t('appDebug.operation.cancelDisagree')}
+            >
               <div
                 className={`
                   flex items-center justify-center w-7 h-7 rounded-[10px] border-[2px] border-white cursor-pointer
@@ -203,7 +209,7 @@ const Operation: FC<OperationProps> = ({
                   )
                 }
               </div>
-            </TooltipPlus>
+            </Tooltip>
           )
         }
       </div>

web/app/components/base/chat/chat/chat-input.tsx

@@ -17,7 +17,7 @@ import { TransferMethod } from '../types'
 import { useChatWithHistoryContext } from '../chat-with-history/context'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { ToastContext } from '@/app/components/base/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import VoiceInput from '@/app/components/base/voice-input'
@@ -220,7 +220,7 @@ const ChatInput: FC<ChatInputProps> = ({
             {isMobile
               ? sendBtn
               : (
-                <TooltipPlus
+                <Tooltip
                   popupContent={
                     <div>
                       <div>{t('common.operation.send')} Enter</div>
@@ -229,7 +229,7 @@ const ChatInput: FC<ChatInputProps> = ({
                   }
                 >
                   {sendBtn}
-                </TooltipPlus>
+                </Tooltip>
               )}
           </div>
           {

web/app/components/base/chat/embedded-chatbot/header.tsx

@@ -41,9 +41,7 @@ const Header: FC<IHeaderProps> = ({
         </div>
       </div>
       <Tooltip
-        selector={'embed-scene-restart-button'}
-        htmlContent={t('share.chat.resetChat')}
-        position='top'
+        popupContent={t('share.chat.resetChat')}
       >
         <div className='flex cursor-pointer hover:rounded-lg hover:bg-black/5 w-8 h-8 items-center justify-center' onClick={() => {
           onCreateNewChat?.()

web/app/components/base/chat/embedded-chatbot/index.tsx

@@ -88,9 +88,7 @@ const Chatbot = () => {
               {!isMobile && (
                 <div className='absolute top-2.5 right-3 z-20'>
                   <Tooltip
-                    selector={'embed-scene-restart-button'}
-                    htmlContent={t('share.chat.resetChat')}
-                    position='top'
+                    popupContent={t('share.chat.resetChat')}
                   >
                     <div className='p-1.5 bg-white border-[0.5px] border-gray-100 rounded-lg shadow-md cursor-pointer' onClick={handleNewConversation}>
                       <RiLoopLeftLine className="h-4 w-4 text-gray-500"/>