From 1c11e73ff849fecb9a37e494233bda0529e46b1d Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 16 May 2025 22:29:07 +0800 Subject: [PATCH] fix: playground parameters area resizable --- src/hooks/use-overlay-scroller.ts | 15 ++++++++++++-- .../components/ground-embedding.tsx | 9 +++++++-- .../playground/components/ground-reranker.tsx | 3 ++- src/pages/playground/embedding.tsx | 20 +++++++++++++------ .../playground/hooks/use-chat-completion.ts | 4 ++-- .../playground/hooks/use-collapse-layout.tsx | 20 +++++++++++++++++++ src/pages/playground/hooks/use-text-image.ts | 8 ++++---- src/pages/playground/images.tsx | 9 +++++++-- src/pages/playground/rerank.tsx | 10 +++++++++- src/pages/playground/speech.tsx | 3 +++ src/pages/playground/style/ground-left.less | 2 +- 11 files changed, 82 insertions(+), 21 deletions(-) create mode 100644 src/pages/playground/hooks/use-collapse-layout.tsx diff --git a/src/hooks/use-overlay-scroller.ts b/src/hooks/use-overlay-scroller.ts index d54cf67d..61cff7e7 100644 --- a/src/hooks/use-overlay-scroller.ts +++ b/src/hooks/use-overlay-scroller.ts @@ -6,8 +6,18 @@ import { import React, { useEffect } from 'react'; import useUserSettings from './use-user-settings'; +type OverflowBehavior = + | 'hidden' + | 'scroll' + | 'visible' + | 'visible-hidden' + | 'visible-scroll'; export interface OverlayScrollerOptions { oppositeTheme?: boolean; + overflow?: { + x?: OverflowBehavior; + y?: OverflowBehavior; + }; scrollbars?: { theme?: 'os-theme-light' | 'os-theme-dark'; autoHide?: 'never' | 'scroll' | 'leave' | 'move'; @@ -46,7 +56,7 @@ export default function useOverlayScroller(data?: { }) { const { userSettings } = useUserSettings(); const { options, events, defer = true } = data || {}; - const { scrollbars, oppositeTheme } = options || {}; + const { scrollbars, overflow, oppositeTheme } = options || {}; const scrollEventElement = React.useRef(null); const instanceRef = React.useRef(null); const initialized = React.useRef(false); @@ -59,7 +69,8 @@ export default function useOverlayScroller(data?: { debounce: 0 }, overflow: { - x: 'hidden' + x: 'hidden', + ...overflow }, scrollbars: { autoHide: 'scroll', diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx index 59fde07d..31745a52 100644 --- a/src/pages/playground/components/ground-embedding.tsx +++ b/src/pages/playground/components/ground-embedding.tsx @@ -127,7 +127,11 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { }, setCollapse() { setCollapse(!collapse); - } + }, + calculateNewMaxFromBoundary: (maxWidth?: number, maxHeight?: number) => { + resizeRef.current?.calculateNewMaxFromBoundary(); + }, + collapse: collapse }; }); @@ -396,6 +400,7 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { label: 'Chart', children: ( = forwardRef((props, ref) => { ) } ]; - }, [outputHeight, scatterData, embeddingData]); + }, [outputHeight, collapse, scatterData, embeddingData]); const onValuesChange = useCallback( (changeValues: Record, allValues: Record) => { diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx index a94d221e..811cac03 100644 --- a/src/pages/playground/components/ground-reranker.tsx +++ b/src/pages/playground/components/ground-reranker.tsx @@ -146,7 +146,8 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { }, setCollapse() { setCollapse(!collapse); - } + }, + collapse: collapse }; }); diff --git a/src/pages/playground/embedding.tsx b/src/pages/playground/embedding.tsx index 96e87a0b..e9081556 100644 --- a/src/pages/playground/embedding.tsx +++ b/src/pages/playground/embedding.tsx @@ -10,21 +10,29 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { queryModelsList } from './apis'; import GroundEmbedding from './components/ground-embedding'; +import useCollapseLayout from './hooks/use-collapse-layout'; import './style/play-ground.less'; const PlaygroundEmbedding: React.FC = () => { const intl = useIntl(); const groundLeftRef = useRef(null); - const ref = useRef(null); const [modelList, setModelList] = useState[]>([]); const [loaded, setLoaded] = useState(false); + useCollapseLayout({ + handler: () => { + groundLeftRef.current?.setCollapse?.(); + groundLeftRef.current?.calculateNewMaxFromBoundary?.(500, 300); + }, + triggeredRef: groundLeftRef.current + }); + const handleViewCode = useCallback(() => { - ref.current?.viewCode?.(); - }, [ref.current]); + groundLeftRef.current?.viewCode?.(); + }, [groundLeftRef.current]); const handleToggleCollapse = useCallback(() => { - ref.current?.setCollapse?.(); - }, [ref.current]); + groundLeftRef.current?.setCollapse?.(); + }, [groundLeftRef.current]); useEffect(() => { const getModelListByEmbedding = async () => { @@ -108,7 +116,7 @@ const PlaygroundEmbedding: React.FC = () => {
diff --git a/src/pages/playground/hooks/use-chat-completion.ts b/src/pages/playground/hooks/use-chat-completion.ts index fab2811d..6dd06e6f 100644 --- a/src/pages/playground/hooks/use-chat-completion.ts +++ b/src/pages/playground/hooks/use-chat-completion.ts @@ -95,7 +95,7 @@ export default function useChatCompletion( }; const handleStopConversation = () => { - controllerRef.current?.abort?.(); + controllerRef.current?.abort?.('stop'); setLoading(false); setTokenResult(null); }; @@ -117,7 +117,7 @@ export default function useChatCompletion( const { current, parameters, system } = params; - controllerRef.current?.abort?.(); + controllerRef.current?.abort?.('cancel'); controllerRef.current = new AbortController(); const signal = controllerRef.current.signal; currentMessageRef.current = current diff --git a/src/pages/playground/hooks/use-collapse-layout.tsx b/src/pages/playground/hooks/use-collapse-layout.tsx new file mode 100644 index 00000000..8e4fac5a --- /dev/null +++ b/src/pages/playground/hooks/use-collapse-layout.tsx @@ -0,0 +1,20 @@ +import breakpoints from '@/config/breakpoints'; +import useWindowResize from '@/hooks/use-window-resize'; +import { useEffect } from 'react'; + +export default function useCollapseLayout(options: { + handler: () => void; + triggeredRef: { + collapse: boolean; + }; +}) { + const { size } = useWindowResize(); + + useEffect(() => { + if (size.width < breakpoints.lg) { + if (!options.triggeredRef?.collapse) { + options.handler(); + } + } + }, [size.width]); +} diff --git a/src/pages/playground/hooks/use-text-image.ts b/src/pages/playground/hooks/use-text-image.ts index 9d9cacf1..cfa3aa0d 100644 --- a/src/pages/playground/hooks/use-text-image.ts +++ b/src/pages/playground/hooks/use-text-image.ts @@ -107,7 +107,7 @@ export default function useTextImage(props: any) { }); setImageList(newImageList); - requestToken.current?.abort?.(); + requestToken.current?.abort?.('cancel'); requestToken.current = new AbortController(); let result: any = {}; @@ -172,7 +172,7 @@ export default function useTextImage(props: any) { }); } catch (error) { console.log('error:', error); - requestToken.current?.abort?.(); + requestToken.current?.abort?.('cancel'); setImageList([]); } finally { setLoading(false); @@ -186,14 +186,14 @@ export default function useTextImage(props: any) { }; const handleStopConversation = () => { - requestToken.current?.abort?.(); + requestToken.current?.abort?.('stop'); setImageList([]); setLoading(false); }; useEffect(() => { return () => { - requestToken.current?.abort?.(); + requestToken.current?.abort?.('cancel'); }; }, []); diff --git a/src/pages/playground/images.tsx b/src/pages/playground/images.tsx index d8750196..28562090 100644 --- a/src/pages/playground/images.tsx +++ b/src/pages/playground/images.tsx @@ -81,8 +81,13 @@ const TextToImages: React.FC = () => { }, [modelList]); useEffect(() => { - if (size.width < breakpoints.lg && !groundTabRef1.current?.collapse) { - groundTabRef1.current?.setCollapse?.(); + if (size.width < breakpoints.lg) { + if (!groundTabRef1.current?.collapse) { + groundTabRef1.current?.setCollapse?.(); + } + if (!groundTabRef2.current?.collapse) { + groundTabRef2.current?.setCollapse?.(); + } } }, [size.width]); diff --git a/src/pages/playground/rerank.tsx b/src/pages/playground/rerank.tsx index f61ade7b..b37ca7a8 100644 --- a/src/pages/playground/rerank.tsx +++ b/src/pages/playground/rerank.tsx @@ -10,6 +10,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { queryModelsList } from './apis'; import GroundReranker from './components/ground-reranker'; +import useCollapseLayout from './hooks/use-collapse-layout'; import './style/play-ground.less'; const PlaygroundRerank: React.FC = () => { @@ -21,6 +22,13 @@ const PlaygroundRerank: React.FC = () => { >([]); const [loaded, setLoaded] = useState(false); + useCollapseLayout({ + handler: () => { + groundRerankerRef.current?.setCollapse?.(); + }, + triggeredRef: groundRerankerRef.current + }); + const handleViewCode = useCallback(() => { groundRerankerRef.current?.viewCode?.(); }, [groundRerankerRef]); @@ -90,7 +98,7 @@ const PlaygroundRerank: React.FC = () => { useHotkeys( HotKeys.RIGHT.join(','), () => { - groundLeftRef.current?.setCollapse?.(); + groundRerankerRef.current?.setCollapse?.(); }, { preventDefault: true diff --git a/src/pages/playground/speech.tsx b/src/pages/playground/speech.tsx index b6f086ae..0f9d0f1d 100644 --- a/src/pages/playground/speech.tsx +++ b/src/pages/playground/speech.tsx @@ -94,6 +94,9 @@ const Playground: React.FC = () => { if (!groundTabRef1.current?.collapse) { groundTabRef1.current?.setCollapse?.(); } + if (!groundTabRef2.current?.collapse) { + groundTabRef2.current?.setCollapse?.(); + } } }, [size.width]); diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less index f0a3e245..e4011c69 100644 --- a/src/pages/playground/style/ground-left.less +++ b/src/pages/playground/style/ground-left.less @@ -41,7 +41,7 @@ flex-direction: column; position: relative; height: calc(100vh - 72px); - width: 100%; + width: calc(100% - 390px); .message-list-wrap { display: flex;