feat(attachment): Support message attachments

components/Conversation.vue

@@ -8,6 +8,7 @@ const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
 const fetchingResponse = ref(false)
 const messageQueue = []
+const attachment = ref(null)
 let isProcessingQueue = false
 
 const props = defineProps({
@@ -72,7 +73,7 @@ const fetchReply = async (message) => {
     openaiApiKey: $settings.open_api_key_setting === 'True' ? openaiApiKey.value : null,
     message: message,
     conversationId: props.conversation.id,
-    frugalMode: frugalMode.value
+    frugalMode: $settings.open_frugal_mode_control === 'True' && frugalMode.value
   }, webSearchParams)
 
   try {
@@ -151,10 +152,20 @@ const send = (message) => {
   if (props.conversation.messages.length === 0) {
     addConversation(props.conversation)
   }
-  props.conversation.messages.push({message: message})
-  fetchReply(message)
+  let newMessage = {
+    id: null,
+    is_bot: false,
+    message: message
+  }
+  if (attachment.value) {
+    newMessage.attachments = [attachment.value]
+    attachment.value = null
+  }
+  props.conversation.messages.push(newMessage)
+  fetchReply(newMessage)
   scrollChatWindow()
 }
+
 const stop = () => {
   abortFetch()
 }
@@ -175,6 +186,10 @@ const deleteMessage = (index) => {
   props.conversation.messages.splice(index, 1)
 }
 
+const updateAttachment = (file) => {
+  attachment.value = file
+}
+
 onNuxtReady(() => {
   currentModel.value = getCurrentModel()
 })
@@ -238,6 +253,20 @@ onNuxtReady(() => {
       class="footer"
   >
     <div class="px-md-16 w-100 d-flex flex-column">
+      <div
+          v-if="attachment"
+          class="mb-2"
+      >
+        <v-chip
+            closable
+            color="teal"
+            label
+            @click:close="attachment = null"
+        >
+          <v-icon start icon="attach_file"></v-icon>
+          {{ attachment.original_name }}
+        </v-chip>
+      </div>
       <div class="d-flex align-center">
         <v-btn
             v-show="fetchingResponse"
@@ -252,11 +281,10 @@ onNuxtReady(() => {
           density="comfortable"
           color="transparent"
       >
-        <Prompt v-show="!fetchingResponse" :use-prompt="usePrompt" />
-        <EditorToolsUploadFile />
+        <Prompt :use-prompt="usePrompt" />
+        <EditorToolsUploadFile :update-attachment="updateAttachment" />
         <EditorToolsWebSearch v-if="$settings.open_web_search === 'True'" />
         <EditorToolsFrugalMode v-if="$settings.open_frugal_mode_control === 'True'" />
-
       </v-toolbar>
     </div>
   </v-footer>

components/MsgContent.vue

@@ -69,6 +69,19 @@ onMounted(() => {
         v-html="contentHtml"
         class="chat-msg-content pa-3"
     ></div>
+    <template
+        v-if="message.attachments && message.attachments.length > 0"
+    >
+      <v-divider class="mx-4"></v-divider>
+      <v-card-text class="d-flex justify-space-between">
+        <v-chip
+            label
+        >
+          <v-icon start icon="attach_file"></v-icon>
+          {{ message.attachments[0].original_name }}
+        </v-chip>
+      </v-card-text>
+    </template>
   </v-card>
 </template>
 

components/editorTools/UploadFile.vue

@@ -1,19 +1,29 @@
 <script setup>
 const { $i18n } = useNuxtApp()
-const dialog = ref(true)
+const dialog = ref(false)
 const uploading = ref(false)
 const file = ref(null)
 const errorMsg = ref('')
+
+const props = defineProps({
+  updateAttachment: {
+    type: Function,
+    required: true
+  }
+})
+
 const fileChanged = () => {
   errorMsg.value = ''
 }
+
 const upload = async () => {
-  if (file.value === null) {
+  if (file.value.files.length < 1){
     return;
   }
+  const fileObj = file.value.files[0]
   uploading.value = true
   const formData = new FormData()
-  formData.append('file', file.value.files[0])
+  formData.append('file', fileObj)
   const { data, error } = await useAuthFetch('/api/chat/upload/', {
     method: 'POST',
     body: formData,
@@ -22,7 +32,7 @@ const upload = async () => {
     errorMsg.value = $i18n.t('Failed to upload file')
   } else {
     dialog.value = false
-    console.log(data.value)
+    props.updateAttachment(data.value.attachment)
   }
   uploading.value = false
 }

composables/states.js

@@ -13,4 +13,4 @@ export const useDrawer = () => useState('drawer', () => false)
 
 export const useEnableWebSearch = () => useState('enableWebSearch', () => false)
 
-export const useFrugalMode = () => useState('frugalMode', () => false)
+export const useFrugalMode = () => useState('frugalMode', () => true)