diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue index 85cb6ae57b..2e525642b8 100644 --- a/src/ui/UserPortal/components/ChatInput.vue +++ b/src/ui/UserPortal/components/ChatInput.vue @@ -8,14 +8,14 @@ class="file-upload-button secondary-button" style="height: 100%;" @click="toggleFileAttachmentOverlay" - :badge="$appStore.attachments.length.toString() || null" - v-tooltip.top="'Attach files' + ($appStore.attachments.length ? ' (' + $appStore.attachments.length.toString() + ' file)' : ' (0 files)')" - :aria-label="'Upload file (' + $appStore.attachments.length.toString() + ' files attached)'" + :badge="fileArrayFiltered.length.toString() || null" + v-tooltip.top="'Attach files' + (fileArrayFiltered.length ? ' (' + fileArrayFiltered.length.toString() + ' file)' : ' (0 files)')" + :aria-label="'Upload file (' + fileArrayFiltered.length.toString() + ' files attached)'" />
-

Attached Files

-
+

Attached File

+
{{ file.fileName }}
- No files attached + No file attached
@@ -176,6 +176,12 @@ export default { }; }, + computed: { + fileArrayFiltered() { + return this.$appStore.attachments.filter((attachment) => attachment.sessionId === this.$appStore.currentSession.sessionId); + }, + }, + watch: { text: { handler() { @@ -234,7 +240,7 @@ export default { const formData = new FormData(); formData.append("file", event.files[0]); - const objectId = await this.$appStore.uploadAttachment(formData); + const objectId = await this.$appStore.uploadAttachment(formData, this.$appStore.currentSession.sessionId); console.log(`File uploaded: ObjectId: ${objectId}`); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'File uploaded successfully.' }); @@ -257,24 +263,26 @@ export default { }, uploadFile(uploadCallback) { - if (this.$appStore.attachments.length) { + if (this.fileArrayFiltered.length) { this.$confirm.require({ message: 'Uploading a new file will replace the file already attached.', header: 'Confirm File Replacement', icon: 'pi pi-exclamation-triangle', + rejectLabel: 'Upload', + acceptLabel: 'Cancel', rejectProps: { + label: 'Upload', + }, + acceptProps: { label: 'Cancel', severity: 'secondary', outlined: true }, - acceptProps: { - label: 'Upload' - }, accept: () => { - uploadCallback(); this.showFileUploadDialog = false; }, reject: () => { + uploadCallback(); this.showFileUploadDialog = false; } }); diff --git a/src/ui/UserPortal/js/types/index.ts b/src/ui/UserPortal/js/types/index.ts index 45e5d30855..fba15378b1 100644 --- a/src/ui/UserPortal/js/types/index.ts +++ b/src/ui/UserPortal/js/types/index.ts @@ -78,4 +78,5 @@ export interface CompletionRequest { export interface Attachment { id: string; fileName: string; + sessionId: string; } diff --git a/src/ui/UserPortal/stores/appStore.ts b/src/ui/UserPortal/stores/appStore.ts index f6a32d2662..7cc7ee71f7 100644 --- a/src/ui/UserPortal/stores/appStore.ts +++ b/src/ui/UserPortal/stores/appStore.ts @@ -161,6 +161,10 @@ export const useAppStore = defineStore('app', { async sendMessage(text: string) { if (!text) return; + let sessionId = this.currentSession!.id; + let relevantAttachments = this.attachments.filter(attachment => attachment.sessionId === sessionId); + + const authStore = useAuthStore(); const tempUserMessage: Message = { completionPromptId: null, @@ -200,7 +204,7 @@ export const useAppStore = defineStore('app', { user_prompt: text, agent_name: agent.name, settings: null, - attachments: this.attachments.map(attachment => String(attachment.id)) + attachments: relevantAttachments.map(attachment => String(attachment.id)) }); this.longRunningOperations.set(this.currentSession!.id, operationId); @@ -210,7 +214,7 @@ export const useAppStore = defineStore('app', { this.currentSession!.id, text, agent, - this.attachments.map(attachment => String(attachment.id)), + relevantAttachments.map(attachment => String(attachment.id)), ); await this.getMessages(); } @@ -287,13 +291,20 @@ export const useAppStore = defineStore('app', { return this.agents; }, - async uploadAttachment(file: FormData) { + async uploadAttachment(file: FormData, sessionId: string) { try { const id = await api.uploadAttachment(file); const fileName = file.get('file')?.name; - // this.attachments.push(id); - // For now, we want to just replace the attachments with the new one. - this.attachments = [{ id, fileName}]; + const newAttachment = { id, fileName, sessionId }; + + const existingIndex = this.attachments.findIndex(attachment => attachment.sessionId === sessionId); + + if (existingIndex !== -1) { + this.attachments.splice(existingIndex, 1, newAttachment); + } else { + this.attachments.push(newAttachment); + } + return id; } catch (error) { throw error;