mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-24 13:53:50 +00:00

* 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>
370 lines
9.0 KiB
TypeScript
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
|
|
};
|
|
}
|