fix: backend selection

src/pages/backends/components/add-modal.tsx

@@ -11,6 +11,7 @@ import React, { useEffect, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 import ColumnWrapper from '../../_components/column-wrapper';
 import {
+  BackendSourceValueMap,
   builtInBackendFields,
   customBackendFields,
   json2Yaml
@@ -55,7 +56,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     'image_name',
     'run_command',
     'custom_framework',
-    'entrypoint'
+    'entrypoint',
+    'environment'
   ];
 
   // remove '-custom' suffix from version_no in currentData, when action is EDIT
@@ -64,7 +66,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     data.version_configs = Object.entries(data.version_configs || {}).reduce(
       (acc, [key, value]) => {
         const version = key.replace(/-custom$/, '');
-        acc[version] = { ...value };
+        acc[version] = { ...value, backend_source: data.backend_source };
         return acc;
       },
       {} as any
@@ -128,7 +130,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         is_default: key === values.default_version,
         built_in_frameworks:
           values.built_in_version_configs?.[key]?.built_in_frameworks || [],
-        is_built_in: true,
+        is_built_in:
+          data.is_built_in &&
+          data.backend_source === BackendSourceValueMap.BUILTIN,
         ..._.pick(values.built_in_version_configs?.[key], [
           'image_name',
           'run_command',

src/pages/backends/components/backend-card.tsx

@@ -5,7 +5,7 @@ import TagWrapper from '@/components/tags-wrapper';
 import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import Card from '@/components/templates/card';
 import { useIntl } from '@umijs/max';
-import { Button, Tag } from 'antd';
+import { Button, Flex, Tag, Tooltip } from 'antd';
 import _ from 'lodash';
 import { useMemo } from 'react';
 import semverCoerce from 'semver/functions/coerce';
@@ -18,7 +18,8 @@ import {
   builtInBackendLogos,
   customColors,
   customIcons,
-  getGpuColor
+  getGpuColor,
+  TagColorMap
 } from '../config';
 import { ListItem } from '../config/types';
 
@@ -142,12 +143,6 @@ interface BackendCardProps {
   data: ListItem;
 }
 
-const TagColorMap: Record<string, string> = {
-  [BackendSourceValueMap.CUSTOM]: 'purple',
-  [BackendSourceValueMap.BUILTIN]: 'geekblue',
-  [BackendSourceValueMap.COMMUNITY]: 'cyan'
-};
-
 const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
   const intl = useIntl();
 
@@ -254,22 +249,65 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
   };
 
   const renderRecommendModels = () => {
-    const recommnadedModels = data.recommend_models || [];
-    if (recommnadedModels.length === 0) {
+    const recommendedModels = data.recommend_models || [];
+    if (recommendedModels.length === 0) {
       return null;
     }
     return (
       <div className="flex-center">
         <span className="dot"></span>
-        <TagWrapper
-          gap={8}
-          dataList={recommnadedModels}
-          renderTag={renderModel}
-        ></TagWrapper>
+        <Tooltip
+          title={
+            <Flex gap={4} wrap="wrap">
+              {recommendedModels.map((item) => (
+                <Tag style={{ margin: 0 }} key={item}>
+                  {item}
+                </Tag>
+              ))}
+            </Flex>
+          }
+        >
+          <span>
+            <ThemeTag color="default">
+              {intl.formatMessage({ id: 'backend.recommendModels' })}
+            </ThemeTag>
+          </span>
+        </Tooltip>
       </div>
     );
   };
 
+  const renderSource = () => {
+    const source = data.is_built_in
+      ? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN] || ''
+      : BackendSourceLabelMap[data.backend_source] || '';
+    if (!source) {
+      return null;
+    }
+    return (
+      <ThemeTag
+        color={
+          TagColorMap[
+            data.is_built_in
+              ? BackendSourceValueMap.BUILTIN
+              : data.backend_source
+          ]
+        }
+        className="font-400"
+        variant="outlined"
+        style={{
+          borderRadius: 'var(--ant-border-radius)',
+          margin: 0,
+          width: 'max-content'
+        }}
+      >
+        {intl.formatMessage({
+          id: source
+        })}
+      </ThemeTag>
+    );
+  };
+
   return (
     <StyledCard
       onClick={handleClick}
@@ -308,28 +346,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
               <IconFont type="icon-source" className="icon" />
               <span>Source:</span>
             </span>
-            <ThemeTag
-              color={
-                TagColorMap[
-                  data.is_built_in
-                    ? BackendSourceValueMap.BUILTIN
-                    : data.backend_source
-                ]
-              }
-              className="font-400"
-              variant="outlined"
-              style={{
-                borderRadius: 'var(--ant-border-radius)',
-                margin: 0,
-                width: 'max-content'
-              }}
-            >
-              {intl.formatMessage({
-                id: data.is_built_in
-                  ? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN]
-                  : BackendSourceLabelMap[data.backend_source]
-              })}
-            </ThemeTag>
+            {renderSource()}
             {data.backend_source === BackendSourceValueMap.COMMUNITY && (
               <>
                 <ThemeTag
@@ -349,7 +366,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
               </>
             )}
           </InfoItem>
-          {/* {renderRecommendModels()} */}
+          {renderRecommendModels()}
         </SourceWrapper>
         {renderFrameworks()}
       </Content>

src/pages/backends/components/version-info-modal.tsx

@@ -2,7 +2,9 @@ import ScrollerModal from '@/components/scroller-modal';
 import { PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
+import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import { BackendSourceValueMap } from '../config';
 import { VersionListItem } from '../config/types';
 import VersionInfo from '../forms/version-info';
 
@@ -26,10 +28,11 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
     if (open && currentData) {
       // add is_built_in field to built_in_version_configs
       const builtInVersions = currentData.built_in_version_configs || {};
-
       for (const key in builtInVersions) {
         if (builtInVersions?.hasOwnProperty(key)) {
-          builtInVersions[key].is_built_in = true;
+          builtInVersions[key].is_built_in =
+            currentData.backend_source === BackendSourceValueMap.BUILTIN &&
+            currentData.is_built_in;
         }
       }
 
@@ -41,9 +44,13 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
       const versionList: VersionListItem[] = Object.entries(versions).map(
         ([key, value]: [string, any]) => ({
           version_no: key,
-          image_name: value.image_name,
-          run_command: value.run_command,
-          entrypoint: value.entrypoint,
+          ..._.pick(value, [
+            'image_name',
+            'run_command',
+            'entrypoint',
+            'environment',
+            'backend_source'
+          ]),
           is_default: key === currentData.default_version,
           availableFrameworks: [
             ...(value.built_in_frameworks || []),