chore: settings

src/components/SwitchOrigin/index.tsx

@@ -1,9 +1,10 @@
 import { FC } from 'react';
-import { Form, Select, Tag } from 'antd';
+import { Link } from 'react-router-dom';
+import { Form, Select, Tag, Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 import useJson from '@/hooks/useJson';
-import { DISABLE_AUTO_COMPLETE, CHAT_CONF_JSON, CHAT_AWESOME_JSON } from '@/utils';
-
+import { DISABLE_AUTO_COMPLETE, CHAT_AWESOME_JSON } from '@/utils';
 interface SwitchOriginProps {
   name: string;
 }
@@ -13,13 +14,27 @@ const SwitchOrigin: FC<SwitchOriginProps> = ({ name }) => {
 
   return (
     <Form.Item
-      label={<span>Switch Origin ({name === 'origin' ? 'Main' : 'SystemTray'})</span>}
+      label={
+        <span>
+          Switch Origin ({name === 'origin' ? 'Main' : 'SystemTray'}){' '}
+          <Tooltip
+            title={
+              <div>
+                If you need to set a new URL as the application loading window, please add the URL
+                in the <Link to="/">Awesome</Link> menu and then select it.
+              </div>
+            }
+          >
+            <QuestionCircleOutlined style={{ color: '#1677ff' }} />
+          </Tooltip>
+        </span>
+      }
       name={name}
     >
       <Select showSearch {...DISABLE_AUTO_COMPLETE} optionLabelProp="url">
         {[{ title: 'ChatGPT', url: 'https://chat.openai.com' }, ...list].map((i) => (
-          <Select.Option key={i.url} label={i.title} value={i.url}>
-            <Tag color="geekblue">{i.title}</Tag> {i.url}
+          <Select.Option key={i.url} label={i.title} value={i.url} title={i.url}>
+            <Tag color={i.title === 'ChatGPT' ? 'orange' : 'geekblue'}>{i.title}</Tag> {i.url}
           </Select.Option>
         ))}
       </Select>

src/layout/index.scss

@@ -23,6 +23,10 @@
   -webkit-user-select: none;
 }
 
+.ant-layout-sider-children {
+  overflow-y: auto;
+}
+
 .chat-container {
   padding: 20px;
   overflow: hidden;

src/layout/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Layout, Menu, Tooltip, ConfigProvider, theme, Tag } from 'antd';
 import { SyncOutlined } from '@ant-design/icons';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -15,8 +15,13 @@ export default function ChatLayout() {
   const [collapsed, setCollapsed] = useState(false);
   const [appInfo, setAppInfo] = useState<Record<string, any>>({});
   const location = useLocation();
+  const [menuKey, setMenuKey] = useState(location.pathname);
   const go = useNavigate();
 
+  useEffect(() => {
+    setMenuKey(location.pathname);
+  }, [location.pathname]);
+
   useInit(async () => {
     setAppInfo({
       appName: await getName(),
@@ -65,7 +70,7 @@ export default function ChatLayout() {
           </div>
 
           <Menu
-            defaultSelectedKeys={[location.pathname]}
+            selectedKeys={[menuKey]}
             mode="inline"
             theme={appInfo.appTheme === 'dark' ? 'dark' : 'light'}
             inlineIndent={12}

src/main.scss

@@ -83,7 +83,6 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    // color: #2a2a2a;
   }
 
   span {

src/view/model/SyncCustom/index.tsx

@@ -124,7 +124,12 @@ export default function SyncCustom() {
 
   return (
     <div>
-      <Button className="chat-add-btn" type="primary" onClick={opInfo.opNew}>
+      <Button
+        style={{ marginBottom: 10 }}
+        className="chat-add-btn"
+        type="primary"
+        onClick={opInfo.opNew}
+      >
         Add PATH
       </Button>
       <Table

src/view/settings/TrayWindow.tsx

@@ -1,8 +1,22 @@
-import { Form, Switch, Input } from 'antd';
+import { Form, Switch, Input, Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 import { DISABLE_AUTO_COMPLETE } from '@/utils';
 import SwitchOrigin from '@/components/SwitchOrigin';
 
+const UALabel = () => {
+  return (
+    <span>
+      User Agent (SystemTray){' '}
+      <Tooltip
+        title={<div>For a better experience, we recommend using the Mobile User-Agent.</div>}
+      >
+        <QuestionCircleOutlined style={{ color: '#1677ff' }} />
+      </Tooltip>
+    </span>
+  );
+};
+
 export default function General() {
   return (
     <>
@@ -10,7 +24,7 @@ export default function General() {
         <Switch />
       </Form.Item>
       <SwitchOrigin name="tray_origin" />
-      <Form.Item label="User Agent (SystemTray)" name="ua_tray">
+      <Form.Item label={<UALabel />} name="ua_tray">
         <Input.TextArea
           autoSize={{ minRows: 4, maxRows: 4 }}
           {...DISABLE_AUTO_COMPLETE}

src/view/settings/index.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
-import { Form, Tabs, Space, Button, message } from 'antd';
-import { invoke, dialog, process } from '@tauri-apps/api';
+import { Form, Tabs, Space, Button, Popconfirm, message } from 'antd';
+import { invoke, dialog, process, path, shell } from '@tauri-apps/api';
 import { clone, omit, isEqual } from 'lodash';
 
 import useInit from '@/hooks/useInit';
 import FilePath from '@/components/FilePath';
-import { CHAT_CONF_JSON } from '@/utils';
+import { chatRoot, CHAT_CONF_JSON } from '@/utils';
 import General from './General';
 import MainWindow from './MainWindow';
 import TrayWindow from './TrayWindow';
@@ -13,10 +13,11 @@ import TrayWindow from './TrayWindow';
 export default function Settings() {
   const [form] = Form.useForm();
   const [chatConf, setChatConf] = useState<any>(null);
+  const [filePath, setPath] = useState('');
 
   useInit(async () => {
-    const chatData = await invoke('get_chat_conf');
-    setChatConf(chatData);
+    setChatConf(await invoke('get_chat_conf'));
+    setPath(await path.join(await chatRoot(), CHAT_CONF_JSON));
   });
 
   useEffect(() => {
@@ -78,9 +79,22 @@ export default function Settings() {
             <Button type="primary" htmlType="submit">
               Submit
             </Button>
-            <Button type="dashed" onClick={onReset}>
-              Reset to defaults
-            </Button>
+            <Popconfirm
+              title={
+                <div style={{ width: 360 }}>
+                  Are you sure you want to reset the configuration file
+                  <a onClick={() => shell.open(filePath)} style={{ margin: '0 5px' }}>
+                    {filePath}
+                  </a>
+                  to the default?
+                </div>
+              }
+              onConfirm={onReset}
+              okText="Yes"
+              cancelText="No"
+            >
+              <Button type="dashed">Reset to defaults</Button>
+            </Popconfirm>
           </Space>
         </Form.Item>
       </Form>