chore: sharegpt description

.eslintrc.js

@@ -9,7 +9,8 @@ module.exports = {
   },
   globals: {
     Global: 'readonly',
-    React: 'readonly'
+    React: 'readonly',
+    JSX: 'readonly'
   },
   ignorePatterns: ['public/static/']
 };

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ on:
       - 'v*-dev'
 
 env:
-  NODE_VERSION: '21'
+  NODE_VERSION: '22'
 
 jobs:
   deps:
@@ -32,7 +32,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '${{ env.NODE_VERSION }}'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
       - name: Deps
         run: scripts/deps

.lintstagedrc

@@ -5,6 +5,7 @@
     "max lint --fix --stylelint-only",
     "prettier --cache --write"
   ],
+  "!public/vs/**": [],
   "*.ts?(x)": [
     "max lint --fix --eslint-only",
     "prettier --cache --parser=typescript --write"

.nvmrc

@@ -0,0 +1 @@
+22

config/config.ts

@@ -4,7 +4,6 @@ import { compressionPluginConfig, monacoPluginConfig } from './plugins';
 import proxy from './proxy';
 import routes from './routes';
 import { getBranchInfo } from './utils';
-const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
 const versionInfo = getBranchInfo();
 process.env.VERSION = JSON.stringify(versionInfo);
@@ -30,7 +29,7 @@ export default defineConfig({
     defaultSizes: 'parsed' // stat  // gzip
   },
   mfsu: {
-    exclude: ['lodash', 'ml-pca', 'monaco-editor']
+    exclude: ['lodash', 'ml-pca']
   },
   base: process.env.npm_config_base || '/',
   ...(isProduction
@@ -79,6 +78,9 @@ export default defineConfig({
   model: {},
   initialState: {},
   request: {},
+  routePrefetch: {
+    defaultPrefetch: 'intent'
+  },
   keepalive: keepAlive,
   locale: {
     antd: true,

config/plugins.ts

@@ -13,7 +13,7 @@ export function monacoPluginConfig(config: any) {
             entry: 'monaco-yaml',
             worker: {
               id: 'monaco-yaml/yamlWorker',
-              entry: 'monaco-yaml/yaml.worker'
+              entry: 'monaco-yaml/yaml.worker.js'
             }
           }
         ]

config/proxy.ts

@@ -6,7 +6,8 @@ const proxyTableList = [
   'v1-openai',
   'version',
   'proxy',
-  'update'
+  'update',
+  'grafana'
 ];
 
 // @ts-ingore

config/routes.ts

@@ -105,6 +105,27 @@ export default [
         access: 'canSeeAdmin',
         component: './llmodels/index'
       },
+      {
+        name: 'routes',
+        path: '/models/routes',
+        key: 'routes',
+        icon: 'icon-captive_portal',
+        selectedIcon: 'icon-captive_portal',
+        defaultIcon: 'icon-captive_portal',
+        access: 'canSeeAdmin',
+        component: './model-routes/index'
+      },
+      {
+        name: 'providers',
+        path: '/models/providers',
+        key: 'modelProviders',
+        icon: 'icon-extension-outline',
+        selectedIcon: 'icon-extension-filled',
+        defaultIcon: 'icon-extension-outline',
+        access: 'canSeeAdmin',
+        component: './maas-provider/index'
+      },
+
       {
         name: 'userModels',
         path: '/models/user-models',
@@ -114,6 +135,27 @@ export default [
         defaultIcon: 'icon-models',
         access: 'canSeeUser',
         component: './llmodels/user-models'
+      },
+      {
+        name: 'benchmark',
+        path: '/models/benchmark',
+        key: 'benchmark',
+        icon: 'icon-speed',
+        selectedIcon: 'icon-speed-filled',
+        defaultIcon: 'icon-speed',
+        access: 'canSeeAdmin',
+        component: './benchmark/index'
+      },
+      {
+        name: 'benchmarkDetail',
+        path: '/models/benchmark/detail',
+        key: 'benchmarkDetail',
+        icon: 'icon-speed',
+        selectedIcon: 'icon-speed-filled',
+        defaultIcon: 'icon-speed',
+        access: 'canSeeAdmin',
+        hideInMenu: true,
+        component: './benchmark/details'
       }
     ]
   },
@@ -199,16 +241,6 @@ export default [
         hideInMenu: true,
         component: './cluster-management/cluster-detail'
       },
-      {
-        name: 'clusterCreate',
-        path: '/cluster-management/clusters/create',
-        key: 'clusterCreate',
-        icon: 'icon-cluster2-outline',
-        selectedIcon: 'icon-cluster2-filled',
-        defaultIcon: 'icon-cluster2-outline',
-        hideInMenu: true,
-        component: './cluster-management/cluster-create'
-      },
       {
         name: 'credentials',
         path: '/cluster-management/credentials',

package.json

@@ -16,8 +16,8 @@
     "immer": "^9.0.6"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.5.1",
-    "@ant-design/pro-components": "^2.7.19",
+    "@ant-design/icons": "^6.1.0",
+    "@ant-design/pro-components": "3.1.0-0",
     "@braintree/sanitize-url": "^7.1.1",
     "@huggingface/gguf": "^0.1.7",
     "@huggingface/hub": "^0.15.1",
@@ -26,12 +26,12 @@
     "@orcid/bibtex-parse-js": "^0.0.25",
     "@react-hook/resize-observer": "^2.0.2",
     "@types/lodash": "^4.17.4",
-    "@umijs/max": "^4.2.11",
+    "@umijs/max": "^4.6.15",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "ahooks": "^3.8.5",
     "ansi-to-html": "^0.7.2",
-    "antd": "^5.25.4",
+    "antd": "^6.1.2",
     "antd-style": "^3.6.2",
     "axios": "^1.8.2",
     "classnames": "^2.5.1",
@@ -55,12 +55,11 @@
     "lodash": "^4.17.21",
     "mammoth": "^1.8.0",
     "marked": "^14.1.0",
-    "minimatch": "^10.0.3",
+    "minimatch": "^3.1.2",
     "ml-dataset-iris": "^1.2.1",
     "ml-pca": "^4.1.1",
-    "monaco-editor": "^0.53.0",
-    "monaco-editor-webpack-plugin": "^7.1.0",
-    "monaco-yaml": "^5.4.0",
+    "monaco-editor": "^0.30.1",
+    "monaco-yaml": "^4.0.0",
     "numeral": "^2.0.6",
     "overlayscrollbars": "^2.10.0",
     "overlayscrollbars-react": "^0.5.6",
@@ -78,6 +77,7 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
+    "semver": "^7.7.3",
     "simplebar-react": "^3.2.6",
     "styled-components": "^6.1.15",
     "tinycolor2": "^1.6.0",
@@ -86,8 +86,10 @@
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
+    "@types/node": "^25.0.3",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
+    "@types/semver": "^7.7.1",
     "@umijs/case-sensitive-paths-webpack-plugin": "^1.0.1",
     "@umijs/plugins": "^4.4.11",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -102,6 +104,7 @@
     "less-loader": "^12.2.0",
     "lint-staged": "^15.2.2",
     "mini-css-extract-plugin": "^2.9.0",
+    "monaco-editor-webpack-plugin": "^4.2.0",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.5.0",

src/app.tsx

@@ -7,6 +7,7 @@ import {
   queryVersionInfo,
   updateCheck
 } from '@/services/profile/apis';
+import { fetchSystemConfig } from '@/services/system/query-system-config';
 import { isOnline } from '@/utils';
 import {
   IS_FIRST_LOGIN,
@@ -57,6 +58,7 @@ export async function getInitialState(): Promise<{
       });
       if (data.is_admin) {
         getUpdateCheck();
+        fetchSystemConfig();
       }
       return data;
     } catch (error: any) {
@@ -79,10 +81,15 @@ export async function getInitialState(): Promise<{
   const getAppVersionInfo = async () => {
     try {
       const data = await queryVersionInfo();
-      const isProduction = data.version?.indexOf('0.0.0') === -1;
+
+      const isDev = data.version?.indexOf('0.0.0') > -1;
+      const isRc = data.version?.indexOf('rc') > -1;
+
       setAtomStorage(GPUStackVersionAtom, {
         ...data,
-        isProduction
+        isProd: !isDev && !isRc,
+        isDev,
+        isRc
       });
     } catch (error) {
       console.error('queryVersionInfo error', error);

src/assets/providers-logo/ai360.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AI360</title><path clip-rule="evenodd" d="M12 0h.018c1.473-.002 2.88.261 4.179.754C20.755 2.456 24 6.85 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm8.604 18.967A11.024 11.024 0 0023.07 12c0-1.717-.39-3.344-1.089-4.794a2.59 2.59 0 01-3.214.62 6.278 6.278 0 01-1.333-.992C16.283 5.73 15.109 4.66 13.696 3.9c-3.211-1.729-6.825-1.501-9.695.447A11.033 11.033 0 00.93 12c0 1.663.367 3.241 1.024 4.657.75-.973 2.131-1.346 3.232-.71.667.384 1.257.92 1.837 1.447l.176.16c1.365 1.234 2.794 2.355 4.558 2.965 3.053 1.053 6.356.437 8.847-1.552z" fill="url(#lobe-icons-ai-360-fill-0)" fill-rule="evenodd"></path><path d="M5.643 10.312c-.83.11-1.401.766-1.408 1.618a1.715 1.715 0 001.45 1.72c.805.128 1.64-.426 1.87-1.26.046-.167.076-.338.106-.51.025-.14.05-.282.084-.42.318-1.317 1.237-1.95 2.788-1.93 1.086.013 1.318.271 1.68 1.855.017.076.043.151.07.226.26.714.976 1.17 1.67 1.065a1.647 1.647 0 001.38-1.438c.083-.729-.348-1.264-1.122-1.575-.34-.136-.664-.158-.995-.141-.726.037-1.121-.36-1.339-.977a3.359 3.359 0 01-.134-.65c-.014-.093-.027-.186-.043-.278-.156-.887-.835-1.51-1.669-1.532-.791-.02-1.464.551-1.665 1.418l-.06.27-.025.117c-.355 1.636-.974 2.205-2.638 2.422z" fill="url(#lobe-icons-ai-360-fill-1)"></path><path d="M18.059 13.644c.989-.206 1.577-.838 1.592-1.697.015-.83-.624-1.582-1.46-1.724-.77-.13-1.599.383-1.844 1.18-.069.22-.117.448-.165.676-.06.29-.122.58-.225.854-.367.986-1.593 1.546-2.926 1.394-.824-.095-1.106-.446-1.342-1.674-.18-.938-.864-1.535-1.681-1.467-.85.07-1.515.829-1.468 1.673.05.892.678 1.44 1.705 1.489 1.375.064 1.75.396 1.926 1.787.067.531.267.967.685 1.288 1.02.783 2.407.208 2.66-1.108l.022-.114c.152-.796.3-1.577 1.04-2.101.36-.255.761-.326 1.166-.397.105-.019.21-.037.315-.06z" fill="url(#lobe-icons-ai-360-fill-2)"></path><path d="M13.83 7.961a.755.755 0 11-1.51 0 .755.755 0 011.51 0z" fill="url(#lobe-icons-ai-360-fill-3)"></path><path d="M10.809 16.678a.755.755 0 100-1.511.755.755 0 000 1.51z" fill="url(#lobe-icons-ai-360-fill-4)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai-360-fill-0" x1="12" x2="12" y1="0" y2="24"><stop stop-color="#12B7FA"></stop><stop offset="1" stop-color="#006ffb"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai-360-fill-1" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai-360-fill-2" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai-360-fill-3" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai-360-fill-4" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient></defs></svg>

src/assets/providers-logo/azureai.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AzureAI</title><path clip-rule="evenodd" d="M16.233 0c.713 0 1.345.551 1.572 1.329.227.778 1.555 5.59 1.555 5.59v9.562h-4.813L14.645 0h1.588z" fill="url(#lobe-icons-azure-ai-fill-0)" fill-rule="evenodd"></path><path d="M23.298 7.47c0-.34-.275-.6-.6-.6h-2.835a3.617 3.617 0 00-3.614 3.615v5.996h3.436a3.617 3.617 0 003.613-3.614V7.47z" fill="url(#lobe-icons-azure-ai-fill-1)"></path><path clip-rule="evenodd" d="M16.233 0a.982.982 0 00-.989.989l-.097 18.198A4.814 4.814 0 0110.334 24H1.6a.597.597 0 01-.567-.794l7-19.981A4.819 4.819 0 0112.57 0h3.679-.016z" fill="url(#lobe-icons-azure-ai-fill-2)" fill-rule="evenodd"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-azure-ai-fill-0" x1="18.242" x2="14.191" y1="16.837" y2=".616"><stop stop-color="#712575"></stop><stop offset=".09" stop-color="#9A2884"></stop><stop offset=".18" stop-color="#BF2C92"></stop><stop offset=".27" stop-color="#DA2E9C"></stop><stop offset=".34" stop-color="#EB30A2"></stop><stop offset=".4" stop-color="#F131A5"></stop><stop offset=".5" stop-color="#EC30A3"></stop><stop offset=".61" stop-color="#DF2F9E"></stop><stop offset=".72" stop-color="#C92D96"></stop><stop offset=".83" stop-color="#AA2A8A"></stop><stop offset=".95" stop-color="#83267C"></stop><stop offset="1" stop-color="#712575"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-azure-ai-fill-1" x1="19.782" x2="19.782" y1=".34" y2="23.222"><stop stop-color="#DA7ED0"></stop><stop offset=".08" stop-color="#B17BD5"></stop><stop offset=".19" stop-color="#8778DB"></stop><stop offset=".3" stop-color="#6276E1"></stop><stop offset=".41" stop-color="#4574E5"></stop><stop offset=".54" stop-color="#2E72E8"></stop><stop offset=".67" stop-color="#1D71EB"></stop><stop offset=".81" stop-color="#1471EC"></stop><stop offset="1" stop-color="#1171ED"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-azure-ai-fill-2" x1="18.404" x2="3.236" y1=".859" y2="25.183"><stop stop-color="#DA7ED0"></stop><stop offset=".05" stop-color="#B77BD4"></stop><stop offset=".11" stop-color="#9079DA"></stop><stop offset=".18" stop-color="#6E77DF"></stop><stop offset=".25" stop-color="#5175E3"></stop><stop offset=".33" stop-color="#3973E7"></stop><stop offset=".42" stop-color="#2772E9"></stop><stop offset=".54" stop-color="#1A71EB"></stop><stop offset=".68" stop-color="#1371EC"></stop><stop offset="1" stop-color="#1171ED"></stop></linearGradient></defs></svg>

src/assets/providers-logo/baichuan.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Baichuan</title><defs><linearGradient id="lobe-icons-baichuan-fill" x1="17.764%" x2="100%" y1="8.678%" y2="91.322%"><stop offset="0%" stop-color="#FEC13E"></stop><stop offset="100%" stop-color="#FF6933"></stop></linearGradient></defs><path d="M7.333 2h-3.2l-2 4.333V17.8L0 22h5.2l2.028-4.2L7.333 2zm7.334 0h-5.2v20h5.2V2zM16.8 7.733H22V22h-5.2V7.733zM22 2h-5.2v4.133H22V2z" fill="url(#lobe-icons-baichuan-fill)" fill-rule="nonzero"></path></svg>

src/assets/providers-logo/baiducloud.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>BaiduCloud</title><path d="M21.715 5.61l-3.983 2.31a.903.903 0 01-.896 0L12.44 5.384a.903.903 0 00-.897 0L7.156 7.92a.903.903 0 01-.896 0L2.276 5.617 12.002 0l9.713 5.61z" fill="#5BCA87"></path><path d="M18.641 9.467a.89.89 0 00-.438.77v5.072a.896.896 0 01-.445.77l-4.428 2.51a.884.884 0 00-.445.777v4.607l4.429-2.536 5.31-3.047V7.157l-3.983 2.31z" fill="#EC5D3E"></path><path d="M10.98 18.941a.936.936 0 00-.305-.352l-4.429-2.516a.903.903 0 01-.431-.764v-5.078a.89.89 0 00-.452-.757l-.451-.26L1.38 7.158V18.39l5.311 3.047L11.126 24v-4.608a.881.881 0 00-.146-.45z" fill="#2464F5"></path></svg>

src/assets/providers-logo/bedrock.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Bedrock</title><defs><linearGradient id="lobe-icons-bedrock-fill" x1="80%" x2="20%" y1="20%" y2="80%"><stop offset="0%" stop-color="#6350FB"></stop><stop offset="50%" stop-color="#3D8FFF"></stop><stop offset="100%" stop-color="#9AD8F8"></stop></linearGradient></defs><path d="M13.05 15.513h3.08c.214 0 .389.177.389.394v1.82a1.704 1.704 0 011.296 1.661c0 .943-.755 1.708-1.685 1.708-.931 0-1.686-.765-1.686-1.708 0-.807.554-1.484 1.297-1.662v-1.425h-2.69v4.663a.395.395 0 01-.188.338l-2.69 1.641a.385.385 0 01-.405-.002l-4.926-3.086a.395.395 0 01-.185-.336V16.3L2.196 14.87A.395.395 0 012 14.555L2 14.528V9.406c0-.14.073-.27.192-.34l2.465-1.462V4.448c0-.129.062-.249.165-.322l.021-.014L9.77 1.058a.385.385 0 01.407 0l2.69 1.675a.395.395 0 01.185.336V7.6h3.856V5.683a1.704 1.704 0 01-1.296-1.662c0-.943.755-1.708 1.685-1.708.931 0 1.685.765 1.685 1.708 0 .807-.553 1.484-1.296 1.662v2.311a.391.391 0 01-.389.394h-4.245v1.806h6.624a1.69 1.69 0 011.64-1.313c.93 0 1.685.764 1.685 1.707 0 .943-.754 1.708-1.685 1.708a1.69 1.69 0 01-1.64-1.314H13.05v1.937h4.953l.915 1.18a1.66 1.66 0 01.84-.227c.931 0 1.685.764 1.685 1.707 0 .943-.754 1.708-1.685 1.708-.93 0-1.685-.765-1.685-1.708 0-.346.102-.668.276-.937l-.724-.935H13.05v1.806zM9.973 1.856L7.93 3.122V6.09h-.778V3.604L5.435 4.669v2.945l2.11 1.36L9.712 7.61V5.334h.778V7.83c0 .136-.07.263-.184.335L7.963 9.638v2.081l1.422 1.009-.446.646-1.406-.998-1.53 1.005-.423-.66 1.605-1.055v-1.99L5.038 8.29l-2.26 1.34v1.676l1.972-1.189.398.677-2.37 1.429V14.3l2.166 1.258 2.27-1.368.397.677-2.176 1.311V19.3l1.876 1.175 2.365-1.426.398.678-2.017 1.216 1.918 1.201 2.298-1.403v-5.78l-4.758 2.893-.4-.675 5.158-3.136V3.289L9.972 1.856zM16.13 18.47a.913.913 0 00-.908.92c0 .507.406.918.908.918a.913.913 0 00.907-.919.913.913 0 00-.907-.92zm3.63-3.81a.913.913 0 00-.908.92c0 .508.406.92.907.92a.913.913 0 00.908-.92.913.913 0 00-.908-.92zm1.555-4.99a.913.913 0 00-.908.92c0 .507.407.918.908.918a.913.913 0 00.907-.919.913.913 0 00-.907-.92zM17.296 3.1a.913.913 0 00-.907.92c0 .508.406.92.907.92a.913.913 0 00.908-.92.913.913 0 00-.908-.92z" fill="url(#lobe-icons-bedrock-fill)" fill-rule="nonzero"></path></svg>

src/assets/providers-logo/claude.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>

src/assets/providers-logo/cloudflare.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cloudflare</title><path d="M16.493 17.4c.135-.52.08-.983-.161-1.338-.215-.328-.592-.519-1.05-.519l-8.663-.109a.148.148 0 01-.135-.082c-.027-.054-.027-.109-.027-.163.027-.082.108-.164.189-.164l8.744-.11c1.05-.054 2.153-.9 2.556-1.937l.511-1.31c.027-.055.027-.11.027-.164C17.92 8.91 15.66 7 12.942 7c-2.503 0-4.628 1.638-5.381 3.903a2.432 2.432 0 00-1.803-.491c-1.21.109-2.153 1.092-2.287 2.32-.027.328 0 .628.054.9C1.56 13.688 0 15.326 0 17.319c0 .19.027.355.027.545 0 .082.08.137.161.137h15.983c.08 0 .188-.055.215-.164l.107-.437" fill="#F38020"></path><path d="M19.238 11.75h-.242c-.054 0-.108.054-.135.109l-.35 1.2c-.134.52-.08.983.162 1.338.215.328.592.518 1.05.518l1.855.11c.054 0 .108.027.135.082.027.054.027.109.027.163-.027.082-.108.164-.188.164l-1.91.11c-1.05.054-2.153.9-2.557 1.937l-.134.355c-.027.055.026.137.107.137h6.592c.081 0 .162-.055.162-.137.107-.41.188-.846.188-1.31-.027-2.62-2.153-4.777-4.762-4.777" fill="#FCAD32"></path></svg>

src/assets/providers-logo/cohere.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cohere</title><path clip-rule="evenodd" d="M8.128 14.099c.592 0 1.77-.033 3.398-.703 1.897-.781 5.672-2.2 8.395-3.656 1.905-1.018 2.74-2.366 2.74-4.18A4.56 4.56 0 0018.1 1H7.549A6.55 6.55 0 001 7.55c0 3.617 2.745 6.549 7.128 6.549z" fill="#39594D" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M9.912 18.61a4.387 4.387 0 012.705-4.052l3.323-1.38c3.361-1.394 7.06 1.076 7.06 4.715a5.104 5.104 0 01-5.105 5.104l-3.597-.001a4.386 4.386 0 01-4.386-4.387z" fill="#D18EE2" fill-rule="evenodd"></path><path d="M4.776 14.962A3.775 3.775 0 001 18.738v.489a3.776 3.776 0 007.551 0v-.49a3.775 3.775 0 00-3.775-3.775z" fill="#FF7759"></path></svg>

src/assets/providers-logo/coze.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Coze</title><path clip-rule="evenodd" d="M3.908 9.096A8.092 8.092 0 0111.998 1h.006c4.468 0 8.09 3.628 8.09 8.096v3.392h1.942c2.23 0 2.732 3.126.615 3.828l-2.556.85v1.466a1.947 1.947 0 01-2.818 1.742l-1.42-.707c-.067-.03-.149 0-.17.071-1.147 3.587-6.225 3.587-7.373 0a.123.123 0 00-.169-.07l-1.42.706c-1.29.65-2.817-.292-2.817-1.742v-1.466l-2.557-.85c-2.122-.697-1.614-3.828.615-3.828h1.942V9.096zm4.571 2.613a.784.784 0 00-.784.784v1.568a.784.784 0 101.568 0v-1.568a.784.784 0 00-.784-.784zm7.045.779a.784.784 0 100 1.568.784.784 0 000-1.568zm-6.186 3.415a.78.78 0 00.17.254 3.517 3.517 0 004.98 0 .782.782 0 10-1.106-1.107 1.958 1.958 0 01-2.767 0 .78.78 0 00-1.277.254.78.78 0 000 .6z"></path></svg>

src/assets/providers-logo/deepl.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>DeepL</title><path d="M11.563 0c.24 0 .475.065.682.187l8.197 4.756a1.383 1.383 0 01.683 1.197v9.528c0 .495-.26.949-.683 1.196l-4.79 2.78.01-.002-.155.087-.23.133a.69.69 0 00-.3.563v.386l-.16-.683-2.572 1.493a1.35 1.35 0 01-1.366 0l-8.195-4.757A1.384 1.384 0 012 15.668V6.14c0-.482.26-.936.684-1.183l8.195-4.77c.207-.122.443-.187.684-.187zm-1.27 14.023a1.405 1.405 0 00-2.038-.073 1.43 1.43 0 00.984 2.464c.368 0 .722-.144.985-.401a1.428 1.428 0 00.396-1.384l3.674-2.137-.683-.386-3.317 1.917zM9.24 6.164c-.368 0-.72.145-.983.402a1.43 1.43 0 00-.326 1.592c.075.177.187.338.326.47a1.405 1.405 0 002.021-.055l3.745 2.173.013-.009a1.427 1.427 0 00.368 1.48 1.403 1.403 0 001.967 0 1.428 1.428 0 000-2.063 1.403 1.403 0 00-1.986.02l-3.77-2.201a1.427 1.427 0 00-.39-1.407 1.405 1.405 0 00-.985-.402z" fill="#0F2B46"></path><path clip-rule="evenodd" d="M14.978 24v-3.959l-4.781 1.182" fill="#0F2B46" fill-rule="evenodd"></path></svg>

src/assets/providers-logo/deepseek.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>DeepSeek</title><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="#4D6BFE"></path></svg>

src/assets/providers-logo/dify.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Dify</title><path d="M7.043 6.487c1.635 0 2.241-1.003 2.241-2.243S8.681 2 7.044 2C5.405 2 4.801 3.003 4.801 4.244c0 1.24.604 2.243 2.241 2.243z" fill="#03F"></path><path d="M14.883 6.97v1.443h-3.679v3.203h3.68v8.012H8.801V8.41h-8v3.203h4.48v8.012H0v3.203h24v-3.203h-5.6v-8.012H24V8.41h-5.6V5.206H24V2.003h-4.161a4.97 4.97 0 00-4.961 4.967h.005z" fill="#03F"></path></svg>

src/assets/providers-logo/doubao.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Doubao</title><path d="M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z" fill="#1E37FC"></path><path d="M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002z" fill="#37E1BE"></path><path d="M14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z" fill="#A569FF"></path><path d="M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z" fill="#1E37FC"></path></svg>

src/assets/providers-logo/fireworks.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Fireworks</title><path clip-rule="evenodd" d="M14.8 5l-2.801 6.795L9.195 5H7.397l3.072 7.428a1.64 1.64 0 003.038.002L16.598 5H14.8zm1.196 10.352l5.124-5.244-.699-1.669-5.596 5.739a1.664 1.664 0 00-.343 1.807 1.642 1.642 0 001.516 1.012L16 17l8-.02-.699-1.669-7.303.041h-.002zM2.88 10.104l.699-1.669 5.596 5.739c.468.479.603 1.189.343 1.807a1.643 1.643 0 01-1.516 1.012l-8-.018-.002.002.699-1.669 7.303.042-5.122-5.246z" fill="#5019C5" fill-rule="evenodd"></path></svg>

src/assets/providers-logo/gemini.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stop-color="#08B962"></stop><stop offset="1" stop-color="#08B962" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stop-color="#F94543"></stop><stop offset="1" stop-color="#F94543" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stop-color="#FABC12"></stop><stop offset=".46" stop-color="#FABC12" stop-opacity="0"></stop></linearGradient></defs></svg>

src/assets/providers-logo/github.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Github</title><path d="M12 0c6.63 0 12 5.276 12 11.79-.001 5.067-3.29 9.567-8.175 11.187-.6.118-.825-.25-.825-.56 0-.398.015-1.665.015-3.242 0-1.105-.375-1.813-.81-2.181 2.67-.295 5.475-1.297 5.475-5.822 0-1.297-.465-2.344-1.23-3.169.12-.295.54-1.503-.12-3.125 0 0-1.005-.324-3.3 1.209a11.32 11.32 0 00-3-.398c-1.02 0-2.04.133-3 .398-2.295-1.518-3.3-1.209-3.3-1.209-.66 1.622-.24 2.83-.12 3.125-.765.825-1.23 1.887-1.23 3.169 0 4.51 2.79 5.527 5.46 5.822-.345.294-.66.81-.765 1.577-.69.31-2.415.81-3.495-.973-.225-.354-.9-1.223-1.845-1.209-1.005.015-.405.56.015.781.51.28 1.095 1.327 1.23 1.666.24.663 1.02 1.93 4.035 1.385 0 .988.015 1.916.015 2.196 0 .31-.225.664-.825.56C3.303 21.374-.003 16.867 0 11.791 0 5.276 5.37 0 12 0z"></path></svg>

src/assets/providers-logo/grok.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"></path></svg>

src/assets/providers-logo/groq.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>

src/assets/providers-logo/hunyuan.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Hunyuan</title><circle cx="12" cy="12" fill="#0055E9" r="12"></circle><path d="M12 0c.518 0 1.028.033 1.528.096A6.188 6.188 0 0112.12 12.28l-.12.001c-2.99 0-5.242 2.179-5.554 5.11-.223 2.086.353 4.412 2.242 6.146C3.672 22.1 0 17.479 0 12 0 5.373 5.373 0 12 0z" fill="#A8DFF5"></path><path d="M5.286 5a2.438 2.438 0 01.682 3.38c-3.962 5.966-3.215 10.743 2.648 15.136C3.636 22.056 0 17.452 0 12c0-1.787.39-3.482 1.09-5.006.253-.435.525-.872.817-1.311A2.438 2.438 0 015.286 5z" fill="#0055E9"></path><path d="M12.98.04c.272.021.543.053.81.093.583.106 1.117.254 1.538.44 6.638 2.927 8.07 10.052 1.748 15.642a4.125 4.125 0 01-5.822-.358c-1.51-1.706-1.3-4.184.357-5.822.858-.848 3.108-1.223 4.045-2.441 1.257-1.634 2.122-6.009-2.523-7.506L12.98.039z" fill="#00BCFF"></path><path d="M13.528.096A6.187 6.187 0 0112 12.281a5.75 5.75 0 00-1.71.255c.147-.905.595-1.784 1.321-2.501.858-.848 3.108-1.223 4.045-2.441 1.27-1.651 2.14-6.104-2.676-7.554.184.014.367.033.548.056z" fill="#ECECEE"></path></svg>

src/assets/providers-logo/longcat.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LongCat</title><path clip-rule="evenodd" d="M.507 19.883a.507.507 0 01-.489-.642L4.29 3.745a1.013 1.013 0 011.533-.578l5.622 3.687a1.013 1.013 0 001.11 0L18.2 3.165a1.013 1.013 0 011.532.58l4.25 15.497a.506.506 0 01-.49.64H18.07a6.297 6.297 0 001.53-4.115v-.177a6.09 6.09 0 00-1.513-4.017l-.697-3.495a.438.438 0 00-.694-.266L14.07 9.781a.748.748 0 01-.654.121 5.156 5.156 0 00-2.833 0 .746.746 0 01-.653-.121L7.302 7.81a.435.435 0 00-.688.269l-.675 3.652a5.36 5.36 0 00-1.539 3.76v.333c0 1.474.527 2.9 1.488 4.02l.032.038H.507z" fill="#29E154" fill-rule="evenodd"></path><path d="M9.213 16.843h1.52v-3.546h-1.29l-.23 3.546zm5.573 0h-1.52v-3.546h1.29l.23 3.546z"></path></svg>

src/assets/providers-logo/minimax.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Minimax</title><defs><linearGradient id="lobe-icons-minimax-fill" x1="0%" x2="100.182%" y1="50.057%" y2="50.057%"><stop offset="0%" stop-color="#E2167E"></stop><stop offset="100%" stop-color="#FE603C"></stop></linearGradient></defs><path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z" fill="url(#lobe-icons-minimax-fill)" fill-rule="nonzero"></path></svg>

src/assets/providers-logo/mistral.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Mistral</title><path d="M3.428 3.4h3.429v3.428H3.428V3.4zm13.714 0h3.43v3.428h-3.43V3.4z" fill="gold"></path><path d="M3.428 6.828h6.857v3.429H3.429V6.828zm10.286 0h6.857v3.429h-6.857V6.828z" fill="#FFAF00"></path><path d="M3.428 10.258h17.144v3.428H3.428v-3.428z" fill="#FF8205"></path><path d="M3.428 13.686h3.429v3.428H3.428v-3.428zm6.858 0h3.429v3.428h-3.429v-3.428zm6.856 0h3.43v3.428h-3.43v-3.428z" fill="#FA500F"></path><path d="M0 17.114h10.286v3.429H0v-3.429zm13.714 0H24v3.429H13.714v-3.429z" fill="#E10500"></path></svg>

src/assets/providers-logo/moonshot.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>MoonshotAI</title><path d="M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z"></path></svg>

src/assets/providers-logo/nvidia.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Nvidia</title><path d="M10.212 8.976V7.62c.127-.01.256-.017.388-.021 3.596-.117 5.957 3.184 5.957 3.184s-2.548 3.647-5.282 3.647a3.227 3.227 0 01-1.063-.175v-4.109c1.4.174 1.681.812 2.523 2.258l1.873-1.627a4.905 4.905 0 00-3.67-1.846 6.594 6.594 0 00-.729.044m0-4.476v2.025c.13-.01.259-.019.388-.024 5.002-.174 8.261 4.226 8.261 4.226s-3.743 4.69-7.643 4.69c-.338 0-.675-.031-1.007-.092v1.25c.278.038.558.057.838.057 3.629 0 6.253-1.91 8.794-4.169.421.347 2.146 1.193 2.501 1.564-2.416 2.083-8.048 3.763-11.24 3.763-.308 0-.603-.02-.894-.048V19.5H24v-15H10.21zm0 9.756v1.068c-3.356-.616-4.287-4.21-4.287-4.21a7.173 7.173 0 014.287-2.138v1.172h-.005a3.182 3.182 0 00-2.502 1.178s.615 2.276 2.507 2.931m-5.961-3.3c1.436-1.935 3.604-3.148 5.961-3.336V6.523C5.81 6.887 2 10.723 2 10.723s2.158 6.427 8.21 7.015v-1.166C5.77 16 4.25 10.958 4.25 10.958h-.002z" fill="#74B71B" fill-rule="nonzero"></path></svg>

src/assets/providers-logo/ollama.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Ollama</title><path d="M7.905 1.09c.216.085.411.225.588.41.295.306.544.744.734 1.263.191.522.315 1.1.362 1.68a5.054 5.054 0 012.049-.636l.051-.004c.87-.07 1.73.087 2.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67 1.67 0 01.589-.41c.257-.1.53-.118.796-.042.401.114.745.368 1.016.737.248.337.434.769.561 1.287.23.934.27 2.163.115 3.645l.053.04.026.019c.757.576 1.284 1.397 1.563 2.35.435 1.487.216 3.155-.534 4.088l-.018.021.002.003c.417.762.67 1.567.724 2.4l.002.03c.064 1.065-.2 2.137-.814 3.19l-.007.01.01.024c.472 1.157.62 2.322.438 3.486l-.006.039a.651.651 0 01-.747.536.648.648 0 01-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643 0 01.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644 0 01.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229 4.229 0 00-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653 0 01-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288 3.288 0 00-1.772-.332c-1.245.099-2.343.801-2.67 1.686a.652.652 0 01-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066 1.588a4.07 4.07 0 00-.068 1.886c.112.558.331 1.02.582 1.269l.008.007c.212.207.257.53.109.785-.36.622-.629 1.549-.673 2.44-.05 1.018.186 1.902.719 2.536l.016.019a.643.643 0 01.095.69c-.576 1.236-.753 2.252-.562 3.052a.652.652 0 01-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339 4.339 0 01-.598-1.309l-.005-.019a5.764 5.764 0 01-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352 5.352 0 01.093-2.49c.262-.915.777-1.701 1.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622 1.015-.737.266-.076.54-.059.797.042zm4.116 9.09c.936 0 1.8.313 2.446.855.63.527 1.005 1.235 1.005 1.94 0 .888-.406 1.58-1.133 2.022-.62.375-1.451.557-2.403.557-1.009 0-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845 0-.707.398-1.417 1.056-1.946.668-.537 1.55-.849 2.485-.849zm0 .896a3.07 3.07 0 00-1.916.65c-.461.37-.722.835-.722 1.25 0 .428.21.829.61 1.134.455.347 1.124.548 1.943.548.799 0 1.473-.147 1.932-.426.463-.28.7-.686.7-1.257 0-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662 1.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375 0 01-.376.373.375.375 0 01-.376-.373v-.46l-.271-.218a.347.347 0 01-.052-.49.353.353 0 01.494-.051l.215.172.22-.174a.353.353 0 01.49.051zm-5.04-1.919c.478 0 .867.39.867.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zm8.706 0c.48 0 .868.39.868.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zM7.44 2.3l-.003.002a.659.659 0 00-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216 1.631-.124 2.782.43-.128.899-.208 1.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628 0 00-.107-.09L7.44 2.3zm9.174.04l-.002.001a.628.628 0 00-.107.09c-.156.163-.32.45-.453.814-.29.794-.387 1.776-.23 2.572l.058.097.008.014h.03a5.184 5.184 0 011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659 0 00-.285-.239h-.004z"></path></svg>

src/assets/providers-logo/openai.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>

src/assets/providers-logo/openrouter.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenRouter</title><path d="M16.804 1.957l7.22 4.105v.087L16.73 10.21l.017-2.117-.821-.03c-1.059-.028-1.611.002-2.268.11-1.064.175-2.038.577-3.147 1.352L8.345 11.03c-.284.195-.495.336-.68.455l-.515.322-.397.234.385.23.53.338c.476.314 1.17.796 2.701 1.866 1.11.775 2.083 1.177 3.147 1.352l.3.045c.694.091 1.375.094 2.825.033l.022-2.159 7.22 4.105v.087L16.589 22l.014-1.862-.635.022c-1.386.042-2.137.002-3.138-.162-1.694-.28-3.26-.926-4.881-2.059l-2.158-1.5a21.997 21.997 0 00-.755-.498l-.467-.28a55.927 55.927 0 00-.76-.43C2.908 14.73.563 14.116 0 14.116V9.888l.14.004c.564-.007 2.91-.622 3.809-1.124l1.016-.58.438-.274c.428-.28 1.072-.726 2.686-1.853 1.621-1.133 3.186-1.78 4.881-2.059 1.152-.19 1.974-.213 3.814-.138l.02-1.907z"></path></svg>

src/assets/providers-logo/qwen.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Qwen</title><path d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z" fill="url(#lobe-icons-qwen-fill)" fill-rule="nonzero"></path><defs><linearGradient id="lobe-icons-qwen-fill" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" stop-color="#6336E7" stop-opacity=".84"></stop><stop offset="100%" stop-color="#6F69F7" stop-opacity=".84"></stop></linearGradient></defs></svg>

src/assets/providers-logo/spark.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Spark</title><path d="M2 13.08C2 9.182 4.772 6.367 9.32 2.122c-.65 7.883 6.41 8.272 5.023 12.214-.99 2.815-4.244 1.949-4.59 1.342 0 0 1.212.347 1.385-.866.174-1.213-2.252-1.862-3.81-4.937-2.6 2.988-.954 9.008 4.2 9.008 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.346 3.119-3.638 8.533-9.095 8.403C6.288 22.868 2 18.84 2 13.08z" fill="#3DC8F9"></path><path d="M17.852 6.107L11.615 0c-.52 5.933.866 8.374 4.894 9.485 2.729.753 3.307 1.04 4.504 2.772-.338-2.407-.78-3.812-3.161-6.15z" fill="#EA0100"></path><path clip-rule="evenodd" d="M9.033 18.323c.709.354 1.542.56 2.495.56 4.764 0 6.583-4.937 4.894-8.099 0 0 4.071.693 4.418 3.811.156 1.403-.565 3.27-1.902 4.89-3.458 1.57-7.29.84-9.905-1.162z" fill="#1652D8" fill-rule="evenodd"></path></svg>

src/assets/providers-logo/stepfun.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Stepfun</title><path d="M22.012 0h1.032v.927H24v.968h-.956V3.78h-1.032V1.896h-1.878v-.97h1.878V0zM2.6 12.371V1.87h.969v10.502h-.97zm10.423.66h10.95v.918h-6.208v9.579h-4.742V13.03zM5.629 3.333v12.356H0v4.51h10.386V8L20.859 8l-.003-4.668-15.227.001z" fill="url(#lobe-icons-stepfun-fill)" fill-rule="evenodd"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-stepfun-fill" x1="1.646" x2="18.342" y1="1.916" y2="22.091"><stop stop-color="#01A9FF"></stop><stop offset="1" stop-color="#0160FF"></stop></linearGradient></defs></svg>

src/assets/providers-logo/together.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>together.ai</title><path d="M17.385 11.23a4.615 4.615 0 100-9.23 4.615 4.615 0 000 9.23zm0 10.77a4.615 4.615 0 100-9.23 4.615 4.615 0 000 9.23zm-10.77 0a4.615 4.615 0 100-9.23 4.615 4.615 0 000 9.23z" opacity=".2"></path><circle cx="6.615" cy="6.615" fill="#0F6FFF" r="4.615"></circle></svg>

src/assets/providers-logo/yi.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Yi</title><path d="M18.62 13.927c.611 0 1.107.505 1.107 1.128v5.817c0 .623-.496 1.128-1.108 1.128a1.118 1.118 0 01-1.108-1.128v-5.817c0-.623.496-1.128 1.108-1.128zM16.59 3.052a1.094 1.094 0 011.562-.129c.466.404.522 1.116.126 1.59l-5.938 7.111v9.147c0 .624-.496 1.129-1.108 1.129a1.118 1.118 0 01-1.108-1.129v-9.477l.003-.088.01-.087c.015-.232.102-.462.261-.654l6.192-7.413zM2.906 2.256a1.094 1.094 0 011.559.157l4.387 5.45a1.142 1.142 0 01-.155 1.587 1.094 1.094 0 01-1.559-.157l-4.387-5.45a1.144 1.144 0 01.06-1.498l.095-.09z"></path><ellipse cx="20.146" cy="10.692" fill="#00FF25" rx="1.354" ry="1.379"></ellipse></svg>

src/assets/providers-logo/zhipu.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Zhipu</title><path d="M11.991 23.503a.24.24 0 00-.244.248.24.24 0 00.244.249.24.24 0 00.245-.249.24.24 0 00-.22-.247l-.025-.001zM9.671 5.365a1.697 1.697 0 011.099 2.132l-.071.172-.016.04-.018.054c-.07.16-.104.32-.104.498-.035.71.47 1.279 1.186 1.314h.366c1.309.053 2.338 1.173 2.286 2.523-.052 1.332-1.152 2.38-2.478 2.327h-.174c-.715.018-1.274.64-1.239 1.368 0 .124.018.23.053.337.209.373.54.658.96.8.75.23 1.517-.125 1.9-.782l.018-.035c.402-.64 1.17-.96 1.92-.711.854.284 1.378 1.226 1.099 2.167a1.661 1.661 0 01-2.077 1.102 1.711 1.711 0 01-.907-.711l-.017-.035c-.2-.323-.463-.58-.851-.711l-.056-.018a1.646 1.646 0 00-1.954.746 1.66 1.66 0 01-1.065.764 1.677 1.677 0 01-1.989-1.279c-.209-.906.332-1.83 1.257-2.043a1.51 1.51 0 01.296-.035h.018c.68-.071 1.151-.622 1.116-1.333a1.307 1.307 0 00-.227-.693 2.515 2.515 0 01-.366-1.403 2.39 2.39 0 01.366-1.208c.14-.195.21-.444.227-.693.018-.71-.506-1.261-1.186-1.332l-.07-.018a1.43 1.43 0 01-.299-.07l-.05-.019a1.7 1.7 0 01-1.047-2.114 1.68 1.68 0 012.094-1.101zm-5.575 10.11c.26-.264.639-.367.994-.27.355.096.633.379.728.74.095.362-.007.748-.267 1.013-.402.41-1.053.41-1.455 0a1.062 1.062 0 010-1.482zm14.845-.294c.359-.09.738.024.992.297.254.274.344.665.237 1.025-.107.36-.396.634-.756.718-.551.128-1.1-.22-1.23-.781a1.05 1.05 0 01.757-1.26zm-.064-4.39c.314.32.49.753.49 1.206 0 .452-.176.886-.49 1.206-.315.32-.74.5-1.185.5-.444 0-.87-.18-1.184-.5a1.727 1.727 0 010-2.412 1.654 1.654 0 012.369 0zm-11.243.163c.364.484.447 1.128.218 1.691a1.665 1.665 0 01-2.188.923c-.855-.36-1.26-1.358-.907-2.228a1.68 1.68 0 011.33-1.038c.593-.08 1.183.169 1.547.652zm11.545-4.221c.368 0 .708.2.892.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.892.524c-.568 0-1.03-.47-1.03-1.048 0-.579.462-1.048 1.03-1.048zm-14.358 0c.368 0 .707.2.891.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.891.524c-.569 0-1.03-.47-1.03-1.048 0-.579.461-1.048 1.03-1.048zm10.031-1.475c.925 0 1.675.764 1.675 1.706s-.75 1.705-1.675 1.705-1.674-.763-1.674-1.705c0-.942.75-1.706 1.674-1.706zm-2.626-.684c.362-.082.653-.356.761-.718a1.062 1.062 0 00-.238-1.028 1.017 1.017 0 00-.996-.294c-.547.14-.881.7-.752 1.257.13.558.675.907 1.225.783zm0 16.876c.359-.087.644-.36.75-.72a1.062 1.062 0 00-.237-1.019 1.018 1.018 0 00-.985-.301 1.037 1.037 0 00-.762.717c-.108.361-.017.754.239 1.028.245.263.606.377.953.305l.043-.01zM17.19 3.5a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64a.631.631 0 00-.628.64c0 .355.28.64.628.64zm-10.38 0a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64a.631.631 0 00-.628.64c0 .355.279.64.628.64zm-5.182 7.852a.631.631 0 00-.628.64c0 .354.28.639.628.639a.63.63 0 00.627-.606l.001-.034a.62.62 0 00-.628-.64zm5.182 9.13a.631.631 0 00-.628.64c0 .355.279.64.628.64a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm10.38.018a.631.631 0 00-.628.64c0 .355.28.64.628.64a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64zm5.182-9.148a.631.631 0 00-.628.64c0 .354.279.639.628.639a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm-.384-4.992a.24.24 0 00.244-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249c0 .142.122.249.244.249zM11.991.497a.24.24 0 00.245-.248A.24.24 0 0011.99 0a.24.24 0 00-.244.249c0 .133.108.236.223.247l.021.001zM2.011 6.36a.24.24 0 00.245-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249.24.24 0 00.244.249zm0 11.263a.24.24 0 00-.243.248.24.24 0 00.244.249.24.24 0 00.244-.249.252.252 0 00-.244-.248zm19.995-.018a.24.24 0 00-.245.248.24.24 0 00.245.25.24.24 0 00.244-.25.252.252 0 00-.244-.248z" fill="#3859FF" fill-rule="nonzero"></path></svg>

src/assets/styles/common.less

@@ -1,3 +1,5 @@
+@import './table.less';
+
 .m-b-20 {
   margin-bottom: 20px;
 }
@@ -26,6 +28,10 @@
   margin-left: 5px;
 }
 
+.m-l-24 {
+  margin-left: 24px;
+}
+
 .m-l-4 {
   margin-left: 4px;
 }
@@ -98,6 +104,11 @@
   display: flex;
 }
 
+.flex-full {
+  display: flex;
+  flex: 1;
+}
+
 // space-between
 .flex-between {
   display: flex;
@@ -344,3 +355,16 @@ textarea:hover {
 .text-success {
   color: var(--ant-color-success);
 }
+
+.desc-fill {
+  font-weight: 600;
+  color: var(--ant-color-text);
+  background-color: var(--ant-color-fill-content);
+  line-height: 1.5;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.line-6 {
+  line-height: 24px;
+}

src/assets/styles/menu.less

@@ -3,8 +3,7 @@
     .ant-layout-sider-children {
       border-inline: none;
       border-radius: 0;
-      // padding-inline: 16px;
-      padding-block-end: 12px;
+      padding-block-end: 8px;
     }
 
     .umi-plugin-layout-right {
@@ -22,3 +21,11 @@
     }
   }
 }
+
+// slider styles
+
+.ant-slider .ant-slider-handle:hover::after,
+.ant-slider .ant-slider-handle:active::after,
+.ant-slider .ant-slider-handle:focus::after {
+  outline-width: 3px;
+}

src/assets/styles/table.less

@@ -0,0 +1,10 @@
+.ant-table-thead {
+  .ant-table-column-sorters {
+    .ant-table-column-title {
+      min-width: 32px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

src/atoms/backend.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const enabledBackendsAtom = atom<any>(null);

src/atoms/benchmark.ts

@@ -0,0 +1,15 @@
+import { atom } from 'jotai';
+
+export const benchmarkTargetInstanceAtom = atom<{
+  cluster_id: number | null;
+  model_name: string;
+  model_id: number | null;
+  model_instance_name: string;
+  model_instance: string[];
+}>({
+  cluster_id: null,
+  model_name: '',
+  model_id: null,
+  model_instance_name: '',
+  model_instance: []
+});

src/atoms/clusters.ts

@@ -1,3 +1,4 @@
+import { ClusterListItem } from '@/pages/cluster-management/config/types';
 import { atom } from 'jotai';
 
 // models expand keys: create, update , delete,
@@ -29,6 +30,7 @@ export const regionOSImageListAtom = atom<
   {
     label: string;
     value: string;
+    os_image: string;
     name: string;
     description: string;
     vendor: string;
@@ -60,4 +62,9 @@ export const fromClusterCreationAtom = atom(false);
  */
 export const clusterSessionAtom = atom<{
   firstAddWorker: boolean;
+  firstAddCluster: boolean;
 } | null>(null);
+
+export const clusterDetailAtom = atom<ClusterListItem | null>(null);
+
+export const workerAddedCountAtom = atom(0);

src/atoms/models.ts

@@ -20,11 +20,40 @@ export const getRequestId = () => {
   return store.get(requestIdAtom);
 };
 
+// store for cluster list: res.items from api
 export const clusterListAtom = atom<
   {
     label: string;
     value: number;
+    provider: string;
+    state: string;
+    is_default: boolean;
+    workers: number;
+    ready_workers: number;
+    gpus: number;
   }[]
 >([]);
 
-export const backendOptionsAtom = atom<BackendOption[]>([]);
+// store for worker list: res.items from api
+export const workerListAtom = atom<
+  {
+    label: string;
+    value: number;
+    cluster_id: number;
+    state: string;
+    id: number;
+    labels: Record<string, any>;
+    name: string;
+  }[]
+>([]);
+
+export interface BackGroupOption {
+  label: string;
+  value: string;
+  title?: string;
+  options: BackendOption[];
+}
+
+export const backendOptionsAtom = atom<BackGroupOption[]>([]);
+
+export const resourceOverviewAtom = atom<Record<string, any>>({});

src/atoms/routes.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+export const registerRouteConfigAtom = atom<Record<string, any>>({
+  initialValues: null,
+  create: false
+});

src/atoms/settings.ts

@@ -8,14 +8,16 @@ type UserSettings = {
   colorPrimary: string;
   isDarkTheme: boolean;
   collapsed: boolean;
+  hideAddResourceModal?: boolean;
 };
 
-const defaultSettings: UserSettings = {
+export const defaultSettings: UserSettings = {
   theme: 'light',
   mode: 'auto',
   isDarkTheme: false,
   colorPrimary: COLOR_PRIMARY,
-  collapsed: false
+  collapsed: false,
+  hideAddResourceModal: false
 };
 
 export const getStorageUserSettings = () => {
@@ -52,3 +54,4 @@ export const userSettingsHelperAtom = atom(
     });
   }
 );
+export const hideModalTemporarilyAtom = atom<boolean>(false);

src/atoms/system.ts

@@ -0,0 +1,14 @@
+import { atom } from 'jotai';
+
+export interface SystemConfig {
+  grafana_url: string;
+  disable_builtin_observability: boolean;
+  debug: boolean;
+  grafana_model_dashboard_uid: string;
+  grafana_worker_dashboard_uid: string;
+  system_default_container_registry: string | null;
+  server_external_url: string | null;
+  showMonitoring?: boolean;
+}
+
+export const systemConfigAtom = atom<SystemConfig>({} as SystemConfig);

src/atoms/user.ts

@@ -6,11 +6,15 @@ export const userAtom = atomWithStorage<any>('userInfo', null);
 export const GPUStackVersionAtom = atom<{
   version: string;
   git_commit: string;
-  isProduction: boolean;
+  isProd: boolean;
+  isDev?: boolean;
+  isRc?: boolean;
 }>({
   version: '',
   git_commit: '',
-  isProduction: false
+  isProd: false,
+  isDev: false,
+  isRc: false
 });
 
 export const UpdateCheckAtom = atom<{

src/atoms/utils/index.ts

@@ -1,16 +1,36 @@
+import { defaultSettings } from '@/atoms/settings';
 import { getDefaultStore } from 'jotai';
 
 export const clearStorageUserSettings = () => {
-  const savedSettings = JSON.parse(
-    localStorage.getItem('userSettings') || '{}'
-  );
-  localStorage.setItem(
-    'userSettings',
-    JSON.stringify({
-      ...savedSettings,
-      colorPrimary: undefined
-    })
-  );
+  try {
+    const savedSettings = JSON.parse(
+      localStorage.getItem('userSettings') || '{}'
+    );
+    localStorage.setItem(
+      'userSettings',
+      JSON.stringify({
+        ...savedSettings,
+        hideAddResourceModal: false,
+        colorPrimary: undefined
+      })
+    );
+  } catch (error) {
+    console.log('Error clearing user settings:', error);
+  }
+};
+
+export const resetStorageUserSettings = () => {
+  try {
+    localStorage.setItem(
+      'userSettings',
+      JSON.stringify({
+        ...defaultSettings,
+        colorPrimary: undefined
+      })
+    );
+  } catch (error) {
+    console.log('Error clearing user settings:', error);
+  }
 };
 
 export const clearAtomStorage = (atom: any) => {

src/components/alert-info/block.tsx

@@ -1,4 +1,8 @@
-import { WarningFilled } from '@ant-design/icons';
+import {
+  CheckCircleFilled,
+  LoadingOutlined,
+  WarningFilled
+} from '@ant-design/icons';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
@@ -122,6 +126,17 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
     overlayScrollerProps = {}
   } = props;
   const { styles } = useStyles();
+
+  const renderIcon = () => {
+    if (type === 'transition') {
+      return <LoadingOutlined />;
+    }
+    if (type === 'success') {
+      return <CheckCircleFilled />;
+    }
+    return <WarningFilled />;
+  };
+
   return (
     <>
       {message ? (
@@ -139,7 +154,7 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
           >
             <div className={classNames('title', type)}>
               <span className={classNames('info-icon', type)}>
-                {icon ?? <WarningFilled />}
+                {icon ?? renderIcon()}
               </span>
             </div>
             {title && (
@@ -164,4 +179,4 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
   );
 };
 
-export default React.memo(AlertInfo);
+export default AlertInfo;

src/components/audio-player/index.less

@@ -23,7 +23,6 @@
     margin-inline: 30px;
     height: 22px;
     width: 22px;
-    overflow: hidden;
 
     .ant-btn {
       height: 22px;

src/components/auto-image/index.tsx

@@ -70,8 +70,9 @@ const AutoImage: React.FC<
     setIsError(false);
   }, [props.onLoad]);
 
-  const handleOnError = useCallback(() => {
+  const handleOnError = useCallback((e: any) => {
     setIsError(true);
+    e.target.src = fallbackImg;
   }, []);
 
   useEffect(() => {
@@ -95,7 +96,7 @@ const AutoImage: React.FC<
         preview &&
         !isError && {
           mask: <EyeOutlined />,
-          toolbarRender: (
+          actionsRender: (
             _,
             {
               transform: { scale },
@@ -127,4 +128,4 @@ const AutoImage: React.FC<
   );
 };
 
-export default React.memo(AutoImage);
+export default AutoImage;

src/components/auto-image/single-image.less

@@ -59,8 +59,8 @@
 
   .del {
     position: absolute;
-    top: -4px;
-    right: -2px;
+    top: 2px;
+    right: 2px;
     font-size: var(--font-size-middle);
     cursor: pointer;
     background-color: var(--color-white-1);

src/components/auto-image/single-image.tsx

@@ -32,7 +32,7 @@ interface SingleImageProps {
 const SingleImage: React.FC<SingleImageProps> = (props) => {
   const {
     editable,
-    onDelete: handleOnDelete,
+    onDelete,
     onClick,
     autoSize,
     uid,
@@ -94,6 +94,11 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
 
   const handleOnLoad = React.useCallback(async () => {}, []);
 
+  const handleOnDelete = (uid: number, e: any) => {
+    e.stopPropagation();
+    onDelete(uid);
+  };
+
   const renderProgress = () => {
     <Progress
       percent={round(progress, 0)}
@@ -101,7 +106,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
       size={loadingSize}
       steps={{ count: 50, gap: 2 }}
       format={() => <span className="font-size-20">{round(progress, 0)}%</span>}
-      trailColor="var(--ant-color-fill-secondary)"
+      railColor="var(--ant-color-fill-secondary)"
     />;
   };
 
@@ -181,7 +186,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
                         </span>
                       )}
                       strokeColor="var(--color-white-secondary)"
-                      trailColor="var(--ant-color-fill-secondary)"
+                      railColor="var(--ant-color-fill-secondary)"
                     />
                   </span>
                 )}
@@ -190,7 +195,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
           </>
 
           {editable && (
-            <span className="del" onClick={() => handleOnDelete(uid)}>
+            <span className="del" onClick={(e) => handleOnDelete(uid, e)}>
               <CloseCircleOutlined />
             </span>
           )}

src/components/auto-tooltip/index.tsx

@@ -118,6 +118,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
       ) : (
         <StyledTag
           {...tagProps}
+          variant="outlined"
           className={`${tagProps.className || ''} ${filled ? 'tag-filled' : ''}`}
           ref={contentRef}
           style={{
@@ -147,4 +148,4 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 };
 
-export default React.memo(AutoTooltip);
+export default AutoTooltip;

src/components/card-wrapper/index.less

@@ -1,7 +0,0 @@
-.cardWrapper {
-  border-radius: var(--border-radius-small);
-  background-color: var(--color-white-1);
-  box-shadow: none;
-  padding: 10px 16px;
-  border: 1px solid var(--ant-color-border);
-}

src/components/card-wrapper/index.tsx

@@ -1,12 +1,16 @@
-import styles from './index.less';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  border-radius: var(--border-radius-small);
+  background-color: var(--ant-color-bg-container);
+  box-shadow: none;
+  padding: 10px 16px;
+  border: 1px solid var(--ant-color-border);
+`;
 
 const CardWrapper = (props: any) => {
   const { children, style } = props;
-  return (
-    <div className={styles.cardWrapper} style={{ ...style }}>
-      {children}
-    </div>
-  );
+  return <Wrapper style={{ ...style }}>{children}</Wrapper>;
 };
 
 export default CardWrapper;

src/components/collapse-container/headless-collapse.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface CollapseProps {
+  open: boolean;
+  children: React.ReactNode;
+  duration?: number;
+  minHeight?: number;
+}
+
+export default function Collapse({
+  open,
+  children,
+  minHeight = 0,
+  duration = 200
+}: CollapseProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | 'auto'>(minHeight);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    if (open) {
+      const h = el.scrollHeight;
+      setHeight(h);
+
+      const timer = setTimeout(() => {
+        setHeight('auto');
+      }, duration);
+
+      return () => clearTimeout(timer);
+    } else {
+      const h = el.scrollHeight;
+      setHeight(h);
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setHeight(0);
+        });
+      });
+    }
+    return undefined;
+  }, [open, duration]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        height,
+        overflow: 'hidden',
+        transition: `height ${duration}ms ease`
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/collapse-container/index.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 
 const CardStyled = styled(Card)`
   box-shadow: none !important;
+  background-color: none;
   &.isOpen {
     .ant-card-head {
       border-bottom: 1px solid var(--ant-color-border-secondary);
@@ -26,13 +27,19 @@ const CardStyled = styled(Card)`
       }
     }
   }
+  &.disabled {
+    .ant-card-head {
+      cursor: not-allowed;
+      background-color: var(--ant-color-fill-quaternary) !important;
+    }
+  }
 `;
 
 const useStyles = createStyles(({ css, token }) => {
   return {
     title: css`
       font-weight: 400;
-      height: 56px;
+      min-height: 56px;
       font-size: var(--font-size-base);
       display: flex;
       justify-content: space-between;
@@ -77,10 +84,11 @@ export interface CollapsibleContainerProps {
   onToggle?: (open: boolean) => void;
   disabled?: boolean;
   variant?: 'outlined' | 'borderless' | undefined;
-  iconPosition?: 'left' | 'right';
+  iconPlacement?: 'left' | 'right';
   className?: string;
   children?: React.ReactNode;
   styles?: {
+    root?: React.CSSProperties;
     body?: React.CSSProperties;
     header?: React.CSSProperties;
     content?: React.CSSProperties;
@@ -100,7 +108,7 @@ export default function CollapsibleContainer({
   variant = 'borderless',
   className = '',
   collapsible,
-  iconPosition = 'left',
+  iconPlacement = 'left',
   styles: cardStyles,
   children
 }: CollapsibleContainerProps) {
@@ -147,7 +155,7 @@ export default function CollapsibleContainer({
       <div className={styles.title} onClick={toggle}>
         <div className={styles.left}>
           <div className={styles.expandIcon}>
-            {iconPosition === 'left' && renderIcon()}
+            {iconPlacement === 'left' && renderIcon()}
             {title && <div>{title}</div>}
           </div>
           {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
@@ -155,7 +163,7 @@ export default function CollapsibleContainer({
         <div className={styles.right}>
           {right && <span>{right}</span>}
           {deleteBtn && <span className="del-btn">{deleteBtn}</span>}
-          {iconPosition === 'right' && renderIcon()}
+          {iconPlacement === 'right' && renderIcon()}
         </div>
       </div>
     );
@@ -184,6 +192,9 @@ export default function CollapsibleContainer({
       className={classNames(className, { collapsible, disabled, isOpen })}
       variant={variant}
       styles={{
+        root: {
+          ...cardStyles?.root
+        },
         body: {
           padding: 0,
           ...cardStyles?.body

src/components/copy-button/index.tsx

@@ -1,13 +1,12 @@
 import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Tooltip, message } from 'antd';
-import ClipboardJS from 'clipboard';
+import { Button, message, Tooltip } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import AutoTooltip from '../auto-tooltip';
 
 type CopyButtonProps = {
   children?: React.ReactNode;
   text: string;
-  disabled?: boolean;
   fontSize?: string;
   type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
@@ -30,34 +29,81 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   children,
   tips,
   text,
-  disabled,
   type = 'text',
   shape = 'default',
   fontSize = '14px',
   style,
   btnStyle,
   placement,
-  size = 'middle'
+  size = 'small'
 }) => {
   const intl = useIntl();
   const [copied, setCopied] = useState(false);
-  const buttonRef = useRef(null);
-  const clipboardRef = useRef<any>(null);
+  const timerRef = useRef<number>();
 
-  const initClipboard = () => {
-    if (buttonRef.current) {
-      clipboardRef.current = new ClipboardJS(buttonRef.current);
-      clipboardRef.current.on('success', () => {
+  const resetCopied = () => {
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  };
+
+  /**
+   * Modern clipboard API (works in secure contexts: HTTPS or localhost)
+   */
+  const asyncCopy = async (value: string): Promise<boolean> => {
+    try {
+      await navigator.clipboard.writeText(value);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  /**
+   * Fallback: execCommand with copy event listener
+   * More reliable than textarea selection method
+   */
+  const execCopy = (value: string): boolean => {
+    let copySuccess = false;
+
+    const onCopy = (event: ClipboardEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      event.clipboardData?.clearData();
+      event.clipboardData?.setData('text/plain', value);
+      copySuccess = true;
+    };
+
+    try {
+      document.addEventListener('copy', onCopy, { capture: true });
+      document.execCommand('copy');
+      return copySuccess;
+    } catch (error) {
+      return false;
+    } finally {
+      document.removeEventListener('copy', onCopy, { capture: true });
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      // Try modern clipboard API first
+      if (await asyncCopy(text)) {
         setCopied(true);
-        setTimeout(() => {
-          setCopied(false);
-        }, 3000);
-      });
+        return;
+      }
 
-      clipboardRef.current.on('error', (e: any) => {
-        message.error(intl.formatMessage({ id: 'common.copy.fail' }) as string);
-        e.clearSelection();
-      });
+      // Fallback to execCommand method
+      if (execCopy(text)) {
+        setCopied(true);
+        return;
+      }
+
+      // Both methods failed
+      throw new Error('Copy failed');
+    } catch (error) {
+      message.error(intl.formatMessage({ id: 'common.copy.fail' }) as string);
     }
   };
 
@@ -66,39 +112,44 @@ const CopyButton: React.FC<CopyButtonProps> = ({
       return intl.formatMessage({ id: 'common.button.copied' });
     }
     return tips ?? intl.formatMessage({ id: 'common.button.copy' });
-  }, [copied, intl, tips]);
+  }, [copied, tips, intl]);
 
   useEffect(() => {
-    initClipboard();
-    return () => {
-      clipboardRef.current?.destroy();
-    };
-  }, [buttonRef]);
+    resetCopied();
+  }, [copied]);
 
   return (
-    <Tooltip title={tipTitle} placement={placement}>
-      <Button
-        className="copy-button"
-        ref={buttonRef}
-        type={type}
-        shape={shape}
-        size={size}
-        disabled={!!disabled}
-        data-clipboard-text={text}
-        style={{ ...btnStyle }}
-        icon={
-          copied ? (
-            <CheckCircleFilled
-              style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
-            />
-          ) : (
-            <CopyOutlined style={{ fontSize: fontSize, ...style }} />
-          )
-        }
-      >
-        {children}
-      </Button>
-    </Tooltip>
+    <div className="flex-center gap-4" style={{ minWidth: 16 }}>
+      {children && (
+        <AutoTooltip minWidth={20} ghost>
+          {children}
+        </AutoTooltip>
+      )}
+      <Tooltip title={tipTitle} placement={placement}>
+        <span>
+          <Button
+            className="copy-button"
+            type={type}
+            shape={shape}
+            size={size}
+            onClick={handleCopy}
+            style={{ ...btnStyle }}
+            icon={
+              copied ? (
+                <CheckCircleFilled
+                  style={{
+                    color: 'var(--ant-color-success)',
+                    fontSize
+                  }}
+                />
+              ) : (
+                <CopyOutlined style={{ fontSize, ...style }} />
+              )
+            }
+          ></Button>
+        </span>
+      </Tooltip>
+    </div>
   );
 };
 

src/components/delete-modal/index.tsx

@@ -72,6 +72,7 @@ interface Configuration {
   checked: boolean;
 }
 
+// default need to pass content and operation
 const DeleteModal = forwardRef((props, ref) => {
   const intl = useIntl();
   const { styles } = useStyles();
@@ -80,6 +81,7 @@ const DeleteModal = forwardRef((props, ref) => {
   const [configuration, setConfiguration] = useState<Configuration>({
     checked: false
   });
+  const [delLoading, setDelLoading] = useState(false);
   const [config, setConfig] = useState<ModalFuncProps & DataOptions>({} as any);
 
   const show = (data: ModalFuncProps & DataOptions) => {
@@ -104,6 +106,7 @@ const DeleteModal = forwardRef((props, ref) => {
 
   const handleOk = async () => {
     try {
+      setDelLoading(true);
       const res = await config.onOk?.();
       const isArray = Array.isArray(res);
       if (isArray) {
@@ -120,6 +123,7 @@ const DeleteModal = forwardRef((props, ref) => {
       // Handle error if needed
     } finally {
       setVisible(false);
+      setDelLoading(false);
       restoreScrollHeight();
     }
   };
@@ -155,7 +159,13 @@ const DeleteModal = forwardRef((props, ref) => {
               ? intl.formatMessage({ id: config.cancelText })
               : intl.formatMessage({ id: 'common.button.cancel' })}
           </Button>
-          <Button type="primary" onClick={handleOk} size="middle" danger>
+          <Button
+            type="primary"
+            onClick={handleOk}
+            size="middle"
+            danger
+            loading={delLoading}
+          >
             {config.okText
               ? intl.formatMessage({ id: config.okText })
               : intl.formatMessage({ id: 'common.button.delete' })}

src/components/drop-down-buttons/index.tsx

@@ -1,6 +1,6 @@
 import { MoreOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
+import { Button, Dropdown, Space, Tooltip, type MenuProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
@@ -31,7 +31,9 @@ const DropdownWrapper = styled.div`
   min-width: 160px;
 `;
 
-const DropdownButtons: React.FC<DropdownButtonsProps> = ({
+const DropdownButtons: React.FC<
+  DropdownButtonsProps & { items: MenuProps['items'] }
+> = ({
   items,
   size = 'middle',
   trigger = ['hover'],
@@ -72,70 +74,64 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
           ></Button>
         </Tooltip>
       ) : (
-        <Dropdown.Button
-          disabled={disabled}
-          trigger={trigger}
-          type="primary"
-          popupRender={(menus: any) => {
-            return (
-              <DropdownWrapper>
-                {_.map(_.tail(items), (item: any) => {
-                  return (
-                    <Button
-                      {...item.props}
-                      type="text"
-                      size={size}
-                      icon={item.icon}
-                      key={item.key}
-                      disabled={item.disabled}
-                      onClick={() => handleMenuClick(item)}
-                      style={{
-                        width: '100%',
-                        justifyContent: 'flex-start',
-                        paddingInline: 10
-                      }}
-                    >
-                      {intl.formatMessage({ id: item.label })}
-                    </Button>
-                  );
+        <Space.Compact>
+          <>
+            {showText ? (
+              <Button
+                {...headItem?.props}
+                disabled={headItem?.disabled || disabled}
+                className={classNames('dropdown-button', size)}
+                onClick={handleButtonClick}
+                size={size}
+                icon={headItem?.icon}
+                variant={variant}
+                color={color}
+              >
+                {intl.formatMessage({
+                  id: headItem?.label
                 })}
-              </DropdownWrapper>
-            );
-          }}
-          buttonsRender={([leftButton, rightButton]) => [
-            <>
-              {showText ? (
+                {extra}
+              </Button>
+            ) : (
+              <Tooltip
+                title={intl.formatMessage({ id: headItem?.label })}
+                key="leftButton"
+              >
                 <Button
                   {...headItem?.props}
-                  disabled={headItem?.disabled || disabled}
                   className={classNames('dropdown-button', size)}
                   onClick={handleButtonClick}
                   size={size}
                   icon={headItem?.icon}
-                  variant={variant}
-                  color={color}
-                >
-                  {intl.formatMessage({
-                    id: headItem?.label
-                  })}
-                  {extra}
-                </Button>
-              ) : (
-                <Tooltip
-                  title={intl.formatMessage({ id: headItem?.label })}
-                  key="leftButton"
-                >
-                  <Button
-                    {...headItem?.props}
-                    className={classNames('dropdown-button', size)}
-                    onClick={handleButtonClick}
-                    size={size}
-                    icon={headItem?.icon}
-                    disabled={headItem?.disabled}
-                  ></Button>
-                </Tooltip>
-              )}
-            </>,
+                  disabled={headItem?.disabled}
+                ></Button>
+              </Tooltip>
+            )}
+          </>
+          <Dropdown
+            disabled={disabled}
+            trigger={trigger}
+            placement="bottomRight"
+            styles={{
+              root: {
+                minWidth: 160
+              },
+              itemIcon: {
+                fontSize: 14
+              }
+            }}
+            menu={{
+              onClick: handleMenuClick,
+              items: _.tail(items).map((item: any) => ({
+                ...item,
+                ...item.props,
+                label:
+                  item.locale || item.locale === undefined
+                    ? intl.formatMessage({ id: item.label })
+                    : item.label
+              }))
+            }}
+          >
             <Button
               icon={<MoreOutlined />}
               size={size}
@@ -144,8 +140,8 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
               color="default"
               className={classNames('dropdown-button', size)}
             ></Button>
-          ]}
-        ></Dropdown.Button>
+          </Dropdown>
+        </Space.Compact>
       )}
     </>
   );

src/components/echarts/chart.tsx

@@ -9,10 +9,11 @@ import echarts, { ECOption } from '.';
 
 const Chart: React.FC<{
   options: ECOption;
+  chartHeight?: number;
   height: number | string;
   width: number | string;
   ref?: any;
-}> = forwardRef(({ options, width, height }, ref) => {
+}> = forwardRef(({ options, width, height, chartHeight }, ref) => {
   const container = useRef<HTMLDivElement>(null);
   const chart = useRef<echarts.EChartsType>();
   const resizeable = useRef(false);
@@ -138,7 +139,10 @@ const Chart: React.FC<{
 
   return (
     <div className="chart-wrapper" style={{ width: width, height }}>
-      <div ref={container} style={{ width: width, height }}></div>
+      <div
+        ref={container}
+        style={{ width: width, height: chartHeight || height }}
+      ></div>
     </div>
   );
 });

src/components/echarts/config.ts

@@ -220,6 +220,7 @@ export default function useChartConfig() {
   };
 
   return {
+    token,
     tooltip,
     grid,
     legend,

src/components/echarts/h-bar.tsx

@@ -2,7 +2,7 @@ import Chart from '@/components/echarts/chart';
 import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { ChartProps } from './types';
 
 const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
@@ -17,6 +17,7 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
     title
   } = props;
   const {
+    token,
     grid,
     legend,
     title: titleConfig,
@@ -44,17 +45,28 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
       xAxis: {
         ...xAxis,
         axisLabel: {
-          ...xAxis.axisLabel,
-          formatter: labelFormatter
+          ...xAxis.axisLabel
         }
       },
       yAxis: {
         ...yAxis,
         axisLabel: {
           ...yAxis.axisLabel,
+          show: true,
           overflow: 'truncate',
           width: 75,
-          ellipsis: '...'
+          ellipsis: '...',
+          margin: 8,
+          formatter(value: string, index: number) {
+            return `{a|${index + 1}}`;
+          },
+          rich: {
+            a: {
+              fontWeight: 500,
+              fontSize: 14,
+              color: token?.colorTextSecondary
+            }
+          }
         }
       },
       legend: {
@@ -70,9 +82,25 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
         type: 'bar',
         barWidth: 20,
         stack: 'Ad',
-        barGap: '30%',
+        barGap: '20%',
         label: {
-          show: false
+          show: true,
+          formatter(params: any) {
+            if (params.seriesIndex === 0) {
+              return `{value|${params.name}}`;
+            }
+            return '';
+          },
+          position: 'left',
+          align: 'left',
+          offset: [5, 18],
+          rich: {
+            value: {
+              textBorderWidth: 0,
+              fontSize: 11,
+              color: token?.colorTextTertiary
+            }
+          }
         },
         itemStyle: {
           color: item.color
@@ -138,10 +166,14 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
   return (
     <>
       {isEmpty ? (
-        <EmptyData height={height} title={title}></EmptyData>
+        <EmptyData
+          height={height}
+          title={_.get(title, 'text', title || '')}
+        ></EmptyData>
       ) : (
         <Chart
           height={height}
+          chartHeight={typeof height === 'number' ? height - 10 : undefined}
           options={dataOptions}
           width={width || '100%'}
         ></Chart>
@@ -150,4 +182,4 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
   );
 };
 
-export default memo(BarChart);
+export default BarChart;

src/components/echarts/line-chart.tsx

@@ -3,7 +3,7 @@ import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import { genColors } from '@/utils';
 import _ from 'lodash';
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import echarts from '.';
 import { ChartProps } from './types';
 
@@ -169,4 +169,4 @@ const LineChart: React.FC<ChartProps> = (props) => {
   );
 };
 
-export default memo(LineChart);
+export default LineChart;

src/components/echarts/mix-line-bar.tsx

@@ -158,7 +158,10 @@ const MixLineBarChart: React.FC<
   return (
     <>
       {!lineSeriesData.length && !barSeriesData.length ? (
-        <EmptyData height={height} title={title}></EmptyData>
+        <EmptyData
+          height={height}
+          title={_.get(title, 'text', title || '')}
+        ></EmptyData>
       ) : (
         <Chart
           height={height}

src/components/echarts/scatter.tsx

@@ -2,12 +2,26 @@ import Chart from '@/components/echarts/chart';
 import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import React, { memo, useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { ChartProps } from './types';
 
-const Scatter: React.FC<ChartProps> = (props) => {
+const Scatter: React.FC<
+  ChartProps & {
+    xMax?: number;
+    yMax?: number;
+  }
+> = (props) => {
   const { grid, title: titleConfig, isDark, chartColorMap } = useChartConfig();
-  const { seriesData, xAxisData, height, width, showEmpty, title } = props;
+  const {
+    seriesData,
+    xAxisData,
+    height,
+    width,
+    showEmpty,
+    title,
+    xMax = 1,
+    yMax = 1
+  } = props;
 
   const chart = useRef<any>(null);
 
@@ -36,8 +50,8 @@ const Scatter: React.FC<ChartProps> = (props) => {
         borderRadius: 4
       },
       xAxis: {
-        min: -1,
-        max: 1,
+        min: -xMax,
+        max: xMax,
         scale: false,
         slient: true,
         splitNumber: 15,
@@ -62,8 +76,8 @@ const Scatter: React.FC<ChartProps> = (props) => {
         boundaryGap: [0.05, 0.05]
       },
       yAxis: {
-        min: -1,
-        max: 1,
+        min: -yMax,
+        max: yMax,
         scale: false,
         slient: true,
         splitNumber: 10,
@@ -99,7 +113,7 @@ const Scatter: React.FC<ChartProps> = (props) => {
       },
       series: []
     };
-  }, [isDark]);
+  }, [isDark, xMax, yMax]);
 
   const findOverlappingPoints = useCallback(
     (data: any[], currentPoint: any) => {
@@ -201,7 +215,10 @@ const Scatter: React.FC<ChartProps> = (props) => {
   return (
     <>
       {!seriesData.length && showEmpty ? (
-        <EmptyData height={height} title={title}></EmptyData>
+        <EmptyData
+          height={height}
+          title={_.get(title, 'text', title || '')}
+        ></EmptyData>
       ) : (
         <Chart
           ref={chart}
@@ -214,4 +231,4 @@ const Scatter: React.FC<ChartProps> = (props) => {
   );
 };
 
-export default memo(Scatter);
+export default Scatter;

src/components/footer/index.tsx

@@ -3,7 +3,7 @@ import { getAtomStorage } from '@/atoms/utils';
 import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/constants/external-links';
 import { useIntl } from '@umijs/max';
-import { Button, Divider, Modal } from 'antd';
+import { Button, Divider, Modal, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import styled from 'styled-components';
 
@@ -54,9 +54,15 @@ const Footer: React.FC = () => {
               <CompanyWrapper>
                 <span>&copy;</span>
                 <span> {new Date().getFullYear()}</span>
-                <span> {intl.formatMessage({ id: 'settings.company' })}</span>
+                <Typography.Link
+                  href="https://gpustack.ai"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {intl.formatMessage({ id: 'settings.company' })}
+                </Typography.Link>
               </CompanyWrapper>
-              <Divider type="vertical" />
+              <Divider orientation="vertical" />
               <Button
                 type="link"
                 size="small"
@@ -65,7 +71,7 @@ const Footer: React.FC = () => {
               >
                 {intl.formatMessage({ id: 'common.button.help' })}
               </Button>
-              <Divider type="vertical" />
+              <Divider orientation="vertical" />
               <Button type="link" size="small" onClick={showVersion}>
                 {getAtomStorage(GPUStackVersionAtom)?.version}
               </Button>

src/components/highlight-code/code-viewer-dark.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import CodeViewer from './code-viewer';
 import './styles/dark.less';
 
@@ -11,6 +10,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 const DarkViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -20,7 +20,8 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
     autodetect,
     ignoreIllegals,
     copyable,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props || {};
 
   return (
@@ -34,8 +35,9 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
       autodetect={autodetect}
       ignoreIllegals={ignoreIllegals}
       copyable={copyable}
+      xScrollable={xScrollable}
     ></CodeViewer>
   );
 };
 
-export default memo(DarkViewer);
+export default DarkViewer;

src/components/highlight-code/code-viewer-light.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import CodeViewer from './code-viewer';
 import './styles/light.less';
 
@@ -11,6 +10,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 const LightViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -21,7 +21,8 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
     ignoreIllegals,
     copyable,
     style,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props || {};
 
   return (
@@ -35,8 +36,9 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
       autodetect={autodetect}
       ignoreIllegals={ignoreIllegals}
       copyable={copyable}
+      xScrollable={xScrollable}
     ></CodeViewer>
   );
 };
 
-export default memo(LightViewer);
+export default LightViewer;

src/components/highlight-code/code-viewer.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import hljs from 'highlight.js';
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import styled from 'styled-components';
 import CopyButton from '../copy-button';
 import { escapeHtml } from './utils';
@@ -15,6 +15,7 @@ interface CodeViewerProps {
   height?: string | number;
   theme?: 'light' | 'dark';
   style?: React.CSSProperties;
+  xScrollable?: boolean;
 }
 
 interface CodeHeaderProps {
@@ -43,6 +44,14 @@ const CodeHeaderWrapper = styled.div`
 
 const Wrapper = styled.div`
   border-radius: var(--border-radius-mini);
+  &:hover {
+    .custome-scrollbar {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+    }
+  }
 `;
 
 const CodeHeader: React.FC<CodeHeaderProps> = ({
@@ -80,7 +89,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     ignoreIllegals = true,
     copyable = true,
     height = 'auto',
-    style
+    style,
+    xScrollable = false
   } = props || {};
 
   const highlightedCode = useMemo(() => {
@@ -131,7 +141,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
           'code-pre custome-scrollbar custom-scrollbar-horizontal ',
           {
             dark: props.theme === 'dark',
-            light: props.theme === 'light'
+            light: props.theme === 'light',
+            'x-scrollable': xScrollable
           }
         )}
         style={{
@@ -141,7 +152,10 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
         }}
       >
         <code
-          style={{ minHeight: height }}
+          style={{
+            minHeight: height,
+            ...(xScrollable ? { width: 'max-content' } : {})
+          }}
           className={classNames(highlightedCode.className, {
             dark: props.theme === 'dark',
             light: props.theme === 'light'
@@ -155,4 +169,4 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   );
 };
 
-export default memo(CodeViewer);
+export default CodeViewer;

src/components/highlight-code/index.tsx

@@ -10,6 +10,7 @@ const HighlightCode: React.FC<{
   copyable?: boolean;
   theme?: 'light' | 'dark';
   fixedTheme?: 'light' | 'dark';
+  xScrollable?: boolean;
   height?: string | number;
   style?: React.CSSProperties;
   copyValue?: string;
@@ -21,7 +22,8 @@ const HighlightCode: React.FC<{
     lang = 'bash',
     copyable = true,
     theme,
-    height = 'auto'
+    height = 'auto',
+    xScrollable = false
   } = props;
 
   const { userSettings } = useUserSettings();
@@ -40,6 +42,7 @@ const HighlightCode: React.FC<{
           copyValue={copyValue}
           copyable={copyable}
           height={height}
+          xScrollable={xScrollable}
           style={style}
         />
       ) : (
@@ -50,6 +53,7 @@ const HighlightCode: React.FC<{
           copyValue={copyValue}
           copyable={copyable}
           height={height}
+          xScrollable={xScrollable}
         />
       )}
     </div>

src/components/highlight-code/styles/index.less

@@ -46,7 +46,7 @@
     white-space: pre-wrap;
 
     code {
-      line-height: 1.5;
+      line-height: 1.6;
     }
 
     &.copyable {

src/components/icon-font/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: iconfont; /* Project id 4613488 */
-  src: url('iconfont.woff2?t=1763436184844') format('woff2'),
-       url('iconfont.woff?t=1763436184844') format('woff'),
-       url('iconfont.ttf?t=1763436184844') format('truetype');
+  src: url('iconfont.woff2?t=1770985961668') format('woff2'),
+       url('iconfont.woff?t=1770985961668') format('woff'),
+       url('iconfont.ttf?t=1770985961668') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,162 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-grafana::before {
+  content: "\e61e";
+}
+
+.icon-chart::before {
+  content: "\e6da";
+}
+
+.icon-monitor-02::before {
+  content: "\e6d9";
+}
+
+.icon-monitor::before {
+  content: "\e6d8";
+}
+
+.icon-metrics::before {
+  content: "\e6d6";
+}
+
+.icon-export::before {
+  content: "\e6d7";
+}
+
+.icon-license::before {
+  content: "\e6d5";
+}
+
+.icon-community::before {
+  content: "\e6d3";
+}
+
+.icon-person::before {
+  content: "\e6d4";
+}
+
+.icon-public::before {
+  content: "\e6d2";
+}
+
+.icon-charger::before {
+  content: "\e6d0";
+}
+
+.icon-disabled::before {
+  content: "\e6d1";
+}
+
+.icon-source::before {
+  content: "\e6cf";
+}
+
+.icon-Serviceprovider::before {
+  content: "\e630";
+}
+
+.icon-database::before {
+  content: "\e6ce";
+}
+
+.icon-filters::before {
+  content: "\e6cc";
+}
+
+.icon-speed-filled::before {
+  content: "\e6cb";
+}
+
+.icon-shield::before {
+  content: "\e6c9";
+}
+
+.icon-shield-filled::before {
+  content: "\e6ca";
+}
+
+.icon-openai::before {
+  content: "\e61d";
+}
+
+.icon-anthropic::before {
+  content: "\e74d";
+}
+
+.icon-doubao::before {
+  content: "\e618";
+}
+
+.icon-qwen::before {
+  content: "\e8b2";
+}
+
+.icon-deepseek::before {
+  content: "\e61c";
+}
+
+.icon-extension-outline::before {
+  content: "\e6c7";
+}
+
+.icon-extension-filled::before {
+  content: "\e6c8";
+}
+
+.icon-thead::before {
+  content: "\e617";
+}
+
+.icon-video-filled02::before {
+  content: "\e6c5";
+}
+
+.icon-video-outline::before {
+  content: "\e6c6";
+}
+
+.icon-video::before {
+  content: "\e6c3";
+}
+
+.icon-video-filled::before {
+  content: "\e6c4";
+}
+
+.icon-refresh::before {
+  content: "\e6c2";
+}
+
+.icon-settings-02::before {
+  content: "\e6bf";
+}
+
+.icon-arrow_forward::before {
+  content: "\e6c0";
+}
+
+.icon-logout::before {
+  content: "\e6c1";
+}
+
+.icon-amd-logo::before {
+  content: "\e6be";
+}
+
+.icon-cloud::before {
+  content: "\e6bc";
+}
+
+.icon-server02::before {
+  content: "\e6bd";
+}
+
+.icon-drag_handle::before {
+  content: "\e6b9";
+}
+
 .icon-basic::before {
   content: "\e6bb";
 }

src/components/icon-font/iconfont/iconfont.json

@@ -5,6 +5,279 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "31689363",
+      "name": "grafana (2)",
+      "font_class": "grafana",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "46845894",
+      "name": "chart",
+      "font_class": "chart",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "46844385",
+      "name": "monitor",
+      "font_class": "monitor-02",
+      "unicode": "e6d9",
+      "unicode_decimal": 59097
+    },
+    {
+      "icon_id": "46842822",
+      "name": "monitor",
+      "font_class": "monitor",
+      "unicode": "e6d8",
+      "unicode_decimal": 59096
+    },
+    {
+      "icon_id": "46821022",
+      "name": "metrics",
+      "font_class": "metrics",
+      "unicode": "e6d6",
+      "unicode_decimal": 59094
+    },
+    {
+      "icon_id": "46812763",
+      "name": "export",
+      "font_class": "export",
+      "unicode": "e6d7",
+      "unicode_decimal": 59095
+    },
+    {
+      "icon_id": "46802651",
+      "name": "license",
+      "font_class": "license",
+      "unicode": "e6d5",
+      "unicode_decimal": 59093
+    },
+    {
+      "icon_id": "46790594",
+      "name": "crowdsource_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "community",
+      "unicode": "e6d3",
+      "unicode_decimal": 59091
+    },
+    {
+      "icon_id": "46790593",
+      "name": "person_celebrate_24dp_1F1F1F_FILL0_wght300_GRAD0_o",
+      "font_class": "person",
+      "unicode": "e6d4",
+      "unicode_decimal": 59092
+    },
+    {
+      "icon_id": "46790615",
+      "name": "public_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "public",
+      "unicode": "e6d2",
+      "unicode_decimal": 59090
+    },
+    {
+      "icon_id": "46783187",
+      "name": "charger",
+      "font_class": "charger",
+      "unicode": "e6d0",
+      "unicode_decimal": 59088
+    },
+    {
+      "icon_id": "46783186",
+      "name": "disabled",
+      "font_class": "disabled",
+      "unicode": "e6d1",
+      "unicode_decimal": 59089
+    },
+    {
+      "icon_id": "46775558",
+      "name": "source",
+      "font_class": "source",
+      "unicode": "e6cf",
+      "unicode_decimal": 59087
+    },
+    {
+      "icon_id": "2735079",
+      "name": "Service provider",
+      "font_class": "Serviceprovider",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "46719213",
+      "name": "database_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "database",
+      "unicode": "e6ce",
+      "unicode_decimal": 59086
+    },
+    {
+      "icon_id": "46714731",
+      "name": "manage_search_24dp_1F1F1F_FILL1_wght300_GRAD0_opsz",
+      "font_class": "filters",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
+    {
+      "icon_id": "46703055",
+      "name": "speed_24dp_1F1F1F_FILL1_wght300_GRAD0_opsz24",
+      "font_class": "speed-filled",
+      "unicode": "e6cb",
+      "unicode_decimal": 59083
+    },
+    {
+      "icon_id": "46702137",
+      "name": "shield_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "shield",
+      "unicode": "e6c9",
+      "unicode_decimal": 59081
+    },
+    {
+      "icon_id": "46702136",
+      "name": "shield_24dp_1F1F1F_FILL1_wght300_GRAD0_opsz24",
+      "font_class": "shield-filled",
+      "unicode": "e6ca",
+      "unicode_decimal": 59082
+    },
+    {
+      "icon_id": "42735715",
+      "name": "openai",
+      "font_class": "openai",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "39934600",
+      "name": "anthropic",
+      "font_class": "anthropic",
+      "unicode": "e74d",
+      "unicode_decimal": 59213
+    },
+    {
+      "icon_id": "40532962",
+      "name": "doubao",
+      "font_class": "doubao",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "43558740",
+      "name": "QWen",
+      "font_class": "qwen",
+      "unicode": "e8b2",
+      "unicode_decimal": 59570
+    },
+    {
+      "icon_id": "43616544",
+      "name": "deepseek-copy",
+      "font_class": "deepseek",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "46650646",
+      "name": "extension_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24",
+      "font_class": "extension-outline",
+      "unicode": "e6c7",
+      "unicode_decimal": 59079
+    },
+    {
+      "icon_id": "46650645",
+      "name": "extension_24dp_1F1F1F_FILL1_wght300_GRAD0_opsz24",
+      "font_class": "extension-filled",
+      "unicode": "e6c8",
+      "unicode_decimal": 59080
+    },
+    {
+      "icon_id": "43960229",
+      "name": "thead",
+      "font_class": "thead",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "46626616",
+      "name": "video-filled02",
+      "font_class": "video-filled02",
+      "unicode": "e6c5",
+      "unicode_decimal": 59077
+    },
+    {
+      "icon_id": "46626615",
+      "name": "video-outline",
+      "font_class": "video-outline",
+      "unicode": "e6c6",
+      "unicode_decimal": 59078
+    },
+    {
+      "icon_id": "46616487",
+      "name": "video",
+      "font_class": "video",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "46616486",
+      "name": "video-filled",
+      "font_class": "video-filled",
+      "unicode": "e6c4",
+      "unicode_decimal": 59076
+    },
+    {
+      "icon_id": "46569108",
+      "name": "refresh",
+      "font_class": "refresh",
+      "unicode": "e6c2",
+      "unicode_decimal": 59074
+    },
+    {
+      "icon_id": "46569091",
+      "name": "settings",
+      "font_class": "settings-02",
+      "unicode": "e6bf",
+      "unicode_decimal": 59071
+    },
+    {
+      "icon_id": "46569092",
+      "name": "arrow_forward",
+      "font_class": "arrow_forward",
+      "unicode": "e6c0",
+      "unicode_decimal": 59072
+    },
+    {
+      "icon_id": "46569093",
+      "name": "logout",
+      "font_class": "logout",
+      "unicode": "e6c1",
+      "unicode_decimal": 59073
+    },
+    {
+      "icon_id": "46548884",
+      "name": "amd-logo",
+      "font_class": "amd-logo",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "46296038",
+      "name": "cloud",
+      "font_class": "cloud",
+      "unicode": "e6bc",
+      "unicode_decimal": 59068
+    },
+    {
+      "icon_id": "46296037",
+      "name": "server",
+      "font_class": "server02",
+      "unicode": "e6bd",
+      "unicode_decimal": 59069
+    },
+    {
+      "icon_id": "46272083",
+      "name": "drag_handle",
+      "font_class": "drag_handle",
+      "unicode": "e6b9",
+      "unicode_decimal": 59065
+    },
     {
       "icon_id": "46055620",
       "name": "basic",

src/components/icon-font/icons.ts

@@ -1,6 +1,7 @@
 import IconFont from '@/components/icon-font';
 import {
   ApiOutlined,
+  CopyOutlined,
   DeleteOutlined,
   DockerOutlined,
   DownloadOutlined,
@@ -10,6 +11,7 @@ import {
   KubernetesOutlined,
   ProfileOutlined,
   RetweetOutlined,
+  StarOutlined,
   ThunderboltOutlined
 } from '@ant-design/icons';
 import React from 'react';
@@ -58,7 +60,12 @@ const icons = {
   LockPerson: React.createElement(IconFont, { type: 'icon-lock_person' }),
   LockOpen: React.createElement(IconFont, { type: 'icon-lock_open' }),
   Permission: React.createElement(IconFont, { type: 'icon-permission' }),
-  CaptivePortal: React.createElement(IconFont, { type: 'icon-captive_portal' })
+  CaptivePortal: React.createElement(IconFont, { type: 'icon-captive_portal' }),
+  StarOutlined: React.createElement(StarOutlined),
+  Charger: React.createElement(IconFont, { type: 'icon-charger' }),
+  Disabled: React.createElement(IconFont, { type: 'icon-disabled' }),
+  CopyOutlined: React.createElement(CopyOutlined),
+  Metrics: React.createElement(IconFont, { type: 'icon-metrics' })
 };
 
 export default icons;

src/components/label-selector/autocomplete-item.tsx

@@ -38,7 +38,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
 }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
-  const { options } = useLabelSelectorContext();
+  const { options, placeholder = [] } = useLabelSelectorContext();
 
   const keyOptions = useMemo(() => {
     return options?.filter(
@@ -98,7 +98,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
               options={keyOptions}
               disabled={disabled}
               checkStatus="success"
-              label={intl.formatMessage({ id: 'common.input.key' })}
+              label={
+                placeholder?.[0] ||
+                intl.formatMessage({ id: 'common.input.key' })
+              }
               value={label.key}
               onChange={handleOnKeyChange}
               onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
@@ -113,7 +116,10 @@ const LabelItem: React.FC<LabelItemProps> = ({
             options={valueOptions}
             disabled={disabled}
             checkStatus={label.value ? 'success' : ''}
-            label={intl.formatMessage({ id: 'common.input.value' })}
+            label={
+              placeholder?.[1] ||
+              intl.formatMessage({ id: 'common.input.value' })
+            }
             value={label.value}
             onChange={handleOnValueChange}
             onBlur={(e: any) => onBlur?.(e, 'value')}

src/components/label-selector/context.ts

@@ -6,6 +6,7 @@ interface LabelSelectorContextProps {
     value: string | number;
     children?: { label: string; value: string | number }[];
   }>;
+  placeholder?: string[];
   currentData?: Record<string, any>;
 }
 

src/components/label-selector/index.tsx

@@ -10,6 +10,7 @@ interface LabelSelectorProps {
   description?: React.ReactNode;
   disabled?: boolean;
   isAutoComplete?: boolean;
+  enablePaste?: boolean;
   onChange?: (labels: Record<string, any>) => void;
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
@@ -24,7 +25,8 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   label,
   btnText,
   description,
-  isAutoComplete
+  isAutoComplete,
+  enablePaste = true
 }) => {
   const intl = useIntl();
   const [labelsData, setLabelsData] = useState({});
@@ -73,17 +75,17 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
     e: React.ClipboardEvent<HTMLTextAreaElement>,
     index: number
   ) => {
+    if (!enablePaste) return;
     const clipboardText = e.clipboardData.getData('text');
     if (!clipboardText || clipboardText.indexOf('=') === -1) return;
     e.preventDefault();
 
-    const lines = clipboardText
-      .split(/\r?\n/)
-      .map((line) => line.trim())
-      .filter((line) => line && line.includes('='));
+    const lines = _.split(clipboardText, /\r?\n/)
+      .map((line: string) => line.trim())
+      .filter((line: string) => line && line.includes('='));
 
-    const parsedData = lines.map((line) => {
-      const [key, value] = line.split('=').map((part) => part.trim());
+    const parsedData = lines.map((line: string) => {
+      const [key, value] = line.split(/=(.+)/).map((s) => s.trim());
       return { key, value };
     });
 

src/components/label-selector/inner.tsx

@@ -1,6 +1,5 @@
-import { useIntl } from '@umijs/max';
 import _ from 'lodash';
-import React, { useEffect } from 'react';
+import React from 'react';
 import AutoCompleteItem from './autocomplete-item';
 import LabelItem from './label-item';
 import Wrapper from './wrapper';
@@ -33,12 +32,6 @@ const Inner: React.FC<LabelSelectorProps> = ({
   description,
   isAutoComplete
 }) => {
-  const intl = useIntl();
-
-  useEffect(() => {
-    console.log('labels changed in Inner', labels);
-  }, [labels]);
-
   const updateLabels = (list: { key: string; value: string }[]) => {
     const newLabels = _.reduce(
       list,

src/components/label-selector/label-item.tsx

@@ -1,5 +1,4 @@
 import SealInput from '@/components/seal-form/seal-input';
-import { Global } from '@/config/global';
 import { MinusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
@@ -84,15 +83,17 @@ const LabelItem: React.FC<LabelItemProps> = ({
             open={open}
             title={intl.formatMessage({ id: 'resources.table.key.tips' })}
           >
-            <SealInput.Input
-              disabled={disabled}
-              checkStatus="success"
-              label={intl.formatMessage({ id: 'common.input.key' })}
-              value={label.key}
-              onChange={handleOnKeyChange}
-              onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
-              onPaste={onPaste}
-            ></SealInput.Input>
+            <span>
+              <SealInput.Input
+                disabled={disabled}
+                checkStatus="success"
+                label={intl.formatMessage({ id: 'common.input.key' })}
+                value={label.key}
+                onChange={handleOnKeyChange}
+                onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
+                onPaste={onPaste}
+              ></SealInput.Input>
+            </span>
           </Tooltip>
         )}
       </div>

src/components/label-selector/wrapper.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 interface WrapperProps {
+  required?: boolean;
   label?: React.ReactNode;
   description?: React.ReactNode;
   labelExtra?: React.ReactNode;
@@ -13,7 +14,13 @@ interface WrapperProps {
   btnText?: string;
   disabled?: boolean;
   onAdd?: () => void;
+  styles?: {
+    wrapper?: React.CSSProperties;
+  };
   button?: React.ReactNode;
+  styles?: {
+    wrapper?: React.CSSProperties;
+  };
 }
 
 const Container = styled.div`
@@ -35,10 +42,11 @@ const Container = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
-  margin-top: 16px;
+  margin-top: 8px;
 `;
 
 const Wrapper: React.FC<WrapperProps> = ({
+  required,
   children,
   label,
   description,
@@ -46,14 +54,16 @@ const Wrapper: React.FC<WrapperProps> = ({
   onAdd,
   btnText,
   disabled,
-  button
+  button,
+  styles
 }) => {
   const intl = useIntl();
   return (
-    <Container>
+    <Container style={styles?.wrapper}>
       {label && (
         <span className="label">
           <LabelInfo
+            required={required}
             label={label}
             description={description}
             labelExtra={labelExtra}

src/components/list-input/hint-input.tsx

@@ -8,13 +8,14 @@ interface HintInputProps {
   onChange: (value: string) => void;
   onBlur?: (e: any) => void;
   placeholder?: string;
+  trim?: boolean;
   sourceOptions?: Global.HintOptions[];
 }
 
 const matchReg = /[^=]+=[^=]*$/;
 
 const HintInput: React.FC<HintInputProps> = (props) => {
-  const { value, label, onChange, onBlur, sourceOptions } = props;
+  const { value, label, onChange, onBlur, sourceOptions, trim = true } = props;
   const cursorPosRef = React.useRef(0);
   const contextBeforeCursorRef = React.useRef('');
   const [options, setOptions] = React.useState<
@@ -70,11 +71,7 @@ const HintInput: React.FC<HintInputProps> = (props) => {
 
   const handleInput = (e: any) => {
     getContextBeforeCursor(e);
-    onChange(e.target.value?.trim());
-  };
-
-  const handleOnChange = (value: string) => {
-    onChange(value?.trim());
+    onChange(e.target.value);
   };
 
   const handleOnSelect = (value: string) => {
@@ -93,9 +90,10 @@ const HintInput: React.FC<HintInputProps> = (props) => {
       onBlur={onBlur}
       label={label}
       options={options}
-      style={{ width: '100%' }}
+      trim={trim}
+      style={{ flex: 1 }}
     />
   );
 };
 
-export default React.memo(HintInput);
+export default HintInput;

src/components/list-input/index.tsx

@@ -1,10 +1,10 @@
-import { useIntl } from '@umijs/max';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Wrapper from '../label-selector/wrapper';
 import ListItem from './list-item';
 
 interface ListInputProps {
+  required?: boolean;
   dataList: string[];
   label?: React.ReactNode;
   description?: React.ReactNode;
@@ -12,13 +12,24 @@ interface ListInputProps {
   options?: Global.HintOptions[];
   placeholder?: string;
   labelExtra?: React.ReactNode;
+  trim?: boolean;
+  styles?: {
+    wrapper?: React.CSSProperties;
+    item?: React.CSSProperties;
+  };
   onChange: (data: string[]) => void;
   onBlur?: (e: any, index: number) => void;
   onDelete?: (index: number) => void;
+  renderItem?: (
+    data: any,
+    props: {
+      onChange: (value: string) => void;
+      onBlur?: (e: any) => void;
+    }
+  ) => React.ReactNode;
 }
 
 const ListInput: React.FC<ListInputProps> = (props) => {
-  const intl = useIntl();
   const {
     dataList,
     label,
@@ -28,7 +39,11 @@ const ListInput: React.FC<ListInputProps> = (props) => {
     onDelete,
     btnText,
     options,
-    labelExtra
+    labelExtra,
+    trim = true,
+    styles,
+    required,
+    renderItem
   } = props;
   const [list, setList] = React.useState<{ value: string; uid: number }[]>([]);
   const countRef = React.useRef(0);
@@ -78,9 +93,17 @@ const ListInput: React.FC<ListInputProps> = (props) => {
     }
   }, [dataList]);
 
+  useEffect(() => {
+    if (required && list.length === 0) {
+      handleOnAdd();
+    }
+  }, [required]);
+
   return (
     <Wrapper
+      styles={styles}
       label={label}
+      required={required}
       description={description}
       labelExtra={labelExtra}
       onAdd={handleOnAdd}
@@ -90,13 +113,17 @@ const ListInput: React.FC<ListInputProps> = (props) => {
         {_.map(list, (item: any, index: number) => {
           return (
             <ListItem
+              required={required && list.length === 1}
               placeholder={props.placeholder}
               options={options}
+              data={item}
               key={item.uid}
               value={item.value}
               onBlur={(e) => onBlur?.(e, index)}
               onRemove={() => handleOnRemove(index)}
               onChange={(val) => handleOnChange(val, index)}
+              trim={trim}
+              renderItem={renderItem}
             />
           );
         })}