diff --git a/src/components/overlay-scroller/index.module.less b/src/components/overlay-scroller/index.module.less new file mode 100644 index 00000000..3eaa9fc0 --- /dev/null +++ b/src/components/overlay-scroller/index.module.less @@ -0,0 +1,6 @@ +.wrapper { + overflow-y: auto; + width: 100%; + padding-inline-start: 8px; + padding-inline-end: 8px; +} diff --git a/src/components/overlay-scroller/index.tsx b/src/components/overlay-scroller/index.tsx index 78e6b1cb..aa98d84b 100644 --- a/src/components/overlay-scroller/index.tsx +++ b/src/components/overlay-scroller/index.tsx @@ -2,15 +2,9 @@ import useOverlayScroller, { OverlayScrollerOptions } from '@/hooks/use-overlay-scroller'; import { Tooltip, TooltipProps } from 'antd'; +import classNames from 'classnames'; import React from 'react'; -import styled from 'styled-components'; - -const Wrapper = styled.div<{ $maxHeight?: number }>` - max-height: ${({ $maxHeight }) => - typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight}; - overflow-y: auto; - width: 100%; -`; +import s from './index.module.less'; // export OverlayScrollerOptions export type { OverlayScrollerOptions }; @@ -49,22 +43,20 @@ export const OverlayScroller: React.FC< }, []); return ( - + ); }; diff --git a/src/components/seal-form/wrapper/input.ts b/src/components/seal-form/wrapper/input.ts index 5b26d1b7..fd2a1505 100644 --- a/src/components/seal-form/wrapper/input.ts +++ b/src/components/seal-form/wrapper/input.ts @@ -171,7 +171,7 @@ const InputWrapper = styled.div` } .seal-textarea-wrapper { height: auto; - padding-right: 10px; + padding-right: 4px; textarea { overflow-y: auto !important; } diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx index 25b19c29..f3e4c2b7 100644 --- a/src/pages/playground/components/ground-embedding.tsx +++ b/src/pages/playground/components/ground-embedding.tsx @@ -14,7 +14,6 @@ import { } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd'; -import classNames from 'classnames'; import _ from 'lodash'; import 'overlayscrollbars/overlayscrollbars.css'; import React, { @@ -38,6 +37,7 @@ import { generateEmbeddingCode } from '../view-code/embedding'; import DynamicParams from './dynamic-params'; import FileList from './file-list'; import InputList from './input-list'; +import RightContainer from './right-container'; import TokenUsage from './token-usage'; import ViewCommonCode from './view-common-code'; @@ -710,23 +710,16 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { -
-
- -
-
+ + + = forwardRef((props, ref) => { /> -
-
- -
-
+ + + = forwardRef((props, ref) => { /> -
-
- -
-
+ + + = forwardRef((props, ref) => { -
-
- -
-
+ + + = forwardRef((props, ref) => { -
-
- -
-
+ + + = forwardRef((props, ref) => { /> -
-
- - {renderExtra()} - {renderAdvancedFields()} - - ]} - /> -
-
+ + + {renderExtra()} + {renderAdvancedFields()} + + ]} + /> + = forwardRef((props, ref) => { /> -
-
- -
-
+ + + = forwardRef((props, ref) => { -
-
-
- + + {intl.formatMessage({ id: 'playground.image.prompt' })} + + } + loading={loading} + disabled={!parameters.model} + isEmpty={!imageList.length} + handleSubmit={handleSendMessage} + handleAbortFetch={handleStopConversation} + onInputChange={handleInputChange} + shouldResetMessage={false} + clearAll={handleClear} />
-
-
- - {intl.formatMessage({ id: 'playground.image.prompt' })} - - } - loading={loading} - disabled={!parameters.model} - isEmpty={!imageList.length} - handleSubmit={handleSendMessage} - handleAbortFetch={handleStopConversation} - onInputChange={handleInputChange} - shouldResetMessage={false} - clearAll={handleClear} - /> -
-
+ } + > + + ) => void; - paramsConfig?: ParamsSchema[]; - initialValues?: Record; - extra?: React.ReactNode; -}; - -const ParamsSettings: React.FC = forwardRef( - ({ onValuesChange, style, paramsConfig, initialValues, extra }, ref) => { - const intl = useIntl(); - const [form] = Form.useForm(); - const formId = useId(); - - useImperativeHandle(ref, () => ({ - form - })); - - useEffect(() => { - form.setFieldsValue({ - ...initialValues - }); - }, [initialValues]); - - const handleOnFinish = (values: any) => { - console.log('handleOnFinish', values); - }; - - const handleOnFinishFailed = (errorInfo: any) => { - console.log('handleOnFinishFailed', errorInfo); - }; - - const handleValuesChange = useCallback( - (changedValues: any, allValues: any) => { - onValuesChange?.(changedValues, allValues); - }, - [onValuesChange] - ); - - const renderFields = useMemo(() => { - if (!paramsConfig) { - return null; - } - const formValues = form?.getFieldsValue(); - return paramsConfig?.map((item: ParamsSchema) => { - return ( - - - - ); - }); - }, [paramsConfig, intl]); - - return ( -
-
- {renderFields} - {extra} -
-
- ); - } -); - -export default ParamsSettings; diff --git a/src/pages/playground/components/prompt-modal.tsx b/src/pages/playground/components/prompt-modal.tsx deleted file mode 100644 index 2ddb0a9d..00000000 --- a/src/pages/playground/components/prompt-modal.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import useOverlayScroller from '@/hooks/use-overlay-scroller'; -import { useIntl } from '@umijs/max'; -import { Button, Modal, Typography } from 'antd'; -import React from 'react'; -import 'simplebar-react/dist/simplebar.min.css'; -import promptList from '../config/prompt'; -import '../style/prompt-modal.less'; - -type ViewModalProps = { - open: boolean; - onCancel: () => void; - onSelect: (list: { role: string; content: string }[]) => void; -}; - -const AddWorker: React.FC = (props) => { - const { open, onCancel } = props || {}; - const intl = useIntl(); - const { initialize } = useOverlayScroller(); - const scrollerRef = React.useRef(null); - - React.useEffect(() => { - if (scrollerRef.current) { - initialize(scrollerRef.current); - } - }, [scrollerRef.current, initialize]); - - const handleSelect = (item: { - title: string; - data: { role: string; content: string }[]; - }) => { - props.onSelect(item.data); - onCancel(); - }; - - return ( - -
-
- {promptList.map((item, index) => { - return ( -
-

- {item.title} - -

- {item.data.map((data, i) => { - return ( -
- {data.role} - - - {data.content} - - -
- ); - })} -
- ); - })} -
-
- - ); -}; - -export default React.memo(AddWorker); diff --git a/src/pages/playground/components/right-container.tsx b/src/pages/playground/components/right-container.tsx new file mode 100644 index 00000000..ff55bf30 --- /dev/null +++ b/src/pages/playground/components/right-container.tsx @@ -0,0 +1,30 @@ +import useOverlayScroller from '@/hooks/use-overlay-scroller'; +import classNames from 'classnames'; +import React, { useEffect } from 'react'; +import s from '../style/params-container.module.less'; + +const RightContainer: React.FC<{ + collapsed: boolean; + children: React.ReactNode; + footer?: React.ReactNode; +}> = ({ children, footer, collapsed }) => { + const { initialize } = useOverlayScroller(); + const paramsRef = React.useRef(null); + + useEffect(() => { + if (paramsRef.current) { + initialize(paramsRef.current); + } + }, [initialize]); + + return ( +
+
+ {children} +
+ {footer} +
+ ); +}; + +export default RightContainer; diff --git a/src/pages/playground/style/ground-llm.less b/src/pages/playground/style/ground-llm.less index 74a52106..24bd79a7 100644 --- a/src/pages/playground/style/ground-llm.less +++ b/src/pages/playground/style/ground-llm.less @@ -3,39 +3,6 @@ .ground-left-wrapper { display: flex; - .params-wrapper { - position: relative; - overflow-x: hidden; - width: 390px; - border-left: 1px solid var(--ant-color-split); - transition: width 0.3s ease; - height: calc(100vh - @HEADER_HEIGHT); - padding-top: 16px; - overflow-y: auto; - - &::-webkit-scrollbar { - width: 0; - } - - .box { - width: 390px; - padding-inline: 24px; - } - - &.collapsed { - width: 0; - overflow: hidden; - transition: width 0.3s ease; - border-left: none; - - .box { - width: 0; - padding: 0; - overflow: hidden; - } - } - } - .ground-left { flex: 1; display: flex; diff --git a/src/pages/playground/style/params-container.module.less b/src/pages/playground/style/params-container.module.less new file mode 100644 index 00000000..2399f6e5 --- /dev/null +++ b/src/pages/playground/style/params-container.module.less @@ -0,0 +1,37 @@ +@HEADER_HEIGHT: 56px; + +.wrapper { + position: relative; + width: 390px; + border-left: 1px solid var(--ant-color-split); + transition: width 0.3s ease; + height: calc(100vh - @HEADER_HEIGHT); + padding-top: 16px; + display: flex; + flex-direction: column; + overflow: hidden; + + &::-webkit-scrollbar { + width: 0; + } + + .box { + width: 390px; + padding-inline: 24px; + flex: 1; + overflow-y: auto; + } + + &.collapsed { + width: 0; + overflow: hidden; + transition: width 0.3s ease; + border-left: none; + + .box { + width: 0; + padding: 0; + overflow: hidden; + } + } +}