From fbf1f643f8ffa4fe9f0d840b6812be6a71d643f2 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Fri, 3 Apr 2026 11:02:53 +0200
Subject: [PATCH 01/15] use primevue dialog which is non-modal, resizable and
 movable

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 package-lock.json                             | 86 +++++++++++++++++++
 package.json                                  |  2 +
 src/assistant.js                              | 12 +++
 .../AssistantTextProcessingModal.vue          | 72 ++++++++++------
 4 files changed, 147 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f664d7e1..4d4f9c7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,9 +23,11 @@
         "@nextcloud/moment": "^1.3.1",
         "@nextcloud/router": "^3.0.0",
         "@nextcloud/vue": "^9.0.0-rc.5",
+        "@primeuix/themes": "^2.0.3",
         "extendable-media-recorder": "^9.2.11",
         "extendable-media-recorder-wav-encoder": "^7.0.129",
         "moment": "^2.30.1",
+        "primevue": "^4.5.4",
         "v-click-outside": "^3.2.0",
         "vue": "^3.5.16",
         "vue-material-design-icons": "^5.1.2"
@@ -3726,6 +3728,74 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
+      "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.4.tgz",
+      "integrity": "sha512-lYJJB3wTrDJ8MkLctzHfrPZAqXVxoatjIsswSJzupatf6ZogJHVYADUKcn1JAkLLk8dtV1FA2AxDek663fHO5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.4.tgz",
+      "integrity": "sha512-DxgryEc7ZmUqcEhYMcxGBRyFzdtLIoy3jLtlH1zsVSRZaG+iSAcjQ88nvfkZxGUZtZBFL7sRjF6KLq3bJZJwUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
@@ -12263,6 +12333,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/primevue": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.5.4.tgz",
+      "integrity": "sha512-nTyEohZABFJhVIpeUxgP0EJ8vKcJAhD+Z7DYj95e7ie/MNUCjRNcGjqmE1cXtXi4z54qDfTSI9h2uJ51qz2DIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.2",
+        "@primeuix/utils": "^0.6.2",
+        "@primevue/core": "4.5.4",
+        "@primevue/icons": "4.5.4"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
diff --git a/package.json b/package.json
index fcab91ea..8e214060 100644
--- a/package.json
+++ b/package.json
@@ -52,9 +52,11 @@
     "@nextcloud/moment": "^1.3.1",
     "@nextcloud/router": "^3.0.0",
     "@nextcloud/vue": "^9.0.0-rc.5",
+    "@primeuix/themes": "^2.0.3",
     "extendable-media-recorder": "^9.2.11",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "moment": "^2.30.1",
+    "primevue": "^4.5.4",
     "v-click-outside": "^3.2.0",
     "vue": "^3.5.16",
     "vue-material-design-icons": "^5.1.2"
diff --git a/src/assistant.js b/src/assistant.js
index f9ed4011..da5d7588 100644
--- a/src/assistant.js
+++ b/src/assistant.js
@@ -6,6 +6,8 @@
 import { TASK_STATUS_STRING } from './constants.js'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
 
 window.assistantPollTimerId = null
 
@@ -103,6 +105,16 @@ export async function openAssistantForm({
 			},
 		)
 		app.mixin({ methods: { t, n } })
+		app.use(PrimeVue, {
+			theme: {
+				preset: Aura,
+				options: {
+					prefix: 'p',
+					darkModeSelector: 'system',
+					cssLayer: false,
+				},
+			},
+		})
 		const view = app.mount(modalMountPoint)
 		let lastTask = null
 
diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 70a32789..23ab6c26 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -3,13 +3,16 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcModal v-if="show"
-		:size="modalSize"
-		:no-close="true"
-		dark
-		:container="null"
+	<PrimeDialog v-model:visible="show"
+		maximizable
+		:closable="false"
+		:dismissable-mask="false"
+		:close-on-escape="false"
+		:draggable="true"
+		append-to="self"
 		class="assistant-modal"
-		@close="onCancel">
+		:style="dialogStyle"
+		:breakpoints="dialogBreakpoints">
 		<div ref="modal_content"
 			class="assistant-modal--wrapper">
 			<div class="assistant-modal--content">
@@ -47,13 +50,13 @@
 					@cancel-task="onCancelTask" />
 			</div>
 		</div>
-	</NcModal>
+	</PrimeDialog>
 </template>
 
 <script>
 import CloseIcon from 'vue-material-design-icons/Close.vue'
+import PrimeDialog from 'primevue/dialog'
 
-import NcModal from '@nextcloud/vue/components/NcModal'
 import NcButton from '@nextcloud/vue/components/NcButton'
 
 import AssistantTextProcessingForm from './AssistantTextProcessingForm.vue'
@@ -64,7 +67,7 @@ export default {
 	name: 'AssistantTextProcessingModal',
 	components: {
 		AssistantTextProcessingForm,
-		NcModal,
+		PrimeDialog,
 		NcButton,
 		CloseIcon,
 	},
@@ -116,7 +119,6 @@ export default {
 			show: true,
 			closeButtonTitle: t('assistant', 'Close'),
 			closeButtonLabel: t('assistant', 'Close Nextcloud Assistant'),
-			modalSize: 'large',
 			progress: null,
 			taskStatus: null,
 			scheduledAt: null,
@@ -133,6 +135,18 @@ export default {
 		}
 	},
 	computed: {
+		dialogStyle() {
+			return {
+				width: '1220px',
+				maxWidth: '100%',
+			}
+		},
+		dialogBreakpoints() {
+			return {
+				'1280px': '95vw',
+				'960px': '100vw',
+			}
+		},
 		shortInput() {
 			const input = this.inputs.input ?? this.inputs.sourceMaterial ?? ''
 			if (typeof input === 'string') {
@@ -152,53 +166,61 @@ export default {
 		}
 	},
 	methods: {
+		dispatchModalEvent(name, detail) {
+			const target = this.$refs.modal_content
+			if (!target) {
+				return
+			}
+
+			target.dispatchEvent(new CustomEvent(name, {
+				detail,
+				bubbles: true,
+			}))
+		},
 		onCancel() {
 			this.show = false
 			this.$emit('cancel')
-			this.$el.dispatchEvent(new CustomEvent('cancel', { bubbles: true }))
+			this.dispatchModalEvent('cancel')
 		},
 		onCancelTask() {
 			this.$emit('cancel-task')
-			this.$el.dispatchEvent(new CustomEvent('cancel-task', { bubbles: true }))
+			this.dispatchModalEvent('cancel-task')
 		},
 		onBackgroundNotify(enable) {
 			this.$emit('background-notify', enable)
-			this.$el.dispatchEvent(new CustomEvent('background-notify', { detail: enable, bubbles: true }))
+			this.dispatchModalEvent('background-notify', enable)
 		},
 		onSyncSubmit(params) {
 			this.$emit('sync-submit', params)
-			this.$el.dispatchEvent(new CustomEvent('sync-submit', { detail: params, bubbles: true }))
+			this.dispatchModalEvent('sync-submit', params)
 		},
 		onActionButtonClicked(data) {
 			this.$emit('action-button-clicked', data)
-			this.$el.dispatchEvent(new CustomEvent('action-button-clicked', { detail: data, bubbles: true }))
+			this.dispatchModalEvent('action-button-clicked', data)
 		},
 		onNewTask() {
 			this.$emit('new-task')
-			this.$el.dispatchEvent(new CustomEvent('new-task', { bubbles: true }))
+			this.dispatchModalEvent('new-task')
 		},
 		onTryAgain(data) {
 			this.$emit('try-again', data)
-			this.$el.dispatchEvent(new CustomEvent('try-again', { detail: data, bubbles: true }))
+			this.dispatchModalEvent('try-again', data)
 		},
 		onLoadTask(data) {
 			this.$emit('load-task', data)
-			this.$el.dispatchEvent(new CustomEvent('load-task', { detail: data, bubbles: true }))
+			this.dispatchModalEvent('load-task', data)
 		},
 	},
 }
 </script>
 
 <style lang="scss">
-// TODO fix this in nc/vue
-.modal-container__content .assistant-modal--wrapper {
-	height: 100%;
+.assistant-modal.p-dialog {
+	max-width: 100%;
 }
 
-// make large modal a bit larger
-.assistant-modal .modal-container {
-	width: 1220px !important;
-	max-width: 100% !important;
+.assistant-modal .p-dialog-content {
+	padding: 0;
 }
 
 // the smart picker provider selector is not visible in 33

From e17abdf768f5917a7c0f314e48ade05bd75a460e Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 17:03:06 +0200
Subject: [PATCH 02/15] adjust the style to preserve the overall behaviour with
 scrolling

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 .../AssistantTextProcessingForm.vue           | 48 +++++++++++++++----
 .../AssistantTextProcessingModal.vue          | 26 ++++++++--
 .../ChattyLLM/ChattyLLMInputForm.vue          | 24 +++++++++-
 3 files changed, 83 insertions(+), 15 deletions(-)

diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
index 6a81e71e..18079957 100644
--- a/src/components/AssistantTextProcessingForm.vue
+++ b/src/components/AssistantTextProcessingForm.vue
@@ -583,8 +583,11 @@ export default {
 	align-items: center;
 	justify-content: start;
 	gap: 12px;
-	overflow-y: auto;
-	overflow-x: hidden;
+	overflow: hidden;
+	width: 100%;
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
 
 	h2 {
 		margin-top: 0;
@@ -594,9 +597,10 @@ export default {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		// to make it max height, it will overflow anyway
-		height: 100000px;
-		overflow: auto;
+		flex: 1 1 auto;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
 
 		> * {
 			margin-right: 6px;
@@ -604,7 +608,10 @@ export default {
 
 		.chatty-inputs {
 			margin-top: 8px;
-			height: 8000px;
+			flex: 1 1 auto;
+			height: 100%;
+			min-height: 0;
+			overflow: hidden;
 		}
 	}
 
@@ -653,12 +660,10 @@ export default {
 
 	.history {
 		width: 100%;
-		// to make it max height, it will overflow anyway
-		height: 100000px;
 		display: flex;
 		flex-direction: column;
 		align-items: end;
-		overflow: auto;
+		min-height: 0;
 
 		&--list {
 			width: 100%;
@@ -683,9 +688,13 @@ export default {
 }
 
 .container {
-	overflow: auto;
 	display: flex;
+	align-items: stretch;
+	flex: 1 1 auto;
+	width: 100%;
 	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 
 	:deep(.app-navigation-new) {
 		padding: 0;
@@ -706,6 +715,10 @@ export default {
 		background-color: var(--color-primary-element-light);
 		color: var(--color-primary-element-light-text);
 		border-radius: var(--border-radius-large);
+		flex: 0 0 auto;
+		height: 100%;
+		min-height: 0;
+		overflow: visible;
 
 		@media only screen and (max-width: 1024px) {
 			position: relative !important;
@@ -736,6 +749,9 @@ export default {
 		padding: var(--default-grid-baseline) !important;
 		box-sizing: border-box;
 		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
 
 		.app-navigation-input-confirm > form {
 			align-items: center;
@@ -790,10 +806,19 @@ export default {
 		}
 	}
 
+	:deep(.app-content-vue) {
+		flex: 1 1 auto;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
 	.session-area {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		min-width: 0;
+		min-height: 0;
 
 		&__top-bar {
 			display: flex;
@@ -832,6 +857,7 @@ export default {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
+			min-height: 0;
 			overflow-y: auto;
 			padding: 1em;
 
@@ -853,12 +879,14 @@ export default {
 		&__input-area {
 			position: sticky;
 			bottom: 0;
+			flex-shrink: 0;
 		}
 	}
 
 	.running-area {
 		width: 100%;
 		padding: 16px;
+		min-height: 0;
 	}
 }
 </style>
diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 23ab6c26..e6f96e66 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -217,10 +217,18 @@ export default {
 <style lang="scss">
 .assistant-modal.p-dialog {
 	max-width: 100%;
+	height: calc(100vh - 32px);
+	max-height: calc(100vh - 32px);
+	overflow: hidden;
 }
 
 .assistant-modal .p-dialog-content {
 	padding: 0;
+	display: flex;
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 }
 
 // the smart picker provider selector is not visible in 33
@@ -241,19 +249,26 @@ div[role='listbox'] {
 .assistant-modal--wrapper {
 	width: 100%;
 	display: flex;
-	overflow-y: auto;
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 }
 
 .assistant-modal--content {
 	width: 100%;
 	margin: 0 auto;
 	padding: 8px 16px 16px 16px;
+	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
-	overflow-y: auto;
-	min-height: 500px;
+	justify-content: flex-start;
+	flex: 1 1 auto;
+	height: 100%;
+	max-height: 100%;
+	min-height: 0;
+	overflow: hidden;
 
 	> h2 {
 		display: flex;
@@ -265,7 +280,10 @@ div[role='listbox'] {
 
 	.form {
 		width: 100%;
+		flex: 1 1 auto;
 		height: 100%;
+		min-height: 0;
+		overflow: hidden;
 	}
 }
 </style>
diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue
index b6164487..8a2b1f6e 100644
--- a/src/components/ChattyLLM/ChattyLLMInputForm.vue
+++ b/src/components/ChattyLLM/ChattyLLMInputForm.vue
@@ -909,9 +909,13 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-	overflow: auto;
 	display: flex;
+	align-items: stretch;
+	flex: 1 1 auto;
+	width: 100%;
 	height: 100%;
+	min-height: 0;
+	overflow: hidden;
 
 	:deep(.app-navigation-new) {
 		padding: 0;
@@ -932,6 +936,10 @@ export default {
 		background-color: var(--color-primary-element-light);
 		color: var(--color-primary-element-light-text);
 		border-radius: var(--border-radius-large);
+		flex: 0 0 auto;
+		height: 100%;
+		min-height: 0;
+		overflow: visible;
 
 		@media only screen and (max-width: 1024px) {
 			position: relative !important;
@@ -962,6 +970,9 @@ export default {
 		padding: var(--default-grid-baseline) !important;
 		box-sizing: border-box;
 		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
 
 		.app-navigation-input-confirm > form {
 			align-items: center;
@@ -1016,10 +1027,19 @@ export default {
 		}
 	}
 
+	:deep(.app-content-vue) {
+		flex: 1 1 auto;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
+	}
+
 	.session-area {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		min-width: 0;
+		min-height: 0;
 
 		&__top-bar {
 			display: flex;
@@ -1052,6 +1072,7 @@ export default {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
+			min-height: 0;
 			overflow-y: auto;
 			padding: 1em;
 
@@ -1079,6 +1100,7 @@ export default {
 		&__input-area {
 			position: sticky;
 			bottom: 0;
+			flex-shrink: 0;
 		}
 
 		&__agency-suggestions {

From 1682e727c10b58556013d2be6c193cf00745189b Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 17:26:14 +0200
Subject: [PATCH 03/15] append the PrimeDialog to body so it can be on top of
 the NC header

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index e6f96e66..c3cc3deb 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -9,7 +9,8 @@
 		:dismissable-mask="false"
 		:close-on-escape="false"
 		:draggable="true"
-		append-to="self"
+		append-to="body"
+		:base-z-index="100000"
 		class="assistant-modal"
 		:style="dialogStyle"
 		:breakpoints="dialogBreakpoints">
@@ -220,6 +221,7 @@ export default {
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
 	overflow: hidden;
+	z-index: 100000 !important;
 }
 
 .assistant-modal .p-dialog-content {

From 1cae0d4e7844ac3e35277d272a3d51dcb9276460 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 17:26:37 +0200
Subject: [PATCH 04/15] fix style when opening tasks results from a
 notification

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/assistant.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/assistant.js b/src/assistant.js
index da5d7588..7ff98faa 100644
--- a/src/assistant.js
+++ b/src/assistant.js
@@ -551,6 +551,16 @@ export async function openAssistantTask(
 		},
 	)
 	app.mixin({ methods: { t, n } })
+	app.use(PrimeVue, {
+		theme: {
+			preset: Aura,
+			options: {
+				prefix: 'p',
+				darkModeSelector: 'system',
+				cssLayer: false,
+			},
+		},
+	})
 	const view = app.mount(modalMountPoint)
 	let lastTask = task
 

From df1829cfc818f387434bf1ade8069c4c35589c61 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 17:34:35 +0200
Subject: [PATCH 05/15] fix modal event not being received by the listener on a
 parent element

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index c3cc3deb..ae92dd23 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -118,6 +118,7 @@ export default {
 	data() {
 		return {
 			show: true,
+			eventTarget: null,
 			closeButtonTitle: t('assistant', 'Close'),
 			closeButtonLabel: t('assistant', 'Close Nextcloud Assistant'),
 			progress: null,
@@ -161,6 +162,7 @@ export default {
 	},
 	mounted() {
 		console.debug('[assistant] modal\'s outputs', this.outputs)
+		this.eventTarget = this.$el?.parentElement ?? null
 		if (this.isInsideViewer) {
 			const elem = this.$refs.modal_content
 			emit('viewer:trapElements:changed', elem)
@@ -168,7 +170,7 @@ export default {
 	},
 	methods: {
 		dispatchModalEvent(name, detail) {
-			const target = this.$refs.modal_content
+			const target = this.eventTarget ?? this.$refs.modal_content
 			if (!target) {
 				return
 			}

From a7137199f8ce3809c2206f3100fa461c773647e6 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 17:54:37 +0200
Subject: [PATCH 06/15] reduce z-index to allow NcModal on top of PrimeDialog

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index ae92dd23..0d3e90ef 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -10,7 +10,7 @@
 		:close-on-escape="false"
 		:draggable="true"
 		append-to="body"
-		:base-z-index="100000"
+		:base-z-index="5000"
 		class="assistant-modal"
 		:style="dialogStyle"
 		:breakpoints="dialogBreakpoints">
@@ -223,7 +223,7 @@ export default {
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
 	overflow: hidden;
-	z-index: 100000 !important;
+	// z-index: 100000 !important;
 }
 
 .assistant-modal .p-dialog-content {

From 759ef12a7a90fe00b362d8c742ac522cc0fa3dfe Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 18:14:14 +0200
Subject: [PATCH 07/15] allow resizing the dialog

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 0d3e90ef..1ff4c598 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -11,9 +11,7 @@
 		:draggable="true"
 		append-to="body"
 		:base-z-index="5000"
-		class="assistant-modal"
-		:style="dialogStyle"
-		:breakpoints="dialogBreakpoints">
+		class="assistant-modal">
 		<div ref="modal_content"
 			class="assistant-modal--wrapper">
 			<div class="assistant-modal--content">
@@ -137,18 +135,6 @@ export default {
 		}
 	},
 	computed: {
-		dialogStyle() {
-			return {
-				width: '1220px',
-				maxWidth: '100%',
-			}
-		},
-		dialogBreakpoints() {
-			return {
-				'1280px': '95vw',
-				'960px': '100vw',
-			}
-		},
 		shortInput() {
 			const input = this.inputs.input ?? this.inputs.sourceMaterial ?? ''
 			if (typeof input === 'string') {
@@ -222,6 +208,7 @@ export default {
 	max-width: 100%;
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
+	resize: both;
 	overflow: hidden;
 	// z-index: 100000 !important;
 }

From 15512f7e658b3a771464a0f242e8409143a92064 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 18:25:06 +0200
Subject: [PATCH 08/15] merge dialog header and assistant form header, preserve
 drag

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 .../AssistantTextProcessingModal.vue          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 1ff4c598..6b467adc 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -205,6 +205,7 @@ export default {
 
 <style lang="scss">
 .assistant-modal.p-dialog {
+	position: relative;
 	max-width: 100%;
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
@@ -213,6 +214,18 @@ export default {
 	// z-index: 100000 !important;
 }
 
+.assistant-modal .p-dialog-header {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	min-height: 0;
+	padding: 4px;
+	border: 0;
+	background: transparent;
+}
+
 .assistant-modal .p-dialog-content {
 	padding: 0;
 	display: flex;
@@ -231,9 +244,9 @@ div[role='listbox'] {
 <style lang="scss" scoped>
 .close-button {
 	position: absolute;
-	top: 4px;
-	right: 4px;
-	z-index: 1;
+	top: 10px;
+	right: 10px;
+	z-index: 3;
 	background-color: var(--color-main-background);
 }
 

From 2ddd05a0ca73d645a2524a8ebf3a120170dd8482 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Wed, 8 Apr 2026 18:31:56 +0200
Subject: [PATCH 09/15] change the header cursor to grab and grabbing when
 dragging

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 6b467adc..57caecc3 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -224,6 +224,10 @@ export default {
 	padding: 4px;
 	border: 0;
 	background: transparent;
+	cursor: grab;
+	&:active {
+		cursor: grabbing;
+	}
 }
 
 .assistant-modal .p-dialog-content {

From b2421dcc891caecef945609470c113969fa13667 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Thu, 9 Apr 2026 13:59:47 +0200
Subject: [PATCH 10/15] adjust maximize button style

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 57caecc3..aef69e03 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -228,6 +228,15 @@ export default {
 	&:active {
 		cursor: grabbing;
 	}
+	.p-dialog-maximize-button {
+		border-radius: var(--border-radius-element);
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+		&:hover {
+			background-color: var(--color-background-hover);
+			border: none;
+		}
+	}
 }
 
 .assistant-modal .p-dialog-content {

From 6625909578f325d9d04bbec65b925861d8212608 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Thu, 23 Apr 2026 13:31:28 +0200
Subject: [PATCH 11/15] fix z-index when isInsideViewer so it shows up on top
 of Text for example

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index aef69e03..f0b2834f 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -10,7 +10,7 @@
 		:close-on-escape="false"
 		:draggable="true"
 		append-to="body"
-		:base-z-index="5000"
+		:base-z-index="isInsideViewer ? 9998 : 5000"
 		class="assistant-modal">
 		<div ref="modal_content"
 			class="assistant-modal--wrapper">

From 6f98edec5c0e0e8c706680f1a0e4b3c00b2c7740 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Thu, 23 Apr 2026 13:37:42 +0200
Subject: [PATCH 12/15] do not teleport the dialog to not mess with the focus
 trap

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index f0b2834f..0f30de14 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -9,7 +9,7 @@
 		:dismissable-mask="false"
 		:close-on-escape="false"
 		:draggable="true"
-		append-to="body"
+		append-to="self"
 		:base-z-index="isInsideViewer ? 9998 : 5000"
 		class="assistant-modal">
 		<div ref="modal_content"

From d9e7a49e3d0f0fd929a1fc3fc37cf7cc3b76ca1b Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Fri, 24 Apr 2026 12:16:03 +0200
Subject: [PATCH 13/15] adjust initial dialog height

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 0f30de14..04181100 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -209,6 +209,7 @@ export default {
 	max-width: 100%;
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
+	height: 80%;
 	resize: both;
 	overflow: hidden;
 	// z-index: 100000 !important;

From 4c59892c21909c3e161112763ea4a3113172b8cc Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Fri, 24 Apr 2026 12:17:40 +0200
Subject: [PATCH 14/15] adjust initial dialog width to prevent size change
 after the loading animation

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 04181100..3b6a8756 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -210,6 +210,7 @@ export default {
 	height: calc(100vh - 32px);
 	max-height: calc(100vh - 32px);
 	height: 80%;
+	width: 50%;
 	resize: both;
 	overflow: hidden;
 	// z-index: 100000 !important;

From 8d5fc98355443931352ce0cd53f694298b18fc91 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Fri, 24 Apr 2026 15:40:14 +0200
Subject: [PATCH 15/15] add shadow to dialog

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/AssistantTextProcessingModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue
index 3b6a8756..a38158a5 100644
--- a/src/components/AssistantTextProcessingModal.vue
+++ b/src/components/AssistantTextProcessingModal.vue
@@ -213,7 +213,7 @@ export default {
 	width: 50%;
 	resize: both;
 	overflow: hidden;
-	// z-index: 100000 !important;
+	filter: drop-shadow(0 0 15px rgba(77, 77, 77, 0.5));
 }
 
 .assistant-modal .p-dialog-header {