feat: enhance channel options with tips and descriptions for better user guidance

web/default/src/constants/channel.constants.js

@@ -7,8 +7,20 @@ export const CHANNEL_OPTIONS = [
   {key: 24, text: 'Google Gemini', value: 24, color: 'orange'},
   {key: 28, text: 'Mistral AI', value: 28, color: 'orange'},
   {key: 41, text: 'Novita', value: 41, color: 'purple'},
-    {key: 40, text: '火山引擎', value: 40, color: 'blue'},
-    { key: 15, text: '百度文心千帆', value: 15, color: 'blue' },
+  {
+    key: 40,
+    text: '火山引擎',
+    value: 40,
+    color: 'blue',
+    description: '原字节跳动豆包',
+  },
+  {
+    key: 15,
+    text: '百度文心千帆',
+    value: 15,
+    color: 'blue',
+    tip: '请前往<a href="https://console.bce.baidu.com/qianfan/ais/console/applicationConsole/application/v1" target="_blank">此处</a>获取 AK（API Key）以及 SK（Secret Key）',
+  },
   {key: 17, text: '阿里通义千问', value: 17, color: 'orange'},
   {key: 18, text: '讯飞星火认知', value: 18, color: 'blue'},
   {key: 16, text: '智谱 ChatGLM', value: 16, color: 'violet'},
@@ -44,5 +56,5 @@ export const CHANNEL_OPTIONS = [
   {key: 6, text: '代理：OpenAI Max', value: 6, color: 'violet'},
   {key: 9, text: '代理：AI.LS', value: 9, color: 'yellow'},
   {key: 12, text: '代理：API2GPT', value: 12, color: 'blue'},
-    { key: 13, text: '代理：AIGC2D', value: 13, color: 'purple' }
+  {key: 13, text: '代理：AIGC2D', value: 13, color: 'purple'},
 ];

web/default/src/helpers/helper.js

@@ -0,0 +1,13 @@
+import {CHANNEL_OPTIONS} from '../constants';
+
+let channelMap = undefined;
+
+export function getChannelOption(channelId) {
+    if (channelMap === undefined) {
+        channelMap = {};
+        CHANNEL_OPTIONS.forEach((option) => {
+            channelMap[option.key] = option;
+        });
+    }
+    return channelMap[channelId];
+}

web/default/src/helpers/render.js

@@ -1,5 +1,6 @@
-import { Label } from 'semantic-ui-react';
-import { useTranslation } from 'react-i18next';
+import {Label, Message} from 'semantic-ui-react';
+import {getChannelOption} from './helper';
+import React from 'react';
 
 export function renderText(text, limit) {
   if (text.length > limit) {
@@ -98,3 +99,15 @@ export function renderColorLabel(text) {
     </Label>
   );
 }
+
+export function renderChannelTip(channelId) {
+  let channel = getChannelOption(channelId);
+  if (channel === undefined || channel.tip === undefined) {
+    return <></>;
+  }
+  return (
+      <Message>
+        <div dangerouslySetInnerHTML={{__html: channel.tip}}></div>
+      </Message>
+  );
+}

web/default/src/pages/Channel/EditChannel.js

@@ -1,25 +1,10 @@
 import React, {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {
-  Button,
-  Form,
-  Header,
-  Input,
-  Message,
-  Segment,
-  Card,
-} from 'semantic-ui-react';
+import {Button, Card, Form, Input, Message,} from 'semantic-ui-react';
 import {useNavigate, useParams} from 'react-router-dom';
-import {
-  API,
-  copy,
-  getChannelModels,
-  showError,
-  showInfo,
-  showSuccess,
-  verifyJSON,
-} from '../../helpers';
+import {API, copy, getChannelModels, showError, showInfo, showSuccess, verifyJSON,} from '../../helpers';
 import {CHANNEL_OPTIONS} from '../../constants';
+import {renderChannelTip} from '../../helpers/render';
 
 const MODEL_MAPPING_EXAMPLE = {
   'gpt-3.5-turbo-0301': 'gpt-3.5-turbo',
@@ -310,6 +295,7 @@ const EditChannel = () => {
                 options={groupOptions}
               />
             </Form.Field>
+            {renderChannelTip(inputs.type)}
 
             {/* Azure OpenAI specific fields */}
             {inputs.type === 3 && (