feat: compose form improvements (#13668)

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

@@ -10,11 +10,23 @@ import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 
 import Icon from 'next/icon/Icon.vue';
 
-defineProps({
+const props = defineProps({
   hasSelection: {
     type: Boolean,
     default: false,
   },
+  isEditorMenuPopover: {
+    type: Boolean,
+    default: false,
+  },
+  editorContent: {
+    type: String,
+    default: undefined,
+  },
+  conversationId: {
+    type: Number,
+    default: null,
+  },
 });
 
 const emit = defineEmits(['executeCopilotAction']);
@@ -25,6 +37,13 @@ const { draftMessage } = useCaptain();
 
 const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
 
+// When editorContent prop is passed, use it exclusively (even if empty)
+// This ensures each editor instance shows menu items based on its own content
+// Falls back to global draftMessage only when editorContent is not provided
+const effectiveContent = computed(() =>
+  props.editorContent !== undefined ? props.editorContent : draftMessage.value
+);
+
 // Selection-based menu items (when text is selected)
 const menuItems = computed(() => {
   const items = [];
@@ -42,8 +61,9 @@ const menuItems = computed(() => {
       icon: 'i-fluent-pen-sparkle-24-regular',
     });
   } else if (
+    props.conversationId &&
     replyMode.value === REPLY_EDITOR_MODES.REPLY &&
-    draftMessage.value
+    effectiveContent.value
   ) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY'),
@@ -52,7 +72,7 @@ const menuItems = computed(() => {
     });
   }
 
-  if (draftMessage.value) {
+  if (effectiveContent.value) {
     items.push(
       {
         label: t(
@@ -105,7 +125,7 @@ const menuItems = computed(() => {
 
 const generalMenuItems = computed(() => {
   const items = [];
-  if (replyMode.value === REPLY_EDITOR_MODES.REPLY) {
+  if (props.conversationId && replyMode.value === REPLY_EDITOR_MODES.REPLY) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUGGESTION'),
       key: 'reply_suggestion',
@@ -113,7 +133,10 @@ const generalMenuItems = computed(() => {
     });
   }
 
-  if (replyMode.value === REPLY_EDITOR_MODES.NOTE || true) {
+  if (
+    props.conversationId &&
+    (replyMode.value === REPLY_EDITOR_MODES.NOTE || true)
+  ) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUMMARIZE'),
       key: 'summarize',
@@ -176,8 +199,8 @@ const handleSubMenuItemClick = (parentItem, subItem) => {
   <DropdownBody
     ref="menuRef"
     class="min-w-56 [&>ul]:gap-3 z-50 [&>ul]:px-4 [&>ul]:py-3.5"
-    :class="{ 'selection-menu': hasSelection }"
-    :style="hasSelection ? selectionMenuStyle : {}"
+    :class="{ 'selection-menu': hasSelection && isEditorMenuPopover }"
+    :style="hasSelection && isEditorMenuPopover ? selectionMenuStyle : {}"
   >
     <div v-if="menuItems.length > 0" class="flex flex-col items-start gap-2.5">
       <div

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

@@ -202,6 +202,11 @@ const editorRoot = useTemplateRef('editorRoot');
 const imageUpload = useTemplateRef('imageUpload');
 const editor = useTemplateRef('editor');
 
+const isEditorMenuPopover = computed(
+  () =>
+    editorRoot.value?.classList.contains('popover-prosemirror-menu') ?? false
+);
+
 const handleCopilotAction = actionKey => {
   if (actionKey === 'improve_selection' && editorView?.state) {
     const { from, to } = editorView.state.selection;
@@ -211,7 +216,7 @@ const handleCopilotAction = actionKey => {
       emit('executeCopilotAction', 'improve', selectedText);
     }
   } else {
-    emit('executeCopilotAction', actionKey);
+    emit('executeCopilotAction', actionKey, props.modelValue);
   }
 
   showSelectionMenu.value = false;
@@ -484,6 +489,7 @@ function setToolbarPosition() {
 function setMenubarPosition({ selection } = {}) {
   const wrapper = editorRoot.value;
   if (!selection || !wrapper) return;
+  if (!isEditorMenuPopover.value) return;
 
   const rect = wrapper.getBoundingClientRect();
   const isRtl = getComputedStyle(wrapper).direction === 'rtl';
@@ -866,8 +872,12 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       v-if="showSelectionMenu"
       v-on-click-outside="handleClickOutside"
       :has-selection="isTextSelected"
+      :is-editor-menu-popover="isEditorMenuPopover"
+      :editor-content="modelValue"
+      :conversation-id="conversationId"
       :show-selection-menu="showSelectionMenu"
       :show-general-menu="false"
+      class="copilot-editor-menu"
       @execute-copilot-action="handleCopilotAction"
     />
     <input
@@ -1026,6 +1036,17 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
   @apply text-n-ruby-9 dark:text-n-ruby-9 font-normal text-sm pt-1 pb-0 px-0;
 }
 
+// Default copilot menu position (non-popover editors like components-next/Editor)
+// When popover-prosemirror-menu is NOT on the wrapper, anchor below the menubar
+:not(.popover-prosemirror-menu) > .copilot-editor-menu {
+  top: 1.5rem !important;
+
+  [dir='rtl'] & {
+    left: auto !important;
+    right: 0 !important;
+  }
+}
+
 // Float editor menu
 .popover-prosemirror-menu {
   position: relative;

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

@@ -49,6 +49,10 @@ export default {
       type: Number,
       default: () => 0,
     },
+    editorContent: {
+      type: String,
+      default: undefined,
+    },
   },
   emits: ['setReplyMode', 'togglePopout', 'executeCopilotAction'],
   setup(props, { emit }) {
@@ -73,8 +77,8 @@ export default {
     const { captainTasksEnabled } = useCaptain();
     const showCopilotMenu = ref(false);
 
-    const handleCopilotAction = actionKey => {
-      emit('executeCopilotAction', actionKey);
+    const handleCopilotAction = (actionKey, data) => {
+      emit('executeCopilotAction', actionKey, data || props.editorContent);
       showCopilotMenu.value = false;
     };
 
@@ -174,6 +178,8 @@ export default {
           v-if="showCopilotMenu"
           v-on-click-outside="handleClickOutside"
           :has-selection="false"
+          :editor-content="editorContent"
+          :conversation-id="conversationId"
           class="ltr:right-0 rtl:left-0 bottom-full mb-2"
           @execute-copilot-action="handleCopilotAction"
         />

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

@@ -1245,6 +1245,7 @@ export default {
       :is-editor-disabled="isEditorDisabled"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
+      :editor-content="message"
       :popout-reply-box="popOutReplyBox"
       @set-reply-mode="setReplyMode"
       @toggle-popout="togglePopout"