diff --git a/src/pages/_components/column-wrapper/index.tsx b/src/pages/_components/column-wrapper/index.tsx index be772fc0..46c52308 100644 --- a/src/pages/_components/column-wrapper/index.tsx +++ b/src/pages/_components/column-wrapper/index.tsx @@ -1,8 +1,28 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller'; import React, { useCallback } from 'react'; -import './style.less'; +import styled from 'styled-components'; import { WrapperContext } from './use-wrapper-context'; +const Wrapper = styled.div` + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + width: 100%; +`; + +const ContentWrapper = styled.div` + flex: 1; + position: relative; + overflow-y: auto; +`; + +const Footer = styled.div` + padding-block: 0; + background-color: var(--ant-color-bg-elevated); +`; + interface ColumnWrapperProps { children: React.ReactNode; footer?: React.ReactNode; @@ -44,29 +64,8 @@ const ColumnWrapper: React.FC = ({ } }, []); - React.useLayoutEffect(() => { - if (!scroller.current || !footerRef.current || !contentRef.current) return; - - const updatePadding = () => { - const height = footerRef.current!.getBoundingClientRect().height; - contentRef.current!.style.paddingBottom = `${height - 22}px`; - }; - - updatePadding(); - - const observer = new ResizeObserver(updatePadding); - observer.observe(footerRef.current); - - return () => observer.disconnect(); - }, []); - const setContentPaddingBottom = useCallback((padding: number) => { - if (footerRef.current) { - const height = footerRef.current.getBoundingClientRect().height; - contentRef.current!.style.paddingBottom = `${height + padding - 22}px`; - } else { - contentRef.current!.style.paddingBottom = `${padding}px`; - } + contentRef.current!.style.paddingBottom = `${padding}px`; }, []); return ( @@ -81,25 +80,18 @@ const ColumnWrapper: React.FC = ({ setSScrollContentPaddingBottom: setContentPaddingBottom }} > -
-
+ -
- {children} -
-
- {footer && ( -
- {footer} -
- )} -
+
{children}
+ + {footer &&
{footer}
} + ); }; diff --git a/src/pages/_components/column-wrapper/style.less b/src/pages/_components/column-wrapper/style.less deleted file mode 100644 index 5770f24f..00000000 --- a/src/pages/_components/column-wrapper/style.less +++ /dev/null @@ -1,32 +0,0 @@ -.column-wrapper { - flex: 1; - position: relative; - height: 100%; - overflow-y: auto; -} - -.simplebar-scrollbar::before { - width: var(--scrollbar-size); - background: var(--scrollbar-handle-bg); -} - -.column-wrapper-footer { - flex: 1; - display: flex; - position: relative; - width: 100%; - - .column-wrapper { - border-left: none; - } - - .footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: 100; - padding-block: 0; - background-color: var(--ant-color-bg-elevated); - } -} diff --git a/src/pages/api-keys/components/add-apikey-modal/index.tsx b/src/pages/api-keys/components/add-apikey-modal/index.tsx index a5ec408c..1c5a1879 100644 --- a/src/pages/api-keys/components/add-apikey-modal/index.tsx +++ b/src/pages/api-keys/components/add-apikey-modal/index.tsx @@ -16,6 +16,12 @@ import { expirationOptions } from '../../config'; import { FormData, ListItem } from '../../config/types'; import APIKeyForm from './form'; +const ModalFooterStyle = { + padding: '16px 24px 8px', + display: 'flex', + justifyContent: 'flex-end' +}; + type AddModalProps = { title: string; action: PageActionType; @@ -209,16 +215,15 @@ const AddModal: React.FC = ({ > {isChanged && ( -
+
= ({ onOk={handleSumit} onCancel={onCancel} loading={loading} - style={{ - padding: '16px 24px', - display: 'flex', - justifyContent: 'flex-end' - }} + style={ModalFooterStyle} > ) : ( @@ -245,11 +246,7 @@ const AddModal: React.FC = ({ loading={loading} okText={intl.formatMessage({ id: 'common.button.done' })} showCancelBtn={false} - style={{ - padding: '16px 24px', - display: 'flex', - justifyContent: 'flex-end' - }} + style={ModalFooterStyle} > ) diff --git a/src/pages/backends/components/add-modal.tsx b/src/pages/backends/components/add-modal.tsx index d5e75ca3..eb8dbe4f 100644 --- a/src/pages/backends/components/add-modal.tsx +++ b/src/pages/backends/components/add-modal.tsx @@ -20,7 +20,7 @@ import BackendForm from '../forms'; import ImportYAML from './import-yaml'; const ModalFooterStyle = { - padding: '16px 24px', + padding: '16px 24px 8px', display: 'flex', justifyContent: 'flex-end' }; @@ -220,7 +220,7 @@ const AddModal: React.FC = (props) => { maxHeight={'calc(100vh - 140px)'} styles={{ container: { - paddingTop: 0 + paddingBlock: 0 } }} footer={ diff --git a/src/pages/llmodels/components/compatible-alert.tsx b/src/pages/llmodels/components/compatible-alert.tsx index 250784a5..3ce8825e 100644 --- a/src/pages/llmodels/components/compatible-alert.tsx +++ b/src/pages/llmodels/components/compatible-alert.tsx @@ -26,7 +26,7 @@ interface CompatibilityAlertProps { const DivWrapper = styled.div` position: relative; padding-inline: 24px; - padding-block: 10px 0; + padding-block: 8px 0; &:hover { .close-wrapper { display: block; diff --git a/src/pages/llmodels/components/deploy-builtin-modal.tsx b/src/pages/llmodels/components/deploy-builtin-modal.tsx index 2ff62fc7..00cecebf 100644 --- a/src/pages/llmodels/components/deploy-builtin-modal.tsx +++ b/src/pages/llmodels/components/deploy-builtin-modal.tsx @@ -357,7 +357,7 @@ const AddModal: React.FC = (props) => { = (props) => { ) } style={{ - padding: '16px 24px', + padding: '16px 24px 8px', display: 'flex', justifyContent: 'flex-end' }} diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx index e2ad6e8f..4959659d 100644 --- a/src/pages/llmodels/components/deploy-modal.tsx +++ b/src/pages/llmodels/components/deploy-modal.tsx @@ -41,7 +41,7 @@ const dropFieldsFromForm = [ const resetFields = ['worker_selector', 'env']; const ModalFooterStyle = { - padding: '16px 24px', + padding: '16px 24px 8px', display: 'flex', justifyContent: 'flex-end' }; @@ -586,7 +586,7 @@ const AddModal: FC = (props) => { diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx index dd4f4b41..ee46c82a 100644 --- a/src/pages/llmodels/components/update-modal.tsx +++ b/src/pages/llmodels/components/update-modal.tsx @@ -35,7 +35,7 @@ type AddModalProps = { }; const ModalFooterStyle = { - padding: '16px 24px', + padding: '16px 24px 8px', display: 'flex', justifyContent: 'flex-end' }; @@ -249,7 +249,7 @@ const UpdateModal: React.FC = (props) => { { diff --git a/src/pages/llmodels/download/index.tsx b/src/pages/llmodels/download/index.tsx index 411e1276..7f766fd3 100644 --- a/src/pages/llmodels/download/index.tsx +++ b/src/pages/llmodels/download/index.tsx @@ -207,7 +207,7 @@ const DownloadModel: React.FC = (props) => { @@ -218,7 +218,7 @@ const DownloadModel: React.FC = (props) => { loading: loading }} style={{ - padding: '16px 24px', + padding: '16px 24px 8px', display: 'flex', justifyContent: 'flex-end' }} diff --git a/src/pages/llmodels/forms/backend.tsx b/src/pages/llmodels/forms/backend.tsx index b4016887..f26d5146 100644 --- a/src/pages/llmodels/forms/backend.tsx +++ b/src/pages/llmodels/forms/backend.tsx @@ -118,6 +118,11 @@ const BackendFields: React.FC = () => { return option.title; }; + const backendVersionLabelRender = (option: any) => { + console.log('backendVersionLabelRender option:', option); + return option.title; + }; + const renderVersionOptions = (values: any[], label: string) => { if (!values || values.length === 0) { return null; @@ -188,7 +193,8 @@ const BackendFields: React.FC = () => { { } > + {(backendVersions.builtIn.length > 0 || + backendVersions.custom.length > 0) && ( + + {intl.formatMessage({ id: 'common.options.auto' })} + + )} {renderVersionOptions( backendVersions.builtIn, intl.formatMessage({ id: 'backend.builtin' }) diff --git a/src/pages/llmodels/forms/index.tsx b/src/pages/llmodels/forms/index.tsx index 6c6e0d01..b3b8e429 100644 --- a/src/pages/llmodels/forms/index.tsx +++ b/src/pages/llmodels/forms/index.tsx @@ -95,8 +95,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { onClusterChange, onOk } = props; - const { getScrollElementScrollableHeight, osInstance, scrollEventElement } = - useWrapperContext(); + const { getScrollElementScrollableHeight } = useWrapperContext(); const { backendOptions, getBackendOptions } = useQueryBackends(); const { getGPUOptionList, gpuOptions, workerLabelOptions } = useGenerateGPUOptions(); @@ -105,8 +104,6 @@ const DataForm: React.FC = forwardRef((props, ref) => { const [activeKey, setActiveKey] = React.useState([]); const [target, setTarget] = React.useState(TABKeysMap.BASIC); - console.log('scroller instance in form:', osInstance, scrollEventElement); - const segmentOptions = [ { value: TABKeysMap.BASIC, @@ -226,7 +223,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { }); form.setFieldsValue({ env: null, - backend_version: '', // don't set default version here, let the user select it + backend_version: null, // don't set default version here, let the user select it backend_parameters: option.default_backend_param || [], ...updateKVCacheConfig(val, option), ...updateGPUSelector(val) @@ -454,7 +451,8 @@ const DataForm: React.FC = forwardRef((props, ref) => { ngram_max_match_length: initialValues?.speculative_config?.ngram_max_match_length || 10 }, - ...initialValues + ...initialValues, + backend_version: initialValues?.backend_version || null }} > { clearCacheFormValues, initialValues } = useFormContext(); - const { setSScrollContentPaddingBottom, getScrollElementScrollableHeight } = - useWrapperContext(); const { getRuleMessage } = useAppUtils(); const form = Form.useFormInstance(); const scheduleType = Form.useWatch('scheduleType', form); @@ -82,29 +79,6 @@ const ScheduleTypeForm: React.FC = () => { ['gpu_selector', 'gpus_per_replica'], form ); - const gpuSekectorElRef = React.useRef(null); - - const setContentPaddingBottom = () => { - if (!gpuSekectorElRef.current) { - gpuSekectorElRef.current = document.querySelector( - '[data-field="gpu_selector.gpu_ids"]' - ); - } - if (gpuSekectorElRef.current) { - const { scrollHeight, scrollTop } = - getScrollElementScrollableHeight?.() || { - scrollHeight: 0, - scrollTop: 0 - }; - - const rect = gpuSekectorElRef.current.getBoundingClientRect(); - const bottomSpace = - window.innerHeight - rect.bottom + (scrollHeight - scrollTop); - if (bottomSpace < 340) { - setSScrollContentPaddingBottom?.(340 - bottomSpace); - } - } - }; const handleScheduleTypeChange = async (value: string) => { await new Promise((resolve) => { @@ -118,11 +92,9 @@ const ScheduleTypeForm: React.FC = () => { gpu_ids: [], gpus_per_replica: null }); - requestAnimationFrame(() => { - setContentPaddingBottom(); - }); } }; + const handleGpusPerReplicasChange = (val: string | number | null) => { if (val === null) { form.setFieldValue(['gpu_selector', 'gpus_per_replica'], null); diff --git a/src/pages/playground/hooks/use-chat-completion.ts b/src/pages/playground/hooks/use-chat-completion.ts index b248bbb1..cb479149 100644 --- a/src/pages/playground/hooks/use-chat-completion.ts +++ b/src/pages/playground/hooks/use-chat-completion.ts @@ -43,6 +43,7 @@ export default function useChatCompletion( }; const joinMessage = (chunk: any) => { + console.log('chunk:', chunk); setTokenResult({ ...(chunk?.usage ?? {}) });