chore: replace components with core-ui, upgrade eslint

src/pages/playground/components/file-list.tsx

@@ -1,11 +1,10 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import { DeleteOutlined, PaperClipOutlined } from '@ant-design/icons';
+import { AutoTooltip } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import '../style/file-list.less';
-
 interface FileListProps {
   fileList: { text: string; name: string; uid: number | string }[];
   ghost?: boolean;

src/pages/playground/components/input-list.tsx

@@ -1,4 +1,4 @@
-import RowTextarea from '@/components/seal-form/row-textarea';
+import { RowTextarea } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import '../style/input-list.less';

src/pages/playground/components/message-input.tsx

@@ -1,6 +1,3 @@
-import SimpleAudio from '@/components/audio-player/simple-audio';
-import IconFont from '@/components/icon-font';
-import UploadAudio from '@/components/upload-audio';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
 import {
   audioTypeMap,
@@ -13,6 +10,7 @@ import {
   SendOutlined,
   SwapOutlined
 } from '@ant-design/icons';
+import { IconFont, SimpleAudio, UploadAudio } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
 import _ from 'lodash';
@@ -241,7 +239,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
         const imgPromises: Promise<string>[] = [];
 
         for (let i = 0; i < items.length; i++) {
-          let item = items[i];
+          const item = items[i];
 
           if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
             const file = item.getAsFile();

src/pages/playground/components/model-select.tsx

@@ -1,4 +1,4 @@
-import SealSelect from '@/components/seal-form/seal-select';
+import { Select as SealSelect } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';

src/pages/playground/components/multiple-chat/content-item.tsx

@@ -1,5 +1,5 @@
-import IconFont from '@/components/icon-font';
 import { StopOutlined } from '@ant-design/icons';
+import { IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import React, { useMemo } from 'react';

src/pages/playground/components/multiple-chat/message-actions.tsx

@@ -1,5 +1,3 @@
-import CopyButton from '@/components/copy-button';
-import UploadAudio from '@/components/upload-audio';
 import {
   audioTypeMap,
   convertFileToBase64,
@@ -10,6 +8,7 @@ import {
   EditOutlined,
   MinusCircleOutlined
 } from '@ant-design/icons';
+import { CopyButton, UploadAudio } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';

src/pages/playground/components/multiple-chat/message-body.tsx

@@ -1,5 +1,4 @@
-import SimpleAudio from '@/components/audio-player/simple-audio';
-import FullMarkdown from '@/components/markdown-viewer/full-markdown';
+import { FullMarkdown, SimpleAudio } from '@gpustack/core-ui';
 import { Input } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -78,7 +77,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
         const imgPromises: Promise<string>[] = [];
 
         for (let i = 0; i < items.length; i++) {
-          let item = items[i];
+          const item = items[i];
 
           if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
             const file = item.getAsFile();

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -1,13 +1,15 @@
-import AutoTooltip from '@/components/auto-tooltip';
-import IconFont from '@/components/icon-font';
-import OverlayScroller from '@/components/overlay-scroller';
-import BaseSelect from '@/components/seal-form/base/select';
 import {
   ClearOutlined,
   DeleteOutlined,
   MoreOutlined,
   SettingOutlined
 } from '@ant-design/icons';
+import {
+  AutoTooltip,
+  BaseSelect,
+  IconFont,
+  OverlayScroller
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Dropdown, Popover, Spin } from 'antd';
 import _ from 'lodash';
@@ -38,7 +40,6 @@ import ReferenceParams from '../reference-params';
 import ViewCommonCode from '../view-common-code';
 import MessageContent from './message-content';
 import SystemMessage from './system-message';
-
 interface ModelItemProps {
   model: string;
   modelList: ModelSelectionItem[];

src/pages/playground/components/multiple-chat/think-content.tsx

@@ -1,4 +1,4 @@
-import FullMarkdown from '@/components/markdown-viewer/full-markdown';
+import { FullMarkdown } from '@gpustack/core-ui';
 import React from 'react';
 import '../../style/think-content.less';
 

src/pages/playground/components/multiple-chat/think-parser.ts

@@ -13,8 +13,8 @@ class ThinkParser {
 
   parse(chunk: string) {
     while (this.lastCheckedIndex < chunk.length) {
-      let startIndex = chunk.indexOf('<think>', this.lastCheckedIndex);
-      let endIndex = chunk.indexOf('</think>', this.lastCheckedIndex);
+      const startIndex = chunk.indexOf('<think>', this.lastCheckedIndex);
+      const endIndex = chunk.indexOf('</think>', this.lastCheckedIndex);
 
       if (!this.collecting) {
         if (endIndex !== -1 && (startIndex === -1 || endIndex < startIndex)) {

src/pages/playground/components/params-fields.tsx

@@ -1,4 +1,4 @@
-import FieldComponent from '@/components/seal-form/field-component';
+import { FieldComponent } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';

src/pages/playground/components/thumb-img.tsx

@@ -1,4 +1,4 @@
-import SingleImage from '@/components/auto-image/single-image';
+import { SingleImage } from '@gpustack/core-ui';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';

src/pages/playground/components/view-code-buttons.tsx

@@ -1,7 +1,7 @@
+import { IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Space } from 'antd';
 import React from 'react';
-import IconFont from '../../../components/icon-font';
 
 const ViewCodeButtons: React.FC<{
   handleViewCode: () => void;

src/pages/playground/components/view-common-code.tsx

@@ -1,8 +1,8 @@
 import { BulbOutlined } from '@ant-design/icons';
+import { CommandViewer } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import React, { useEffect, useState } from 'react';
-import CommandViewer from '../../_components/command-viewer';
 
 type ViewModalProps = {
   title?: string;

src/pages/playground/embedding/forms/advance-config.tsx

@@ -1,4 +1,4 @@
-import SealInputNumber from '@/components/seal-form/input-number';
+import { InputNumber as CInputNumber } from '@gpustack/core-ui';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React from 'react';
@@ -11,11 +11,11 @@ const AdvanceConfig: React.FC = () => {
     <>
       {modelMeta?.n_ctx && modelMeta?.n_slot && (
         <Form.Item name="max_tokens">
-          <SealInputNumber
+          <CInputNumber
             disabled
             label="Max Tokens"
             value={_.floor(_.divide(modelMeta?.n_ctx, modelMeta?.n_slot))}
-          ></SealInputNumber>
+          ></CInputNumber>
         </Form.Item>
       )}
     </>

src/pages/playground/embedding/page.tsx

@@ -1,17 +1,19 @@
-import AlertInfo from '@/components/alert-info';
-import ScatterChart from '@/components/echarts/scatter';
-import HighlightCode from '@/components/highlight-code';
-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,
   PlusOutlined,
   QuestionCircleOutlined,
   SendOutlined
 } from '@ant-design/icons';
+import {
+  AlertInfo,
+  InputNumber as CInputNumber,
+  HighlightCode,
+  IconFont,
+  ResizeContainer,
+  ScatterChart
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';
@@ -406,11 +408,11 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     if (modelMeta?.n_ctx && modelMeta?.n_slot) {
       return (
         <Form.Item>
-          <SealInputNumber
+          <CInputNumber
             disabled
             label="Max Tokens"
             value={_.floor(_.divide(modelMeta?.n_ctx, modelMeta?.n_slot))}
-          ></SealInputNumber>
+          ></CInputNumber>
         </Form.Item>
       );
     }

src/pages/playground/hooks/use-add-image.tsx

@@ -1,10 +1,10 @@
-import DropDownActions from '@/components/drop-down-actions';
 import {
   DeleteOutlined,
   LinkOutlined,
   PictureOutlined,
   UploadOutlined
 } from '@ant-design/icons';
+import { DropdownActions } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Tooltip } from 'antd';
 import { useRef, useState } from 'react';
@@ -131,7 +131,7 @@ const useAddImage = (options: {
   ) : null;
 
   const UploadImageButton = (
-    <DropDownActions
+    <DropdownActions
       onOpenChange={handleOnOpenChange}
       placement={'topLeft'}
       menu={{
@@ -167,7 +167,7 @@ const useAddImage = (options: {
           e.stopPropagation();
         }}
       ></Button>
-    </DropDownActions>
+    </DropdownActions>
   );
 
   return {

src/pages/playground/hooks/use-text-image.ts

@@ -54,7 +54,7 @@ export default function useTextImage(props: any) {
   };
 
   const setImageSize = (parameters: any) => {
-    let size: Record<string, string | number> = {
+    const size: Record<string, string | number> = {
       span: 12
     };
     if (parameters.n === 1) {
@@ -102,7 +102,7 @@ export default function useTextImage(props: any) {
         _.toNumber(item)
       );
 
-      let newImageList = Array(parameters.n)
+      const newImageList = Array(parameters.n)
         .fill({})
         .map((item, index: number) => {
           return {

src/pages/playground/images/create.tsx

@@ -1,10 +1,9 @@
 import { setRouteCache } from '@/atoms/route-cache';
-import AlertInfo from '@/components/alert-info';
-import IconFont from '@/components/icon-font';
 import routeCachekey from '@/config/route-cachekey';
 import ThumbImg from '@/pages/playground/components/thumb-img';
 import { generateRandomNumber } from '@/utils';
 import { FileImageOutlined } from '@ant-design/icons';
+import { AlertInfo, IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
 import _ from 'lodash';

src/pages/playground/images/edit.tsx

@@ -1,12 +1,14 @@
 import { setRouteCache } from '@/atoms/route-cache';
-import AlertInfo from '@/components/alert-info';
-import SingleImage from '@/components/auto-image/single-image';
-import IconFont from '@/components/icon-font';
-import CanvasImageEditor from '@/components/image-editor';
-import { processImage } from '@/components/image-editor/extract-image-colors';
 import routeCachekey from '@/config/route-cachekey';
 import UploadImg from '@/pages/playground/components/upload-img';
 import { base64ToFile, generateRandomNumber } from '@/utils';
+import {
+  AlertInfo,
+  ImageEditor as CanvasImageEditor,
+  IconFont,
+  SingleImage
+} from '@gpustack/core-ui';
+import { processImage } from '@gpustack/core-ui/lib/components/image-editor/extract-image-colors';
 import { useIntl } from '@umijs/max';
 import { Divider } from 'antd';
 import _ from 'lodash';

src/pages/playground/images/forms/index.tsx

@@ -1,5 +1,4 @@
-import CheckboxField from '@/components/seal-form/checkbox-field';
-import SealInputNumber from '@/components/seal-form/input-number';
+import { InputNumber as CInputNumber, CheckboxField } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
@@ -99,10 +98,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
           ></ModelSelect>
           <ParamsFields paramsConfig={paramsConfig}></ParamsFields>
           <Form.Item name="seed">
-            <SealInputNumber
+            <CInputNumber
               disabled={randomSeed}
               label={intl.formatMessage({ id: 'playground.image.params.seed' })}
-            ></SealInputNumber>
+            ></CInputNumber>
           </Form.Item>
           <Form.Item
             name="random_seed"

src/pages/playground/rerank/forms/advance-config.tsx

@@ -1,4 +1,4 @@
-import SealInputNumber from '@/components/seal-form/input-number';
+import { InputNumber as CInputNumber } from '@gpustack/core-ui';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React from 'react';
@@ -11,11 +11,11 @@ const AdvanceConfig: React.FC = () => {
     <>
       {modelMeta?.n_ctx && modelMeta?.n_slot && (
         <Form.Item name="max_tokens">
-          <SealInputNumber
+          <CInputNumber
             disabled
             label="Max Tokens"
             value={_.floor(_.divide(modelMeta?.n_ctx, modelMeta?.n_slot))}
-          ></SealInputNumber>
+          ></CInputNumber>
         </Form.Item>
       )}
     </>

src/pages/playground/rerank/page.tsx

@@ -1,4 +1,3 @@
-import AlertInfo from '@/components/alert-info';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import useRequestToken from '@/hooks/use-request-token';
 import {
@@ -7,6 +6,7 @@ import {
   QuestionCircleOutlined,
   SendOutlined
 } from '@ant-design/icons';
+import { AlertInfo } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Input, Spin, Tag, Tooltip, Typography } from 'antd';
 import _ from 'lodash';

src/pages/playground/speech/forms/stt-form.tsx

@@ -1,5 +1,4 @@
-import CheckboxField from '@/components/seal-form/checkbox-field';
-import SealSelect from '@/components/seal-form/seal-select';
+import { CheckboxField, Select as SealSelect } from '@gpustack/core-ui';
 import { useIntl, useSearchParams } from '@umijs/max';
 import { Form } from 'antd';
 import React, {

src/pages/playground/speech/forms/tts-advance.tsx

@@ -1,10 +1,12 @@
-import CheckboxField from '@/components/seal-form/checkbox-field';
-import InputNumber from '@/components/seal-form/input-number';
-import SealInput from '@/components/seal-form/seal-input';
-import UploadAudio from '@/components/upload-audio';
 import useAppUtils from '@/hooks/use-app-utils';
 import { convertFileToBase64 } from '@/utils/load-audio-file';
 import { CloseCircleFilled } from '@ant-design/icons';
+import {
+  CheckboxField,
+  Input as CInput,
+  InputNumber,
+  UploadAudio
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
@@ -110,14 +112,14 @@ const TTSAdvanceConfig: React.FC = () => {
           }
         ]}
       >
-        <SealInput.Input
+        <CInput.Input
           allowClear
           required={taskType === 'VoiceDesign'}
           description={intl.formatMessage({
             id: 'playground.params.instructions.tips'
           })}
           label={intl.formatMessage({ id: 'playground.params.instructions' })}
-        ></SealInput.Input>
+        ></CInput.Input>
       </Form.Item>
       <Form.Item
         name="max_new_tokens"
@@ -136,7 +138,7 @@ const TTSAdvanceConfig: React.FC = () => {
           getValueProps={(value) => ({ value: fileName ? fileName : value })}
           dependencies={['task_type']}
         >
-          <SealInput.Input
+          <CInput.Input
             allowClear
             readOnly={!!fileName}
             suffix={
@@ -158,7 +160,7 @@ const TTSAdvanceConfig: React.FC = () => {
               id: 'playground.params.refAudio.tips'
             })}
             label={intl.formatMessage({ id: 'playground.params.refAudio' })}
-          ></SealInput.Input>
+          ></CInput.Input>
         </Form.Item>
       </Container>
       <Form.Item
@@ -167,11 +169,11 @@ const TTSAdvanceConfig: React.FC = () => {
         dependencies={['task_type', 'x_vector_only_mode']}
         rules={[atLeastOneValidator('x_vector_only_mode')]}
       >
-        <SealInput.TextArea
+        <CInput.TextArea
           allowClear
           scaleSize={true}
           label={intl.formatMessage({ id: 'playground.params.refAudio.text' })}
-        ></SealInput.TextArea>
+        ></CInput.TextArea>
       </Form.Item>
       <Form.Item
         dependencies={['task_type', 'ref_text']}

src/pages/playground/speech/forms/tts-form.tsx

@@ -1,7 +1,9 @@
-import AutoComplete from '@/components/seal-form/auto-complete';
-import CheckboxField from '@/components/seal-form/checkbox-field';
-import SealSelect from '@/components/seal-form/seal-select';
-import CollapsePanel from '@/pages/_components/collapse-panel';
+import {
+  AutoComplete,
+  CheckboxField,
+  CollapsePanel,
+  Select as SealSelect
+} from '@gpustack/core-ui';
 import { getLocale, useIntl, useSearchParams } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Form } from 'antd';

src/pages/playground/speech/index.tsx

@@ -1,9 +1,9 @@
-import IconFont from '@/components/icon-font';
 import breakpoints from '@/config/breakpoints';
 import HotKeys from '@/config/hotkeys';
 import useWindowResize from '@/hooks/use-window-resize';
 import { modelCategoriesMap } from '@/pages/llmodels/config';
 import { AudioOutlined } from '@ant-design/icons';
+import { IconFont } from '@gpustack/core-ui';
 import { useIntl, useSearchParams } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import { Segmented, Tabs, TabsProps } from 'antd';

src/pages/playground/speech/stt.tsx

@@ -1,16 +1,18 @@
 import { setRouteCache } from '@/atoms/route-cache';
-import AlertInfo from '@/components/alert-info';
-import AudioAnimation from '@/components/audio-animation';
-import AudioPlayer from '@/components/audio-player';
-import CopyButton from '@/components/copy-button';
-import IconFont from '@/components/icon-font';
-import UploadAudio from '@/components/upload-audio';
 import routeCachekey from '@/config/route-cachekey';
 import { HEADER_HEIGHT } from '@/config/settings';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { useCancelToken } from '@/hooks/use-request-token';
 import { readAudioFile } from '@/utils/load-audio-file';
 import { SendOutlined } from '@ant-design/icons';
+import {
+  AlertInfo,
+  AudioAnimation,
+  AudioPlayer,
+  CopyButton,
+  IconFont,
+  UploadAudio
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Spin, Tooltip } from 'antd';
 import React, {

src/pages/playground/speech/tts.tsx

@@ -1,8 +1,6 @@
 import { setRouteCache } from '@/atoms/route-cache';
-import AlertInfo from '@/components/alert-info';
-import IconFont from '@/components/icon-font';
-import SpeechContent from '@/components/speech-content';
 import routeCachekey from '@/config/route-cachekey';
+import { AlertInfo, IconFont, SpeechContent } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Spin } from 'antd';
 import _ from 'lodash';

src/pages/playground/video/page.tsx

@@ -1,9 +1,8 @@
 import VideoPoster from '@/assets/images/video-poster.png';
 import { setRouteCache } from '@/atoms/route-cache';
-import AlertInfo from '@/components/alert-info';
-import IconFont from '@/components/icon-font';
 import routeCachekey from '@/config/route-cachekey';
 import { VideoCameraOutlined } from '@ant-design/icons';
+import { AlertInfo, IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Spin, Tooltip } from 'antd';
 import _ from 'lodash';

src/pages/playground/view-code/image.ts

@@ -44,7 +44,7 @@ export const generateImageCode = ({
   const api = url;
 
   // ========================= Curl =========================
-  let curlCode = generateImageCurlCode({
+  const curlCode = generateImageCurlCode({
     api: url,
     parameters,
     isFormdata,

src/pages/playground/view-code/video.ts

@@ -34,7 +34,7 @@ export const generateCode = ({
   const api = url;
 
   // ========================= Curl =========================
-  let curlCode = generateCurlCode({
+  const curlCode = generateCurlCode({
     api: url,
     parameters,
     isFormdata