mirror of https://github.com/langgenius/dify.git
Merge branch 'feat/rag-pipeline' into deploy/rag-dev
This commit is contained in:
twwu
commit
dd91edf70b
|
|
@ -8,16 +8,13 @@ import {
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import SettingsModal from '../settings-modal'
|
||||
import type { DataSet } from '@/models/datasets'
|
||||
import { DataSourceType } from '@/models/datasets'
|
||||
import FileIcon from '@/app/components/base/file-icon'
|
||||
import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
|
||||
import { Globe06 } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
import { useKnowledge } from '@/hooks/use-knowledge'
|
||||
import cn from '@/utils/classnames'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
type ItemProps = {
|
||||
className?: string
|
||||
|
|
@ -47,33 +44,26 @@ const Item: FC<ItemProps> = ({
|
|||
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
||||
const iconInfo = config.icon_info || {
|
||||
icon: '📙',
|
||||
icon_type: 'emoji',
|
||||
icon_background: '#FFF4ED',
|
||||
icon_url: '',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'group relative mb-1 flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2 last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover',
|
||||
isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='flex w-0 grow items-center space-x-1.5'>
|
||||
{
|
||||
config.data_source_type === DataSourceType.FILE && (
|
||||
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
|
||||
<Folder className='h-4 w-4 text-[#444CE7]' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
config.data_source_type === DataSourceType.NOTION && (
|
||||
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
|
||||
<FileIcon type='notion' className='h-4 w-4' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
config.data_source_type === DataSourceType.WEB && (
|
||||
<div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-blue-100 bg-[#F5FAFF]'>
|
||||
<Globe06 className='h-4 w-4 text-blue-600' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<AppIcon
|
||||
size='tiny'
|
||||
iconType={iconInfo.icon_type}
|
||||
icon={iconInfo.icon}
|
||||
background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
|
||||
imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
|
||||
/>
|
||||
<div className='system-sm-medium w-0 grow truncate text-text-secondary' title={config.name}>{config.name}</div>
|
||||
</div>
|
||||
<div className='ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex'>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import {
|
|||
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import { fetchMembers } from '@/service/common'
|
||||
import type { Member } from '@/models/common'
|
||||
import { IndexingType } from '@/app/components/datasets/create/step-two'
|
||||
|
||||
type SettingsModalProps = {
|
||||
currentDataset: DataSet
|
||||
|
|
@ -54,8 +55,6 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
|||
const { data: embeddingsModelList } = useModelList(ModelTypeEnum.textEmbedding)
|
||||
const {
|
||||
modelList: rerankModelList,
|
||||
defaultModel: rerankDefaultModel,
|
||||
currentModel: isRerankDefaultModelValid,
|
||||
} = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
|
||||
const { t } = useTranslation()
|
||||
const { notify } = useToastContext()
|
||||
|
|
@ -73,6 +72,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
|||
|
||||
const [indexMethod, setIndexMethod] = useState(currentDataset.indexing_technique)
|
||||
const [retrievalConfig, setRetrievalConfig] = useState(localeCurrentDataset?.retrieval_model_dict as RetrievalConfig)
|
||||
const [keywordNumber, setKeywordNumber] = useState(currentDataset.keyword_number ?? 10)
|
||||
|
||||
const handleValueChange = (type: string, value: string) => {
|
||||
setLocaleCurrentDataset({ ...localeCurrentDataset, [type]: value })
|
||||
|
|
@ -124,6 +124,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
|||
description,
|
||||
permission,
|
||||
indexing_technique: indexMethod,
|
||||
keyword_number: keywordNumber,
|
||||
retrieval_model: {
|
||||
...retrievalConfig,
|
||||
score_threshold: retrievalConfig.score_threshold_enabled ? retrievalConfig.score_threshold : 0,
|
||||
|
|
@ -248,13 +249,15 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
|||
<IndexMethod
|
||||
disabled={!localeCurrentDataset?.embedding_available}
|
||||
value={indexMethod}
|
||||
onChange={v => setIndexMethod(v!)}
|
||||
onChange={setIndexMethod}
|
||||
currentValue={currentDataset.indexing_technique}
|
||||
keywordNumber={keywordNumber}
|
||||
onKeywordNumberChange={setKeywordNumber}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{indexMethod === 'high_quality' && (
|
||||
{indexMethod === IndexingType.QUALIFIED && (
|
||||
<div className={cn(rowClass)}>
|
||||
<div className={labelClass}>
|
||||
<div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.embeddingModel')}</div>
|
||||
|
|
@ -333,7 +336,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{indexMethod === 'high_quality'
|
||||
{indexMethod === IndexingType.QUALIFIED
|
||||
? (
|
||||
<RetrievalMethodConfig
|
||||
value={retrievalConfig}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import '@testing-library/jest-dom'
|
||||
import AppIcon from './index'
|
||||
|
||||
// Mock emoji-mart initialization
|
||||
jest.mock('emoji-mart', () => ({
|
||||
init: jest.fn(),
|
||||
}))
|
||||
|
||||
// Mock emoji data
|
||||
jest.mock('@emoji-mart/data', () => ({}))
|
||||
|
||||
// Mock the ahooks useHover hook
|
||||
jest.mock('ahooks', () => ({
|
||||
useHover: jest.fn(() => false),
|
||||
}))
|
||||
|
||||
describe('AppIcon', () => {
|
||||
beforeEach(() => {
|
||||
// Mock custom element
|
||||
if (!customElements.get('em-emoji')) {
|
||||
customElements.define('em-emoji', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
}
|
||||
|
||||
// Mock basic functionality
|
||||
connectedCallback() {
|
||||
this.innerHTML = '🤖'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Reset mocks
|
||||
require('ahooks').useHover.mockReset().mockReturnValue(false)
|
||||
})
|
||||
|
||||
it('renders default emoji when no icon or image is provided', () => {
|
||||
render(<AppIcon />)
|
||||
const emojiElement = document.querySelector('em-emoji')
|
||||
expect(emojiElement).toBeInTheDocument()
|
||||
expect(emojiElement?.getAttribute('id')).toBe('🤖')
|
||||
})
|
||||
|
||||
it('renders with custom emoji when icon is provided', () => {
|
||||
render(<AppIcon icon='smile' />)
|
||||
const emojiElement = document.querySelector('em-emoji')
|
||||
expect(emojiElement).toBeInTheDocument()
|
||||
expect(emojiElement?.getAttribute('id')).toBe('smile')
|
||||
})
|
||||
|
||||
it('renders image when iconType is image and imageUrl is provided', () => {
|
||||
render(<AppIcon iconType='image' imageUrl='test-image.jpg' />)
|
||||
const imgElement = screen.getByAltText('app icon')
|
||||
expect(imgElement).toBeInTheDocument()
|
||||
expect(imgElement).toHaveAttribute('src', 'test-image.jpg')
|
||||
})
|
||||
|
||||
it('renders innerIcon when provided', () => {
|
||||
render(<AppIcon innerIcon={<div data-testid='inner-icon'>Custom Icon</div>} />)
|
||||
const innerIcon = screen.getByTestId('inner-icon')
|
||||
expect(innerIcon).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('applies size classes correctly', () => {
|
||||
const { container: xsContainer } = render(<AppIcon size='xs' />)
|
||||
expect(xsContainer.firstChild).toHaveClass('w-4 h-4 rounded-[4px]')
|
||||
|
||||
const { container: tinyContainer } = render(<AppIcon size='tiny' />)
|
||||
expect(tinyContainer.firstChild).toHaveClass('w-6 h-6 rounded-md')
|
||||
|
||||
const { container: smallContainer } = render(<AppIcon size='small' />)
|
||||
expect(smallContainer.firstChild).toHaveClass('w-8 h-8 rounded-lg')
|
||||
|
||||
const { container: mediumContainer } = render(<AppIcon size='medium' />)
|
||||
expect(mediumContainer.firstChild).toHaveClass('w-9 h-9 rounded-[10px]')
|
||||
|
||||
const { container: largeContainer } = render(<AppIcon size='large' />)
|
||||
expect(largeContainer.firstChild).toHaveClass('w-10 h-10 rounded-[10px]')
|
||||
|
||||
const { container: xlContainer } = render(<AppIcon size='xl' />)
|
||||
expect(xlContainer.firstChild).toHaveClass('w-12 h-12 rounded-xl')
|
||||
|
||||
const { container: xxlContainer } = render(<AppIcon size='xxl' />)
|
||||
expect(xxlContainer.firstChild).toHaveClass('w-14 h-14 rounded-2xl')
|
||||
})
|
||||
|
||||
it('applies rounded class when rounded=true', () => {
|
||||
const { container } = render(<AppIcon rounded />)
|
||||
expect(container.firstChild).toHaveClass('rounded-full')
|
||||
})
|
||||
|
||||
it('applies custom background color', () => {
|
||||
const { container } = render(<AppIcon background='#FF5500' />)
|
||||
expect(container.firstChild).toHaveStyle('background: #FF5500')
|
||||
})
|
||||
|
||||
it('uses default background color when no background is provided for non-image icons', () => {
|
||||
const { container } = render(<AppIcon />)
|
||||
expect(container.firstChild).toHaveStyle('background: #FFEAD5')
|
||||
})
|
||||
|
||||
it('does not apply background style for image icons', () => {
|
||||
const { container } = render(<AppIcon iconType='image' imageUrl='test.jpg' background='#FF5500' />)
|
||||
// Should not have the background style from the prop
|
||||
expect(container.firstChild).not.toHaveStyle('background: #FF5500')
|
||||
})
|
||||
|
||||
it('calls onClick handler when clicked', () => {
|
||||
const handleClick = jest.fn()
|
||||
const { container } = render(<AppIcon onClick={handleClick} />)
|
||||
fireEvent.click(container.firstChild!)
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(<AppIcon className='custom-class' />)
|
||||
expect(container.firstChild).toHaveClass('custom-class')
|
||||
})
|
||||
|
||||
it('does not display edit icon when showEditIcon=false', () => {
|
||||
render(<AppIcon />)
|
||||
const editIcon = screen.queryByRole('svg')
|
||||
expect(editIcon).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('displays edit icon when showEditIcon=true and hovering', () => {
|
||||
// Mock the useHover hook to return true for this test
|
||||
require('ahooks').useHover.mockReturnValue(true)
|
||||
|
||||
render(<AppIcon showEditIcon />)
|
||||
const editIcon = document.querySelector('svg')
|
||||
expect(editIcon).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not display edit icon when showEditIcon=true but not hovering', () => {
|
||||
// useHover returns false by default from our mock setup
|
||||
render(<AppIcon showEditIcon />)
|
||||
const editIcon = document.querySelector('svg')
|
||||
expect(editIcon).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles conditional isValidImageIcon check correctly', () => {
|
||||
// Case 1: Valid image icon
|
||||
const { rerender } = render(
|
||||
<AppIcon iconType='image' imageUrl='test.jpg' />,
|
||||
)
|
||||
expect(screen.getByAltText('app icon')).toBeInTheDocument()
|
||||
|
||||
// Case 2: Invalid - missing image URL
|
||||
rerender(<AppIcon iconType='image' imageUrl={null} />)
|
||||
expect(screen.queryByAltText('app icon')).not.toBeInTheDocument()
|
||||
|
||||
// Case 3: Invalid - wrong icon type
|
||||
rerender(<AppIcon iconType='emoji' imageUrl='test.jpg' />)
|
||||
expect(screen.queryByAltText('app icon')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
|
@ -8,15 +8,13 @@ import {
|
|||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { DataSet } from '@/models/datasets'
|
||||
import { DataSourceType } from '@/models/datasets'
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import FileIcon from '@/app/components/base/file-icon'
|
||||
import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
|
||||
import SettingsModal from '@/app/components/app/configuration/dataset-config/settings-modal'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
import { useKnowledge } from '@/hooks/use-knowledge'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
type Props = {
|
||||
payload: DataSet
|
||||
|
|
@ -54,25 +52,28 @@ const DatasetItem: FC<Props> = ({
|
|||
onRemove()
|
||||
}, [onRemove])
|
||||
|
||||
const iconInfo = payload.icon_info || {
|
||||
icon: '📙',
|
||||
icon_type: 'emoji',
|
||||
icon_background: '#FFF4ED',
|
||||
icon_url: '',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-lg
|
||||
border-[0.5px] border-components-panel-border-subtle px-2
|
||||
${isDeleteHovered
|
||||
? 'border-state-destructive-border bg-state-destructive-hover'
|
||||
: 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
|
||||
}`}>
|
||||
? 'border-state-destructive-border bg-state-destructive-hover'
|
||||
: 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
|
||||
}`}>
|
||||
<div className='flex w-0 grow items-center space-x-1.5'>
|
||||
{
|
||||
payload.data_source_type === DataSourceType.NOTION
|
||||
? (
|
||||
<div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
|
||||
<FileIcon type='notion' className='h-4 w-4' />
|
||||
</div>
|
||||
)
|
||||
: <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
|
||||
<Folder className='h-4 w-4 text-[#444CE7]' />
|
||||
</div>
|
||||
}
|
||||
<AppIcon
|
||||
size='tiny'
|
||||
iconType={iconInfo.icon_type}
|
||||
icon={iconInfo.icon}
|
||||
background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
|
||||
imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
|
||||
/>
|
||||
<div className='system-sm-medium w-0 grow truncate text-text-secondary'>{payload.name}</div>
|
||||
</div>
|
||||
{!readonly && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue