diff --git a/web/app/components/base/icons/assets/vender/other/square-checklist.svg b/web/app/components/base/icons/assets/vender/other/square-checklist.svg new file mode 100644 index 0000000000..eaca7dfdea --- /dev/null +++ b/web/app/components/base/icons/assets/vender/other/square-checklist.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/src/vender/other/SquareChecklist.json b/web/app/components/base/icons/src/vender/other/SquareChecklist.json new file mode 100644 index 0000000000..2295cf3599 --- /dev/null +++ b/web/app/components/base/icons/src/vender/other/SquareChecklist.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "24", + "height": "24", + "viewBox": "0 0 24 24", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M19 6C19 5.44771 18.5523 5 18 5H6C5.44771 5 5 5.44771 5 6V18C5 18.5523 5.44771 19 6 19H18C18.5523 19 19 18.5523 19 18V6ZM9.73926 13.1533C10.0706 12.7115 10.6978 12.6218 11.1396 12.9531C11.5815 13.2845 11.6712 13.9117 11.3398 14.3535L9.46777 16.8486C9.14935 17.2732 8.55487 17.3754 8.11328 17.0811L6.98828 16.3311C6.52878 16.0247 6.40465 15.4039 6.71094 14.9443C7.01729 14.4848 7.63813 14.3606 8.09766 14.667L8.43457 14.8916L9.73926 13.1533ZM16 14C16.5523 14 17 14.4477 17 15C17 15.5523 16.5523 16 16 16H14C13.4477 16 13 15.5523 13 15C13 14.4477 13.4477 14 14 14H16ZM9.73926 7.15234C10.0706 6.71052 10.6978 6.62079 11.1396 6.95215C11.5815 7.28352 11.6712 7.91071 11.3398 8.35254L9.46777 10.8477C9.14936 11.2722 8.55487 11.3744 8.11328 11.0801L6.98828 10.3301C6.52884 10.0238 6.40476 9.40286 6.71094 8.94336C7.0173 8.48384 7.63814 8.35965 8.09766 8.66602L8.43457 8.89062L9.73926 7.15234ZM16.0576 8C16.6099 8 17.0576 8.44772 17.0576 9C17.0576 9.55228 16.6099 10 16.0576 10H14.0576C13.5055 9.99985 13.0576 9.55219 13.0576 9C13.0576 8.44781 13.5055 8.00015 14.0576 8H16.0576ZM21 18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "SquareChecklist" +} diff --git a/web/app/components/base/icons/src/vender/other/SquareChecklist.tsx b/web/app/components/base/icons/src/vender/other/SquareChecklist.tsx new file mode 100644 index 0000000000..f927fa88d2 --- /dev/null +++ b/web/app/components/base/icons/src/vender/other/SquareChecklist.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './SquareChecklist.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'SquareChecklist' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/other/index.ts b/web/app/components/base/icons/src/vender/other/index.ts index 89cbe9033d..0ca5f22bcf 100644 --- a/web/app/components/base/icons/src/vender/other/index.ts +++ b/web/app/components/base/icons/src/vender/other/index.ts @@ -6,3 +6,4 @@ export { default as Mcp } from './Mcp' export { default as NoToolPlaceholder } from './NoToolPlaceholder' export { default as Openai } from './Openai' export { default as ReplayLine } from './ReplayLine' +export { default as SquareChecklist } from './SquareChecklist' diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx index 9315605cdf..ba89be7ef7 100644 --- a/web/app/components/base/notion-page-selector/base.tsx +++ b/web/app/components/base/notion-page-selector/base.tsx @@ -21,7 +21,6 @@ type NotionPageSelectorProps = { datasetId?: string credentialList: DataSourceCredential[] onSelectCredential?: (credentialId: string) => void - supportBatchUpload?: boolean } const NotionPageSelector = ({ @@ -33,7 +32,6 @@ const NotionPageSelector = ({ datasetId = '', credentialList, onSelectCredential, - supportBatchUpload = false, }: NotionPageSelectorProps) => { const [searchValue, setSearchValue] = useState('') const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal) @@ -177,7 +175,6 @@ const NotionPageSelector = ({ canPreview={canPreview} previewPageId={previewPageId} onPreview={handlePreviewPage} - isMultipleChoice={supportBatchUpload} /> )} diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx index 9c89b601fb..3541997c67 100644 --- a/web/app/components/base/notion-page-selector/page-selector/index.tsx +++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx @@ -7,7 +7,6 @@ import Checkbox from '../../checkbox' import NotionIcon from '../../notion-icon' import cn from '@/utils/classnames' import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common' -import Radio from '@/app/components/base/radio/ui' type PageSelectorProps = { value: Set @@ -82,7 +81,6 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{ searchValue: string previewPageId: string pagesMap: DataSourceNotionPageMap - isMultipleChoice?: boolean }>) => { const { t } = useTranslation() const { @@ -97,7 +95,6 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{ searchValue, previewPageId, pagesMap, - isMultipleChoice, } = data const current = dataList[index] const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[current.page_id] @@ -138,24 +135,14 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{ previewPageId === current.page_id && 'bg-state-base-hover')} style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }} > - {isMultipleChoice ? ( - { - handleCheck(index) - }} - />) : ( - { - handleCheck(index) - }} - /> - )} + { + handleCheck(index) + }} + /> {!searchValue && renderArrow()} { const { t } = useTranslation() const [dataList, setDataList] = useState([]) @@ -278,7 +264,7 @@ const PageSelector = ({ const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId] if (copyValue.has(pageId)) { - if (!searchValue && isMultipleChoice) { + if (!searchValue) { for (const item of currentWithChildrenAndDescendants.descendants) copyValue.delete(item) } @@ -286,18 +272,12 @@ const PageSelector = ({ copyValue.delete(pageId) } else { - if (!searchValue && isMultipleChoice) { + if (!searchValue) { for (const item of currentWithChildrenAndDescendants.descendants) copyValue.add(item) } - // Single choice mode, clear previous selection - if (!isMultipleChoice && copyValue.size > 0) { - copyValue.clear() - copyValue.add(pageId) - } - else { - copyValue.add(pageId) - } + + copyValue.add(pageId) } onSelect(new Set(copyValue)) @@ -341,7 +321,6 @@ const PageSelector = ({ searchValue, previewPageId: currentPreviewPageId, pagesMap, - isMultipleChoice, }} > {Item} diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx index bdae8a0cba..7bf85cdcc3 100644 --- a/web/app/components/base/premium-badge/index.tsx +++ b/web/app/components/base/premium-badge/index.tsx @@ -12,6 +12,7 @@ const PremiumBadgeVariants = cva( size: { s: 'premium-badge-s', m: 'premium-badge-m', + custom: '', }, color: { blue: 'premium-badge-blue', @@ -33,7 +34,7 @@ const PremiumBadgeVariants = cva( ) type PremiumBadgeProps = { - size?: 's' | 'm' + size?: 's' | 'm' | 'custom' color?: 'blue' | 'indigo' | 'gray' | 'orange' allowHover?: boolean styleCss?: CSSProperties diff --git a/web/app/components/billing/plan-upgrade-modal/index.spec.tsx b/web/app/components/billing/plan-upgrade-modal/index.spec.tsx new file mode 100644 index 0000000000..324043d439 --- /dev/null +++ b/web/app/components/billing/plan-upgrade-modal/index.spec.tsx @@ -0,0 +1,118 @@ +import React from 'react' +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import PlanUpgradeModal from './index' + +const mockSetShowPricingModal = jest.fn() + +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (key: string) => key, + }), +})) + +jest.mock('@/app/components/base/modal', () => { + const MockModal = ({ isShow, children }: { isShow: boolean; children: React.ReactNode }) => ( + isShow ?
{children}
: null + ) + return { + __esModule: true, + default: MockModal, + } +}) + +jest.mock('@/context/modal-context', () => ({ + useModalContext: () => ({ + setShowPricingModal: mockSetShowPricingModal, + }), +})) + +const baseProps = { + title: 'Upgrade Required', + description: 'You need to upgrade your plan.', + show: true, + onClose: jest.fn(), +} + +const renderComponent = (props: Partial> = {}) => { + const mergedProps = { ...baseProps, ...props } + return render() +} + +describe('PlanUpgradeModal', () => { + beforeEach(() => { + jest.clearAllMocks() + }) + + // Rendering and props-driven content + it('should render modal with provided content when visible', () => { + // Arrange + const extraInfoText = 'Additional upgrade details' + renderComponent({ + extraInfo:
{extraInfoText}
, + }) + + // Assert + expect(screen.getByText(baseProps.title)).toBeInTheDocument() + expect(screen.getByText(baseProps.description)).toBeInTheDocument() + expect(screen.getByText(extraInfoText)).toBeInTheDocument() + expect(screen.getByText('billing.triggerLimitModal.dismiss')).toBeInTheDocument() + expect(screen.getByText('billing.triggerLimitModal.upgrade')).toBeInTheDocument() + }) + + // Guard against rendering when modal is hidden + it('should not render content when show is false', () => { + // Act + renderComponent({ show: false }) + + // Assert + expect(screen.queryByText(baseProps.title)).not.toBeInTheDocument() + expect(screen.queryByText(baseProps.description)).not.toBeInTheDocument() + }) + + // User closes the modal from dismiss button + it('should call onClose when dismiss button is clicked', async () => { + // Arrange + const user = userEvent.setup() + const onClose = jest.fn() + renderComponent({ onClose }) + + // Act + await user.click(screen.getByText('billing.triggerLimitModal.dismiss')) + + // Assert + expect(onClose).toHaveBeenCalledTimes(1) + }) + + // Upgrade path uses provided callback over pricing modal + it('should call onUpgrade and onClose when upgrade button is clicked with onUpgrade provided', async () => { + // Arrange + const user = userEvent.setup() + const onClose = jest.fn() + const onUpgrade = jest.fn() + renderComponent({ onClose, onUpgrade }) + + // Act + await user.click(screen.getByText('billing.triggerLimitModal.upgrade')) + + // Assert + expect(onClose).toHaveBeenCalledTimes(1) + expect(onUpgrade).toHaveBeenCalledTimes(1) + expect(mockSetShowPricingModal).not.toHaveBeenCalled() + }) + + // Fallback upgrade path opens pricing modal when no onUpgrade is supplied + it('should open pricing modal when upgrade button is clicked without onUpgrade', async () => { + // Arrange + const user = userEvent.setup() + const onClose = jest.fn() + renderComponent({ onClose, onUpgrade: undefined }) + + // Act + await user.click(screen.getByText('billing.triggerLimitModal.upgrade')) + + // Assert + expect(onClose).toHaveBeenCalledTimes(1) + expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1) + }) +}) diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx new file mode 100644 index 0000000000..4f5d1ed3a6 --- /dev/null +++ b/web/app/components/billing/plan-upgrade-modal/index.tsx @@ -0,0 +1,87 @@ +'use client' +import type { FC } from 'react' +import React, { useCallback } from 'react' +import { useTranslation } from 'react-i18next' +import Modal from '@/app/components/base/modal' +import Button from '@/app/components/base/button' +import UpgradeBtn from '@/app/components/billing/upgrade-btn' +import styles from './style.module.css' +import { SquareChecklist } from '../../base/icons/src/vender/other' +import { useModalContext } from '@/context/modal-context' + +type Props = { + Icon?: React.ComponentType> + title: string + description: string + extraInfo?: React.ReactNode + show: boolean + onClose: () => void + onUpgrade?: () => void +} + +const PlanUpgradeModal: FC = ({ + Icon = SquareChecklist, + title, + description, + extraInfo, + show, + onClose, + onUpgrade, +}) => { + const { t } = useTranslation() + const { setShowPricingModal } = useModalContext() + + const handleUpgrade = useCallback(() => { + onClose() + onUpgrade ? onUpgrade() : setShowPricingModal() + }, [onClose, onUpgrade, setShowPricingModal]) + + return ( + +
+
+
+
+ +
+
+
+ {title} +
+
+ {description} +
+
+ {extraInfo} +
+
+ +
+ + +
+ + ) +} + +export default React.memo(PlanUpgradeModal) diff --git a/web/app/components/billing/trigger-events-limit-modal/index.module.css b/web/app/components/billing/plan-upgrade-modal/style.module.css similarity index 92% rename from web/app/components/billing/trigger-events-limit-modal/index.module.css rename to web/app/components/billing/plan-upgrade-modal/style.module.css index e8e86719e6..50ad488388 100644 --- a/web/app/components/billing/trigger-events-limit-modal/index.module.css +++ b/web/app/components/billing/plan-upgrade-modal/style.module.css @@ -19,7 +19,6 @@ background: linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%), var(--color-util-colors-blue-brand-blue-brand-500, #296dff); - box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent); } .highlight { diff --git a/web/app/components/billing/trigger-events-limit-modal/index.tsx b/web/app/components/billing/trigger-events-limit-modal/index.tsx index c1065a7868..9176c3d542 100644 --- a/web/app/components/billing/trigger-events-limit-modal/index.tsx +++ b/web/app/components/billing/trigger-events-limit-modal/index.tsx @@ -2,27 +2,22 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' -import Modal from '@/app/components/base/modal' -import Button from '@/app/components/base/button' import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow' import UsageInfo from '@/app/components/billing/usage-info' -import UpgradeBtn from '@/app/components/billing/upgrade-btn' -import type { Plan } from '@/app/components/billing/type' -import styles from './index.module.css' +import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal' type Props = { show: boolean - onDismiss: () => void + onClose: () => void onUpgrade: () => void usage: number total: number resetInDays?: number - planType: Plan } const TriggerEventsLimitModal: FC = ({ show, - onDismiss, + onClose, onUpgrade, usage, total, @@ -31,59 +26,25 @@ const TriggerEventsLimitModal: FC = ({ const { t } = useTranslation() return ( - -
-
>} + title={t('billing.triggerLimitModal.title')} + description={t('billing.triggerLimitModal.description')} + extraInfo={( + -
-
- -
-
-
- {t('billing.triggerLimitModal.title')} -
-
- {t('billing.triggerLimitModal.description')} -
-
- -
-
- -
- - -
- + )} + /> ) } diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx index d576e07f3e..b70daeb2e6 100644 --- a/web/app/components/billing/upgrade-btn/index.tsx +++ b/web/app/components/billing/upgrade-btn/index.tsx @@ -11,7 +11,7 @@ type Props = { className?: string style?: CSSProperties isFull?: boolean - size?: 'md' | 'lg' + size?: 's' | 'm' | 'custom' isPlain?: boolean isShort?: boolean onClick?: () => void @@ -21,6 +21,7 @@ type Props = { const UpgradeBtn: FC = ({ className, + size = 'm', style, isPlain = false, isShort = false, @@ -62,7 +63,7 @@ const UpgradeBtn: FC = ({ return ( 0 const isVectorSpaceFull = plan.usage.vectorSpace >= plan.total.vectorSpace const isShowVectorSpaceFull = (allFileLoaded || hasNotin) && isVectorSpaceFull && enableBilling - const supportBatchUpload = !enableBilling || plan.type !== 'sandbox' + const supportBatchUpload = !enableBilling || plan.type !== Plan.sandbox + const notSupportBatchUpload = !supportBatchUpload + + const [isShowPlanUpgradeModal, { + setTrue: showPlanUpgradeModal, + setFalse: hidePlanUpgradeModal, + }] = useBoolean(false) + const onStepChange = useCallback(() => { + if (notSupportBatchUpload) { + let isMultiple = false + if (dataSourceType === DataSourceType.FILE && files.length > 1) + isMultiple = true + + if (dataSourceType === DataSourceType.NOTION && notionPages.length > 1) + isMultiple = true + + if (dataSourceType === DataSourceType.WEB && websitePages.length > 1) + isMultiple = true + + if (isMultiple) { + showPlanUpgradeModal() + return + } + } + doOnStepChange() + }, [dataSourceType, doOnStepChange, files.length, notSupportBatchUpload, notionPages.length, showPlanUpgradeModal, websitePages.length]) + const nextDisabled = useMemo(() => { if (!files.length) return true @@ -244,6 +274,14 @@ const StepOne = ({
+ { + enableBilling && plan.type === Plan.sandbox && files.length > 0 && ( +
+
+ +
+ ) + } )} {dataSourceType === DataSourceType.NOTION && ( @@ -259,7 +297,6 @@ const StepOne = ({ credentialList={notionCredentialList} onSelectCredential={updateNotionCredentialId} datasetId={datasetId} - supportBatchUpload={supportBatchUpload} />
{isShowVectorSpaceFull && ( @@ -291,7 +328,6 @@ const StepOne = ({ crawlOptions={crawlOptions} onCrawlOptionsChange={onCrawlOptionsChange} authedDataSourceList={authedDataSourceList} - supportBatchUpload={supportBatchUpload} /> {isShowVectorSpaceFull && ( @@ -332,6 +368,14 @@ const StepOne = ({ /> )} {currentWebsite && } + {isShowPlanUpgradeModal && ( + + )} diff --git a/web/app/components/datasets/create/step-one/upgrade-card.tsx b/web/app/components/datasets/create/step-one/upgrade-card.tsx new file mode 100644 index 0000000000..af683d8ace --- /dev/null +++ b/web/app/components/datasets/create/step-one/upgrade-card.tsx @@ -0,0 +1,33 @@ +'use client' +import UpgradeBtn from '@/app/components/billing/upgrade-btn' +import { useModalContext } from '@/context/modal-context' +import type { FC } from 'react' +import React, { useCallback } from 'react' +import { useTranslation } from 'react-i18next' + +const UpgradeCard: FC = () => { + const { t } = useTranslation() + const { setShowPricingModal } = useModalContext() + + const handleUpgrade = useCallback(() => { + setShowPricingModal() + }, [setShowPricingModal]) + + return ( +
+
+
{t('billing.upgrade.uploadMultipleFiles.title')}
+
{t('billing.upgrade.uploadMultipleFiles.description')}
+
+ +
+ ) +} +export default React.memo(UpgradeCard) diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx index 51e043c35a..8ea316f62a 100644 --- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx +++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx @@ -6,7 +6,6 @@ import cn from '@/utils/classnames' import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets' import Checkbox from '@/app/components/base/checkbox' import Button from '@/app/components/base/button' -import Radio from '@/app/components/base/radio/ui' type Props = { payload: CrawlResultItemType @@ -14,7 +13,6 @@ type Props = { isPreview: boolean onCheckChange: (checked: boolean) => void onPreview: () => void - isMultipleChoice: boolean } const CrawledResultItem: FC = ({ @@ -23,7 +21,6 @@ const CrawledResultItem: FC = ({ isChecked, onCheckChange, onPreview, - isMultipleChoice, }) => { const { t } = useTranslation() @@ -34,21 +31,7 @@ const CrawledResultItem: FC = ({
- { - isMultipleChoice ? ( - - ) : ( - - ) - } +
void onPreview: (payload: CrawlResultItem) => void usedTime: number - isMultipleChoice: boolean } const CrawledResult: FC = ({ @@ -26,7 +25,6 @@ const CrawledResult: FC = ({ onSelectedChange, onPreview, usedTime, - isMultipleChoice, }) => { const { t } = useTranslation() @@ -42,17 +40,13 @@ const CrawledResult: FC = ({ const handleItemCheckChange = useCallback((item: CrawlResultItem) => { return (checked: boolean) => { - if (checked) { - if (isMultipleChoice) - onSelectedChange([...checkedList, item]) - else - onSelectedChange([item]) - } - else { + if (checked) + onSelectedChange([...checkedList, item]) + + else onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url)) - } } - }, [checkedList, isMultipleChoice, onSelectedChange]) + }, [checkedList, onSelectedChange]) const [previewIndex, setPreviewIndex] = React.useState(-1) const handlePreview = useCallback((index: number) => { @@ -65,13 +59,11 @@ const CrawledResult: FC = ({ return (
- {isMultipleChoice && ( - - )} +
{t(`${I18N_PREFIX}.scrapTimeInfo`, { total: list.length, @@ -88,7 +80,6 @@ const CrawledResult: FC = ({ payload={item} isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)} onCheckChange={handleItemCheckChange(item)} - isMultipleChoice={isMultipleChoice} /> ))}
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx index 1ef934308a..17d8d6416e 100644 --- a/web/app/components/datasets/create/website/firecrawl/index.tsx +++ b/web/app/components/datasets/create/website/firecrawl/index.tsx @@ -26,7 +26,6 @@ type Props = { onJobIdChange: (jobId: string) => void crawlOptions: CrawlOptions onCrawlOptionsChange: (payload: CrawlOptions) => void - supportBatchUpload: boolean } enum Step { @@ -42,7 +41,6 @@ const FireCrawl: FC = ({ onJobIdChange, crawlOptions, onCrawlOptionsChange, - supportBatchUpload, }) => { const { t } = useTranslation() const [step, setStep] = useState(Step.init) @@ -168,12 +166,8 @@ const FireCrawl: FC = ({ setCrawlErrorMessage(errorMessage || t(`${I18N_PREFIX}.unknownError`)) } else { - data.data = data.data.map((item: any) => ({ - ...item, - content: item.markdown, - })) setCrawlResult(data) - onCheckedCrawlResultChange(supportBatchUpload ? (data.data || []) : (data.data?.slice(0, 1) || [])) // default select the crawl result + onCheckedCrawlResultChange(data.data || []) // default select the crawl result setCrawlErrorMessage('') } } @@ -184,7 +178,7 @@ const FireCrawl: FC = ({ finally { setStep(Step.finished) } - }, [checkValid, crawlOptions, onJobIdChange, waitForCrawlFinished, t, onCheckedCrawlResultChange, supportBatchUpload]) + }, [checkValid, crawlOptions, onJobIdChange, t, waitForCrawlFinished, onCheckedCrawlResultChange]) return (
@@ -223,7 +217,6 @@ const FireCrawl: FC = ({ onSelectedChange={onCheckedCrawlResultChange} onPreview={onPreview} usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0} - isMultipleChoice={supportBatchUpload} /> }
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx index 15324f642e..ee7ace6815 100644 --- a/web/app/components/datasets/create/website/index.tsx +++ b/web/app/components/datasets/create/website/index.tsx @@ -24,7 +24,6 @@ type Props = { crawlOptions: CrawlOptions onCrawlOptionsChange: (payload: CrawlOptions) => void authedDataSourceList: DataSourceAuth[] - supportBatchUpload?: boolean } const Website: FC = ({ @@ -36,7 +35,6 @@ const Website: FC = ({ crawlOptions, onCrawlOptionsChange, authedDataSourceList, - supportBatchUpload = false, }) => { const { t } = useTranslation() const { setShowAccountSettingModal } = useModalContext() @@ -118,7 +116,6 @@ const Website: FC = ({ onJobIdChange={onJobIdChange} crawlOptions={crawlOptions} onCrawlOptionsChange={onCrawlOptionsChange} - supportBatchUpload={supportBatchUpload} /> )} {source && selectedProvider === DataSourceProvider.waterCrawl && ( @@ -129,7 +126,6 @@ const Website: FC = ({ onJobIdChange={onJobIdChange} crawlOptions={crawlOptions} onCrawlOptionsChange={onCrawlOptionsChange} - supportBatchUpload={supportBatchUpload} /> )} {source && selectedProvider === DataSourceProvider.jinaReader && ( @@ -140,7 +136,6 @@ const Website: FC = ({ onJobIdChange={onJobIdChange} crawlOptions={crawlOptions} onCrawlOptionsChange={onCrawlOptionsChange} - supportBatchUpload={supportBatchUpload} /> )} {!source && ( diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx index b2189b3e5c..7257e8f7e6 100644 --- a/web/app/components/datasets/create/website/jina-reader/index.tsx +++ b/web/app/components/datasets/create/website/jina-reader/index.tsx @@ -26,7 +26,6 @@ type Props = { onJobIdChange: (jobId: string) => void crawlOptions: CrawlOptions onCrawlOptionsChange: (payload: CrawlOptions) => void - supportBatchUpload: boolean } enum Step { @@ -42,7 +41,6 @@ const JinaReader: FC = ({ onJobIdChange, crawlOptions, onCrawlOptionsChange, - supportBatchUpload, }) => { const { t } = useTranslation() const [step, setStep] = useState(Step.init) @@ -178,7 +176,7 @@ const JinaReader: FC = ({ } else { setCrawlResult(data) - onCheckedCrawlResultChange(supportBatchUpload ? (data.data || []) : (data.data?.slice(0, 1) || [])) // default select the crawl result + onCheckedCrawlResultChange(data.data || []) // default select the crawl result setCrawlErrorMessage('') } } @@ -190,7 +188,7 @@ const JinaReader: FC = ({ finally { setStep(Step.finished) } - }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, supportBatchUpload, t, waitForCrawlFinished]) + }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, t, waitForCrawlFinished]) return (
@@ -229,7 +227,6 @@ const JinaReader: FC = ({ onSelectedChange={onCheckedCrawlResultChange} onPreview={onPreview} usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0} - isMultipleChoice={supportBatchUpload} /> }
diff --git a/web/app/components/datasets/create/website/watercrawl/index.tsx b/web/app/components/datasets/create/website/watercrawl/index.tsx index bf0048b788..f1aee37e19 100644 --- a/web/app/components/datasets/create/website/watercrawl/index.tsx +++ b/web/app/components/datasets/create/website/watercrawl/index.tsx @@ -26,7 +26,6 @@ type Props = { onJobIdChange: (jobId: string) => void crawlOptions: CrawlOptions onCrawlOptionsChange: (payload: CrawlOptions) => void - supportBatchUpload: boolean } enum Step { @@ -42,7 +41,6 @@ const WaterCrawl: FC = ({ onJobIdChange, crawlOptions, onCrawlOptionsChange, - supportBatchUpload, }) => { const { t } = useTranslation() const [step, setStep] = useState(Step.init) @@ -165,7 +163,7 @@ const WaterCrawl: FC = ({ } else { setCrawlResult(data) - onCheckedCrawlResultChange(supportBatchUpload ? (data.data || []) : (data.data?.slice(0, 1) || [])) // default select the crawl result + onCheckedCrawlResultChange(data.data || []) // default select the crawl result setCrawlErrorMessage('') } } @@ -176,7 +174,7 @@ const WaterCrawl: FC = ({ finally { setStep(Step.finished) } - }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, supportBatchUpload, t, waitForCrawlFinished]) + }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, t, waitForCrawlFinished]) return (
@@ -215,7 +213,6 @@ const WaterCrawl: FC = ({ onSelectedChange={onCheckedCrawlResultChange} onPreview={onPreview} usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0} - isMultipleChoice={supportBatchUpload} /> }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx index eb94d073b7..f25f02fdbd 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx @@ -28,7 +28,7 @@ export type LocalFileProps = { const LocalFile = ({ allowedExtensions, - supportBatchUpload = false, + supportBatchUpload = true, }: LocalFileProps) => { const { t } = useTranslation() const { notify } = useContext(ToastContext) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx index 72ceb4a21e..b7502f337f 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx @@ -30,7 +30,7 @@ const OnlineDocuments = ({ nodeId, nodeData, isInPipeline = false, - supportBatchUpload = false, + supportBatchUpload = true, onCredentialChange, }: OnlineDocumentsProps) => { const docLink = useDocLink() diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx index 8bd1d7421b..1d279e146d 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx @@ -29,7 +29,7 @@ const OnlineDrive = ({ nodeId, nodeData, isInPipeline = false, - supportBatchUpload = false, + supportBatchUpload = true, onCredentialChange, }: OnlineDriveProps) => { const docLink = useDocLink() diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx index 513ac8edd9..d9981a4638 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx @@ -42,7 +42,7 @@ const WebsiteCrawl = ({ nodeId, nodeData, isInPipeline = false, - supportBatchUpload = false, + supportBatchUpload = true, onCredentialChange, }: WebsiteCrawlProps) => { const { t } = useTranslation() diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx index 1d9232403a..79e3694da8 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx @@ -36,6 +36,10 @@ import { useAddDocumentsSteps, useLocalFile, useOnlineDocument, useOnlineDrive, import DataSourceProvider from './data-source/store/provider' import { useDataSourceStore } from './data-source/store' import { useFileUploadConfig } from '@/service/use-common' +import UpgradeCard from '../../create/step-one/upgrade-card' +import Divider from '@/app/components/base/divider' +import { useBoolean } from 'ahooks' +import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal' const CreateFormPipeline = () => { const { t } = useTranslation() @@ -57,7 +61,7 @@ const CreateFormPipeline = () => { const { steps, currentStep, - handleNextStep, + handleNextStep: doHandleNextStep, handleBackStep, } = useAddDocumentsSteps() const { @@ -104,6 +108,33 @@ const CreateFormPipeline = () => { }, [allFileLoaded, datasource, datasourceType, enableBilling, isVectorSpaceFull, onlineDocuments.length, onlineDriveFileList.length, websitePages.length]) const supportBatchUpload = !enableBilling || plan.type !== 'sandbox' + const [isShowPlanUpgradeModal, { + setTrue: showPlanUpgradeModal, + setFalse: hidePlanUpgradeModal, + }] = useBoolean(false) + const handleNextStep = useCallback(() => { + if (!supportBatchUpload) { + let isMultiple = false + if (datasourceType === DatasourceType.localFile && localFileList.length > 1) + isMultiple = true + + if (datasourceType === DatasourceType.onlineDocument && onlineDocuments.length > 1) + isMultiple = true + + if (datasourceType === DatasourceType.websiteCrawl && websitePages.length > 1) + isMultiple = true + + if (datasourceType === DatasourceType.onlineDrive && selectedFileIds.length > 1) + isMultiple = true + + if (isMultiple) { + showPlanUpgradeModal() + return + } + } + doHandleNextStep() + }, [datasourceType, doHandleNextStep, localFileList.length, onlineDocuments.length, selectedFileIds.length, showPlanUpgradeModal, supportBatchUpload, websitePages.length]) + const nextBtnDisabled = useMemo(() => { if (!datasource) return true if (datasourceType === DatasourceType.localFile) @@ -125,16 +156,16 @@ const CreateFormPipeline = () => { const showSelect = useMemo(() => { if (datasourceType === DatasourceType.onlineDocument) { const pagesCount = currentWorkspace?.pages.length ?? 0 - return supportBatchUpload && pagesCount > 0 + return pagesCount > 0 } if (datasourceType === DatasourceType.onlineDrive) { const isBucketList = onlineDriveFileList.some(file => file.type === 'bucket') - return supportBatchUpload && !isBucketList && onlineDriveFileList.filter((item) => { + return !isBucketList && onlineDriveFileList.filter((item) => { return item.type !== 'bucket' }).length > 0 } return false - }, [currentWorkspace?.pages.length, datasourceType, supportBatchUpload, onlineDriveFileList]) + }, [currentWorkspace?.pages.length, datasourceType, onlineDriveFileList]) const totalOptions = useMemo(() => { if (datasourceType === DatasourceType.onlineDocument) @@ -390,11 +421,12 @@ const CreateFormPipeline = () => { }, [PagesMapAndSelectedPagesId, currentWorkspace?.pages, dataSourceStore, datasourceType]) const clearDataSourceData = useCallback((dataSource: Datasource) => { - if (dataSource.nodeData.provider_type === DatasourceType.onlineDocument) + const providerType = dataSource.nodeData.provider_type + if (providerType === DatasourceType.onlineDocument) clearOnlineDocumentData() - else if (dataSource.nodeData.provider_type === DatasourceType.websiteCrawl) + else if (providerType === DatasourceType.websiteCrawl) clearWebsiteCrawlData() - else if (dataSource.nodeData.provider_type === DatasourceType.onlineDrive) + else if (providerType === DatasourceType.onlineDrive) clearOnlineDriveData() }, [clearOnlineDocumentData, clearOnlineDriveData, clearWebsiteCrawlData]) @@ -452,7 +484,6 @@ const CreateFormPipeline = () => { nodeId={datasource!.nodeId} nodeData={datasource!.nodeData} onCredentialChange={handleCredentialChange} - supportBatchUpload={supportBatchUpload} /> )} {datasourceType === DatasourceType.websiteCrawl && ( @@ -460,7 +491,6 @@ const CreateFormPipeline = () => { nodeId={datasource!.nodeId} nodeData={datasource!.nodeData} onCredentialChange={handleCredentialChange} - supportBatchUpload={supportBatchUpload} /> )} {datasourceType === DatasourceType.onlineDrive && ( @@ -468,7 +498,6 @@ const CreateFormPipeline = () => { nodeId={datasource!.nodeId} nodeData={datasource!.nodeData} onCredentialChange={handleCredentialChange} - supportBatchUpload={supportBatchUpload} /> )} {isShowVectorSpaceFull && ( @@ -483,6 +512,14 @@ const CreateFormPipeline = () => { handleNextStep={handleNextStep} tip={tip} /> + { + !supportBatchUpload && datasourceType === DatasourceType.localFile && localFileList.length > 0 && ( + <> + + + + ) + }
) } @@ -561,6 +598,14 @@ const CreateFormPipeline = () => {
) } + {isShowPlanUpgradeModal && ( + + )}
) } diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx index d41118ec02..eb40d43e7c 100644 --- a/web/app/components/datasets/documents/detail/segment-add/index.tsx +++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React, { useMemo } from 'react' +import React, { useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { RiAddLine, @@ -11,6 +11,10 @@ import { import cn from '@/utils/classnames' import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general' import Popover from '@/app/components/base/popover' +import { useBoolean } from 'ahooks' +import { useProviderContext } from '@/context/provider-context' +import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal' +import { Plan } from '@/app/components/billing/type' export type ISegmentAddProps = { importStatus: ProcessStatus | string | undefined @@ -35,6 +39,23 @@ const SegmentAdd: FC = ({ embedding, }) => { const { t } = useTranslation() + const [isShowPlanUpgradeModal, { + setTrue: showPlanUpgradeModal, + setFalse: hidePlanUpgradeModal, + }] = useBoolean(false) + const { plan, enableBilling } = useProviderContext() + const { type } = plan + const canAdd = enableBilling ? type !== Plan.sandbox : true + + const withNeedUpgradeCheck = useCallback((fn: () => void) => { + return () => { + if (!canAdd) { + showPlanUpgradeModal() + return + } + fn() + } + }, [canAdd, showPlanUpgradeModal]) const textColor = useMemo(() => { return embedding ? 'text-components-button-secondary-accent-text-disabled' @@ -90,7 +111,7 @@ const SegmentAdd: FC = ({ type='button' className={`inline-flex items-center rounded-l-lg border-r-[1px] border-r-divider-subtle px-2.5 py-2 hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent`} - onClick={showNewSegmentModal} + onClick={withNeedUpgradeCheck(showNewSegmentModal)} disabled={embedding} > @@ -108,7 +129,7 @@ const SegmentAdd: FC = ({ @@ -116,7 +137,7 @@ const SegmentAdd: FC = ({ } btnElement={
- +
} btnClassName={open => cn( @@ -129,7 +150,16 @@ const SegmentAdd: FC = ({ className='h-fit min-w-[128px]' disabled={embedding} /> + {isShowPlanUpgradeModal && ( + + )}
+ ) } export default React.memo(SegmentAdd) diff --git a/web/context/hooks/use-trigger-events-limit-modal.ts b/web/context/hooks/use-trigger-events-limit-modal.ts index b55501ffaf..ac02acc025 100644 --- a/web/context/hooks/use-trigger-events-limit-modal.ts +++ b/web/context/hooks/use-trigger-events-limit-modal.ts @@ -9,7 +9,6 @@ export type TriggerEventsLimitModalPayload = { usage: number total: number resetInDays?: number - planType: Plan storageKey?: string persistDismiss?: boolean } @@ -98,7 +97,6 @@ export const useTriggerEventsLimitModal = ({ payload: { usage: usage.triggerEvents, total: total.triggerEvents, - planType: type, resetInDays: triggerResetInDays, storageKey, persistDismiss, diff --git a/web/context/modal-context.test.tsx b/web/context/modal-context.test.tsx index f7e65bac6f..f929457180 100644 --- a/web/context/modal-context.test.tsx +++ b/web/context/modal-context.test.tsx @@ -31,7 +31,7 @@ const triggerEventsLimitModalMock = jest.fn((props: any) => { latestTriggerEventsModalProps = props return (
- +
) @@ -115,11 +115,10 @@ describe('ModalContextProvider trigger events limit modal', () => { usage: 3000, total: 3000, resetInDays: 5, - planType: Plan.professional, }) act(() => { - latestTriggerEventsModalProps.onDismiss() + latestTriggerEventsModalProps.onClose() }) await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument()) @@ -149,7 +148,7 @@ describe('ModalContextProvider trigger events limit modal', () => { await waitFor(() => expect(screen.getByTestId('trigger-limit-modal')).toBeInTheDocument()) act(() => { - latestTriggerEventsModalProps.onDismiss() + latestTriggerEventsModalProps.onClose() }) await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument()) @@ -177,7 +176,7 @@ describe('ModalContextProvider trigger events limit modal', () => { await waitFor(() => expect(screen.getByTestId('trigger-limit-modal')).toBeInTheDocument()) act(() => { - latestTriggerEventsModalProps.onDismiss() + latestTriggerEventsModalProps.onClose() }) await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument()) diff --git a/web/context/modal-context.tsx b/web/context/modal-context.tsx index 082b0f9c58..7f08045993 100644 --- a/web/context/modal-context.tsx +++ b/web/context/modal-context.tsx @@ -485,9 +485,8 @@ export const ModalContextProvider = ({ show usage={showTriggerEventsLimitModal.payload.usage} total={showTriggerEventsLimitModal.payload.total} - planType={showTriggerEventsLimitModal.payload.planType} resetInDays={showTriggerEventsLimitModal.payload.resetInDays} - onDismiss={() => { + onClose={() => { persistTriggerEventsLimitModalDismiss() setShowTriggerEventsLimitModal(null) }} diff --git a/web/i18n/en-US/billing.ts b/web/i18n/en-US/billing.ts index 2531e5831a..1ab4e3f0d4 100644 --- a/web/i18n/en-US/billing.ts +++ b/web/i18n/en-US/billing.ts @@ -221,6 +221,20 @@ const translation = { fullTipLine2: 'annotate more conversations.', quotaTitle: 'Annotation Reply Quota', }, + upgrade: { + uploadMultiplePages: { + title: 'Upgrade to upload multiple documents at once', + description: 'You’ve reached the upload limit — only one document can be selected and uploaded at a time on your current plan.', + }, + uploadMultipleFiles: { + title: 'Upgrade to unlock batch document upload', + description: 'Batch-upload more documents at once to save time and improve efficiency.', + }, + addChunks: { + title: 'Upgrade to continue adding chunks', + description: 'You’ve reached the limit of adding chunks for this plan.', + }, + }, } export default translation diff --git a/web/i18n/ja-JP/billing.ts b/web/i18n/ja-JP/billing.ts index 97fa4eb0e6..07361c0234 100644 --- a/web/i18n/ja-JP/billing.ts +++ b/web/i18n/ja-JP/billing.ts @@ -202,6 +202,20 @@ const translation = { quotaTitle: '注釈返信クォータ', }, teamMembers: 'チームメンバー', + upgrade: { + uploadMultiplePages: { + title: '複数ドキュメントを一度にアップロードするにはアップグレード', + description: '現在のプランではアップロード上限に達しています。1回の操作で選択・アップロードできるドキュメントは1つのみです。', + }, + uploadMultipleFiles: { + title: '一括ドキュメントアップロード機能を解放するにはアップグレードが必要です', + description: '複数のドキュメントを一度にバッチアップロードすることで、時間を節約し、作業効率を向上できます。', + }, + addChunks: { + title: 'アップグレードして、チャンクを引き続き追加できるようにしてください。', + description: 'このプランでは、チャンク追加の上限に達しています。', + }, + }, } export default translation diff --git a/web/i18n/zh-Hans/billing.ts b/web/i18n/zh-Hans/billing.ts index b404240b3d..037f1c88c5 100644 --- a/web/i18n/zh-Hans/billing.ts +++ b/web/i18n/zh-Hans/billing.ts @@ -202,6 +202,20 @@ const translation = { quotaTitle: '标注的配额', }, teamMembers: '团队成员', + upgrade: { + uploadMultiplePages: { + title: '升级以一次性上传多个文档', + description: '您已达到当前套餐的上传限制 —— 该套餐每次只能选择并上传 1 个文档。', + }, + uploadMultipleFiles: { + title: '升级以解锁批量文档上传功能', + description: '一次性批量上传更多文档，以节省时间并提升效率。', + }, + addChunks: { + title: '升级以继续添加分段', + description: '您已达到此计划的添加分段上限。', + }, + }, } export default translation