fix: add annotation ctrl button for annotation add (#17873)

This commit is contained in:
KVOJJJin 2025-04-11 16:00:51 +08:00 committed by GitHub
parent 91cfa90503
commit 4b0d3c3688
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 89 additions and 4 deletions

View File

@ -7,7 +7,6 @@ import {
import { useTranslation } from 'react-i18next'
import {
RiClipboardLine,
RiEditLine,
RiResetLeftLine,
RiThumbDownLine,
RiThumbUpLine,
@ -16,6 +15,7 @@ import type { ChatItem } from '../../types'
import { useChatContext } from '../context'
import copy from 'copy-to-clipboard'
import Toast from '@/app/components/base/toast'
import AnnotationCtrlButton from '@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button'
import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
import Log from '@/app/components/base/chat/chat/log'
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
@ -134,9 +134,15 @@ const Operation: FC<OperationProps> = ({
</ActionButton>
)}
{(config?.supportAnnotation && config.annotation_reply?.enabled) && (
<ActionButton onClick={() => setIsShowReplyModal(true)}>
<RiEditLine className='h-4 w-4' />
</ActionButton>
<AnnotationCtrlButton
appId={config?.appId || ''}
messageId={id}
cached={!!annotation?.id}
query={question}
answer={content}
onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content, index)}
onEdit={() => setIsShowReplyModal(true)}
/>
)}
</div>
)}

View File

@ -0,0 +1,79 @@
'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)