fix bug: settings update not properly synced on mobile (#19)

src/ChatView.tsx

@@ -26,10 +26,6 @@ export class ChatView extends ItemView {
     super(leaf)
     this.settings = plugin.settings
     this.initialChatProps = plugin.initialChatProps
-
-    this.plugin.addSettingsChangeListener((newSettings) => {
-      this.onSettingsChange(newSettings)
-    })
   }
 
   getViewType() {
@@ -55,11 +51,6 @@ export class ChatView extends ItemView {
     this.root?.unmount()
   }
 
-  onSettingsChange(newSettings: SmartCopilotSettings) {
-    this.settings = newSettings
-    this.render()
-  }
-
   render() {
     if (!this.root) {
       this.root = createRoot(this.containerEl.children[1])
@@ -72,6 +63,9 @@ export class ChatView extends ItemView {
         <SettingsProvider
           settings={this.settings}
           setSettings={(newSettings) => this.plugin.setSettings(newSettings)}
+          addSettingsChangeListener={(listener) =>
+            this.plugin.addSettingsChangeListener(listener)
+          }
         >
           <DarkModeProvider>
             <LLMProvider>

src/contexts/settings-context.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import { SmartCopilotSettings } from '../types/settings'
 
@@ -14,16 +14,32 @@ const SettingsContext = React.createContext<SettingsContextType | undefined>(
 
 export const SettingsProvider = ({
   children,
-  settings,
+  settings: initialSettings,
   setSettings,
+  addSettingsChangeListener,
 }: {
   children: React.ReactNode
   settings: SmartCopilotSettings
   setSettings: (newSettings: SmartCopilotSettings) => void
+  addSettingsChangeListener: (
+    listener: (newSettings: SmartCopilotSettings) => void,
+  ) => () => void
 }) => {
+  const [settingsCached, setSettingsCached] = useState(initialSettings)
+
+  useEffect(() => {
+    const removeListener = addSettingsChangeListener((newSettings) => {
+      setSettingsCached(newSettings)
+    })
+
+    return () => {
+      removeListener()
+    }
+  }, [addSettingsChangeListener, setSettings])
+
   const value = useMemo(
-    () => ({ settings, setSettings }),
-    [settings, setSettings],
+    () => ({ settings: settingsCached, setSettings }),
+    [settingsCached, setSettings],
   )
 
   return (