fix: remove duplicate selected models

src/components/seal-form/wrapper/select.ts

@@ -89,13 +89,18 @@ const SelectWrapper = styled.div`
         }
         .ant-select-placeholder {
           position: absolute;
-          top: 10px;
+          top: 1px;
           left: 0;
           right: 0;
         }
         .ant-select .ant-select-content {
           padding-block: 0px 0;
         }
+        .ant-select-auto-complete {
+          .ant-select-placeholder {
+            top: 1px;
+          }
+        }
         .ant-select.ant-cascader {
           .ant-select-placeholder {
             top: 0px !important;

src/pages/llmodels/hooks/index.ts

@@ -271,6 +271,12 @@ export const useCheckCompatibility = () => {
 
     let compatibilityMessage = compatibility_messages.join(' ');
 
+    compatibilityMessage = compatibilityMessage.startsWith(
+      `The model file path you specified does not exist on the GPUStack server. It's recommended`
+    )
+      ? intl.formatMessage({ id: 'models.form.modelfile.notfound' })
+      : compatibilityMessage;
+
     let msgData = {
       title: scheduling_messages?.length > 0 ? compatibilityMessage : '',
       message:

src/pages/maas-provider/forms/advance-config.tsx

@@ -1,12 +1,15 @@
+import IconFont from '@/components/icon-font';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
 import YamlEditor from '@/pages/_components/yaml-editor';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Button, Form } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import APIKeys from './api-keys';
 import ProxyConfig from './proxy-config';
 
+const referLink = `https://higress.cn/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.3562eb7c.0.0.31764f5f7uLs2F#%E6%8F%90%E4%BE%9B%E5%95%86%E7%89%B9%E6%9C%89%E9%85%8D%E7%BD%AE`;
+
 const AdvanceConfig: React.FC<{
   action: PageActionType;
   ref?: any;
@@ -45,7 +48,18 @@ const AdvanceConfig: React.FC<{
       </Form.Item>
       <YamlEditor
         ref={editorRef}
-        title={`${intl.formatMessage({ id: 'providers.form.customConfig' })} (YAML)`}
+        title={
+          <span className="flex-center">
+            <span>{`${intl.formatMessage({ id: 'providers.form.customConfig' })} YAML`}</span>
+            <Button size="small" type="link" target="_blank" href={referLink}>
+              {intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}{' '}
+              <IconFont
+                type="icon-external-link"
+                className="font-size-14"
+              ></IconFont>
+            </Button>
+          </span>
+        }
         value={fileContent}
         height={300}
         onUpload={(content) => {

src/pages/maas-provider/forms/basic.tsx

@@ -21,6 +21,13 @@ const Basic = () => {
     );
   };
 
+  const filterOption = (input: string, option?: any) => {
+    return (
+      option?.label?.toLowerCase().includes(input.toLowerCase()) ||
+      option?.value?.toLowerCase().includes(input.toLowerCase())
+    );
+  };
+
   return (
     <>
       <Form.Item<FormData> name="name" data-field="name">
@@ -38,19 +45,21 @@ const Basic = () => {
             required: true,
             message: getRuleMessage(
               'select',
-              intl.formatMessage({ id: 'providers.table.providerName' })
+              intl.formatMessage({ id: 'common.table.type' })
             )
           }
         ]}
       >
         <SealSelect
-          showSearch
+          showSearch={{
+            filterOption: filterOption
+          }}
           required
           options={maasProviderOptions}
           optionRender={optionRender}
           labelRender={optionRender}
           label={intl.formatMessage({
-            id: 'providers.table.providerName'
+            id: 'common.table.type'
           })}
         />
       </Form.Item>

src/pages/maas-provider/forms/model-item.tsx

@@ -1,3 +1,4 @@
+import AutoComplete from '@/components/seal-form/auto-complete';
 import SealSelect from '@/components/seal-form/seal-select';
 import { categoryOptions } from '@/pages/llmodels/config';
 import {
@@ -28,7 +29,8 @@ const SelectWrapper = styled.div`
 interface ModelItemProps {
   onOpenChange: (open: boolean) => void;
   onChange: (data: ProviderModel) => void;
-  providerModelList: ProviderModel[];
+  providerModelList: Global.BaseOption<string>[];
+  selectedModelList: ProviderModel[];
   item: ProviderModel;
   loading?: boolean;
 }
@@ -38,6 +40,7 @@ const ModelItem: React.FC<ModelItemProps> = ({
   onChange,
   loading,
   providerModelList,
+  selectedModelList,
   item
 }) => {
   const intl = useIntl();
@@ -96,20 +99,30 @@ const ModelItem: React.FC<ModelItemProps> = ({
     return null;
   };
 
+  // filter out already selected models, but keep the current one
+  const selectedModelMap = new Map(
+    selectedModelList?.map((model) => [model.name, true])
+  );
+  const filteredOptions = () => {
+    return providerModelList.filter((model) => {
+      return model.value === item.name || !selectedModelMap.has(model.value);
+    });
+  };
+
   return (
     <SelectWrapper>
-      <SealSelect
+      <AutoComplete
         loading={loading}
         showSearch
         onOpenChange={onOpenChange}
         suffixIcon={renderSuffixIcon()}
-        alwaysFocus={true}
         value={item.name}
         onChange={handleOnChange}
-        options={providerModelList}
+        options={filteredOptions()}
+        placeholder={intl.formatMessage({ id: 'providers.table.models' })}
       />
       <SealSelect
-        value={item.category}
+        value={item.category || undefined}
         onChange={handleOnCategoryChange}
         options={categoryOptions}
         placeholder={intl.formatMessage({

src/pages/maas-provider/forms/supported-models.tsx

@@ -71,6 +71,7 @@ const SupportedModels = () => {
           {(item, index) => (
             <ModelItem
               key={index}
+              selectedModelList={modelList}
               onOpenChange={handleOpenChange}
               onChange={(data) => onChange(data, index)}
               loading={loading}

src/pages/model-routes/components/route-targets.tsx

@@ -33,11 +33,6 @@ interface TargetItemProps {
 }
 
 export const childActionList = [
-  // {
-  //   key: 'fallback',
-  //   label: 'routes.table.setAsFallback',
-  //   icon: <IconFont type="icon-shield" />
-  // },
   {
     key: 'delete',
     label: 'common.button.delete',