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,6 +347,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             ></ModalFooter>
           }
         >
+          <>
             <TitleWrapper>Configuration</TitleWrapper>
             <Form
               name="deployModel"
@@ -410,7 +412,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                       {
                         id: 'common.form.rule.input'
                       },
-                    { name: intl.formatMessage({ id: 'models.form.replicas' }) }
+                      {
+                        name: intl.formatMessage({ id: 'models.form.replicas' })
+                      }
                     )
                   }
                 ]}
@@ -432,6 +436,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
                 ></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,6 +30,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
     }
   };
   return (
+    <SimpleBar style={{ height: 'calc(100vh - 194px)' }}>
       <div style={{ ...props.style }} className="search-result-wrap">
         <Spin spinning={props.loading}>
           <div style={{ minHeight: 200 }}>
@@ -71,6 +74,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
           </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"