refactor(web): remove annotation control React.FC

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

@@ -60,7 +60,9 @@ describe('AnnotationCtrlButton', () => {
       />,
     )
 
-    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'appDebug.feature.annotation.edit' }),
+    ).toBeInTheDocument()
   })
 
   it('should call onEdit when edit button is clicked', () => {
@@ -76,7 +78,7 @@ describe('AnnotationCtrlButton', () => {
       />,
     )
 
-    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.annotation.edit' }))
 
     expect(onEdit).toHaveBeenCalled()
   })
@@ -93,7 +95,9 @@ describe('AnnotationCtrlButton', () => {
       />,
     )
 
-    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'appDebug.feature.annotation.add' }),
+    ).toBeInTheDocument()
   })
 
   it('should not render any button when not cached and no answer', () => {
@@ -125,7 +129,7 @@ describe('AnnotationCtrlButton', () => {
       />,
     )
 
-    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.annotation.add' }))
 
     await waitFor(() => {
       expect(mockAddAnnotation).toHaveBeenCalledWith('test-app', {
@@ -151,7 +155,7 @@ describe('AnnotationCtrlButton', () => {
       />,
     )
 
-    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.annotation.add' }))
 
     expect(mockSetShowAnnotationFullModal).toHaveBeenCalled()
     expect(mockAddAnnotation).not.toHaveBeenCalled()
@@ -176,7 +180,7 @@ describe('AnnotationCtrlButton', () => {
       />,
     )
 
-    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.annotation.add' }))
 
     await waitFor(() => {
       expect(onAdded).toHaveBeenCalledWith('annotation-2', '')

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

@@ -1,9 +1,8 @@
 'use client'
-import type { FC } from 'react'
 import { toast } from '@langgenius/dify-ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiEditLine, RiFileEditLine } from '@remixicon/react'
-import * as React from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { useModalContext } from '@/context/modal-context'
@@ -19,7 +18,7 @@ type Props = Readonly<{
   onAdded: (annotationId: string, authorName: string) => void
   onEdit: () => void
 }>
-const AnnotationCtrlButton: FC<Props> = ({
+const AnnotationCtrlButton = ({
   cached,
   query,
   answer,
@@ -27,7 +26,7 @@ const AnnotationCtrlButton: FC<Props> = ({
   messageId,
   onAdded,
   onEdit,
-}) => {
+}: Props) => {
   const { t } = useTranslation()
   const { plan, enableBilling } = useProviderContext()
   const isAnnotationFull =
@@ -52,8 +51,11 @@ const AnnotationCtrlButton: FC<Props> = ({
         <Tooltip>
           <TooltipTrigger
             render={
-              <ActionButton onClick={onEdit}>
-                <RiEditLine className="size-4" />
+              <ActionButton
+                aria-label={t(($) => $['feature.annotation.edit'], { ns: 'appDebug' })}
+                onClick={onEdit}
+              >
+                <RiEditLine aria-hidden className="size-4" />
               </ActionButton>
             }
           />
@@ -66,8 +68,11 @@ const AnnotationCtrlButton: FC<Props> = ({
         <Tooltip>
           <TooltipTrigger
             render={
-              <ActionButton onClick={handleAdd}>
-                <RiFileEditLine className="size-4" />
+              <ActionButton
+                aria-label={t(($) => $['feature.annotation.add'], { ns: 'appDebug' })}
+                onClick={handleAdd}
+              >
+                <RiFileEditLine aria-hidden className="size-4" />
               </ActionButton>
             }
           />
@@ -79,4 +84,4 @@ const AnnotationCtrlButton: FC<Props> = ({
     </>
   )
 }
-export default React.memo(AnnotationCtrlButton)
+export default memo(AnnotationCtrlButton)