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

web/app/components/base/chat/chat/answer/operation.tsx

@@ -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)}>
+              <AnnotationCtrlButton
-                <RiEditLine className='h-4 w-4' />
+                appId={config?.appId || ''}
-              </ActionButton>
+                messageId={id}
+                cached={!!annotation?.id}
+                query={question}
+                answer={content}
+                onAdded={(id, authorName) => onAnnotationAdded?.(id, authorName, question, content, index)}
+                onEdit={() => setIsShowReplyModal(true)}
+              />
             )}
           </div>
         )}

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

@@ -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)