dify/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx

import type { OnFeaturesChange } from '@/app/components/base/features/types'
import type { AnnotationReplyConfig } from '@/models/debug'
import { RiEqualizer2Line, RiExternalLinkLine } from '@remixicon/react'
import { produce } from 'immer'
import { usePathname, useRouter } from 'next/navigation'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
import ConfigParamModal from '@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal'
import useAnnotationConfig from '@/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config'
import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
import { MessageFast } from '@/app/components/base/icons/src/vender/features'
import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
import { ANNOTATION_DEFAULT } from '@/config'

type Props = {
  disabled?: boolean
  onChange?: OnFeaturesChange
}

const AnnotationReply = ({
  disabled,
  onChange,
}: Props) => {
  const { t } = useTranslation()
  const router = useRouter()
  const pathname = usePathname()
  const matched = pathname.match(/\/app\/([^/]+)/)
  const appId = (matched?.length && matched[1]) ? matched[1] : ''
  const featuresStore = useFeaturesStore()
  const annotationReply = useFeatures(s => s.features.annotationReply)

  const updateAnnotationReply = useCallback((newConfig: AnnotationReplyConfig) => {
    const {
      features,
      setFeatures,
    } = featuresStore!.getState()
    const newFeatures = produce(features, (draft) => {
      draft.annotationReply = newConfig
    })
    setFeatures(newFeatures)
    if (onChange)
      onChange(newFeatures)
  }, [featuresStore, onChange])

  const {
    handleEnableAnnotation,
    handleDisableAnnotation,
    isShowAnnotationConfigInit,
    setIsShowAnnotationConfigInit,
    isShowAnnotationFullModal,
    setIsShowAnnotationFullModal,
  } = useAnnotationConfig({
    appId,
    annotationConfig: annotationReply as any || {
      id: '',
      enabled: false,
      score_threshold: ANNOTATION_DEFAULT.score_threshold,
      embedding_model: {
        embedding_provider_name: '',
        embedding_model_name: '',
      },
    },
    setAnnotationConfig: updateAnnotationReply,
  })

  const handleSwitch = useCallback((enabled: boolean) => {
    if (enabled)
      setIsShowAnnotationConfigInit(true)
    else
      handleDisableAnnotation(annotationReply?.embedding_model as any)
  }, [annotationReply?.embedding_model, handleDisableAnnotation, setIsShowAnnotationConfigInit])

  const [isHovering, setIsHovering] = useState(false)

  return (
    <>
      <FeatureCard
        icon={(
          <div className="shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
            <MessageFast className="h-4 w-4 text-text-primary-on-surface" />
          </div>
        )}
        title={t('feature.annotation.title', { ns: 'appDebug' })}
        value={!!annotationReply?.enabled}
        onChange={state => handleSwitch(state)}
        onMouseEnter={() => setIsHovering(true)}
        onMouseLeave={() => setIsHovering(false)}
        disabled={disabled}
      >
        <>
          {!annotationReply?.enabled && (
            <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.annotation.description', { ns: 'appDebug' })}</div>
          )}
          {!!annotationReply?.enabled && (
            <>
              {!isHovering && (
                <div className="flex items-center gap-4 pt-0.5">
                  <div className="">
                    <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}</div>
                    <div className="system-xs-regular text-text-secondary">{annotationReply.score_threshold || '-'}</div>
                  </div>
                  <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                  <div className="">
                    <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('modelProvider.embeddingModel.key', { ns: 'common' })}</div>
                    <div className="system-xs-regular text-text-secondary">{annotationReply.embedding_model?.embedding_model_name}</div>
                  </div>
                </div>
              )}
              {isHovering && (
                <div className="flex items-center justify-between">
                  <Button className="w-[178px]" onClick={() => setIsShowAnnotationConfigInit(true)} disabled={disabled}>
                    <RiEqualizer2Line className="mr-1 h-4 w-4" />
                    {t('operation.params', { ns: 'common' })}
                  </Button>
                  <Button
                    className="w-[178px]"
                    onClick={() => {
                      router.push(`/app/${appId}/annotations`)
                    }}
                  >
                    <RiExternalLinkLine className="mr-1 h-4 w-4" />
                    {t('feature.annotation.cacheManagement', { ns: 'appDebug' })}
                  </Button>
                </div>
              )}
            </>
          )}
        </>
      </FeatureCard>
      <ConfigParamModal
        appId={appId}
        isInit
        isShow={isShowAnnotationConfigInit}
        onHide={() => {
          setIsShowAnnotationConfigInit(false)
          // showChooseFeatureTrue()
        }}
        onSave={async (embeddingModel, score) => {
          await handleEnableAnnotation(embeddingModel, score)
          setIsShowAnnotationConfigInit(false)
        }}
        annotationConfig={annotationReply as any}
      />
      {isShowAnnotationFullModal && (
        <AnnotationFullModal
          show={isShowAnnotationFullModal}
          onHide={() => setIsShowAnnotationFullModal(false)}
        />
      )}
    </>
  )
}

export default AnnotationReply