Chat File Upload Improvements

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)'"
 			/>
 			<OverlayPanel ref="fileAttachmentPanel">
 				<div class="attached-files-container">
-					<h2 style="margin-bottom: 0px;">Attached Files</h2>
-					<div class="attached-files" v-for="file in $appStore.attachments" v-if="$appStore.attachments.length">
+					<h2 style="margin-bottom: 0px;">Attached File</h2>
+					<div class="attached-files" v-for="file in fileArrayFiltered" v-if="fileArrayFiltered.length">
 						<div class="file-name">{{ file.fileName }}</div>
 						<div class="file-remove">
 							<Button
@@ -30,7 +30,7 @@
 						</div>
 					</div>
 					<div v-else>
-						No files attached
+						No file attached
 					</div>
 				</div>
 				<div class="p-d-flex p-jc-end">
@@ -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;
 					}
 				});

src/ui/UserPortal/js/types/index.ts

@@ -78,4 +78,5 @@ export interface CompletionRequest {
 export interface Attachment {
 	id: string;
 	fileName: string;
+	sessionId: string;
 }

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;