fix: refactor OptionCard and StepTwo components for improved structure and readability

web/app/components/datasets/create/step-two/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC, PropsWithChildren } from 'react'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import {
@@ -10,7 +10,6 @@ import {
 } from '@remixicon/react'
 import Link from 'next/link'
 import Image from 'next/image'
-import { useHover } from 'ahooks'
 import SettingCog from '../assets/setting-gear-mod.svg'
 import OrangeEffect from '../assets/option-card-effect-orange.svg'
 import FamilyMod from '../assets/family-mod.svg'
@@ -60,7 +59,6 @@ import Badge from '@/app/components/base/badge'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
 import Tooltip from '@/app/components/base/tooltip'
 import CustomDialog from '@/app/components/base/dialog'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
@@ -611,9 +609,6 @@ const StepTwo = ({
       setIndexType(isAPIKeySet ? IndexingType.QUALIFIED : IndexingType.ECONOMICAL)
   }, [isAPIKeySet, indexingType, datasetId])
 
-  const economyDomRef = useRef<HTMLDivElement>(null)
-  const isHoveringEconomy = useHover(economyDomRef)
-
   const isModelAndRetrievalConfigDisabled = !!datasetId && !!currentDataset?.data_source_type
 
   return (
@@ -873,7 +868,8 @@ const StepTwo = ({
         <div className={'system-md-semibold mb-1 text-text-secondary'}>{t('datasetCreation.stepTwo.indexMode')}</div>
         <div className='flex items-center gap-2'>
           {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
-            <OptionCard className='flex-1 self-stretch'
+            <OptionCard
+              className='flex-1 self-stretch'
               title={<div className='flex items-center'>
                 {t('datasetCreation.stepTwo.qualified')}
                 <Badge className={cn('ml-1 h-[18px]', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>
@@ -919,35 +915,33 @@ const StepTwo = ({
                   </Button>
                 </div>
               </CustomDialog>
-              <PortalToFollowElem
+              <Tooltip
-                open={
+                popupContent={
-                  isHoveringEconomy && docForm !== ChunkingMode.text
+                  <div className='rounded-lg border-components-panel-border bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg'>
+                    {
+                      docForm === ChunkingMode.qa
+                        ? t('datasetCreation.stepTwo.notAvailableForQA')
+                        : t('datasetCreation.stepTwo.notAvailableForParentChild')
+                    }
+                  </div>
                 }
-                placement={'top'}
+                noDecoration
+                position='top'
+                asChild={false}
+                triggerClassName='flex-1 self-stretch'
               >
-                <PortalToFollowElemTrigger asChild>
+                <OptionCard
-                  <OptionCard className='flex-1 self-stretch'
+                  className='h-full'
                   title={t('datasetCreation.stepTwo.economical')}
                   description={t('datasetCreation.stepTwo.economicalTip')}
                   icon={<Image src={indexMethodIcon.economical} alt='' />}
                   isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL}
                   disabled={hasSetIndexType || docForm !== ChunkingMode.text}
-                    ref={economyDomRef}
                   onSwitched={() => {
                     setIndexType(IndexingType.ECONOMICAL)
                   }}
                 />
-                </PortalToFollowElemTrigger>
+              </Tooltip>
-                <PortalToFollowElemContent>
-                  <div className='rounded-lg border-components-panel-border bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg'>
-                    {
-                      docForm === ChunkingMode.qa
-                        ? t('datasetCreation.stepTwo.notAvailableForQA')
-                        : t('datasetCreation.stepTwo.notAvailableForParentChild')
-                    }
-                  </div>
-                </PortalToFollowElemContent>
-              </PortalToFollowElem>
             </>)}
         </div>
         {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (

web/app/components/datasets/create/step-two/option-card.tsx

@@ -21,7 +21,7 @@ type OptionCardHeaderProps = {
 export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
   return <div className={classNames(
-    'flex h-full overflow-hidden rounded-t-xl relative',
+    'relative flex h-full overflow-hidden rounded-t-xl',
     isActive && activeClassName,
     !disabled && 'cursor-pointer',
   )}>
@@ -34,7 +34,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       </div>
     </div>
     <TriangleArrow
-      className={classNames('absolute left-4 -bottom-1.5 text-transparent', isActive && 'text-components-panel-bg')}
+      className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='system-md-semibold text-text-secondary'>{title}</div>
@@ -64,13 +64,14 @@ export const OptionCard: FC<OptionCardProps> = (
   },
 ) => {
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
-  return <div
+  return (
+    <div
       className={classNames(
         'rounded-xl bg-components-option-card-option-bg shadow-xs',
         (isActive && !noHighlight)
           ? 'border-[1.5px] border-components-option-card-option-selected-border'
           : 'border border-components-option-card-option-border',
-      disabled && 'opacity-50 pointer-events-none',
+        disabled && 'pointer-events-none opacity-50',
         className,
       )}
       style={{
@@ -101,6 +102,7 @@ export const OptionCard: FC<OptionCardProps> = (
         }
       </div>}
     </div>
+  )
 }
 
 OptionCard.displayName = 'OptionCard'