chore: show prompt to let the user know

web/src/components/ChannelsTable.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Input, Label, Pagination, Popup, Table } from 'semantic-ui-react';
+import { Button, Form, Input, Label, Message, Pagination, Popup, Table } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-import { API, showError, showInfo, showNotice, showSuccess, timestamp2string } from '../helpers';
+import { API, setPromptShown, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string } from '../helpers';
 
 import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
 import { renderGroup, renderNumber } from '../helpers/render';
@@ -55,6 +55,7 @@ const ChannelsTable = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
   const [searching, setSearching] = useState(false);
   const [updatingBalance, setUpdatingBalance] = useState(false);
+  const [showPrompt, setShowPrompt] = useState(shouldShowPrompt("channel-test"));
 
   const loadChannels = async (startIdx) => {
     const res = await API.get(`/api/channel/?p=${startIdx}`);
@@ -226,7 +227,6 @@ const ChannelsTable = () => {
       showInfo(`通道 ${name} 测试成功，耗时 ${time.toFixed(2)} 秒。`);
     } else {
       showError(message);
-      showNotice('当前版本测试是通过按照 OpenAI API 格式使用 gpt-3.5-turbo 模型进行非流式请求实现的，因此测试报错并不一定代表通道不可用，该功能后续会修复。');
     }
   };
 
@@ -317,7 +317,19 @@ const ChannelsTable = () => {
           onChange={handleKeywordChange}
         />
       </Form>
+      {
+        showPrompt && (
+          <Message onDismiss={() => {
+            setShowPrompt(false);
+            setPromptShown("channel-test");
+          }}>
+            当前版本测试是通过按照 OpenAI API 格式使用 gpt-3.5-turbo
+            模型进行非流式请求实现的，因此测试报错并不一定代表通道不可用，该功能后续会修复。
 
+            另外，OpenAI 渠道已经不再支持通过 key 获取余额，因此余额显示为 0。对于支持的渠道类型，请点击余额进行刷新。
+          </Message>
+        )
+      }
       <Table basic compact size='small'>
         <Table.Header>
           <Table.Row>

web/src/helpers/utils.js

@@ -187,3 +187,13 @@ export const verifyJSON = (str) => {
   }
   return true;
 };
+
+export function shouldShowPrompt(id) {
+  let prompt = localStorage.getItem(`prompt-${id}`);
+  return !prompt;
+
+}
+
+export function setPromptShown(id) {
+  localStorage.setItem(`prompt-${id}`, 'true');
+}