dify/web/app/components/base/features/new-feature-panel/follow-up.tsx

import type {
  OnFeaturesChange,
  SuggestedQuestionsAfterAnswer,
} from '@/app/components/base/features/types'
import { Button } from '@langgenius/dify-ui/button'
import { RiEqualizer2Line } from '@remixicon/react'
import { produce } from 'immer'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
import FollowUpSettingModal from '@/app/components/base/features/new-feature-panel/follow-up-setting-modal'
import { FeatureEnum } from '@/app/components/base/features/types'
import { VirtualAssistant } from '@/app/components/base/icons/src/vender/features'

type Props = Readonly<{
  disabled?: boolean
  onChange?: OnFeaturesChange
}>

const FollowUp = ({ disabled, onChange }: Props) => {
  const { t } = useTranslation()
  const suggested = useFeatures((s) => s.features.suggested)
  const featuresStore = useFeaturesStore()
  const [isHovering, setIsHovering] = useState(false)
  const [isShowSettingModal, setIsShowSettingModal] = useState(false)

  const handleChange = useCallback(
    (type: FeatureEnum, enabled: boolean) => {
      const { features, setFeatures } = featuresStore!.getState()

      const newFeatures = produce(features, (draft) => {
        draft[type] = {
          ...draft[type],
          enabled,
        }
      })
      setFeatures(newFeatures)
      if (onChange) onChange(newFeatures)
    },
    [featuresStore, onChange],
  )

  const handleSave = useCallback(
    (newSuggested: SuggestedQuestionsAfterAnswer) => {
      const { features, setFeatures } = featuresStore!.getState()

      const newFeatures = produce(features, (draft) => {
        draft.suggested = {
          ...newSuggested,
          enabled: true,
        }
      })
      setFeatures(newFeatures)
      setIsShowSettingModal(false)
      if (onChange) onChange(newFeatures)
    },
    [featuresStore, onChange],
  )

  const handleOpenSettingModal = useCallback(() => {
    if (disabled) return
    setIsShowSettingModal(true)
  }, [disabled])

  return (
    <>
      <FeatureCard
        icon={
          <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs">
            <VirtualAssistant className="size-4 text-text-primary-on-surface" />
          </div>
        }
        title={t(($) => $['feature.suggestedQuestionsAfterAnswer.title'], { ns: 'appDebug' })}
        value={!!suggested?.enabled}
        onChange={(state) => handleChange(FeatureEnum.suggested, state)}
        onMouseEnter={() => setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
        disabled={disabled}
      >
        <>
          {!suggested?.enabled && (
            <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">
              {t(($) => $['feature.suggestedQuestionsAfterAnswer.description'], { ns: 'appDebug' })}
            </div>
          )}
          {!!suggested?.enabled && (
            <>
              {!isHovering && (
                <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">
                  {suggested.model?.name ||
                    t(($) => $['feature.suggestedQuestionsAfterAnswer.modal.defaultModel'], {
                      ns: 'appDebug',
                    })}
                </div>
              )}
              {isHovering && (
                <Button className="w-full" onClick={handleOpenSettingModal} disabled={disabled}>
                  <RiEqualizer2Line className="mr-1 size-4" />
                  {t(($) => $['operation.settings'], { ns: 'common' })}
                </Button>
              )}
            </>
          )}
        </>
      </FeatureCard>
      {isShowSettingModal && (
        <FollowUpSettingModal
          data={suggested || { enabled: true }}
          onSave={handleSave}
          onCancel={() => setIsShowSettingModal(false)}
        />
      )}
    </>
  )
}

export default FollowUp