style: custom srcoll bar style

package.json

@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.5.0",
+    "simplebar-react": "^3.2.6",
     "umi-presets-pro": "^2.0.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -86,6 +86,9 @@ dependencies:
   react-hotkeys-hook:
     specifier: ^4.5.0
     version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
+  simplebar-react:
+    specifier: ^3.2.6
+    version: 3.2.6(react@18.2.0)
   umi-presets-pro:
     specifier: ^2.0.3
     version: 2.0.3(@babel/core@7.24.9)(@types/react-dom@18.3.0)(@types/react@18.3.1)(antd@5.18.3)(dva@2.5.0-beta.2)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0)(umi@4.3.6)
@@ -4456,7 +4459,7 @@ packages:
     dependencies:
       '@babel/core': 7.24.5
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -4497,7 +4500,7 @@ packages:
       postcss-syntax: '>=0.36.2'
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
       remark: 13.0.0
       unist-util-find-all-after: 3.0.2
     transitivePeerDependencies:
@@ -4820,6 +4823,12 @@ packages:
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==, tarball: https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz}
 
+  /@types/lodash-es@4.17.12:
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==, tarball: https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz}
+    dependencies:
+      '@types/lodash': 4.17.4
+    dev: false
+
   /@types/lodash@4.17.4:
     resolution: {integrity: sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==}
     dev: false
@@ -13116,7 +13125,7 @@ packages:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
     dev: false
 
   /postcss-image-set-function@4.0.7(postcss@8.4.38):
@@ -13590,30 +13599,6 @@ packages:
       lodash: 4.17.21
       postcss: 8.4.38
 
-  /postcss-syntax@0.36.2(postcss@7.0.39):
-    resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
-    peerDependencies:
-      postcss: '>=5.0.0'
-      postcss-html: '*'
-      postcss-jsx: '*'
-      postcss-less: '*'
-      postcss-markdown: '*'
-      postcss-scss: '*'
-    peerDependenciesMeta:
-      postcss-html:
-        optional: true
-      postcss-jsx:
-        optional: true
-      postcss-less:
-        optional: true
-      postcss-markdown:
-        optional: true
-      postcss-scss:
-        optional: true
-    dependencies:
-      postcss: 7.0.39
-    dev: false
-
   /postcss-syntax@0.36.2(postcss@8.4.38):
     resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
     peerDependencies:
@@ -16262,6 +16247,23 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  /simplebar-core@1.2.6:
+    resolution: {integrity: sha512-H5NYU+O+uvqOH5VXw3+lgoc1vTI6jL8LOZJsw4xgRpV7uIPjRpmLPdz0TrouxwKHBhpVLzVIlyKhaRLelIThMw==, tarball: https://registry.npmjs.org/simplebar-core/-/simplebar-core-1.2.6.tgz}
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+    dev: false
+
+  /simplebar-react@3.2.6(react@18.2.0):
+    resolution: {integrity: sha512-8jDiBuVCG86JmOrsmkA+4q77iFAEbhU9EX62PohLisg3dnxdLXFFhkxnx2Es3Cxt8IlZFlJsF9GaobFL3ukwiA==, tarball: https://registry.npmjs.org/simplebar-react/-/simplebar-react-3.2.6.tgz}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+      simplebar-core: 1.2.6
+    dev: false
+
   /single-spa@5.9.5:
     resolution: {integrity: sha512-9SQdmsyz4HSP+3gs6PJzhkaMEg+6zTlu9oxIghnwUX3eq+ajq4ft5egl0iyR55LAmO/UwvU8NgIWs/ZyQMa6dw==}
     dev: false
@@ -16771,7 +16773,7 @@ packages:
       postcss-sass: 0.4.4
       postcss-scss: 2.1.1
       postcss-selector-parser: 6.0.16
-      postcss-syntax: 0.36.2(postcss@7.0.39)
+      postcss-syntax: 0.36.2(postcss@8.4.38)
       postcss-value-parser: 4.2.0
       resolve-from: 5.0.0
       slash: 3.0.0

src/pages/llmodels/components/column-wrapper.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import '../style/column-wrapper.less';
 
 const ColumnWrapper: React.FC<any> = ({ children, footer }) => {
   if (footer) {
     return (
       <div className="column-wrapper-footer">
-        <div className="column-wrapper">{children}</div>
+        <div className="column-wrapper">
+          <SimpleBar
+            style={{ height: 'calc(100vh - 89px)', paddingBottom: '50px' }}
+          >
+            {children}
+          </SimpleBar>
+        </div>
         {<div className="footer">{footer}</div>}
       </div>
     );
   }
-  return <div className="column-wrapper">{children}</div>;
+  return (
+    <div className="column-wrapper">
+      <SimpleBar style={{ height: 'calc(100vh - 89px)' }}>{children}</SimpleBar>
+    </div>
+  );
 };
 
 export default ColumnWrapper;

src/pages/llmodels/components/deploy-modal.tsx

@@ -302,21 +302,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       styles={{
         body: {
           height: 'calc(100vh - 57px)',
-          padding: '16px 0'
+          padding: '16px 0',
+          overflowX: 'hidden'
         },
         content: {
           borderRadius: '8px 0 0 8px'
         }
       }}
       width={
-        modelSource === modelSourceMap.huggingface_value
+        props.source === modelSourceMap.huggingface_value
           ? 'calc(100vw - 220px)'
           : 600
       }
       footer={false}
     >
       <div style={{ display: 'flex' }}>
-        {modelSource === modelSourceMap.huggingface_value && (
+        {props.source === modelSourceMap.huggingface_value && (
           <ColumnWrapper>
             <SearchModel
               modelSource={modelSource}
@@ -324,7 +325,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             ></SearchModel>
           </ColumnWrapper>
         )}
-        {modelSource === modelSourceMap.huggingface_value && (
+        {props.source === modelSourceMap.huggingface_value && (
           <ColumnWrapper>
             <ModelCard repo={huggingfaceRepoId}></ModelCard>
             <HFModelFile
@@ -346,92 +347,96 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             ></ModalFooter>
           }
         >
-          <TitleWrapper>Configuration</TitleWrapper>
+          <>
-          <Form
+            <TitleWrapper>Configuration</TitleWrapper>
-            name="deployModel"
+            <Form
-            form={form}
+              name="deployModel"
-            onFinish={onOk}
+              form={form}
-            preserve={false}
+              onFinish={onOk}
-            style={{ padding: '16px 24px' }}
+              preserve={false}
-          >
+              style={{ padding: '16px 24px' }}
-            <Form.Item<FormData>
-              name="name"
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage(
-                    {
-                      id: 'common.form.rule.input'
-                    },
-                    { name: intl.formatMessage({ id: 'common.table.name' }) }
-                  )
-                }
-              ]}
             >
-              <SealInput.Input
+              <Form.Item<FormData>
-                label={intl.formatMessage({
+                name="name"
-                  id: 'common.table.name'
+                rules={[
-                })}
+                  {
-                required
+                    required: true,
-              ></SealInput.Input>
+                    message: intl.formatMessage(
-            </Form.Item>
+                      {
-            <Form.Item<FormData>
+                        id: 'common.form.rule.input'
-              name="source"
+                      },
-              rules={[
+                      { name: intl.formatMessage({ id: 'common.table.name' }) }
-                {
+                    )
-                  required: true,
+                  }
-                  message: intl.formatMessage(
+                ]}
-                    {
+              >
-                      id: 'common.form.rule.select'
+                <SealInput.Input
-                    },
-                    { name: intl.formatMessage({ id: 'models.form.source' }) }
-                  )
-                }
-              ]}
-            >
-              {
-                <SealSelect
-                  disabled={true}
                   label={intl.formatMessage({
-                    id: 'models.form.source'
+                    id: 'common.table.name'
                   })}
-                  options={sourceOptions}
                   required
-                ></SealSelect>
+                ></SealInput.Input>
-              }
+              </Form.Item>
-            </Form.Item>
+              <Form.Item<FormData>
-            {renderFieldsBySource()}
+                name="source"
-            <Form.Item<FormData>
+                rules={[
-              name="replicas"
+                  {
-              rules={[
+                    required: true,
+                    message: intl.formatMessage(
+                      {
+                        id: 'common.form.rule.select'
+                      },
+                      { name: intl.formatMessage({ id: 'models.form.source' }) }
+                    )
+                  }
+                ]}
+              >
                 {
-                  required: true,
+                  <SealSelect
-                  message: intl.formatMessage(
+                    disabled={true}
-                    {
+                    label={intl.formatMessage({
-                      id: 'common.form.rule.input'
+                      id: 'models.form.source'
-                    },
+                    })}
-                    { name: intl.formatMessage({ id: 'models.form.replicas' }) }
+                    options={sourceOptions}
-                  )
+                    required
+                  ></SealSelect>
                 }
-              ]}
+              </Form.Item>
-            >
+              {renderFieldsBySource()}
-              <SealInput.Number
+              <Form.Item<FormData>
-                style={{ width: '100%' }}
+                name="replicas"
-                label={intl.formatMessage({
+                rules={[
-                  id: 'models.form.replicas'
+                  {
-                })}
+                    required: true,
-                required
+                    message: intl.formatMessage(
-                min={0}
+                      {
-              ></SealInput.Number>
+                        id: 'common.form.rule.input'
-            </Form.Item>
+                      },
-            <Form.Item<FormData> name="description">
+                      {
-              <SealInput.TextArea
+                        name: intl.formatMessage({ id: 'models.form.replicas' })
-                label={intl.formatMessage({
+                      }
-                  id: 'common.table.description'
+                    )
-                })}
+                  }
-              ></SealInput.TextArea>
+                ]}
-            </Form.Item>
+              >
-          </Form>
+                <SealInput.Number
+                  style={{ width: '100%' }}
+                  label={intl.formatMessage({
+                    id: 'models.form.replicas'
+                  })}
+                  required
+                  min={0}
+                ></SealInput.Number>
+              </Form.Item>
+              <Form.Item<FormData> name="description">
+                <SealInput.TextArea
+                  label={intl.formatMessage({
+                    id: 'common.table.description'
+                  })}
+                ></SealInput.TextArea>
+              </Form.Item>
+            </Form>
+          </>
         </ColumnWrapper>
       </div>
     </Drawer>

src/pages/llmodels/components/search-result.tsx

@@ -1,6 +1,8 @@
 import { SearchOutlined } from '@ant-design/icons';
 import { Col, Empty, Row, Spin } from 'antd';
 import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import '../style/search-result.less';
 import HFModelItem from './hf-model-item';
 
@@ -28,49 +30,51 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
     }
   };
   return (
-    <div style={{ ...props.style }} className="search-result-wrap">
+    <SimpleBar style={{ height: 'calc(100vh - 194px)' }}>
-      <Spin spinning={props.loading}>
+      <div style={{ ...props.style }} className="search-result-wrap">
-        <div style={{ minHeight: 200 }}>
+        <Spin spinning={props.loading}>
-          {resultList.length ? (
+          <div style={{ minHeight: 200 }}>
-            <Row gutter={[16, 24]}>
+            {resultList.length ? (
-              {resultList.map((item, index) => (
+              <Row gutter={[16, 24]}>
-                <Col span={24} key={item.name}>
+                {resultList.map((item, index) => (
-                  <div
+                  <Col span={24} key={item.name}>
-                    onClick={(e) => handleSelect(e, item)}
+                    <div
-                    onKeyDown={(e) => handleOnEnter(e, item)}
+                      onClick={(e) => handleSelect(e, item)}
-                  >
+                      onKeyDown={(e) => handleOnEnter(e, item)}
-                    <HFModelItem
+                    >
-                      source={source}
+                      <HFModelItem
-                      tags={item.tags}
+                        source={source}
-                      key={index}
+                        tags={item.tags}
-                      title={item.name}
+                        key={index}
-                      downloads={item.downloads}
+                        title={item.name}
-                      likes={item.likes}
+                        downloads={item.downloads}
-                      task={item.task}
+                        likes={item.likes}
-                      updatedAt={item.updatedAt}
+                        task={item.task}
-                      active={item.id === props.current}
+                        updatedAt={item.updatedAt}
-                    />
+                        active={item.id === props.current}
-                  </div>
+                      />
-                </Col>
+                    </div>
-              ))}
+                  </Col>
-            </Row>
+                ))}
-          ) : (
+              </Row>
-            !props.loading && (
+            ) : (
-              <Empty
+              !props.loading && (
-                imageStyle={{ height: 'auto', marginTop: '20px' }}
+                <Empty
-                image={
+                  imageStyle={{ height: 'auto', marginTop: '20px' }}
-                  <SearchOutlined
+                  image={
-                    className="font-size-16"
+                    <SearchOutlined
-                    style={{ color: 'var(--ant-color-text-tertiary)' }}
+                      className="font-size-16"
-                  ></SearchOutlined>
+                      style={{ color: 'var(--ant-color-text-tertiary)' }}
-                }
+                    ></SearchOutlined>
-                description="No models found"
+                  }
-              />
+                  description="No models found"
-            )
+                />
-          )}
+              )
-        </div>
+            )}
-      </Spin>
+          </div>
-    </div>
+        </Spin>
+      </div>
+    </SimpleBar>
   );
 };
 

src/pages/llmodels/style/column-wrapper.less

@@ -1,38 +1,19 @@
 .column-wrapper {
   flex: 1;
-  height: calc(100vh - 89px);
-  overflow-y: auto;
-  overflow-x: hidden;
   border-left: 1px solid var(--ant-color-split);
-  // custom scrollbar
+}
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
 
-  &::-webkit-scrollbar-thumb {
+.simplebar-scrollbar::before {
-    background-color: transparent;
+  background: rgba(0, 0, 0, 50%);
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--ant-color-fill);
-      border-radius: 4px;
-    }
-  }
 }
 
 .column-wrapper-footer {
   flex: 1;
+  display: flex;
   position: relative;
   border-left: 1px solid var(--ant-color-split);
 
   .column-wrapper {
-    padding-bottom: 50px;
     border-left: none;
   }
 

src/pages/llmodels/style/search-result.less

@@ -4,27 +4,12 @@
   background-color: rgba(255, 255, 255, 100%);
   padding: 16px @padding;
   border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
-  overflow-y: auto;
+  // overflow-y: auto;
-  height: calc(100vh - 194px);
+  // height: calc(100vh - 194px);
-  // custom scrollbar
+}
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
 
-  &::-webkit-scrollbar-thumb {
+.simplebar-scrollbar::before {
-    background-color: transparent;
+  background: rgba(0, 0, 0, 50%);
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--ant-color-fill);
-    }
-  }
 }
 
 .search-bar {

src/pages/playground/components/chat-footer.tsx

@@ -88,15 +88,6 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
           style={{ textAlign: 'right' }}
         >
           <Space size={20}>
-            {/* <Button
-              icon={
-                <IconFont type="icon-code" className="font-size-16"></IconFont>
-              }
-              onClick={onView}
-              disabled={disabled}
-            >
-              {intl.formatMessage({ id: 'playground.viewcode' })}
-            </Button> */}
             {!disabled ? (
               <Button
                 type="primary"