diff --git a/web/app/(commonLayout)/datasets/ApiServer.tsx b/web/app/(commonLayout)/datasets/ApiServer.tsx new file mode 100644 index 0000000000..675dda354e --- /dev/null +++ b/web/app/(commonLayout)/datasets/ApiServer.tsx @@ -0,0 +1,41 @@ +'use client' + +import type { FC } from 'react' +import { useTranslation } from 'react-i18next' +import CopyFeedback from '@/app/components/base/copy-feedback' +import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button' +import { randomString } from '@/utils' + +type ApiServerProps = { + apiBaseUrl: string +} +const ApiServer: FC = ({ + apiBaseUrl, +}) => { + const { t } = useTranslation() + + return ( +
+
+
{t('appApi.apiServer')}
+
{apiBaseUrl}
+
+ +
+
+ {t('appApi.ok')} +
+ +
+ ) +} + +export default ApiServer diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx new file mode 100644 index 0000000000..871ef04951 --- /dev/null +++ b/web/app/(commonLayout)/datasets/Container.tsx @@ -0,0 +1,60 @@ +'use client' + +import { useRef, useState } from 'react' +import { useTranslation } from 'react-i18next' +import useSWR from 'swr' +import Datasets from './Datasets' +import DatasetFooter from './DatasetFooter' +import ApiServer from './ApiServer' +import Doc from './Doc' +import TabSlider from '@/app/components/base/tab-slider' +import { fetchDatasetApiBaseUrl } from '@/service/datasets' + +const Container = () => { + const { t } = useTranslation() + const options = [ + { + value: 'dataset', + text: t('dataset.datasets'), + }, + { + value: 'api', + text: t('dataset.datasetsApi'), + }, + ] + const [activeTab, setActiveTab] = useState('dataset') + const containerRef = useRef(null) + const { data } = useSWR(activeTab === 'dataset' ? null : '/datasets/api-base-info', fetchDatasetApiBaseUrl) + + return ( +
+
+ setActiveTab(newActiveTab)} + options={options} + /> + { + activeTab === 'api' && ( + + ) + } +
+ { + activeTab === 'dataset' && ( +
+ + +
+ ) + } + { + activeTab === 'api' && ( + + ) + } +
+ ) +} + +export default Container diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx index 3d3ecf91b7..0bec39fe10 100644 --- a/web/app/(commonLayout)/datasets/Datasets.tsx +++ b/web/app/(commonLayout)/datasets/Datasets.tsx @@ -7,7 +7,7 @@ import NewDatasetCard from './NewDatasetCard' import DatasetCard from './DatasetCard' import type { DataSetListResponse } from '@/models/datasets' import { fetchDatasets } from '@/service/datasets' -import { useAppContext, useSelector } from '@/context/app-context' +import { useAppContext } from '@/context/app-context' const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => { if (!pageIndex || previousPageData.has_more) @@ -15,11 +15,16 @@ const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => { return null } -const Datasets = () => { +type Props = { + containerRef: React.RefObject +} + +const Datasets = ({ + containerRef, +}: Props) => { const { isCurrentWorkspaceManager } = useAppContext() const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchDatasets, { revalidateFirstPage: false, revalidateAll: true }) const loadingStateRef = useRef(false) - const pageContainerRef = useSelector(state => state.pageContainerRef) const anchorRef = useRef(null) useEffect(() => { @@ -29,19 +34,19 @@ const Datasets = () => { useEffect(() => { const onScroll = debounce(() => { if (!loadingStateRef.current) { - const { scrollTop, clientHeight } = pageContainerRef.current! + const { scrollTop, clientHeight } = containerRef.current! const anchorOffset = anchorRef.current!.offsetTop if (anchorOffset - scrollTop - clientHeight < 100) setSize(size => size + 1) } }, 50) - pageContainerRef.current?.addEventListener('scroll', onScroll) - return () => pageContainerRef.current?.removeEventListener('scroll', onScroll) + containerRef.current?.addEventListener('scroll', onScroll) + return () => containerRef.current?.removeEventListener('scroll', onScroll) }, []) return ( -