= {}): ModelAndParameter => ({
+ id: 'model-1',
+ model: 'gpt-3.5-turbo',
+ provider: 'openai',
+ parameters: {},
+ ...overrides,
+})
+
+const TestConsumer = () => {
+ const context = useDebugWithMultipleModelContext()
+ return (
+
+ {context.multipleModelConfigs.length}
+ {context.checkCanSend ? 'yes' : 'no'}
+
+
+
+ )
+}
+
+describe('DebugWithMultipleModelContext', () => {
+ describe('useDebugWithMultipleModelContext', () => {
+ it('should return default values when used outside provider', () => {
+ render()
+
+ expect(screen.getByTestId('configs-count')).toHaveTextContent('0')
+ expect(screen.getByTestId('has-check-can-send')).toHaveTextContent('no')
+ })
+
+ it('should return default noop functions that do not throw', () => {
+ render()
+
+ // These should not throw when called
+ expect(() => {
+ screen.getByTestId('call-on-change').click()
+ }).not.toThrow()
+
+ expect(() => {
+ screen.getByTestId('call-on-debug-change').click()
+ }).not.toThrow()
+ })
+ })
+
+ describe('DebugWithMultipleModelContextProvider', () => {
+ it('should provide multipleModelConfigs to children', () => {
+ const multipleModelConfigs = [
+ createModelAndParameter({ id: 'model-1' }),
+ createModelAndParameter({ id: 'model-2' }),
+ ]
+
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByTestId('configs-count')).toHaveTextContent('2')
+ })
+
+ it('should provide checkCanSend function to children', () => {
+ const checkCanSend = vi.fn(() => true)
+
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByTestId('has-check-can-send')).toHaveTextContent('yes')
+ })
+
+ it('should call onMultipleModelConfigsChange when invoked from context', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+
+ render(
+
+
+ ,
+ )
+
+ screen.getByTestId('call-on-change').click()
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(true, [])
+ })
+
+ it('should call onDebugWithMultipleModelChange when invoked from context', () => {
+ const onDebugWithMultipleModelChange = vi.fn()
+
+ render(
+
+
+ ,
+ )
+
+ screen.getByTestId('call-on-debug-change').click()
+
+ expect(onDebugWithMultipleModelChange).toHaveBeenCalledWith(
+ expect.objectContaining({ id: 'model-1' }),
+ )
+ })
+
+ it('should handle undefined checkCanSend', () => {
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByTestId('has-check-can-send')).toHaveTextContent('no')
+ })
+
+ it('should render children correctly', () => {
+ render(
+
+ Child Content
+ ,
+ )
+
+ expect(screen.getByTestId('child-element')).toHaveTextContent('Child Content')
+ })
+
+ it('should update context when props change', () => {
+ const { rerender } = render(
+
+
+ ,
+ )
+
+ expect(screen.getByTestId('configs-count')).toHaveTextContent('1')
+
+ rerender(
+
+
+ ,
+ )
+
+ expect(screen.getByTestId('configs-count')).toHaveTextContent('2')
+ })
+
+ it('should pass all context values correctly', () => {
+ const contextValues: DebugWithMultipleModelContextType = {
+ multipleModelConfigs: [createModelAndParameter()],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ checkCanSend: () => true,
+ }
+
+ const FullTestConsumer = () => {
+ const context = useDebugWithMultipleModelContext()
+ return (
+
+ {JSON.stringify(context.multipleModelConfigs)}
+ {typeof context.onMultipleModelConfigsChange}
+ {typeof context.onDebugWithMultipleModelChange}
+ {typeof context.checkCanSend}
+
+ )
+ }
+
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByTestId('configs')).toHaveTextContent('model-1')
+ expect(screen.getByTestId('has-on-change')).toHaveTextContent('function')
+ expect(screen.getByTestId('has-on-debug-change')).toHaveTextContent('function')
+ expect(screen.getByTestId('has-check')).toHaveTextContent('function')
+ })
+ })
+})
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.spec.tsx
new file mode 100644
index 0000000000..efc477fb47
--- /dev/null
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.spec.tsx
@@ -0,0 +1,552 @@
+import type { CSSProperties } from 'react'
+import type { ModelAndParameter } from '../types'
+import type { Item } from '@/app/components/base/dropdown'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { AppModeEnum } from '@/types/app'
+import DebugItem from './debug-item'
+
+const mockUseDebugConfigurationContext = vi.fn()
+const mockUseDebugWithMultipleModelContext = vi.fn()
+const mockUseProviderContext = vi.fn()
+
+let capturedDropdownProps: {
+ onSelect: (item: Item) => void
+ items: Item[]
+ secondItems?: Item[]
+} | null = null
+
+let capturedModelParameterTriggerProps: {
+ modelAndParameter: ModelAndParameter
+} | null = null
+
+vi.mock('@/context/debug-configuration', () => ({
+ useDebugConfigurationContext: () => mockUseDebugConfigurationContext(),
+}))
+
+vi.mock('./context', () => ({
+ useDebugWithMultipleModelContext: () => mockUseDebugWithMultipleModelContext(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: () => mockUseProviderContext(),
+}))
+
+vi.mock('./chat-item', () => ({
+ default: ({ modelAndParameter }: { modelAndParameter: ModelAndParameter }) => (
+ ChatItem
+ ),
+}))
+
+vi.mock('./text-generation-item', () => ({
+ default: ({ modelAndParameter }: { modelAndParameter: ModelAndParameter }) => (
+ TextGenerationItem
+ ),
+}))
+
+vi.mock('./model-parameter-trigger', () => ({
+ default: (props: { modelAndParameter: ModelAndParameter }) => {
+ capturedModelParameterTriggerProps = props
+ return ModelParameterTrigger
+ },
+}))
+
+vi.mock('@/app/components/base/dropdown', () => ({
+ default: (props: { onSelect: (item: Item) => void, items: Item[], secondItems?: Item[] }) => {
+ capturedDropdownProps = props
+ return (
+
+ {props.items.map(item => (
+
+ ))}
+ {props.secondItems?.map(item => (
+
+ ))}
+
+ )
+ },
+}))
+
+const createModelAndParameter = (overrides: Partial = {}): ModelAndParameter => ({
+ id: 'model-1',
+ model: 'gpt-3.5-turbo',
+ provider: 'openai',
+ parameters: {},
+ ...overrides,
+})
+
+const createTextGenerationModelList = (models: Array<{ provider: string, model: string, status?: ModelStatusEnum }> = []) => {
+ const providers: Record }> = {}
+
+ models.forEach(({ provider, model, status = ModelStatusEnum.active }) => {
+ if (!providers[provider]) {
+ providers[provider] = { provider, models: [] }
+ }
+ providers[provider].models.push({ model, status })
+ })
+
+ return Object.values(providers)
+}
+
+type DebugItemProps = {
+ modelAndParameter: ModelAndParameter
+ className?: string
+ style?: CSSProperties
+}
+
+const renderComponent = (props: Partial = {}) => {
+ const defaultProps: DebugItemProps = {
+ modelAndParameter: createModelAndParameter(),
+ ...props,
+ }
+ return render()
+}
+
+describe('DebugItem', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ capturedDropdownProps = null
+ capturedModelParameterTriggerProps = null
+
+ mockUseDebugConfigurationContext.mockReturnValue({
+ mode: AppModeEnum.CHAT,
+ })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [createModelAndParameter()],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'openai', model: 'gpt-3.5-turbo' },
+ ]),
+ })
+ })
+
+ describe('rendering', () => {
+ it('should render with basic props', () => {
+ renderComponent()
+
+ expect(screen.getByTestId('model-parameter-trigger')).toBeInTheDocument()
+ expect(screen.getByTestId('dropdown')).toBeInTheDocument()
+ })
+
+ it('should display correct index number', () => {
+ const modelConfigs = [
+ createModelAndParameter({ id: 'model-1' }),
+ createModelAndParameter({ id: 'model-2' }),
+ ]
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: modelConfigs,
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ const { container } = renderComponent({ modelAndParameter: createModelAndParameter({ id: 'model-2' }) })
+
+ // The index is displayed as "#2" in the component
+ const indexElement = container.querySelector('.font-medium.italic')
+ expect(indexElement?.textContent?.trim()).toContain('2')
+ })
+
+ it('should apply className and style props', () => {
+ const { container } = renderComponent({
+ className: 'custom-class',
+ style: { backgroundColor: 'red' },
+ })
+
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('custom-class')
+ expect(wrapper.style.backgroundColor).toBe('red')
+ })
+
+ it('should pass modelAndParameter to ModelParameterTrigger', () => {
+ const modelAndParameter = createModelAndParameter({ id: 'test-model' })
+ renderComponent({ modelAndParameter })
+
+ expect(capturedModelParameterTriggerProps?.modelAndParameter).toEqual(modelAndParameter)
+ })
+ })
+
+ describe('ChatItem rendering', () => {
+ it('should render ChatItem in CHAT mode with active model', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.CHAT })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'openai', model: 'gpt-3.5-turbo', status: ModelStatusEnum.active },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('chat-item')).toBeInTheDocument()
+ expect(screen.queryByTestId('text-generation-item')).not.toBeInTheDocument()
+ })
+
+ it('should render ChatItem in AGENT_CHAT mode with active model', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.AGENT_CHAT })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'openai', model: 'gpt-3.5-turbo', status: ModelStatusEnum.active },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('chat-item')).toBeInTheDocument()
+ })
+
+ it('should not render ChatItem when model is not active', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.CHAT })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'openai', model: 'gpt-3.5-turbo', status: ModelStatusEnum.disabled },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.queryByTestId('chat-item')).not.toBeInTheDocument()
+ })
+
+ it('should not render ChatItem when provider not found', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.CHAT })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'anthropic', model: 'claude-3', status: ModelStatusEnum.active },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.queryByTestId('chat-item')).not.toBeInTheDocument()
+ })
+
+ it('should not render ChatItem when model not found', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.CHAT })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'openai', model: 'gpt-4', status: ModelStatusEnum.active },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.queryByTestId('chat-item')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('TextGenerationItem rendering', () => {
+ it('should render TextGenerationItem in COMPLETION mode with active model', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.COMPLETION })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'openai', model: 'gpt-3.5-turbo', status: ModelStatusEnum.active },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('text-generation-item')).toBeInTheDocument()
+ expect(screen.queryByTestId('chat-item')).not.toBeInTheDocument()
+ })
+
+ it('should not render TextGenerationItem when provider is not found', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.COMPLETION })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'anthropic', model: 'claude-3', status: ModelStatusEnum.active },
+ ]),
+ })
+
+ renderComponent()
+
+ expect(screen.queryByTestId('text-generation-item')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('dropdown menu', () => {
+ it('should show duplicate option when less than 4 models', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [createModelAndParameter()],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent()
+
+ expect(capturedDropdownProps?.items).toContainEqual(
+ expect.objectContaining({ value: 'duplicate' }),
+ )
+ })
+
+ it('should hide duplicate option when 4 or more models', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [
+ createModelAndParameter({ id: '1' }),
+ createModelAndParameter({ id: '2' }),
+ createModelAndParameter({ id: '3' }),
+ createModelAndParameter({ id: '4' }),
+ ],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent()
+
+ expect(capturedDropdownProps?.items).not.toContainEqual(
+ expect.objectContaining({ value: 'duplicate' }),
+ )
+ })
+
+ it('should show debug-as-single-model option when provider and model are set', () => {
+ renderComponent({
+ modelAndParameter: createModelAndParameter({
+ provider: 'openai',
+ model: 'gpt-3.5-turbo',
+ }),
+ })
+
+ expect(capturedDropdownProps?.items).toContainEqual(
+ expect.objectContaining({ value: 'debug-as-single-model' }),
+ )
+ })
+
+ it('should hide debug-as-single-model option when provider is missing', () => {
+ renderComponent({
+ modelAndParameter: createModelAndParameter({
+ provider: '',
+ model: 'gpt-3.5-turbo',
+ }),
+ })
+
+ expect(capturedDropdownProps?.items).not.toContainEqual(
+ expect.objectContaining({ value: 'debug-as-single-model' }),
+ )
+ })
+
+ it('should hide debug-as-single-model option when model is missing', () => {
+ renderComponent({
+ modelAndParameter: createModelAndParameter({
+ provider: 'openai',
+ model: '',
+ }),
+ })
+
+ expect(capturedDropdownProps?.items).not.toContainEqual(
+ expect.objectContaining({ value: 'debug-as-single-model' }),
+ )
+ })
+
+ it('should show remove option in secondItems when more than 2 models', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [
+ createModelAndParameter({ id: '1' }),
+ createModelAndParameter({ id: '2' }),
+ createModelAndParameter({ id: '3' }),
+ ],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent()
+
+ expect(capturedDropdownProps?.secondItems).toContainEqual(
+ expect.objectContaining({ value: 'remove' }),
+ )
+ })
+
+ it('should not show remove option when 2 or fewer models', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [
+ createModelAndParameter({ id: '1' }),
+ createModelAndParameter({ id: '2' }),
+ ],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent()
+
+ expect(capturedDropdownProps?.secondItems).toBeUndefined()
+ })
+ })
+
+ describe('dropdown actions', () => {
+ it('should duplicate model when duplicate is selected', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const originalModel = createModelAndParameter({ id: 'original' })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [originalModel],
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter: originalModel })
+
+ fireEvent.click(screen.getByTestId('dropdown-item-duplicate'))
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
+ true,
+ expect.arrayContaining([
+ originalModel,
+ expect.objectContaining({
+ model: originalModel.model,
+ provider: originalModel.provider,
+ parameters: originalModel.parameters,
+ }),
+ ]),
+ )
+ })
+
+ it('should not duplicate when already at 4 models', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const models = [
+ createModelAndParameter({ id: '1' }),
+ createModelAndParameter({ id: '2' }),
+ createModelAndParameter({ id: '3' }),
+ createModelAndParameter({ id: '4' }),
+ ]
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: models,
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter: models[0] })
+
+ // Since duplicate is not shown when >= 4 models, we need to manually call handleSelect
+ capturedDropdownProps?.onSelect({ value: 'duplicate', text: 'Duplicate' })
+
+ expect(onMultipleModelConfigsChange).not.toHaveBeenCalled()
+ })
+
+ it('should call onDebugWithMultipleModelChange when debug-as-single-model is selected', () => {
+ const onDebugWithMultipleModelChange = vi.fn()
+ const modelAndParameter = createModelAndParameter()
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [modelAndParameter],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange,
+ })
+
+ renderComponent({ modelAndParameter })
+
+ fireEvent.click(screen.getByTestId('dropdown-item-debug-as-single-model'))
+
+ expect(onDebugWithMultipleModelChange).toHaveBeenCalledWith(modelAndParameter)
+ })
+
+ it('should remove model when remove is selected', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const models = [
+ createModelAndParameter({ id: '1' }),
+ createModelAndParameter({ id: '2' }),
+ createModelAndParameter({ id: '3' }),
+ ]
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: models,
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter: models[1] })
+
+ fireEvent.click(screen.getByTestId('dropdown-second-item-remove'))
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
+ true,
+ [models[0], models[2]],
+ )
+ })
+
+ it('should insert duplicated model at correct position', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const models = [
+ createModelAndParameter({ id: '1' }),
+ createModelAndParameter({ id: '2' }),
+ createModelAndParameter({ id: '3' }),
+ ]
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: models,
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ // Duplicate the second model
+ renderComponent({ modelAndParameter: models[1] })
+
+ fireEvent.click(screen.getByTestId('dropdown-item-duplicate'))
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(
+ true,
+ expect.arrayContaining([
+ models[0],
+ models[1],
+ expect.objectContaining({ model: models[1].model }),
+ models[2],
+ ]),
+ )
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle model not found in multipleModelConfigs', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ const { container } = renderComponent()
+
+ // Should show index 0 (not found returns -1, but display shows index + 1)
+ const indexElement = container.querySelector('.font-medium.italic')
+ expect(indexElement?.textContent?.trim()).toContain('0')
+ })
+
+ it('should handle empty textGenerationModelList', () => {
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: [],
+ })
+
+ renderComponent()
+
+ expect(screen.queryByTestId('chat-item')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('text-generation-item')).not.toBeInTheDocument()
+ })
+
+ it('should handle model with quotaExceeded status', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({ mode: AppModeEnum.CHAT })
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: createTextGenerationModelList([
+ { provider: 'anthropic', model: 'not-matching', status: ModelStatusEnum.quotaExceeded },
+ ]),
+ })
+
+ renderComponent()
+
+ // When provider/model doesn't match, ChatItem won't render
+ expect(screen.queryByTestId('chat-item')).not.toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.spec.tsx
new file mode 100644
index 0000000000..5ef1dcadbb
--- /dev/null
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.spec.tsx
@@ -0,0 +1,405 @@
+import type { ReactNode } from 'react'
+import type { ModelAndParameter } from '../types'
+import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { render, screen } from '@testing-library/react'
+import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import ModelParameterTrigger from './model-parameter-trigger'
+
+const mockUseDebugConfigurationContext = vi.fn()
+const mockUseDebugWithMultipleModelContext = vi.fn()
+const mockUseLanguage = vi.fn()
+
+type RenderTriggerProps = {
+ open: boolean
+ currentProvider: { provider: string } | null
+ currentModel: { model: string, status: ModelStatusEnum } | null
+}
+
+let capturedModalProps: {
+ isAdvancedMode: boolean
+ provider: string
+ modelId: string
+ completionParams: FormValue
+ onCompletionParamsChange: (params: FormValue) => void
+ setModel: (model: { modelId: string, provider: string }) => void
+ debugWithMultipleModel: boolean
+ onDebugWithMultipleModelChange: () => void
+ renderTrigger: (props: RenderTriggerProps) => ReactNode
+} | null = null
+
+vi.mock('@/context/debug-configuration', () => ({
+ useDebugConfigurationContext: () => mockUseDebugConfigurationContext(),
+}))
+
+vi.mock('./context', () => ({
+ useDebugWithMultipleModelContext: () => mockUseDebugWithMultipleModelContext(),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+ useLanguage: () => mockUseLanguage(),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
+ default: (props: typeof capturedModalProps) => {
+ capturedModalProps = props
+ // Render the trigger that the component passes
+ const triggerContent = props?.renderTrigger({
+ open: false,
+ currentProvider: null,
+ currentModel: null,
+ })
+ return (
+
+ {triggerContent}
+
+ )
+ },
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-icon', () => ({
+ default: ({ provider, modelName }: { provider: { provider: string }, modelName?: string }) => (
+
+ ModelIcon
+
+ ),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-name', () => ({
+ default: ({ modelItem }: { modelItem: { model: string } }) => (
+ {modelItem?.model}
+ ),
+}))
+
+vi.mock('@/app/components/base/tooltip', () => ({
+ default: ({ children, popupContent }: { children: ReactNode, popupContent: string }) => (
+ {children}
+ ),
+}))
+
+const createModelAndParameter = (overrides: Partial = {}): ModelAndParameter => ({
+ id: 'model-1',
+ model: 'gpt-3.5-turbo',
+ provider: 'openai',
+ parameters: { temperature: 0.7 },
+ ...overrides,
+})
+
+const renderComponent = (props: Partial<{ modelAndParameter: ModelAndParameter }> = {}) => {
+ const defaultProps = {
+ modelAndParameter: createModelAndParameter(),
+ ...props,
+ }
+ return render()
+}
+
+describe('ModelParameterTrigger', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ capturedModalProps = null
+
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [createModelAndParameter()],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ mockUseLanguage.mockReturnValue('en_US')
+ })
+
+ describe('rendering', () => {
+ it('should render ModelParameterModal', () => {
+ renderComponent()
+
+ expect(screen.getByTestId('model-parameter-modal')).toBeInTheDocument()
+ })
+
+ it('should pass correct props to ModelParameterModal', () => {
+ const modelAndParameter = createModelAndParameter({
+ provider: 'anthropic',
+ model: 'claude-3',
+ parameters: { max_tokens: 1000 },
+ })
+
+ renderComponent({ modelAndParameter })
+
+ expect(capturedModalProps?.provider).toBe('anthropic')
+ expect(capturedModalProps?.modelId).toBe('claude-3')
+ expect(capturedModalProps?.completionParams).toEqual({ max_tokens: 1000 })
+ expect(capturedModalProps?.debugWithMultipleModel).toBe(true)
+ })
+
+ it('should pass isAdvancedMode from context', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: true,
+ })
+
+ renderComponent()
+
+ expect(capturedModalProps?.isAdvancedMode).toBe(true)
+ })
+ })
+
+ describe('handleSelectModel', () => {
+ it('should call onMultipleModelConfigsChange with updated model', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const modelAndParameter = createModelAndParameter({ id: 'model-1' })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [modelAndParameter],
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter })
+
+ // Directly call the setModel callback
+ capturedModalProps?.setModel({ modelId: 'gpt-4', provider: 'openai' })
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(true, [
+ expect.objectContaining({
+ id: 'model-1',
+ model: 'gpt-4',
+ provider: 'openai',
+ }),
+ ])
+ })
+
+ it('should update correct model in array', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const models = [
+ createModelAndParameter({ id: 'model-1' }),
+ createModelAndParameter({ id: 'model-2' }),
+ createModelAndParameter({ id: 'model-3' }),
+ ]
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: models,
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter: models[1] })
+
+ capturedModalProps?.setModel({ modelId: 'gpt-4', provider: 'openai' })
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(true, [
+ models[0],
+ expect.objectContaining({
+ id: 'model-2',
+ model: 'gpt-4',
+ provider: 'openai',
+ }),
+ models[2],
+ ])
+ })
+ })
+
+ describe('handleParamsChange', () => {
+ it('should call onMultipleModelConfigsChange with updated parameters', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const modelAndParameter = createModelAndParameter({ id: 'model-1' })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [modelAndParameter],
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter })
+
+ capturedModalProps?.onCompletionParamsChange({ temperature: 0.8 })
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(true, [
+ expect.objectContaining({
+ id: 'model-1',
+ parameters: { temperature: 0.8 },
+ }),
+ ])
+ })
+
+ it('should preserve other model properties when changing params', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const modelAndParameter = createModelAndParameter({
+ id: 'model-1',
+ model: 'gpt-3.5-turbo',
+ provider: 'openai',
+ parameters: { temperature: 0.7 },
+ })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [modelAndParameter],
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter })
+
+ capturedModalProps?.onCompletionParamsChange({ temperature: 0.8 })
+
+ expect(onMultipleModelConfigsChange).toHaveBeenCalledWith(true, [
+ expect.objectContaining({
+ id: 'model-1',
+ model: 'gpt-3.5-turbo',
+ provider: 'openai',
+ parameters: { temperature: 0.8 },
+ }),
+ ])
+ })
+ })
+
+ describe('onDebugWithMultipleModelChange', () => {
+ it('should call context onDebugWithMultipleModelChange with modelAndParameter', () => {
+ const onDebugWithMultipleModelChange = vi.fn()
+ const modelAndParameter = createModelAndParameter()
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [modelAndParameter],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange,
+ })
+
+ renderComponent({ modelAndParameter })
+
+ capturedModalProps?.onDebugWithMultipleModelChange()
+
+ expect(onDebugWithMultipleModelChange).toHaveBeenCalledWith(modelAndParameter)
+ })
+ })
+
+ describe('index calculation', () => {
+ it('should find correct index in multipleModelConfigs', () => {
+ const models = [
+ createModelAndParameter({ id: 'model-1' }),
+ createModelAndParameter({ id: 'model-2' }),
+ createModelAndParameter({ id: 'model-3' }),
+ ]
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: models,
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter: models[2] })
+
+ // The component uses the index to update the correct model
+ // We verify this through the handleSelectModel behavior
+ expect(capturedModalProps).not.toBeNull()
+ })
+
+ it('should handle model not found in configs', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [createModelAndParameter({ id: 'other' })],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ // Should not throw even if model is not found
+ expect(() => renderComponent()).not.toThrow()
+ })
+ })
+
+ describe('trigger rendering', () => {
+ it('should render trigger content from renderTrigger', () => {
+ renderComponent()
+
+ // The trigger is rendered via renderTrigger callback
+ expect(screen.getByTestId('model-parameter-modal')).toBeInTheDocument()
+ })
+
+ it('should render "Select Model" text when no provider/model', () => {
+ renderComponent()
+
+ // When currentProvider and currentModel are null, shows "Select Model"
+ expect(screen.getByText('common.modelProvider.selectModel')).toBeInTheDocument()
+ })
+ })
+
+ describe('language context', () => {
+ it('should use language from useLanguage hook', () => {
+ mockUseLanguage.mockReturnValue('zh_Hans')
+
+ renderComponent()
+
+ // The language is used for MODEL_STATUS_TEXT tooltip
+ // We verify the hook is called
+ expect(mockUseLanguage).toHaveBeenCalled()
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle empty multipleModelConfigs', () => {
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [],
+ onMultipleModelConfigsChange: vi.fn(),
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ expect(() => renderComponent()).not.toThrow()
+ })
+
+ it('should handle undefined parameters', () => {
+ const modelAndParameter = createModelAndParameter({
+ parameters: undefined as unknown as FormValue,
+ })
+
+ expect(() => renderComponent({ modelAndParameter })).not.toThrow()
+ expect(capturedModalProps?.completionParams).toBeUndefined()
+ })
+
+ it('should handle model selection for model not in list', () => {
+ const onMultipleModelConfigsChange = vi.fn()
+ const modelAndParameter = createModelAndParameter({ id: 'not-in-list' })
+
+ mockUseDebugWithMultipleModelContext.mockReturnValue({
+ multipleModelConfigs: [createModelAndParameter({ id: 'different-model' })],
+ onMultipleModelConfigsChange,
+ onDebugWithMultipleModelChange: vi.fn(),
+ })
+
+ renderComponent({ modelAndParameter })
+
+ capturedModalProps?.setModel({ modelId: 'gpt-4', provider: 'openai' })
+
+ // index will be -1, so newModelConfigs[-1] will be undefined
+ // This tests the edge case behavior
+ expect(onMultipleModelConfigsChange).toHaveBeenCalled()
+ })
+ })
+
+ describe('renderTrigger with different states', () => {
+ it('should pass correct props to renderTrigger', () => {
+ renderComponent()
+
+ expect(capturedModalProps?.renderTrigger).toBeDefined()
+ expect(typeof capturedModalProps?.renderTrigger).toBe('function')
+ })
+
+ it('should render trigger with provider info when available', () => {
+ // Mock the modal to render trigger with provider
+ vi.doMock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
+ default: (props: typeof capturedModalProps) => {
+ capturedModalProps = props
+ const triggerContent = props?.renderTrigger({
+ open: false,
+ currentProvider: { provider: 'openai' },
+ currentModel: { model: 'gpt-3.5-turbo', status: ModelStatusEnum.active },
+ })
+ return (
+
+ {triggerContent}
+
+ )
+ },
+ }))
+
+ renderComponent()
+
+ expect(screen.getByTestId('model-parameter-modal')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.spec.tsx
new file mode 100644
index 0000000000..1876a10a0c
--- /dev/null
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.spec.tsx
@@ -0,0 +1,721 @@
+import type { ModelAndParameter } from '../types'
+import { render, screen } from '@testing-library/react'
+import { TransferMethod } from '@/app/components/base/chat/types'
+import { APP_CHAT_WITH_MULTIPLE_MODEL } from '../types'
+import TextGenerationItem from './text-generation-item'
+
+const mockUseDebugConfigurationContext = vi.fn()
+const mockUseProviderContext = vi.fn()
+const mockUseFeatures = vi.fn()
+const mockUseTextGeneration = vi.fn()
+const mockUseEventEmitterContextContext = vi.fn()
+const mockPromptVariablesToUserInputsForm = vi.fn()
+
+let capturedTextGenerationProps: {
+ content: string
+ isLoading: boolean
+ isResponding: boolean
+ messageId: string | null
+ className?: string
+} | null = null
+
+let eventSubscriptionCallback: ((v: { type: string, payload?: Record }) => void) | null = null
+
+vi.mock('@/context/debug-configuration', () => ({
+ useDebugConfigurationContext: () => mockUseDebugConfigurationContext(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: () => mockUseProviderContext(),
+}))
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+ useFeatures: (selector: (state: Record) => unknown) => mockUseFeatures(selector),
+}))
+
+vi.mock('@/app/components/base/text-generation/hooks', () => ({
+ useTextGeneration: () => mockUseTextGeneration(),
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+ useEventEmitterContextContext: () => mockUseEventEmitterContextContext(),
+}))
+
+vi.mock('@/utils/model-config', () => ({
+ promptVariablesToUserInputsForm: (...args: unknown[]) => mockPromptVariablesToUserInputsForm(...args),
+}))
+
+vi.mock('@/app/components/app/text-generate/item', () => ({
+ default: (props: typeof capturedTextGenerationProps) => {
+ capturedTextGenerationProps = props
+ return (
+
+ {props?.content}
+ {props?.isLoading ? 'yes' : 'no'}
+ {props?.isResponding ? 'yes' : 'no'}
+ {props?.messageId || 'null'}
+
+ )
+ },
+}))
+
+const createModelAndParameter = (overrides: Partial = {}): ModelAndParameter => ({
+ id: 'model-1',
+ model: 'gpt-3.5-turbo',
+ provider: 'openai',
+ parameters: { temperature: 0.7 },
+ ...overrides,
+})
+
+const createDefaultMocks = () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: {
+ prompt_template: 'Hello {{name}}',
+ prompt_variables: [
+ { key: 'name', name: 'Name', type: 'string', is_context_var: false },
+ ],
+ },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: { name: 'World' },
+ promptMode: 'simple',
+ speechToTextConfig: { enabled: true },
+ introduction: 'Welcome!',
+ suggestedQuestionsAfterAnswerConfig: { enabled: false },
+ citationConfig: { enabled: true },
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [{ id: 'ds-1' }],
+ datasetConfigs: { retrieval_model: 'single' },
+ })
+
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: [
+ {
+ provider: 'openai',
+ models: [
+ {
+ model: 'gpt-3.5-turbo',
+ model_properties: { mode: 'chat' },
+ },
+ ],
+ },
+ ],
+ })
+
+ mockUseFeatures.mockImplementation((selector: (state: Record) => unknown) => {
+ const state = {
+ features: {
+ moreLikeThis: { enabled: false },
+ moderation: { enabled: false },
+ text2speech: { enabled: false },
+ file: { enabled: true },
+ },
+ }
+ return selector(state)
+ })
+
+ mockUseTextGeneration.mockReturnValue({
+ completion: 'Generated text',
+ handleSend: vi.fn(),
+ isResponding: false,
+ messageId: 'msg-123',
+ })
+
+ mockUseEventEmitterContextContext.mockReturnValue({
+ eventEmitter: {
+ useSubscription: (callback: (v: { type: string, payload?: Record }) => void) => {
+ eventSubscriptionCallback = callback
+ },
+ },
+ })
+
+ mockPromptVariablesToUserInputsForm.mockReturnValue([
+ { variable: 'name', label: 'Name', type: 'text-input', required: true },
+ ])
+}
+
+const renderComponent = (props: Partial<{ modelAndParameter: ModelAndParameter }> = {}) => {
+ const defaultProps = {
+ modelAndParameter: createModelAndParameter(),
+ ...props,
+ }
+ return render()
+}
+
+describe('TextGenerationItem', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ capturedTextGenerationProps = null
+ eventSubscriptionCallback = null
+ createDefaultMocks()
+ })
+
+ describe('rendering', () => {
+ it('should render TextGeneration component', () => {
+ renderComponent()
+
+ expect(screen.getByTestId('text-generation')).toBeInTheDocument()
+ })
+
+ it('should pass completion content to TextGeneration', () => {
+ mockUseTextGeneration.mockReturnValue({
+ completion: 'Hello World',
+ handleSend: vi.fn(),
+ isResponding: false,
+ messageId: 'msg-1',
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('content')).toHaveTextContent('Hello World')
+ })
+
+ it('should show loading when no completion and responding', () => {
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend: vi.fn(),
+ isResponding: true,
+ messageId: null,
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('is-loading')).toHaveTextContent('yes')
+ })
+
+ it('should not show loading when completion exists', () => {
+ mockUseTextGeneration.mockReturnValue({
+ completion: 'Some text',
+ handleSend: vi.fn(),
+ isResponding: true,
+ messageId: 'msg-1',
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('is-loading')).toHaveTextContent('no')
+ })
+
+ it('should pass isResponding to TextGeneration', () => {
+ mockUseTextGeneration.mockReturnValue({
+ completion: 'Text',
+ handleSend: vi.fn(),
+ isResponding: true,
+ messageId: 'msg-1',
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('is-responding')).toHaveTextContent('yes')
+ })
+
+ it('should pass messageId to TextGeneration', () => {
+ mockUseTextGeneration.mockReturnValue({
+ completion: 'Text',
+ handleSend: vi.fn(),
+ isResponding: false,
+ messageId: 'msg-456',
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('message-id')).toHaveTextContent('msg-456')
+ })
+ })
+
+ describe('config composition', () => {
+ it('should use prompt_template in non-advanced mode', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: {
+ prompt_template: 'My Template',
+ prompt_variables: [],
+ },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'simple',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [],
+ datasetConfigs: {},
+ })
+
+ renderComponent()
+
+ // Config is built internally - we verify through the component rendering
+ expect(capturedTextGenerationProps).not.toBeNull()
+ })
+
+ it('should use empty pre_prompt in advanced mode', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: true,
+ modelConfig: {
+ configs: {
+ prompt_template: 'Should not be used',
+ prompt_variables: [],
+ },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'advanced',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: { custom: true },
+ completionPromptConfig: { custom: true },
+ dataSets: [],
+ datasetConfigs: {},
+ })
+
+ renderComponent()
+
+ expect(capturedTextGenerationProps).not.toBeNull()
+ })
+
+ it('should find context variable from prompt_variables', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: {
+ prompt_template: '',
+ prompt_variables: [
+ { key: 'context', name: 'Context', type: 'string', is_context_var: true },
+ { key: 'query', name: 'Query', type: 'string', is_context_var: false },
+ ],
+ },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'simple',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [],
+ datasetConfigs: {},
+ })
+
+ renderComponent()
+
+ expect(capturedTextGenerationProps).not.toBeNull()
+ })
+ })
+
+ describe('dataset configuration', () => {
+ it('should transform dataSets to postDatasets format', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: { prompt_template: '', prompt_variables: [] },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'simple',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [{ id: 'ds-1' }, { id: 'ds-2' }],
+ datasetConfigs: { retrieval_model: 'multiple' },
+ })
+
+ renderComponent()
+
+ // postDatasets is used in config.dataset_configs.datasets
+ expect(capturedTextGenerationProps).not.toBeNull()
+ })
+ })
+
+ describe('event subscription', () => {
+ it('should handle APP_CHAT_WITH_MULTIPLE_MODEL event', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ renderComponent()
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Generate text', files: [] },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ 'apps/app-123/completion-messages',
+ expect.objectContaining({
+ inputs: { name: 'World' },
+ }),
+ )
+ })
+
+ it('should ignore other event types', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ renderComponent()
+
+ eventSubscriptionCallback?.({
+ type: 'OTHER_EVENT',
+ payload: {},
+ })
+
+ expect(handleSend).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('doSend function', () => {
+ it('should include model configuration', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ const modelAndParameter = createModelAndParameter({
+ provider: 'anthropic',
+ model: 'claude-3',
+ parameters: { max_tokens: 2000 },
+ })
+
+ renderComponent({ modelAndParameter })
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test', files: [] },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.objectContaining({
+ model_config: expect.objectContaining({
+ model: expect.objectContaining({
+ provider: 'anthropic',
+ name: 'claude-3',
+ completion_params: { max_tokens: 2000 },
+ }),
+ }),
+ }),
+ )
+ })
+
+ it('should include files with local_file transfer method handled', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ renderComponent()
+
+ const files = [
+ { id: 'f1', transfer_method: TransferMethod.local_file, url: 'blob:123' },
+ { id: 'f2', transfer_method: TransferMethod.remote_url, url: 'https://example.com/file' },
+ ]
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test', files },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.objectContaining({
+ files: [
+ expect.objectContaining({ id: 'f1', transfer_method: TransferMethod.local_file, url: '' }),
+ expect.objectContaining({ id: 'f2', transfer_method: TransferMethod.remote_url, url: 'https://example.com/file' }),
+ ],
+ }),
+ )
+ })
+
+ it('should not include files when file upload is disabled', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ mockUseFeatures.mockImplementation((selector: (state: Record) => unknown) => {
+ const state = {
+ features: {
+ moreLikeThis: { enabled: false },
+ moderation: { enabled: false },
+ text2speech: { enabled: false },
+ file: { enabled: false },
+ },
+ }
+ return selector(state)
+ })
+
+ renderComponent()
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test', files: [{ id: 'f1' }] },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.not.objectContaining({
+ files: expect.anything(),
+ }),
+ )
+ })
+
+ it('should not include files when files array is empty', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ renderComponent()
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test', files: [] },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.not.objectContaining({
+ files: expect.anything(),
+ }),
+ )
+ })
+
+ it('should not include files when files is undefined', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ renderComponent()
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test' },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.not.objectContaining({
+ files: expect.anything(),
+ }),
+ )
+ })
+ })
+
+ describe('model resolution', () => {
+ it('should find current provider and model', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: [
+ {
+ provider: 'openai',
+ models: [
+ { model: 'gpt-3.5-turbo', model_properties: { mode: 'chat' } },
+ { model: 'gpt-4', model_properties: { mode: 'chat' } },
+ ],
+ },
+ ],
+ })
+
+ const modelAndParameter = createModelAndParameter({
+ provider: 'openai',
+ model: 'gpt-4',
+ })
+
+ renderComponent({ modelAndParameter })
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test', files: [] },
+ })
+
+ expect(handleSend).toHaveBeenCalledWith(
+ expect.any(String),
+ expect.objectContaining({
+ model_config: expect.objectContaining({
+ model: expect.objectContaining({
+ mode: 'chat',
+ }),
+ }),
+ }),
+ )
+ })
+
+ it('should handle provider not found', () => {
+ const handleSend = vi.fn()
+ mockUseTextGeneration.mockReturnValue({
+ completion: '',
+ handleSend,
+ isResponding: false,
+ messageId: null,
+ })
+
+ mockUseProviderContext.mockReturnValue({
+ textGenerationModelList: [],
+ })
+
+ renderComponent()
+
+ eventSubscriptionCallback?.({
+ type: APP_CHAT_WITH_MULTIPLE_MODEL,
+ payload: { message: 'Test', files: [] },
+ })
+
+ // Should still call handleSend without crashing
+ expect(handleSend).toHaveBeenCalled()
+ })
+ })
+
+ describe('edge cases', () => {
+ it('should handle null eventEmitter', () => {
+ mockUseEventEmitterContextContext.mockReturnValue({
+ eventEmitter: null,
+ })
+
+ expect(() => renderComponent()).not.toThrow()
+ })
+
+ it('should handle empty prompt_variables', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: { prompt_template: '', prompt_variables: [] },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'simple',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [],
+ datasetConfigs: {},
+ })
+
+ expect(() => renderComponent()).not.toThrow()
+ })
+
+ it('should handle no context variable found', () => {
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: {
+ prompt_template: '',
+ prompt_variables: [
+ { key: 'var1', name: 'Var1', type: 'string', is_context_var: false },
+ ],
+ },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'simple',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [],
+ datasetConfigs: {},
+ })
+
+ renderComponent()
+
+ // Should use empty string for dataset_query_variable
+ expect(capturedTextGenerationProps).not.toBeNull()
+ })
+ })
+
+ describe('promptVariablesToUserInputsForm', () => {
+ it('should call promptVariablesToUserInputsForm with prompt_variables', () => {
+ const promptVariables = [
+ { key: 'name', name: 'Name', type: 'string' },
+ { key: 'age', name: 'Age', type: 'number' },
+ ]
+
+ mockUseDebugConfigurationContext.mockReturnValue({
+ isAdvancedMode: false,
+ modelConfig: {
+ configs: { prompt_template: '', prompt_variables: promptVariables },
+ system_parameters: {},
+ },
+ appId: 'app-123',
+ inputs: {},
+ promptMode: 'simple',
+ speechToTextConfig: {},
+ introduction: '',
+ suggestedQuestionsAfterAnswerConfig: {},
+ citationConfig: {},
+ externalDataToolsConfig: [],
+ chatPromptConfig: {},
+ completionPromptConfig: {},
+ dataSets: [],
+ datasetConfigs: {},
+ })
+
+ renderComponent()
+
+ expect(mockPromptVariablesToUserInputsForm).toHaveBeenCalledWith(promptVariables)
+ })
+ })
+})
diff --git a/web/app/components/datasets/create/website/watercrawl/index.spec.tsx b/web/app/components/datasets/create/website/watercrawl/index.spec.tsx
index 646c59eb75..c3caab895a 100644
--- a/web/app/components/datasets/create/website/watercrawl/index.spec.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.spec.tsx
@@ -73,6 +73,12 @@ const createDefaultProps = (overrides: Partial[0]>
describe('WaterCrawl', () => {
beforeEach(() => {
vi.clearAllMocks()
+ vi.useFakeTimers({ shouldAdvanceTime: true })
+ })
+
+ afterEach(() => {
+ vi.runOnlyPendingTimers()
+ vi.useRealTimers()
})
// Tests for initial component rendering