fix linting and good practices

.github/workflows/build.yml

@@ -31,10 +31,10 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
       - name: 'TODO to Issue'
-        uses: 'alstr/todo-to-issue-action@v4'
+        uses: alstr/todo-to-issue-action@v4
         with:
           IDENTIFIERS: '[{"name": "FEATURE", "labels": ["enhancement"]}, {"name": "BUG", "labels": ["bug"]}]'
           ISSUE_TEMPLATE: '**Describe the reason of this issue**\n{{ body }}\n\nThe issue is present here:\n\n{{ snippet }}'

.github/workflows/develop.yml

@@ -30,7 +30,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
       - name: Build static files
         run: pnpm run build

.github/workflows/playwright.yml

@@ -29,7 +29,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
       - name: Install Playwright Browsers
         run: pnpx playwright install --with-deps

.github/workflows/vitest.yml

@@ -29,7 +29,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
       - name: Run Vitest tests
         run: pnpm run unit

src/App.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
 	<div

src/services/ApiService.ts

@@ -15,10 +15,12 @@ const getPort = () => {
  * API client to make requests to the endpoints and passing the JWT for authentication.
  * Start as null and is initialized by App.vue
  */
-let apiClient: CatClient | undefined = undefined
-export { apiClient }
-
+export let apiClient: CatClient | undefined = undefined
 
+/**
+ * Function to instantiate the API client with the JWT token
+ * @param credential The JWT token to pass to the API client
+ */
 export const instantiateApiClient = (credential: string | undefined) => {
 	apiClient = new CatClient({
 		baseUrl: window.location.hostname,
@@ -28,7 +30,7 @@ export const instantiateApiClient = (credential: string | undefined) => {
 		timeout: 15000,
 		instant: true,
 		ws: {
-			retries: 1000, // big number here because the count is cumulative (`retries` is not reset on connection)
+			retries: 5,
 			delay: 2000,
 			onFailed: () => {
 				console.error('Failed to connect WebSocket after several retries.')

src/services/EmbedderConfigService.ts

@@ -7,14 +7,14 @@ import type { JSONSettings } from '@models/JSONSchema'
 const EmbedderService = Object.freeze({
 	getEmbedders: async () => {
 		return await tryRequest(
-			apiClient.api?.embedder.getEmbeddersSettings(),
+			apiClient?.api?.embedder.getEmbeddersSettings(),
 			'Getting all the available embedders',
 			'Unable to get the list of available embedders',
 		)
 	},
 	setEmbedderSettings: async (languageEmbedderName: string, settings: JSONSettings) => {
 		return await tryRequest(
-			apiClient.api?.embedder.upsertEmbedderSetting(languageEmbedderName, settings),
+			apiClient?.api?.embedder.upsertEmbedderSetting(languageEmbedderName, settings),
 			'Language model embedder updated successfully',
 			"Language model embedder couldn't be updated",
 			'Sending the embedder settings to the cat',

src/services/LLMConfigService.ts

@@ -7,14 +7,14 @@ import type { JSONSettings } from '@models/JSONSchema'
 const LLMService = Object.freeze({
 	getProviders: async () => {
 		return await tryRequest(
-			apiClient.api?.llm.getLlmsSettings(),
+			apiClient?.api?.llm.getLlmsSettings(),
 			'Getting all the available providers',
 			'Unable to get the list of available providers',
 		)
 	},
 	setProviderSettings: async (languageModelName: string, settings: JSONSettings) => {
 		return await tryRequest(
-			apiClient.api?.llm.upsertLlmSetting(languageModelName, settings),
+			apiClient?.api?.llm.upsertLlmSetting(languageModelName, settings),
 			'Language model provider updated successfully',
 			"Language model provider couldn't be updated",
 			'Sending the language model settings to the cat',

src/services/UserService.ts

@@ -6,41 +6,41 @@ import type { UserCreate, UserCredentials, UserUpdate } from 'ccat-api'
  */
 const UserService = Object.freeze({
 	getUsers: async () => {
-		return await tryRequest(apiClient.api?.users.readUsers(), 'Getting all the users', 'Unable to fetch users')
+		return await tryRequest(apiClient?.api?.users.readUsers(), 'Getting all the users', 'Unable to fetch users')
 	},
 	getUser: async (id: string) => {
-		return await tryRequest(apiClient.api?.users.readUser(id), 'The selected user id does not exist', 'Unable to get the user')
+		return await tryRequest(apiClient?.api?.users.readUser(id), 'The selected user id does not exist', 'Unable to get the user')
 	},
 	impersonateUser: async (credentials: UserCredentials) => {
 		return await tryRequest(
-			apiClient.api?.userAuth.authToken(credentials),
+			apiClient?.api?.userAuth.authToken(credentials),
 			`Impersonating the user ${credentials.username}`,
 			`Unable to impersonate the user ${credentials.username}`,
 		)
 	},
 	getAvailablePermissions: async () => {
 		return await tryRequest(
-			apiClient.api?.userAuth.getAvailablePermissions(),
+			apiClient?.api?.userAuth.getAvailablePermissions(),
 			'Getting all the available permissions',
 			'Unable to fetch the available permissions',
 		)
 	},
 	createUser: async (user: UserCreate) => {
 		return await tryRequest(
-			apiClient.api?.users.createUser(user),
+			apiClient?.api?.users.createUser(user),
 			'All in-memory collections were wiped',
 			'Unable to wipe the in-memory collections',
 		)
 	},
 	updateUser: async (id: string, body: UserUpdate) => {
 		return await tryRequest(
-			apiClient.api?.users.updateUser(id, body),
+			apiClient?.api?.users.updateUser(id, body),
 			`The user ${id} was updated successfully`,
 			`Unable to update user ${id}`,
 		)
 	},
 	deleteUser: async (id: string) => {
-		return await tryRequest(apiClient.api?.users.deleteUser(id), `The user ${id} was deleted successfully`, `Unable to delete user ${id}`)
+		return await tryRequest(apiClient?.api?.users.deleteUser(id), `The user ${id} was deleted successfully`, `Unable to delete user ${id}`)
 	},
 })
 

src/stores/useMainStore.ts

@@ -8,7 +8,6 @@ import { createMongoAbility } from '@casl/ability'
 import { instantiateApiClient } from '@services/ApiService'
 import LogService from '@services/LogService'
 
-
 interface Filter {
 	[k: string]: {
 		values: string[]
@@ -25,38 +24,38 @@ type AuthToken = JwtPayload & {
  * App wide store, containing info used in multiple views and components
  */
 export const useMainStore = defineStore('main', () => {
-
 	/**
 	 * Extract cookie from headers and JWT payload from it
 	 */
 	const cookies = useCookies(['ccat_user_token'], { doNotParse: true, autoUpdateDependencies: true })
-	const cookie = computed(() => cookies.get<string | undefined>('ccat_user_token'))
+	const cookie = computed({
+		get: () => cookies.get<string | undefined>('ccat_user_token'),
+		set: value => cookies.set('ccat_user_token', value),
+	})
 	const jwtPayload = computed(() => {
 		if (!cookie.value) return null
 		const { payload } = useJwt<AuthToken>(cookie.value)
 		return payload.value
 	})
-
-	/**
-	 * User permissions
-	 */
 	const perms = useAbility()
-	if (jwtPayload.value){
-		instantiateApiClient(cookie.value)
-
-		perms.update(
-			createMongoAbility(
-				jwtPayload.value === null
-					? []
-					: Object.entries(jwtPayload.value.permissions).map(([subject, action]) => ({
-							subject,
-							action,
-						})),
-			).rules,
-		)
-		LogService.success(`Authenticated as ${jwtPayload.value.username}`)
-
-	}
+
+	tryOnBeforeMount(() => {
+		if (jwtPayload.value) {
+			instantiateApiClient(cookie.value)
+			perms.update(
+				createMongoAbility(
+					jwtPayload.value === null
+						? []
+						: Object.entries(jwtPayload.value.permissions).map(([subject, action]) => ({
+								subject,
+								action,
+							})),
+				).rules,
+			)
+			LogService.success(`Authenticated as ${jwtPayload.value.username}`)
+		}
+	})
+
 	/**
 	 * Dark theme
 	 */
@@ -90,7 +89,6 @@ export const useMainStore = defineStore('main', () => {
 		toggleDark,
 		cookie,
 		jwtPayload,
-		perms
 	}
 })
 

src/stores/useMessages.ts

@@ -4,7 +4,6 @@ import { uniqueId } from 'lodash'
 import { useNotifications } from '@stores/useNotifications'
 import { apiClient } from '@services/ApiService'
 import MemoryService from '@services/MemoryService'
-import { useMainStore } from './useMainStore'
 
 export const useMessages = defineStore('messages', () => {
 	const currentState = reactive<MessagesState>({
@@ -61,13 +60,13 @@ export const useMessages = defineStore('messages', () => {
 		if (apiClient?.socketState === WebSocket.OPEN) {
 			currentState.ready = true
 		}
-		
+
 		/**
 		 * Subscribes to the messages service on component mount
 		 * and dispatches the received messages to the store.
 		 * It also dispatches the error to the store if an error occurs.
-		*/
-		if(apiClient == undefined) {
+		 */
+		if (apiClient == undefined) {
 			return
 		}
 		apiClient

src/stores/useUsers.ts

@@ -23,7 +23,7 @@ export const useUsers = defineStore('users', () => {
 	})
 
 	const { sendNotificationFromJSON } = useNotifications()
-	const { cookies } = useMainStore()
+	const { cookie } = storeToRefs(useMainStore())
 
 	const deleteUser = async (id: string) => {
 		currentState.loading = true
@@ -39,9 +39,7 @@ export const useUsers = defineStore('users', () => {
 	const impersonateUser = async (username: string, password: string) => {
 		currentState.loading = true
 		const result = await UserService.impersonateUser({ username, password })
-		if (result.status == 'success' && result.data) {
-			cookies.set('ccat_user_token', result.data.access_token)
-		}
+		if (result.status == 'success' && result.data) cookie.value = result.data.access_token
 		currentState.loading = false
 		return sendNotificationFromJSON(result)
 	}

src/views/SettingsView.vue

@@ -7,7 +7,7 @@ import SidePanel from '@components/SidePanel.vue'
 import type { Status, UserResponse } from 'ccat-api'
 
 const getStatus = async () => {
-	const result = await tryRequest(apiClient.api?.status.home(), 'Getting Cheshire Cat status', 'Unable to fetch Cheshire Cat status')
+	const result = await tryRequest(apiClient?.api?.status.home(), 'Getting Cheshire Cat status', 'Unable to fetch Cheshire Cat status')
 	return result.data
 }