fix: separate voice credentials and refresh feature toggle

ai_knowledge_base_v2/apps/user-client/src/components/ChatComposer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Mic, Send, Square, X } from "@lucide/vue";
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 
 import { useVoiceRecorder } from "../composables/useVoiceRecorder";
 import { api, transcribeVoice } from "../services/api";
@@ -37,7 +37,7 @@ const { recording, elapsedSeconds, start: startRecording, stop: stopRecording, c
   },
 );
 
-onMounted(async () => {
+async function refreshVoiceConfig() {
   try {
     const config = await api.voiceConfig();
     voiceEnabled.value = config.enabled;
@@ -45,6 +45,25 @@ onMounted(async () => {
   } catch {
     voiceEnabled.value = false;
   }
+}
+
+function refreshVoiceConfigWhenVisible() {
+  if (document.visibilityState === "visible") void refreshVoiceConfig();
+}
+
+let voiceConfigTimer: number | undefined;
+
+onMounted(() => {
+  void refreshVoiceConfig();
+  window.addEventListener("focus", refreshVoiceConfigWhenVisible);
+  document.addEventListener("visibilitychange", refreshVoiceConfigWhenVisible);
+  voiceConfigTimer = window.setInterval(refreshVoiceConfigWhenVisible, 30_000);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("focus", refreshVoiceConfigWhenVisible);
+  document.removeEventListener("visibilitychange", refreshVoiceConfigWhenVisible);
+  if (voiceConfigTimer !== undefined) window.clearInterval(voiceConfigTimer);
 });
 
 function resize() {