fix(web): ui upgrade

web/src/views/ApplicationConfig/components/AiPromptModal.tsx

@@ -19,7 +19,7 @@ import copy from 'copy-to-clipboard';
 import { updatePromptMessages, createPromptSessions } from '@/api/prompt'
 import type { AiPromptModalRef, AiPromptVariableModalRef, AiPromptForm } from '../types'
 import RbModal from '@/components/RbModal'
-import type { ModelListItem } from '@/views/ModelManagement/types'
+import type { Model } from '@/views/ModelManagement/types'
 import ChatContent from '@/components/Chat/ChatContent'
 import Empty from '@/components/Empty'
 import ConversationEmptyIcon from '@/assets/images/conversation/conversationEmpty.svg'
@@ -37,7 +37,7 @@ interface AiPromptModalProps {
   /** Callback to refresh prompt with optimized value */
   refresh: (value: string) => void;
   /** Default model to pre-select */
-  defaultModel?: ModelListItem | null;
+  defaultModel?: Model | null;
   source?: 'application' | 'skills'
 }
 

web/src/views/ApplicationConfig/components/ModelConfigModal.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:28:07 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 10:59:20
+ * @Last Modified time: 2026-03-25 11:28:02
  */
 /**
  * Model Configuration Modal
@@ -11,13 +11,14 @@
  */
 
 import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
-import { Form, Select } from 'antd';
+import { Form, type SelectProps } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 import type { ModelConfig, ModelConfigModalRef, Config, Source } from '../types'
-import type { ModelListItem } from '@/views/ModelManagement/types'
+import type { Model } from '@/views/ModelManagement/types'
 import RbModal from '@/components/RbModal'
 import RbSlider from '@/components/RbSlider'
+import ModelSelect from '@/components/ModelSelect'
 
 const FormItem = Form.Item;
 
@@ -25,8 +26,6 @@ const FormItem = Form.Item;
  * Component props
  */
 interface ModelConfigModalProps {
-  /** List of available models */
-  modelList?: ModelListItem[];
   /** Callback to update model configuration */
   refresh: (values: ModelConfig, type: Source) => void;
   /** Application configuration data */
@@ -51,7 +50,6 @@ const configFields = [
 const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(({
   refresh,
   data,
-  modelList = []
 }, ref) => {
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
@@ -102,11 +100,11 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
       });
   }
   /** Handle model selection change */
-  const handleChange = (_value: string, option: ModelListItem | ModelListItem[] | undefined) => {
+  const handleChange: SelectProps['onChange'] = (_value, option) => {
     if (source === 'chat') {
-      form.setFieldValue('label', (option as ModelListItem).name)
+      form.setFieldValue('label', (option as Model).name)
     } else {
-      form.setFieldValue('capability', (option as ModelListItem).capability)
+      form.setFieldValue('capability', (option as Model).capability)
     }
   }
 
@@ -140,13 +138,8 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
           hidden={source === 'multi_agent'}
         >
           {source !== 'multi_agent' &&
-            <Select
+            <ModelSelect
               placeholder={t('common.pleaseSelect')}
-              fieldNames={{
-                label: 'name',
-                value: 'id',
-              }}
-              options={modelList}
               onChange={handleChange}
             />
           }

web/src/views/ApplicationConfig/components/Skill/SkillListModal.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-05 10:45:08 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 16:59:57
+ * @Last Modified time: 2026-03-25 11:09:01
  */
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { List, Flex, Tooltip, Form } from 'antd';
@@ -169,6 +169,7 @@ const SkillListModal = forwardRef<SkillModalRef, SkillModalProps>(({
               <SearchInput
                 placeholder={t('skills.searchPlaceholder')}
                 className="rb:w-full!"
+                variant="outlined"
               />
             </Form.Item>
           </Form>
@@ -181,9 +182,9 @@ const SkillListModal = forwardRef<SkillModalRef, SkillModalProps>(({
               renderItem={(item: Skill) => (
                 <List.Item>
                   {/* Skill card with selection state styling */}
-                  <div key={item.id} className={clsx("rb:border rb:rounded-lg rb:p-[17px_16px] rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
-                    "rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF] rb:text-[#155EEF]": selectedIds.includes(item.id),
-                    "rb:border-[#DFE4ED] rb:text-[#212332]": !selectedIds.includes(item.id),
+                  <div key={item.id} className={clsx("rb:border rb:rounded-lg rb:p-[17px_16px] rb:cursor-pointer rb:hover:bg-[#F6F6F6]", {
+                    "rb:border-[#171719]": selectedIds.includes(item.id),
+                    "rb-border": !selectedIds.includes(item.id),
                   })} onClick={() => handleSelect(item)}>
                     {/* Skill name and description */}
                     <div className="rb:flex-1 rb:max-w-[calc(100%-60px)]">
@@ -194,7 +195,7 @@ const SkillListModal = forwardRef<SkillModalRef, SkillModalProps>(({
                       </Tooltip>
                       
                       {/* Skill description with tooltip */}
-                      <Tooltip title={item.description}>
+                      <Tooltip title={item.description} placement="topLeft">
                         <div className="rb:h-10 rb:leading-5 rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
                       </Tooltip>
                     </div>