Message attachments

package.json

@@ -33,6 +33,8 @@
     "localforage": "^1.10.0",
     "marked": "^12.0.2",
     "marked-highlight": "^2.1.3",
+    "mime": "^4.0.4",
+    "pdfjs-dist": "^4.4.168",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "quasar": "^2.16.6",

src/components/AccountButton.vue

@@ -26,7 +26,7 @@
     >
       <div class="row no-wrap q-pa-md q-pt-none">
         <div class="column items-center">
-          <div class="text-small q-mb-xs">{{ account.address.value }}</div>
+          <div class="text-small tw-mb-1">{{ account.address.value }}</div>
 
           <q-btn
             v-close-popup

src/components/KnowledgeStoreUploader.ts

@@ -6,8 +6,6 @@
 // // State
 // import { useKnowledgeStore } from 'src/stores/knowledge-store';
 //
-// // Get PDF.js from the window object
-// const pdfjsLib = window.pdfjsLib;
 //
 // export type AttachmentAddedEvent = {
 //   title: string;
@@ -103,64 +101,7 @@
 //       fileStatus.value = {};
 //     }
 //
-//     async function processFile(file: File) {
-//       const title = file.name;
-//       let extractedText = '';
-//       let type = file.type;
-//
-//       try {
-//         switch (file.type) {
-//           case 'application/pdf':
-//             extractedText = await extractTextFromPdfFile(file);
-//             break;
-//           case 'text/plain':
-//             extractedText = await new Promise((resolve, reject) => {
-//               const reader = new FileReader();
-//               reader.onload = (event) => resolve(event.target!.result as string);
-//               reader.onerror = (error) => reject(error);
-//               reader.readAsText(file);
-//             });
-//             break;
-//           case 'text/markdown':
-//             extractedText = await new Promise((resolve, reject) => {
-//               const reader = new FileReader();
-//               reader.onload = (event) => resolve(event.target!.result as string);
-//               reader.onerror = (error) => reject(error);
-//               reader.readAsText(file);
-//             });
-//             break;
-//           default:
-//             throw new Error(`Unsupported file type: ${file.type}`);
-//         }
-//       } catch (error) {
-//         console.error('Error processing file:', error);
-//         throw error;
-//       }
-//
-//       return { title, text: extractedText, type };
-//     }
-//
-//     async function extractTextFromPdfFile(file: File) {
-//       const pdfUrl = URL.createObjectURL(file);
 //
-//       let pdf;
-//       try {
-//         pdf = await pdfjsLib.getDocument(pdfUrl).promise;
-//       } catch (error) {
-//         console.error(`components::KnowledgeStoreUploader::extractTextFromPdfFile - error: ${error}`);
-//         throw new Error('Failed to extract text from PDF');
-//       }
-//       const maxPages = pdf.numPages;
-//       let textContent = [];
-//
-//       for (let i = 1; i <= maxPages; i++) {
-//         const page = await pdf.getPage(i);
-//         const content = await page.getTextContent();
-//         const pageTextContent = content.items.map((item) => item.str).join(' ');
-//         textContent.push(pageTextContent);
-//       }
-//       return textContent.join('');
-//     }
 //
 //     return {
 //       isUploading,

src/components/MessageInput.vue

@@ -1,37 +1,70 @@
 <template>
-  <q-input
-    ref="input"
-    v-model="model"
-    :bottom-slots="props.hint !== ''"
-    :class="`${$q.screen.gt.sm ? 'q-pa-lg' : 'q-pa-sm'}`"
-    :loading="isLoading"
-    autofocus
-    autogrow
-    bg-color="secondary"
-    input-class="text-light"
-    input-style="max-height: 10em;"
-    label-color="grey"
-    outlined
-    placeholder="Write your message here"
-    type="textarea"
-    @keydown.enter="sendMessage"
-  >
-    <template #prepend>
-      <!--<q-btn round dense flat icon="img:icons/svg/attachment.svg" @click="sendMessage" color="white" />-->
-    </template>
-    <template #append>
-      <!--<q-btn round dense flat icon="img:icons/mic.svg" @click="sendMessage" color="" class="" />-->
-      <q-btn dense flat icon="img:icons/send.svg" round @click="sendMessage" />
-    </template>
-
-    <template #hint>
-      {{ hint }}
-    </template>
-  </q-input>
+  <div>
+    <q-item-label v-if="attachments.length > 0" class="max-sm:tw-px-2 sm:tw-px-6">
+      <q-chip
+        v-for="attachment in attachments"
+        :key="attachment.id"
+        class="tw-mr-1 bg-primary text-white"
+        removable
+        @remove="removeAttachment(attachment.id)"
+      >
+        {{ attachment.title }}
+      </q-chip>
+    </q-item-label>
+    <q-input
+      v-model="message"
+      :bottom-slots="props.hint !== ''"
+      :loading="isLoading"
+      autofocus
+      autogrow
+      bg-color="secondary"
+      class="max-sm:tw-p-2 sm:tw-p-6"
+      input-class="text-light"
+      input-style="max-height: 10em;"
+      label-color="grey"
+      outlined
+      placeholder="Write your message here"
+      type="textarea"
+      @keydown.enter="sendMessage"
+    >
+      <template #prepend>
+        <q-btn
+          color="white"
+          dense
+          flat
+          icon="img:icons/svg/attachment.svg"
+          round
+          @click="($refs.messageAttachmentsUpload as any).click()"
+        >
+          <q-tooltip>Add attachments</q-tooltip>
+        </q-btn>
+      </template>
+      <template #append>
+        <!--<q-btn round dense flat icon="img:icons/mic.svg" @click="sendMessage" color="" class="" />-->
+        <q-btn dense flat icon="img:icons/send.svg" round @click="sendMessage" />
+      </template>
+
+      <template v-if="hint !== ''" #hint>
+        {{ hint }}
+      </template>
+    </q-input>
+    <!-- Hidden attachments upload -->
+    <input
+      ref="messageAttachmentsUpload"
+      accept=".txt,.md,.pdf"
+      hidden
+      multiple
+      type="file"
+      @change="processMessageAttachments"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { processFile } from 'src/utils/attachments';
+import { MessageAttachment, SendMessageParams } from 'src/types/chats';
+import { useQuasar } from 'quasar';
 
 const props = defineProps({
   isLoading: {
@@ -44,16 +77,55 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['sendMessage']);
-const model = ref('');
-const sendMessage = (event: any) => {
-  if (event.shiftKey) {
+const $q = useQuasar();
+
+const emit = defineEmits<{ sendMessage: [value: SendMessageParams] }>();
+
+// Values
+const message = ref('');
+const attachments = ref<MessageAttachment[]>([]);
+
+const processMessageAttachments = async (event: any) => {
+  const target = event.target as HTMLInputElement;
+  const attachmentsData: MessageAttachment[] = [];
+
+  await Promise.all(
+    Array.from(target.files as FileList).map(async (file) => {
+      try {
+        const fileData = await processFile(file);
+        attachmentsData.push(fileData);
+      } catch (error) {
+        $q.notify({
+          message: (error as Error)?.message ?? 'File processing failed, please try again',
+          color: 'red',
+        });
+      }
+    }),
+  );
+  attachments.value = attachments.value.concat(attachmentsData);
+};
+
+const removeAttachment = (attachmentId: string) => {
+  attachments.value = attachments.value.filter((a) => a.id !== attachmentId);
+};
+
+const sendMessage = (event: Event | KeyboardEvent) => {
+  if ((event as KeyboardEvent).shiftKey) {
     return;
   }
   event.preventDefault();
 
-  if (!model.value.trim()) return;
-  let content = model.value;
-  emit('sendMessage', content);
+  const content = message.value;
+  const attachmentsData = JSON.parse(JSON.stringify(attachments.value));
+
+  if (content.trim() === '' || content.length === 0) {
+    return;
+  }
+
+  emit('sendMessage', { content, attachments: attachmentsData });
+
+  // Wipe the values
+  message.value = '';
+  attachments.value = [];
 };
 </script>

src/components/PersonaDialog.vue

@@ -39,11 +39,11 @@
         />
       </q-card-section>
       <q-card-section class="text-primary" horizontal>
-        <q-btn v-close-popup class="q-px-xl q-py-xs" label="Close" rounded />
+        <q-btn v-close-popup class="q-px-xl tw-py-1" label="Close" rounded />
         <q-space />
         <q-btn
           v-close-popup
-          class="bg-primary q-px-xl q-py-xs"
+          class="bg-primary q-px-xl tw-py-1"
           label="Confirm"
           rounded
           text-color="white"

src/components/ToggleTheme.vue

@@ -1,7 +1,7 @@
 <template>
   <q-btn
     :icon="darkmode ? 'img:icons/svg/light_mode.svg' : 'img:icons/svg/dark_mode.svg'"
-    class="q-pa-xs"
+    class="tw-p-1"
     flat
     @click="darkmode = !darkmode"
   />

src/components/UserSettingsDialog.vue

@@ -34,11 +34,11 @@
       </q-card-section>
 
       <q-card-section class="text-primary" horizontal>
-        <q-btn v-close-popup class="q-px-xl q-py-xs" label="Close" rounded />
+        <q-btn v-close-popup class="q-px-xl tw-py-1" label="Close" rounded />
         <q-space />
         <q-btn
           v-close-popup
-          class="bg-primary q-px-xl q-py-xs"
+          class="bg-primary q-px-xl tw-py-1"
           label="Confirm"
           rounded
           text-color="white"

src/css/app.scss

@@ -36,7 +36,7 @@
   /* ... */
   .q-dark,
   .text-primary {
-    color: $dark-text-color !important;
+    color: $dark-text-color;
   }
 
   .bg-primary {

src/layouts/MainLayout.vue

@@ -4,7 +4,7 @@
       <q-toolbar>
         <q-btn aria-label="Menu" color="primary" dense flat icon="menu" round @click="toggleLeftDrawer" />
 
-        <q-btn class="q-pa-xs" flat @click="showUserSettingsDialog = true">
+        <q-btn class="tw-p-1" flat @click="showUserSettingsDialog = true">
           <q-icon size="xs">
             <img :src="`icons/svg/settings${$q.dark.mode ? '_lighten' : ''}.svg`" alt="settings" />
           </q-icon>
@@ -75,7 +75,7 @@
             <q-item-section side>
               <q-btn
                 v-if="route.params?.id === chat.id"
-                class="q-pa-xs"
+                class="tw-p-1"
                 flat
                 icon="img:icons/svg/msg_active.svg"
                 size="sm"
@@ -84,7 +84,7 @@
               <q-btn
                 v-if="route.params?.id !== chat.id"
                 :icon="`img:icons/svg/msg${$q.dark.mode ? '_lighten' : ''}.svg`"
-                class="q-pa-xs"
+                class="tw-p-1"
                 flat
                 size="sm"
               >
@@ -100,7 +100,7 @@
             <q-item-section v-if="route.params?.id === chat.id" side>
               <q-btn-group dense flat>
                 <q-btn
-                  class="q-pa-xs"
+                  class="tw-p-1"
                   icon="img:icons/delete.svg"
                   size="sm"
                   @_click="deleteChat(chat.id)"