fix: target model text overflow

src/pages/model-routes/forms/targets.tsx

@@ -1,8 +1,10 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import MetadataList from '@/components/metadata-list';
 import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
+import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -13,10 +15,23 @@ import {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 import useTargetSourceModels from '../hooks/use-target-source-models';
 
+const OptionWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
 const TargetsForm = forwardRef((props, ref) => {
   const { onFallbackChange, action } = useFormContext();
   const intl = useIntl();
@@ -162,7 +177,6 @@ const TargetsForm = forwardRef((props, ref) => {
 
           return !selectedKeys.has(key) || key === currKey;
         });
-        console.log('children', children);
 
         return {
           ...model,
@@ -172,13 +186,52 @@ const TargetsForm = forwardRef((props, ref) => {
       .filter((model) => model.children && model.children.length > 0);
   };
 
-  const displayRender = (labels: any[]) => {
+  const displayRender = (labels: any[], option: any) => {
     return (
-      <span className="flex-center gap-4">
-        {labels[0]}
-        <span>/</span>
-        <span>{labels[1]}</span>
-      </span>
+      <LabelWrapper>
+        <ProviderLogo provider={_.get(option, '0.providerType') as string} />
+        <AutoTooltip
+          ghost
+          maxWidth={300}
+          title={
+            <span>
+              {labels[0]} / {labels[1]}
+            </span>
+          }
+        >
+          <span>
+            {labels[0]} / {labels[1]}
+          </span>
+        </AutoTooltip>
+      </LabelWrapper>
+    );
+  };
+
+  const optionRender = (option: any) => {
+    const { data } = option;
+
+    if (!data.isParent) {
+      return <AutoTooltip ghost>{data.label}</AutoTooltip>;
+    }
+
+    if (data.providerType === 'deployments') {
+      return (
+        <AutoTooltip ghost maxWidth={140}>
+          <OptionWrapper>
+            <ProviderLogo provider={data.providerType as string} />
+            {intl.formatMessage({ id: 'menu.models.deployment' })}
+          </OptionWrapper>
+        </AutoTooltip>
+      );
+    }
+
+    return (
+      <AutoTooltip ghost maxWidth={140}>
+        <OptionWrapper>
+          <ProviderLogo provider={data.providerType as string} />
+          <span>{data.label}</span>
+        </OptionWrapper>
+      </AutoTooltip>
     );
   };
 
@@ -269,6 +322,7 @@ const TargetsForm = forwardRef((props, ref) => {
                 options={filterOptions(item.value)}
                 showCheckedStrategy="SHOW_CHILD"
                 displayRender={displayRender}
+                optionNode={optionRender}
                 getPopupContainer={(triggerNode) => triggerNode.parentNode}
               ></SealCascader>
               <span className="seprator">:</span>
@@ -320,6 +374,7 @@ const TargetsForm = forwardRef((props, ref) => {
             onChange={(value, options) => handleFallbackChange(value, options)}
             showCheckedStrategy="SHOW_CHILD"
             displayRender={displayRender}
+            optionNode={optionRender}
             getPopupContainer={(triggerNode) => triggerNode.parentNode}
           ></SealCascader>
         </div>

src/pages/model-routes/hooks/use-target-source-models.tsx

@@ -1,8 +1,6 @@
-import GPUStackLogo from '@/assets/images/small-logo-200x200.png';
 import { queryModelsList } from '@/pages/llmodels/apis';
 import { ListItem as ModelListItem } from '@/pages/llmodels/config/types';
 import { queryMaasProviders } from '@/pages/maas-provider/apis';
-import ProviderLogo from '@/pages/maas-provider/components/provider-logo';
 import { MaasProviderItem } from '@/pages/maas-provider/config/types';
 import { useIntl } from '@umijs/max';
 import _ from 'lodash';
@@ -44,15 +42,11 @@ const useTargetSourceModels = () => {
 
       const modelsList = [
         {
-          label: (
-            <OptionWrapper>
-              <img src={GPUStackLogo} alt="GPUStack" width={16} height={16} />
-              {intl.formatMessage({ id: 'menu.models.deployment' })}
-            </OptionWrapper>
-          ),
+          label: intl.formatMessage({ id: 'menu.models.deployment' }),
           value: 'deployments',
           providerType: 'deployments',
-          parent: true,
+          parent: false,
+          isParent: true,
           children: _.uniqBy(
             models.items?.map?.((model: ModelListItem) => ({
               label: model.name,
@@ -82,14 +76,10 @@ const useTargetSourceModels = () => {
           }));
 
           return {
-            label: (
-              <OptionWrapper>
-                <ProviderLogo provider={provider.config?.type as string} />
-                <span>{provider.name}</span>
-              </OptionWrapper>
-            ),
+            label: provider.name,
             value: provider.id,
-            parent: true,
+            parent: false,
+            isParent: true,
             providerType: provider.config?.type,
             children: _.uniqBy(children, 'value')
           };