feat: Remove attachments, size limit and errors displayed

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/MessageInput.vue

@@ -1,18 +1,24 @@
 <template>
   <div>
-    <q-item-label v-if="attachments.length > 0">
-      <q-chip v-for="attachment in attachments" :key="attachment.id" class="q-mr-xs bg-primary text-white">
+    <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 !== ''"
-      :class="`${$q.screen.gt.sm ? 'q-pa-lg' : 'q-pa-sm'}`"
       :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"
@@ -38,16 +44,16 @@
         <q-btn dense flat icon="img:icons/send.svg" round @click="sendMessage" />
       </template>
 
-      <template #hint>
+      <template v-if="hint !== ''" #hint>
         {{ hint }}
       </template>
     </q-input>
     <!-- Hidden attachments upload -->
-    <!-- TODO: Handle new attachments and removal of attachments-->
     <input
       ref="messageAttachmentsUpload"
       accept=".txt,.md,.pdf"
       hidden
+      multiple
       type="file"
       @change="processMessageAttachments"
     />
@@ -58,6 +64,7 @@
 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: {
@@ -70,6 +77,8 @@ const props = defineProps({
   },
 });
 
+const $q = useQuasar();
+
 const emit = defineEmits<{ sendMessage: [value: SendMessageParams] }>();
 
 // Values
@@ -82,12 +91,22 @@ const processMessageAttachments = async (event: any) => {
 
   await Promise.all(
     Array.from(target.files as FileList).map(async (file) => {
-      // TODO: handle processing error
-      const fileData = await processFile(file);
-      attachmentsData.push(fileData);
+      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 = attachmentsData;
+  attachments.value = attachments.value.concat(attachmentsData);
+};
+
+const removeAttachment = (attachmentId: string) => {
+  attachments.value = attachments.value.filter((a) => a.id !== attachmentId);
 };
 
 const sendMessage = (event: Event | KeyboardEvent) => {

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)"

src/pages/Chat.vue

@@ -43,13 +43,14 @@
               <q-chip
                 v-for="attachment in message.attachments"
                 :key="attachment.id"
-                class="q-mr-xs bg-primary text-white"
+                class="tw-mr-1 bg-primary text-white"
+                icon="img:icons/svg/attachment.svg"
               >
                 {{ attachment.title }}
               </q-chip>
             </q-item-label>
             <!-- Display the content of the message -->
-            <q-item-label style="display: block">
+            <q-item-label class="tw-block">
               <MarkdownRenderer
                 :class="message.author === 'user' ? '' : 'message-content'"
                 :content="message.content"

src/pages/NewChat.vue

@@ -26,7 +26,7 @@
           </q-card-section>
         </q-card>
       </div>
-      <div class="fixed-bottom absolute q-mb-xl q-pb-xs">
+      <div class="fixed-bottom absolute q-mb-xl tw-pb-1">
         <message-input
           hint="Disclaimer: This chat bot uses personas for entertainment and informational purposes only. The
               chat bot's responses are not a reflection of any real person or organization's views or opinions, and should not

src/utils/attachments.ts

@@ -26,15 +26,19 @@ export const processFile = async (file: File): Promise<MessageAttachment> => {
         });
         break;
       default:
-        throw new Error(`Unsupported file type: ${file.type}`);
+        throw new Error(`Unsupported file type: ${type}`);
+    }
+
+    if (extractedText.length > 4 * 1024) {
+      // File is too big to be inlined, rejecting it.
+      // Later we'll use a knowledge db to fix this.
+      throw new Error('File is too big, please use a file of 4 KB of content or less.');
     }
   } catch (error) {
     console.error('Error processing file:', error);
     throw error;
   }
 
-  // TODO: throw error if file is too big
-
   return { title, content: extractedText, type, id: uuidv4() };
 };