Skip to content

Make the modal non modal #507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
julien-nc wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Make the modal non modal #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
37f901c
use primevue dialog which is non-modal, resizable and movable
julien-nc Apr 3, 2026
4a560ac
adjust the style to preserve the overall behaviour with scrolling
julien-nc Apr 8, 2026
8f5e842
append the PrimeDialog to body so it can be on top of the NC header
julien-nc Apr 8, 2026
ab83e47
fix style when opening tasks results from a notification
julien-nc Apr 8, 2026
a77bbcf
fix modal event not being received by the listener on a parent element
julien-nc Apr 8, 2026
5316cc6
reduce z-index to allow NcModal on top of PrimeDialog
julien-nc Apr 8, 2026
58c9a49
allow resizing the dialog
julien-nc Apr 8, 2026
f7b22ef
merge dialog header and assistant form header, preserve drag
julien-nc Apr 8, 2026
e72eaca
change the header cursor to grab and grabbing when dragging
julien-nc Apr 8, 2026
8319cdb
adjust maximize button style
julien-nc Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
22 changes: 22 additions & 0 deletions src/assistant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -539,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

Expand Down
48 changes: 38 additions & 10 deletions src/components/AssistantTextProcessingForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -594,17 +597,21 @@ 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;
}

.chatty-inputs {
margin-top: 8px;
height: 8000px;
flex: 1 1 auto;
height: 100%;
min-height: 0;
overflow: hidden;
}
}

Expand Down Expand Up @@ -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%;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -832,6 +857,7 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
padding: 1em;

Expand All @@ -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>
Expand Down
Loading
Loading