fix: playground parameters area resizable

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<any>(null);
   const instanceRef = React.useRef<any>(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',

src/pages/playground/components/ground-embedding.tsx

@@ -127,7 +127,11 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
       },
       setCollapse() {
         setCollapse(!collapse);
-      }
+      },
+      calculateNewMaxFromBoundary: (maxWidth?: number, maxHeight?: number) => {
+        resizeRef.current?.calculateNewMaxFromBoundary();
+      },
+      collapse: collapse
     };
   });
 
@@ -396,6 +400,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
         label: 'Chart',
         children: (
           <ScatterChart
+            key={collapse ? 'collapse' : 'expand'}
             seriesData={scatterData}
             height={outputHeight}
             width="100%"
@@ -424,7 +429,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
         )
       }
     ];
-  }, [outputHeight, scatterData, embeddingData]);
+  }, [outputHeight, collapse, scatterData, embeddingData]);
 
   const onValuesChange = useCallback(
     (changeValues: Record<string, any>, allValues: Record<string, any>) => {

src/pages/playground/components/ground-reranker.tsx

@@ -146,7 +146,8 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       },
       setCollapse() {
         setCollapse(!collapse);
-      }
+      },
+      collapse: collapse
     };
   });
 

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<any>(null);
-  const ref = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
   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 = () => {
       <div className="play-ground">
         <div className="chat">
           <GroundEmbedding
-            ref={ref}
+            ref={groundLeftRef}
             modelList={modelList}
             loaded={loaded}
           ></GroundEmbedding>

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

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]);
+}

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');
     };
   }, []);
 

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]);
 

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

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]);
 

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;