diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue index 7f35482b..bc6aa3e4 100644 --- a/src/components/AssistantTextProcessingForm.vue +++ b/src/components/AssistantTextProcessingForm.vue @@ -695,6 +695,16 @@ export default { height: 100%; min-height: 0; overflow: hidden; + container-type: inline-size; + + // the assistant lives in a resizable/draggable dialog, so the task + // history visibility has to follow the dialog width rather than the + // viewport + @container (max-width: 900px) { + :deep(.app-navigation) { + display: none; + } + } :deep(.app-navigation-new) { padding: 0; diff --git a/src/components/AssistantTextProcessingModal.vue b/src/components/AssistantTextProcessingModal.vue index af4825b3..0dd041dc 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 }]">
@@ -57,6 +57,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' @@ -70,6 +71,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 @@ -210,7 +214,7 @@ export default { height: calc(100vh - 32px); max-height: calc(100vh - 32px); height: 80%; - width: 50%; + width: min(1220px, 90vw); resize: both; overflow: hidden; filter: drop-shadow(0 0 15px rgba(77, 77, 77, 0.5)); @@ -219,6 +223,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; @@ -234,10 +256,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 7c11ef18..2d39c21f 100644 --- a/src/components/ChattyLLM/ChattyLLMInputForm.vue +++ b/src/components/ChattyLLM/ChattyLLMInputForm.vue @@ -916,6 +916,16 @@ export default { height: 100%; min-height: 0; overflow: hidden; + container-type: inline-size; + + // the assistant lives in a resizable/draggable dialog, so the + // conversation history visibility has to follow the dialog width + // rather than the viewport + @container (max-width: 900px) { + :deep(.app-navigation) { + display: none; + } + } :deep(.app-navigation-new) { padding: 0;