chore: rename ground-left as ground-llm

src/components/icon-font/index.tsx

@@ -1,8 +1,8 @@
 import { createFromIconfontCN } from '@ant-design/icons';
-import './iconfont/iconfont.js';
+// import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ''
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_5idsv7urmzf.js'
 });
 
 export default IconFont;

src/config/settings.ts

@@ -7,5 +7,5 @@ export const DEFAULT_ENTER_PAGE = {
   login: '/login'
 };
 
-export const GPUSTACK_API_BASE_URL = 'v2';
+export const GPUSTACK_API_BASE_URL = 'v1';
 export const OPENAI_COMPATIBLE = 'v1';

src/pages/_components/terminal-tabs/index.tsx

@@ -3,7 +3,6 @@ import TerminalTabs from './tabs';
 
 export interface TerminalModalProps {
   terminals: { url: string; name: string }[];
-  height: number;
   open: boolean;
   onClose: () => void;
   currentActive?: string;
@@ -11,20 +10,16 @@ export interface TerminalModalProps {
 
 const TerminalModal: React.FC<TerminalModalProps> = ({
   terminals,
-  height,
   open,
   onClose,
   currentActive
 }) => {
   return (
-    <div>
+    <TerminalTabs
-      <TerminalTabs
+      terminals={terminals}
-        terminals={terminals}
+      currentActive={currentActive}
-        height={height}
+      onClose={onClose}
-        currentActive={currentActive}
+    />
-        onClose={onClose}
-      />
-    </div>
   );
 };
 

src/pages/_components/terminal-tabs/resize-container.tsx

@@ -0,0 +1,98 @@
+import { HolderOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import { Resizable, ResizableProps } from 're-resizable';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled(Button)`
+  position: absolute;
+  padding: 0;
+  top: -12px;
+  font-size: var(--font-size-middle);
+  left: calc(50% + 10px);
+  transform: translateX(-50%);
+  background: none !important;
+  cursor: ns-resize;
+  &::hover {
+    background: none !important;
+  }
+`;
+
+const ResizeContainer: React.FC<
+  React.PropsWithChildren<
+    ResizableProps & {
+      ref?: any;
+      defaultHeight?: number;
+      defaultWidth?: number;
+      minHeight?: number;
+      maxHeight?: number;
+      onReSize?: (
+        e: MouseEvent | TouchEvent,
+        dir: any,
+        refToElement: HTMLElement
+      ) => void;
+      onReSizeStop?: (
+        e: MouseEvent | TouchEvent,
+        dir: any,
+        refToElement: HTMLElement,
+        delta: { width: number; height: number }
+      ) => void;
+    }
+  >
+> = forwardRef((props, ref) => {
+  const {
+    defaultWidth,
+    defaultHeight = 180,
+    minHeight = 180,
+    maxHeight = 400,
+    children,
+    onReSize,
+    onReSizeStop,
+    ...restProps
+  } = props;
+  const intl = useIntl();
+  const resizeRef = useRef<Resizable>(null);
+
+  useImperativeHandle(ref, () => ({
+    container: resizeRef.current
+  }));
+
+  const dragHanle = (
+    <StyledButton
+      size="small"
+      type="text"
+      icon={
+        <HolderOutlined
+          rotate={90}
+          style={{ fontSize: 'var(--font-size-14)' }}
+        />
+      }
+    ></StyledButton>
+  );
+
+  return (
+    <Resizable
+      ref={resizeRef}
+      enable={{
+        top: true
+      }}
+      defaultSize={{
+        height: defaultHeight,
+        width: defaultWidth
+      }}
+      handleComponent={{
+        top: undefined
+      }}
+      maxHeight={maxHeight}
+      minHeight={minHeight}
+      onResize={onReSize}
+      onResizeStop={onReSizeStop}
+      {...restProps}
+    >
+      {children}
+    </Resizable>
+  );
+});
+
+export default ResizeContainer;

src/pages/_components/terminal-tabs/tabs.tsx

@@ -3,6 +3,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import { Button, Tabs } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
+import ResizeContainer from './resize-container';
 import { TerminalProps } from './types';
 
 const TabsContainer = styled.div`
@@ -30,7 +31,22 @@ const TabsContainer = styled.div`
         display: none;
       }
 
+      &::before {
+        display: none;
+        content: '';
+        left: 5px;
+        top: 5px;
+        bottom: 5px;
+        right: 5px;
+        position: absolute;
+        border-radius: 4px;
+        background-color: var(--ant-color-fill-tertiary);
+      }
+
       &:hover {
+        &::before {
+          display: block;
+        }
         .ant-tabs-tab-remove {
           display: inline-block;
         }
@@ -50,20 +66,19 @@ const TabsContainer = styled.div`
 
 export interface TerminalTabsProps {
   terminals: TerminalProps[];
-  height: number;
   currentActive?: string;
   onClose: () => void;
 }
 
 const TerminalTabs: React.FC<TerminalTabsProps> = ({
   terminals,
-  height,
   currentActive,
   onClose
 }) => {
   const [activeKey, setActiveKey] = useState(
     currentActive || terminals[0]?.url || ''
   );
+  const [height, setHeight] = useState(300);
 
   const items = useMemo(() => {
     return terminals.map((terminal) => {
@@ -82,26 +97,29 @@ const TerminalTabs: React.FC<TerminalTabsProps> = ({
   }, [currentActive]);
 
   return (
-    <TabsContainer>
+    <ResizeContainer>
-      <Tabs
+      <TabsContainer>
-        type="editable-card"
+        <Tabs
-        hideAdd
+          type="editable-card"
-        activeKey={activeKey}
+          hideAdd
-        onChange={setActiveKey}
+          activeKey={activeKey}
-        tabBarStyle={{ marginBottom: 0 }}
+          onChange={setActiveKey}
-        items={items}
+          tabBarStyle={{ marginBottom: 0 }}
-        tabBarExtraContent={{
+          items={items}
-          right: (
+          tabBarExtraContent={{
-            <Button
+            right: (
-              icon={<CloseOutlined />}
+              <Button
-              type="text"
+                icon={<CloseOutlined />}
-              size="small"
+                type="text"
-              onClick={onClose}
+                size="small"
-            ></Button>
+                style={{ marginRight: 8 }}
-          )
+                onClick={onClose}
-        }}
+              ></Button>
-      ></Tabs>
+            )
-    </TabsContainer>
+          }}
+        ></Tabs>
+      </TabsContainer>
+    </ResizeContainer>
   );
 };
 

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

@@ -5,9 +5,9 @@ import IconFont from '@/components/icon-font';
 import SealInputNumber from '@/components/seal-form/input-number';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import useRequestToken from '@/hooks/use-request-token';
+import ResizeContainer from '@/pages/_components/terminal-tabs/resize-container';
 import {
   ClearOutlined,
-  HolderOutlined,
   PlusOutlined,
   QuestionCircleOutlined,
   SendOutlined
@@ -17,7 +17,6 @@ import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
-import { Resizable } from 're-resizable';
 import React, {
   forwardRef,
   useCallback,
@@ -33,7 +32,7 @@ import { embeddingSamples } from '../config/samples';
 import { LLM_METAKEYS } from '../hooks/config';
 import useEmbeddingWorker from '../hooks/use-embedding-worker';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/rerank.less';
 import { generateEmbeddingCode } from '../view-code/embedding';
 import DynamicParams from './dynamic-params';
@@ -132,7 +131,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
         setCollapse(!collapse);
       },
       calculateNewMaxFromBoundary: (maxWidth?: number, maxHeight?: number) => {
-        resizeRef.current?.calculateNewMaxFromBoundary();
+        resizeRef.current?.container?.calculateNewMaxFromBoundary();
       },
       collapse: collapse
     };
@@ -259,8 +258,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const handleScaleResize = () => {
-    console.log('handleScaleResize', resizeRef.current);
+    const height = resizeRef.current?.container?.state?.height;
-    const height = resizeRef.current?.state?.height;
     if (height) {
       setOutputHeight(height);
     }
@@ -638,38 +636,11 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
                 <Spin spinning={true}></Spin>
               </div>
             )}
-            <Resizable
+            <ResizeContainer
               ref={resizeRef}
-              enable={{
-                top: true
-              }}
-              defaultSize={{
-                height: 180
-              }}
-              handleComponent={{
-                top: (
-                  <Tooltip
-                    title={intl.formatMessage({
-                      id: 'playground.embedding.handler.tips'
-                    })}
-                  >
-                    <Button
-                      size="small"
-                      className="drag-handler"
-                      color="default"
-                      variant="filled"
-                      icon={
-                        <HolderOutlined
-                          rotate={90}
-                          style={{ fontSize: 'var(--font-size-14)' }}
-                        />
-                      }
-                    ></Button>
-                  </Tooltip>
-                )
-              }}
               maxHeight={resizeMaxHeight}
               minHeight={180}
+              defaultHeight={180}
               onResize={handleScaleResize}
               onResizeStop={handleScaleOutputSize}
             >
@@ -689,7 +660,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
                   items={outputItems}
                 ></Tabs>
               </div>
-            </Resizable>
+            </ResizeContainer>
           </div>
         </div>
       </div>

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

@@ -21,7 +21,7 @@ import React, {
 import { CREAT_IMAGE_API } from '../apis';
 import { useInitImageMeta } from '../hooks/use-init-meta';
 import useTextImage from '../hooks/use-text-image';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
 import DynamicParams from './dynamic-params';

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

@@ -15,7 +15,7 @@ import { MessageItem, MessageItemAction } from '../config/types';
 import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
 import useChatCompletion from '../hooks/use-chat-completion';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateLLMCode } from '../view-code/llm';
 import DynamicParams from './dynamic-params';

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

@@ -38,7 +38,7 @@ import { rerankerSamples } from '../config/samples';
 import { ParamsSchema } from '../config/types';
 import { LLM_METAKEYS } from '../hooks/config';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/rerank.less';
 import '../style/system-message-wrap.less';
 import { generateRerankCode } from '../view-code/rerank';

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

@@ -26,7 +26,7 @@ import React, {
 import { AUDIO_SPEECH_TO_TEXT_API, speechToText } from '../apis';
 import { SpeechToTextFormat, extractErrorMessage } from '../config';
 import { RealtimeParamsConfig as paramsConfig } from '../config/params-config';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/speech-to-text.less';
 import '../style/system-message-wrap.less';
 import { speechToTextCode } from '../view-code/audio';

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

@@ -24,7 +24,7 @@ import { AUDIO_TEXT_TO_SPEECH_API, CHAT_API, textToSpeech } from '../apis';
 import { extractErrorMessage } from '../config';
 import { TTSParamsConfig as paramsConfig } from '../config/params-config';
 import { MessageItem, ParamsSchema } from '../config/types';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { TextToSpeechCode } from '../view-code/audio';
 import DynamicParams from './dynamic-params';

src/pages/playground/components/image-edit.tsx

@@ -26,7 +26,7 @@ import { EDIT_IMAGE_API } from '../apis';
 import { EDIT_IMAGE_ACCEPT, scaleImageSize } from '../config';
 import { useInitImageMeta } from '../hooks/use-init-meta';
 import useTextImage from '../hooks/use-text-image';
-import '../style/ground-left.less';
+import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
 import DynamicParams from './dynamic-params';

src/pages/playground/index.tsx

@@ -13,7 +13,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { PageContainerInner } from '../_components/page-box';
 import { queryModelsList } from './apis';
-import GroundLeft from './components/ground-left';
+import GroundLLM from './components/ground-llm';
 import MultipleChat from './components/multiple-chat';
 import ViewCodeButtons from './components/view-code-buttons';
 import './style/play-ground.less';
@@ -65,7 +65,7 @@ const Playground: React.FC = () => {
         label: 'Chat',
         icon: <MessageOutlined />,
         children: (
-          <GroundLeft ref={groundLeftRef} modelList={modelList}></GroundLeft>
+          <GroundLLM ref={groundLeftRef} modelList={modelList}></GroundLLM>
         )
       },
       {

src/pages/playground/style/ground-llm.less

@@ -80,17 +80,5 @@
 
   .embed-chart {
     position: relative;
-
-    .drag-handler {
-      position: absolute;
-      padding: 0;
-      height: fit-content;
-      top: -10px;
-      font-size: var(--font-size-middle);
-      left: calc(50% + 10px);
-      transform: translateX(-50%);
-      background-color: transparent;
-      cursor: ns-resize;
-    }
   }
 }

src/pages/resources/hooks/use-terminal-tabs.tsx

@@ -34,7 +34,6 @@ const useTerminalTabs = () => {
 
   const TerminalPanel = (
     <TerminalTabs
-      height={300}
       key="terminal-tabs"
       terminals={terminals}
       open={terminalModalStatus.open}