chore: Captain reply actions not showing correctly with content (#14160)

2026-05-22 12:16:19 +05:30
parent bef25781de
commit 0722750a55
6 changed files with 77 additions and 56 deletions
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useElementSize, useWindowSize } from '@vueuse/core';
 import { useMapGetter } from 'dashboard/composables/store';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
-import { useCaptain } from 'dashboard/composables/useCaptain';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';

@@ -19,9 +18,11 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
-  editorContent: {
-    type: String,
-    default: undefined,
+  // Signature-aware emptiness is computed by the parent (which has access to
+  // the signature + channel context) and passed in as a boolean.
+  hasContent: {
+    type: Boolean,
+    default: false,
  },
  conversationId: {
    type: Number,
@@ -33,17 +34,8 @@ const emit = defineEmits(['executeCopilotAction']);

 const { t } = useI18n();

-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 = [];
@@ -63,7 +55,7 @@ const menuItems = computed(() => {
  } else if (
    props.conversationId &&
    replyMode.value === REPLY_EDITOR_MODES.REPLY &&
-    effectiveContent.value
+    props.hasContent
  ) {
    items.push({
      label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY'),
@@ -72,7 +64,7 @@ const menuItems = computed(() => {
    });
  }

-  if (effectiveContent.value) {
+  if (props.hasContent) {
    items.push(
      {
        label: t(
@@ -354,16 +354,17 @@ function isBodyEmpty(content) {
  // if content is undefined, we assume that the body is empty
  if (!content) return true;

-  // if the signature is present, we need to remove it before checking
-  // note that we don't update the editorView, so this is safe
-  // Use effective channel type to match how signature was appended
-  const bodyWithoutSignature = props.signature
-    ? removeSignatureHelper(
-        content,
-        props.signature,
-        effectiveChannelType.value
-      )
-    : content;
+  // Only strip the signature when it's actually being auto-appended for this
+  // draft. Otherwise an agent whose typed text happens to match their saved
+  // signature would be mistakenly treated as empty.
+  const bodyWithoutSignature =
+    sendWithSignature.value && props.signature
+      ? removeSignatureHelper(
+          content,
+          props.signature,
+          effectiveChannelType.value
+        )
+      : content;

  // trimming should remove all the whitespaces, so we can check the length
  return bodyWithoutSignature.trim().length === 0;
@@ -474,17 +475,6 @@ function removeSignature() {
  reloadState(content);
 }

-function toggleSignatureInEditor(signatureEnabled) {
-  // The toggleSignatureInEditor gets the new value from the
-  // watcher, this means that if the value is true, the signature
-  // is supposed to be added, else we remove it.
-  if (signatureEnabled) {
-    addSignature();
-  } else {
-    removeSignature();
-  }
-}
-
 function setToolbarPosition() {
  const editorRect = editorRoot.value.getBoundingClientRect();
  const rect = selectedImageNode.value.getBoundingClientRect();
@@ -559,6 +549,20 @@ function emitOnChange() {
  emit('update:modelValue', contentFromEditor());
 }

+function toggleSignatureInEditor(signatureEnabled) {
+  // The toggleSignatureInEditor gets the new value from the
+  // watcher, this means that if the value is true, the signature
+  // is supposed to be added, else we remove it.
+  if (signatureEnabled) {
+    addSignature();
+  } else {
+    removeSignature();
+  }
+  // reloadState replaces editor state directly and bypasses dispatchTransaction,
+  // so v-model never hears about the signature change — sync it back explicitly.
+  emitOnChange();
+}
+
 function updateImgToolbarOnDelete() {
  // check if the selected node is present or not on keyup
  // this is needed because the user can select an image and then delete it
@@ -899,7 +903,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
      v-on-click-outside="handleClickOutside"
      :has-selection="isTextSelected"
      :is-editor-menu-popover="isEditorMenuPopover"
-      :editor-content="modelValue"
+      :has-content="!isBodyEmpty(modelValue)"
      :conversation-id="conversationId"
      :show-selection-menu="showSelectionMenu"
      :show-general-menu="false"
@@ -53,6 +53,10 @@ export default {
      type: String,
      default: undefined,
    },
+    hasContent: {
+      type: Boolean,
+      default: false,
+    },
  },
  emits: ['setReplyMode', 'toggleEditorSize', 'executeCopilotAction'],
  setup(props, { emit }) {
@@ -76,6 +80,7 @@ export default {

    const { captainTasksEnabled } = useCaptain();
    const showCopilotMenu = ref(false);
+    const copilotToggleRef = ref(null);

    const handleCopilotAction = (actionKey, data) => {
      emit('executeCopilotAction', actionKey, data || props.editorContent);
@@ -117,6 +122,7 @@ export default {
      captainTasksEnabled,
      handleCopilotAction,
      showCopilotMenu,
+      copilotToggleRef,
      toggleCopilotMenu,
      handleClickOutside,
    };
@@ -164,6 +170,7 @@ export default {
    <div v-if="captainTasksEnabled" class="flex items-center gap-2">
      <div class="relative">
        <NextButton
+          ref="copilotToggleRef"
          ghost
          :disabled="disabled || isEditorDisabled"
          :class="{
@@ -176,9 +183,12 @@ export default {
        />
        <CopilotMenuBar
          v-if="showCopilotMenu"
-          v-on-click-outside="handleClickOutside"
+          v-on-click-outside="[
+            handleClickOutside,
+            { ignore: [copilotToggleRef] },
+          ]"
          :has-selection="false"
-          :editor-content="editorContent"
+          :has-content="hasContent"
          :conversation-id="conversationId"
          class="ltr:right-0 rtl:left-0 bottom-full mb-2"
          @execute-copilot-action="handleCopilotAction"
@@ -179,6 +179,21 @@ export default {
      }
      return true;
    },
+    hasMeaningfulEditorContent() {
+      const body = this.message || '';
+      // Only strip the signature when it's actually being auto-appended.
+      // If the toggle is off, the agent's text might happen to match their
+      // saved signature and we'd incorrectly treat it as empty.
+      const shouldStripSignature =
+        !this.isPrivate && this.sendWithSignature && !!this.messageSignature;
+      if (!shouldStripSignature) return !!body.trim();
+      const stripped = removeSignature(
+        body,
+        this.messageSignature,
+        getEffectiveChannelType(this.channelType, this.inbox?.medium || '')
+      );
+      return !!stripped.trim();
+    },
    isReplyRestricted() {
      return (
        !this.currentChat?.can_reply &&
@@ -1231,6 +1246,7 @@ export default {
      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
      :characters-remaining="charactersRemaining"
      :editor-content="message"
+      :has-content="hasMeaningfulEditorContent"
      @set-reply-mode="setReplyMode"
      @toggle-editor-size="toggleEditorSize"
      @toggle-copilot="copilot.toggleEditor"
@@ -1,14 +1,14 @@
 import {
-  messageSchema,
-  MessageMarkdownTransformer,
  MessageMarkdownSerializer,
+  MessageMarkdownTransformer,
+  messageSchema,
  Selection,
 } from '@chatwoot/prosemirror-schema';
 import { replaceVariablesInMessage } from '@chatwoot/utils';
 import * as Sentry from '@sentry/vue';
+import camelcaseKeys from 'camelcase-keys';
 import { FORMATTING, MARKDOWN_PATTERNS } from 'dashboard/constants/editor';
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
-import camelcaseKeys from 'camelcase-keys';

 /**
 * Extract text from markdown, and remove all images, code blocks, links, headers, bold, italic, lists etc.
@@ -1,27 +1,26 @@
+import { EditorState, EditorView } from '@chatwoot/prosemirror-schema';
+import { FORMATTING } from 'dashboard/constants/editor';
+import { Schema } from 'prosemirror-model';
 import {
-  findSignatureInBody,
  appendSignature,
-  removeSignature,
-  replaceSignature,
+  calculateMenuPosition,
  cleanSignature,
+  collapseSelection,
  extractTextFromMarkdown,
-  stripUnsupportedMarkdown,
-  insertAtCursor,
  findNodeToInsertImage,
-  setURLWithQueryAndSize,
+  findSignatureInBody,
  getContentNode,
  getFormattingForEditor,
-  getSelectionCoords,
  getMenuAnchor,
-  calculateMenuPosition,
-  stripUnsupportedFormatting,
+  getSelectionCoords,
+  insertAtCursor,
+  removeSignature,
+  replaceSignature,
+  setURLWithQueryAndSize,
  stripInlineBase64Images,
-  collapseSelection,
+  stripUnsupportedFormatting,
+  stripUnsupportedMarkdown,
 } from '../editorHelper';
-import { FORMATTING } from 'dashboard/constants/editor';
-import { EditorState } from '@chatwoot/prosemirror-schema';
-import { EditorView } from '@chatwoot/prosemirror-schema';
-import { Schema } from 'prosemirror-model';

 // Define a basic ProseMirror schema
 const schema = new Schema({