fix(web): ui upgrade

2026-03-25 13:58:25 +08:00
parent 9df41456f6
commit 2b9fd33bc8
42 changed files with 223 additions and 191 deletions
--- a/web/src/views/ApplicationConfig/Agent.tsx
+++ b/web/src/views/ApplicationConfig/Agent.tsx
@@ -2,9 +2,9 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:21 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 15:27:30
+ * @Last Modified time: 2026-03-25 11:34:04
 */
-import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom';
 import { Row, Col, Space, Form, Input, Button, App, Spin, Flex } from 'antd'
@@ -27,7 +27,7 @@ import type {
 } from './types'
 import type { Variable } from './components/VariableList/types'
 import type { KnowledgeConfig } from './components/Knowledge/types'
-import type { ModelListItem } from '@/views/ModelManagement/types'
+import type { Model } from '@/views/ModelManagement/types'
 import { getModelList } from '@/api/models';
 import { saveAgentConfig } from '@/api/application'
 import Knowledge from './components/Knowledge/Knowledge'
@@ -43,6 +43,7 @@ import type { Skill } from '@/views/Skills/types'
 import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 import DescWrapper from '@/components/FormItem/DescWrapper'
 import FeaturesConfig from './components/FeaturesConfig'
+import { getListLogoUrl } from '@/views/ModelManagement/utils';

 /**
 * Agent configuration component
@@ -56,8 +57,8 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState<Config | null>(null);
  const modelConfigModalRef = useRef<ModelConfigModalRef>(null)
-  const [modelList, setModelList] = useState<ModelListItem[]>([])
-  const [defaultModel, setDefaultModel] = useState<ModelListItem | null>(null)
+  const [modelList, setModelList] = useState<Model[]>([])
+  const [defaultModel, setDefaultModel] = useState<Model | null>(null)
  const [chatList, setChatList] = useState<ChatData[]>([])
  const values = Form.useWatch<Config>([], form) 
  const [isSave, setIsSave] = useState(false)
@@ -260,7 +261,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
  const getModels = () => {
    getModelList({ type: 'llm,chat', pagesize: 100, page: 1, is_active: true })
      .then(res => {
-        const response = res as { items: ModelListItem[] }
+        const response = res as { items: Model[] }
        setModelList(response.items)
      })
  }
@@ -273,7 +274,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
  useEffect(() => {
    if (values?.default_model_config_id && modelList.length > 0) {
      const filterValue = modelList.find(item => item.id === values.default_model_config_id)
-      setDefaultModel(filterValue as ModelListItem | null)
+      setDefaultModel(filterValue as Model | null)
      setChatList([{
        label: filterValue?.name || '',
        model_config_id: filterValue?.id || '',
@@ -343,7 +344,10 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
  const handleSaveFeaturesConfig = (value: FeaturesConfigForm) => {
    form.setFieldValue('features', value)
  }
-  console.log('values', values)
+  const modelLogo = useMemo(() => {
+    return defaultModel?.name && getListLogoUrl(defaultModel.provider, defaultModel.logo as string)
+  }, [defaultModel])
+  console.log('values', values, defaultModel)
  return (
    <>
      {loading && <Spin fullscreen></Spin>}
@@ -353,7 +357,10 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
            <Flex gap={16} vertical>
              <Flex align="center" justify="space-between" className="rb:p-3! rb:bg-white rb:rounded-xl">
                <Button type="primary" ghost onClick={handleModelConfig} className="rb:group">
-                  {defaultModel?.name ? <div className="rb:size-4 rb:bg-[url('@/assets/images/application/model.svg')]"></div> : null}
+                  {modelLogo
+                    ? <img src={modelLogo} className="rb:size-4 rb:rounded-md" alt="" />
+                    : defaultModel?.name
+                    ? <div className="rb:size-4 rb:bg-[url('@/assets/images/application/model.svg')]"></div> : null}
                  {defaultModel?.name || t('application.chooseModel')}
                </Button>
                <Space size={12}>
@@ -475,7 +482,6 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
      </Row>

      <ModelConfigModal
-        modelList={modelList}
        data={values}
        ref={modelConfigModalRef}
        refresh={refresh}
--- a/web/src/views/ApplicationConfig/Api.tsx
+++ b/web/src/views/ApplicationConfig/Api.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:29 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-03 19:05:23
+ * @Last Modified time: 2026-03-25 11:18:09
 */
 import { type FC, useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
@@ -127,10 +127,10 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
    <div className="rb:w-250 rb:mx-auto">
      <Flex gap={20} vertical>
        <RbCard 
-          title={<Flex align="center">
+          title={() => (<Flex align="center">
            {t('application.endpointConfiguration')}
            <span className="rb:text-[#5B6167] rb:text-[12px]">({t('application.endpointConfigurationSubTitle')})</span>
-          </Flex>}
+          </Flex>)}
          headerType="borderless"
          headerClassName="rb:min-h-13.5!"
        >
@@ -157,10 +157,10 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
          </Flex>
        </RbCard>
        <RbCard
-          title={<Flex align="center">
+          title={() => (<Flex align="center">
            {t('application.apiKeys')}
            <span className="rb:text-[#5B6167] rb:text-[12px]">({t('application.apiKeySubTitle')})</span>
-          </Flex>}
+          </Flex>)}
          extra={
            <Button style={{padding: '0 8px', height: '24px'}} onClick={handleAdd}>+ {t('application.addApiKey')}</Button>
          }
--- a/web/src/views/ApplicationConfig/components/AiPromptModal.tsx
+++ b/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'
 }

--- a/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
+++ b/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}
            />
          }
--- a/web/src/views/ApplicationConfig/components/Skill/SkillListModal.tsx
+++ b/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>