fix: playground parameters area resizable

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