fix(style): tooltip overflow

src/pages/llmodels/components/file-parts.tsx

@@ -1,31 +1,36 @@
 import { convertFileSize } from '@/utils';
 import React from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  .file-part-item {
+    width: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
 
 const FileParts: React.FC<{
   showSize?: boolean;
   fileList: any[];
 }> = ({ fileList, showSize = true }) => {
   return (
-    <SimpleBar
-      style={{ maxHeight: 200 }}
-      classNames={{ scrollbar: 'scrollbar-handle-light simplebar-scrollbar' }}
-    >
-      <div style={{ padding: 10 }}>
-        {fileList.map((file, index) => {
-          return (
-            <div key={index} className="flex-between m-b-5">
-              <span>
-                {' '}
-                Part {file.part} of {file.total}
-              </span>
-              {showSize && <span>{convertFileSize(file.size)}</span>}
-            </div>
-          );
-        })}
-      </div>
-    </SimpleBar>
+    <Wrapper>
+      {fileList.map((file, index) => {
+        return (
+          <div key={index} className="file-part-item">
+            <span>
+              Part {file.part} of {file.total}
+            </span>
+            {<span>{convertFileSize(file.size)}</span>}
+          </div>
+        );
+      })}
+    </Wrapper>
   );
 };
 

src/pages/llmodels/components/model-file-item.tsx

@@ -1,6 +1,7 @@
+import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { convertFileSize } from '@/utils';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tag, Tooltip } from 'antd';
+import { Tag } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
@@ -24,13 +25,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
   }
   const { parts } = props;
   return (
-    <Tooltip
-      overlayInnerStyle={{
-        width: 180,
-        padding: 0
-      }}
-      title={<FileParts fileList={parts}></FileParts>}
-    >
+    <TooltipOverlayScroller title={<FileParts fileList={parts}></FileParts>}>
       <Tag
         className="tag-item"
         color="purple"
@@ -43,7 +38,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
           {parts.length} parts
         </span>
       </Tag>
-    </Tooltip>
+    </TooltipOverlayScroller>
   );
 };
 

src/pages/llmodels/config/mindie-config.ts

@@ -81,6 +81,10 @@ const options = [
   {
     label: '--truncation',
     value: '--truncation'
+  },
+  {
+    label: '--max-link-num',
+    value: '--max-link-num'
   }
 ];
 

src/pages/resources/components/model-files.tsx

@@ -2,7 +2,7 @@ import { modelsExpandKeysAtom } from '@/atoms/models';
 import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
-import OverlayScroller from '@/components/overlay-scroller';
+import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { FilterBar } from '@/components/page-tools';
 import StatusTag from '@/components/status-tag';
 import { PageAction } from '@/config';
@@ -27,15 +27,7 @@ import {
   InfoCircleOutlined
 } from '@ant-design/icons';
 import { useIntl, useNavigate } from '@umijs/max';
-import {
-  ConfigProvider,
-  Empty,
-  Table,
-  Tag,
-  Tooltip,
-  Typography,
-  message
-} from 'antd';
+import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
 import dayjs from 'dayjs';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
@@ -97,18 +89,14 @@ const PathWrapper = styled.div`
   }
 `;
 
-const OverlayScrollerWrapper = styled.div`
-  .overlay-scroller-wrapper {
-    padding-block: 0;
-    padding-inline: 6px 0;
-  }
-`;
-
 const ItemWrapper = styled.ul`
   max-width: 300px;
   margin: 0;
-  padding-inline: 8px 0;
+  padding-inline: 15px 0;
   word-break: break-word;
+  li {
+    line-height: 1.6;
+  }
 `;
 
 const FilesTag = styled(Tag)`
@@ -337,21 +325,14 @@ const ModelFiles = () => {
     };
 
     return (
-      <Tooltip
-        title={
-          <OverlayScrollerWrapper>
-            <OverlayScroller>{renderItem()}</OverlayScroller>
-          </OverlayScrollerWrapper>
-        }
-        overlayInnerStyle={{ width: 'max-content', maxWidth: 300 }}
-      >
+      <TooltipOverlayScroller title={renderItem()}>
         <FilesTag color="purple" icon={<InfoCircleOutlined />}>
           <span style={{ opacity: 1 }}>
             {record.resolved_paths?.length}{' '}
             {intl.formatMessage({ id: 'models.form.files' })}
           </span>
         </FilesTag>
-      </Tooltip>
+      </TooltipOverlayScroller>
     );
   };