diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue index 18ae18a88..ac38073f1 100644 --- a/src/components/AssistantTextProcessingForm.vue +++ b/src/components/AssistantTextProcessingForm.vue @@ -21,8 +21,8 @@ :is-assignment="mySelectedTaskTypeId === 'assignments'" class="chatty-inputs" @open-chat="onOpenChatFromAssignment" /> -
- +
+ this.selectedTaskId, @@ -473,6 +476,9 @@ export default { }, mySelectedTaskTypeId(newVal) { this.myOutputs = {} + // the navigation lives in a conditionally-rendered branch, so + // re-attach the resize observer once that branch is in the DOM + this.$nextTick(() => this.setupNavObserver()) }, }, mounted() { @@ -790,13 +796,13 @@ export default { } } - :deep(.app-navigation--close) { + :deep(.app-navigation--closed) { .app-navigation-toggle-wrapper { margin-right: -33px !important; } } - :deep(.app-navigation--close ~ .session-area) { + :deep(.app-navigation--closed ~ .session-area) { .session-area__chat-area, .session-area__input-area { padding-left: 0 !important; } diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue index 3b05f661f..46c45ad60 100644 --- a/src/components/AssistantTextProcessingModal.vue +++ b/src/components/AssistantTextProcessingModal.vue @@ -8,10 +8,10 @@ :closable="false" :dismissable-mask="false" :close-on-escape="false" - :draggable="true" + :draggable="!isSmallMobile" append-to="self" :base-z-index="isInsideViewer ? 9998 : 5000" - class="assistant-modal"> + :class="['assistant-modal', { 'assistant-modal--fullscreen': isSmallMobile }]">
@@ -59,6 +59,7 @@ import CloseIcon from 'vue-material-design-icons/Close.vue' import PrimeDialog from 'primevue/dialog' import NcButton from '@nextcloud/vue/components/NcButton' +import { useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile' import AssistantTextProcessingForm from './AssistantTextProcessingForm.vue' @@ -72,6 +73,9 @@ export default { NcButton, CloseIcon, }, + setup() { + return { isSmallMobile: useIsSmallMobile() } + }, props: { /** * If true, add the modal content to the Viewer trap elements via the event-bus @@ -221,7 +225,7 @@ export default { height: calc(100vh - 32px); max-height: calc(100vh - 32px); height: 80%; - width: 70%; + width: min(1220px, 90vw); resize: both; overflow: hidden; filter: drop-shadow(0 0 15px rgba(77, 77, 77, 0.5)); @@ -230,6 +234,24 @@ export default { border: 0; } +.assistant-modal.p-dialog.assistant-modal--fullscreen, +.assistant-modal.p-dialog.p-dialog-maximized { + inset: 0; + width: 100vw; + max-width: none; + height: 100vh; + max-height: none; + margin: 0; + border-radius: 0; + resize: none; + filter: none; + transform: none; +} + +.assistant-modal.p-dialog.assistant-modal--fullscreen .p-dialog-header .p-dialog-maximize-button { + display: none; +} + .assistant-modal .p-dialog-header { position: absolute; top: 0; @@ -245,10 +267,18 @@ export default { cursor: grabbing; } .p-dialog-maximize-button { + position: absolute; + top: 10px; + left: 10px; + z-index: 3; + margin: 0 !important; + color: var(--color-main-text); + background-color: var(--color-main-background); border-radius: var(--border-radius-element); width: var(--default-clickable-area); height: var(--default-clickable-area); &:hover { + color: var(--color-main-text) !important; background-color: var(--color-background-hover) !important; border: none !important; } diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue index d407e703d..bc23841d8 100644 --- a/src/components/ChattyLLM/ChattyLLMInputForm.vue +++ b/src/components/ChattyLLM/ChattyLLMInputForm.vue @@ -3,8 +3,8 @@ - SPDX-License-Identifier: AGPL-3.0-or-later -->