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

feat: Implement Notion connector and related components for data source selection in the RAG pipeline

Browse Source
This commit is contained in:
twwu
2025-04-24 15:32:04 +08:00
parent d768094376
commit 44b9ce0951
15 changed files with 815 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/app/components/base/notion-connector/index.tsx Normal file
View File

@ -0,0 +1,27 @@
import { useTranslation } from 'react-i18next'
import { Notion } from '../icons/src/public/common'
import { Icon3Dots } from '../icons/src/vender/line/others'
import Button from '../button'
type NotionConnectorProps = {
onSetting: () => void
}
export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
const { t } = useTranslation()
return (
<div className='flex flex-col items-start rounded-2xl bg-workflow-process-bg p-6'>
<div className='mb-2 h-12 w-12 rounded-[10px] border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5'>
<Notion className='size-6' />
</div>
<div className='mb-1 flex flex-col gap-y-1 pb-3 pt-1'>
<span className='system-md-semibold text-text-secondary'>
{t('datasetCreation.stepOne.notionSyncTitle')}
<Icon3Dots className='relative -left-1.5 -top-2.5 inline h-4 w-4 text-text-secondary' />
</span>
<div className='system-sm-regular text-text-tertiary'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
</div>
<Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
</div>
)
}

14
web/app/components/base/notion-page-selector/base.tsx
View File

@ -5,9 +5,9 @@ import WorkspaceSelector from './workspace-selector'
import SearchInput from './search-input'
import PageSelector from './page-selector'
import { preImportNotionPages } from '@/service/datasets'
import { NotionConnector } from '@/app/components/datasets/create/step-one'
import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
import { useModalContext } from '@/context/modal-context'
import { useModalContextSelector } from '@/context/modal-context'
import { NotionConnector } from '../notion-connector'
type NotionPageSelectorProps = {
value?: string[]
@ -30,7 +30,7 @@ const NotionPageSelector = ({
const [prevData, setPrevData] = useState(data)
const [searchValue, setSearchValue] = useState('')
const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
const { setShowAccountSettingModal } = useModalContext()
const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
const notionWorkspaces = useMemo(() => {
return data?.notion_info || []
@ -87,11 +87,11 @@ const NotionPageSelector = ({
}, [firstWorkspaceId])
return (
<div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
<>
{
data?.notion_info?.length
? (
<>
<div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
<div className='flex h-12 items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-2'>
<div className='flex grow items-center gap-x-1'>
<WorkspaceSelector
@ -123,13 +123,13 @@ const NotionPageSelector = ({
onPreview={handlePreviewPage}
/>
</div>
</>
</div>
)
: (
<NotionConnector onSetting={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })} />
)
}
</div>
</>
)
}