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

'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import {
  RiEditLine,
  RiFileEditLine,
} from '@remixicon/react'
import ActionButton from '@/app/components/base/action-button'
import Tooltip from '@/app/components/base/tooltip'
import { addAnnotation } from '@/service/annotation'
import Toast from '@/app/components/base/toast'
import { useProviderContext } from '@/context/provider-context'
import { useModalContext } from '@/context/modal-context'

type Props = {
  appId: string
  messageId?: string
  cached: boolean
  query: string
  answer: string
  onAdded: (annotationId: string, authorName: string) => void
  onEdit: () => void
}

const AnnotationCtrlButton: FC<Props> = ({
  cached,
  query,
  answer,
  appId,
  messageId,
  onAdded,
  onEdit,
}) => {
  const { t } = useTranslation()
  const { plan, enableBilling } = useProviderContext()
  const isAnnotationFull = (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse)
  const { setShowAnnotationFullModal } = useModalContext()
  const handleAdd = async () => {
    if (isAnnotationFull) {
      setShowAnnotationFullModal()
      return
    }
    const res: any = await addAnnotation(appId, {
      message_id: messageId,
      question: query,
      answer,
    })
    Toast.notify({
      message: t('common.api.actionSuccess') as string,
      type: 'success',
    })
    onAdded(res.id, res.account?.name)
  }

  return (
    <>
      {cached && (
        <Tooltip
          popupContent={t('appDebug.feature.annotation.edit')}
        >
          <ActionButton onClick={onEdit}>
            <RiEditLine className='h-4 w-4' />
          </ActionButton>
        </Tooltip>
      )}
      {!cached && answer && (
        <Tooltip
          popupContent={t('appDebug.feature.annotation.add')}
        >
          <ActionButton onClick={handleAdd}>
            <RiFileEditLine className='h-4 w-4' />
          </ActionButton>
        </Tooltip>
      )}
    </>
  )
}
export default React.memo(AnnotationCtrlButton)