Horizontal attachments layout and viewer for inputs

Signed-off-by: Lukas Schaefer <lukas@lschaefer.xyz>

Author: lukasdotcom

src/components/ChattyLLM/Message.vue

@@ -103,14 +103,15 @@
 			:file-id="a.file_id"
 			:task-id="message.role === 'human' ? undefined : (a.ocp_task_id ?? message.ocp_task_id)"
 			:is-output="isOutput" />
-		<FileDisplay v-for="f in fileAttachments"
-			:key="f.type + '-' + f.file_id"
-			class="message__content"
-			:file-id="f.file_id"
-			:task-id="message.role === 'human' ? undefined : (f.ocp_task_id ?? message.ocp_task_id)"
-			:is-output="isOutput"
-			:clickable="isOutput"
-			@click.native="onPreviewClick(f)" />
+		<div v-if="fileAttachments.length" class="message__content message__files">
+			<FileDisplay v-for="f in fileAttachments"
+				:key="f.type + '-' + f.file_id"
+				:file-id="f.file_id"
+				:task-id="message.role === 'human' ? undefined : (f.ocp_task_id ?? message.ocp_task_id)"
+				:is-output="isOutput"
+				:clickable="true"
+				@click.native="onPreviewClick(f)" />
+		</div>
 	</div>
 </template>
 
@@ -289,20 +290,35 @@ export default {
 			}
 			return this.informationSourceNames[source] ? this.informationSourceNames[source] : source
 		},
+		toViewerPath(path) {
+			// `/userId/files/foo` -> `/foo` (Viewer expects a user-files-relative path)
+			const match = /^\/[^/]+\/files(\/.*)$/.exec(path)
+			return match ? match[1] : path
+		},
 		onPreviewClick(file) {
-			// do not open input media files in the viewer
-			if (file.file_id === null || !this.isOutput) {
+			if (file.file_id === null) {
 				return
 			}
 
-			const url = generateOcsUrl('/apps/assistant/api/v1/task/{taskId}/file/{fileId}/save', {
-				taskId: file.ocp_task_id ?? this.message.ocp_task_id,
-				fileId: file.file_id,
-			})
-			return axios.post(url).then(response => {
-				const savedPath = response.data.ocs.data.path
-				console.debug('[assistant] view output file', savedPath)
-				OCA.Viewer.open({ path: savedPath })
+			if (this.isOutput) {
+				const url = generateOcsUrl('/apps/assistant/api/v1/task/{taskId}/file/{fileId}/save', {
+					taskId: file.ocp_task_id ?? this.message.ocp_task_id,
+					fileId: file.file_id,
+				})
+				return axios.post(url).then(response => {
+					const savedPath = response.data.ocs.data.path
+					console.debug('[assistant] view output file', savedPath)
+					OCA.Viewer.open({ path: savedPath })
+				}).catch(error => {
+					console.error(error)
+				})
+			}
+
+			const url = generateOcsUrl('/apps/assistant/api/v1/file/{fileId}/info', { fileId: file.file_id })
+			return axios.get(url).then(response => {
+				const path = this.toViewerPath(response.data.ocs.data.path)
+				console.debug('[assistant] view input file', path)
+				OCA.Viewer.open({ path })
 			}).catch(error => {
 				console.error(error)
 			})
@@ -365,6 +381,13 @@ export default {
 			width: auto !important;
 		}
 	}
+
+	&__files {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 0.5em;
+	}
 }
 </style>