💬 refactor: separate chat settings into dedicated tab

- Create new ChatsSetting component for managing chat configurations
- Add "Chat Settings" tab with MessageSquare icon in settings page
- Remove chat settings section from OperationSetting component
- Update import path to use Chat directory structure

web/src/components/settings/ChatsSetting.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Spin } from '@douyinfe/semi-ui';
+import SettingsChats from '../../pages/Setting/Chat/SettingsChats.js';
+import { API, showError } from '../../helpers';
+
+const ChatsSetting = () => {
+  let [inputs, setInputs] = useState({
+    /* 聊天设置 */
+    Chats: '[]',
+  });
+
+  let [loading, setLoading] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (
+          item.key.endsWith('Enabled') ||
+          ['DefaultCollapseSidebar'].includes(item.key)
+        ) {
+          newInputs[item.key] = item.value === 'true' ? true : false;
+        } else {
+          newInputs[item.key] = item.value;
+        }
+      });
+
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  async function onRefresh() {
+    try {
+      setLoading(true);
+      await getOptions();
+    } catch (error) {
+      showError('刷新失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    onRefresh();
+  }, []);
+
+  return (
+    <>
+      <Spin spinning={loading} size='large'>
+        {/* 聊天设置 */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingsChats options={inputs} refresh={onRefresh} />
+        </Card>
+      </Spin>
+    </>
+  );
+};
+
+export default ChatsSetting; 

web/src/components/settings/OperationSetting.js

@@ -7,7 +7,6 @@ import SettingsLog from '../../pages/Setting/Operation/SettingsLog.js';
 import SettingsDataDashboard from '../../pages/Setting/Operation/SettingsDataDashboard.js';
 import SettingsMonitoring from '../../pages/Setting/Operation/SettingsMonitoring.js';
 import SettingsCreditLimit from '../../pages/Setting/Operation/SettingsCreditLimit.js';
-import SettingsChats from '../../pages/Setting/Operation/SettingsChats.js';
 import { API, showError } from '../../helpers';
 
 const OperationSetting = () => {
@@ -56,9 +55,6 @@ const OperationSetting = () => {
     AutomaticDisableChannelEnabled: false,
     AutomaticEnableChannelEnabled: false,
     AutomaticDisableKeywords: '',
-
-    /* 聊天设置 */
-    Chats: '[]',
   });
 
   let [loading, setLoading] = useState(false);
@@ -131,10 +127,6 @@ const OperationSetting = () => {
         <Card style={{ marginTop: '10px' }}>
           <SettingsCreditLimit options={inputs} refresh={onRefresh} />
         </Card>
-        {/* 聊天设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsChats options={inputs} refresh={onRefresh} />
-        </Card>
       </Spin>
     </>
   );

web/src/components/settings/RateLimitSetting.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+import { Card, Spin } from '@douyinfe/semi-ui';
 
-import { API, showError, showSuccess } from '../../helpers/index.js';
-import SettingsChats from '../../pages/Setting/Operation/SettingsChats.js';
+import { API, showError } from '../../helpers/index.js';
 import { useTranslation } from 'react-i18next';
 import RequestRateLimit from '../../pages/Setting/RateLimit/SettingsRequestRateLimit.js';
 
@@ -24,14 +23,14 @@ const RateLimitSetting = () => {
     if (success) {
       let newInputs = {};
       data.forEach((item) => {
-      if (item.key === 'ModelRequestRateLimitGroup') {
-        item.value = JSON.stringify(JSON.parse(item.value), null, 2);
-      }
+        if (item.key === 'ModelRequestRateLimitGroup') {
+          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+        }
 
-      if (item.key.endsWith('Enabled')) {
-        newInputs[item.key] = item.value === 'true' ? true : false;
-      } else {
-        newInputs[item.key] = item.value;
+        if (item.key.endsWith('Enabled')) {
+          newInputs[item.key] = item.value === 'true' ? true : false;
+        } else {
+          newInputs[item.key] = item.value;
         }
       });
 

web/src/i18n/locales/en.json

@@ -1206,7 +1206,7 @@
   "默认折叠侧边栏": "Default collapse sidebar",
   "聊天链接功能已经弃用，请使用下方聊天设置功能": "Chat link function has been deprecated, please use the chat settings below",
   "你似乎并没有修改什么": "You seem to have not modified anything",
-  "令牌聊天设置": "Chat settings",
+  "聊天设置": "Chat settings",
   "必须将上方聊天链接全部设置为空，才能使用下方聊天设置功能": "Must set all chat links above to empty to use the chat settings below",
   "链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1": "The {key} in the link will be automatically replaced with sk-xxxx, the {address} will be automatically replaced with the server address in system settings, and the end will not have / and /v1",
   "聊天配置": "Chat configuration",

web/src/pages/Setting/Chat/SettingsChats.js

@@ -2,10 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import {
   Banner,
   Button,
-  Col,
   Form,
-  Popconfirm,
-  Row,
   Space,
   Spin,
 } from '@douyinfe/semi-ui';
@@ -16,7 +13,6 @@ import {
   showSuccess,
   showWarning,
   verifyJSON,
-  verifyJSONPromise,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
@@ -80,21 +76,6 @@ export default function SettingsChats(props) {
     }
   }
 
-  async function resetModelRatio() {
-    try {
-      let res = await API.post(`/api/option/rest_model_ratio`);
-      // return {success, message}
-      if (res.data.success) {
-        showSuccess(res.data.message);
-        props.refresh();
-      } else {
-        showError(res.data.message);
-      }
-    } catch (error) {
-      showError(error);
-    }
-  }
-
   useEffect(() => {
     const currentInputs = {};
     for (let key in props.options) {
@@ -119,13 +100,7 @@ export default function SettingsChats(props) {
         getFormApi={(formAPI) => (refForm.current = formAPI)}
         style={{ marginBottom: 15 }}
       >
-        <Form.Section text={t('令牌聊天设置')}>
-          <Banner
-            type='warning'
-            description={t(
-              '必须将上方聊天链接全部设置为空，才能使用下方聊天设置功能',
-            )}
-          />
+        <Form.Section text={t('聊天设置')}>
           <Banner
             type='info'
             description={t(

web/src/pages/Setting/Operation/SettingsGeneral.js

@@ -6,7 +6,6 @@ import {
   Form,
   Row,
   Spin,
-  Collapse,
   Modal,
 } from '@douyinfe/semi-ui';
 import {
@@ -92,10 +91,6 @@ export default function GeneralSettings(props) {
   return (
     <>
       <Spin spinning={loading}>
-        <Banner
-          type='warning'
-          description={t('聊天链接功能已经弃用，请使用下方聊天设置功能')}
-        />
         <Form
           values={inputs}
           getFormApi={(formAPI) => (refForm.current = formAPI)}

web/src/pages/Setting/index.js

@@ -9,7 +9,8 @@ import {
   Shapes,
   Cog,
   MoreHorizontal,
-  LayoutDashboard
+  LayoutDashboard,
+  MessageSquare
 } from 'lucide-react';
 
 import SystemSetting from '../../components/settings/SystemSetting.js';
@@ -20,6 +21,7 @@ import RateLimitSetting from '../../components/settings/RateLimitSetting.js';
 import ModelSetting from '../../components/settings/ModelSetting.js';
 import DashboardSetting from '../../components/settings/DashboardSetting.js';
 import RatioSetting from '../../components/settings/RatioSetting.js';
+import ChatsSetting from '../../components/settings/ChatsSetting.js';
 
 const Setting = () => {
   const { t } = useTranslation();
@@ -39,6 +41,16 @@ const Setting = () => {
       content: <OperationSetting />,
       itemKey: 'operation',
     });
+    panes.push({
+      tab: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+          <MessageSquare size={18} />
+          {t('聊天设置')}
+        </span>
+      ),
+      content: <ChatsSetting />,
+      itemKey: 'chats',
+    });
     panes.push({
       tab: (
         <span style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>