youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/llm-node-support-tools

Browse Source
This commit is contained in:
zxhlyh
2025-12-25 13:45:49 +08:00
parent a7859de625 e6e439f54c
commit 0cff94d90e
427 changed files with 6016 additions and 2071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/app-sidebar/dataset-info/index.tsx
View File

@ -73,7 +73,7 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
{isExternalProvider && t('dataset.externalTag')}
{!isExternalProvider && isPipelinePublished && dataset.doc_form && dataset.indexing_technique && (
<div className="flex items-center gap-x-2">
<span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
<span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}` as any) as string}</span>
<span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
</div>
)}

2
web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
View File

@ -116,7 +116,7 @@ const DatasetSidebarDropdown = ({
{isExternalProvider && t('dataset.externalTag')}
{!isExternalProvider && dataset.doc_form && dataset.indexing_technique && (
<div className="flex items-center gap-x-2">
<span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
<span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}` as any) as string}</span>
<span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
</div>
)}

2
web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
View File

@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

350
web/app/components/app/annotation/filter.spec.tsx
View File

@ -1,72 +1,332 @@
import type { UseQueryResult } from '@tanstack/react-query'
import type { Mock } from 'vitest'
import type { QueryParam } from './filter'
import type { AnnotationsCountResponse } from '@/models/log'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import useSWR from 'swr'
import * as useLogModule from '@/service/use-log'
import Filter from './filter'
vi.mock('swr', () => ({
__esModule: true,
default: vi.fn(),
}))
vi.mock('@/service/use-log')
vi.mock('@/service/log', () => ({
fetchAnnotationsCount: vi.fn(),
}))
const mockUseAnnotationsCount = useLogModule.useAnnotationsCount as Mock
const mockUseSWR = useSWR as unknown as Mock
// ============================================================================
// Test Utilities
// ============================================================================
const createQueryClient = () => new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
})
const renderWithQueryClient = (ui: React.ReactElement) => {
const queryClient = createQueryClient()
return render(
<QueryClientProvider client={queryClient}>
{ui}
</QueryClientProvider>,
)
}
// ============================================================================
// Mock Return Value Factory
// ============================================================================
type MockQueryResult<T> = Pick<UseQueryResult<T>, 'data' | 'isLoading' | 'error' | 'refetch'>
const createMockQueryResult = <T,>(
overrides: Partial<MockQueryResult<T>> = {},
): MockQueryResult<T> => ({
data: undefined,
isLoading: false,
error: null,
refetch: vi.fn(),
...overrides,
})
// ============================================================================
// Tests
// ============================================================================
describe('Filter', () => {
const appId = 'app-1'
const childContent = 'child-content'
const defaultQueryParams: QueryParam = { keyword: '' }
beforeEach(() => {
vi.clearAllMocks()
})
it('should render nothing until annotation count is fetched', () => {
mockUseSWR.mockReturnValue({ data: undefined })
// --------------------------------------------------------------------------
// Rendering Tests (REQUIRED)
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render nothing when data is loading', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({ isLoading: true }),
)
const { container } = render(
<Filter
appId={appId}
queryParams={{ keyword: '' }}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Act
const { container } = renderWithQueryClient(
<Filter
appId={appId}
queryParams={defaultQueryParams}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
expect(container.firstChild).toBeNull()
expect(mockUseSWR).toHaveBeenCalledWith(
{ url: `/apps/${appId}/annotations/count` },
expect.any(Function),
)
// Assert
expect(container.firstChild).toBeNull()
})
it('should render nothing when data is undefined', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({ data: undefined, isLoading: false }),
)
// Act
const { container } = renderWithQueryClient(
<Filter
appId={appId}
queryParams={defaultQueryParams}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Assert
expect(container.firstChild).toBeNull()
})
it('should render filter and children when data is available', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 20 },
isLoading: false,
}),
)
// Act
renderWithQueryClient(
<Filter
appId={appId}
queryParams={defaultQueryParams}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Assert
expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
expect(screen.getByText(childContent)).toBeInTheDocument()
})
})
it('should propagate keyword changes and clearing behavior', () => {
mockUseSWR.mockReturnValue({ data: { total: 20 } })
const queryParams: QueryParam = { keyword: 'prefill' }
const setQueryParams = vi.fn()
// --------------------------------------------------------------------------
// Props Tests (REQUIRED)
// --------------------------------------------------------------------------
describe('Props', () => {
it('should call useAnnotationsCount with appId', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 10 },
isLoading: false,
}),
)
const { container } = render(
<Filter
appId={appId}
queryParams={queryParams}
setQueryParams={setQueryParams}
>
<div>{childContent}</div>
</Filter>,
)
// Act
renderWithQueryClient(
<Filter
appId={appId}
queryParams={defaultQueryParams}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
const input = screen.getByPlaceholderText('common.operation.search') as HTMLInputElement
fireEvent.change(input, { target: { value: 'updated' } })
expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
// Assert
expect(mockUseAnnotationsCount).toHaveBeenCalledWith(appId)
})
const clearButton = input.parentElement?.querySelector('div.cursor-pointer') as HTMLElement
fireEvent.click(clearButton)
expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
it('should display keyword value in input', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 10 },
isLoading: false,
}),
)
const queryParams: QueryParam = { keyword: 'test-keyword' }
expect(container).toHaveTextContent(childContent)
// Act
renderWithQueryClient(
<Filter
appId={appId}
queryParams={queryParams}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Assert
expect(screen.getByPlaceholderText('common.operation.search')).toHaveValue('test-keyword')
})
})
// --------------------------------------------------------------------------
// User Interactions
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call setQueryParams when typing in search input', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 20 },
isLoading: false,
}),
)
const queryParams: QueryParam = { keyword: '' }
const setQueryParams = vi.fn()
renderWithQueryClient(
<Filter
appId={appId}
queryParams={queryParams}
setQueryParams={setQueryParams}
>
<div>{childContent}</div>
</Filter>,
)
// Act
const input = screen.getByPlaceholderText('common.operation.search')
fireEvent.change(input, { target: { value: 'updated' } })
// Assert
expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
})
it('should call setQueryParams with empty keyword when clearing input', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 20 },
isLoading: false,
}),
)
const queryParams: QueryParam = { keyword: 'prefill' }
const setQueryParams = vi.fn()
renderWithQueryClient(
<Filter
appId={appId}
queryParams={queryParams}
setQueryParams={setQueryParams}
>
<div>{childContent}</div>
</Filter>,
)
// Act
const input = screen.getByPlaceholderText('common.operation.search')
const clearButton = input.parentElement?.querySelector('div.cursor-pointer')
if (clearButton)
fireEvent.click(clearButton)
// Assert
expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
})
})
// --------------------------------------------------------------------------
// Edge Cases (REQUIRED)
// --------------------------------------------------------------------------
describe('Edge Cases', () => {
it('should handle empty keyword in queryParams', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 5 },
isLoading: false,
}),
)
// Act
renderWithQueryClient(
<Filter
appId={appId}
queryParams={{ keyword: '' }}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Assert
expect(screen.getByPlaceholderText('common.operation.search')).toHaveValue('')
})
it('should handle undefined keyword in queryParams', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 5 },
isLoading: false,
}),
)
// Act
renderWithQueryClient(
<Filter
appId={appId}
queryParams={{ keyword: undefined }}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Assert
expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
})
it('should handle zero count', () => {
// Arrange
mockUseAnnotationsCount.mockReturnValue(
createMockQueryResult<AnnotationsCountResponse>({
data: { count: 0 },
isLoading: false,
}),
)
// Act
renderWithQueryClient(
<Filter
appId={appId}
queryParams={defaultQueryParams}
setQueryParams={vi.fn()}
>
<div>{childContent}</div>
</Filter>,
)
// Assert - should still render when count is 0
expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
})
})
})

8
web/app/components/app/annotation/filter.tsx
View File

@ -2,9 +2,8 @@
import type { FC } from 'react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import Input from '@/app/components/base/input'
import { fetchAnnotationsCount } from '@/service/log'
import { useAnnotationsCount } from '@/service/use-log'
export type QueryParam = {
keyword?: string
@ -23,10 +22,9 @@ const Filter: FC<IFilterProps> = ({
setQueryParams,
children,
}) => {
// TODO: change fetch list api
const { data } = useSWR({ url: `/apps/${appId}/annotations/count` }, fetchAnnotationsCount)
const { data, isLoading } = useAnnotationsCount(appId)
const { t } = useTranslation()
if (!data)
if (isLoading || !data)
return null
return (
<div className="mb-2 flex flex-row flex-wrap items-center justify-between gap-2">

7
web/app/components/app/annotation/header-opts/index.spec.tsx
View File

@ -1,5 +1,6 @@
import type { ComponentProps } from 'react'
import type { AnnotationItemBasic } from '../type'
import type { Locale } from '@/i18n-config'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
@ -166,7 +167,7 @@ type HeaderOptionsProps = ComponentProps<typeof HeaderOptions>
const renderComponent = (
props: Partial<HeaderOptionsProps> = {},
locale: string = LanguagesSupported[0] as string,
locale: Locale = LanguagesSupported[0],
) => {
const defaultProps: HeaderOptionsProps = {
appId: 'test-app-id',
@ -353,7 +354,7 @@ describe('HeaderOptions', () => {
})
const revokeSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(vi.fn())
renderComponent({}, LanguagesSupported[1] as string)
renderComponent({}, LanguagesSupported[1])
await expandExportMenu(user)
@ -441,7 +442,7 @@ describe('HeaderOptions', () => {
view.rerender(
<I18NContext.Provider
value={{
locale: LanguagesSupported[0] as string,
locale: LanguagesSupported[0],
i18n: {},
setLocaleOnClient: vi.fn(),
}}

2
web/app/components/app/app-publisher/index.tsx
View File

@ -84,7 +84,7 @@ const AccessModeDisplay: React.FC<{ mode?: AccessMode }> = ({ mode }) => {
<>
<Icon className="h-4 w-4 shrink-0 text-text-secondary" />
<div className="grow truncate">
<span className="system-sm-medium text-text-secondary">{t(`app.accessControlDialog.accessItems.${label}`)}</span>
<span className="system-sm-medium text-text-secondary">{t(`app.accessControlDialog.accessItems.${label}` as any) as string}</span>
</div>
</>
)

71
web/app/components/app/configuration/base/feature-panel/index.spec.tsx Normal file
View File

@ -0,0 +1,71 @@
import { render, screen } from '@testing-library/react'
import FeaturePanel from './index'
describe('FeaturePanel', () => {
// Rendering behavior for standard layout.
describe('Rendering', () => {
it('should render the title and children when provided', () => {
// Arrange
render(
<FeaturePanel title="Panel Title">
<div>Panel Body</div>
</FeaturePanel>,
)
// Assert
expect(screen.getByText('Panel Title')).toBeInTheDocument()
expect(screen.getByText('Panel Body')).toBeInTheDocument()
})
})
// Prop-driven presentation details like icons, actions, and spacing.
describe('Props', () => {
it('should render header icon and right slot and apply header border', () => {
// Arrange
render(
<FeaturePanel
title="Feature"
headerIcon={<span>Icon</span>}
headerRight={<button type="button">Action</button>}
hasHeaderBottomBorder={true}
/>,
)
// Assert
expect(screen.getByText('Icon')).toBeInTheDocument()
expect(screen.getByText('Action')).toBeInTheDocument()
const header = screen.getByTestId('feature-panel-header')
expect(header).toHaveClass('border-b')
})
it('should apply custom className and remove padding when noBodySpacing is true', () => {
// Arrange
const { container } = render(
<FeaturePanel title="Spacing" className="custom-panel" noBodySpacing={true}>
<div>Body</div>
</FeaturePanel>,
)
// Assert
const root = container.firstElementChild as HTMLElement
expect(root).toHaveClass('custom-panel')
expect(root).toHaveClass('pb-0')
const body = screen.getByTestId('feature-panel-body')
expect(body).not.toHaveClass('mt-1')
expect(body).not.toHaveClass('px-3')
})
})
// Edge cases when optional content is missing.
describe('Edge Cases', () => {
it('should not render the body wrapper when children is undefined', () => {
// Arrange
render(<FeaturePanel title="No Body" />)
// Assert
expect(screen.queryByText('No Body')).toBeInTheDocument()
expect(screen.queryByText('Panel Body')).not.toBeInTheDocument()
expect(screen.queryByTestId('feature-panel-body')).not.toBeInTheDocument()
})
})
})

4
web/app/components/app/configuration/base/feature-panel/index.tsx
View File

@ -25,7 +25,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
return (
<div className={cn('rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
{/* Header */}
<div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
<div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')} data-testid="feature-panel-header">
<div className="flex h-8 items-center justify-between">
<div className="flex shrink-0 items-center space-x-1">
{headerIcon && <div className="flex h-6 w-6 items-center justify-center">{headerIcon}</div>}
@ -38,7 +38,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
</div>
{/* Body */}
{children && (
<div className={cn(!noBodySpacing && 'mt-1 px-3')}>
<div className={cn(!noBodySpacing && 'mt-1 px-3')} data-testid="feature-panel-body">
{children}
</div>
)}

2
web/app/components/app/configuration/base/operation-btn/index.tsx
View File

@ -4,7 +4,7 @@ import {
RiAddLine,
RiEditLine,
} from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'

2
web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
View File

@ -4,8 +4,8 @@ import type { ExternalDataTool } from '@/models/common'
import type { PromptVariable } from '@/models/debug'
import type { GenRes } from '@/service/debug'
import { useBoolean } from 'ahooks'
import { noop } from 'es-toolkit/compat'
import { produce } from 'immer'
import { noop } from 'lodash-es'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'

4
web/app/components/app/configuration/config-var/config-modal/index.tsx
View File

@ -96,7 +96,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
if (!isValid) {
Toast.notify({
type: 'error',
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('appDebug.variableConfig.varName') }),
message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: t('appDebug.variableConfig.varName') }) as string,
})
return false
}
@ -216,7 +216,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
if (!isValid) {
Toast.notify({
type: 'error',
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }) as string,
})
return
}

2
web/app/components/app/configuration/config-var/index.tsx
View File

@ -98,7 +98,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
if (errorMsgKey) {
Toast.notify({
type: 'error',
message: t(errorMsgKey, { key: t(typeName) }),
message: t(errorMsgKey as any, { key: t(typeName as any) as string }) as string,
})
return false
}

2
web/app/components/app/configuration/config-var/select-type-item/index.tsx
View File

@ -23,7 +23,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
onClick,
}) => {
const { t } = useTranslation()
const typeName = t(`appDebug.variableConfig.${i18nFileTypeMap[type] || type}`)
const typeName = t(`appDebug.variableConfig.${i18nFileTypeMap[type] || type}` as any) as string
return (
<div

2
web/app/components/app/configuration/config/agent/prompt-editor.tsx
View File

@ -2,7 +2,7 @@
import type { FC } from 'react'
import type { ExternalDataTool } from '@/models/common'
import copy from 'copy-to-clipboard'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'

4
web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
View File

@ -141,7 +141,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
const [editorKey, setEditorKey] = useState(`${flowId}-0`)
const handleChooseTemplate = useCallback((key: string) => {
return () => {
const template = t(`appDebug.generate.template.${key}.instruction`)
const template = t(`appDebug.generate.template.${key}.instruction` as any) as string
setInstruction(template)
setEditorKey(`${flowId}-${Date.now()}`)
}
@ -322,7 +322,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
<TryLabel
key={item.key}
Icon={item.icon}
text={t(`appDebug.generate.template.${item.key}.name`)}
text={t(`appDebug.generate.template.${item.key}.name` as any) as string}
onClick={handleChooseTemplate(item.key)}
/>
))}

2
web/app/components/app/configuration/dataset-config/index.spec.tsx
View File

@ -52,7 +52,7 @@ vi.mock('../debug/hooks', () => ({
useFormattingChangedDispatcher: vi.fn(() => vi.fn()),
}))
vi.mock('lodash-es', () => ({
vi.mock('es-toolkit/compat', () => ({
intersectionBy: vi.fn((...arrays) => {
// Mock realistic intersection behavior based on metadata name
const validArrays = arrays.filter(Array.isArray)

2
web/app/components/app/configuration/dataset-config/index.tsx
View File

@ -8,8 +8,8 @@ import type {
MetadataFilteringModeEnum,
} from '@/app/components/workflow/nodes/knowledge-retrieval/types'
import type { DataSet } from '@/models/datasets'
import { intersectionBy } from 'es-toolkit/compat'
import { produce } from 'immer'
import { intersectionBy } from 'lodash-es'
import * as React from 'react'
import { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'

13
web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
View File

@ -1,6 +1,7 @@
'use client'
import type { FC } from 'react'
import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
import type { ModelConfig } from '@/app/components/workflow/types'
import type {
DataSet,
@ -8,7 +9,6 @@ import type {
import type {
DatasetConfigs,
} from '@/models/debug'
import { noop } from 'lodash-es'
import { memo, useCallback, useEffect, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Divider from '@/app/components/base/divider'
@ -33,17 +33,20 @@ type Props = {
selectedDatasets?: DataSet[]
isInWorkflow?: boolean
singleRetrievalModelConfig?: ModelConfig
onSingleRetrievalModelChange?: (config: ModelConfig) => void
onSingleRetrievalModelParamsChange?: (config: ModelConfig) => void
onSingleRetrievalModelChange?: ModelParameterModalProps['setModel']
onSingleRetrievalModelParamsChange?: ModelParameterModalProps['onCompletionParamsChange']
}
const noopModelChange: ModelParameterModalProps['setModel'] = () => {}
const noopParamsChange: ModelParameterModalProps['onCompletionParamsChange'] = () => {}
const ConfigContent: FC<Props> = ({
datasetConfigs,
onChange,
isInWorkflow,
singleRetrievalModelConfig: singleRetrievalConfig = {} as ModelConfig,
onSingleRetrievalModelChange = noop,
onSingleRetrievalModelParamsChange = noop,
onSingleRetrievalModelChange = noopModelChange,
onSingleRetrievalModelParamsChange = noopParamsChange,
selectedDatasets = [],
}) => {
const { t } = useTranslation()

2
web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
View File

@ -1,4 +1,4 @@
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import Slider from '@/app/components/base/slider'

6
web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
View File

@ -3,7 +3,7 @@ import type { Member } from '@/models/common'
import type { DataSet } from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { RiCloseLine } from '@remixicon/react'
import { isEqual } from 'lodash-es'
import { isEqual } from 'es-toolkit/compat'
import { useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
@ -295,7 +295,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
isExternal
rowClass={rowClass}
labelClass={labelClass}
t={t}
t={t as any}
topK={topK}
scoreThreshold={scoreThreshold}
scoreThresholdEnabled={scoreThresholdEnabled}
@ -308,7 +308,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
isExternal={false}
rowClass={rowClass}
labelClass={labelClass}
t={t}
t={t as any}
indexMethod={indexMethod}
retrievalConfig={retrievalConfig}
showMultiModalTip={showMultiModalTip}

2
web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx
View File

@ -1,7 +1,7 @@
'use client'
import type { ModelAndParameter } from '../types'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { createContext, useContext } from 'use-context-selector'
export type DebugWithMultipleModelContextType = {

2
web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
View File

@ -4,7 +4,7 @@ import type {
OnSend,
TextGenerationConfig,
} from '@/app/components/base/text-generation/types'
import { cloneDeep, noop } from 'lodash-es'
import { cloneDeep, noop } from 'es-toolkit/compat'
import { memo } from 'react'
import TextGeneration from '@/app/components/app/text-generate/item'
import { TransferMethod } from '@/app/components/base/chat/types'

2
web/app/components/app/configuration/debug/hooks.tsx
View File

@ -6,7 +6,7 @@ import type {
ChatConfig,
ChatItem,
} from '@/app/components/base/chat/types'
import cloneDeep from 'lodash-es/cloneDeep'
import { cloneDeep } from 'es-toolkit/compat'
import {
useCallback,
useRef,

3
web/app/components/app/configuration/debug/index.tsx
View File

@ -11,9 +11,8 @@ import {
RiSparklingFill,
} from '@remixicon/react'
import { useBoolean } from 'ahooks'
import { cloneDeep, noop } from 'es-toolkit/compat'
import { produce, setAutoFreeze } from 'immer'
import { noop } from 'lodash-es'
import cloneDeep from 'lodash-es/cloneDeep'
import * as React from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts
View File

@ -1,7 +1,7 @@
import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
import type { ChatPromptConfig, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug'
import { clone } from 'es-toolkit/compat'
import { produce } from 'immer'
import { clone } from 'lodash-es'
import { useState } from 'react'
import { checkHasContextBlock, checkHasHistoryBlock, checkHasQueryBlock, PRE_PROMPT_PLACEHOLDER_TEXT } from '@/app/components/base/prompt-editor/constants'
import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'

2
web/app/components/app/configuration/index.tsx
View File

@ -20,8 +20,8 @@ import type {
import type { ModelConfig as BackendModelConfig, UserInputFormItem, VisionSettings } from '@/types/app'
import { CodeBracketIcon } from '@heroicons/react/20/solid'
import { useBoolean, useGetState } from 'ahooks'
import { clone, isEqual } from 'es-toolkit/compat'
import { produce } from 'immer'
import { clone, isEqual } from 'lodash-es'
import { usePathname } from 'next/navigation'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

2
web/app/components/app/configuration/tools/external-data-tool-modal.tsx
View File

@ -3,7 +3,7 @@ import type {
CodeBasedExtensionItem,
ExternalDataTool,
} from '@/models/common'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'

31
web/app/components/app/create-app-dialog/app-list/index.tsx
View File

@ -8,7 +8,6 @@ import { useRouter } from 'next/navigation'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import { useContext } from 'use-context-selector'
import AppTypeSelector from '@/app/components/app/type-selector'
import { trackEvent } from '@/app/components/base/amplitude'
@ -24,7 +23,8 @@ import ExploreContext from '@/context/explore-context'
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
import { DSLImportMode } from '@/models/app'
import { importDSL } from '@/service/apps'
import { fetchAppDetail, fetchAppList } from '@/service/explore'
import { fetchAppDetail } from '@/service/explore'
import { useExploreAppList } from '@/service/use-explore'
import { AppModeEnum } from '@/types/app'
import { getRedirection } from '@/utils/app-redirection'
import { cn } from '@/utils/classnames'
@ -70,23 +70,14 @@ const Apps = ({
})
const {
data: { categories, allList },
} = useSWR(
['/explore/apps'],
() =>
fetchAppList().then(({ categories, recommended_apps }) => ({
categories,
allList: recommended_apps.sort((a, b) => a.position - b.position),
})),
{
fallbackData: {
categories: [],
allList: [],
},
},
)
data,
isLoading,
} = useExploreAppList()
const filteredList = useMemo(() => {
if (!data)
return []
const { allList } = data
const filteredByCategory = allList.filter((item) => {
if (currCategory === allCategoriesEn)
return true
@ -107,7 +98,7 @@ const Apps = ({
return true
return false
})
}, [currentType, currCategory, allCategoriesEn, allList])
}, [currentType, currCategory, allCategoriesEn, data])
const searchFilteredList = useMemo(() => {
if (!searchKeywords || !filteredList || filteredList.length === 0)
@ -169,7 +160,7 @@ const Apps = ({
}
}
if (!categories || categories.length === 0) {
if (isLoading) {
return (
<div className="flex h-full items-center">
<Loading type="area" />
@ -203,7 +194,7 @@ const Apps = ({
<div className="relative flex flex-1 overflow-y-auto">
{!searchKeywords && (
<div className="h-full w-[200px] p-4">
<Sidebar current={currCategory as AppCategories} categories={categories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
<Sidebar current={currCategory as AppCategories} categories={data?.categories || []} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
</div>
)}
<div className="h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2">

2
web/app/components/app/create-from-dsl-modal/index.tsx
View File

@ -3,7 +3,7 @@
import type { MouseEventHandler } from 'react'
import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
import { useDebounceFn, useKeyPress } from 'ahooks'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { useRouter } from 'next/navigation'
import { useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/app/duplicate-modal/index.tsx
View File

@ -1,7 +1,7 @@
'use client'
import type { AppIconType } from '@/types/app'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'

176
web/app/components/app/log-annotation/index.spec.tsx Normal file
View File

@ -0,0 +1,176 @@
import type { App, AppIconType } from '@/types/app'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { useStore as useAppStore } from '@/app/components/app/store'
import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
import { AppModeEnum } from '@/types/app'
import LogAnnotation from './index'
const mockRouterPush = vi.fn()
vi.mock('next/navigation', () => ({
useRouter: () => ({
push: mockRouterPush,
}),
}))
vi.mock('@/app/components/app/annotation', () => ({
__esModule: true,
default: ({ appDetail }: { appDetail: App }) => (
<div data-testid="annotation" data-app-id={appDetail.id} />
),
}))
vi.mock('@/app/components/app/log', () => ({
__esModule: true,
default: ({ appDetail }: { appDetail: App }) => (
<div data-testid="log" data-app-id={appDetail.id} />
),
}))
vi.mock('@/app/components/app/workflow-log', () => ({
__esModule: true,
default: ({ appDetail }: { appDetail: App }) => (
<div data-testid="workflow-log" data-app-id={appDetail.id} />
),
}))
const createMockApp = (overrides: Partial<App> = {}): App => ({
id: 'app-123',
name: 'Test App',
description: 'Test app description',
author_name: 'Test Author',
icon_type: 'emoji' as AppIconType,
icon: ':icon:',
icon_background: '#FFEAD5',
icon_url: null,
use_icon_as_answer_icon: false,
mode: AppModeEnum.CHAT,
enable_site: true,
enable_api: true,
api_rpm: 60,
api_rph: 3600,
is_demo: false,
model_config: {} as App['model_config'],
app_model_config: {} as App['app_model_config'],
created_at: Date.now(),
updated_at: Date.now(),
site: {
access_token: 'token',
app_base_url: 'https://example.com',
} as App['site'],
api_base_url: 'https://api.example.com',
tags: [],
access_mode: 'public_access' as App['access_mode'],
...overrides,
})
describe('LogAnnotation', () => {
beforeEach(() => {
vi.clearAllMocks()
useAppStore.setState({ appDetail: createMockApp() })
})
// Rendering behavior
describe('Rendering', () => {
it('should render loading state when app detail is missing', () => {
// Arrange
useAppStore.setState({ appDetail: undefined })
// Act
render(<LogAnnotation pageType={PageType.log} />)
// Assert
expect(screen.getByRole('status')).toBeInTheDocument()
})
it('should render log and annotation tabs for non-completion apps', () => {
// Arrange
useAppStore.setState({ appDetail: createMockApp({ mode: AppModeEnum.CHAT }) })
// Act
render(<LogAnnotation pageType={PageType.log} />)
// Assert
expect(screen.getByText('appLog.title')).toBeInTheDocument()
expect(screen.getByText('appAnnotation.title')).toBeInTheDocument()
})
it('should render only log tab for completion apps', () => {
// Arrange
useAppStore.setState({ appDetail: createMockApp({ mode: AppModeEnum.COMPLETION }) })
// Act
render(<LogAnnotation pageType={PageType.log} />)
// Assert
expect(screen.getByText('appLog.title')).toBeInTheDocument()
expect(screen.queryByText('appAnnotation.title')).not.toBeInTheDocument()
})
it('should hide tabs and render workflow log in workflow mode', () => {
// Arrange
useAppStore.setState({ appDetail: createMockApp({ mode: AppModeEnum.WORKFLOW }) })
// Act
render(<LogAnnotation pageType={PageType.log} />)
// Assert
expect(screen.queryByText('appLog.title')).not.toBeInTheDocument()
expect(screen.getByTestId('workflow-log')).toBeInTheDocument()
})
})
// Prop-driven behavior
describe('Props', () => {
it('should render log content when page type is log', () => {
// Arrange
useAppStore.setState({ appDetail: createMockApp({ mode: AppModeEnum.CHAT }) })
// Act
render(<LogAnnotation pageType={PageType.log} />)
// Assert
expect(screen.getByTestId('log')).toBeInTheDocument()
expect(screen.queryByTestId('annotation')).not.toBeInTheDocument()
})
it('should render annotation content when page type is annotation', () => {
// Arrange
useAppStore.setState({ appDetail: createMockApp({ mode: AppModeEnum.CHAT }) })
// Act
render(<LogAnnotation pageType={PageType.annotation} />)
// Assert
expect(screen.getByTestId('annotation')).toBeInTheDocument()
expect(screen.queryByTestId('log')).not.toBeInTheDocument()
})
})
// User interaction behavior
describe('User Interactions', () => {
it('should navigate to annotations when switching from log tab', async () => {
// Arrange
const user = userEvent.setup()
// Act
render(<LogAnnotation pageType={PageType.log} />)
await user.click(screen.getByText('appAnnotation.title'))
// Assert
expect(mockRouterPush).toHaveBeenCalledWith('/app/app-123/annotations')
})
it('should navigate to logs when switching from annotation tab', async () => {
// Arrange
const user = userEvent.setup()
// Act
render(<LogAnnotation pageType={PageType.annotation} />)
await user.click(screen.getByText('appLog.title'))
// Assert
expect(mockRouterPush).toHaveBeenCalledWith('/app/app-123/logs')
})
})
})

9
web/app/components/app/log/filter.tsx
View File

@ -6,11 +6,10 @@ import dayjs from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import Chip from '@/app/components/base/chip'
import Input from '@/app/components/base/input'
import Sort from '@/app/components/base/sort'
import { fetchAnnotationsCount } from '@/service/log'
import { useAnnotationsCount } from '@/service/use-log'
dayjs.extend(quarterOfYear)
@ -36,9 +35,9 @@ type IFilterProps = {
}
const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryParams }: IFilterProps) => {
const { data } = useSWR({ url: `/apps/${appId}/annotations/count` }, fetchAnnotationsCount)
const { data, isLoading } = useAnnotationsCount(appId)
const { t } = useTranslation()
if (!data)
if (isLoading || !data)
return null
return (
<div className="mb-2 flex flex-row flex-wrap items-center gap-2">
@ -51,7 +50,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
setQueryParams({ ...queryParams, period: item.value })
}}
onClear={() => setQueryParams({ ...queryParams, period: '9' })}
items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}` as any) as string }))}
/>
<Chip
className="min-w-[150px]"

25
web/app/components/app/log/index.tsx
View File

@ -3,16 +3,15 @@ import type { FC } from 'react'
import type { App } from '@/types/app'
import { useDebounce } from 'ahooks'
import dayjs from 'dayjs'
import { omit } from 'lodash-es'
import { omit } from 'es-toolkit/compat'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import Loading from '@/app/components/base/loading'
import Pagination from '@/app/components/base/pagination'
import { APP_PAGE_LIMIT } from '@/config'
import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
import { useChatConversations, useCompletionConversations } from '@/service/use-log'
import { AppModeEnum } from '@/types/app'
import EmptyElement from './empty-element'
import Filter, { TIME_PERIOD_MAPPING } from './filter'
@ -88,19 +87,15 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
}
// When the details are obtained, proceed to the next request
const { data: chatConversations, mutate: mutateChatList } = useSWR(() => isChatMode
? {
url: `/apps/${appDetail.id}/chat-conversations`,
params: query,
}
: null, fetchChatConversations)
const { data: chatConversations, refetch: mutateChatList } = useChatConversations({
appId: isChatMode ? appDetail.id : '',
params: query,
})
const { data: completionConversations, mutate: mutateCompletionList } = useSWR(() => !isChatMode
? {
url: `/apps/${appDetail.id}/completion-conversations`,
params: query,
}
: null, fetchCompletionConversations)
const { data: completionConversations, refetch: mutateCompletionList } = useCompletionConversations({
appId: !isChatMode ? appDetail.id : '',
params: query,
})
const total = isChatMode ? chatConversations?.total : completionConversations?.total

12
web/app/components/app/log/list.tsx
View File

@ -12,12 +12,11 @@ import { RiCloseLine, RiEditFill } from '@remixicon/react'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
import { get, noop } from 'lodash-es'
import { get, noop } from 'es-toolkit/compat'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import * as React from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import { createContext, useContext } from 'use-context-selector'
import { useShallow } from 'zustand/react/shallow'
import ModelInfo from '@/app/components/app/log/model-info'
@ -38,7 +37,8 @@ import { WorkflowContextProvider } from '@/app/components/workflow/context'
import { useAppContext } from '@/context/app-context'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import useTimestamp from '@/hooks/use-timestamp'
import { fetchChatConversationDetail, fetchChatMessages, fetchCompletionConversationDetail, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
import { fetchChatMessages, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
import { useChatConversationDetail, useCompletionConversationDetail } from '@/service/use-log'
import { AppModeEnum } from '@/types/app'
import { cn } from '@/utils/classnames'
import PromptLogModal from '../../base/prompt-log-modal'
@ -825,8 +825,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
*/
const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: string }> = ({ appId, conversationId }) => {
// Text Generator App Session Details Including Message List
const detailParams = ({ url: `/apps/${appId}/completion-conversations/${conversationId}` })
const { data: conversationDetail, mutate: conversationDetailMutate } = useSWR(() => (appId && conversationId) ? detailParams : null, fetchCompletionConversationDetail)
const { data: conversationDetail, refetch: conversationDetailMutate } = useCompletionConversationDetail(appId, conversationId)
const { notify } = useContext(ToastContext)
const { t } = useTranslation()
@ -875,8 +874,7 @@ const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: st
* Chat App Conversation Detail Component
*/
const ChatConversationDetailComp: FC<{ appId?: string, conversationId?: string }> = ({ appId, conversationId }) => {
const detailParams = { url: `/apps/${appId}/chat-conversations/${conversationId}` }
const { data: conversationDetail } = useSWR(() => (appId && conversationId) ? detailParams : null, fetchChatConversationDetail)
const { data: conversationDetail } = useChatConversationDetail(appId, conversationId)
const { notify } = useContext(ToastContext)
const { t } = useTranslation()

2
web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
View File

@ -2,7 +2,7 @@ import type { RenderOptions } from '@testing-library/react'
import type { Mock, MockedFunction } from 'vitest'
import type { ModalContextState } from '@/context/modal-context'
import { fireEvent, render } from '@testing-library/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { defaultPlan } from '@/app/components/billing/config'
import { useModalContext as actualUseModalContext } from '@/context/modal-context'

2
web/app/components/app/overview/app-chart.tsx
View File

@ -6,7 +6,7 @@ import type { AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyM
import dayjs from 'dayjs'
import Decimal from 'decimal.js'
import ReactECharts from 'echarts-for-react'
import { get } from 'lodash-es'
import { get } from 'es-toolkit/compat'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Basic from '@/app/components/app-sidebar/basic'

2
web/app/components/app/switch-app-modal/index.tsx
View File

@ -2,7 +2,7 @@
import type { App } from '@/types/app'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/app/workflow-log/filter.tsx
View File

@ -55,7 +55,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
setQueryParams({ ...queryParams, period: item.value })
}}
onClear={() => setQueryParams({ ...queryParams, period: '9' })}
items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}` as any) as string }))}
/>
<Input
wrapperClassName="w-[200px]"

494
web/app/components/app/workflow-log/index.spec.tsx
View File

@ -1,9 +1,9 @@
import type { MockedFunction } from 'vitest'
import type { UseQueryResult } from '@tanstack/react-query'
/**
* Logs Container Component Tests
*
* Tests the main Logs container component which:
* - Fetches workflow logs via useSWR
* - Fetches workflow logs via TanStack Query
* - Manages query parameters (status, period, keyword)
* - Handles pagination
* - Renders Filter, List, and Empty states
@ -15,14 +15,16 @@ import type { MockedFunction } from 'vitest'
* - trigger-by-display.spec.tsx
*/
import type { MockedFunction } from 'vitest'
import type { ILogsProps } from './index'
import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
import type { App, AppIconType, AppModeEnum } from '@/types/app'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import useSWR from 'swr'
import { APP_PAGE_LIMIT } from '@/config'
import { WorkflowRunTriggeredFrom } from '@/models/log'
import * as useLogModule from '@/service/use-log'
import { TIME_PERIOD_MAPPING } from './filter'
import Logs from './index'
@ -30,7 +32,7 @@ import Logs from './index'
// Mocks
// ============================================================================
vi.mock('swr')
vi.mock('@/service/use-log')
vi.mock('ahooks', () => ({
useDebounce: <T,>(value: T) => value,
@ -72,10 +74,6 @@ vi.mock('@/app/components/base/amplitude/utils', () => ({
trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
}))
vi.mock('@/service/log', () => ({
fetchWorkflowLogs: vi.fn(),
}))
vi.mock('@/hooks/use-theme', () => ({
__esModule: true,
default: () => {
@ -89,38 +87,76 @@ vi.mock('@/context/app-context', () => ({
}),
}))
// Mock useTimestamp
vi.mock('@/hooks/use-timestamp', () => ({
__esModule: true,
default: () => ({
formatTime: (timestamp: number, _format: string) => `formatted-${timestamp}`,
}),
}))
// Mock useBreakpoints
vi.mock('@/hooks/use-breakpoints', () => ({
__esModule: true,
default: () => 'pc',
MediaType: {
mobile: 'mobile',
pc: 'pc',
},
}))
// Mock BlockIcon
vi.mock('@/app/components/workflow/block-icon', () => ({
__esModule: true,
default: () => <div data-testid="block-icon">BlockIcon</div>,
}))
// Mock WorkflowContextProvider
vi.mock('@/app/components/workflow/context', () => ({
WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
<div data-testid="workflow-context-provider">{children}</div>
<>{children}</>
),
}))
const mockedUseSWR = useSWR as unknown as MockedFunction<typeof useSWR>
const mockedUseWorkflowLogs = useLogModule.useWorkflowLogs as MockedFunction<typeof useLogModule.useWorkflowLogs>
// ============================================================================
// Test Utilities
// ============================================================================
const createQueryClient = () => new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
})
const renderWithQueryClient = (ui: React.ReactElement) => {
const queryClient = createQueryClient()
return render(
<QueryClientProvider client={queryClient}>
{ui}
</QueryClientProvider>,
)
}
// ============================================================================
// Mock Return Value Factory
// ============================================================================
const createMockQueryResult = <T,>(
overrides: { data?: T, isLoading?: boolean, error?: Error | null } = {},
): UseQueryResult<T, Error> => {
const isLoading = overrides.isLoading ?? false
const error = overrides.error ?? null
const data = overrides.data
return {
data,
isLoading,
error,
refetch: vi.fn(),
isError: !!error,
isPending: isLoading,
isSuccess: !isLoading && !error && data !== undefined,
isFetching: isLoading,
isRefetching: false,
isLoadingError: false,
isRefetchError: false,
isInitialLoading: isLoading,
isPaused: false,
isEnabled: true,
status: isLoading ? 'pending' : error ? 'error' : 'success',
fetchStatus: isLoading ? 'fetching' : 'idle',
dataUpdatedAt: Date.now(),
errorUpdatedAt: 0,
failureCount: 0,
failureReason: null,
errorUpdateCount: 0,
isFetched: !isLoading,
isFetchedAfterMount: !isLoading,
isPlaceholderData: false,
isStale: false,
promise: Promise.resolve(data as T),
} as UseQueryResult<T, Error>
}
// ============================================================================
// Test Data Factories
@ -195,6 +231,20 @@ const createMockLogsResponse = (
page: 1,
})
// ============================================================================
// Type-safe Mock Helper
// ============================================================================
type WorkflowLogsParams = {
appId: string
params?: Record<string, string | number | boolean | undefined>
}
const getMockCallParams = (): WorkflowLogsParams | undefined => {
const lastCall = mockedUseWorkflowLogs.mock.calls.at(-1)
return lastCall?.[0]
}
// ============================================================================
// Tests
// ============================================================================
@ -213,45 +263,48 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
})
it('should render title and subtitle', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
expect(screen.getByText('appLog.workflowSubtitle')).toBeInTheDocument()
})
it('should render Filter component', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
})
})
@ -261,30 +314,33 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('Loading State', () => {
it('should show loading spinner when data is undefined', () => {
mockedUseSWR.mockReturnValue({
data: undefined,
mutate: vi.fn(),
isValidating: true,
isLoading: true,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: undefined,
isLoading: true,
}),
)
const { container } = render(<Logs {...defaultProps} />)
// Act
const { container } = renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(container.querySelector('.spin-animation')).toBeInTheDocument()
})
it('should not show loading spinner when data is available', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
}),
)
const { container } = render(<Logs {...defaultProps} />)
// Act
const { container } = renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(container.querySelector('.spin-animation')).not.toBeInTheDocument()
})
})
@ -294,16 +350,17 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('Empty State', () => {
it('should render empty element when total is 0', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(screen.getByText('appLog.table.empty.element.title')).toBeInTheDocument()
expect(screen.queryByRole('table')).not.toBeInTheDocument()
})
@ -313,20 +370,21 @@ describe('Logs Container', () => {
// Data Fetching Tests
// --------------------------------------------------------------------------
describe('Data Fetching', () => {
it('should call useSWR with correct URL and default params', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
it('should call useWorkflowLogs with correct appId and default params', () => {
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string, params: Record<string, unknown> }
expect(keyArg).toMatchObject({
url: `/apps/${defaultProps.appDetail.id}/workflow-app-logs`,
// Assert
const callArg = getMockCallParams()
expect(callArg).toMatchObject({
appId: defaultProps.appDetail.id,
params: expect.objectContaining({
page: 1,
detail: true,
@ -336,34 +394,36 @@ describe('Logs Container', () => {
})
it('should include date filters for non-allTime periods', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
expect(keyArg?.params).toHaveProperty('created_at__after')
expect(keyArg?.params).toHaveProperty('created_at__before')
// Assert
const callArg = getMockCallParams()
expect(callArg?.params).toHaveProperty('created_at__after')
expect(callArg?.params).toHaveProperty('created_at__before')
})
it('should not include status param when status is all', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
expect(keyArg?.params).not.toHaveProperty('status')
// Assert
const callArg = getMockCallParams()
expect(callArg?.params).not.toHaveProperty('status')
})
})
@ -372,24 +432,23 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('Filter Integration', () => {
it('should update query when selecting status filter', async () => {
// Arrange
const user = userEvent.setup()
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
renderWithQueryClient(<Logs {...defaultProps} />)
// Click status filter
// Act
await user.click(screen.getByText('All'))
await user.click(await screen.findByText('Success'))
// Check that useSWR was called with updated params
// Assert
await waitFor(() => {
const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
const lastCall = getMockCallParams()
expect(lastCall?.params).toMatchObject({
status: 'succeeded',
})
@ -397,46 +456,46 @@ describe('Logs Container', () => {
})
it('should update query when selecting period filter', async () => {
// Arrange
const user = userEvent.setup()
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
renderWithQueryClient(<Logs {...defaultProps} />)
// Click period filter
// Act
await user.click(screen.getByText('appLog.filter.period.last7days'))
await user.click(await screen.findByText('appLog.filter.period.allTime'))
// When period is allTime (9), date filters should be removed
// Assert
await waitFor(() => {
const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
const lastCall = getMockCallParams()
expect(lastCall?.params).not.toHaveProperty('created_at__after')
expect(lastCall?.params).not.toHaveProperty('created_at__before')
})
})
it('should update query when typing keyword', async () => {
// Arrange
const user = userEvent.setup()
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
render(<Logs {...defaultProps} />)
renderWithQueryClient(<Logs {...defaultProps} />)
// Act
const searchInput = screen.getByPlaceholderText('common.operation.search')
await user.type(searchInput, 'test-keyword')
// Assert
await waitFor(() => {
const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
const lastCall = getMockCallParams()
expect(lastCall?.params).toMatchObject({
keyword: 'test-keyword',
})
@ -449,36 +508,35 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('Pagination', () => {
it('should not render pagination when total is less than limit', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Pagination component should not be rendered
// Assert
expect(screen.queryByRole('navigation')).not.toBeInTheDocument()
})
it('should render pagination when total exceeds limit', () => {
// Arrange
const logs = Array.from({ length: APP_PAGE_LIMIT }, (_, i) =>
createMockWorkflowLog({ id: `log-${i}` }))
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse(logs, APP_PAGE_LIMIT + 10),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse(logs, APP_PAGE_LIMIT + 10),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Should show pagination - checking for any pagination-related element
// The Pagination component renders page controls
// Assert
expect(screen.getByRole('table')).toBeInTheDocument()
})
})
@ -488,37 +546,39 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('List Rendering', () => {
it('should render List component when data is available', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(screen.getByRole('table')).toBeInTheDocument()
})
it('should display log data in table', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([
createMockWorkflowLog({
workflow_run: createMockWorkflowRun({
status: 'succeeded',
total_tokens: 500,
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([
createMockWorkflowLog({
workflow_run: createMockWorkflowRun({
status: 'succeeded',
total_tokens: 500,
}),
}),
}),
], 1),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
], 1),
}),
)
render(<Logs {...defaultProps} />)
// Act
renderWithQueryClient(<Logs {...defaultProps} />)
// Assert
expect(screen.getByText('Success')).toBeInTheDocument()
expect(screen.getByText('500')).toBeInTheDocument()
})
@ -541,52 +601,54 @@ describe('Logs Container', () => {
// --------------------------------------------------------------------------
describe('Edge Cases', () => {
it('should handle different app modes', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([createMockWorkflowLog()], 1),
}),
)
const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
render(<Logs appDetail={chatApp} />)
// Act
renderWithQueryClient(<Logs appDetail={chatApp} />)
// Should render without trigger column
// Assert
expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
})
it('should handle error state from useSWR', () => {
mockedUseSWR.mockReturnValue({
data: undefined,
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: new Error('Failed to fetch'),
})
it('should handle error state from useWorkflowLogs', () => {
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: undefined,
error: new Error('Failed to fetch'),
}),
)
const { container } = render(<Logs {...defaultProps} />)
// Act
const { container } = renderWithQueryClient(<Logs {...defaultProps} />)
// Should show loading state when data is undefined
// Assert - should show loading state when data is undefined
expect(container.querySelector('.spin-animation')).toBeInTheDocument()
})
it('should handle app with different ID', () => {
mockedUseSWR.mockReturnValue({
data: createMockLogsResponse([], 0),
mutate: vi.fn(),
isValidating: false,
isLoading: false,
error: undefined,
})
// Arrange
mockedUseWorkflowLogs.mockReturnValue(
createMockQueryResult<WorkflowLogsResponse>({
data: createMockLogsResponse([], 0),
}),
)
const customApp = createMockApp({ id: 'custom-app-123' })
render(<Logs appDetail={customApp} />)
// Act
renderWithQueryClient(<Logs appDetail={customApp} />)
const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string }
expect(keyArg?.url).toBe('/apps/custom-app-123/workflow-app-logs')
// Assert
const callArg = getMockCallParams()
expect(callArg?.appId).toBe('custom-app-123')
})
})
})

11
web/app/components/app/workflow-log/index.tsx
View File

@ -5,17 +5,16 @@ import { useDebounce } from 'ahooks'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
import { omit } from 'lodash-es'
import { omit } from 'es-toolkit/compat'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import EmptyElement from '@/app/components/app/log/empty-element'
import Loading from '@/app/components/base/loading'
import Pagination from '@/app/components/base/pagination'
import { APP_PAGE_LIMIT } from '@/config'
import { useAppContext } from '@/context/app-context'
import { fetchWorkflowLogs } from '@/service/log'
import { useWorkflowLogs } from '@/service/use-log'
import Filter, { TIME_PERIOD_MAPPING } from './filter'
import List from './list'
@ -55,10 +54,10 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
...omit(debouncedQueryParams, ['period', 'status']),
}
const { data: workflowLogs, mutate } = useSWR({
url: `/apps/${appDetail.id}/workflow-app-logs`,
const { data: workflowLogs, refetch: mutate } = useWorkflowLogs({
appId: appDetail.id,
params: query,
}, fetchWorkflowLogs)
})
const total = workflowLogs?.total
return (

2
web/app/components/base/agent-log-modal/detail.tsx
View File

@ -2,7 +2,7 @@
import type { FC } from 'react'
import type { IChatItem } from '@/app/components/base/chat/chat/type'
import type { AgentIteration, AgentLogDetailResponse } from '@/models/log'
import { flatten, uniq } from 'lodash-es'
import { flatten, uniq } from 'es-toolkit/compat'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/base/app-icon-picker/index.tsx
View File

@ -3,7 +3,7 @@ import type { Area } from 'react-easy-crop'
import type { OnImageInput } from './ImageInput'
import type { AppIconType, ImageFile } from '@/types/app'
import { RiImageCircleAiLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'

360
web/app/components/base/badge/index.spec.tsx Normal file
View File

@ -0,0 +1,360 @@
import { fireEvent, render, screen } from '@testing-library/react'
import Badge, { BadgeState, BadgeVariants } from './index'
describe('Badge', () => {
describe('Rendering', () => {
it('should render as a div element with badge class', () => {
render(<Badge>Test Badge</Badge>)
const badge = screen.getByText('Test Badge')
expect(badge).toHaveClass('badge')
expect(badge.tagName).toBe('DIV')
})
it.each([
{ children: undefined, label: 'no children' },
{ children: '', label: 'empty string' },
])('should render correctly when provided $label', ({ children }) => {
const { container } = render(<Badge>{children}</Badge>)
expect(container.firstChild).toHaveClass('badge')
})
it('should render React Node children correctly', () => {
render(
<Badge data-testid="badge-with-icon">
<span data-testid="custom-icon">🔔</span>
</Badge>,
)
expect(screen.getByTestId('badge-with-icon')).toBeInTheDocument()
expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
})
})
describe('size prop', () => {
it.each([
{ size: undefined, label: 'medium (default)' },
{ size: 's', label: 'small' },
{ size: 'm', label: 'medium' },
{ size: 'l', label: 'large' },
] as const)('should render with $label size', ({ size }) => {
render(<Badge size={size}>Test</Badge>)
const expectedSize = size || 'm'
expect(screen.getByText('Test')).toHaveClass('badge', `badge-${expectedSize}`)
})
})
describe('state prop', () => {
it.each([
{ state: BadgeState.Warning, label: 'warning', expectedClass: 'badge-warning' },
{ state: BadgeState.Accent, label: 'accent', expectedClass: 'badge-accent' },
])('should render with $label state', ({ state, expectedClass }) => {
render(<Badge state={state}>State Test</Badge>)
expect(screen.getByText('State Test')).toHaveClass(expectedClass)
})
it.each([
{ state: undefined, label: 'default (undefined)' },
{ state: BadgeState.Default, label: 'default (explicit)' },
])('should use default styles when state is $label', ({ state }) => {
render(<Badge state={state}>State Test</Badge>)
const badge = screen.getByText('State Test')
expect(badge).not.toHaveClass('badge-warning', 'badge-accent')
})
})
describe('iconOnly prop', () => {
it.each([
{ size: 's', iconOnly: false, label: 'small with text' },
{ size: 's', iconOnly: true, label: 'small icon-only' },
{ size: 'm', iconOnly: false, label: 'medium with text' },
{ size: 'm', iconOnly: true, label: 'medium icon-only' },
{ size: 'l', iconOnly: false, label: 'large with text' },
{ size: 'l', iconOnly: true, label: 'large icon-only' },
] as const)('should render correctly for $label', ({ size, iconOnly }) => {
const { container } = render(<Badge size={size} iconOnly={iconOnly}>🔔</Badge>)
const badge = screen.getByText('🔔')
// Verify badge renders with correct size
expect(badge).toHaveClass('badge', `badge-${size}`)
// Verify the badge is in the DOM and contains the content
expect(badge).toBeInTheDocument()
expect(container.firstChild).toBe(badge)
})
it('should apply icon-only padding when iconOnly is true', () => {
render(<Badge iconOnly>🔔</Badge>)
// When iconOnly is true, the badge should have uniform padding (all sides equal)
const badge = screen.getByText('🔔')
expect(badge).toHaveClass('p-1')
})
it('should apply asymmetric padding when iconOnly is false', () => {
render(<Badge iconOnly={false}>Badge</Badge>)
// When iconOnly is false, the badge should have different horizontal and vertical padding
const badge = screen.getByText('Badge')
expect(badge).toHaveClass('px-[5px]', 'py-[2px]')
})
})
describe('uppercase prop', () => {
it.each([
{ uppercase: undefined, label: 'default (undefined)', expected: 'system-2xs-medium' },
{ uppercase: false, label: 'explicitly false', expected: 'system-2xs-medium' },
{ uppercase: true, label: 'true', expected: 'system-2xs-medium-uppercase' },
])('should apply $expected class when uppercase is $label', ({ uppercase, expected }) => {
render(<Badge uppercase={uppercase}>Text</Badge>)
expect(screen.getByText('Text')).toHaveClass(expected)
})
})
describe('styleCss prop', () => {
it('should apply custom inline styles correctly', () => {
const customStyles = {
backgroundColor: 'rgb(0, 0, 255)',
color: 'rgb(255, 255, 255)',
padding: '10px',
}
render(<Badge styleCss={customStyles}>Styled Badge</Badge>)
expect(screen.getByText('Styled Badge')).toHaveStyle(customStyles)
})
it('should apply inline styles without overriding core classes', () => {
render(<Badge styleCss={{ backgroundColor: 'rgb(255, 0, 0)', margin: '5px' }}>Custom</Badge>)
const badge = screen.getByText('Custom')
expect(badge).toHaveStyle({ backgroundColor: 'rgb(255, 0, 0)', margin: '5px' })
expect(badge).toHaveClass('badge')
})
})
describe('className prop', () => {
it.each([
{
props: { className: 'custom-badge' },
expected: ['badge', 'custom-badge'],
label: 'single custom class',
},
{
props: { className: 'custom-class another-class', size: 'l' as const },
expected: ['badge', 'badge-l', 'custom-class', 'another-class'],
label: 'multiple classes with size variant',
},
])('should merge $label with default classes', ({ props, expected }) => {
render(<Badge {...props}>Test</Badge>)
expect(screen.getByText('Test')).toHaveClass(...expected)
})
})
describe('HTML attributes passthrough', () => {
it.each([
{ attr: 'data-testid', value: 'custom-badge-id', label: 'data attribute' },
{ attr: 'id', value: 'unique-badge', label: 'id attribute' },
{ attr: 'aria-label', value: 'Notification badge', label: 'aria-label' },
{ attr: 'title', value: 'Hover tooltip', label: 'title attribute' },
{ attr: 'role', value: 'status', label: 'ARIA role' },
])('should pass through $label correctly', ({ attr, value }) => {
render(<Badge {...{ [attr]: value }}>Test</Badge>)
expect(screen.getByText('Test')).toHaveAttribute(attr, value)
})
it('should support multiple HTML attributes simultaneously', () => {
render(
<Badge
data-testid="multi-attr-badge"
id="badge-123"
aria-label="Status indicator"
title="Current status"
>
Test
</Badge>,
)
const badge = screen.getByTestId('multi-attr-badge')
expect(badge).toHaveAttribute('id', 'badge-123')
expect(badge).toHaveAttribute('aria-label', 'Status indicator')
expect(badge).toHaveAttribute('title', 'Current status')
})
})
describe('Event handlers', () => {
it.each([
{ handler: 'onClick', trigger: fireEvent.click, label: 'click' },
{ handler: 'onMouseEnter', trigger: fireEvent.mouseEnter, label: 'mouse enter' },
{ handler: 'onMouseLeave', trigger: fireEvent.mouseLeave, label: 'mouse leave' },
])('should trigger $handler when $label occurs', ({ handler, trigger }) => {
const mockHandler = vi.fn()
render(<Badge {...{ [handler]: mockHandler }}>Badge</Badge>)
trigger(screen.getByText('Badge'))
expect(mockHandler).toHaveBeenCalledTimes(1)
})
it('should handle user interaction flow with multiple events', () => {
const handlers = {
onClick: vi.fn(),
onMouseEnter: vi.fn(),
onMouseLeave: vi.fn(),
}
render(<Badge {...handlers}>Interactive</Badge>)
const badge = screen.getByText('Interactive')
fireEvent.mouseEnter(badge)
fireEvent.click(badge)
fireEvent.mouseLeave(badge)
expect(handlers.onMouseEnter).toHaveBeenCalledTimes(1)
expect(handlers.onClick).toHaveBeenCalledTimes(1)
expect(handlers.onMouseLeave).toHaveBeenCalledTimes(1)
})
it('should pass event object to handler with correct properties', () => {
const handleClick = vi.fn()
render(<Badge onClick={handleClick}>Event Badge</Badge>)
fireEvent.click(screen.getByText('Event Badge'))
expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({
type: 'click',
}))
})
})
describe('Combined props', () => {
it('should correctly apply all props when used together', () => {
render(
<Badge
size="l"
state={BadgeState.Warning}
uppercase
className="custom-badge"
styleCss={{ backgroundColor: 'rgb(0, 0, 255)' }}
data-testid="combined-badge"
>
Full Featured
</Badge>,
)
const badge = screen.getByTestId('combined-badge')
expect(badge).toHaveClass('badge', 'badge-l', 'badge-warning', 'system-2xs-medium-uppercase', 'custom-badge')
expect(badge).toHaveStyle({ backgroundColor: 'rgb(0, 0, 255)' })
expect(badge).toHaveTextContent('Full Featured')
})
it.each([
{
props: { size: 'l' as const, state: BadgeState.Accent },
expected: ['badge', 'badge-l', 'badge-accent'],
label: 'size and state variants',
},
{
props: { iconOnly: true, uppercase: true },
expected: ['badge', 'system-2xs-medium-uppercase'],
label: 'iconOnly and uppercase',
},
])('should combine $label correctly', ({ props, expected }) => {
render(<Badge {...props}>Test</Badge>)
expect(screen.getByText('Test')).toHaveClass(...expected)
})
it('should handle event handlers with combined props', () => {
const handleClick = vi.fn()
render(
<Badge size="s" state={BadgeState.Warning} onClick={handleClick} className="interactive">
Test
</Badge>,
)
const badge = screen.getByText('Test')
expect(badge).toHaveClass('badge', 'badge-s', 'badge-warning', 'interactive')
fireEvent.click(badge)
expect(handleClick).toHaveBeenCalledTimes(1)
})
})
describe('Edge cases', () => {
it.each([
{ children: 42, text: '42', label: 'numeric value' },
{ children: 0, text: '0', label: 'zero' },
])('should render $label correctly', ({ children, text }) => {
render(<Badge>{children}</Badge>)
expect(screen.getByText(text)).toBeInTheDocument()
})
it.each([
{ children: null, label: 'null' },
{ children: false, label: 'boolean false' },
])('should handle $label children without errors', ({ children }) => {
const { container } = render(<Badge>{children}</Badge>)
expect(container.firstChild).toHaveClass('badge')
})
it('should render complex nested content correctly', () => {
render(
<Badge>
<span data-testid="icon">🔔</span>
<span data-testid="count">5</span>
</Badge>,
)
expect(screen.getByTestId('icon')).toBeInTheDocument()
expect(screen.getByTestId('count')).toBeInTheDocument()
})
})
describe('Component metadata and exports', () => {
it('should have correct displayName for debugging', () => {
expect(Badge.displayName).toBe('Badge')
})
describe('BadgeState enum', () => {
it.each([
{ key: 'Warning', value: 'warning' },
{ key: 'Accent', value: 'accent' },
{ key: 'Default', value: '' },
])('should export $key state with value "$value"', ({ key, value }) => {
expect(BadgeState[key as keyof typeof BadgeState]).toBe(value)
})
})
describe('BadgeVariants utility', () => {
it('should be a function', () => {
expect(typeof BadgeVariants).toBe('function')
})
it('should generate base badge class with default medium size', () => {
const result = BadgeVariants({})
expect(result).toContain('badge')
expect(result).toContain('badge-m')
})
it.each([
{ size: 's' },
{ size: 'm' },
{ size: 'l' },
] as const)('should generate correct classes for size=$size', ({ size }) => {
const result = BadgeVariants({ size })
expect(result).toContain('badge')
expect(result).toContain(`badge-${size}`)
})
})
})
})

2
web/app/components/base/block-input/index.tsx
View File

@ -94,7 +94,7 @@ const BlockInput: FC<IBlockInputProps> = ({
if (!isValid) {
Toast.notify({
type: 'error',
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }) as string,
})
return
}

2
web/app/components/base/chat/__tests__/utils.spec.ts
View File

@ -1,5 +1,5 @@
import type { ChatItemInTree } from '../types'
import { get } from 'lodash-es'
import { get } from 'es-toolkit/compat'
import { buildChatItemTree, getThreadMessages } from '../utils'
import branchedTestMessages from './branchedTestMessages.json'
import legacyTestMessages from './legacyTestMessages.json'

2
web/app/components/base/chat/chat-with-history/context.tsx
View File

@ -14,7 +14,7 @@ import type {
AppMeta,
ConversationItem,
} from '@/models/share'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { createContext, useContext } from 'use-context-selector'
export type ChatWithHistoryContextValue = {

2
web/app/components/base/chat/chat-with-history/hooks.tsx
View File

@ -10,8 +10,8 @@ import type {
ConversationItem,
} from '@/models/share'
import { useLocalStorageState } from 'ahooks'
import { noop } from 'es-toolkit/compat'
import { produce } from 'immer'
import { noop } from 'lodash-es'
import {
useCallback,
useEffect,

2
web/app/components/base/chat/chat/hooks.ts
View File

@ -8,8 +8,8 @@ import type { InputForm } from './type'
import type AudioPlayer from '@/app/components/base/audio-btn/audio'
import type { FileEntity } from '@/app/components/base/file-uploader/types'
import type { Annotation } from '@/models/log'
import { noop, uniqBy } from 'es-toolkit/compat'
import { produce, setAutoFreeze } from 'immer'
import { noop, uniqBy } from 'lodash-es'
import { useParams, usePathname } from 'next/navigation'
import {
useCallback,

2
web/app/components/base/chat/chat/index.tsx
View File

@ -13,7 +13,7 @@ import type {
import type { InputForm } from './type'
import type { Emoji } from '@/app/components/tools/types'
import type { AppData } from '@/models/share'
import { debounce } from 'lodash-es'
import { debounce } from 'es-toolkit/compat'
import {
memo,
useCallback,

2
web/app/components/base/chat/embedded-chatbot/context.tsx
View File

@ -13,7 +13,7 @@ import type {
AppMeta,
ConversationItem,
} from '@/models/share'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { createContext, useContext } from 'use-context-selector'
export type EmbeddedChatbotContextValue = {

5
web/app/components/base/chat/embedded-chatbot/hooks.tsx
View File

@ -3,13 +3,14 @@ import type {
ChatItem,
Feedback,
} from '../types'
import type { Locale } from '@/i18n-config'
import type {
// AppData,
ConversationItem,
} from '@/models/share'
import { useLocalStorageState } from 'ahooks'
import { noop } from 'es-toolkit/compat'
import { produce } from 'immer'
import { noop } from 'lodash-es'
import {
useCallback,
useEffect,
@ -93,7 +94,7 @@ export const useEmbeddedChatbot = () => {
if (localeParam) {
// If locale parameter exists in URL, use it instead of default
await changeLanguage(localeParam)
await changeLanguage(localeParam as Locale)
}
else if (localeFromSysVar) {
// If locale is set as a system variable, use that

394
web/app/components/base/chip/index.spec.tsx Normal file
View File

@ -0,0 +1,394 @@
import type { Item } from './index'
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import Chip from './index'
afterEach(cleanup)
// Test data factory
const createTestItems = (): Item[] => [
{ value: 'all', name: 'All Items' },
{ value: 'active', name: 'Active' },
{ value: 'archived', name: 'Archived' },
]
describe('Chip', () => {
// Shared test props
let items: Item[]
let onSelect: (item: Item) => void
let onClear: () => void
beforeEach(() => {
vi.clearAllMocks()
items = createTestItems()
onSelect = vi.fn()
onClear = vi.fn()
})
// Helper function to render Chip with default props
const renderChip = (props: Partial<React.ComponentProps<typeof Chip>> = {}) => {
return render(
<Chip
value="all"
items={items}
onSelect={onSelect}
onClear={onClear}
{...props}
/>,
)
}
// Helper function to get the trigger element
const getTrigger = (container: HTMLElement) => {
return container.querySelector('[data-state]')
}
// Helper function to open dropdown panel
const openPanel = (container: HTMLElement) => {
const trigger = getTrigger(container)
if (trigger)
fireEvent.click(trigger)
}
describe('Rendering', () => {
it('should render without crashing', () => {
renderChip()
expect(screen.getByText('All Items')).toBeInTheDocument()
})
it('should display current selected item name', () => {
renderChip({ value: 'active' })
expect(screen.getByText('Active')).toBeInTheDocument()
})
it('should display empty content when value does not match any item', () => {
const { container } = renderChip({ value: 'nonexistent' })
// When value doesn't match, no text should be displayed in trigger
const trigger = getTrigger(container)
// Check that there's no item name text (only icons should be present)
expect(trigger?.textContent?.trim()).toBeFalsy()
})
})
describe('Props', () => {
it('should update displayed item name when value prop changes', () => {
const { rerender } = renderChip({ value: 'all' })
expect(screen.getByText('All Items')).toBeInTheDocument()
rerender(
<Chip
value="archived"
items={items}
onSelect={onSelect}
onClear={onClear}
/>,
)
expect(screen.getByText('Archived')).toBeInTheDocument()
})
it('should show left icon by default', () => {
const { container } = renderChip()
// The filter icon should be visible
const svg = container.querySelector('svg')
expect(svg).toBeInTheDocument()
})
it('should hide left icon when showLeftIcon is false', () => {
renderChip({ showLeftIcon: false })
// When showLeftIcon is false, there should be no filter icon before the text
const textElement = screen.getByText('All Items')
const parent = textElement.closest('div[data-state]')
const icons = parent?.querySelectorAll('svg')
// Should only have the arrow icon, not the filter icon
expect(icons?.length).toBe(1)
})
it('should render custom left icon', () => {
const CustomIcon = () => <span data-testid="custom-icon">★</span>
renderChip({ leftIcon: <CustomIcon /> })
expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
})
it('should apply custom className to trigger', () => {
const customClass = 'custom-chip-class'
const { container } = renderChip({ className: customClass })
const chipElement = container.querySelector(`.${customClass}`)
expect(chipElement).toBeInTheDocument()
})
it('should apply custom panelClassName to dropdown panel', () => {
const customPanelClass = 'custom-panel-class'
const { container } = renderChip({ panelClassName: customPanelClass })
openPanel(container)
// Panel is rendered in a portal, so check document.body
const panel = document.body.querySelector(`.${customPanelClass}`)
expect(panel).toBeInTheDocument()
})
})
describe('State Management', () => {
it('should toggle dropdown panel on trigger click', () => {
const { container } = renderChip()
// Initially closed - check data-state attribute
const trigger = getTrigger(container)
expect(trigger).toHaveAttribute('data-state', 'closed')
// Open panel
openPanel(container)
expect(trigger).toHaveAttribute('data-state', 'open')
// Panel items should be visible
expect(screen.getAllByText('All Items').length).toBeGreaterThan(1)
// Close panel
if (trigger)
fireEvent.click(trigger)
expect(trigger).toHaveAttribute('data-state', 'closed')
})
it('should close panel after selecting an item', () => {
const { container } = renderChip()
openPanel(container)
const trigger = getTrigger(container)
expect(trigger).toHaveAttribute('data-state', 'open')
// Click on an item in the dropdown panel
const activeItems = screen.getAllByText('Active')
// The second one should be in the dropdown
fireEvent.click(activeItems[activeItems.length - 1])
expect(trigger).toHaveAttribute('data-state', 'closed')
})
})
describe('Event Handlers', () => {
it('should call onSelect with correct item when item is clicked', () => {
const { container } = renderChip()
openPanel(container)
// Get all "Active" texts and click the one in the dropdown (should be the last one)
const activeItems = screen.getAllByText('Active')
fireEvent.click(activeItems[activeItems.length - 1])
expect(onSelect).toHaveBeenCalledTimes(1)
expect(onSelect).toHaveBeenCalledWith(items[1])
})
it('should call onClear when clear button is clicked', () => {
const { container } = renderChip({ value: 'active' })
// Find the close icon (last SVG in the trigger) and click its parent
const trigger = getTrigger(container)
const svgs = trigger?.querySelectorAll('svg')
// The close icon should be the last SVG element
const closeIcon = svgs?.[svgs.length - 1]
const clearButton = closeIcon?.parentElement
expect(clearButton).toBeInTheDocument()
if (clearButton)
fireEvent.click(clearButton)
expect(onClear).toHaveBeenCalledTimes(1)
})
it('should stop event propagation when clear button is clicked', () => {
const { container } = renderChip({ value: 'active' })
const trigger = getTrigger(container)
expect(trigger).toHaveAttribute('data-state', 'closed')
// Find the close icon (last SVG) and click its parent
const svgs = trigger?.querySelectorAll('svg')
const closeIcon = svgs?.[svgs.length - 1]
const clearButton = closeIcon?.parentElement
if (clearButton)
fireEvent.click(clearButton)
// Panel should remain closed
expect(trigger).toHaveAttribute('data-state', 'closed')
expect(onClear).toHaveBeenCalledTimes(1)
})
it('should handle multiple rapid clicks on trigger', () => {
const { container } = renderChip()
const trigger = getTrigger(container)
// Click 1: open
if (trigger)
fireEvent.click(trigger)
expect(trigger).toHaveAttribute('data-state', 'open')
// Click 2: close
if (trigger)
fireEvent.click(trigger)
expect(trigger).toHaveAttribute('data-state', 'closed')
// Click 3: open again
if (trigger)
fireEvent.click(trigger)
expect(trigger).toHaveAttribute('data-state', 'open')
})
})
describe('Conditional Rendering', () => {
it('should show arrow down icon when no value is selected', () => {
const { container } = renderChip({ value: '' })
// Should have SVG icons (filter icon and arrow down icon)
const svgs = container.querySelectorAll('svg')
expect(svgs.length).toBeGreaterThan(0)
})
it('should show clear button when value is selected', () => {
const { container } = renderChip({ value: 'active' })
// When value is selected, there should be an icon (the close icon)
const svgs = container.querySelectorAll('svg')
expect(svgs.length).toBeGreaterThan(0)
})
it('should not show clear button when no value is selected', () => {
const { container } = renderChip({ value: '' })
const trigger = getTrigger(container)
// When value is empty, the trigger should only have 2 SVGs (filter icon + arrow)
// When value is selected, it would have 2 SVGs (filter icon + close icon)
const svgs = trigger?.querySelectorAll('svg')
// Arrow icon should be present, close icon should not
expect(svgs?.length).toBe(2)
// Verify onClear hasn't been called
expect(onClear).not.toHaveBeenCalled()
})
it('should show dropdown content only when panel is open', () => {
const { container } = renderChip()
const trigger = getTrigger(container)
// Closed by default
expect(trigger).toHaveAttribute('data-state', 'closed')
openPanel(container)
expect(trigger).toHaveAttribute('data-state', 'open')
// Items should be duplicated (once in trigger, once in panel)
expect(screen.getAllByText('All Items').length).toBeGreaterThan(1)
})
it('should show check icon on selected item in dropdown', () => {
const { container } = renderChip({ value: 'active' })
openPanel(container)
// Find the dropdown panel items
const allActiveTexts = screen.getAllByText('Active')
// The dropdown item should be the last one
const dropdownItem = allActiveTexts[allActiveTexts.length - 1]
const parentContainer = dropdownItem.parentElement
// The check icon should be a sibling within the parent
const checkIcon = parentContainer?.querySelector('svg')
expect(checkIcon).toBeInTheDocument()
})
it('should render all items in dropdown when open', () => {
const { container } = renderChip()
openPanel(container)
// Each item should appear at least twice (once in potential selected state, once in dropdown)
// Use getAllByText to handle multiple occurrences
expect(screen.getAllByText('All Items').length).toBeGreaterThan(0)
expect(screen.getAllByText('Active').length).toBeGreaterThan(0)
expect(screen.getAllByText('Archived').length).toBeGreaterThan(0)
})
})
describe('Edge Cases', () => {
it('should handle empty items array', () => {
const { container } = renderChip({ items: [], value: '' })
// Trigger should still render
const trigger = container.querySelector('[data-state]')
expect(trigger).toBeInTheDocument()
})
it('should handle value not in items list', () => {
const { container } = renderChip({ value: 'nonexistent' })
const trigger = getTrigger(container)
expect(trigger).toBeInTheDocument()
// The trigger should not display any item name text
expect(trigger?.textContent?.trim()).toBeFalsy()
})
it('should allow selecting already selected item', () => {
const { container } = renderChip({ value: 'active' })
openPanel(container)
// Click on the already selected item in the dropdown
const activeItems = screen.getAllByText('Active')
fireEvent.click(activeItems[activeItems.length - 1])
expect(onSelect).toHaveBeenCalledTimes(1)
expect(onSelect).toHaveBeenCalledWith(items[1])
})
it('should handle numeric values', () => {
const numericItems: Item[] = [
{ value: 1, name: 'First' },
{ value: 2, name: 'Second' },
{ value: 3, name: 'Third' },
]
const { container } = renderChip({ value: 2, items: numericItems })
expect(screen.getByText('Second')).toBeInTheDocument()
// Open panel and select Third
openPanel(container)
const thirdItems = screen.getAllByText('Third')
fireEvent.click(thirdItems[thirdItems.length - 1])
expect(onSelect).toHaveBeenCalledWith(numericItems[2])
})
it('should handle items with additional properties', () => {
const itemsWithExtra: Item[] = [
{ value: 'a', name: 'Item A', customProp: 'extra1' },
{ value: 'b', name: 'Item B', customProp: 'extra2' },
]
const { container } = renderChip({ value: 'a', items: itemsWithExtra })
expect(screen.getByText('Item A')).toBeInTheDocument()
// Open panel and select Item B
openPanel(container)
const itemBs = screen.getAllByText('Item B')
fireEvent.click(itemBs[itemBs.length - 1])
expect(onSelect).toHaveBeenCalledWith(itemsWithExtra[1])
})
})
})

2
web/app/components/base/copy-feedback/index.tsx
View File

@ -4,7 +4,7 @@ import {
RiClipboardLine,
} from '@remixicon/react'
import copy from 'copy-to-clipboard'
import { debounce } from 'lodash-es'
import { debounce } from 'es-toolkit/compat'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/base/copy-icon/index.tsx
View File

@ -1,6 +1,6 @@
'use client'
import copy from 'copy-to-clipboard'
import { debounce } from 'lodash-es'
import { debounce } from 'es-toolkit/compat'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'

4
web/app/components/base/date-and-time-picker/hooks.ts
View File

@ -6,7 +6,7 @@ const YEAR_RANGE = 100
export const useDaysOfWeek = () => {
const { t } = useTranslation()
const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => t(`time.daysInWeek.${day}`))
const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => t(`time.daysInWeek.${day}` as any) as string)
return daysOfWeek
}
@ -26,7 +26,7 @@ export const useMonths = () => {
'October',
'November',
'December',
].map(month => t(`time.months.${month}`))
].map(month => t(`time.months.${month}` as any) as string)
return months
}

2
web/app/components/base/emoji-picker/index.tsx
View File

@ -1,6 +1,6 @@
'use client'
import type { FC } from 'react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'

4
web/app/components/base/encrypted-bottom/index.tsx
View File

@ -16,7 +16,7 @@ export const EncryptedBottom = (props: Props) => {
return (
<div className={cn('system-xs-regular flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary', className)}>
<RiLock2Fill className="mx-1 h-3 w-3 text-text-quaternary" />
{t(frontTextKey || 'common.provider.encrypted.front')}
{t((frontTextKey || 'common.provider.encrypted.front') as any) as string}
<Link
className="mx-1 text-text-accent"
target="_blank"
@ -25,7 +25,7 @@ export const EncryptedBottom = (props: Props) => {
>
PKCS1_OAEP
</Link>
{t(backTextKey || 'common.provider.encrypted.back')}
{t((backTextKey || 'common.provider.encrypted.back') as any) as string}
</div>
)
}

2
web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
View File

@ -3,8 +3,8 @@ import type { InputVar } from '@/app/components/workflow/types'
import type { PromptVariable } from '@/models/debug'
import { RiAddLine, RiAsterisk, RiCloseLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import { noop } from 'es-toolkit/compat'
import { produce } from 'immer'
import { noop } from 'lodash-es'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
View File

@ -2,7 +2,7 @@ import type { ChangeEvent, FC } from 'react'
import type { CodeBasedExtensionItem } from '@/models/common'
import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'

4
web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
View File

@ -97,7 +97,7 @@ const VoiceParamConfig = ({
className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6"
>
<span className={cn('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}` as any) as string : localLanguagePlaceholder}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
@ -128,7 +128,7 @@ const VoiceParamConfig = ({
<span
className={cn('block', selected && 'font-normal')}
>
{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}
{t(`common.voice.language.${(item.value).toString().replace('-', '')}` as any) as string}
</span>
{(selected || item.value === text2speech?.language) && (
<span

6
web/app/components/base/file-uploader/hooks.ts
View File

@ -2,8 +2,8 @@ import type { ClipboardEvent } from 'react'
import type { FileEntity } from './types'
import type { FileUpload } from '@/app/components/base/features/types'
import type { FileUploadConfigResponse } from '@/models/common'
import { noop } from 'es-toolkit/compat'
import { produce } from 'immer'
import { noop } from 'lodash-es'
import { useParams } from 'next/navigation'
import {
useCallback,
@ -174,7 +174,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
handleUpdateFile({ ...uploadingFile, uploadedId: res.id, progress: 100 })
},
onErrorCallback: (error?: any) => {
const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t)
const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t as any)
notify({ type: 'error', message: errorMessage })
handleUpdateFile({ ...uploadingFile, progress: -1 })
},
@ -287,7 +287,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
handleUpdateFile({ ...uploadingFile, uploadedId: res.id, progress: 100 })
},
onErrorCallback: (error?: any) => {
const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t)
const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t as any)
notify({ type: 'error', message: errorMessage })
handleUpdateFile({ ...uploadingFile, progress: -1 })
},

2
web/app/components/base/file-uploader/pdf-preview.tsx
View File

@ -1,7 +1,7 @@
import type { FC } from 'react'
import { RiCloseLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
import { noop } from 'es-toolkit/compat'
import { t } from 'i18next'
import { noop } from 'lodash-es'
import * as React from 'react'
import { useState } from 'react'
import { createPortal } from 'react-dom'

2
web/app/components/base/file-uploader/store.tsx
View File

@ -1,7 +1,7 @@
import type {
FileEntity,
} from './types'
import { isEqual } from 'lodash-es'
import { isEqual } from 'es-toolkit/compat'
import {
createContext,
useContext,

2
web/app/components/base/form/components/field/input-type-select/hooks.tsx
View File

@ -44,7 +44,7 @@ export const useInputTypeOptions = (supportFile: boolean) => {
return options.map((value) => {
return {
value,
label: t(`appDebug.variableConfig.${i18nFileTypeMap[value] || value}`),
label: t(`appDebug.variableConfig.${i18nFileTypeMap[value] || value}` as any),
Icon: INPUT_TYPE_ICON[value],
type: DATA_TYPE[value],
}

2
web/app/components/base/fullscreen-modal/index.tsx
View File

@ -1,6 +1,6 @@
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
import { RiCloseLargeLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { cn } from '@/utils/classnames'
type IModal = {

2
web/app/components/base/icons/script.mjs
View File

@ -2,7 +2,7 @@ import { access, appendFile, mkdir, open, readdir, rm, writeFile } from 'node:fs
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { parseXml } from '@rgrove/parse-xml'
import { camelCase, template } from 'lodash-es'
import { camelCase, template } from 'es-toolkit/compat'
const __dirname = path.dirname(fileURLToPath(import.meta.url))

4
web/app/components/base/image-uploader/hooks.ts
View File

@ -82,7 +82,7 @@ export const useImageFiles = () => {
setFiles(newFiles)
},
onErrorCallback: (error?: any) => {
const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t)
const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t as any)
notify({ type: 'error', message: errorMessage })
const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: -1 }, ...files.slice(index + 1)]
filesRef.current = newFiles
@ -160,7 +160,7 @@ export const useLocalFileUploader = ({ limit, disabled = false, onUpload }: useL
onUpload({ ...imageFile, fileId: res.id, progress: 100 })
},
onErrorCallback: (error?: any) => {
const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t)
const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t as any)
notify({ type: 'error', message: errorMessage })
onUpload({ ...imageFile, progress: -1 })
},

2
web/app/components/base/image-uploader/image-preview.tsx
View File

@ -1,7 +1,7 @@
import type { FC } from 'react'
import { RiAddBoxLine, RiCloseLine, RiDownloadCloud2Line, RiFileCopyLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
import { noop } from 'es-toolkit/compat'
import { t } from 'i18next'
import { noop } from 'lodash-es'
import * as React from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'

4
web/app/components/base/input-with-copy/index.spec.tsx
View File

@ -25,8 +25,8 @@ vi.mock('react-i18next', () => ({
}),
}))
// Mock lodash-es debounce
vi.mock('lodash-es', () => ({
// Mock es-toolkit/compat debounce
vi.mock('es-toolkit/compat', () => ({
debounce: (fn: any) => fn,
}))

2
web/app/components/base/input-with-copy/index.tsx
View File

@ -2,7 +2,7 @@
import type { InputProps } from '../input'
import { RiClipboardFill, RiClipboardLine } from '@remixicon/react'
import copy from 'copy-to-clipboard'
import { debounce } from 'lodash-es'
import { debounce } from 'es-toolkit/compat'
import * as React from 'react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

8
web/app/components/base/input/index.tsx
View File

@ -2,7 +2,7 @@ import type { VariantProps } from 'class-variance-authority'
import type { ChangeEventHandler, CSSProperties, FocusEventHandler } from 'react'
import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
import { cva } from 'class-variance-authority'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
@ -110,7 +110,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
{...props}
/>
{showClearIcon && value && !disabled && !destructive && (
<div className={cn('group absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer p-[1px]')} onClick={onClear}>
<div
className={cn('group absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer p-[1px]')}
onClick={onClear}
data-testid="input-clear"
>
<RiCloseCircleFill className="h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" />
</div>
)}

2
web/app/components/base/markdown/index.tsx
View File

@ -1,5 +1,5 @@
import type { ReactMarkdownWrapperProps, SimplePluginInfo } from './react-markdown-wrapper'
import { flow } from 'lodash-es'
import { flow } from 'es-toolkit/compat'
import dynamic from 'next/dynamic'
import { cn } from '@/utils/classnames'
import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'

2
web/app/components/base/markdown/markdown-utils.ts
View File

@ -3,7 +3,7 @@
* These functions were extracted from the main markdown renderer for better separation of concerns.
* Includes preprocessing for LaTeX and custom "think" tags.
*/
import { flow } from 'lodash-es'
import { flow } from 'es-toolkit/compat'
import { ALLOW_UNSAFE_DATA_SCHEME } from '@/config'
export const preprocessLaTeX = (content: string) => {

2
web/app/components/base/modal/index.tsx
View File

@ -1,6 +1,6 @@
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { Fragment } from 'react'
import { cn } from '@/utils/classnames'
// https://headlessui.com/react/dialog

2
web/app/components/base/modal/modal.tsx
View File

@ -1,6 +1,6 @@
import type { ButtonProps } from '@/app/components/base/button'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'

2
web/app/components/base/pagination/pagination.tsx
View File

@ -4,7 +4,7 @@ import type {
IPaginationProps,
PageButtonProps,
} from './type'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { cn } from '@/utils/classnames'
import usePagination from './hook'

2
web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
View File

@ -1,8 +1,8 @@
import type { ContextBlockType } from '../../types'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { mergeRegister } from '@lexical/utils'
import { noop } from 'es-toolkit/compat'
import { $applyNodeReplacement } from 'lexical'
import { noop } from 'lodash-es'
import {
memo,
useCallback,

2
web/app/components/base/prompt-editor/plugins/context-block/index.tsx
View File

@ -1,12 +1,12 @@
import type { ContextBlockType } from '../../types'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { mergeRegister } from '@lexical/utils'
import { noop } from 'es-toolkit/compat'
import {
$insertNodes,
COMMAND_PRIORITY_EDITOR,
createCommand,
} from 'lexical'
import { noop } from 'lodash-es'
import {
memo,
useEffect,

2
web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
View File

@ -1,8 +1,8 @@
import type { HistoryBlockType } from '../../types'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { mergeRegister } from '@lexical/utils'
import { noop } from 'es-toolkit/compat'
import { $applyNodeReplacement } from 'lexical'
import { noop } from 'lodash-es'
import {
useCallback,
useEffect,

2
web/app/components/base/prompt-editor/plugins/history-block/index.tsx
View File

@ -1,12 +1,12 @@
import type { HistoryBlockType } from '../../types'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { mergeRegister } from '@lexical/utils'
import { noop } from 'es-toolkit/compat'
import {
$insertNodes,
COMMAND_PRIORITY_EDITOR,
createCommand,
} from 'lexical'
import { noop } from 'lodash-es'
import {
memo,
useEffect,

2
web/app/components/base/radio-card/index.tsx
View File

@ -1,6 +1,6 @@
'use client'
import type { FC } from 'react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { cn } from '@/utils/classnames'

3
web/app/components/base/skeleton/index.tsx
View File

@ -36,7 +36,8 @@ export const SkeletonPoint: FC<SkeletonProps> = (props) => {
<div className={cn('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
)
}
/** Usage
/**
* Usage
* <SkeletonContainer>
* <SkeletonRow>
* <SkeletonRectangle className="w-96" />

2
web/app/components/base/tag-input/index.tsx
View File

@ -127,7 +127,7 @@ const TagInput: FC<TagInputProps> = ({
setValue(e.target.value)
}}
onKeyDown={handleKeyDown}
placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
placeholder={t((placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord')) as any)}
/>
</div>
)

2
web/app/components/base/tag-management/panel.tsx
View File

@ -3,7 +3,7 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
import type { Tag } from '@/app/components/base/tag-management/constant'
import { RiAddLine, RiPriceTag3Line } from '@remixicon/react'
import { useUnmount } from 'ahooks'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'

2
web/app/components/base/tag-management/tag-remove-modal.tsx
View File

@ -2,7 +2,7 @@
import type { Tag } from '@/app/components/base/tag-management/constant'
import { RiCloseLine } from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'

2
web/app/components/base/toast/index.spec.tsx
View File

@ -1,6 +1,6 @@
import type { ReactNode } from 'react'
import { act, render, screen, waitFor } from '@testing-library/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import Toast, { ToastProvider, useToastContext } from '.'

2
web/app/components/base/toast/index.tsx
View File

@ -7,7 +7,7 @@ import {
RiErrorWarningFill,
RiInformation2Fill,
} from '@remixicon/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import * as React from 'react'
import { useEffect, useState } from 'react'
import { createRoot } from 'react-dom/client'

2
web/app/components/base/with-input-validation/index.spec.tsx
View File

@ -1,5 +1,5 @@
import { render, screen } from '@testing-library/react'
import { noop } from 'lodash-es'
import { noop } from 'es-toolkit/compat'
import { z } from 'zod'
import withValidation from '.'

274
web/app/components/billing/apps-full-in-dialog/index.spec.tsx Normal file
View File

@ -0,0 +1,274 @@
import type { Mock } from 'vitest'
import type { UsagePlanInfo } from '@/app/components/billing/type'
import type { AppContextValue } from '@/context/app-context'
import type { ProviderContextState } from '@/context/provider-context'
import type { ICurrentWorkspace, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
import { render, screen } from '@testing-library/react'
import { Plan } from '@/app/components/billing/type'
import { mailToSupport } from '@/app/components/header/utils/util'
import { useAppContext } from '@/context/app-context'
import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
import AppsFull from './index'
vi.mock('@/context/app-context', () => ({
useAppContext: vi.fn(),
}))
vi.mock('@/context/provider-context', async (importOriginal) => {
const actual = await importOriginal<typeof import('@/context/provider-context')>()
return {
...actual,
useProviderContext: vi.fn(),
}
})
vi.mock('@/context/modal-context', () => ({
useModalContext: () => ({
setShowPricingModal: vi.fn(),
}),
}))
vi.mock('@/app/components/header/utils/util', () => ({
mailToSupport: vi.fn(),
}))
const buildUsage = (overrides: Partial<UsagePlanInfo> = {}): UsagePlanInfo => ({
buildApps: 0,
teamMembers: 0,
annotatedResponse: 0,
documentsUploadQuota: 0,
apiRateLimit: 0,
triggerEvents: 0,
vectorSpace: 0,
...overrides,
})
const buildProviderContext = (overrides: Partial<ProviderContextState> = {}): ProviderContextState => ({
...baseProviderContextValue,
plan: {
...baseProviderContextValue.plan,
type: Plan.sandbox,
usage: buildUsage({ buildApps: 2 }),
total: buildUsage({ buildApps: 10 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
...overrides,
})
const buildAppContext = (overrides: Partial<AppContextValue> = {}): AppContextValue => {
const userProfile: UserProfileResponse = {
id: 'user-id',
name: 'Test User',
email: 'user@example.com',
avatar: '',
avatar_url: '',
is_password_set: false,
}
const currentWorkspace: ICurrentWorkspace = {
id: 'workspace-id',
name: 'Workspace',
plan: '',
status: '',
created_at: 0,
role: 'normal',
providers: [],
}
const langGeniusVersionInfo: LangGeniusVersionResponse = {
current_env: '',
current_version: '1.0.0',
latest_version: '',
release_date: '',
release_notes: '',
version: '',
can_auto_update: false,
}
const base: Omit<AppContextValue, 'useSelector'> = {
userProfile,
currentWorkspace,
isCurrentWorkspaceManager: false,
isCurrentWorkspaceOwner: false,
isCurrentWorkspaceEditor: false,
isCurrentWorkspaceDatasetOperator: false,
mutateUserProfile: vi.fn(),
mutateCurrentWorkspace: vi.fn(),
langGeniusVersionInfo,
isLoadingCurrentWorkspace: false,
}
const useSelector: AppContextValue['useSelector'] = selector => selector({ ...base, useSelector })
return {
...base,
useSelector,
...overrides,
}
}
describe('AppsFull', () => {
beforeEach(() => {
vi.clearAllMocks()
;(useProviderContext as Mock).mockReturnValue(buildProviderContext())
;(useAppContext as Mock).mockReturnValue(buildAppContext())
;(mailToSupport as Mock).mockReturnValue('mailto:support@example.com')
})
// Rendering behavior for non-team plans.
describe('Rendering', () => {
it('should render the sandbox messaging and upgrade button', () => {
// Act
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
expect(screen.getByText('billing.apps.fullTip1des')).toBeInTheDocument()
expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
expect(screen.getByText('2/10')).toBeInTheDocument()
})
})
// Prop-driven behavior for team plans and contact CTA.
describe('Props', () => {
it('should render team messaging and contact button for non-sandbox plans', () => {
// Arrange
;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
plan: {
...baseProviderContextValue.plan,
type: Plan.team,
usage: buildUsage({ buildApps: 8 }),
total: buildUsage({ buildApps: 10 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
}))
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByText('billing.apps.fullTip2')).toBeInTheDocument()
expect(screen.getByText('billing.apps.fullTip2des')).toBeInTheDocument()
expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
expect(screen.getByRole('link', { name: 'billing.apps.contactUs' })).toHaveAttribute('href', 'mailto:support@example.com')
expect(mailToSupport).toHaveBeenCalledWith('user@example.com', Plan.team, '1.0.0')
})
it('should render upgrade button for professional plans', () => {
// Arrange
;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
plan: {
...baseProviderContextValue.plan,
type: Plan.professional,
usage: buildUsage({ buildApps: 4 }),
total: buildUsage({ buildApps: 10 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
}))
// Act
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
expect(screen.queryByText('billing.apps.contactUs')).not.toBeInTheDocument()
})
it('should render contact button for enterprise plans', () => {
// Arrange
;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
plan: {
...baseProviderContextValue.plan,
type: Plan.enterprise,
usage: buildUsage({ buildApps: 9 }),
total: buildUsage({ buildApps: 10 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
}))
// Act
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
expect(screen.getByRole('link', { name: 'billing.apps.contactUs' })).toHaveAttribute('href', 'mailto:support@example.com')
expect(mailToSupport).toHaveBeenCalledWith('user@example.com', Plan.enterprise, '1.0.0')
})
})
// Edge cases for progress color thresholds.
describe('Edge Cases', () => {
it('should use the success color when usage is below 50%', () => {
// Arrange
;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
plan: {
...baseProviderContextValue.plan,
type: Plan.sandbox,
usage: buildUsage({ buildApps: 2 }),
total: buildUsage({ buildApps: 5 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
}))
// Act
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-bar-progress-solid')
})
it('should use the warning color when usage is between 50% and 80%', () => {
// Arrange
;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
plan: {
...baseProviderContextValue.plan,
type: Plan.sandbox,
usage: buildUsage({ buildApps: 6 }),
total: buildUsage({ buildApps: 10 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
}))
// Act
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-warning-progress')
})
it('should use the error color when usage is 80% or higher', () => {
// Arrange
;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
plan: {
...baseProviderContextValue.plan,
type: Plan.sandbox,
usage: buildUsage({ buildApps: 8 }),
total: buildUsage({ buildApps: 10 }),
reset: {
apiRateLimit: null,
triggerEvents: null,
},
},
}))
// Act
render(<AppsFull loc="billing_dialog" />)
// Assert
expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-error-progress')
})
})
})

64
web/app/components/billing/pricing/assets/index.spec.tsx Normal file
View File

@ -0,0 +1,64 @@
import { render } from '@testing-library/react'
import {
Cloud,
Community,
Enterprise,
EnterpriseNoise,
NoiseBottom,
NoiseTop,
Premium,
PremiumNoise,
Professional,
Sandbox,
SelfHosted,
Team,
} from './index'
describe('Pricing Assets', () => {
// Rendering: each asset should render an svg.
describe('Rendering', () => {
it('should render static assets without crashing', () => {
// Arrange
const assets = [
<Community key="community" />,
<Enterprise key="enterprise" />,
<EnterpriseNoise key="enterprise-noise" />,
<NoiseBottom key="noise-bottom" />,
<NoiseTop key="noise-top" />,
<Premium key="premium" />,
<PremiumNoise key="premium-noise" />,
<Professional key="professional" />,
<Sandbox key="sandbox" />,
<Team key="team" />,
]
// Act / Assert
assets.forEach((asset) => {
const { container, unmount } = render(asset)
expect(container.querySelector('svg')).toBeInTheDocument()
unmount()
})
})
})
// Props: active state should change fill color for selectable assets.
describe('Props', () => {
it('should render active state for Cloud', () => {
// Arrange
const { container } = render(<Cloud isActive />)
// Assert
const rects = Array.from(container.querySelectorAll('rect'))
expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-saas-dify-blue-accessible)')).toBe(true)
})
it('should render inactive state for SelfHosted', () => {
// Arrange
const { container } = render(<SelfHosted isActive={false} />)
// Assert
const rects = Array.from(container.querySelectorAll('rect'))
expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-text-primary)')).toBe(true)
})
})
})

68
web/app/components/billing/pricing/footer.spec.tsx Normal file
View File

@ -0,0 +1,68 @@
import { render, screen } from '@testing-library/react'
import * as React from 'react'
import { CategoryEnum } from '.'
import Footer from './footer'
let mockTranslations: Record<string, string> = {}
vi.mock('next/link', () => ({
default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
<a href={href} className={className} target={target} data-testid="pricing-link">
{children}
</a>
),
}))
vi.mock('react-i18next', async (importOriginal) => {
const actual = await importOriginal<typeof import('react-i18next')>()
return {
...actual,
useTranslation: () => ({
t: (key: string) => mockTranslations[key] ?? key,
}),
}
})
describe('Footer', () => {
beforeEach(() => {
vi.clearAllMocks()
mockTranslations = {}
})
// Rendering behavior
describe('Rendering', () => {
it('should render tax tips and comparison link when in cloud category', () => {
// Arrange
render(<Footer pricingPageURL="https://dify.ai/pricing#plans-and-features" currentCategory={CategoryEnum.CLOUD} />)
// Assert
expect(screen.getByText('billing.plansCommon.taxTip')).toBeInTheDocument()
expect(screen.getByText('billing.plansCommon.taxTipSecond')).toBeInTheDocument()
expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/pricing#plans-and-features')
expect(screen.getByText('billing.plansCommon.comparePlanAndFeatures')).toBeInTheDocument()
})
})
// Prop-driven behavior
describe('Props', () => {
it('should hide tax tips when category is self-hosted', () => {
// Arrange
render(<Footer pricingPageURL="https://dify.ai/pricing#plans-and-features" currentCategory={CategoryEnum.SELF} />)
// Assert
expect(screen.queryByText('billing.plansCommon.taxTip')).not.toBeInTheDocument()
expect(screen.queryByText('billing.plansCommon.taxTipSecond')).not.toBeInTheDocument()
})
})
// Edge case rendering behavior
describe('Edge Cases', () => {
it('should render link even when pricing URL is empty', () => {
// Arrange
render(<Footer pricingPageURL="" currentCategory={CategoryEnum.CLOUD} />)
// Assert
expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', '')
})
})
})

72
web/app/components/billing/pricing/header.spec.tsx Normal file
View File

@ -0,0 +1,72 @@
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import Header from './header'
let mockTranslations: Record<string, string> = {}
vi.mock('react-i18next', async (importOriginal) => {
const actual = await importOriginal<typeof import('react-i18next')>()
return {
...actual,
useTranslation: () => ({
t: (key: string) => mockTranslations[key] ?? key,
}),
}
})
describe('Header', () => {
beforeEach(() => {
vi.clearAllMocks()
mockTranslations = {}
})
// Rendering behavior
describe('Rendering', () => {
it('should render title and description translations', () => {
// Arrange
const handleClose = vi.fn()
// Act
render(<Header onClose={handleClose} />)
// Assert
expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
expect(screen.getByRole('button')).toBeInTheDocument()
})
})
// Prop-driven behavior
describe('Props', () => {
it('should invoke onClose when close button is clicked', () => {
// Arrange
const handleClose = vi.fn()
render(<Header onClose={handleClose} />)
// Act
fireEvent.click(screen.getByRole('button'))
// Assert
expect(handleClose).toHaveBeenCalledTimes(1)
})
})
// Edge case rendering behavior
describe('Edge Cases', () => {
it('should render structure when translations are empty strings', () => {
// Arrange
mockTranslations = {
'billing.plansCommon.title.plans': '',
'billing.plansCommon.title.description': '',
}
// Act
const { container } = render(<Header onClose={vi.fn()} />)
// Assert
expect(container.querySelector('span')).toBeInTheDocument()
expect(container.querySelector('p')).toBeInTheDocument()
expect(screen.getByRole('button')).toBeInTheDocument()
})
})
})

119
web/app/components/billing/pricing/index.spec.tsx Normal file
View File

@ -0,0 +1,119 @@
import type { Mock } from 'vitest'
import type { UsagePlanInfo } from '../type'
import { fireEvent, render, screen } from '@testing-library/react'
import { useKeyPress } from 'ahooks'
import * as React from 'react'
import { useAppContext } from '@/context/app-context'
import { useGetPricingPageLanguage } from '@/context/i18n'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '../type'
import Pricing from './index'
let mockTranslations: Record<string, string> = {}
let mockLanguage: string | null = 'en'
vi.mock('next/link', () => ({
default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
<a href={href} className={className} target={target} data-testid="pricing-link">
{children}
</a>
),
}))
vi.mock('ahooks', () => ({
useKeyPress: vi.fn(),
}))
vi.mock('@/context/app-context', () => ({
useAppContext: vi.fn(),
}))
vi.mock('@/context/provider-context', () => ({
useProviderContext: vi.fn(),
}))
vi.mock('@/context/i18n', () => ({
useGetPricingPageLanguage: vi.fn(),
}))
vi.mock('react-i18next', async (importOriginal) => {
const actual = await importOriginal<typeof import('react-i18next')>()
return {
...actual,
useTranslation: () => ({
t: (key: string, options?: { returnObjects?: boolean }) => {
if (options?.returnObjects)
return mockTranslations[key] ?? []
return mockTranslations[key] ?? key
},
}),
Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
}
})
const buildUsage = (): UsagePlanInfo => ({
buildApps: 0,
teamMembers: 0,
annotatedResponse: 0,
documentsUploadQuota: 0,
apiRateLimit: 0,
triggerEvents: 0,
vectorSpace: 0,
})
describe('Pricing', () => {
beforeEach(() => {
vi.clearAllMocks()
mockTranslations = {}
mockLanguage = 'en'
;(useAppContext as Mock).mockReturnValue({ isCurrentWorkspaceManager: true })
;(useProviderContext as Mock).mockReturnValue({
plan: {
type: Plan.sandbox,
usage: buildUsage(),
total: buildUsage(),
},
})
;(useGetPricingPageLanguage as Mock).mockImplementation(() => mockLanguage)
})
// Rendering behavior
describe('Rendering', () => {
it('should render pricing header and localized footer link', () => {
// Arrange
render(<Pricing onCancel={vi.fn()} />)
// Assert
expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/en/pricing#plans-and-features')
})
})
// Prop-driven behavior
describe('Props', () => {
it('should register esc key handler and allow switching categories', () => {
// Arrange
const handleCancel = vi.fn()
render(<Pricing onCancel={handleCancel} />)
// Act
fireEvent.click(screen.getByText('billing.plansCommon.self'))
// Assert
expect(useKeyPress).toHaveBeenCalledWith(['esc'], handleCancel)
expect(screen.queryByRole('switch')).not.toBeInTheDocument()
})
})
// Edge case rendering behavior
describe('Edge Cases', () => {
it('should fall back to default pricing URL when language is empty', () => {
// Arrange
mockLanguage = ''
render(<Pricing onCancel={vi.fn()} />)
// Assert
expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/pricing#plans-and-features')
})
})
})

109
web/app/components/billing/pricing/plan-switcher/index.spec.tsx Normal file
View File

@ -0,0 +1,109 @@
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import { CategoryEnum } from '../index'
import PlanSwitcher from './index'
import { PlanRange } from './plan-range-switcher'
let mockTranslations: Record<string, string> = {}
vi.mock('react-i18next', async (importOriginal) => {
const actual = await importOriginal<typeof import('react-i18next')>()
return {
...actual,
useTranslation: () => ({
t: (key: string) => mockTranslations[key] ?? key,
}),
}
})
describe('PlanSwitcher', () => {
beforeEach(() => {
vi.clearAllMocks()
mockTranslations = {}
})
// Rendering behavior
describe('Rendering', () => {
it('should render category tabs and plan range switcher for cloud', () => {
// Arrange
render(
<PlanSwitcher
currentCategory={CategoryEnum.CLOUD}
currentPlanRange={PlanRange.monthly}
onChangeCategory={vi.fn()}
onChangePlanRange={vi.fn()}
/>,
)
// Assert
expect(screen.getByText('billing.plansCommon.cloud')).toBeInTheDocument()
expect(screen.getByText('billing.plansCommon.self')).toBeInTheDocument()
expect(screen.getByRole('switch')).toBeInTheDocument()
})
})
// Prop-driven behavior
describe('Props', () => {
it('should call onChangeCategory when selecting a tab', () => {
// Arrange
const handleChangeCategory = vi.fn()
render(
<PlanSwitcher
currentCategory={CategoryEnum.CLOUD}
currentPlanRange={PlanRange.monthly}
onChangeCategory={handleChangeCategory}
onChangePlanRange={vi.fn()}
/>,
)
// Act
fireEvent.click(screen.getByText('billing.plansCommon.self'))
// Assert
expect(handleChangeCategory).toHaveBeenCalledTimes(1)
expect(handleChangeCategory).toHaveBeenCalledWith(CategoryEnum.SELF)
})
it('should hide plan range switcher when category is self-hosted', () => {
// Arrange
render(
<PlanSwitcher
currentCategory={CategoryEnum.SELF}
currentPlanRange={PlanRange.yearly}
onChangeCategory={vi.fn()}
onChangePlanRange={vi.fn()}
/>,
)
// Assert
expect(screen.queryByRole('switch')).not.toBeInTheDocument()
})
})
// Edge case rendering behavior
describe('Edge Cases', () => {
it('should render tabs when translation strings are empty', () => {
// Arrange
mockTranslations = {
'billing.plansCommon.cloud': '',
'billing.plansCommon.self': '',
}
// Act
const { container } = render(
<PlanSwitcher
currentCategory={CategoryEnum.SELF}
currentPlanRange={PlanRange.monthly}
onChangeCategory={vi.fn()}
onChangePlanRange={vi.fn()}
/>,
)
// Assert
const labels = container.querySelectorAll('span')
expect(labels).toHaveLength(2)
expect(labels[0]?.textContent).toBe('')
expect(labels[1]?.textContent).toBe('')
})
})
})

81
web/app/components/billing/pricing/plan-switcher/plan-range-switcher.spec.tsx Normal file
View File

@ -0,0 +1,81 @@
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import PlanRangeSwitcher, { PlanRange } from './plan-range-switcher'
let mockTranslations: Record<string, string> = {}
vi.mock('react-i18next', async (importOriginal) => {
const actual = await importOriginal<typeof import('react-i18next')>()
return {
...actual,
useTranslation: () => ({
t: (key: string) => mockTranslations[key] ?? key,
}),
}
})
describe('PlanRangeSwitcher', () => {
beforeEach(() => {
vi.clearAllMocks()
mockTranslations = {}
})
// Rendering behavior
describe('Rendering', () => {
it('should render the annual billing label', () => {
// Arrange
render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
// Assert
expect(screen.getByText('billing.plansCommon.annualBilling')).toBeInTheDocument()
expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false')
})
})
// Prop-driven behavior
describe('Props', () => {
it('should switch to yearly when toggled from monthly', () => {
// Arrange
const handleChange = vi.fn()
render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={handleChange} />)
// Act
fireEvent.click(screen.getByRole('switch'))
// Assert
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenCalledWith(PlanRange.yearly)
})
it('should switch to monthly when toggled from yearly', () => {
// Arrange
const handleChange = vi.fn()
render(<PlanRangeSwitcher value={PlanRange.yearly} onChange={handleChange} />)
// Act
fireEvent.click(screen.getByRole('switch'))
// Assert
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenCalledWith(PlanRange.monthly)
})
})
// Edge case rendering behavior
describe('Edge Cases', () => {
it('should render when the translation string is empty', () => {
// Arrange
mockTranslations = {
'billing.plansCommon.annualBilling': '',
}
// Act
const { container } = render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
// Assert
const label = container.querySelector('span')
expect(label).toBeInTheDocument()
expect(label?.textContent).toBe('')
})
})
})

95
web/app/components/billing/pricing/plan-switcher/tab.spec.tsx Normal file
View File

@ -0,0 +1,95 @@
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import Tab from './tab'
const Icon = ({ isActive }: { isActive: boolean }) => (
<svg data-testid="tab-icon" data-active={isActive ? 'true' : 'false'} />
)
describe('PlanSwitcherTab', () => {
beforeEach(() => {
vi.clearAllMocks()
})
// Rendering behavior
describe('Rendering', () => {
it('should render label and icon', () => {
// Arrange
render(
<Tab
Icon={Icon}
value="cloud"
label="Cloud"
isActive={false}
onClick={vi.fn()}
/>,
)
// Assert
expect(screen.getByText('Cloud')).toBeInTheDocument()
expect(screen.getByTestId('tab-icon')).toHaveAttribute('data-active', 'false')
})
})
// Prop-driven behavior
describe('Props', () => {
it('should call onClick with the provided value', () => {
// Arrange
const handleClick = vi.fn()
render(
<Tab
Icon={Icon}
value="self"
label="Self"
isActive={false}
onClick={handleClick}
/>,
)
// Act
fireEvent.click(screen.getByText('Self'))
// Assert
expect(handleClick).toHaveBeenCalledTimes(1)
expect(handleClick).toHaveBeenCalledWith('self')
})
it('should apply active text class when isActive is true', () => {
// Arrange
render(
<Tab
Icon={Icon}
value="cloud"
label="Cloud"
isActive
onClick={vi.fn()}
/>,
)
// Assert
expect(screen.getByText('Cloud')).toHaveClass('text-saas-dify-blue-accessible')
expect(screen.getByTestId('tab-icon')).toHaveAttribute('data-active', 'true')
})
})
// Edge case rendering behavior
describe('Edge Cases', () => {
it('should render when label is empty', () => {
// Arrange
const { container } = render(
<Tab
Icon={Icon}
value="cloud"
label=""
isActive={false}
onClick={vi.fn()}
/>,
)
// Assert
const label = container.querySelector('span')
expect(label).toBeInTheDocument()
expect(label?.textContent).toBe('')
})
})
})

4
web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
View File

@ -106,7 +106,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
{ICON_MAP[plan]}
<div className="flex min-h-[104px] flex-col gap-y-2">
<div className="flex items-center gap-x-2.5">
<div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name`)}</div>
<div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name` as any) as string}</div>
{
isMostPopularPlan && (
<div className="flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1">
@ -117,7 +117,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
)
}
</div>
<div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.description`)}</div>
<div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.description` as any) as string}</div>
</div>
</div>
{/* Price */}

2
web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
View File

@ -42,7 +42,7 @@ const Button = ({
onClick={handleGetPayUrl}
>
<div className="flex grow items-center gap-x-2">
<span>{t(`${i18nPrefix}.btnText`)}</span>
<span>{t(`${i18nPrefix}.btnText` as any) as string}</span>
{isPremiumPlan && (
<span className="pb-px pt-[7px]">
<AwsMarketplace className="h-6" />

8
web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
View File

@ -85,16 +85,16 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
<div className=" flex flex-col gap-y-6 px-1 pt-10">
{STYLE_MAP[plan].icon}
<div className="flex min-h-[104px] flex-col gap-y-2">
<div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name`)}</div>
<div className="system-md-regular line-clamp-2 text-text-secondary">{t(`${i18nPrefix}.description`)}</div>
<div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name` as any) as string}</div>
<div className="system-md-regular line-clamp-2 text-text-secondary">{t(`${i18nPrefix}.description` as any) as string}</div>
</div>
</div>
{/* Price */}
<div className="flex items-end gap-x-2 px-1 pb-8 pt-4">
<div className="title-4xl-semi-bold shrink-0 text-text-primary">{t(`${i18nPrefix}.price`)}</div>
<div className="title-4xl-semi-bold shrink-0 text-text-primary">{t(`${i18nPrefix}.price` as any) as string}</div>
{!isFreePlan && (
<span className="system-md-regular pb-0.5 text-text-tertiary">
{t(`${i18nPrefix}.priceTip`)}
{t(`${i18nPrefix}.priceTip` as any) as string}
</span>
)}
</div>

Some files were not shown because too many files have changed in this diff Show More