+
)
@@ -53,21 +53,17 @@ const NavLink = ({
key={name}
type='button'
disabled
- className={classNames(
- 'system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
- 'pl-3 pr-1',
- )}
+ className={cn('system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
+ 'pl-3 pr-1')}
title={mode === 'collapse' ? name : ''}
aria-disabled
>
{renderIcon()}
{name}
@@ -79,22 +75,18 @@ const NavLink = ({
{renderIcon()}
{name}
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 8de6f887f6..4f69adfc34 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import Button from '../base/button'
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import Tooltip from '../base/tooltip'
import { useTranslation } from 'react-i18next'
import { getKeyboardKeyNameBySystem } from '../workflow/utils'
diff --git a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
new file mode 100644
index 0000000000..f226adf22b
--- /dev/null
+++ b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import EditItem, { EditItemType } from './index'
+
+describe('AddAnnotationModal/EditItem', () => {
+ test('should render query inputs with user avatar and placeholder strings', () => {
+ render(
+ = ({
- setIsCreateNext(!isCreateNext)} />
+ setIsCreateNext(!isCreateNext)} />
{t('appAnnotation.addModal.createNext')}
diff --git a/web/app/components/app/annotation/batch-action.spec.tsx b/web/app/components/app/annotation/batch-action.spec.tsx
new file mode 100644
index 0000000000..36440fc044
--- /dev/null
+++ b/web/app/components/app/annotation/batch-action.spec.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import BatchAction from './batch-action'
+
+describe('BatchAction', () => {
+ const baseProps = {
+ selectedIds: ['1', '2', '3'],
+ onBatchDelete: jest.fn(),
+ onCancel: jest.fn(),
+ }
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('should show the selected count and trigger cancel action', () => {
+ render( = ({
setIsNotDeleting()
}
return (
-
+
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx
new file mode 100644
index 0000000000..7d360cfc1b
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import CSVDownload from './csv-downloader'
+import I18nContext from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import type { Locale } from '@/i18n-config'
+
+const downloaderProps: any[] = []
+
+jest.mock('react-papaparse', () => ({
+ useCSVDownloader: jest.fn(() => ({
+ CSVDownloader: ({ children, ...props }: any) => {
+ downloaderProps.push(props)
+ return
+ ,
+ )
+}
+
+describe('CSVDownload', () => {
+ const englishTemplate = [
+ ['question', 'answer'],
+ ['question1', 'answer1'],
+ ['question2', 'answer2'],
+ ]
+ const chineseTemplate = [
+ ['问题', '答案'],
+ ['问题 1', '答案 1'],
+ ['问题 2', '答案 2'],
+ ]
+
+ beforeEach(() => {
+ downloaderProps.length = 0
+ })
+
+ it('should render the structure preview and pass English template data by default', () => {
+ renderWithLocale('en-US' as Locale)
+
+ expect(screen.getByText('share.generation.csvStructureTitle')).toBeInTheDocument()
+ expect(screen.getByText('appAnnotation.batchModal.template')).toBeInTheDocument()
+
+ expect(downloaderProps[0]).toMatchObject({
+ filename: 'template-en-US',
+ type: 'link',
+ bom: true,
+ data: englishTemplate,
+ })
+ })
+
+ it('should switch to the Chinese template when locale matches the secondary language', () => {
+ const locale = LanguagesSupported[1] as Locale
+ renderWithLocale(locale)
+
+ expect(downloaderProps[0]).toMatchObject({
+ filename: `template-${locale}`,
+ data: chineseTemplate,
+ })
+ })
+})
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index ccad46b860..c9766135df 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { RiDeleteBinLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
import { ToastContext } from '@/app/components/base/toast'
import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..5527340895
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
@@ -0,0 +1,164 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import BatchModal, { ProcessStatus } from './index'
+import { useProviderContext } from '@/context/provider-context'
+import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
+import type { IBatchModalProps } from './index'
+import Toast from '@/app/components/base/toast'
+
+jest.mock('@/app/components/base/toast', () => ({
+ __esModule: true,
+ default: {
+ notify: jest.fn(),
+ },
+}))
+
+jest.mock('@/service/annotation', () => ({
+ annotationBatchImport: jest.fn(),
+ checkAnnotationBatchImportProgress: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: jest.fn(),
+}))
+
+jest.mock('./csv-downloader', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+let lastUploadedFile: File | undefined
+
+jest.mock('./csv-uploader', () => ({
+ __esModule: true,
+ default: ({ file, updateFile }: { file?: File; updateFile: (file?: File) => void }) => (
+ = {}) => {
+ const mergedProps: IBatchModalProps = {
+ appId: 'app-id',
+ isShow: true,
+ onCancel: jest.fn(),
+ onAdded: jest.fn(),
+ ...props,
+ }
+ return {
+ ...render( = ({
}, [content])
const handleSave = async () => {
- await onSave(newContent)
- setIsEdit(false)
+ try {
+ await onSave(newContent)
+ setIsEdit(false)
+ }
+ catch {
+ // Keep edit mode open when save fails
+ // Error notification is handled by the parent component
+ }
}
const handleCancel = () => {
@@ -96,9 +102,16 @@ const EditItem: FC = ({
{children}
+ },
+ Type: { Link: 'link' },
+ })),
+}))
+
+const renderWithLocale = (locale: Locale) => {
+ return render(
+
+
+ {file && {file.name}}
+
+ ),
+}))
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+const mockNotify = Toast.notify as jest.Mock
+const useProviderContextMock = useProviderContext as jest.Mock
+const annotationBatchImportMock = annotationBatchImport as jest.Mock
+const checkAnnotationBatchImportProgressMock = checkAnnotationBatchImportProgress as jest.Mock
+
+const renderComponent = (props: Partial·
{
- setNewContent(content)
- onSave(content)
+ onClick={async () => {
+ try {
+ await onSave(content)
+ // Only update UI state after successful delete
+ setNewContent(content)
+ }
+ catch {
+ // Delete action failed - error is already handled by parent
+ // UI state remains unchanged, user can retry
+ }
}}
>
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..bdc991116c
--- /dev/null
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
@@ -0,0 +1,680 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Toast, { type IToastProps, type ToastHandle } from '@/app/components/base/toast'
+import EditAnnotationModal from './index'
+
+// Mock only external dependencies
+jest.mock('@/service/annotation', () => ({
+ addAnnotation: jest.fn(),
+ editAnnotation: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: () => ({
+ plan: {
+ usage: { annotatedResponse: 5 },
+ total: { annotatedResponse: 10 },
+ },
+ enableBilling: true,
+ }),
+}))
+
+jest.mock('@/hooks/use-timestamp', () => ({
+ __esModule: true,
+ default: () => ({
+ formatTime: () => '2023-12-01 10:30:00',
+ }),
+}))
+
+// Note: i18n is automatically mocked by Jest via __mocks__/react-i18next.ts
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+type ToastNotifyProps = Pick
+type ToastWithNotify = typeof Toast & { notify: (props: ToastNotifyProps) => ToastHandle }
+const toastWithNotify = Toast as unknown as ToastWithNotify
+const toastNotifySpy = jest.spyOn(toastWithNotify, 'notify').mockReturnValue({ clear: jest.fn() })
+
+const { addAnnotation: mockAddAnnotation, editAnnotation: mockEditAnnotation } = jest.requireMock('@/service/annotation') as {
+ addAnnotation: jest.Mock
+ editAnnotation: jest.Mock
+}
+
+describe('EditAnnotationModal', () => {
+ const defaultProps = {
+ isShow: true,
+ onHide: jest.fn(),
+ appId: 'test-app-id',
+ query: 'Test query',
+ answer: 'Test answer',
+ onEdited: jest.fn(),
+ onAdded: jest.fn(),
+ onRemove: jest.fn(),
+ }
+
+ afterAll(() => {
+ toastNotifySpy.mockRestore()
+ })
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ mockAddAnnotation.mockResolvedValue({
+ id: 'test-id',
+ account: { name: 'Test User' },
+ })
+ mockEditAnnotation.mockResolvedValue({})
+ })
+
+ // Rendering tests (REQUIRED)
+ describe('Rendering', () => {
+ it('should render modal when isShow is true', () => {
+ // Arrange
+ const props = { ...defaultProps }
+
+ // Act
+ render( = ({
postQuery = editedContent
else
postAnswer = editedContent
- if (!isAdd) {
- await editAnnotation(appId, annotationId, {
- message_id: messageId,
- question: postQuery,
- answer: postAnswer,
- })
- onEdited(postQuery, postAnswer)
- }
- else {
- const res: any = await addAnnotation(appId, {
- question: postQuery,
- answer: postAnswer,
- message_id: messageId,
- })
- onAdded(res.id, res.account?.name, postQuery, postAnswer)
- }
+ try {
+ if (!isAdd) {
+ await editAnnotation(appId, annotationId, {
+ message_id: messageId,
+ question: postQuery,
+ answer: postAnswer,
+ })
+ onEdited(postQuery, postAnswer)
+ }
+ else {
+ const res = await addAnnotation(appId, {
+ question: postQuery,
+ answer: postAnswer,
+ message_id: messageId,
+ })
+ onAdded(res.id, res.account?.name ?? '', postQuery, postAnswer)
+ }
- Toast.notify({
- message: t('common.api.actionSuccess') as string,
- type: 'success',
- })
+ Toast.notify({
+ message: t('common.api.actionSuccess') as string,
+ type: 'success',
+ })
+ }
+ catch (error) {
+ const fallbackMessage = t('common.api.actionFailed') as string
+ const message = error instanceof Error && error.message ? error.message : fallbackMessage
+ Toast.notify({
+ message,
+ type: 'error',
+ })
+ // Re-throw to preserve edit mode behavior for UI components
+ throw error
+ }
}
const [showModal, setShowModal] = useState(false)
diff --git a/web/app/components/app/annotation/empty-element.spec.tsx b/web/app/components/app/annotation/empty-element.spec.tsx
new file mode 100644
index 0000000000..56ebb96121
--- /dev/null
+++ b/web/app/components/app/annotation/empty-element.spec.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import EmptyElement from './empty-element'
+
+describe('EmptyElement', () => {
+ it('should render the empty state copy and supporting icon', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container.firstChild).toBeNull()
+ expect(mockUseSWR).toHaveBeenCalledWith(
+ { url: `/apps/${appId}/annotations/count` },
+ expect.any(Function),
+ )
+ })
+
+ it('should propagate keyword changes and clearing behavior', () => {
+ mockUseSWR.mockReturnValue({ data: { total: 20 } })
+ const queryParams: QueryParam = { keyword: 'prefill' }
+ const setQueryParams = jest.fn()
+
+ const { container } = render(
+
+ ,
+ )
+
+ const input = screen.getByPlaceholderText('common.operation.search') as HTMLInputElement
+ fireEvent.change(input, { target: { value: 'updated' } })
+ expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
+
+ const clearButton = input.parentElement?.querySelector('div.cursor-pointer') as HTMLElement
+ fireEvent.click(clearButton)
+ expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
+
+ expect(container).toHaveTextContent(childContent)
+ })
+})
diff --git a/web/app/components/app/annotation/header-opts/index.spec.tsx b/web/app/components/app/annotation/header-opts/index.spec.tsx
new file mode 100644
index 0000000000..3d8a1fd4ef
--- /dev/null
+++ b/web/app/components/app/annotation/header-opts/index.spec.tsx
@@ -0,0 +1,439 @@
+import * as React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ComponentProps } from 'react'
+import HeaderOptions from './index'
+import I18NContext from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import type { AnnotationItemBasic } from '../type'
+import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
+
+jest.mock('@headlessui/react', () => {
+ type PopoverContextValue = { open: boolean; setOpen: (open: boolean) => void }
+ type MenuContextValue = { open: boolean; setOpen: (open: boolean) => void }
+ const PopoverContext = React.createContext(null)
+ const MenuContext = React.createContext(null)
+
+ const Popover = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
+ const [open, setOpen] = React.useState(false)
+ const value = React.useMemo(() => ({ open, setOpen }), [open])
+ return (
+
+ {typeof children === 'function' ? children({ open }) : children}
+
+ )
+ }
+
+ const PopoverButton = React.forwardRef(({ onClick, children, ...props }: { onClick?: () => void; children?: React.ReactNode }, ref: React.Ref) => {
+ const context = React.useContext(PopoverContext)
+ const handleClick = () => {
+ context?.setOpen(!context.open)
+ onClick?.()
+ }
+ return (
+
+ )
+ })
+
+ const PopoverPanel = React.forwardRef(({ children, ...props }: { children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode) }, ref: React.Ref) => {
+ const context = React.useContext(PopoverContext)
+ if (!context?.open) return null
+ const content = typeof children === 'function' ? children({ close: () => context.setOpen(false) }) : children
+ return (
+
+ {children}
+
+ )
+ }
+
+ const MenuButton = ({ onClick, children, ...props }: { onClick?: () => void; children?: React.ReactNode }) => {
+ const context = React.useContext(MenuContext)
+ const handleClick = () => {
+ context?.setOpen(!context.open)
+ onClick?.()
+ }
+ return (
+
+ )
+ }
+
+ const MenuItems = ({ children, ...props }: { children: React.ReactNode }) => {
+ const context = React.useContext(MenuContext)
+ if (!context?.open) return null
+ return (
+ | undefined
+const mockCSVDownloader = jest.fn(({ children, ...props }) => {
+ lastCSVDownloaderProps = props
+ return (
+
+
+const renderComponent = (
+ props: Partial = {},
+ locale: string = LanguagesSupported[0] as string,
+) => {
+ const defaultProps: HeaderOptionsProps = {
+ appId: 'test-app-id',
+ onAdd: jest.fn(),
+ onAdded: jest.fn(),
+ controlUpdateList: 0,
+ ...props,
+ }
+
+ return render(
+
+ ,
+ )
+}
+
+const openOperationsPopover = async (user: ReturnType) => {
+ const trigger = document.querySelector('button.btn.btn-secondary') as HTMLButtonElement
+ expect(trigger).toBeTruthy()
+ await user.click(trigger)
+}
+
+const expandExportMenu = async (user: ReturnType) => {
+ await openOperationsPopover(user)
+ const exportLabel = await screen.findByText('appAnnotation.table.header.bulkExport')
+ const exportButton = exportLabel.closest('button') as HTMLButtonElement
+ expect(exportButton).toBeTruthy()
+ await user.click(exportButton)
+}
+
+const getExportButtons = async () => {
+ const csvLabel = await screen.findByText('CSV')
+ const jsonLabel = await screen.findByText('JSONL')
+ const csvButton = csvLabel.closest('button') as HTMLButtonElement
+ const jsonButton = jsonLabel.closest('button') as HTMLButtonElement
+ expect(csvButton).toBeTruthy()
+ expect(jsonButton).toBeTruthy()
+ return {
+ csvButton,
+ jsonButton,
+ }
+}
+
+const clickOperationAction = async (
+ user: ReturnType,
+ translationKey: string,
+) => {
+ const label = await screen.findByText(translationKey)
+ const button = label.closest('button') as HTMLButtonElement
+ expect(button).toBeTruthy()
+ await user.click(button)
+}
+
+const mockAnnotations: AnnotationItemBasic[] = [
+ {
+ question: 'Question 1',
+ answer: 'Answer 1',
+ },
+]
+
+const mockedFetchAnnotations = jest.mocked(fetchExportAnnotationList)
+const mockedClearAllAnnotations = jest.mocked(clearAllAnnotations)
+
+describe('HeaderOptions', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ jest.useRealTimers()
+ mockCSVDownloader.mockClear()
+ lastCSVDownloaderProps = undefined
+ mockedFetchAnnotations.mockResolvedValue({ data: [] })
+ })
+
+ it('should fetch annotations on mount and render enabled export actions when data exist', async () => {
+ mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+ const user = userEvent.setup()
+ renderComponent()
+
+ await waitFor(() => {
+ expect(mockedFetchAnnotations).toHaveBeenCalledWith('test-app-id')
+ })
+
+ await expandExportMenu(user)
+
+ const { csvButton, jsonButton } = await getExportButtons()
+
+ expect(csvButton).not.toBeDisabled()
+ expect(jsonButton).not.toBeDisabled()
+
+ await waitFor(() => {
+ expect(lastCSVDownloaderProps).toMatchObject({
+ bom: true,
+ filename: 'annotations-en-US',
+ type: 'link',
+ data: [
+ ['Question', 'Answer'],
+ ['Question 1', 'Answer 1'],
+ ],
+ })
+ })
+ })
+
+ it('should disable export actions when there are no annotations', async () => {
+ const user = userEvent.setup()
+ renderComponent()
+
+ await expandExportMenu(user)
+
+ const { csvButton, jsonButton } = await getExportButtons()
+
+ expect(csvButton).toBeDisabled()
+ expect(jsonButton).toBeDisabled()
+
+ expect(lastCSVDownloaderProps).toMatchObject({
+ data: [['Question', 'Answer']],
+ })
+ })
+
+ it('should open the add annotation modal and forward the onAdd callback', async () => {
+ mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+ const user = userEvent.setup()
+ const onAdd = jest.fn().mockResolvedValue(undefined)
+ renderComponent({ onAdd })
+
+ await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalled())
+
+ await user.click(
+ screen.getByRole('button', { name: 'appAnnotation.table.header.addAnnotation' }),
+ )
+
+ await screen.findByText('appAnnotation.addModal.title')
+ const questionInput = screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder')
+ const answerInput = screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder')
+
+ await user.type(questionInput, 'Integration question')
+ await user.type(answerInput, 'Integration answer')
+ await user.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+ await waitFor(() => {
+ expect(onAdd).toHaveBeenCalledWith({
+ question: 'Integration question',
+ answer: 'Integration answer',
+ })
+ })
+ })
+
+ it('should allow bulk import through the batch modal', async () => {
+ const user = userEvent.setup()
+ const onAdded = jest.fn()
+ renderComponent({ onAdded })
+
+ await openOperationsPopover(user)
+ await clickOperationAction(user, 'appAnnotation.table.header.bulkImport')
+
+ expect(await screen.findByText('appAnnotation.batchModal.title')).toBeInTheDocument()
+ await user.click(
+ screen.getByRole('button', { name: 'appAnnotation.batchModal.cancel' }),
+ )
+ expect(onAdded).not.toHaveBeenCalled()
+ })
+
+ it('should trigger JSONL download with locale-specific filename', async () => {
+ mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+ const user = userEvent.setup()
+ const originalCreateElement = document.createElement.bind(document)
+ const anchor = originalCreateElement('a') as HTMLAnchorElement
+ const clickSpy = jest.spyOn(anchor, 'click').mockImplementation(jest.fn())
+ const createElementSpy = jest
+ .spyOn(document, 'createElement')
+ .mockImplementation((tagName: Parameters[0]) => {
+ if (tagName === 'a')
+ return anchor
+ return originalCreateElement(tagName)
+ })
+ const objectURLSpy = jest
+ .spyOn(URL, 'createObjectURL')
+ .mockReturnValue('blob://mock-url')
+ const revokeSpy = jest.spyOn(URL, 'revokeObjectURL').mockImplementation(jest.fn())
+
+ renderComponent({}, LanguagesSupported[1] as string)
+
+ await expandExportMenu(user)
+
+ await waitFor(() => expect(mockCSVDownloader).toHaveBeenCalled())
+
+ const { jsonButton } = await getExportButtons()
+ await user.click(jsonButton)
+
+ expect(createElementSpy).toHaveBeenCalled()
+ expect(anchor.download).toBe(`annotations-${LanguagesSupported[1]}.jsonl`)
+ expect(clickSpy).toHaveBeenCalled()
+ expect(revokeSpy).toHaveBeenCalledWith('blob://mock-url')
+
+ const blobArg = objectURLSpy.mock.calls[0][0] as Blob
+ await expect(blobArg.text()).resolves.toContain('"Question 1"')
+
+ clickSpy.mockRestore()
+ createElementSpy.mockRestore()
+ objectURLSpy.mockRestore()
+ revokeSpy.mockRestore()
+ })
+
+ it('should clear all annotations when confirmation succeeds', async () => {
+ mockedClearAllAnnotations.mockResolvedValue(undefined)
+ const user = userEvent.setup()
+ const onAdded = jest.fn()
+ renderComponent({ onAdded })
+
+ await openOperationsPopover(user)
+ await clickOperationAction(user, 'appAnnotation.table.header.clearAll')
+
+ await screen.findByText('appAnnotation.table.header.clearAllConfirm')
+ const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+ await user.click(confirmButton)
+
+ await waitFor(() => {
+ expect(mockedClearAllAnnotations).toHaveBeenCalledWith('test-app-id')
+ expect(onAdded).toHaveBeenCalled()
+ })
+ })
+
+ it('should handle clear all failures gracefully', async () => {
+ const consoleSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+ mockedClearAllAnnotations.mockRejectedValue(new Error('network'))
+ const user = userEvent.setup()
+ const onAdded = jest.fn()
+ renderComponent({ onAdded })
+
+ await openOperationsPopover(user)
+ await clickOperationAction(user, 'appAnnotation.table.header.clearAll')
+ await screen.findByText('appAnnotation.table.header.clearAllConfirm')
+ const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+ await user.click(confirmButton)
+
+ await waitFor(() => {
+ expect(mockedClearAllAnnotations).toHaveBeenCalled()
+ expect(onAdded).not.toHaveBeenCalled()
+ expect(consoleSpy).toHaveBeenCalled()
+ })
+
+ consoleSpy.mockRestore()
+ })
+
+ it('should refetch annotations when controlUpdateList changes', async () => {
+ const view = renderComponent({ controlUpdateList: 0 })
+
+ await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalledTimes(1))
+
+ view.rerender(
+
+ ,
+ )
+
+ await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalledTimes(2))
+ })
+})
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 024f75867c..5f8ef658e7 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -17,7 +17,7 @@ import Button from '../../../base/button'
import AddAnnotationModal from '../add-annotation-modal'
import type { AnnotationItemBasic } from '../type'
import BatchAddModal from '../batch-add-annotation-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import CustomPopover from '@/app/components/base/popover'
import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
diff --git a/web/app/components/app/annotation/index.spec.tsx b/web/app/components/app/annotation/index.spec.tsx
new file mode 100644
index 0000000000..4971f5173c
--- /dev/null
+++ b/web/app/components/app/annotation/index.spec.tsx
@@ -0,0 +1,233 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Annotation from './index'
+import type { AnnotationItem } from './type'
+import { JobStatus } from './type'
+import { type App, AppModeEnum } from '@/types/app'
+import {
+ addAnnotation,
+ delAnnotation,
+ delAnnotations,
+ fetchAnnotationConfig,
+ fetchAnnotationList,
+ queryAnnotationJobStatus,
+} from '@/service/annotation'
+import { useProviderContext } from '@/context/provider-context'
+import Toast from '@/app/components/base/toast'
+
+jest.mock('@/app/components/base/toast', () => ({
+ __esModule: true,
+ default: { notify: jest.fn() },
+}))
+
+jest.mock('ahooks', () => ({
+ useDebounce: (value: any) => value,
+}))
+
+jest.mock('@/service/annotation', () => ({
+ addAnnotation: jest.fn(),
+ delAnnotation: jest.fn(),
+ delAnnotations: jest.fn(),
+ fetchAnnotationConfig: jest.fn(),
+ editAnnotation: jest.fn(),
+ fetchAnnotationList: jest.fn(),
+ queryAnnotationJobStatus: jest.fn(),
+ updateAnnotationScore: jest.fn(),
+ updateAnnotationStatus: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: jest.fn(),
+}))
+
+jest.mock('./filter', () => ({ children }: { children: React.ReactNode }) => (
+ = {}): AnnotationItem => ({
+ id: overrides.id ?? 'annotation-1',
+ question: overrides.question ?? 'Question 1',
+ answer: overrides.answer ?? 'Answer 1',
+ created_at: overrides.created_at ?? 1700000000,
+ hit_count: overrides.hit_count ?? 0,
+})
+
+const renderComponent = () => render( = {}): AnnotationItem => ({
+ id: overrides.id ?? 'annotation-id',
+ question: overrides.question ?? 'question 1',
+ answer: overrides.answer ?? 'answer 1',
+ created_at: overrides.created_at ?? 1700000000,
+ hit_count: overrides.hit_count ?? 2,
+})
+
+const getCheckboxes = (container: HTMLElement) => container.querySelectorAll('[data-testid^="checkbox"]')
+
+describe('List', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('should render annotation rows and call onView when clicking a row', () => {
+ const item = createAnnotation()
+ const onView = jest.fn()
+
+ render(
+ = {}): AnnotationItem => ({
+ id: overrides.id ?? 'annotation-id',
+ question: overrides.question ?? 'question',
+ answer: overrides.answer ?? 'answer',
+ created_at: overrides.created_at ?? 1700000000,
+ hit_count: overrides.hit_count ?? 0,
+})
+
+const createHitHistoryItem = (overrides: Partial = {}): HitHistoryItem => ({
+ id: overrides.id ?? 'hit-id',
+ question: overrides.question ?? 'query',
+ match: overrides.match ?? 'match',
+ response: overrides.response ?? 'response',
+ source: overrides.source ?? 'source',
+ score: overrides.score ?? 0.42,
+ created_at: overrides.created_at ?? 1700000000,
+})
+
+const renderComponent = (props?: Partial>) => {
+ const item = createAnnotationItem()
+ const mergedProps: React.ComponentProps = {
+ appId: 'app-id',
+ isShow: true,
+ onHide: jest.fn(),
+ item,
+ onSave: jest.fn().mockResolvedValue(undefined),
+ onRemove: jest.fn().mockResolvedValue(undefined),
+ ...props,
+ }
+ return {
+ ...render((selector: (value: { userProfile: { email: string; id?: string; name?: string; avatar?: string; avatar_url?: string; is_password_set?: boolean } }) => T) => selector({
+ userProfile: {
+ id: 'current-user',
+ name: 'Current User',
+ email: 'member@example.com',
+ avatar: '',
+ avatar_url: '',
+ is_password_set: true,
+ },
+ }),
+}))
+
+jest.mock('@/service/common', () => ({
+ fetchCurrentWorkspace: jest.fn(),
+ fetchLangGeniusVersion: jest.fn(),
+ fetchUserProfile: jest.fn(),
+ getSystemFeatures: jest.fn(),
+}))
+
+jest.mock('@/service/access-control', () => ({
+ useAppWhiteListSubjects: (...args: unknown[]) => mockUseAppWhiteListSubjects(...args),
+ useSearchForWhiteListCandidates: (...args: unknown[]) => mockUseSearchForWhiteListCandidates(...args),
+ useUpdateAccessMode: () => mockUseUpdateAccessMode(),
+}))
+
+jest.mock('@headlessui/react', () => {
+ const DialogComponent: any = ({ children, className, ...rest }: any) => (
+ = {}): AccessControlGroup => ({
+ id: 'group-1',
+ name: 'Group One',
+ groupSize: 5,
+ ...overrides,
+} as AccessControlGroup)
+
+const createMember = (overrides: Partial = {}): AccessControlAccount => ({
+ id: 'member-1',
+ name: 'Member One',
+ email: 'member@example.com',
+ avatar: '',
+ avatarUrl: '',
+ ...overrides,
+} as AccessControlAccount)
+
+const baseGroup = createGroup()
+const baseMember = createMember()
+const groupSubject: Subject = {
+ subjectId: baseGroup.id,
+ subjectType: SubjectType.GROUP,
+ groupData: baseGroup,
+} as Subject
+const memberSubject: Subject = {
+ subjectId: baseMember.id,
+ subjectType: SubjectType.ACCOUNT,
+ accountData: baseMember,
+} as Subject
+
+const resetAccessControlStore = () => {
+ useAccessControlStore.setState({
+ appId: '',
+ specificGroups: [],
+ specificMembers: [],
+ currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+ selectedGroupsForBreadcrumb: [],
+ })
+}
+
+const resetGlobalStore = () => {
+ useGlobalPublicStore.setState({
+ systemFeatures: defaultSystemFeatures,
+ isGlobalPending: false,
+ })
+}
+
+beforeAll(() => {
+ class MockIntersectionObserver {
+ observe = jest.fn(() => undefined)
+ disconnect = jest.fn(() => undefined)
+ unobserve = jest.fn(() => undefined)
+ }
+ // @ts-expect-error jsdom does not implement IntersectionObserver
+ globalThis.IntersectionObserver = MockIntersectionObserver
+})
+
+beforeEach(() => {
+ jest.clearAllMocks()
+ resetAccessControlStore()
+ resetGlobalStore()
+ mockMutateAsync.mockResolvedValue(undefined)
+ mockUseUpdateAccessMode.mockReturnValue({
+ isPending: false,
+ mutateAsync: mockMutateAsync,
+ })
+ mockUseAppWhiteListSubjects.mockReturnValue({
+ isPending: false,
+ data: {
+ groups: [baseGroup],
+ members: [baseMember],
+ },
+ })
+ mockUseSearchForWhiteListCandidates.mockReturnValue({
+ isLoading: false,
+ isFetchingNextPage: false,
+ fetchNextPage: jest.fn(),
+ data: { pages: [{ currPage: 1, subjects: [groupSubject, memberSubject], hasMore: false }] },
+ })
+})
+
+// AccessControlItem handles selected vs. unselected styling and click state updates
+describe('AccessControlItem', () => {
+ it('should update current menu when selecting a different access type', () => {
+ useAccessControlStore.setState({ currentMenu: AccessMode.PUBLIC })
+ render(
+
+ Organization Only
+ ,
+ )
+
+ const option = screen.getByText('Organization Only').parentElement as HTMLElement
+ expect(option).toHaveClass('cursor-pointer')
+
+ fireEvent.click(option)
+
+ expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.ORGANIZATION)
+ })
+
+ it('should keep current menu when clicking the selected access type', () => {
+ useAccessControlStore.setState({ currentMenu: AccessMode.ORGANIZATION })
+ render(
+
+ Organization Only
+ ,
+ )
+
+ const option = screen.getByText('Organization Only').parentElement as HTMLElement
+ fireEvent.click(option)
+
+ expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.ORGANIZATION)
+ })
+})
+
+// AccessControlDialog renders a headless UI dialog with a manual close control
+describe('AccessControlDialog', () => {
+ it('should render dialog content when visible', () => {
+ render(
+
+ ,
+ )
+
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ expect(screen.getByText('Dialog Content')).toBeInTheDocument()
+ })
+
+ it('should trigger onClose when clicking the close control', async () => {
+ const handleClose = jest.fn()
+ const { container } = render(
+
+ ,
+ )
+
+ const closeButton = container.querySelector('.absolute.right-5.top-5') as HTMLElement
+ fireEvent.click(closeButton)
+
+ await waitFor(() => {
+ expect(handleClose).toHaveBeenCalledTimes(1)
+ })
+ })
+})
+
+// SpecificGroupsOrMembers syncs store state with fetched data and supports removals
+describe('SpecificGroupsOrMembers', () => {
+ it('should render collapsed view when not in specific selection mode', () => {
+ useAccessControlStore.setState({ currentMenu: AccessMode.ORGANIZATION })
+
+ render((null)
useEffect(() => {
- const hasMore = data?.pages?.[0].hasMore ?? false
+ const hasMore = data?.pages?.[0]?.hasMore ?? false
let observer: IntersectionObserver | undefined
if (anchorRef.current) {
observer = new IntersectionObserver((entries) => {
@@ -106,7 +106,7 @@ function SelectedGroupsBreadCrumb() {
setSelectedGroupsForBreadcrumb([])
}, [setSelectedGroupsForBreadcrumb])
return
{childContent}
+ {childContent}
+
+ {content}
+
+ )
+ })
+
+ const Menu = ({ children }: { children: React.ReactNode }) => {
+ const [open, setOpen] = React.useState(false)
+ const value = React.useMemo(() => ({ open, setOpen }), [open])
+ return (
+
+ {children}
+
+ )
+ }
+
+ return {
+ Dialog: ({ open, children, className }: { open?: boolean; children: React.ReactNode; className?: string }) => {
+ if (open === false) return null
+ return (
+
+ {children}
+
+ )
+ },
+ DialogBackdrop: ({ children, className, onClick }: { children?: React.ReactNode; className?: string; onClick?: () => void }) => (
+
+ {children}
+
+ ),
+ DialogPanel: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ DialogTitle: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ Popover,
+ PopoverButton,
+ PopoverPanel,
+ Menu,
+ MenuButton,
+ MenuItems,
+ Transition: ({ show = true, children }: { show?: boolean; children: React.ReactNode }) => (show ? <>{children} : null),
+ TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children},
+ }
+})
+
+let lastCSVDownloaderProps: Record
+ {children}
+
+ )
+})
+
+jest.mock('react-papaparse', () => ({
+ useCSVDownloader: () => ({
+ CSVDownloader: (props: any) => mockCSVDownloader(props),
+ Type: { Link: 'link' },
+ }),
+}))
+
+jest.mock('@/service/annotation', () => ({
+ fetchExportAnnotationList: jest.fn(),
+ clearAllAnnotations: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: () => ({
+ plan: {
+ usage: { annotatedResponse: 0 },
+ total: { annotatedResponse: 10 },
+ },
+ enableBilling: false,
+ }),
+}))
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+type HeaderOptionsProps = ComponentProps{children}
+))
+
+jest.mock('./empty-element', () => () => )
+
+jest.mock('./header-opts', () => (props: any) => (
+
+
+
+))
+
+let latestListProps: any
+
+jest.mock('./list', () => (props: any) => {
+ latestListProps = props
+ if (!props.list.length)
+ return
+ return (
+
+
+
+
+
+ )
+})
+
+jest.mock('./view-annotation-modal', () => (props: any) => {
+ if (!props.isShow)
+ return null
+ return (
+
+
+ )
+})
+
+jest.mock('@/app/components/base/pagination', () => () => )
+jest.mock('@/app/components/base/loading', () => () => )
+jest.mock('@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal', () => (props: any) => props.isShow ? : null)
+jest.mock('@/app/components/billing/annotation-full/modal', () => (props: any) => props.show ? : null)
+
+const mockNotify = Toast.notify as jest.Mock
+const addAnnotationMock = addAnnotation as jest.Mock
+const delAnnotationMock = delAnnotation as jest.Mock
+const delAnnotationsMock = delAnnotations as jest.Mock
+const fetchAnnotationConfigMock = fetchAnnotationConfig as jest.Mock
+const fetchAnnotationListMock = fetchAnnotationList as jest.Mock
+const queryAnnotationJobStatusMock = queryAnnotationJobStatus as jest.Mock
+const useProviderContextMock = useProviderContext as jest.Mock
+
+const appDetail = {
+ id: 'app-id',
+ mode: AppModeEnum.CHAT,
+} as App
+
+const createAnnotation = (overrides: Partial{props.item.question}
+
+
+
+
+ ),
+ EditItemType,
+ }
+})
+
+const fetchHitHistoryListMock = fetchHitHistoryList as jest.Mock
+
+const createAnnotationItem = (overrides: Partial{content}
+
+ {children}
+ )
+ DialogComponent.Panel = ({ children, className, ...rest }: any) => (
+ {children}
+ )
+ const DialogTitle = ({ children, className, ...rest }: any) => (
+ {children}
+ )
+ const DialogDescription = ({ children, className, ...rest }: any) => (
+ {children}
+ )
+ const TransitionChild = ({ children }: any) => (
+ <>{typeof children === 'function' ? children({}) : children}
+ )
+ const Transition = ({ show = true, children }: any) => (
+ show ? <>{typeof children === 'function' ? children({}) : children} : null
+ )
+ Transition.Child = TransitionChild
+ return {
+ Dialog: DialogComponent,
+ Transition,
+ DialogTitle,
+ Description: DialogDescription,
+ }
+})
+
+jest.mock('ahooks', () => {
+ const actual = jest.requireActual('ahooks')
+ return {
+ ...actual,
+ useDebounce: (value: unknown) => value,
+ }
+})
+
+const createGroup = (overrides: PartialDialog Content
+ Dialog Content
+
- 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}
+ 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}
{selectedGroupsForBreadcrumb.map((group, index) => {
return
/
@@ -198,7 +198,7 @@ type BaseItemProps = {
children: React.ReactNode
}
function BaseItem({ children, className }: BaseItemProps) {
- return
+ return & {
icon?: React.ReactNode
@@ -19,11 +19,9 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
href={disabled ? undefined : link}
target='_blank'
rel='noreferrer'
- className={classNames(
- 'flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
+ className={cn('flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent',
- className,
- )}
+ className)}
onClick={handleClick}
{...props}
>
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index ec5ab96d76..c9ebfefbe5 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -1,7 +1,7 @@
'use client'
import type { FC, ReactNode } from 'react'
import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
export type IFeaturePanelProps = {
className?: string
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index aba35cded2..db19d2976e 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -6,7 +6,7 @@ import {
RiAddLine,
RiEditLine,
} from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import { noop } from 'lodash-es'
export type IOperationBtnProps = {
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
new file mode 100644
index 0000000000..d625e9fb72
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import CannotQueryDataset from './cannot-query-dataset'
+
+describe('CannotQueryDataset WarningMask', () => {
+ test('should render dataset warning copy and action button', () => {
+ const onConfirm = jest.fn()
+ render( = ({
>
!readonly && setOpen(v => !v)} className='w-full'>
{children}
}
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 2535de6654..154bacc361 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,6 +1,6 @@
import type { HTMLProps, PropsWithChildren } from 'react'
import { RiArrowRightUpLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
export type SuggestedActionProps = PropsWithChildren
@@ -69,7 +68,7 @@ const TypeSelector: FC = ({
{items.map((item: Item) => (
setIsHideChangedTip(true)}
+ />
) => {
+ const onChange = jest.fn()
+ const defaultProps: IConfigStringProps = {
+ value: 5,
+ maxLength: 10,
+ modelId: 'model-id',
+ onChange,
+ }
+
+ render( = {}) => {
+ const mergedFile: FileUpload = {
+ ...defaultFile,
+ ...fileOverrides,
+ image: {
+ ...defaultFile.image,
+ ...fileOverrides.image,
+ },
+ }
+ featureStoreState = {
+ features: {
+ file: mergedFile,
+ },
+ setFeatures: jest.fn(),
+ showFeaturesModal: false,
+ setShowFeaturesModal: jest.fn(),
+ }
+ setFeaturesMock = featureStoreState.setFeatures as jest.Mock
+ mockUseFeaturesStore.mockReturnValue({
+ getState: () => featureStoreState,
+ })
+ mockUseFeatures.mockImplementation(selector => selector(featureStoreState))
+}
+
+const getLatestFileConfig = () => {
+ expect(setFeaturesMock).toHaveBeenCalled()
+ const latestFeatures = setFeaturesMock.mock.calls[setFeaturesMock.mock.calls.length - 1][0] as { file: FileUpload }
+ return latestFeatures.file
+}
+
+beforeEach(() => {
+ jest.clearAllMocks()
+ mockUseContext.mockReturnValue({
+ isShowVisionConfig: true,
+ isAllowVideoUpload: false,
+ })
+ setupFeatureStore()
+})
+
+// ConfigVision handles toggling file upload types + visibility rules.
+describe('ConfigVision', () => {
+ it('should not render when vision configuration is hidden', () => {
+ mockUseContext.mockReturnValue({
+ isShowVisionConfig: false,
+ isAllowVideoUpload: false,
+ })
+
+ render( = {}): AgentConfig => ({
+ enabled: true,
+ strategy: AgentStrategy.react,
+ max_iteration: 3,
+ tools: [],
+ ...overrides,
+})
+
+const setup = (overrides: Partial> = {}) => {
+ const props: React.ComponentProps = {
+ isFunctionCall: false,
+ isChatModel: true,
+ onAgentSettingChange: jest.fn(),
+ agentConfig: createAgentConfig(),
+ ...overrides,
+ }
+
+ const user = userEvent.setup()
+ render(>) => {
+ const onCancel = jest.fn()
+ const onSave = jest.fn()
+ const utils = render(
+ icon}
+ name="Panel name"
+ description="More info"
+ children={
+let singleToolSelection: ToolDefaultValue | null = null
+let multipleToolSelection: ToolDefaultValue[] = []
+const ToolPickerMock = (props: ToolPickerProps) => (
+
+let latestSettingPanelProps: SettingBuiltInToolProps | null = null
+let settingPanelSavePayload: Record = {}
+let settingPanelCredentialId = 'credential-from-panel'
+const SettingBuiltInToolMock = (props: SettingBuiltInToolProps) => {
+ latestSettingPanelProps = props
+ return (
+ ): ToolParameter => ({
+ name: 'api_key',
+ label: {
+ en_US: 'API Key',
+ zh_Hans: 'API Key',
+ },
+ human_description: {
+ en_US: 'desc',
+ zh_Hans: 'desc',
+ },
+ type: 'string',
+ form: 'config',
+ llm_description: '',
+ required: true,
+ multiple: false,
+ default: 'default',
+ ...overrides,
+})
+
+const createToolDefinition = (overrides?: Partial): Tool => ({
+ name: 'search',
+ author: 'tester',
+ label: {
+ en_US: 'Search',
+ zh_Hans: 'Search',
+ },
+ description: {
+ en_US: 'desc',
+ zh_Hans: 'desc',
+ },
+ parameters: [createToolParameter()],
+ labels: [],
+ output_schema: {},
+ ...overrides,
+})
+
+const createCollection = (overrides?: Partial): ToolWithProvider => ({
+ id: overrides?.id || 'provider-1',
+ name: overrides?.name || 'vendor/provider-1',
+ author: 'tester',
+ description: {
+ en_US: 'desc',
+ zh_Hans: 'desc',
+ },
+ icon: 'https://example.com/icon.png',
+ label: {
+ en_US: 'Provider Label',
+ zh_Hans: 'Provider Label',
+ },
+ type: overrides?.type || CollectionType.builtIn,
+ team_credentials: {},
+ is_team_authorization: true,
+ allow_delete: true,
+ labels: [],
+ tools: overrides?.tools || [createToolDefinition()],
+ meta: {
+ version: '1.0.0',
+ },
+ ...overrides,
+})
+
+const createAgentTool = (overrides?: Partial): AgentTool => ({
+ provider_id: overrides?.provider_id || 'provider-1',
+ provider_type: overrides?.provider_type || CollectionType.builtIn,
+ provider_name: overrides?.provider_name || 'vendor/provider-1',
+ tool_name: overrides?.tool_name || 'search',
+ tool_label: overrides?.tool_label || 'Search Tool',
+ tool_parameters: overrides?.tool_parameters || { api_key: 'key' },
+ enabled: overrides?.enabled ?? true,
+ ...overrides,
+})
+
+const createModelConfig = (tools: AgentTool[]): ModelConfig => ({
+ provider: 'OPENAI',
+ model_id: 'gpt-3.5-turbo',
+ mode: ModelModeType.chat,
+ configs: {
+ prompt_template: '',
+ prompt_variables: [],
+ },
+ chat_prompt_config: DEFAULT_CHAT_PROMPT_CONFIG,
+ completion_prompt_config: DEFAULT_COMPLETION_PROMPT_CONFIG,
+ opening_statement: '',
+ more_like_this: null,
+ suggested_questions: [],
+ suggested_questions_after_answer: null,
+ speech_to_text: null,
+ text_to_speech: null,
+ file_upload: null,
+ retriever_resource: null,
+ sensitive_word_avoidance: null,
+ annotation_reply: null,
+ external_data_tools: [],
+ system_parameters: {
+ audio_file_size_limit: 0,
+ file_size_limit: 0,
+ image_file_size_limit: 0,
+ video_file_size_limit: 0,
+ workflow_file_upload_limit: 0,
+ },
+ dataSets: [],
+ agentConfig: {
+ ...DEFAULT_AGENT_SETTING,
+ tools,
+ },
+})
+
+const renderAgentTools = (initialTools?: AgentTool[]) => {
+ const tools = initialTools ?? [createAgentTool()]
+ const modelConfigRef = { current: createModelConfig(tools) }
+ const Wrapper = ({ children }: PropsWithChildren) => {
+ const [modelConfig, setModelConfig] = useState(modelConfigRef.current)
+ useEffect(() => {
+ modelConfigRef.current = modelConfig
+ }, [modelConfig])
+ const value = useMemo(() => ({
+ modelConfig,
+ setModelConfig,
+ }), [modelConfig])
+ return (
+
+ {children}
+
+ )
+ }
+ const renderResult = render(
+
+ ,
+ )
+ return {
+ ...renderResult,
+ getModelConfig: () => modelConfigRef.current,
+ }
+}
+
+const hoverInfoIcon = async (rowIndex = 0) => {
+ const rows = document.querySelectorAll('.group')
+ const infoTrigger = rows.item(rowIndex)?.querySelector('[data-testid="tool-info-tooltip"]')
+ if (!infoTrigger)
+ throw new Error('Info trigger not found')
+ await userEvent.hover(infoTrigger as HTMLElement)
+}
+
+describe('AgentTools', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ builtInTools = [
+ createCollection(),
+ createCollection({
+ id: 'provider-2',
+ name: 'vendor/provider-2',
+ tools: [createToolDefinition({
+ name: 'translate',
+ label: {
+ en_US: 'Translate',
+ zh_Hans: 'Translate',
+ },
+ })],
+ }),
+ createCollection({
+ id: 'provider-3',
+ name: 'vendor/provider-3',
+ tools: [createToolDefinition({
+ name: 'summarize',
+ label: {
+ en_US: 'Summary',
+ zh_Hans: 'Summary',
+ },
+ })],
+ }),
+ ]
+ customTools = []
+ workflowTools = []
+ mcpTools = []
+ singleToolSelection = {
+ provider_id: 'provider-3',
+ provider_type: CollectionType.builtIn,
+ provider_name: 'vendor/provider-3',
+ tool_name: 'summarize',
+ tool_label: 'Summary Tool',
+ tool_description: 'desc',
+ title: 'Summary Tool',
+ is_team_authorization: true,
+ params: { api_key: 'picker-value' },
+ paramSchemas: [],
+ output_schema: {},
+ }
+ multipleToolSelection = [
+ {
+ provider_id: 'provider-2',
+ provider_type: CollectionType.builtIn,
+ provider_name: 'vendor/provider-2',
+ tool_name: 'translate',
+ tool_label: 'Translate Tool',
+ tool_description: 'desc',
+ title: 'Translate Tool',
+ is_team_authorization: true,
+ params: { api_key: 'multi-a' },
+ paramSchemas: [],
+ output_schema: {},
+ },
+ {
+ provider_id: 'provider-3',
+ provider_type: CollectionType.builtIn,
+ provider_name: 'vendor/provider-3',
+ tool_name: 'summarize',
+ tool_label: 'Summary Tool',
+ tool_description: 'desc',
+ title: 'Summary Tool',
+ is_team_authorization: true,
+ params: { api_key: 'multi-b' },
+ paramSchemas: [],
+ output_schema: {},
+ },
+ ]
+ latestSettingPanelProps = null
+ settingPanelSavePayload = {}
+ settingPanelCredentialId = 'credential-from-panel'
+ pluginInstallHandler = null
+ })
+
+ test('should show enabled count and provider information', () => {
+ renderAgentTools([
+ createAgentTool(),
+ createAgentTool({
+ provider_id: 'provider-2',
+ provider_name: 'vendor/provider-2',
+ tool_name: 'translate',
+ tool_label: 'Translate Tool',
+ enabled: false,
+ }),
+ ])
+
+ const enabledText = screen.getByText(content => content.includes('appDebug.agent.tools.enabled'))
+ expect(enabledText).toHaveTextContent('1/2')
+ expect(screen.getByText('provider-1')).toBeInTheDocument()
+ expect(screen.getByText('Translate Tool')).toBeInTheDocument()
+ })
+
+ test('should copy tool name from tooltip action', async () => {
+ renderAgentTools()
+
+ await hoverInfoIcon()
+ const copyButton = await screen.findByText('tools.copyToolName')
+ await userEvent.click(copyButton)
+ expect(copyMock).toHaveBeenCalledWith('search')
+ })
+
+ test('should toggle tool enabled state via switch', async () => {
+ const { getModelConfig } = renderAgentTools()
+
+ const switchButton = screen.getByRole('switch')
+ await userEvent.click(switchButton)
+
+ await waitFor(() => {
+ const tools = getModelConfig().agentConfig.tools as Array<{ tool_name?: string; enabled?: boolean }>
+ const toggledTool = tools.find(tool => tool.tool_name === 'search')
+ expect(toggledTool?.enabled).toBe(false)
+ })
+ expect(formattingDispatcherMock).toHaveBeenCalled()
+ })
+
+ test('should remove tool when delete action is clicked', async () => {
+ const { getModelConfig } = renderAgentTools()
+ const deleteButton = screen.getByTestId('delete-removed-tool')
+ if (!deleteButton)
+ throw new Error('Delete button not found')
+ await userEvent.click(deleteButton)
+ await waitFor(() => {
+ expect(getModelConfig().agentConfig.tools).toHaveLength(0)
+ })
+ expect(formattingDispatcherMock).toHaveBeenCalled()
+ })
+
+ test('should add a tool when ToolPicker selects one', async () => {
+ const { getModelConfig } = renderAgentTools([])
+ const addSingleButton = screen.getByRole('button', { name: 'pick-single' })
+ await userEvent.click(addSingleButton)
+
+ await waitFor(() => {
+ expect(screen.getByText('Summary Tool')).toBeInTheDocument()
+ })
+ expect(getModelConfig().agentConfig.tools).toHaveLength(1)
+ })
+
+ test('should append multiple selected tools at once', async () => {
+ const { getModelConfig } = renderAgentTools([])
+ await userEvent.click(screen.getByRole('button', { name: 'pick-multiple' }))
+
+ await waitFor(() => {
+ expect(screen.getByText('Translate Tool')).toBeInTheDocument()
+ expect(screen.getAllByText('Summary Tool')).toHaveLength(1)
+ })
+ expect(getModelConfig().agentConfig.tools).toHaveLength(2)
+ })
+
+ test('should open settings panel for not authorized tool', async () => {
+ renderAgentTools([
+ createAgentTool({
+ notAuthor: true,
+ }),
+ ])
+
+ const notAuthorizedButton = screen.getByRole('button', { name: /tools.notAuthorized/ })
+ await userEvent.click(notAuthorizedButton)
+ expect(screen.getByTestId('setting-built-in-tool')).toBeInTheDocument()
+ expect(latestSettingPanelProps?.toolName).toBe('search')
+ })
+
+ test('should persist tool parameters when SettingBuiltInTool saves values', async () => {
+ const { getModelConfig } = renderAgentTools([
+ createAgentTool({
+ notAuthor: true,
+ }),
+ ])
+ await userEvent.click(screen.getByRole('button', { name: /tools.notAuthorized/ }))
+ settingPanelSavePayload = { api_key: 'updated' }
+ await userEvent.click(screen.getByRole('button', { name: 'save-from-panel' }))
+
+ await waitFor(() => {
+ expect((getModelConfig().agentConfig.tools[0] as { tool_parameters: Record }).tool_parameters).toEqual({ api_key: 'updated' })
+ })
+ })
+
+ test('should update credential id when authorization selection changes', async () => {
+ const { getModelConfig } = renderAgentTools([
+ createAgentTool({
+ notAuthor: true,
+ }),
+ ])
+ await userEvent.click(screen.getByRole('button', { name: /tools.notAuthorized/ }))
+ settingPanelCredentialId = 'credential-123'
+ await userEvent.click(screen.getByRole('button', { name: 'auth-from-panel' }))
+
+ await waitFor(() => {
+ expect((getModelConfig().agentConfig.tools[0] as { credential_id: string }).credential_id).toBe('credential-123')
+ })
+ expect(formattingDispatcherMock).toHaveBeenCalled()
+ })
+
+ test('should reinstate deleted tools after plugin install success event', async () => {
+ const { getModelConfig } = renderAgentTools([
+ createAgentTool({
+ provider_id: 'provider-1',
+ provider_name: 'vendor/provider-1',
+ tool_name: 'search',
+ tool_label: 'Search Tool',
+ isDeleted: true,
+ }),
+ ])
+ if (!pluginInstallHandler)
+ throw new Error('Plugin handler not registered')
+
+ await act(async () => {
+ pluginInstallHandler?.(['provider-1'])
+ })
+
+ await waitFor(() => {
+ expect((getModelConfig().agentConfig.tools[0] as { isDeleted: boolean }).isDeleted).toBe(false)
+ })
+ })
+})
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 5716bfd92d..8dfa2f194b 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -25,7 +25,7 @@ import { MAX_TOOLS_NUM } from '@/config'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import Tooltip from '@/app/components/base/tooltip'
import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
import { canFindTool } from '@/utils'
@@ -217,7 +217,7 @@ const AgentTools: FC = () => {
}
>
+ onChange: (val: Record) => void
+}
+let nextFormValue: Record = {}
+const FormMock = ({ value, onChange }: MockFormProps) => {
+ return (
+ ): ToolParameter => ({
+ name: 'settingParam',
+ label: {
+ en_US: 'Setting Param',
+ zh_Hans: 'Setting Param',
+ },
+ human_description: {
+ en_US: 'desc',
+ zh_Hans: 'desc',
+ },
+ type: 'string',
+ form: 'config',
+ llm_description: '',
+ required: true,
+ multiple: false,
+ default: '',
+ ...overrides,
+})
+
+const createTool = (overrides?: Partial): Tool => ({
+ name: 'search',
+ author: 'tester',
+ label: {
+ en_US: 'Search Tool',
+ zh_Hans: 'Search Tool',
+ },
+ description: {
+ en_US: 'tool description',
+ zh_Hans: 'tool description',
+ },
+ parameters: [
+ createParameter({
+ name: 'infoParam',
+ label: {
+ en_US: 'Info Param',
+ zh_Hans: 'Info Param',
+ },
+ form: 'llm',
+ required: false,
+ }),
+ createParameter(),
+ ],
+ labels: [],
+ output_schema: {},
+ ...overrides,
+})
+
+const baseCollection = {
+ id: 'provider-1',
+ name: 'vendor/provider-1',
+ author: 'tester',
+ description: {
+ en_US: 'desc',
+ zh_Hans: 'desc',
+ },
+ icon: 'https://example.com/icon.png',
+ label: {
+ en_US: 'Provider Label',
+ zh_Hans: 'Provider Label',
+ },
+ type: CollectionType.builtIn,
+ team_credentials: {},
+ is_team_authorization: true,
+ allow_delete: true,
+ labels: [],
+ tools: [createTool()],
+}
+
+const renderComponent = (props?: Partial>) => {
+ const onHide = jest.fn()
+ const onSave = jest.fn()
+ const onAuthorizationItemClick = jest.fn()
+ const utils = render(
+
+ ,
+ )
+ return {
+ ...utils,
+ onHide,
+ onSave,
+ onAuthorizationItemClick,
+ }
+}
+
+describe('SettingBuiltInTool', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ nextFormValue = {}
+ pluginAuthClickValue = 'credential-from-plugin'
+ })
+
+ test('should fetch tool list when collection has no tools', async () => {
+ fetchModelToolList.mockResolvedValueOnce([createTool()])
+ renderComponent({
+ collection: {
+ ...baseCollection,
+ tools: [],
+ },
+ })
+
+ await waitFor(() => {
+ expect(fetchModelToolList).toHaveBeenCalledTimes(1)
+ expect(fetchModelToolList).toHaveBeenCalledWith('vendor/provider-1')
+ })
+ expect(await screen.findByText('Search Tool')).toBeInTheDocument()
+ })
+
+ test('should switch between info and setting tabs', async () => {
+ renderComponent()
+ await waitFor(() => {
+ expect(screen.getByTestId('mock-form')).toBeInTheDocument()
+ })
+
+ await userEvent.click(screen.getByText('tools.setBuiltInTools.parameters'))
+ expect(screen.getByText('Info Param')).toBeInTheDocument()
+ await userEvent.click(screen.getByText('tools.setBuiltInTools.setting'))
+ expect(screen.getByTestId('mock-form')).toBeInTheDocument()
+ })
+
+ test('should call onSave with updated values when save button clicked', async () => {
+ const { onSave } = renderComponent()
+ await waitFor(() => expect(screen.getByTestId('mock-form')).toBeInTheDocument())
+ nextFormValue = { settingParam: 'updated' }
+ await userEvent.click(screen.getByRole('button', { name: 'update-form' }))
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+ expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ settingParam: 'updated' }))
+ })
+
+ test('should keep save disabled until required field provided', async () => {
+ renderComponent({
+ setting: {},
+ })
+ await waitFor(() => expect(screen.getByTestId('mock-form')).toBeInTheDocument())
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ expect(saveButton).toBeDisabled()
+ nextFormValue = { settingParam: 'filled' }
+ await userEvent.click(screen.getByRole('button', { name: 'update-form' }))
+ expect(saveButton).not.toBeDisabled()
+ })
+
+ test('should call onHide when cancel button is pressed', async () => {
+ const { onHide } = renderComponent()
+ await waitFor(() => expect(screen.getByTestId('mock-form')).toBeInTheDocument())
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+ expect(onHide).toHaveBeenCalled()
+ })
+
+ test('should trigger authorization callback from plugin auth section', async () => {
+ const { onAuthorizationItemClick } = renderComponent()
+ await userEvent.click(screen.getByRole('button', { name: 'choose-plugin-credential' }))
+ expect(onAuthorizationItemClick).toHaveBeenCalledWith('credential-from-plugin')
+ })
+
+ test('should call onHide when back button is clicked', async () => {
+ const { onHide } = renderComponent({
+ showBackButton: true,
+ })
+ await userEvent.click(screen.getByText('plugin.detailPanel.operation.back'))
+ expect(onHide).toHaveBeenCalled()
+ })
+
+ test('should load workflow tools when workflow collection is provided', async () => {
+ fetchWorkflowToolList.mockResolvedValueOnce([createTool({
+ name: 'workflow-tool',
+ })])
+ renderComponent({
+ collection: {
+ ...baseCollection,
+ type: CollectionType.workflow,
+ tools: [],
+ id: 'workflow-1',
+ } as any,
+ isBuiltIn: false,
+ isModel: false,
+ })
+
+ await waitFor(() => {
+ expect(fetchWorkflowToolList).toHaveBeenCalledWith('workflow-1')
+ })
+ })
+})
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index c5947495db..0627666b4c 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -22,7 +22,7 @@ import { CollectionType } from '@/app/components/tools/types'
import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
import I18n from '@/context/i18n'
import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import {
AuthCategory,
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
index 71a9304d0c..78d7eef029 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -4,7 +4,7 @@ import React from 'react'
import copy from 'copy-to-clipboard'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import {
Copy,
CopyCheck,
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx
new file mode 100644
index 0000000000..cda24ea045
--- /dev/null
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.spec.tsx
@@ -0,0 +1,862 @@
+import React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AssistantTypePicker from './index'
+import type { AgentConfig } from '@/models/debug'
+import { AgentStrategy } from '@/types/app'
+
+// Test utilities
+const defaultAgentConfig: AgentConfig = {
+ enabled: true,
+ max_iteration: 3,
+ strategy: AgentStrategy.functionCall,
+ tools: [],
+}
+
+const defaultProps = {
+ value: 'chat',
+ disabled: false,
+ onChange: jest.fn(),
+ isFunctionCall: true,
+ isChatModel: true,
+ agentConfig: defaultAgentConfig,
+ onAgentSettingChange: jest.fn(),
+}
+
+const renderComponent = (props: Partial> = {}) => {
+ const mergedProps = { ...defaultProps, ...props }
+ return render((() => mockFeatureStoreState),
+}
+
+const setupFeatureStore = (allowedTypes: SupportUploadFileTypes[] = []) => {
+ mockSetFeatures = jest.fn()
+ mockFeatureStoreState = {
+ features: {
+ file: {
+ allowed_file_types: allowedTypes,
+ enabled: allowedTypes.length > 0,
+ },
+ },
+ setFeatures: mockSetFeatures,
+ showFeaturesModal: false,
+ setShowFeaturesModal: jest.fn(),
+ }
+ mockStore.getState.mockImplementation(() => mockFeatureStoreState)
+ mockUseFeaturesStore.mockReturnValue(mockStore)
+ mockUseFeatures.mockImplementation(selector => selector(mockFeatureStoreState))
+}
+
+const renderConfigAudio = (options: SetupOptions = {}) => {
+ const {
+ isVisible = true,
+ allowedTypes = [],
+ } = options
+ setupFeatureStore(allowedTypes)
+ mockUseContext.mockReturnValue({
+ isShowAudioConfig: isVisible,
+ })
+ const user = userEvent.setup()
+ render((() => mockFeatureStoreState),
+}
+
+const setupFeatureStore = (allowedTypes: SupportUploadFileTypes[] = []) => {
+ mockSetFeatures = jest.fn()
+ mockFeatureStoreState = {
+ features: {
+ file: {
+ allowed_file_types: allowedTypes,
+ enabled: allowedTypes.length > 0,
+ },
+ },
+ setFeatures: mockSetFeatures,
+ showFeaturesModal: false,
+ setShowFeaturesModal: jest.fn(),
+ }
+ mockStore.getState.mockImplementation(() => mockFeatureStoreState)
+ mockUseFeaturesStore.mockReturnValue(mockStore)
+ mockUseFeatures.mockImplementation(selector => selector(mockFeatureStoreState))
+}
+
+const renderConfigDocument = (options: SetupOptions = {}) => {
+ const {
+ isVisible = true,
+ allowedTypes = [],
+ } = options
+ setupFeatureStore(allowedTypes)
+ mockUseContext.mockReturnValue({
+ isShowDocumentConfig: isVisible,
+ })
+ const user = userEvent.setup()
+ render( = {}): PromptVariable => ({
+ key: 'variable',
+ name: 'Variable',
+ type: 'string',
+ ...overrides,
+})
+
+const createModelConfig = (overrides: Partial = {}): ModelConfig => ({
+ provider: 'openai',
+ model_id: 'gpt-4',
+ mode: ModelModeType.chat,
+ configs: {
+ prompt_template: 'Hello {{variable}}',
+ prompt_variables: [createPromptVariable({ key: 'existing' })],
+ },
+ chat_prompt_config: null,
+ completion_prompt_config: null,
+ opening_statement: null,
+ more_like_this: null,
+ suggested_questions: null,
+ suggested_questions_after_answer: null,
+ speech_to_text: null,
+ text_to_speech: null,
+ file_upload: null,
+ retriever_resource: null,
+ sensitive_word_avoidance: null,
+ annotation_reply: null,
+ external_data_tools: null,
+ system_parameters: {
+ audio_file_size_limit: 1,
+ file_size_limit: 1,
+ image_file_size_limit: 1,
+ video_file_size_limit: 1,
+ workflow_file_upload_limit: 1,
+ },
+ dataSets: [],
+ agentConfig: {
+ enabled: false,
+ strategy: AgentStrategy.react,
+ max_iteration: 1,
+ tools: [] as ToolItem[],
+ },
+ ...overrides,
+})
+
+const createContextValue = (overrides: Partial = {}): MockContext => ({
+ mode: AppModeEnum.CHAT,
+ isAdvancedMode: false,
+ modelModeType: ModelModeType.chat,
+ isAgent: false,
+ hasSetBlockStatus: {
+ context: false,
+ history: true,
+ query: false,
+ },
+ showHistoryModal: jest.fn(),
+ modelConfig: createModelConfig(),
+ setModelConfig: jest.fn(),
+ setPrevPromptConfig: jest.fn(),
+ ...overrides,
+})
+
+const mockUseContext = useContextSelector.useContext as jest.Mock
+
+const renderConfig = (contextOverrides: Partial = {}) => {
+ const contextValue = createContextValue(contextOverrides)
+ mockUseContext.mockReturnValue(contextValue)
+ return {
+ contextValue,
+ ...render(
+
+const baseRetrievalConfig: RetrievalConfig = {
+ search_method: RETRIEVE_METHOD.semantic,
+ reranking_enable: false,
+ reranking_model: {
+ reranking_provider_name: 'provider',
+ reranking_model_name: 'rerank-model',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0,
+}
+
+const defaultIndexingTechnique: IndexingType = 'high_quality' as IndexingType
+
+const createDataset = (overrides: Partial = {}): DataSet => {
+ const {
+ retrieval_model,
+ retrieval_model_dict,
+ icon_info,
+ ...restOverrides
+ } = overrides
+
+ const resolvedRetrievalModelDict = {
+ ...baseRetrievalConfig,
+ ...retrieval_model_dict,
+ }
+ const resolvedRetrievalModel = {
+ ...baseRetrievalConfig,
+ ...(retrieval_model ?? retrieval_model_dict),
+ }
+
+ const defaultIconInfo = {
+ icon: '📘',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: '',
+ }
+
+ const resolvedIconInfo = ('icon_info' in overrides)
+ ? icon_info
+ : defaultIconInfo
+
+ return {
+ id: 'dataset-id',
+ name: 'Dataset Name',
+ indexing_status: 'completed',
+ icon_info: resolvedIconInfo as DataSet['icon_info'],
+ description: 'A test dataset',
+ permission: DatasetPermission.onlyMe,
+ data_source_type: DataSourceType.FILE,
+ indexing_technique: defaultIndexingTechnique,
+ author_name: 'author',
+ created_by: 'creator',
+ updated_by: 'updater',
+ updated_at: 0,
+ app_count: 0,
+ doc_form: ChunkingMode.text,
+ document_count: 0,
+ total_document_count: 0,
+ total_available_documents: 0,
+ word_count: 0,
+ provider: 'dify',
+ embedding_model: 'text-embedding',
+ embedding_model_provider: 'openai',
+ embedding_available: true,
+ retrieval_model_dict: resolvedRetrievalModelDict,
+ retrieval_model: resolvedRetrievalModel,
+ tags: [],
+ external_knowledge_info: {
+ external_knowledge_id: 'external-id',
+ external_knowledge_api_id: 'api-id',
+ external_knowledge_api_name: 'api-name',
+ external_knowledge_api_endpoint: 'https://endpoint',
+ },
+ external_retrieval_model: {
+ top_k: 2,
+ score_threshold: 0.5,
+ score_threshold_enabled: true,
+ },
+ built_in_field_enabled: true,
+ doc_metadata: [],
+ keyword_number: 3,
+ pipeline_id: 'pipeline-id',
+ is_published: true,
+ runtime_mode: 'general',
+ enable_api: true,
+ is_multimodal: false,
+ ...restOverrides,
+ }
+}
+
+const renderItem = (config: DataSet, props?: Partial>) => {
+ const onSave = jest.fn()
+ const onRemove = jest.fn()
+
+ render(
+ & { children?: React.ReactNode; asChild?: boolean }
+type PortalToFollowElemContentProps = React.HTMLAttributes & { children?: React.ReactNode }
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+ const PortalContext = React.createContext({ open: false })
+
+ const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
+ return (
+
+
+ )
+ }
+
+ const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
+ const { open } = React.useContext(PortalContext)
+ if (!open) return null
+ return (
+ )
+ }
+ return (
+ & { children?: React.ReactNode; asChild?: boolean }
+type PortalToFollowElemContentProps = React.HTMLAttributes & { children?: React.ReactNode }
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+ const PortalContext = React.createContext({ open: false })
+
+ const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
+ return (
+
+
+ )
+ }
+
+ const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
+ const { open } = React.useContext(PortalContext)
+ if (!open) return null
+ return (
+ )
+ }
+ return (
+ = {}): DataSet => {
+ const defaultDataset: DataSet = {
+ id: 'dataset-1',
+ name: 'Test Dataset',
+ indexing_status: 'completed' as any,
+ icon_info: {
+ icon: '📘',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: '',
+ },
+ description: 'Test dataset description',
+ permission: DatasetPermission.onlyMe,
+ data_source_type: DataSourceType.FILE,
+ indexing_technique: 'high_quality' as any,
+ author_name: 'Test Author',
+ created_by: 'user-123',
+ updated_by: 'user-123',
+ updated_at: Date.now(),
+ app_count: 0,
+ doc_form: 'text' as any,
+ document_count: 10,
+ total_document_count: 10,
+ total_available_documents: 10,
+ word_count: 1000,
+ provider: 'dify',
+ embedding_model: 'text-embedding-ada-002',
+ embedding_model_provider: 'openai',
+ embedding_available: true,
+ retrieval_model_dict: {
+ search_method: 'semantic_search' as any,
+ reranking_enable: false,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0.7,
+ },
+ retrieval_model: {
+ search_method: 'semantic_search' as any,
+ reranking_enable: false,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0.7,
+ },
+ tags: [],
+ external_knowledge_info: {
+ external_knowledge_id: '',
+ external_knowledge_api_id: '',
+ external_knowledge_api_name: '',
+ external_knowledge_api_endpoint: '',
+ },
+ external_retrieval_model: {
+ top_k: 2,
+ score_threshold: 0.5,
+ score_threshold_enabled: true,
+ },
+ built_in_field_enabled: true,
+ doc_metadata: [
+ { name: 'category', type: 'string' } as any,
+ { name: 'priority', type: 'number' } as any,
+ ],
+ keyword_number: 3,
+ pipeline_id: 'pipeline-123',
+ is_published: true,
+ runtime_mode: 'general',
+ enable_api: true,
+ is_multimodal: false,
+ ...overrides,
+ }
+ return defaultDataset
+}
+
+const renderDatasetConfig = (contextOverrides: Partial = {}) => {
+ const useContextSelector = require('use-context-selector').useContext
+ const mergedContext = { ...mockConfigContext, ...contextOverrides }
+ useContextSelector.mockReturnValue(mergedContext)
+
+ return render(
+const mockedUseCurrentProviderAndModel = useCurrentProviderAndModel as jest.MockedFunction
+
+let toastNotifySpy: jest.SpyInstance
+
+const baseRetrievalConfig: RetrievalConfig = {
+ search_method: RETRIEVE_METHOD.semantic,
+ reranking_enable: false,
+ reranking_model: {
+ reranking_provider_name: 'provider',
+ reranking_model_name: 'rerank-model',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0,
+}
+
+const defaultIndexingTechnique: IndexingType = 'high_quality' as IndexingType
+
+const createDataset = (overrides: Partial = {}): DataSet => {
+ const {
+ retrieval_model,
+ retrieval_model_dict,
+ icon_info,
+ ...restOverrides
+ } = overrides
+
+ const resolvedRetrievalModelDict = {
+ ...baseRetrievalConfig,
+ ...retrieval_model_dict,
+ }
+ const resolvedRetrievalModel = {
+ ...baseRetrievalConfig,
+ ...(retrieval_model ?? retrieval_model_dict),
+ }
+
+ const defaultIconInfo = {
+ icon: '📘',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: '',
+ }
+
+ const resolvedIconInfo = ('icon_info' in overrides)
+ ? icon_info
+ : defaultIconInfo
+
+ return {
+ id: 'dataset-id',
+ name: 'Dataset Name',
+ indexing_status: 'completed',
+ icon_info: resolvedIconInfo as DataSet['icon_info'],
+ description: 'A test dataset',
+ permission: DatasetPermission.onlyMe,
+ data_source_type: DataSourceType.FILE,
+ indexing_technique: defaultIndexingTechnique,
+ author_name: 'author',
+ created_by: 'creator',
+ updated_by: 'updater',
+ updated_at: 0,
+ app_count: 0,
+ doc_form: ChunkingMode.text,
+ document_count: 0,
+ total_document_count: 0,
+ total_available_documents: 0,
+ word_count: 0,
+ provider: 'dify',
+ embedding_model: 'text-embedding',
+ embedding_model_provider: 'openai',
+ embedding_available: true,
+ retrieval_model_dict: resolvedRetrievalModelDict,
+ retrieval_model: resolvedRetrievalModel,
+ tags: [],
+ external_knowledge_info: {
+ external_knowledge_id: 'external-id',
+ external_knowledge_api_id: 'api-id',
+ external_knowledge_api_name: 'api-name',
+ external_knowledge_api_endpoint: 'https://endpoint',
+ },
+ external_retrieval_model: {
+ top_k: 2,
+ score_threshold: 0.5,
+ score_threshold_enabled: true,
+ },
+ built_in_field_enabled: true,
+ doc_metadata: [],
+ keyword_number: 3,
+ pipeline_id: 'pipeline-id',
+ is_published: true,
+ runtime_mode: 'general',
+ enable_api: true,
+ is_multimodal: false,
+ ...restOverrides,
+ }
+}
+
+const createDatasetConfigs = (overrides: Partial = {}): DatasetConfigs => {
+ return {
+ retrieval_model: RETRIEVE_TYPE.multiWay,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0,
+ datasets: {
+ datasets: [],
+ },
+ reranking_mode: RerankingModeEnum.WeightedScore,
+ weights: {
+ weight_type: WeightedScoreEnum.Customized,
+ vector_setting: {
+ vector_weight: 0.5,
+ embedding_provider_name: 'openai',
+ embedding_model_name: 'text-embedding',
+ },
+ keyword_setting: {
+ keyword_weight: 0.5,
+ },
+ },
+ reranking_enable: false,
+ ...overrides,
+ }
+}
+
+describe('ConfigContent', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ toastNotifySpy = jest.spyOn(Toast, 'notify').mockImplementation(() => ({}))
+ mockedUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({
+ modelList: [],
+ defaultModel: undefined,
+ currentProvider: undefined,
+ currentModel: undefined,
+ })
+ mockedUseCurrentProviderAndModel.mockReturnValue({
+ currentProvider: undefined,
+ currentModel: undefined,
+ })
+ })
+
+ afterEach(() => {
+ toastNotifySpy.mockRestore()
+ })
+
+ // State management
+ describe('Effects', () => {
+ it('should normalize oneWay retrieval mode to multiWay', async () => {
+ // Arrange
+ const onChange = jest.fn()
+ const datasetConfigs = createDatasetConfigs({ retrieval_model: RETRIEVE_TYPE.oneWay })
+
+ // Act
+ render(()
+ const datasetConfigs = createDatasetConfigs({
+ reranking_mode: RerankingModeEnum.WeightedScore,
+ })
+ const selectedDatasets: DataSet[] = [
+ createDataset({
+ indexing_technique: 'high_quality' as IndexingType,
+ provider: 'dify',
+ embedding_model: 'text-embedding',
+ embedding_model_provider: 'openai',
+ retrieval_model_dict: {
+ ...baseRetrievalConfig,
+ search_method: RETRIEVE_METHOD.semantic,
+ },
+ }),
+ ]
+
+ // Act
+ render(
+ ()
+ const datasetConfigs = createDatasetConfigs({
+ reranking_mode: RerankingModeEnum.WeightedScore,
+ weights: {
+ weight_type: WeightedScoreEnum.Customized,
+ vector_setting: {
+ vector_weight: 0.5,
+ embedding_provider_name: 'openai',
+ embedding_model_name: 'text-embedding',
+ },
+ keyword_setting: {
+ keyword_weight: 0.5,
+ },
+ },
+ })
+ const selectedDatasets: DataSet[] = [
+ createDataset({
+ indexing_technique: 'high_quality' as IndexingType,
+ provider: 'dify',
+ embedding_model: 'text-embedding',
+ embedding_model_provider: 'openai',
+ retrieval_model_dict: {
+ ...baseRetrievalConfig,
+ search_method: RETRIEVE_METHOD.semantic,
+ },
+ }),
+ ]
+
+ // Act
+ render(
+ ()
+ const datasetConfigs = createDatasetConfigs({
+ reranking_mode: RerankingModeEnum.WeightedScore,
+ })
+ const selectedDatasets: DataSet[] = [
+ createDataset({
+ indexing_technique: 'high_quality' as IndexingType,
+ provider: 'dify',
+ embedding_model: 'text-embedding',
+ embedding_model_provider: 'openai',
+ retrieval_model_dict: {
+ ...baseRetrievalConfig,
+ search_method: RETRIEVE_METHOD.semantic,
+ },
+ }),
+ ]
+
+ // Act
+ render(
+ ()
+ const datasetConfigs = createDatasetConfigs({
+ reranking_enable: false,
+ })
+ const selectedDatasets: DataSet[] = [
+ createDataset({
+ indexing_technique: 'economy' as IndexingType,
+ provider: 'dify',
+ embedding_model: 'text-embedding',
+ embedding_model_provider: 'openai',
+ retrieval_model_dict: {
+ ...baseRetrievalConfig,
+ search_method: RETRIEVE_METHOD.semantic,
+ },
+ }),
+ ]
+
+ // Act
+ render(
+
+const mockedUseCurrentProviderAndModel = useCurrentProviderAndModel as jest.MockedFunction
+let toastNotifySpy: jest.SpyInstance
+
+const createDatasetConfigs = (overrides: Partial = {}): DatasetConfigs => {
+ return {
+ retrieval_model: RETRIEVE_TYPE.multiWay,
+ reranking_model: {
+ reranking_provider_name: 'provider',
+ reranking_model_name: 'rerank-model',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0,
+ datasets: {
+ datasets: [],
+ },
+ reranking_enable: false,
+ reranking_mode: RerankingModeEnum.RerankingModel,
+ ...overrides,
+ }
+}
+
+const renderParamsConfig = ({
+ datasetConfigs = createDatasetConfigs(),
+ initialModalOpen = false,
+ disabled,
+}: {
+ datasetConfigs?: DatasetConfigs
+ initialModalOpen?: boolean
+ disabled?: boolean
+} = {}) => {
+ const Wrapper = ({ children }: { children: React.ReactNode }) => {
+ const [datasetConfigsState, setDatasetConfigsState] = React.useState(datasetConfigs)
+ const [modalOpen, setModalOpen] = React.useState(initialModalOpen)
+
+ const contextValue = {
+ datasetConfigs: datasetConfigsState,
+ setDatasetConfigs: (next: DatasetConfigs) => {
+ setDatasetConfigsState(next)
+ },
+ rerankSettingModalOpen: modalOpen,
+ setRerankSettingModalOpen: (open: boolean) => {
+ setModalOpen(open)
+ },
+ } as unknown as React.ComponentProps['value']
+
+ return (
+
+ {children}
+
+ )
+ }
+
+ return render(
+ ()
+ const value = { value: [0.3, 0.7] }
+
+ // Act
+ render(()
+ const value = { value: [1, 0] }
+
+ // Act
+ render(()
+ const value = { value: [0.5, 0.5] }
+ const user = userEvent.setup()
+ render(()
+ const value = { value: [0.5, 0.5] }
+ const user = userEvent.setup()
+ render((selector: (value: { userProfile: { id: string; name: string; email: string; avatar_url: string } }) => T) => selector({
+ userProfile: {
+ id: 'user-1',
+ name: 'User One',
+ email: 'user@example.com',
+ avatar_url: 'avatar.png',
+ },
+ }),
+}))
+
+jest.mock('@/context/modal-context', () => ({
+ useModalContext: () => ({
+ setShowAccountSettingModal: mockSetShowAccountSettingModal,
+ }),
+}))
+
+jest.mock('@/context/i18n', () => ({
+ useDocLink: () => (path: string) => `https://docs${path}`,
+}))
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: () => ({
+ modelProviders: [],
+ textGenerationModelList: [],
+ supportRetrievalMethods: [
+ RETRIEVE_METHOD.semantic,
+ RETRIEVE_METHOD.fullText,
+ RETRIEVE_METHOD.hybrid,
+ RETRIEVE_METHOD.keywordSearch,
+ ],
+ }),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+ __esModule: true,
+ useModelList: (...args: unknown[]) => mockUseModelList(...args),
+ useModelListAndDefaultModel: (...args: unknown[]) => mockUseModelListAndDefaultModel(...args),
+ useModelListAndDefaultModelAndCurrentProviderAndModel: (...args: unknown[]) =>
+ mockUseModelListAndDefaultModelAndCurrentProviderAndModel(...args),
+ useCurrentProviderAndModel: (...args: unknown[]) => mockUseCurrentProviderAndModel(...args),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+ __esModule: true,
+ default: ({ defaultModel }: { defaultModel?: { provider: string; model: string } }) => (
+
+const mockFetchMembers = fetchMembers as jest.MockedFunction
+
+const createRetrievalConfig = (overrides: Partial = {}): RetrievalConfig => ({
+ search_method: RETRIEVE_METHOD.semantic,
+ reranking_enable: false,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 2,
+ score_threshold_enabled: false,
+ score_threshold: 0.5,
+ reranking_mode: RerankingModeEnum.RerankingModel,
+ ...overrides,
+})
+
+const createDataset = (overrides: Partial = {}, retrievalOverrides: Partial = {}): DataSet => {
+ const retrievalConfig = createRetrievalConfig(retrievalOverrides)
+ return {
+ id: 'dataset-id',
+ name: 'Test Dataset',
+ indexing_status: 'completed',
+ icon_info: {
+ icon: 'icon',
+ icon_type: 'emoji',
+ },
+ description: 'Description',
+ permission: DatasetPermission.allTeamMembers,
+ data_source_type: DataSourceType.FILE,
+ indexing_technique: IndexingType.QUALIFIED,
+ author_name: 'Author',
+ created_by: 'creator',
+ updated_by: 'updater',
+ updated_at: 1700000000,
+ app_count: 0,
+ doc_form: ChunkingMode.text,
+ document_count: 0,
+ total_document_count: 0,
+ total_available_documents: 0,
+ word_count: 0,
+ provider: 'internal',
+ embedding_model: 'embed-model',
+ embedding_model_provider: 'embed-provider',
+ embedding_available: true,
+ tags: [],
+ partial_member_list: [],
+ external_knowledge_info: {
+ external_knowledge_id: 'ext-id',
+ external_knowledge_api_id: 'ext-api-id',
+ external_knowledge_api_name: 'External API',
+ external_knowledge_api_endpoint: 'https://api.example.com',
+ },
+ external_retrieval_model: {
+ top_k: 2,
+ score_threshold: 0.5,
+ score_threshold_enabled: false,
+ },
+ built_in_field_enabled: false,
+ doc_metadata: [],
+ keyword_number: 10,
+ pipeline_id: 'pipeline-id',
+ is_published: false,
+ runtime_mode: 'general',
+ enable_api: true,
+ is_multimodal: false,
+ ...overrides,
+ retrieval_model_dict: {
+ ...retrievalConfig,
+ ...overrides.retrieval_model_dict,
+ },
+ retrieval_model: {
+ ...retrievalConfig,
+ ...overrides.retrieval_model,
+ },
+ }
+}
+
+const renderWithProviders = (dataset: DataSet) => {
+ return render(
+
+ ,
+ )
+}
+
+describe('SettingsModal', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ mockIsWorkspaceDatasetOperator = false
+ mockUseModelList.mockImplementation((type: ModelTypeEnum) => {
+ if (type === ModelTypeEnum.rerank) {
+ return {
+ data: [
+ {
+ provider: 'rerank-provider',
+ models: [{ model: 'rerank-model' }],
+ },
+ ],
+ }
+ }
+ return { data: [{ provider: 'embed-provider', models: [{ model: 'embed-model' }] }] }
+ })
+ mockUseModelListAndDefaultModel.mockReturnValue({ modelList: [], defaultModel: null })
+ mockUseModelListAndDefaultModelAndCurrentProviderAndModel.mockReturnValue({ defaultModel: null, currentModel: null })
+ mockUseCurrentProviderAndModel.mockReturnValue({ currentProvider: null, currentModel: null })
+ mockCheckShowMultiModalTip.mockReturnValue(false)
+ mockFetchMembers.mockResolvedValue({
+ accounts: [
+ {
+ id: 'user-1',
+ name: 'User One',
+ email: 'user@example.com',
+ avatar: 'avatar.png',
+ avatar_url: 'avatar.png',
+ status: 'active',
+ role: 'owner',
+ },
+ {
+ id: 'member-2',
+ name: 'Member Two',
+ email: 'member@example.com',
+ avatar: 'avatar.png',
+ avatar_url: 'avatar.png',
+ status: 'active',
+ role: 'editor',
+ },
+ ],
+ })
+ mockUpdateDatasetSetting.mockResolvedValue(createDataset())
+ })
+
+ it('renders dataset details', async () => {
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ expect(screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')).toHaveValue('Test Dataset')
+ expect(screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')).toHaveValue('Description')
+ })
+
+ it('calls onCancel when cancel is clicked', async () => {
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+ expect(mockOnCancel).toHaveBeenCalledTimes(1)
+ })
+
+ it('shows external knowledge info for external datasets', async () => {
+ const dataset = createDataset({
+ provider: 'external',
+ external_knowledge_info: {
+ external_knowledge_id: 'ext-id-123',
+ external_knowledge_api_id: 'ext-api-id-123',
+ external_knowledge_api_name: 'External Knowledge API',
+ external_knowledge_api_endpoint: 'https://api.external.com',
+ },
+ })
+
+ renderWithProviders(dataset)
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ expect(screen.getByText('External Knowledge API')).toBeInTheDocument()
+ expect(screen.getByText('https://api.external.com')).toBeInTheDocument()
+ expect(screen.getByText('ext-id-123')).toBeInTheDocument()
+ })
+
+ it('updates name when user types', async () => {
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
+ await userEvent.clear(nameInput)
+ await userEvent.type(nameInput, 'New Dataset Name')
+
+ expect(nameInput).toHaveValue('New Dataset Name')
+ })
+
+ it('updates description when user types', async () => {
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ const descriptionInput = screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')
+ await userEvent.clear(descriptionInput)
+ await userEvent.type(descriptionInput, 'New description')
+
+ expect(descriptionInput).toHaveValue('New description')
+ })
+
+ it('shows and dismisses retrieval change tip when index method changes', async () => {
+ const dataset = createDataset({ indexing_technique: IndexingType.ECONOMICAL })
+
+ renderWithProviders(dataset)
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ await userEvent.click(screen.getByText('datasetCreation.stepTwo.qualified'))
+
+ expect(await screen.findByText('appDebug.datasetConfig.retrieveChangeTip')).toBeInTheDocument()
+
+ await userEvent.click(screen.getByLabelText('close-retrieval-change-tip'))
+
+ await waitFor(() => {
+ expect(screen.queryByText('appDebug.datasetConfig.retrieveChangeTip')).not.toBeInTheDocument()
+ })
+ })
+
+ it('requires dataset name before saving', async () => {
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
+ await userEvent.clear(nameInput)
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+ type: 'error',
+ message: 'datasetSettings.form.nameError',
+ }))
+ expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
+ })
+
+ it('requires rerank model when reranking is enabled', async () => {
+ mockUseModelList.mockReturnValue({ data: [] })
+ const dataset = createDataset({}, createRetrievalConfig({
+ reranking_enable: true,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ }))
+
+ renderWithProviders(dataset)
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+ type: 'error',
+ message: 'appDebug.datasetConfig.rerankModelRequired',
+ }))
+ expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
+ })
+
+ it('saves internal dataset changes', async () => {
+ const rerankRetrieval = createRetrievalConfig({
+ reranking_enable: true,
+ reranking_model: {
+ reranking_provider_name: 'rerank-provider',
+ reranking_model_name: 'rerank-model',
+ },
+ })
+ const dataset = createDataset({
+ retrieval_model: rerankRetrieval,
+ retrieval_model_dict: rerankRetrieval,
+ })
+
+ renderWithProviders(dataset)
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ const nameInput = screen.getByPlaceholderText('datasetSettings.form.namePlaceholder')
+ await userEvent.clear(nameInput)
+ await userEvent.type(nameInput, 'Updated Internal Dataset')
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ await waitFor(() => expect(mockUpdateDatasetSetting).toHaveBeenCalled())
+
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith(expect.objectContaining({
+ body: expect.objectContaining({
+ name: 'Updated Internal Dataset',
+ permission: DatasetPermission.allTeamMembers,
+ }),
+ }))
+ expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+ type: 'success',
+ message: 'common.actionMsg.modifiedSuccessfully',
+ }))
+ expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
+ name: 'Updated Internal Dataset',
+ retrieval_model_dict: expect.objectContaining({
+ reranking_enable: true,
+ }),
+ }))
+ })
+
+ it('saves external dataset with partial members and updated retrieval params', async () => {
+ const dataset = createDataset({
+ provider: 'external',
+ permission: DatasetPermission.partialMembers,
+ partial_member_list: ['member-2'],
+ external_retrieval_model: {
+ top_k: 5,
+ score_threshold: 0.3,
+ score_threshold_enabled: true,
+ },
+ }, {
+ score_threshold_enabled: true,
+ score_threshold: 0.8,
+ })
+
+ renderWithProviders(dataset)
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ await waitFor(() => expect(mockUpdateDatasetSetting).toHaveBeenCalled())
+
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith(expect.objectContaining({
+ body: expect.objectContaining({
+ permission: DatasetPermission.partialMembers,
+ external_retrieval_model: expect.objectContaining({
+ top_k: 5,
+ }),
+ partial_member_list: [
+ {
+ user_id: 'member-2',
+ role: 'editor',
+ },
+ ],
+ }),
+ }))
+ expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
+ retrieval_model_dict: expect.objectContaining({
+ score_threshold_enabled: true,
+ score_threshold: 0.8,
+ }),
+ }))
+ })
+
+ it('disables save button while saving', async () => {
+ mockUpdateDatasetSetting.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)))
+
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ await userEvent.click(saveButton)
+
+ expect(saveButton).toBeDisabled()
+ })
+
+ it('shows error toast when save fails', async () => {
+ mockUpdateDatasetSetting.mockRejectedValue(new Error('API Error'))
+
+ renderWithProviders(createDataset())
+
+ await waitFor(() => expect(mockFetchMembers).toHaveBeenCalled())
+
+ await userEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ await waitFor(() => {
+ expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+ })
+ })
+})
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index cd6e39011e..8c3e753b22 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -4,10 +4,8 @@ import { useMount } from 'ahooks'
import { useTranslation } from 'react-i18next'
import { isEqual } from 'lodash-es'
import { RiCloseLine } from '@remixicon/react'
-import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import IndexMethod from '@/app/components/datasets/settings/index-method'
-import Divider from '@/app/components/base/divider'
import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
@@ -18,11 +16,7 @@ import { useAppContext } from '@/context/app-context'
import { useModalContext } from '@/context/modal-context'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import type { RetrievalConfig } from '@/types/app'
-import RetrievalSettings from '@/app/components/datasets/external-knowledge-base/create/RetrievalSettings'
-import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
-import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import PermissionSelector from '@/app/components/datasets/settings/permission-selector'
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -32,6 +26,7 @@ import type { Member } from '@/models/common'
import { IndexingType } from '@/app/components/datasets/create/step-two'
import { useDocLink } from '@/context/i18n'
import { checkShowMultiModalTip } from '@/app/components/datasets/settings/utils'
+import { RetrievalChangeTip, RetrievalSection } from './retrieval-section'
type SettingsModalProps = {
currentDataset: DataSet
@@ -298,92 +293,37 @@ const SettingsModal: FC = ({
)}
{/* Retrieval Method Config */}
- {currentDataset?.provider === 'external'
- ? <>
-
- {isRetrievalChanged && !isHideChangedTip && (
-
+
+
+
+ )
+ },
+}))
+
+const createAgentConfig = (overrides: Partialchild content
}
+ />,
+ )
+
+ expect(screen.getByText('Panel name')).toBeInTheDocument()
+ expect(screen.getByText('child content')).toBeInTheDocument()
+ expect(screen.getByText('icon')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 6512e11545..6193392026 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
type Props = {
className?: string
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.spec.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.spec.tsx
new file mode 100644
index 0000000000..9899f15375
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.spec.tsx
@@ -0,0 +1,466 @@
+import type {
+ PropsWithChildren,
+} from 'react'
+import React, {
+ useEffect,
+ useMemo,
+ useState,
+} from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AgentTools from './index'
+import ConfigContext from '@/context/debug-configuration'
+import type { AgentTool } from '@/types/app'
+import { CollectionType, type Tool, type ToolParameter } from '@/app/components/tools/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
+import type { ModelConfig } from '@/models/debug'
+import { ModelModeType } from '@/types/app'
+import {
+ DEFAULT_AGENT_SETTING,
+ DEFAULT_CHAT_PROMPT_CONFIG,
+ DEFAULT_COMPLETION_PROMPT_CONFIG,
+} from '@/config'
+import copy from 'copy-to-clipboard'
+import type ToolPickerType from '@/app/components/workflow/block-selector/tool-picker'
+import type SettingBuiltInToolType from './setting-built-in-tool'
+
+const formattingDispatcherMock = jest.fn()
+jest.mock('@/app/components/app/configuration/debug/hooks', () => ({
+ useFormattingChangedDispatcher: () => formattingDispatcherMock,
+}))
+
+let pluginInstallHandler: ((names: string[]) => void) | null = null
+const subscribeMock = jest.fn((event: string, handler: any) => {
+ if (event === 'plugin:install:success')
+ pluginInstallHandler = handler
+})
+jest.mock('@/context/mitt-context', () => ({
+ useMittContextSelector: (selector: any) => selector({
+ useSubscribe: subscribeMock,
+ }),
+}))
+
+let builtInTools: ToolWithProvider[] = []
+let customTools: ToolWithProvider[] = []
+let workflowTools: ToolWithProvider[] = []
+let mcpTools: ToolWithProvider[] = []
+jest.mock('@/service/use-tools', () => ({
+ useAllBuiltInTools: () => ({ data: builtInTools }),
+ useAllCustomTools: () => ({ data: customTools }),
+ useAllWorkflowTools: () => ({ data: workflowTools }),
+ useAllMCPTools: () => ({ data: mcpTools }),
+}))
+
+type ToolPickerProps = React.ComponentProps
+
+)
+jest.mock('@/app/components/workflow/block-selector/tool-picker', () => ({
+ __esModule: true,
+ default: (props: ToolPickerProps) => {props.trigger}
+
+
+
+ {props.toolName}
+
+
+
+
+ )
+}
+jest.mock('./setting-built-in-tool', () => ({
+ __esModule: true,
+ default: (props: SettingBuiltInToolProps) =>
-
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.spec.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.spec.tsx
new file mode 100644
index 0000000000..8cd95472dc
--- /dev/null
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.spec.tsx
@@ -0,0 +1,248 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import SettingBuiltInTool from './setting-built-in-tool'
+import I18n from '@/context/i18n'
+import { CollectionType, type Tool, type ToolParameter } from '@/app/components/tools/types'
+
+const fetchModelToolList = jest.fn()
+const fetchBuiltInToolList = jest.fn()
+const fetchCustomToolList = jest.fn()
+const fetchWorkflowToolList = jest.fn()
+jest.mock('@/service/tools', () => ({
+ fetchModelToolList: (collectionName: string) => fetchModelToolList(collectionName),
+ fetchBuiltInToolList: (collectionName: string) => fetchBuiltInToolList(collectionName),
+ fetchCustomToolList: (collectionName: string) => fetchCustomToolList(collectionName),
+ fetchWorkflowToolList: (appId: string) => fetchWorkflowToolList(appId),
+}))
+
+type MockFormProps = {
+ value: Record
+
@@ -277,6 +277,7 @@ const AgentTools: FC = () => {
}}
onMouseOver={() => setIsDeleting(index)}
onMouseLeave={() => setIsDeleting(-1)}
+ data-testid='delete-removed-tool'
>
+
+ )
+}
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-modal/Form', () => ({
+ __esModule: true,
+ default: (props: MockFormProps) => {JSON.stringify(value)}
+
+
+
+
+ ),
+}))
+
+jest.mock('@/app/components/plugins/readme-panel/entrance', () => ({
+ ReadmeEntrance: ({ className }: { className?: string }) => readme
,
+}))
+
+const createParameter = (overrides?: Partial
+
+ ),
+}))
+
+jest.mock('@/hooks/use-breakpoints', () => {
+ const actual = jest.requireActual('@/hooks/use-breakpoints')
+ return {
+ __esModule: true,
+ ...actual,
+ default: jest.fn(() => actual.MediaType.pc),
+ }
+})
+
+const mockedUseBreakpoints = useBreakpoints as jest.MockedFunctionMock settings modal
+
+
+ {children}
+
+ {children}
+
+ )
+ }
+
+ const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
+ if (asChild && React.isValidElement(children)) {
+ return React.cloneElement(children, {
+ ...props,
+ 'data-testid': 'portal-trigger',
+ } as React.HTMLAttributes
+ {children}
+
+ )
+ }
+
+ return {
+ PortalToFollowElem,
+ PortalToFollowElemContent,
+ PortalToFollowElemTrigger,
+ }
+})
+
+describe('ContextVar', () => {
+ const mockOptions: Props['options'] = [
+ { name: 'Variable 1', value: 'var1', type: 'string' },
+ { name: 'Variable 2', value: 'var2', type: 'number' },
+ ]
+
+ const defaultProps: Props = {
+ value: 'var1',
+ options: mockOptions,
+ onChange: jest.fn(),
+ }
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ // Rendering tests (REQUIRED)
+ describe('Rendering', () => {
+ it('should display query variable selector when options are provided', () => {
+ // Arrange
+ const props = { ...defaultProps }
+
+ // Act
+ render({children}
+
+ {children}
+
+ )
+ }
+
+ const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
+ if (asChild && React.isValidElement(children)) {
+ return React.cloneElement(children, {
+ ...props,
+ 'data-testid': 'portal-trigger',
+ } as React.HTMLAttributes
+ {children}
+
+ )
+ }
+
+ return {
+ PortalToFollowElem,
+ PortalToFollowElemContent,
+ PortalToFollowElemTrigger,
+ }
+})
+
+describe('VarPicker', () => {
+ const mockOptions: Props['options'] = [
+ { name: 'Variable 1', value: 'var1', type: 'string' },
+ { name: 'Variable 2', value: 'var2', type: 'number' },
+ { name: 'Variable 3', value: 'var3', type: 'boolean' },
+ ]
+
+ const defaultProps: Props = {
+ value: 'var1',
+ options: mockOptions,
+ onChange: jest.fn(),
+ }
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ // Rendering tests (REQUIRED)
+ describe('Rendering', () => {
+ it('should render variable picker with dropdown trigger', () => {
+ // Arrange
+ const props = { ...defaultProps }
+
+ // Act
+ render(
+ {config.name}
+ {editable && }
+
+
+ ),
+}))
+
+jest.mock('./params-config', () => ({
+ __esModule: true,
+ default: ({ disabled, selectedDatasets }: any) => (
+
+ ),
+}))
+
+jest.mock('./context-var', () => ({
+ __esModule: true,
+ default: ({ value, options, onChange }: any) => (
+
+ ),
+}))
+
+jest.mock('@/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter', () => ({
+ __esModule: true,
+ default: ({
+ metadataList,
+ metadataFilterMode,
+ handleMetadataFilterModeChange,
+ handleAddCondition,
+ handleRemoveCondition,
+ handleUpdateCondition,
+ handleToggleConditionLogicalOperator,
+ }: any) => (
+
+ {metadataList.length}
+
+
+
+
+
+
+ ),
+}))
+
+// Mock context
+const mockConfigContext: any = {
+ mode: AppModeEnum.CHAT,
+ modelModeType: ModelModeType.chat,
+ isAgent: false,
+ dataSets: [],
+ setDataSets: jest.fn(),
+ modelConfig: {
+ configs: {
+ prompt_variables: [],
+ },
+ },
+ setModelConfig: jest.fn(),
+ showSelectDataSet: jest.fn(),
+ datasetConfigs: {
+ retrieval_model: RETRIEVE_TYPE.multiWay,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0.7,
+ metadata_filtering_mode: 'disabled' as any,
+ metadata_filtering_conditions: undefined,
+ datasets: {
+ datasets: [],
+ },
+ } as DatasetConfigs,
+ datasetConfigsRef: {
+ current: {
+ retrieval_model: RETRIEVE_TYPE.multiWay,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0.7,
+ metadata_filtering_mode: 'disabled' as any,
+ metadata_filtering_conditions: undefined,
+ datasets: {
+ datasets: [],
+ },
+ } as DatasetConfigs,
+ },
+ setDatasetConfigs: jest.fn(),
+ setRerankSettingModalOpen: jest.fn(),
+}
+
+jest.mock('@/context/debug-configuration', () => ({
+ __esModule: true,
+ default: ({ children }: any) => (
+
+ {children}
+
+ ),
+}))
+
+jest.mock('use-context-selector', () => ({
+ useContext: jest.fn(() => mockConfigContext),
+}))
+
+const createMockDataset = (overrides: Partial
+ {children}
+
+ ),
+ DialogPanel: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ DialogTitle: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ Transition: ({ show, children }: { show: boolean; children: React.ReactNode }) => (show ? <>{children} : null),
+ TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children},
+ Switch: ({ checked, onChange, children, ...props }: { checked: boolean; onChange?: (value: boolean) => void; children?: React.ReactNode }) => (
+
+ ),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+ useModelListAndDefaultModelAndCurrentProviderAndModel: jest.fn(),
+ useCurrentProviderAndModel: jest.fn(),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => {
+ type Props = {
+ defaultModel?: { provider: string; model: string }
+ onSelect?: (model: { provider: string; model: string }) => void
+ }
+
+ const MockModelSelector = ({ defaultModel, onSelect }: Props) => (
+
+ )
+
+ return {
+ __esModule: true,
+ default: MockModelSelector,
+ }
+})
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+const mockedUseModelListAndDefaultModelAndCurrentProviderAndModel = useModelListAndDefaultModelAndCurrentProviderAndModel as jest.MockedFunction
+ {defaultModel ? `${defaultModel.provider}/${defaultModel.model}` : 'no-model'}
+
+ ),
+}))
+
+jest.mock('@/app/components/datasets/settings/utils', () => ({
+ checkShowMultiModalTip: (...args: unknown[]) => mockCheckShowMultiModalTip(...args),
+}))
+
+const mockUpdateDatasetSetting = updateDatasetSetting as jest.MockedFunction
-
-
-
- {t('datasetSettings.form.retrievalSetting.title')}
-
-
-
-
- {t('datasetSettings.form.externalKnowledgeAPI')}
-
-
-
-
-
- {currentDataset?.external_knowledge_info.external_knowledge_api_name}
-
- ·
- {currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}
-
-
-
-
- {t('datasetSettings.form.externalKnowledgeID')}
-
-
-
-
- {currentDataset?.external_knowledge_info.external_knowledge_id}
-
-
}
+ {isExternal ? (
+
-
-
-
- {t('datasetSettings.form.retrievalSetting.title')}
-
- {t('datasetSettings.form.retrievalSetting.learnMore')}
- {t('datasetSettings.form.retrievalSetting.description')}
-
-
- {indexMethod === IndexingType.QUALIFIED
- ? (
-
-
-
- )}
+
-
- {t('appDebug.datasetConfig.retrieveChangeTip')}
- {
- setIsHideChangedTip(true)
- e.stopPropagation()
- e.nativeEvent.stopImmediatePropagation()
- }}>
-
- {
+ const ky = () => ky
+ ky.extend = () => ky
+ ky.create = () => ky
+ return { __esModule: true, default: ky }
+})
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: () => ({
+ modelProviders: [],
+ textGenerationModelList: [],
+ supportRetrievalMethods: [
+ RETRIEVE_METHOD.semantic,
+ RETRIEVE_METHOD.fullText,
+ RETRIEVE_METHOD.hybrid,
+ RETRIEVE_METHOD.keywordSearch,
+ ],
+ }),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+ __esModule: true,
+ useModelListAndDefaultModelAndCurrentProviderAndModel: (...args: unknown[]) =>
+ mockUseModelListAndDefaultModelAndCurrentProviderAndModel(...args),
+ useModelListAndDefaultModel: (...args: unknown[]) => mockUseModelListAndDefaultModel(...args),
+ useModelList: (...args: unknown[]) => mockUseModelList(...args),
+ useCurrentProviderAndModel: (...args: unknown[]) => mockUseCurrentProviderAndModel(...args),
+}))
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+ __esModule: true,
+ default: ({ defaultModel }: { defaultModel?: { provider: string; model: string } }) => (
+ = {}): RetrievalConfig => ({
+ search_method: RETRIEVE_METHOD.semantic,
+ reranking_enable: false,
+ reranking_model: {
+ reranking_provider_name: '',
+ reranking_model_name: '',
+ },
+ top_k: 2,
+ score_threshold_enabled: false,
+ score_threshold: 0.5,
+ reranking_mode: RerankingModeEnum.RerankingModel,
+ ...overrides,
+})
+
+const createDataset = (overrides: Partial = {}, retrievalOverrides: Partial = {}): DataSet => {
+ const retrievalConfig = createRetrievalConfig(retrievalOverrides)
+ return {
+ id: 'dataset-id',
+ name: 'Test Dataset',
+ indexing_status: 'completed',
+ icon_info: {
+ icon: 'icon',
+ icon_type: 'emoji',
+ },
+ description: 'Description',
+ permission: DatasetPermission.allTeamMembers,
+ data_source_type: DataSourceType.FILE,
+ indexing_technique: IndexingType.QUALIFIED,
+ author_name: 'Author',
+ created_by: 'creator',
+ updated_by: 'updater',
+ updated_at: 1700000000,
+ app_count: 0,
+ doc_form: ChunkingMode.text,
+ document_count: 0,
+ total_document_count: 0,
+ total_available_documents: 0,
+ word_count: 0,
+ provider: 'internal',
+ embedding_model: 'embed-model',
+ embedding_model_provider: 'embed-provider',
+ embedding_available: true,
+ tags: [],
+ partial_member_list: [],
+ external_knowledge_info: {
+ external_knowledge_id: 'ext-id',
+ external_knowledge_api_id: 'ext-api-id',
+ external_knowledge_api_name: 'External API',
+ external_knowledge_api_endpoint: 'https://api.example.com',
+ },
+ external_retrieval_model: {
+ top_k: 2,
+ score_threshold: 0.5,
+ score_threshold_enabled: false,
+ },
+ built_in_field_enabled: false,
+ doc_metadata: [],
+ keyword_number: 10,
+ pipeline_id: 'pipeline-id',
+ is_published: false,
+ runtime_mode: 'general',
+ enable_api: true,
+ is_multimodal: false,
+ ...overrides,
+ retrieval_model_dict: {
+ ...retrievalConfig,
+ ...overrides.retrieval_model_dict,
+ },
+ retrieval_model: {
+ ...retrievalConfig,
+ ...overrides.retrieval_model,
+ },
+ }
+}
+
+describe('RetrievalChangeTip', () => {
+ const defaultProps = {
+ visible: true,
+ message: 'Test message',
+ onDismiss: jest.fn(),
+ }
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('renders and supports dismiss', async () => {
+ // Arrange
+ const onDismiss = jest.fn()
+ render( path}
+ />,
+ )
+ const [topKIncrement] = screen.getAllByLabelText('increment')
+ await userEvent.click(topKIncrement)
+
+ // Assert
+ expect(screen.getByText('dataset.retrieval.keyword_search.title')).toBeInTheDocument()
+ expect(handleRetrievalChange).toHaveBeenCalledWith(expect.objectContaining({
+ top_k: 3,
+ }))
+ })
+})
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
new file mode 100644
index 0000000000..99d042f681
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
@@ -0,0 +1,218 @@
+import { RiCloseLine } from '@remixicon/react'
+import type { FC } from 'react'
+import { cn } from '@/utils/classnames'
+import Divider from '@/app/components/base/divider'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import RetrievalSettings from '@/app/components/datasets/external-knowledge-base/create/RetrievalSettings'
+import type { DataSet } from '@/models/datasets'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import type { RetrievalConfig } from '@/types/app'
+import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
+import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
+
+type CommonSectionProps = {
+ rowClass: string
+ labelClass: string
+ t: (key: string, options?: any) => string
+}
+
+type ExternalRetrievalSectionProps = CommonSectionProps & {
+ topK: number
+ scoreThreshold: number
+ scoreThresholdEnabled: boolean
+ onExternalSettingChange: (data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => void
+ currentDataset: DataSet
+}
+
+const ExternalRetrievalSection: FC = ({
+ rowClass,
+ labelClass,
+ t,
+ topK,
+ scoreThreshold,
+ scoreThresholdEnabled,
+ onExternalSettingChange,
+ currentDataset,
+}) => (
+ <>
+ = ({
+ rowClass,
+ labelClass,
+ t,
+ indexMethod,
+ retrievalConfig,
+ showMultiModalTip,
+ onRetrievalConfigChange,
+ docLink,
+}) => (
+ = (props) => {
+ if (props.isExternal) {
+ const {
+ rowClass,
+ labelClass,
+ t,
+ topK,
+ scoreThreshold,
+ scoreThresholdEnabled,
+ onExternalSettingChange,
+ currentDataset,
+ } = props
+
+ return (
+ = ({
+ visible,
+ message,
+ onDismiss,
+}) => {
+ if (!visible)
+ return null
+
+ return (
+ = {}): ModelConfig {
+ return {
+ provider: 'openai',
+ model_id: 'gpt-3.5-turbo',
+ mode: ModelModeType.chat,
+ configs: {
+ prompt_template: 'Test template',
+ prompt_variables: [
+ { key: 'var1', name: 'Variable 1', type: 'text', required: false },
+ ],
+ },
+ chat_prompt_config: {
+ prompt: [],
+ },
+ completion_prompt_config: {
+ prompt: { text: '' },
+ conversation_histories_role: {
+ user_prefix: 'user',
+ assistant_prefix: 'assistant',
+ },
+ },
+ more_like_this: null,
+ opening_statement: '',
+ suggested_questions: [],
+ sensitive_word_avoidance: null,
+ speech_to_text: null,
+ text_to_speech: null,
+ file_upload: null,
+ suggested_questions_after_answer: null,
+ retriever_resource: null,
+ annotation_reply: null,
+ external_data_tools: [],
+ system_parameters: {
+ audio_file_size_limit: 0,
+ file_size_limit: 0,
+ image_file_size_limit: 0,
+ video_file_size_limit: 0,
+ workflow_file_upload_limit: 0,
+ },
+ dataSets: [],
+ agentConfig: {
+ enabled: false,
+ max_iteration: 5,
+ tools: [],
+ strategy: AgentStrategy.react,
+ },
+ ...overrides,
+ }
+}
+
+/**
+ * Factory function for creating mock Collection list
+ */
+function createMockCollections(collections: Partial[] = []): Collection[] {
+ return collections.map((collection, index) => ({
+ id: `collection-${index}`,
+ name: `Collection ${index}`,
+ icon: 'icon-url',
+ type: 'tool',
+ ...collection,
+ } as Collection))
+}
+
+/**
+ * Factory function for creating mock Provider Context
+ */
+function createMockProviderContext(overrides: Partial = {}): ProviderContextState {
+ return {
+ textGenerationModelList: [
+ {
+ provider: 'openai',
+ label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+ icon_small: { en_US: 'icon', zh_Hans: 'icon' },
+ icon_large: { en_US: 'icon', zh_Hans: 'icon' },
+ status: ModelStatusEnum.active,
+ models: [
+ {
+ model: 'gpt-3.5-turbo',
+ label: { en_US: 'GPT-3.5', zh_Hans: 'GPT-3.5' },
+ model_type: ModelTypeEnum.textGeneration,
+ features: [ModelFeatureEnum.vision],
+ fetch_from: ConfigurationMethodEnum.predefinedModel,
+ model_properties: {},
+ deprecated: false,
+ },
+ ],
+ },
+ ],
+ hasSettedApiKey: true,
+ modelProviders: [],
+ speech2textDefaultModel: null,
+ ttsDefaultModel: null,
+ agentThoughtDefaultModel: null,
+ updateModelList: jest.fn(),
+ onPlanInfoChanged: jest.fn(),
+ refreshModelProviders: jest.fn(),
+ refreshLicenseLimit: jest.fn(),
+ ...overrides,
+ } as ProviderContextState
+}
+
+// ============================================================================
+// Mock External Dependencies ONLY (Following testing.md guidelines)
+// ============================================================================
+
+// Mock service layer (API calls)
+jest.mock('@/service/base', () => ({
+ ssePost: jest.fn(() => Promise.resolve()),
+ post: jest.fn(() => Promise.resolve({ data: {} })),
+ get: jest.fn(() => Promise.resolve({ data: {} })),
+ del: jest.fn(() => Promise.resolve({ data: {} })),
+ patch: jest.fn(() => Promise.resolve({ data: {} })),
+ put: jest.fn(() => Promise.resolve({ data: {} })),
+}))
+
+jest.mock('@/service/fetch', () => ({
+ fetch: jest.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({}) })),
+}))
+
+const mockFetchConversationMessages = jest.fn()
+const mockFetchSuggestedQuestions = jest.fn()
+const mockStopChatMessageResponding = jest.fn()
+
+jest.mock('@/service/debug', () => ({
+ fetchConversationMessages: (...args: unknown[]) => mockFetchConversationMessages(...args),
+ fetchSuggestedQuestions: (...args: unknown[]) => mockFetchSuggestedQuestions(...args),
+ stopChatMessageResponding: (...args: unknown[]) => mockStopChatMessageResponding(...args),
+}))
+
+jest.mock('next/navigation', () => ({
+ useRouter: () => ({ push: jest.fn() }),
+ usePathname: () => '/test',
+ useParams: () => ({}),
+}))
+
+// Mock complex context providers
+const mockDebugConfigContext = {
+ appId: 'test-app-id',
+ isAPIKeySet: true,
+ isTrailFinished: false,
+ mode: AppModeEnum.CHAT,
+ modelModeType: ModelModeType.chat,
+ promptMode: PromptMode.simple,
+ setPromptMode: jest.fn(),
+ isAdvancedMode: false,
+ isAgent: false,
+ isFunctionCall: false,
+ isOpenAI: true,
+ collectionList: createMockCollections([
+ { id: 'test-provider', name: 'Test Tool', icon: 'icon-url' },
+ ]),
+ canReturnToSimpleMode: false,
+ setCanReturnToSimpleMode: jest.fn(),
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ currentAdvancedPrompt: [],
+ showHistoryModal: jest.fn(),
+ conversationHistoriesRole: { user_prefix: 'user', assistant_prefix: 'assistant' },
+ setConversationHistoriesRole: jest.fn(),
+ setCurrentAdvancedPrompt: jest.fn(),
+ hasSetBlockStatus: { context: false, history: false, query: false },
+ conversationId: null,
+ setConversationId: jest.fn(),
+ introduction: '',
+ setIntroduction: jest.fn(),
+ suggestedQuestions: [],
+ setSuggestedQuestions: jest.fn(),
+ controlClearChatMessage: 0,
+ setControlClearChatMessage: jest.fn(),
+ prevPromptConfig: { prompt_template: '', prompt_variables: [] },
+ setPrevPromptConfig: jest.fn(),
+ moreLikeThisConfig: { enabled: false },
+ setMoreLikeThisConfig: jest.fn(),
+ suggestedQuestionsAfterAnswerConfig: { enabled: false },
+ setSuggestedQuestionsAfterAnswerConfig: jest.fn(),
+ speechToTextConfig: { enabled: false },
+ setSpeechToTextConfig: jest.fn(),
+ textToSpeechConfig: { enabled: false, voice: '', language: '' },
+ setTextToSpeechConfig: jest.fn(),
+ citationConfig: { enabled: false },
+ setCitationConfig: jest.fn(),
+ moderationConfig: { enabled: false },
+ annotationConfig: { id: '', enabled: false, score_threshold: 0.7, embedding_model: { embedding_model_name: '', embedding_provider_name: '' } },
+ setAnnotationConfig: jest.fn(),
+ setModerationConfig: jest.fn(),
+ externalDataToolsConfig: [],
+ setExternalDataToolsConfig: jest.fn(),
+ formattingChanged: false,
+ setFormattingChanged: jest.fn(),
+ inputs: { var1: 'test input' },
+ setInputs: jest.fn(),
+ query: '',
+ setQuery: jest.fn(),
+ completionParams: { max_tokens: 100, temperature: 0.7 },
+ setCompletionParams: jest.fn(),
+ modelConfig: createMockModelConfig({
+ agentConfig: {
+ enabled: false,
+ max_iteration: 5,
+ tools: [{
+ tool_name: 'test-tool',
+ provider_id: 'test-provider',
+ provider_type: CollectionType.builtIn,
+ provider_name: 'test-provider',
+ tool_label: 'Test Tool',
+ tool_parameters: {},
+ enabled: true,
+ }],
+ strategy: AgentStrategy.react,
+ },
+ }),
+ setModelConfig: jest.fn(),
+ dataSets: [],
+ showSelectDataSet: jest.fn(),
+ setDataSets: jest.fn(),
+ datasetConfigs: {
+ retrieval_model: 'single',
+ reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
+ top_k: 4,
+ score_threshold_enabled: false,
+ score_threshold: 0.7,
+ datasets: { datasets: [] },
+ } as DatasetConfigs,
+ datasetConfigsRef: createRef(),
+ setDatasetConfigs: jest.fn(),
+ hasSetContextVar: false,
+ isShowVisionConfig: false,
+ visionConfig: { enabled: false, number_limits: 2, detail: Resolution.low, transfer_methods: [] },
+ setVisionConfig: jest.fn(),
+ isAllowVideoUpload: false,
+ isShowDocumentConfig: false,
+ isShowAudioConfig: false,
+ rerankSettingModalOpen: false,
+ setRerankSettingModalOpen: jest.fn(),
+}
+
+jest.mock('@/context/debug-configuration', () => ({
+ useDebugConfigurationContext: jest.fn(() => mockDebugConfigContext),
+}))
+
+const mockProviderContext = createMockProviderContext()
+
+jest.mock('@/context/provider-context', () => ({
+ useProviderContext: jest.fn(() => mockProviderContext),
+}))
+
+const mockAppContext = {
+ userProfile: {
+ id: 'user-1',
+ avatar_url: 'https://example.com/avatar.png',
+ name: 'Test User',
+ email: 'test@example.com',
+ },
+ isCurrentWorkspaceManager: false,
+ isCurrentWorkspaceOwner: false,
+ isCurrentWorkspaceDatasetOperator: false,
+ mutateUserProfile: jest.fn(),
+}
+
+jest.mock('@/context/app-context', () => ({
+ useAppContext: jest.fn(() => mockAppContext),
+}))
+
+type FeatureState = {
+ moreLikeThis: { enabled: boolean }
+ opening: { enabled: boolean; opening_statement: string; suggested_questions: string[] }
+ moderation: { enabled: boolean }
+ speech2text: { enabled: boolean }
+ text2speech: { enabled: boolean }
+ file: { enabled: boolean }
+ suggested: { enabled: boolean }
+ citation: { enabled: boolean }
+ annotationReply: { enabled: boolean }
+}
+
+const defaultFeatures: FeatureState = {
+ moreLikeThis: { enabled: false },
+ opening: { enabled: false, opening_statement: '', suggested_questions: [] },
+ moderation: { enabled: false },
+ speech2text: { enabled: false },
+ text2speech: { enabled: false },
+ file: { enabled: false },
+ suggested: { enabled: false },
+ citation: { enabled: false },
+ annotationReply: { enabled: false },
+}
+type FeatureSelector = (state: { features: FeatureState }) => unknown
+
+let mockFeaturesState: FeatureState = { ...defaultFeatures }
+jest.mock('@/app/components/base/features/hooks', () => ({
+ useFeatures: jest.fn(),
+}))
+
+const mockConfigFromDebugContext = {
+ pre_prompt: 'Test prompt',
+ prompt_type: 'simple',
+ user_input_form: [],
+ dataset_query_variable: '',
+ opening_statement: '',
+ more_like_this: { enabled: false },
+ suggested_questions: [],
+ suggested_questions_after_answer: { enabled: false },
+ text_to_speech: { enabled: false },
+ speech_to_text: { enabled: false },
+ retriever_resource: { enabled: false },
+ sensitive_word_avoidance: { enabled: false },
+ agent_mode: {},
+ dataset_configs: {},
+ file_upload: { enabled: false },
+ annotation_reply: { enabled: false },
+ supportAnnotation: true,
+ appId: 'test-app-id',
+ supportCitationHitInfo: true,
+}
+
+jest.mock('../hooks', () => ({
+ useConfigFromDebugContext: jest.fn(() => mockConfigFromDebugContext),
+ useFormattingChangedSubscription: jest.fn(),
+}))
+
+const mockSetShowAppConfigureFeaturesModal = jest.fn()
+
+jest.mock('@/app/components/app/store', () => ({
+ useStore: jest.fn((selector?: (state: { setShowAppConfigureFeaturesModal: typeof mockSetShowAppConfigureFeaturesModal }) => unknown) => {
+ if (typeof selector === 'function')
+ return selector({ setShowAppConfigureFeaturesModal: mockSetShowAppConfigureFeaturesModal })
+ return mockSetShowAppConfigureFeaturesModal
+ }),
+}))
+
+// Mock event emitter context
+jest.mock('@/context/event-emitter', () => ({
+ useEventEmitterContextContext: jest.fn(() => ({
+ eventEmitter: null,
+ })),
+}))
+
+// Mock toast context
+jest.mock('@/app/components/base/toast', () => ({
+ useToastContext: jest.fn(() => ({
+ notify: jest.fn(),
+ })),
+}))
+
+// Mock hooks/use-timestamp
+jest.mock('@/hooks/use-timestamp', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ formatTime: jest.fn((timestamp: number) => new Date(timestamp).toLocaleString()),
+ })),
+}))
+
+// Mock audio player manager
+jest.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+ AudioPlayerManager: {
+ getInstance: jest.fn(() => ({
+ getAudioPlayer: jest.fn(),
+ resetAudioPlayer: jest.fn(),
+ })),
+ },
+}))
+
+type MockChatProps = {
+ chatList?: ChatItem[]
+ isResponding?: boolean
+ onSend?: (message: string, files?: FileEntity[]) => void
+ onRegenerate?: (chatItem: ChatItem, editedQuestion?: { message: string; files?: FileEntity[] }) => void
+ onStopResponding?: () => void
+ suggestedQuestions?: string[]
+ questionIcon?: ReactNode
+ answerIcon?: ReactNode
+ onAnnotationAdded?: (annotationId: string, authorName: string, question: string, answer: string, index: number) => void
+ onAnnotationEdited?: (question: string, answer: string, index: number) => void
+ onAnnotationRemoved?: (index: number) => void
+ switchSibling?: (siblingMessageId: string) => void
+ onFeatureBarClick?: (state: boolean) => void
+}
+
+const mockFile: FileEntity = {
+ id: 'file-1',
+ name: 'test.png',
+ size: 123,
+ type: 'image/png',
+ progress: 100,
+ transferMethod: TransferMethod.local_file,
+ supportFileType: 'image',
+}
+
+// Mock Chat component (complex with many dependencies)
+// This is a pragmatic mock that tests the integration at DebugWithSingleModel level
+jest.mock('@/app/components/base/chat/chat', () => {
+ return function MockChat({
+ chatList,
+ isResponding,
+ onSend,
+ onRegenerate,
+ onStopResponding,
+ suggestedQuestions,
+ questionIcon,
+ answerIcon,
+ onAnnotationAdded,
+ onAnnotationEdited,
+ onAnnotationRemoved,
+ switchSibling,
+ onFeatureBarClick,
+ }: MockChatProps) {
+ const items = chatList || []
+ const suggested = suggestedQuestions ?? []
+ return (
+
+ {defaultModel ? `${defaultModel.provider}/${defaultModel.model}` : 'no-model'}
+
+ ),
+}))
+
+jest.mock('@/app/components/datasets/create/step-two', () => ({
+ __esModule: true,
+ IndexingType: {
+ QUALIFIED: 'high_quality',
+ ECONOMICAL: 'economy',
+ },
+}))
+
+const createRetrievalConfig = (overrides: Partial
+
+
+
+ {t('datasetSettings.form.retrievalSetting.title')}
+
+
+
+
+ {t('datasetSettings.form.externalKnowledgeAPI')}
+
+
+
+
+
+ {currentDataset?.external_knowledge_info.external_knowledge_api_name}
+
+ ·
+ {currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}
+
+
+
+
+ {t('datasetSettings.form.externalKnowledgeID')}
+
+
+
+
+ {currentDataset?.external_knowledge_info.external_knowledge_id}
+
+
+)
+
+type RetrievalSectionProps
+ = | (ExternalRetrievalSectionProps & { isExternal: true })
+ | (InternalRetrievalSectionProps & { isExternal: false })
+
+export const RetrievalSection: FC
+
+
+
+ {t('datasetSettings.form.retrievalSetting.title')}
+
+ {t('datasetSettings.form.retrievalSetting.learnMore')}
+ {t('datasetSettings.form.retrievalSetting.description')}
+
+
+ {indexMethod === IndexingType.QUALIFIED
+ ? (
+
+
+
+ )
+}
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index 16666d514e..c25bed548c 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -7,7 +7,7 @@ import Select from '@/app/components/base/select'
import Textarea from '@/app/components/base/textarea'
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
import type { Inputs } from '@/models/debug'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
type Props = {
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
new file mode 100644
index 0000000000..676456c3ea
--- /dev/null
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.spec.tsx
@@ -0,0 +1,1011 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { type ReactNode, type RefObject, createRef } from 'react'
+import DebugWithSingleModel from './index'
+import type { DebugWithSingleModelRefType } from './index'
+import type { ChatItem } from '@/app/components/base/chat/types'
+import { ConfigurationMethodEnum, ModelFeatureEnum, ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ProviderContextState } from '@/context/provider-context'
+import type { DatasetConfigs, ModelConfig } from '@/models/debug'
+import { PromptMode } from '@/models/debug'
+import { type Collection, CollectionType } from '@/app/components/tools/types'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { AgentStrategy, AppModeEnum, ModelModeType, Resolution, TransferMethod } from '@/types/app'
+
+// ============================================================================
+// Test Data Factories (Following testing.md guidelines)
+// ============================================================================
+
+/**
+ * Factory function for creating mock ModelConfig with type safety
+ */
+function createMockModelConfig(overrides: Partial
+
+
+ {message}
+
+
+ {items.map((item: ChatItem) => (
+
+ {questionIcon &&
+ {item.content}
+
+ ))}
+ {questionIcon}
}
+ {answerIcon && {answerIcon}
}
+