fix: allow resizing the reply editor while a Copilot suggestion is active (#15391)

app/javascript/dashboard/components/widgets/WootWriter/CopilotEditor.vue

@@ -203,16 +203,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-2 mb-4">
-    <div class="overflow-y-auto max-h-56">
+  <div class="resizable-editor-body flex flex-col gap-2 mb-3">
+    <div class="copilot-suggestion flex-1 min-h-0 overflow-y-auto">
       <p
         v-dompurify-html="formatMessage(generatedContent, false)"
-        class="text-n-iris-12 text-sm prose-sm font-normal !mb-4"
+        class="text-n-iris-12 text-sm prose-sm font-normal"
       />
     </div>
-    <div class="editor-root relative editor--copilot space-x-2">
+    <div class="editor-root relative editor--copilot shrink-0">
       <div ref="editor" />
-      <div class="flex items-center justify-end absolute right-2 bottom-2">
+      <div class="flex items-center justify-end absolute end-2 bottom-2">
         <NextButton
           class="bg-n-iris-9 text-white !rounded-full"
           icon="i-lucide-arrow-up"
@@ -228,14 +228,18 @@ onMounted(() => {
 <style lang="scss">
 @import '@chatwoot/prosemirror-schema/src/styles/base.scss';
 
+.copilot-suggestion:not(:where(.resizable-editor-wrapper *)) {
+  @apply max-h-56;
+}
+
 .editor--copilot {
   @apply bg-n-iris-5 rounded;
 
   .ProseMirror-woot-style {
     min-height: 5rem;
-    max-height: 7.5rem !important;
+    max-height: 7.5rem;
     overflow: auto;
-    @apply px-2 !important;
+    @apply ps-2 pe-10 !important;
 
     .empty-node {
       &::before {
@@ -244,4 +248,9 @@ onMounted(() => {
     }
   }
 }
+
+.resizable-editor-wrapper .editor--copilot .ProseMirror-woot-style {
+  min-height: min(5rem, calc(var(--editor-height) - 2.5rem));
+  max-height: min(7.5rem, calc(var(--editor-height) - 2.5rem));
+}
 </style>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -786,6 +786,7 @@ function createEditorView() {
   editorView = new EditorView(editor.value, {
     state: state,
     editable: () => !props.disabled,
+    attributes: { class: 'resizable-editor-body' },
     nodeViews: {
       image: imageResizeView,
     },
@@ -1050,30 +1051,11 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .ProseMirror-woot-style:not(
-    :where(.resizable-editor-wrapper .ProseMirror-woot-style)
+    :where(.resizable-editor-wrapper .resizable-editor-body)
   ) {
   @apply min-h-[5rem] max-h-[7.5rem];
 }
 
-// Resizable editor wrapper styles
-.resizable-editor-wrapper {
-  .ProseMirror-woot-style {
-    min-height: clamp(
-      var(--editor-min-allowed, var(--editor-min-height, 5rem)),
-      var(--editor-height, var(--editor-min-height, 5rem)),
-      var(--editor-max-allowed, var(--editor-max-height, 7.5rem))
-    );
-    max-height: clamp(
-      var(--editor-min-allowed, var(--editor-min-height, 5rem)),
-      var(--editor-height, var(--editor-min-height, 5rem)),
-      var(--editor-max-allowed, var(--editor-max-height, 7.5rem))
-    );
-    transition:
-      min-height var(--editor-height-transition, 180ms ease),
-      max-height var(--editor-height-transition, 180ms ease);
-  }
-}
-
 .ProseMirror-prompt-backdrop::backdrop {
   @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }

app/javascript/dashboard/components/widgets/conversation/CopilotEditorSection.vue

@@ -73,13 +73,17 @@ const onSend = () => {
     <div
       v-else-if="isGeneratingContent"
       key="loading-state"
-      class="bg-n-iris-5 rounded min-h-[4.75rem] w-full mb-4 p-4 flex items-start"
+      class="resizable-editor-body flex flex-col justify-end mb-3"
     >
-      <div class="flex items-center gap-2">
-        <CaptainLoader class="text-n-iris-10 size-4" />
-        <span class="text-sm text-n-iris-10">
-          {{ $t('CONVERSATION.REPLYBOX.COPILOT_THINKING') }}
-        </span>
+      <div
+        class="bg-n-iris-5 rounded min-h-[4.75rem] w-full p-4 flex items-start"
+      >
+        <div class="flex items-center gap-2">
+          <CaptainLoader class="text-n-iris-10 size-4" />
+          <span class="text-sm text-n-iris-10">
+            {{ $t('CONVERSATION.REPLYBOX.COPILOT_THINKING') }}
+          </span>
+        </div>
       </div>
     </div>
   </Transition>

app/javascript/dashboard/components/widgets/conversation/ResizableEditorWrapper.vue

@@ -152,3 +152,25 @@ defineExpose({ toggleEditorExpand, resetEditorHeight });
     <slot />
   </div>
 </template>
+
+<style lang="scss">
+.resizable-editor-wrapper {
+  .resizable-editor-body {
+    @apply overflow-auto;
+
+    min-height: clamp(
+      var(--editor-min-allowed, 5rem),
+      var(--editor-height, 5rem),
+      var(--editor-max-allowed, 7.5rem)
+    );
+    max-height: clamp(
+      var(--editor-min-allowed, 5rem),
+      var(--editor-height, 5rem),
+      var(--editor-max-allowed, 7.5rem)
+    );
+    transition:
+      min-height var(--editor-height-transition, 180ms ease),
+      max-height var(--editor-height-transition, 180ms ease);
+  }
+}
+</style>