fix: improve state management

Author: ylxmf2005

.eslintrc.js

@@ -15,17 +15,17 @@ module.exports = {
     },
   },
   rules: {
+    'no-unused-vars': 'off',
+    'max-len': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'no-console': 'off',
     'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-        jsx: 'never',
-        ts: 'never',
-        tsx: 'never',
-      },
-    ],
+    'import/extensions': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'import/no-unresolved': 'off',
+    'import/prefer-default-export': 'off',
   },
 };

src/renderer/src/App.tsx

@@ -23,26 +23,26 @@ import { Live2DModelProvider } from './context/live2d-model-context';
 import { InputSubtitle } from './components/electron/input-subtitle';
 import { ProactiveSpeakProvider } from './context/proactive-speak-context';
 
-const App: React.FC = () => {
+function App(): JSX.Element {
   const [showSidebar, setShowSidebar] = useState(true);
   const [isFooterCollapsed, setIsFooterCollapsed] = useState(false);
   const [mode, setMode] = useState('window');
   const isElectron = window.api !== undefined;
 
-  if (isElectron) {
-    useEffect(() => {
+  useEffect(() => {
+    if (isElectron) {
       window.electron.ipcRenderer.on('pre-mode-changed', (_event, newMode) => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
             window.electron.ipcRenderer.send('renderer-ready-for-mode-change', newMode);
           });
         });
       });
-    }, []);
-  }
+    }
+  }, [isElectron]);
 
-  if (isElectron) {
-    useEffect(() => {
+  useEffect(() => {
+    if (isElectron) {
       window.electron.ipcRenderer.on('mode-changed', (_event, newMode) => {
         setMode(newMode);
         requestAnimationFrame(() => {
@@ -51,8 +51,8 @@ const App: React.FC = () => {
           });
         });
       });
-    }, []);
-  }
+    }
+  }, [isElectron]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -133,5 +133,5 @@ const App: React.FC = () => {
       </Live2DModelProvider>
     </ChakraProvider>
   );
-};
+}
 export default App;

src/renderer/src/hooks/utils/use-interrupt.ts

@@ -12,7 +12,7 @@ export const useInterrupt = () => {
   const { currentModel } = useLive2DModel();
   const { subtitleText, setSubtitleText } = useSubtitle();
   const interrupt = () => {
-    if (aiState != 'thinking-speaking') return;
+    if (aiState !== 'thinking-speaking') return;
     console.log('Interrupting conversation chain');
     sendMessage({
       type: 'interrupt-signal',
@@ -26,7 +26,7 @@ export const useInterrupt = () => {
       console.error('Live2D model is not initialized');
     }
     clearResponse();
-    if (subtitleText == 'Thinking...') {
+    if (subtitleText === 'Thinking...') {
       setSubtitleText('');
     }
     console.log('Interrupted!');

src/renderer/src/hooks/utils/use-mic-toggle.ts

@@ -1,11 +1,16 @@
 import { useVAD } from '@/context/vad-context';
+import { useAiState } from '@/context/ai-state-context';
 
 export function useMicToggle() {
   const { startMic, stopMic, micOn } = useVAD();
+  const { aiState, setAiState } = useAiState();
 
   const handleMicToggle = async (): Promise<void> => {
     if (micOn) {
       stopMic();
+      if (aiState === 'listening') {
+        setAiState('idle');
+      }
     } else {
       await startMic();
     }

src/renderer/src/services/websocket-handler.tsx

@@ -59,7 +59,7 @@ function WebSocketHandler({ children }: { children: React.ReactNode }) {
         break;
       case 'conversation-chain-end':
         audioTaskQueue.addTask(() => new Promise<void>((resolve) => {
-          setAiState('idle');
+          if (aiState === 'thinking-speaking') setAiState('idle');
           startMic();
           resolve();
         }));

src/renderer/src/types/message.ts

@@ -21,9 +21,6 @@ export class TaskQueue {
 
   private async runNextTask() {
     if (this.running || this.queue.length === 0) {
-      if (this.queue.length === 0) {
-        console.log('Queue is empty');
-      }
       return;
     }
 
@@ -32,7 +29,7 @@ export class TaskQueue {
     try {
       await task?.();
     } catch (error) {
-      console.error('Task failed', error);
+      console.error('Task Queue Error', error);
     }
     this.running = false;
     setTimeout(() => this.runNextTask(), this.taskInterval);

src/renderer/src/types/message.tsx

@@ -16,18 +16,18 @@
     "noEmit": true,
     /* Linting */
     "strict": false,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": false,
-    "allowUnusedLabels": true,
-    "allowUnreachableCode": true,
-    "noImplicitAny": false,
-    "noImplicitThis": false,
-    "noImplicitReturns": false,
-    "noPropertyAccessFromIndexSignature": false,
-    "noUncheckedIndexedAccess": false,
-    "exactOptionalPropertyTypes": false,
-    "noImplicitOverride": false
+    // "noUnusedLocals": false,
+    // "noUnusedParameters": false,
+    // "noFallthroughCasesInSwitch": false,
+    // "allowUnusedLabels": true,
+    // "allowUnreachableCode": true,
+    // "noImplicitAny": false,
+    // "noImplicitThis": false,
+    // "noImplicitReturns": false,
+    // "noPropertyAccessFromIndexSignature": false,
+    // "noUncheckedIndexedAccess": false,
+    // "exactOptionalPropertyTypes": false,
+    // "noImplicitOverride": false
   },
   "include": [
     "vite.config.ts"