Merge pull request #84 from cheshire-cat-ai/api-service

add ApiService; fix bug on reconnection

Author: zAlweNy26

.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

pnpm-lock.yaml

@@ -1,29 +1,4 @@
-<script setup lang="ts">
-import { createMongoAbility } from '@casl/ability'
-import { useSettings } from '@stores/useSettings'
-import { updateCredential } from './api'
-import { useAbility } from '@casl/vue'
-import LogService from '@services/LogService'
-
-const { cookie, jwt } = storeToRefs(useSettings())
-const perms = useAbility()
-
-onBeforeMount(() => {
-	const payload = jwt.value
-	updateCredential(cookie.value)
-	perms.update(
-		createMongoAbility(
-			payload === null
-				? []
-				: Object.entries(payload.permissions).map(([subject, action]) => ({
-						subject,
-						action,
-					})),
-		).rules,
-	)
-	if (payload) LogService.success(`Authenticated as ${payload.username}`)
-})
-</script>
+<script setup lang="ts"></script>
 
 <template>
 	<div

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useSettings } from '@stores/useSettings'
+import { useMainStore } from '@stores/useMainStore'
 import githubLight from 'highlight.js/styles/github.css?raw'
 import githubDark from 'highlight.js/styles/github-dark.css?raw'
 
-const store = useSettings()
+const store = useMainStore()
 const { toggleDark } = store
 const { isDark } = storeToRefs(store)
 

src/components/ThemeButton.vue

@@ -1,4 +1,4 @@
 import { useAbility } from '@casl/vue'
-import type { AppAbility } from '@/api'
+import type { AppAbility } from '@services/ApiService'
 
 export const usePerms = () => useAbility<AppAbility>()

src/composables/perms.ts

@@ -12,24 +12,32 @@ const getPort = () => {
 }
 
 /**
- * API client to make requests to the endpoints and passing the API_KEY for authentication.
+ * API client to make requests to the endpoints and passing the JWT for authentication.
+ * Start as null and is initialized by App.vue
  */
-export const apiClient = new CatClient({
-	baseUrl: window.location.hostname,
-	port: getPort(),
-	secure: window.location.protocol === 'https:',
-	timeout: 15000,
-	instant: false,
-	ws: {
-		retries: 3,
-		delay: 3000,
-		onFailed: () => {
-			console.error('Failed to connect WebSocket after 3 retries.')
-		},
-	},
-})
+export let apiClient: CatClient | undefined = undefined
 
-export const updateCredential = (cred: string | undefined) => (apiClient.credential = cred)
+/**
+ * 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,
+		port: getPort(),
+		secure: window.location.protocol === 'https:',
+		credential: credential,
+		timeout: 15000,
+		instant: true,
+		ws: {
+			retries: 5,
+			delay: 2000,
+			onFailed: () => {
+				console.error('Failed to connect WebSocket after several retries.')
+			},
+		},
+	})
+}
 
 /**
  * A function that wraps the promise request into a try/catch block

src/api.ts renamed to src/services/ApiService.ts

@@ -1,4 +1,4 @@
-import { apiClient, tryRequest } from '@/api'
+import { apiClient, tryRequest } from '@services/ApiService'
 import type { JSONSettings } from '@models/JSONSchema'
 
 /*
@@ -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/EmbedderConfigService.ts

@@ -1,4 +1,4 @@
-import { apiClient, tryRequest } from '@/api'
+import { apiClient, tryRequest } from '@services/ApiService'
 import type { JSONSettings } from '@models/JSONSchema'
 
 /*
@@ -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/LLMConfigService.ts

@@ -1,55 +1,55 @@
-import { apiClient, tryRequest } from '@/api'
+import { apiClient, tryRequest } from '@services/ApiService'
 
 /*
  * This is a service that is used to manage the memory of the Cheshire Cat.
  */
 const MemoryService = Object.freeze({
 	getCollections: async () => {
 		return await tryRequest(
-			apiClient.api?.memory.getCollections(),
+			apiClient?.api?.memory.getCollections(),
 			'Getting all the available collections',
 			'Unable to fetch available collections',
 		)
 	},
 	deleteMemoryPoint: async (collection: string, memory: string) => {
 		return await tryRequest(
-			apiClient.api?.memory.deletePointInMemory(collection, memory),
+			apiClient?.api?.memory.deletePointInMemory(collection, memory),
 			'The selected memory point was wiped successfully',
 			'Unable to wipe the memory point',
 		)
 	},
 	wipeAllCollections: async () => {
 		return await tryRequest(
-			apiClient.api?.memory.wipeCollections(),
+			apiClient?.api?.memory.wipeCollections(),
 			'All in-memory collections were wiped',
 			'Unable to wipe the in-memory collections',
 		)
 	},
 	wipeCollection: async (collectionId: string) => {
 		return await tryRequest(
-			apiClient.api?.memory.wipeSingleCollection(collectionId),
+			apiClient?.api?.memory.wipeSingleCollection(collectionId),
 			`The ${collectionId} collection was wiped`,
 			`Unable to wipe the ${collectionId} collection`,
 		)
 	},
 	wipeConversation: async () => {
 		return await tryRequest(
-			apiClient.api?.memory.wipeConversationHistory(),
+			apiClient?.api?.memory.wipeConversationHistory(),
 			'The current conversation was wiped',
 			'Unable to wipe the in-memory current conversation',
 		)
 	},
 	getConversation: async () => {
 		const result = await tryRequest(
-			apiClient.api?.memory.getConversationHistory(),
+			apiClient?.api?.memory.getConversationHistory(),
 			'Retrieved the conversation history',
 			'Unable to retrieve the in-memory conversation history',
 		)
 		return result.data?.history ?? []
 	},
 	callMemory: async (query: string, memories = 10) => {
 		const result = await tryRequest(
-			apiClient.api?.memory.recallMemoriesFromText(query, memories),
+			apiClient?.api?.memory.recallMemoriesFromText(query, memories),
 			`Recalling ${memories} memories with ${query} as query`,
 			'Unable to recall memory',
 			`Recalling ${memories} memories from the cat with "${query}"`,

src/services/MemoryService.ts

@@ -1,4 +1,4 @@
-import { apiClient, tryRequest } from '@/api'
+import { apiClient, tryRequest } from '@services/ApiService'
 import type { JSONSettings } from '@models/JSONSchema'
 
 /*
@@ -8,45 +8,45 @@ import type { JSONSettings } from '@models/JSONSchema'
 const PluginService = Object.freeze({
 	installFromRegistry: async (url: string) => {
 		return await tryRequest(
-			apiClient.api?.plugins.installPluginFromRegistry({ url }),
+			apiClient?.api?.plugins.installPluginFromRegistry({ url }),
 			'Installing plugin from registry',
 			'Unable to install the plugin from this url',
 		)
 	},
 	getPlugins: async (query?: string) => {
 		return await tryRequest(
-			apiClient.api?.plugins.listAvailablePlugins(query),
+			apiClient?.api?.plugins.listAvailablePlugins(query),
 			query ? `Searching plugins with query: ${query}` : 'Getting all the available plugins',
 			query ? `Unable to search plugins with query: ${query}` : 'Unable to fetch the plugins',
 		)
 	},
 	getPluginsSettings: async () => {
-		return await tryRequest(apiClient.api?.plugins.getPluginsSettings(), `Getting plugins settings`, `Unable to get plugins settings`)
+		return await tryRequest(apiClient?.api?.plugins.getPluginsSettings(), `Getting plugins settings`, `Unable to get plugins settings`)
 	},
 	getSinglePluginSettings: async (id: string) => {
 		const result = await tryRequest(
-			apiClient.api?.plugins.getPluginSettings(id),
+			apiClient?.api?.plugins.getPluginSettings(id),
 			`Getting plugin ${id} settings`,
 			`Unable to get plugin ${id} settings`,
 		)
 		return result.data
 	},
 	togglePlugin: async (id: string) => {
-		return await tryRequest(apiClient.api?.plugins.togglePlugin(id), `Toggle plugin ${id}`, `Unable to toggle plugin ${id}`)
+		return await tryRequest(apiClient?.api?.plugins.togglePlugin(id), `Toggle plugin ${id}`, `Unable to toggle plugin ${id}`)
 	},
 	updateSettings: async (id: string, settings: JSONSettings) => {
 		return await tryRequest(
-			apiClient.api?.plugins.upsertPluginSettings(id, settings),
+			apiClient?.api?.plugins.upsertPluginSettings(id, settings),
 			`Updated plugin ${id} settings`,
 			`Unable to update plugin ${id} settings`,
 		)
 	},
 	deletePlugin: async (id: string) => {
-		return await tryRequest(apiClient.api?.plugins.deletePlugin(id), `Deleted plugin ${id}`, `Unable to delete plugin ${id}`)
+		return await tryRequest(apiClient?.api?.plugins.deletePlugin(id), `Deleted plugin ${id}`, `Unable to delete plugin ${id}`)
 	},
 	sendFile: async (file: File) => {
 		return await tryRequest(
-			apiClient.api?.plugins.installPlugin({ file }),
+			apiClient?.api?.plugins.installPlugin({ file }),
 			`Plugin ${file.name} installed successfully!`,
 			`Unable to install the plugin ${file.name}`,
 		)