Merge pull request #65 from kodaline/develop_heavy_endpoints

EDIT: Heavy duty endpoints

.eslintrc-auto-import.json

@@ -321,6 +321,7 @@
     "ExtractPublicPropTypes": true,
     "WritableComputedRef": true,
     "injectLocal": true,
+    "storeRouteMapping": true,
     "provideLocal": true
   }
 }

auto-imports.d.ts

@@ -115,6 +115,7 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const storeRouteMapping: typeof import('./src/utils/storeRouteMapping')['default']
   const storeToRefs: typeof import('pinia')['storeToRefs']
   const suite: typeof import('vitest')['suite']
   const syncRef: typeof import('@vueuse/core')['syncRef']

src/App.vue

@@ -2,7 +2,11 @@
 import { useSettings } from '@stores/useSettings'
 import ModalBox from '@components/ModalBox.vue'
 import { updateAuthKey } from '@/api'
+import useStoreMapping from '@/utils/storeRouteMapping'
 
+const routesToExclude = ['home', 'settings']
+const route = useRoute()
+const { storeMapping } = useStoreMapping()
 const settings = useSettings()
 const { getStatus } = settings
 const { isReadyAndAuth } = storeToRefs(settings)
@@ -23,6 +27,17 @@ const authenticate = async () => {
 		//resetAllStores()
 	}
 }
+
+const currentComponentLoading = computed(() => {
+	const routeName = route.name?.toString()
+	let store
+	if (routeName !== undefined && !routesToExclude.includes(routeName)) {
+		store = storeMapping[routeName]
+		const { currentState } = storeToRefs(store)
+		return store && currentState.value.loading
+	}
+	return false
+})
 </script>
 
 <template>
@@ -50,7 +65,7 @@ const authenticate = async () => {
 					enterActiveClass="animate__animated animate__fadeIn animate__fastest"
 					leaveActiveClass="animate__animated animate__fadeOut animate__fastest">
 					<KeepAlive>
-						<component :is="Component" />
+						<component :is="Component" v-lock="currentComponentLoading" :currentComponentLoading="currentComponentLoading" />
 					</KeepAlive>
 				</Transition>
 			</template>

src/components/ModalBox.vue

@@ -25,6 +25,7 @@ const closeModal = () => {
 defineExpose({
 	toggleModal,
 	isOpen,
+	closeModal,
 })
 </script>
 

src/components/SidePanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
 	title: string
+	currentComponentLoading?: boolean
 }>()
 
 const [isOpen, togglePanel] = useToggle(false)
@@ -16,13 +17,18 @@ const closePanel = () => {
 
 defineExpose({
 	togglePanel,
+	closePanel,
 	isOpen,
 })
+
+const closeIfCurrentComponentNotLoading = () => {
+	if (!props.currentComponentLoading) isOpen.value = false
+}
 </script>
 
 <template>
 	<TransitionRoot as="template" :show="isOpen">
-		<Dialog as="div" class="relative z-40" @close="isOpen = false">
+		<Dialog as="div" class="relative z-40" @close="closeIfCurrentComponentNotLoading()">
 			<TransitionChild
 				as="template"
 				enter="ease-in-out duration-300"
@@ -43,15 +49,14 @@ defineExpose({
 							enter-to="translate-x-0"
 							leave="transform transition ease-in-out duration-500"
 							leave-from="translate-x-0"
-							leave-to="translate-x-full"
-							@afterLeave="closePanel">
+							leave-to="translate-x-full">
 							<DialogPanel class="pointer-events-auto relative w-screen md:max-w-xl">
 								<div class="flex h-full flex-col overflow-y-auto bg-base-200 text-neutral">
 									<div class="flex items-center justify-between gap-2 p-2 md:p-4">
 										<DialogTitle class="text-lg font-semibold">
 											{{ title }}
 										</DialogTitle>
-										<button class="btn btn-circle btn-sm" @click="isOpen = false">
+										<button class="btn btn-circle btn-sm" @click="closeIfCurrentComponentNotLoading()">
 											<span class="sr-only">Close panel</span>
 											<heroicons-x-mark-20-solid class="h-6 w-6" />
 										</button>

src/directives/vLock.ts

@@ -0,0 +1,19 @@
+import type { Directive } from 'vue'
+
+export const vLock: Directive<HTMLElement, boolean> = {
+	mounted(el, binding) {
+		if (binding.value) {
+			el.style.pointerEvents = 'none'
+		} else {
+			el.style.pointerEvents = 'initial'
+		}
+	},
+	updated(el, binding) {
+		if (binding.value) {
+			el.style.pointerEvents = 'none'
+		} else {
+			el.style.pointerEvents = 'initial'
+		}
+	},
+}
+export default vLock

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { defineRule } from 'vee-validate'
 import AllRules from '@vee-validate/rules'
+import vLock from '@/directives/vLock'
 
 Object.keys(AllRules).forEach(rule => {
 	defineRule(rule, AllRules[rule])
@@ -23,8 +24,8 @@ pinia.use(({ store }) => {
 	const state = cloneDeep(store.$state)
 	store.$reset = () => store.$patch(state)
 })
-
 app.use(pinia)
 app.use(router)
+app.directive('lock', vLock)
 
 app.mount('#app')

src/stores/useMemory.ts

@@ -29,7 +29,9 @@ export const useMemory = defineStore('memory', () => {
 	const { sendNotificationFromJSON } = useNotifications()
 
 	const wipeAllCollections = async () => {
+		currentState.loading = true
 		const result = await MemoryService.wipeAllCollections()
+		currentState.loading = false
 		if (result.status == 'success' && currentState.data) {
 			remove(currentState.data, v => v.name != 'procedural')
 			fetchCollections()
@@ -43,7 +45,9 @@ export const useMemory = defineStore('memory', () => {
 	}
 
 	const wipeCollection = async (collection: string) => {
+		currentState.loading = true
 		const result = await MemoryService.wipeCollection(collection)
+		currentState.loading = false
 		if (result.status == 'success' && currentState.data) {
 			remove(currentState.data, v => v.name == collection)
 			fetchCollections()

src/stores/usePlugins.ts

@@ -39,14 +39,17 @@ export const usePlugins = defineStore('plugins', () => {
 	const getSettings = async (id: Plugin['id']) => (await PluginService.getSinglePluginSettings(id))?.value
 
 	const togglePlugin = async (id: Plugin['id'], name: Plugin['name'], active: boolean) => {
+		currentState.loading = true
 		const res = await PluginService.togglePlugin(id)
 		if (res.status == 'success') {
 			showNotification({
 				text: `Plugin "${name}" is being switched ${active ? 'OFF' : 'ON'}!`,
 				type: 'info',
 			})
 		} else sendNotificationFromJSON(res)
+		fetchSettings()
 		fetchPlugins()
+		currentState.loading = false
 		return res.status != 'error'
 	}
 
@@ -69,9 +72,10 @@ export const usePlugins = defineStore('plugins', () => {
 	const installPlugin = async (file: File) => {
 		currentState.loading = true
 		const res = await PluginService.sendFile(file)
+		await fetchSettings()
+		await fetchPlugins()
 		currentState.loading = false
 		sendNotificationFromJSON(res)
-		fetchPlugins()
 	}
 
 	const searchPlugin = async (query: string) => {
@@ -86,6 +90,8 @@ export const usePlugins = defineStore('plugins', () => {
 		currentState.loading = true
 		const res = await PluginService.installFromRegistry(url)
 		if (res.status == 'error') sendNotificationFromJSON(res)
+		fetchSettings()
+		fetchPlugins()
 		currentState.loading = false
 		return res.data
 	}

src/utils/storeRouteMapping.ts

@@ -0,0 +1,20 @@
+import { useEmbedderConfig } from '@/stores/useEmbedderConfig'
+import { useLLMConfig } from '@/stores/useLLMConfig'
+import { useMemory } from '@/stores/useMemory'
+import { usePlugins } from '@/stores/usePlugins'
+
+export default function useStoreMapping() {
+	const storeEmbedder = useEmbedderConfig()
+	const storeLLM = useLLMConfig()
+	const storePlugins = usePlugins()
+	const storeMemory = useMemory()
+
+	const storeMapping: Record<string, typeof storeEmbedder | typeof storeLLM | typeof storeMemory | typeof storePlugins> = {
+		embedders: storeEmbedder,
+		providers: storeLLM,
+		memory: storeMemory,
+		plugins: storePlugins,
+	}
+
+	return { storeMapping }
+}

src/views/MemoryView.vue

@@ -39,6 +39,7 @@ const wipeMemory = async () => {
 	if (selectCollection.value) {
 		const selected = selectCollection.value.selected?.value
 		if (!selected) return
+		if (boxWipe.value?.isOpen) boxWipe.value?.closeModal()
 		if (selected === 'all') await wipeAllCollections()
 		else await wipeCollection(selected)
 		if (boxWipe.value?.isOpen) boxWipe.value?.toggleModal()
@@ -210,10 +211,51 @@ const dateFilter = ref(''),
 				<input v-model="sourceFilter" type="text" placeholder="Source" class="input input-primary input-xs w-32" />
 			</div>
 		</div>
+		<div class="divider !my-0" />
+		<div class="join w-fit self-center shadow-xl">
+			<button
+				:disabled="Boolean(memoryState.error) || memoryState.loading"
+				class="btn btn-primary join-item hover:border-error hover:bg-error"
+				@click="boxWipe?.toggleModal()">
+				<heroicons-trash-solid class="h-4 w-4" />
+				Wipe
+			</button>
+			<SelectBox
+				ref="selectCollection"
+				color="bg-base-100 bottom-16"
+				class="join-item min-w-fit bg-base-100 p-1"
+				:list="selectBoxCollections" />
+		</div>
+		<Teleport to="#modal">
+			<ModalBox ref="boxWipe">
+				<div class="flex flex-col items-center justify-center gap-4 text-neutral">
+					<h3 class="text-lg font-bold text-primary">Wipe collection</h3>
+					<p v-if="selectCollection?.selected.label.startsWith('All')">
+						Are you sure you want to wipe
+						<span class="font-bold">
+							{{ selectCollection?.selected.label.toLowerCase() }}
+						</span>
+						the collections?
+					</p>
+					<p v-else>
+						Are you sure you want to wipe the
+						<span class="font-bold">
+							{{ selectCollection?.selected.label.toLowerCase() }}
+						</span>
+						collection?
+					</p>
+					<div class="flex items-center justify-center gap-2">
+						<button class="btn btn-outline btn-sm" @click="boxWipe?.toggleModal()">No</button>
+						<button class="btn btn-error btn-sm" @click="wipeMemory()">Yes</button>
+					</div>
+				</div>
+			</ModalBox>
+		</Teleport>
 		<ErrorBox
 			v-if="showSpinner || memoryState.loading || memoryState.error"
 			:load="showSpinner || memoryState.loading"
-			:error="memoryState.error" />
+			:error="memoryState.error"
+			:text="`Doing some magic...`" />
 		<ApexChart
 			v-else-if="plotOutput && callOutput"
 			v-memo="[callOutput, plotOutput]"
@@ -328,46 +370,6 @@ const dateFilter = ref(''),
 			}"
 			:series="plotOutput"
 			@markerClick="onMarkerClick" />
-		<div class="divider !my-0" />
-		<div class="join w-fit self-center shadow-xl">
-			<button
-				:disabled="Boolean(memoryState.error) || memoryState.loading"
-				class="btn btn-primary join-item hover:border-error hover:bg-error"
-				@click="boxWipe?.toggleModal()">
-				<heroicons-trash-solid class="h-4 w-4" />
-				Wipe
-			</button>
-			<SelectBox
-				ref="selectCollection"
-				color="bg-base-100 bottom-16"
-				class="join-item min-w-fit bg-base-100 p-1"
-				:list="selectBoxCollections" />
-		</div>
-		<Teleport to="#modal">
-			<ModalBox ref="boxWipe">
-				<div class="flex flex-col items-center justify-center gap-4 text-neutral">
-					<h3 class="text-lg font-bold text-primary">Wipe collection</h3>
-					<p v-if="selectCollection?.selected.label.startsWith('All')">
-						Are you sure you want to wipe
-						<span class="font-bold">
-							{{ selectCollection?.selected.label.toLowerCase() }}
-						</span>
-						the collections?
-					</p>
-					<p v-else>
-						Are you sure you want to wipe the
-						<span class="font-bold">
-							{{ selectCollection?.selected.label.toLowerCase() }}
-						</span>
-						collection?
-					</p>
-					<div class="flex items-center justify-center gap-2">
-						<button class="btn btn-outline btn-sm" @click="boxWipe?.toggleModal()">No</button>
-						<button class="btn btn-error btn-sm" @click="wipeMemory()">Yes</button>
-					</div>
-				</div>
-			</ModalBox>
-		</Teleport>
 		<SidePanel ref="memoryDetailsPanel" title="Memory details">
 			<div v-if="callOutput" class="flex w-full flex-col">
 				<p class="z-10 self-start rounded-t-md bg-base-100 px-2 py-1 font-medium text-neutral">

src/views/SettingsView.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import SidePanel from '@components/SidePanel.vue'
 import { useSettings } from '@stores/useSettings'
+defineProps<{
+	currentComponentLoading: boolean
+}>()
 
 const { cat } = storeToRefs(useSettings())
 
@@ -38,7 +41,7 @@ const openSidePanel = (title: keyof typeof panelTitles) => {
 			<p class="text-center">Choose a language embedder to help the Cat remember conversations and documents</p>
 			<RouterLink :to="{ name: 'embedders' }" class="btn btn-primary btn-sm" @click="openSidePanel('embedder')"> Configure </RouterLink>
 		</div>
-		<SidePanel ref="sidePanel" :title="panelTitle">
+		<SidePanel ref="sidePanel" :title="panelTitle" :currentComponentLoading="currentComponentLoading">
 			<RouterView @close="sidePanel?.togglePanel()" />
 		</SidePanel>
 	</div>