fix race condition

src/App.vue

@@ -1,4 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useSettings } from '@stores/useSettings'
+import { updateCredential } from './api'
+
+const { cookie } = storeToRefs(useSettings())
+
+onBeforeMount(() => {
+	updateCredential(cookie.value)
+})
+</script>
 
 <template>
 	<div

src/api.ts

@@ -18,6 +18,7 @@ export const apiClient = new CatClient({
 	port: getPort(),
 	secure: window.location.protocol === 'https:',
 	timeout: 15000,
+	instant: false,
 	ws: {
 		retries: 3,
 		delay: 3000,

src/main.ts

@@ -3,19 +3,17 @@ import { createPinia } from 'pinia'
 import { defineRule } from 'vee-validate'
 import { all as AllRules } from '@vee-validate/rules'
 import vLock from '@/directives/vLock'
-
-Object.keys(AllRules).forEach(rule => {
-	defineRule(rule, AllRules[rule])
-})
-
 import App from '@/App.vue'
 import router from '@/router'
-
 import 'unfonts.css'
 import 'animate.css'
 import '@assets/main.css'
 import { cloneDeep } from 'lodash'
 
+Object.keys(AllRules).forEach(rule => {
+	defineRule(rule, AllRules[rule])
+})
+
 const app = createApp(App)
 
 const pinia = createPinia()

src/stores/useMemory.ts

@@ -9,7 +9,11 @@ export const useMemory = defineStore('memory', () => {
 		data: [],
 	})
 
-	const { state: collections, isLoading, execute: fetchCollections } = useAsyncState(MemoryService.getCollections, undefined)
+	const {
+		state: collections,
+		isLoading,
+		execute: fetchCollections,
+	} = useAsyncState(MemoryService.getCollections, undefined, { resetOnExecute: false })
 
 	watchEffect(() => {
 		currentState.loading = isLoading.value

src/stores/useMessages.ts

@@ -36,7 +36,7 @@ export const useMessages = defineStore('messages', () => {
 		],
 	})
 
-	const { state: history } = useAsyncState(MemoryService.getConversation, [])
+	const { state: history } = useAsyncState(MemoryService.getConversation, [], { resetOnExecute: false })
 
 	watchEffect(() => {
 		history.value.forEach(({ who, message, why, when }) => {

src/stores/usePlugins.ts

@@ -13,8 +13,8 @@ export const usePlugins = defineStore('plugins', () => {
 		},
 	})
 
-	const { state: plugins, isLoading, execute: fetchPlugins } = useAsyncState(PluginService.getPlugins, undefined)
-	const { state: settings, execute: fetchSettings } = useAsyncState(PluginService.getPluginsSettings, undefined)
+	const { state: plugins, isLoading, execute: fetchPlugins } = useAsyncState(PluginService.getPlugins, undefined, { resetOnExecute: false })
+	const { state: settings, execute: fetchSettings } = useAsyncState(PluginService.getPluginsSettings, undefined, { resetOnExecute: false })
 
 	const { showNotification, sendNotificationFromJSON } = useNotifications()
 

src/stores/useSettings.ts

@@ -1,7 +1,6 @@
-import { apiClient, tryRequest } from '@/api'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import type { Status, AuthPermission, AuthResource } from 'ccat-api'
+import type { AuthPermission, AuthResource } from 'ccat-api'
 import type { JwtPayload } from 'jwt-decode'
 
 interface Filter {
@@ -49,22 +48,12 @@ export const useSettings = defineStore('settings', () => {
 		},
 	})
 
-	const getStatus = async () => {
-		const result = await tryRequest(apiClient.api?.status.home(), 'Getting Cheshire Cat status', 'Unable to fetch Cheshire Cat status')
-		return result.data ?? result.message
-	}
-
-	const { state: cat, execute } = useAsyncState(getStatus, {} as Status)
-
 	return {
 		isDark,
 		pluginsFilters,
 		toggleDark,
-		cat,
 		cookie,
 		jwt,
-		getStatus,
-		refreshStatus: execute,
 	}
 })
 

src/views/SettingsView.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
+import { apiClient, tryRequest } from '@/api'
 import SidePanel from '@components/SidePanel.vue'
-import { useSettings } from '@stores/useSettings'
+import type { Status } from 'ccat-api'
 
-const { cat } = storeToRefs(useSettings())
+const getStatus = async () => {
+	const result = await tryRequest(apiClient.api?.status.home(), 'Getting Cheshire Cat status', 'Unable to fetch Cheshire Cat status')
+	return result.data
+}
+
+const { state: cat } = useAsyncState(getStatus, {} as Status, { resetOnExecute: false })
 
 const panelTitles = {
 	embedder: 'Configure the Embedder',
@@ -24,7 +30,7 @@ const openSidePanel = (title: keyof typeof panelTitles) => {
 			<p class="text-lg font-bold">
 				Cheshire Cat AI - Version
 				<span class="text-primary">
-					{{ typeof cat == 'string' ? 'unknown' : cat.version }}
+					{{ cat ? cat.version : 'unknown' }}
 				</span>
 			</p>
 		</div>