feat(kb): Empty state for documents

src/components/EmptyState.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="tw-mx-auto tw-mt-10 tw-w-fit">
+    <img :alt="imageAlt" :src="imageLink" />
+    <p class="tw-text-lg text-purple-700 tw-w-fit tw-mx-auto">{{ title }}</p>
+    <p class="text-primary tw-w-fit tw-mx-auto">{{ description }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { imageLink, imageAlt, title, description } = defineProps({
+  imageLink: {
+    type: String,
+    required: true,
+  },
+  imageAlt: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+</script>

src/pages/KnowledgeBase.vue

@@ -52,6 +52,14 @@
       </div>
     </div>
 
+    <empty-state
+      v-if="knowledgeBaseRef.documents.length === 0"
+      description="Upload a document to get started"
+      image-alt="No document"
+      image-link="/assets/empty-states/knowledge-document.png"
+      title="No documents uploaded"
+    />
+
     <div class="tw-space-y-4">
       <div
         v-for="document of knowledgeBaseRef.documents"
@@ -172,6 +180,7 @@ import { decryptFile, encryptFile } from 'src/utils/encryption';
 import KnowledgeBaseRenameDialog from 'components/dialog/KnowledgeBaseRenameDialog.vue';
 import { supportedInputFiles } from 'src/utils/knowledge/parsing';
 import { MAX_ATTACHMENT_SIZE } from 'src/utils/knowledge/attachments';
+import EmptyState from 'components/EmptyState.vue';
 
 const $q = useQuasar();
 const route = useRoute();

src/pages/KnowledgeBasesList.vue

@@ -16,11 +16,13 @@
       <knowledge-base-creation-dialog v-model="createKnowledgeDialog" @create="createKnowledgeBase" />
     </div>
 
-    <div v-if="knowledgeStore.knowledgeBases.length === 0" class="tw-mx-auto tw-mt-10 tw-w-fit">
-      <img alt="No knowledge base" src="/assets/empty-states/knowledge-base.png" />
-      <p class="tw-text-lg text-purple-700 tw-w-fit tw-mx-auto">No Knowledge Base created</p>
-      <p class="text-primary tw-w-fit tw-mx-auto">Create a Knowledge Base to get started</p>
-    </div>
+    <empty-state
+      v-if="knowledgeStore.knowledgeBases.length === 0"
+      description="Create a Knowledge Base to get started"
+      image-alt="No knowledge base"
+      image-link="/assets/empty-states/knowledge-base.png"
+      title="No Knowledge Base created"
+    />
     <div v-else class="tw-space-y-4">
       <RouterLink
         v-for="knowledgeBase of knowledgeStore.knowledgeBases"
@@ -51,6 +53,7 @@ import dayjs from 'dayjs';
 import { useAccount } from '@wagmi/vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
+import EmptyState from 'components/EmptyState.vue';
 
 const $q = useQuasar();
 const router = useRouter();