feat: add refresh functionality to settings and improve DocsAssistant with refs for API keys

Author: Crokily

app/components/DocsAssistant.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useRef } from "react";
 
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
@@ -34,15 +34,37 @@ export function DocsAssistant({ pageContext }: DocsAssistantProps) {
 function DocsAssistantInner({ pageContext }: DocsAssistantProps) {
   const { provider, openaiApiKey, geminiApiKey } = useAssistantSettings();
 
+  // Use refs to ensure we always get the latest values
+  const providerRef = useRef(provider);
+  const openaiApiKeyRef = useRef(openaiApiKey);
+  const geminiApiKeyRef = useRef(geminiApiKey);
+
+  // Update refs whenever the values change
+  providerRef.current = provider;
+  openaiApiKeyRef.current = openaiApiKey;
+  geminiApiKeyRef.current = geminiApiKey;
+
   const chat = useChat({
     transport: new DefaultChatTransport({
       api: "/api/chat",
       body: () => {
-        const apiKey = provider === "openai" ? openaiApiKey : geminiApiKey;
+        // Use refs to get the current values at request time
+        const currentProvider = providerRef.current;
+        const currentApiKey =
+          currentProvider === "openai"
+            ? openaiApiKeyRef.current
+            : geminiApiKeyRef.current;
+
+        console.log("[DocsAssistant] useChat body function called with:", {
+          provider: currentProvider,
+          apiKeyLength: currentApiKey.length,
+          hasApiKey: currentApiKey.trim().length > 0,
+        });
+
         return {
           pageContext,
-          provider,
-          apiKey,
+          provider: currentProvider,
+          apiKey: currentApiKey,
         };
       },
     }),

app/components/assistant-ui/SettingsDialog.tsx

@@ -29,8 +29,15 @@ export const SettingsDialog = ({
     setOpenaiApiKey,
     geminiApiKey,
     setGeminiApiKey,
+    refreshFromStorage,
   } = useAssistantSettings();
 
+  const handleSave = () => {
+    // Force refresh from localStorage to ensure all components get the latest values
+    refreshFromStorage();
+    onOpenChange(false);
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
@@ -86,7 +93,7 @@ export const SettingsDialog = ({
         </div>
 
         <DialogFooter>
-          <Button onClick={() => onOpenChange(false)}>Save & Close</Button>
+          <Button onClick={handleSave}>Save & Close</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

app/hooks/useAssistantSettings.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+} from "react";
 import type { ReactNode } from "react";
 
 type Provider = "openai" | "gemini";
@@ -15,6 +22,7 @@ interface AssistantSettingsContextValue extends AssistantSettingsState {
   setProvider: (provider: Provider) => void;
   setOpenaiApiKey: (key: string) => void;
   setGeminiApiKey: (key: string) => void;
+  refreshFromStorage: () => void;
 }
 
 const SETTINGS_KEY = "assistant-settings-storage";
@@ -99,6 +107,11 @@ export const AssistantSettingsProvider = ({
     return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
+  const refreshFromStorage = useCallback(() => {
+    const latestSettings = readStoredSettings();
+    setSettings(latestSettings);
+  }, []);
+
   const value = useMemo(
     (): AssistantSettingsContextValue => ({
       ...settings,
@@ -111,8 +124,9 @@ export const AssistantSettingsProvider = ({
       setGeminiApiKey: (key: string) => {
         setSettings((prev) => ({ ...prev, geminiApiKey: key }));
       },
+      refreshFromStorage,
     }),
-    [settings],
+    [settings, refreshFromStorage],
   );
 
   return (