Files
FastGPT/packages/web/hooks/useScrollPagination.tsx
Archer f642c9603b V4.9.4 feature (#4470)
* Training status (#4424)

* dataset data training state (#4311)

* dataset data training state

* fix

* fix ts

* fix

* fix api format

* fix

* fix

* perf: count training

* format

* fix: dataset training state (#4417)

* fix

* add test

* fix

* fix

* fix test

* fix test

* perf: training count

* count

* loading status

---------

Co-authored-by: heheer <heheer@sealos.io>

* doc

* website sync feature (#4429)

* perf: introduce BullMQ for website sync (#4403)

* perf: introduce BullMQ for website sync

* feat: new redis module

* fix: remove graceful shutdown

* perf: improve UI in dataset detail

- Updated the "change" icon SVG file.
- Modified i18n strings.
- Added new i18n string "immediate_sync".
- Improved UI in dataset detail page, including button icons and
background colors.

* refactor: Add chunkSettings to DatasetSchema

* perf: website sync ux

* env template

* fix: clean up website dataset when updating chunk settings (#4420)

* perf: check setting updated

* perf: worker currency

* feat: init script for website sync refactor (#4425)

* website feature doc

---------

Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>

* pro migration (#4388) (#4433)

* pro migration

* reuse customPdfParseType

Co-authored-by: gggaaallleee <91131304+gggaaallleee@users.noreply.github.com>

* perf: remove loading ui

* feat: config chat file expired time

* Redis cache (#4436)

* perf: add Redis cache for vector counting (#4432)

* feat: cache

* perf: get cache key

---------

Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>

* perf: mobile voice input (#4437)

* update:Mobile voice interaction (#4362)

* Add files via upload

* Add files via upload

* Update ollama.md

* Update ollama.md

* Add files via upload

* Update useSpeech.ts

* Update ChatInput.tsx

* Update useSpeech.ts

* Update ChatInput.tsx

* Update useSpeech.ts

* Update constants.ts

* Add files via upload

* Update ChatInput.tsx

* Update useSpeech.ts

* Update useSpeech.ts

* Update useSpeech.ts

* Update ChatInput.tsx

* Add files via upload

* Update common.json

* Update VoiceInput.tsx

* Update ChatInput.tsx

* Update VoiceInput.tsx

* Update useSpeech.ts

* Update useSpeech.ts

* Update common.json

* Update common.json

* Update common.json

* Update VoiceInput.tsx

* Update VoiceInput.tsx

* Update ChatInput.tsx

* Update VoiceInput.tsx

* Update ChatInput.tsx

* Update VoiceInput.tsx

* Update ChatInput.tsx

* Update useSpeech.ts

* Update common.json

* Update chat.json

* Update common.json

* Update chat.json

* Update common.json

* Update chat.json

* Update VoiceInput.tsx

* Update ChatInput.tsx

* Update useSpeech.ts

* Update VoiceInput.tsx

* speech ui

* 优化语音输入组件,调整输入框显示逻辑,修复语音输入遮罩层样式,更新画布背景透明度,增强用户交互体验。 (#4435)

* perf: mobil voice input

---------

Co-authored-by: dreamer6680 <1468683855@qq.com>

* Test completion v2 (#4438)

* add v2 completions (#4364)

* add v2 completions

* completion config

* config version

* fix

* frontend

* doc

* fix

* fix: completions v2 api

---------

Co-authored-by: heheer <heheer@sealos.io>

* package

* Test mongo log (#4443)

* feat: mongodb-log (#4426)

* perf: mongo log

* feat: completions stop reasoner

* mongo db log

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>

* update doc

* Update doc

* fix external var ui (#4444)

* action

* fix: ts (#4458)

* preview doc action

add docs preview permission

update preview action

udpate action

* update doc (#4460)

* update preview action

* update doc

* remove

* update

* schema

* update mq export;perf: redis cache  (#4465)

* perf: redis cache

* update mq export

* perf: website sync error tip

* add error worker

* website sync ui (#4466)

* Updated the dynamic display of the voice input pop-up (#4469)

* Update VoiceInput.tsx

* Update VoiceInput.tsx

* Update VoiceInput.tsx

* fix: voice input

---------

Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>
Co-authored-by: gggaaallleee <91131304+gggaaallleee@users.noreply.github.com>
Co-authored-by: dreamer6680 <1468683855@qq.com>
Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
2025-04-08 12:05:04 +08:00

370 lines
9.0 KiB
TypeScript

import React, { ReactNode, RefObject, useMemo, useRef, useState } from 'react';
import { Box, BoxProps } from '@chakra-ui/react';
import { useToast } from './useToast';
import { getErrText } from '@fastgpt/global/common/error/utils';
import { PaginationProps, PaginationResponse } from '../common/fetch/type';
import {
useBoolean,
useLockFn,
useMemoizedFn,
useScroll,
useVirtualList,
useRequest,
useThrottleEffect
} from 'ahooks';
import MyBox from '../components/common/MyBox';
import { useTranslation } from 'next-i18next';
import { useRequest2 } from './useRequest';
type ItemHeight<T> = (index: number, data: T) => number;
const thresholdVal = 100;
export type ScrollListType = ({
children,
EmptyChildren,
isLoading,
...props
}: {
children: React.ReactNode;
EmptyChildren?: React.ReactNode;
isLoading?: boolean;
} & BoxProps) => React.JSX.Element;
export function useVirtualScrollPagination<
TParams extends PaginationProps,
TData extends PaginationResponse
>(
api: (data: TParams) => Promise<TData>,
{
refreshDeps,
itemHeight = 50,
overscan = 10,
pageSize = 10,
defaultParams = {}
}: {
refreshDeps?: any[];
itemHeight: number | ItemHeight<TData['list'][0]>;
overscan?: number;
pageSize?: number;
defaultParams?: Record<string, any>;
}
) {
const { t } = useTranslation();
const containerRef = useRef<HTMLDivElement>(null);
const wrapperRef = useRef(null);
const { toast } = useToast();
const [data, setData] = useState<TData['list']>([]);
const [total, setTotal] = useState(0);
const [isLoading, { setTrue, setFalse }] = useBoolean(false);
const noMore = data.length >= total;
const [list] = useVirtualList<TData['list'][0]>(data, {
containerTarget: containerRef,
wrapperTarget: wrapperRef,
itemHeight,
overscan
});
const loadData = useLockFn(async (init = false) => {
if (noMore && !init) return;
const offset = init ? 0 : data.length;
setTrue();
try {
const res = await api({
offset,
pageSize,
...defaultParams
} as TParams);
setTotal(res.total);
if (offset === 0) {
// init or reload
setData(res.list);
} else {
setData((prev) => [...prev, ...res.list]);
}
} catch (error: any) {
toast({
title: getErrText(error, t('common:core.chat.error.data_error')),
status: 'error'
});
console.log(error);
}
setFalse();
});
const scroll2Top = () => {
if (containerRef.current) {
containerRef.current.scrollTop = 0;
}
};
const ScrollList = useMemoizedFn(
({
children,
EmptyChildren,
isLoading,
...props
}: {
children: React.ReactNode;
EmptyChildren?: React.ReactNode;
isLoading?: boolean;
} & BoxProps) => {
return (
<MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
<Box ref={wrapperRef}>
{children}
{noMore && list.length > 0 && (
<Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'xs'}>
{t('common:common.No more data')}
</Box>
)}
</Box>
{list.length === 0 && !isLoading && EmptyChildren && <>{EmptyChildren}</>}
</MyBox>
);
}
);
// Reload data
useRequest(
async () => {
loadData(true);
},
{
manual: false,
refreshDeps
}
);
// Check if scroll to bottom
const scroll = useScroll(containerRef);
useThrottleEffect(
() => {
if (!containerRef.current || list.length === 0) return;
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
if (scrollTop + clientHeight >= scrollHeight - thresholdVal) {
loadData(false);
}
},
[scroll],
{
wait: 50
}
);
return {
containerRef,
scrollDataList: list,
total,
totalData: data,
setData,
isLoading,
ScrollList,
fetchData: loadData,
scroll2Top
};
}
export function useScrollPagination<
TParams extends PaginationProps,
TData extends PaginationResponse
>(
api: (data: TParams) => Promise<TData>,
{
scrollLoadType = 'bottom',
pageSize = 10,
params = {},
EmptyTip,
showErrorToast = true,
...props
}: {
scrollLoadType?: 'top' | 'bottom';
pageSize?: number;
params?: Record<string, any>;
EmptyTip?: React.JSX.Element;
showErrorToast?: boolean;
} & Parameters<typeof useRequest2>[1]
) {
const { t } = useTranslation();
const { toast } = useToast();
const [data, setData] = useState<TData['list']>([]);
const [total, setTotal] = useState(0);
const [isLoading, { setTrue, setFalse }] = useBoolean(false);
const isEmpty = total === 0 && !isLoading;
const noMore = data.length >= total;
const loadData = useLockFn(
async (init = false, ScrollContainerRef?: RefObject<HTMLDivElement>) => {
if (noMore && !init) return;
setTrue();
if (init) {
setData([]);
setTotal(0);
}
const offset = init ? 0 : data.length;
try {
const res = await api({
offset,
pageSize,
...params
} as TParams);
setTotal(res.total);
if (scrollLoadType === 'top') {
const prevHeight = ScrollContainerRef?.current?.scrollHeight || 0;
const prevScrollTop = ScrollContainerRef?.current?.scrollTop || 0;
// 使用 requestAnimationFrame 来调整滚动位置
function adjustScrollPosition() {
requestAnimationFrame(
ScrollContainerRef?.current
? () => {
if (ScrollContainerRef?.current) {
const newHeight = ScrollContainerRef.current.scrollHeight;
const heightDiff = newHeight - prevHeight;
ScrollContainerRef.current.scrollTop = prevScrollTop + heightDiff;
}
}
: adjustScrollPosition
);
}
setData((prevData) => (offset === 0 ? res.list : [...res.list, ...prevData]));
adjustScrollPosition();
} else {
setData((prevData) => (offset === 0 ? res.list : [...prevData, ...res.list]));
}
} catch (error: any) {
if (showErrorToast) {
toast({
title: getErrText(error, t('common:core.chat.error.data_error')),
status: 'error'
});
}
console.log(error);
}
setFalse();
}
);
let ScrollRef = useRef<HTMLDivElement>(null);
const ScrollData = useMemoizedFn(
({
children,
ScrollContainerRef,
isLoading: isLoadingProp,
...props
}: {
isLoading?: boolean;
children: ReactNode;
ScrollContainerRef?: RefObject<HTMLDivElement>;
} & BoxProps) => {
const ref = ScrollContainerRef || ScrollRef;
const loadText = useMemo(() => {
if (isLoading || isLoadingProp) return t('common:common.is_requesting');
if (noMore) return t('common:common.request_end');
return t('common:common.request_more');
}, [isLoading, noMore]);
const scroll = useScroll(ref);
// Watch scroll position
useThrottleEffect(
() => {
if (!ref?.current || noMore || isLoading || data.length === 0) return;
const { scrollTop, scrollHeight, clientHeight } = ref.current;
if (
(scrollLoadType === 'bottom' &&
scrollTop + clientHeight >= scrollHeight - thresholdVal) ||
(scrollLoadType === 'top' && scrollTop < thresholdVal)
) {
loadData(false, ref);
}
},
[scroll],
{ wait: 50 }
);
return (
<MyBox
ref={ref}
h={'100%'}
overflow={'auto'}
isLoading={isLoading || isLoadingProp}
{...props}
>
{scrollLoadType === 'top' && total > 0 && isLoading && (
<Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
{t('common:common.is_requesting')}
</Box>
)}
{children}
{scrollLoadType === 'bottom' && !isEmpty && (
<Box
mt={2}
fontSize={'xs'}
color={'blackAlpha.500'}
textAlign={'center'}
cursor={loadText === t('common:common.request_more') ? 'pointer' : 'default'}
onClick={() => {
if (loadText !== t('common:common.request_more')) return;
loadData(false);
}}
>
{loadText}
</Box>
)}
{isEmpty && EmptyTip}
</MyBox>
);
}
);
// Reload data
useRequest2(
async () => {
loadData(true);
},
{
manual: false,
...props
}
);
const refreshList = useMemoizedFn(() => {
loadData(true);
});
return {
ScrollData,
isLoading,
total: Math.max(total, data.length),
data,
setData,
fetchData: loadData,
refreshList
};
}