feat(kb): Rename document

src/components/dialog/KnowledgeBaseRenameDocumentDialog.vue

@@ -0,0 +1,27 @@
+<template>
+  <ltai-dialog title="Rename document" @save="emit('save', newName)">
+    <q-card-section horizontal>
+      <q-card-section>
+        <span>Name</span>
+        <q-input v-model="newName" bg-color="secondary" input-class="text-light q-px-sm" outlined></q-input>
+      </q-card-section>
+    </q-card-section>
+  </ltai-dialog>
+</template>
+<script lang="ts" setup>
+import LtaiDialog from 'components/libertai/LtaiDialog.vue';
+import { ref, watch } from 'vue';
+
+const props = defineProps<{ name: string }>();
+
+const emit = defineEmits<{ save: [name: string] }>();
+
+// Form values
+const newName = ref('');
+
+watch(
+  () => props.name,
+  () => (newName.value = props.name),
+  { immediate: true },
+);
+</script>

src/pages/Chat.vue

@@ -79,22 +79,12 @@
               <q-tooltip>Regenerate</q-tooltip>
             </q-btn>
             <!-- Allow copying the message to the clipboard -->
-            <q-btn
-              :icon="`img:icons/svg/copy${$q.dark.mode ? '_lighten' : ''}.svg`"
-              dense
-              flat
-              size="sm"
-              @click="copyMessage(message)"
-            >
+            <q-btn dense flat size="sm" @click="copyMessage(message)">
+              <ltai-icon name="svguse:icons.svg#copy" />
               <q-tooltip>Copy</q-tooltip>
             </q-btn>
-            <q-btn
-              :icon="`img:icons/svg/edit${$q.dark.mode ? '_lighten' : ''}.svg`"
-              dense
-              flat
-              size="sm"
-              @click="editMessage(($refs['message-' + message_index] as any)[0])"
-            >
+            <q-btn dense flat size="sm" @click="editMessage(($refs['message-' + message_index] as any)[0])">
+              <ltai-icon name="svguse:icons.svg#pencil" />
               <q-tooltip>Edit</q-tooltip>
             </q-btn>
           </div>
@@ -128,6 +118,7 @@ import { getPersonaAvatarUrl } from 'src/utils/personas';
 import { useSettingsStore } from 'stores/settings';
 import { Chat, SendMessageParams, UIMessage } from 'src/types/chats';
 import dayjs from 'dayjs';
+import LtaiIcon from 'components/libertai/LtaiIcon.vue';
 
 const $q = useQuasar();
 const route = useRoute();

src/pages/KnowledgeBase.vue

@@ -41,7 +41,15 @@
 
           <q-btn-dropdown class="tw-p-1" dropdown-icon="more_horiz" unelevated>
             <q-list>
-              <q-item v-close-popup clickable @click="deleteDocumentConfirmation = true">
+              <q-item v-close-popup clickable @click="showRenameDocument = true">
+                <q-item-section avatar>
+                  <ltai-icon class="tw-mx-auto" name="svguse:icons.svg#pencil" />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>Rename</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item v-close-popup clickable @click="showDeleteDocumentConfirmation = true">
                 <q-item-section avatar>
                   <ltai-icon class="tw-mx-auto" name="svguse:icons.svg#delete" />
                 </q-item-section>
@@ -51,12 +59,19 @@
               </q-item>
             </q-list>
           </q-btn-dropdown>
-          <ltai-dialog v-model="deleteDocumentConfirmation" title="Delete chat" @save="deleteDocument(document)">
-            <q-card-section class="row">
-              <span>Are you sure you want to delete the the document {{ document.name }}?</span>
-            </q-card-section>
-          </ltai-dialog>
         </div>
+
+        <!-- Dialogs-->
+        <knowledge-base-rename-document-dialog
+          v-model="showRenameDocument"
+          :name="document.name"
+          @save="(newName: string) => renameDocument(document, newName)"
+        />
+        <ltai-dialog v-model="showDeleteDocumentConfirmation" title="Delete document" @save="deleteDocument(document)">
+          <q-card-section class="row">
+            <span>Are you sure you want to delete the the document {{ document.name }}?</span>
+          </q-card-section>
+        </ltai-dialog>
       </div>
     </div>
   </section>
@@ -73,6 +88,7 @@ import { processDocument } from 'src/utils/knowledge/document';
 import { filesize } from 'filesize';
 import LtaiIcon from 'components/libertai/LtaiIcon.vue';
 import LtaiDialog from 'components/libertai/LtaiDialog.vue';
+import KnowledgeBaseRenameDocumentDialog from 'components/dialog/KnowledgeBaseRenameDocumentDialog.vue';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -83,7 +99,8 @@ const accountStore = useAccountStore();
 const knowledgeStore = useKnowledgeStore();
 
 const knowledgeBaseRef = ref<KnowledgeBase | undefined>(undefined);
-const deleteDocumentConfirmation = ref(false);
+const showRenameDocument = ref(false);
+const showDeleteDocumentConfirmation = ref(false);
 
 watch(
   () => route.params.id as string,
@@ -172,6 +189,30 @@ const downloadDocument = async (document: KnowledgeDocument) => {
   exportFile(document.name, downloadedFile);
 };
 
+const renameDocument = async (document: KnowledgeDocument, newName: string) => {
+  if (knowledgeBaseRef.value === undefined || accountStore.alephStorage === null) {
+    return;
+  }
+
+  try {
+    knowledgeBaseRef.value.documents = knowledgeBaseRef.value.documents.map((d) => {
+      if (d.id === document.id) {
+        return { ...d, name: newName };
+      }
+      return d;
+    });
+    await knowledgeStore.updateKnowledgeBase(
+      knowledgeBaseRef.value.id,
+      JSON.parse(JSON.stringify(knowledgeBaseRef.value)),
+    );
+  } catch (error) {
+    $q.notify({
+      message: (error as Error)?.message ?? 'Document rename failed, please try again',
+      color: 'negative',
+    });
+  }
+};
+
 const deleteDocument = async (document: KnowledgeDocument) => {
   if (knowledgeBaseRef.value === undefined || accountStore.alephStorage === null) {
     return;