diff --git a/src/components/simple-overlay/index.tsx b/src/components/simple-overlay/index.tsx index 72579df1..320ac2d1 100644 --- a/src/components/simple-overlay/index.tsx +++ b/src/components/simple-overlay/index.tsx @@ -1,5 +1,5 @@ import useUserSettings from '@/hooks/use-user-settings'; -import React from 'react'; +import React, { useEffect } from 'react'; import SimpleBar from 'simplebar-react'; import 'simplebar-react/dist/simplebar.min.css'; import styled from 'styled-components'; @@ -21,17 +21,49 @@ interface SimpleOverlayProps { height?: string | number; children?: React.ReactNode; style?: React.CSSProperties; + onScrollEnd?: (e: React.UIEvent) => void; + disableTrigger?: boolean; } const SimpleOverlay: React.FC = ({ height, children, - style + style, + disableTrigger, + onScrollEnd }) => { const { isDarkTheme } = useUserSettings(); + const simpleBarRef = React.useRef(null); + + useEffect(() => { + // simpleBarRef.current.recalculate(); + + const onScroll = (e: React.UIEvent) => { + const scrollElement = simpleBarRef.current?.getScrollElement(); + const scrollHeight = scrollElement.scrollHeight; + const clientHeight = scrollElement.clientHeight; + const scrollTop = scrollElement.scrollTop; + + // Check if the scrollbar is at the bottom 20px for buffer + const isAtBottom = scrollHeight - clientHeight - scrollTop <= 20; + if (isAtBottom && !disableTrigger) { + onScrollEnd?.(e); + } + }; + simpleBarRef.current + ?.getScrollElement() + .addEventListener('scroll', onScroll); + + return () => { + simpleBarRef.current + ?.getScrollElement() + .removeEventListener('scroll', onScroll); + }; + }, [height, disableTrigger, onScrollEnd]); return ( = forwardRef((props, ref) => { - const { - collapsed, - modelSource, - isDownload, - gpuOptions, - displayEvaluateStatus - } = props; + const { collapsed, modelSource, isDownload, displayEvaluateStatus } = props; const intl = useIntl(); const [isEvaluating, setIsEvaluating] = useState(false); const [dataSource, setDataSource] = useState({ @@ -83,6 +79,7 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { const axiosTokenRef = useRef(null); const checkTokenRef = useRef(null); const timer = useRef(null); + const cacheSortListRef = useRef([]); const handleSelectModelFile = (item: any, evaluate?: boolean) => { props.onSelectFile?.(item, evaluate); @@ -232,7 +229,7 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { } }, []); - const handleEvaluate = async (list: any[]) => { + const handleEvaluate = async (list: any[], first?: boolean) => { if (isDownload) { return; } @@ -259,7 +256,8 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { const resultList = _.map(list, (item: any, index: number) => { return { ...item, - evaluateResult: evaluationList[index] + evaluateResult: evaluationList[index], + done: true }; }); const currentItem = _.find( @@ -275,7 +273,10 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { if (currentItem) { handleSelectModelFile(currentItem, true); } - setDataSource({ fileList: resultList, loading: false }); + setDataSource({ + fileList: first ? resultList : [...dataSource.fileList, ...resultList], + loading: false + }); setIsEvaluating(false); } catch (error) { setIsEvaluating(false); @@ -318,10 +319,14 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { return sortType === 'size' ? item.size : item.path; }); - handleSelectModelFile(sortList[0]); - setDataSource({ fileList: sortList, loading: false }); + cacheSortListRef.current = sortList; - handleEvaluate(sortList); + const headList = cacheSortListRef.current.splice(0, 10); + + handleSelectModelFile(headList[0]); + setDataSource({ fileList: headList, loading: false }); + + handleEvaluate(headList, true); } catch (error) { setDataSource({ fileList: [], loading: false }); handleSelectModelFile({}); @@ -348,12 +353,28 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { handleSelectModelFile(item); } }; + + const handleOnScrollEnd = () => { + const headList = cacheSortListRef.current.splice(0, 10); + if (headList.length) { + setDataSource({ + ...dataSource, + fileList: [...dataSource.fileList, ...headList] + }); + handleEvaluate(headList); + } + }; + useImperativeHandle(ref, () => ({ fetchModelFiles: handleFetchModelFiles })); + const maxHeight = useMemo(() => { + return collapsed ? 'max-content' : 'calc(100vh - 300px)'; + }, [collapsed]); + useEffect(() => { - if (!props.selectedModel.name) { + if (!props.selectedModel?.name) { setDataSource({ fileList: [], loading: false }); handleSelectModelFile({}); } @@ -399,7 +420,11 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { > )} - +
{dataSource.fileList.length ? ( @@ -408,7 +433,7 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { = forwardRef((props, ref) => { /> ) )} + 0 && + !dataSource.loading && + !isEvaluating + } + loading={dataSource.loading || isEvaluating} + loadMore={handleOnScrollEnd} + >
diff --git a/src/pages/llmodels/config/llama-config.ts b/src/pages/llmodels/config/llama-config.ts index 9428b500..61819dfb 100644 --- a/src/pages/llmodels/config/llama-config.ts +++ b/src/pages/llmodels/config/llama-config.ts @@ -592,10 +592,6 @@ const options = [ { label: '--context-shift', value: '--context-shift' - }, - { - label: '--v2', - value: '--v2' } ];