fix: 优化暂停按钮

Author: lrhh123

CHANGELOG.md

@@ -65,7 +65,7 @@
 - Add experimental support for vscode debugging
 - Revert https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2365 as default for users, provide as opt in option
 
-# 1.2.0-beta.1
+# 1.2.0
 
 - Fix #2402
 - Simplify configs (https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2406)

README.md

@@ -56,7 +56,7 @@
 
 ## 下载地址
 
-<a href="https://github.com/cs-lazy-tools/ChatGPT-On-CS/releases/download/v1.2.0-beta.1/1.2.0-beta.1.exe" style="display: inline-block; background-color: #008CBA; color: white; padding: 10px 20px; text-align: center; text-decoration: none; font-weight: bold; border-radius: 5px; margin: 4px 2px; cursor: pointer;">点击下载</a>
+<a href="https://github.com/cs-lazy-tools/ChatGPT-On-CS/releases/download/v1.2.0/1.2.0.exe" style="display: inline-block; background-color: #008CBA; color: white; padding: 10px 20px; text-align: center; text-decoration: none; font-weight: bold; border-radius: 5px; margin: 4px 2px; cursor: pointer;">点击下载</a>
 
 如果网络环境导致下载不了，可以使用下面的地址下载：
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chatgpt-on-cs",
   "description": "多平台智能客服，允许使用 ChatGPT 作为客服机器人",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0",
   "keywords": [
     "electron",
     "boilerplate",

release/app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-on-cs",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0",
   "description": "多平台智能客服，允许使用 ChatGPT 作为客服机器人",
   "license": "AGPL-3.0",
   "author": {

release/app/package.json

@@ -6,7 +6,6 @@ import Navbar from './components/layout/Navbar';
 import Footer from './components/layout/Footer';
 import ErrorBoundary from './components/ErrorBoundary';
 import HomePage from './pages/Home';
-import ChatSessionsTable from '../dataview-window/components/SessionHistory';
 import FullScreenLoader from './pages/FullScreenLoader';
 import Updater from './components/Updater';
 import SystemCheck from './components/SystemCheck';

src/renderer/main-window/App.tsx

@@ -1,6 +1,15 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { Checkbox, Stack, HStack, Tooltip } from '@chakra-ui/react';
+import {
+  Stack,
+  HStack,
+  Tooltip,
+  IconButton,
+  Text,
+  VStack,
+  Checkbox,
+} from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
+import { FiPause, FiPlay } from 'react-icons/fi'; // 引入播放器图标
 import { useToast } from '../../hooks/useToast';
 import {
   getConfig,
@@ -39,7 +48,6 @@ const Panels = () => {
     }
   });
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const pausedHandler = useCallback(
     (message: any) => {
       if (message.event === 'has_paused') {
@@ -63,9 +71,8 @@ const Panels = () => {
   useEffect(() => {
     const unregister = registerEventHandler(pausedHandler);
 
-    // 组件卸载时注销事件处理器
     return () => unregister();
-  }, [registerEventHandler, pausedHandler]); // eslint-disable-line
+  }, [registerEventHandler, pausedHandler]);
 
   useEffect(() => {
     if (data) {
@@ -83,7 +90,6 @@ const Panels = () => {
         cfg: updatedConfig,
       });
 
-      // 检查是否是 hasPaused 变更
       if ('hasPaused' in newConfig) {
         toast({
           title: '更新配置成功',
@@ -109,81 +115,84 @@ const Panels = () => {
   };
 
   return (
-    <>
-      <Stack spacing={4}>
-        <HStack width="full" alignItems="center">
-          <Checkbox
-            mr={4}
-            isChecked={driverSettings.hasPaused}
-            onChange={(e) =>
-              handleUpdateConfig({ hasPaused: e.target.checked })
-            }
-          >
-            <Tooltip label="暂停软件后，将不再自动回复消息">暂停软件</Tooltip>
-          </Checkbox>
-          <Checkbox
-            isChecked={driverSettings.hasKeywordMatch}
-            onChange={(e) =>
-              handleUpdateConfig({ hasKeywordMatch: e.target.checked })
-            }
-          >
-            <Tooltip label="将优先匹配关键词，未匹配的才去调用 GPT 接口">
-              关键词匹配
-            </Tooltip>
-          </Checkbox>
-          <Checkbox
-            isChecked={driverSettings.hasUseGpt}
-            onChange={(e) =>
-              handleUpdateConfig({ hasUseGpt: e.target.checked })
-            }
-          >
-            <Tooltip label="是否开启 GPT 回复，关闭后只会使用关键词回复">
-              GPT 回复
-            </Tooltip>
-          </Checkbox>
-        </HStack>
-        <HStack width="full" alignItems="center">
-          {/* <Checkbox
-            isChecked={driverSettings.hasMouseClose}
-            onChange={(e) =>
-              handleUpdateConfig({ hasMouseClose: e.target.checked })
-            }
-          >
-            <Tooltip label="是否开启鼠标移动时，自动暂停自动客服">
-              鼠标移动自动暂停
-            </Tooltip>
-          </Checkbox> */}
-          <Checkbox
-            isChecked={driverSettings.hasTransfer}
-            onChange={(e) =>
-              handleUpdateConfig({ hasTransfer: e.target.checked })
-            }
-          >
-            <Tooltip label="如果匹配到设定的关键词，将自动转人工">
-              关键词转人工
-            </Tooltip>
-          </Checkbox>
-          <Checkbox
-            isChecked={driverSettings.hasReplace}
-            onChange={(e) =>
-              handleUpdateConfig({ hasReplace: e.target.checked })
-            }
-          >
-            <Tooltip label="如果匹配到设定的关键词，将自动替换成自定义的关键词">
-              关键词替换
-            </Tooltip>
-          </Checkbox>
-          <Checkbox
-            isChecked={driverSettings.hasReplace}
-            onChange={(e) =>
-              handleUpdateConfig({ hasEscClose: e.target.checked })
+    <Stack spacing={4}>
+      <HStack width="full" alignItems="center" justifyContent="space-between">
+        <VStack width="35%">
+          <Text fontSize="md">
+            按下{driverSettings.hasPaused ? '开启' : '关闭'}自动回复
+          </Text>
+          <IconButton
+            icon={driverSettings.hasPaused ? <FiPlay /> : <FiPause />}
+            aria-label="Pause/Play"
+            size="lg"
+            mt={2}
+            onClick={() =>
+              handleUpdateConfig({ hasPaused: !driverSettings.hasPaused })
             }
-          >
-            <Tooltip label="当按下 ESC 键时自动暂停">按 ESC 键自动暂停</Tooltip>
-          </Checkbox>
-        </HStack>
-      </Stack>
-    </>
+            isRound
+            colorScheme={driverSettings.hasPaused ? 'green' : 'red'}
+          />
+        </VStack>
+        <VStack width="65%" alignItems="flex-start">
+          <HStack>
+            <Checkbox
+              isChecked={driverSettings.hasKeywordMatch}
+              onChange={(e) =>
+                handleUpdateConfig({ hasKeywordMatch: e.target.checked })
+              }
+            >
+              <Tooltip label="将优先匹配关键词，未匹配的才去调用 GPT 接口">
+                关键词匹配
+              </Tooltip>
+            </Checkbox>
+            <Checkbox
+              isChecked={driverSettings.hasUseGpt}
+              onChange={(e) =>
+                handleUpdateConfig({ hasUseGpt: e.target.checked })
+              }
+            >
+              <Tooltip label="是否开启 GPT 回复，关闭后只会使用关键词回复">
+                GPT 回复
+              </Tooltip>
+            </Checkbox>
+          </HStack>
+          <HStack>
+            <Checkbox
+              isChecked={driverSettings.hasTransfer}
+              onChange={(e) =>
+                handleUpdateConfig({ hasTransfer: e.target.checked })
+              }
+            >
+              <Tooltip label="如果匹配到设定的关键词，将自动转人工">
+                关键词转人工
+              </Tooltip>
+            </Checkbox>
+            <Checkbox
+              isChecked={driverSettings.hasReplace}
+              onChange={(e) =>
+                handleUpdateConfig({ hasReplace: e.target.checked })
+              }
+            >
+              <Tooltip label="如果匹配到设定的关键词，将自动替换成自定义的关键词">
+                关键词替换
+              </Tooltip>
+            </Checkbox>
+          </HStack>
+          <HStack>
+            <Checkbox
+              isChecked={driverSettings.hasEscClose}
+              onChange={(e) =>
+                handleUpdateConfig({ hasEscClose: e.target.checked })
+              }
+            >
+              <Tooltip label="当按下 ESC 键时自动暂停">
+                按 ESC 键自动暂停
+              </Tooltip>
+            </Checkbox>
+          </HStack>
+        </VStack>
+      </HStack>
+    </Stack>
   );
 };
 

src/renderer/main-window/components/Panels/index.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Box, Text, Stack, useColorModeValue } from '@chakra-ui/react';
+import {
+  Box,
+  Text,
+  Stack,
+  useColorModeValue,
+  Tooltip,
+  Link,
+} from '@chakra-ui/react';
 
 const Footer = () => {
   const bg = useColorModeValue('gray.100', 'gray.900');
@@ -14,6 +21,14 @@ const Footer = () => {
       bg={bg}
     >
       <Stack>
+        <Box position={'absolute'}>
+          <Tooltip label="查看文档获取帮助">
+            <Link href="https://doc.lazaytools.top/docs" isExternal mr="auto">
+              📚文档
+            </Link>
+          </Tooltip>
+        </Box>
+
         <Text fontSize="sm" alignSelf={{ base: 'center' }}>
           &copy; {new Date().getFullYear()} lrhh123. All rights reserved.
         </Text>