feat: compose form improvements (#13668)

2026-03-02 18:27:51 +05:30
parent 9aacc0335b
commit 89da4a2292
18 changed files with 354 additions and 73 deletions
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -15,6 +15,9 @@ import {
  prepareWhatsAppMessagePayload,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';

+import { useCopilotReply } from 'dashboard/composables/useCopilotReply';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
 import ContactSelector from './ContactSelector.vue';
 import InboxSelector from './InboxSelector.vue';
 import EmailOptions from './EmailOptions.vue';
@@ -22,6 +25,7 @@ import MessageEditor from './MessageEditor.vue';
 import ActionButtons from './ActionButtons.vue';
 import InboxEmptyState from './InboxEmptyState.vue';
 import AttachmentPreviews from './AttachmentPreviews.vue';
+import CopilotReplyBottomPanel from 'dashboard/components/widgets/WootWriter/CopilotReplyBottomPanel.vue';

 const props = defineProps({
  contacts: { type: Array, default: () => [] },
@@ -42,6 +46,7 @@ const props = defineProps({

 const emit = defineEmits([
  'searchContacts',
+  'resetContactSearch',
  'discard',
  'updateSelectedContact',
  'updateTargetInbox',
@@ -51,6 +56,8 @@ const emit = defineEmits([

 const DEFAULT_FORMATTING = 'Context::Default';

+const copilot = useCopilotReply();
+
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -157,7 +164,7 @@ const isAnyDropdownActive = computed(() => {
 });

 const handleContactSearch = value => {
-  showContactsDropdown.value = true;
+  showContactsDropdown.value = value.trim().length > 1;
  emit('searchContacts', value);
 };

@@ -172,12 +179,16 @@ const handleDropdownUpdate = (type, value) => {
 };

 const searchCcEmails = value => {
-  showCcEmailsDropdown.value = true;
+  showBccEmailsDropdown.value = false;
+  emit('resetContactSearch');
+  showCcEmailsDropdown.value = value.trim().length >= 2;
  emit('searchContacts', value);
 };

 const searchBccEmails = value => {
-  showBccEmailsDropdown.value = true;
+  showCcEmailsDropdown.value = false;
+  emit('resetContactSearch');
+  showBccEmailsDropdown.value = value.trim().length >= 2;
  emit('searchContacts', value);
 };

@@ -196,6 +207,7 @@ const stripMessageFormatting = channelType => {

 const handleInboxAction = ({ value, action, channelType, medium, ...rest }) => {
  v$.value.$reset();
+  copilot.reset(false);

  // Strip unsupported formatting when changing the target inbox
  if (channelType) {
@@ -222,6 +234,7 @@ const removeSignatureFromMessage = () => {

 const removeTargetInbox = value => {
  v$.value.$reset();
+  copilot.reset(false);
  removeSignatureFromMessage();

  stripMessageFormatting(DEFAULT_FORMATTING);
@@ -231,6 +244,7 @@ const removeTargetInbox = value => {
 };

 const clearSelectedContact = () => {
+  copilot.reset(false);
  removeSignatureFromMessage();
  emit('clearSelectedContact');
  state.message = '';
@@ -262,6 +276,7 @@ const handleAttachFile = files => {
 };

 const clearForm = () => {
+  copilot.reset(false);
  Object.assign(state, {
    message: '',
    subject: '',
@@ -324,6 +339,24 @@ const shouldShowMessageEditor = computed(() => {
    !inboxTypes.value.isTwilioWhatsapp
  );
 });
+
+const isCopilotActive = computed(() => copilot.isActive?.value ?? false);
+
+const onSubmitCopilotReply = () => {
+  const acceptedMessage = copilot.accept();
+  state.message = acceptedMessage;
+};
+
+useKeyboardEvents({
+  '$mod+Enter': {
+    action: () => {
+      if (isCopilotActive.value && !copilot.isButtonDisabled.value) {
+        onSubmitCopilotReply();
+      }
+    },
+    allowOnFocusedInput: true,
+  },
+});
 </script>

 <template>
@@ -354,6 +387,7 @@ const shouldShowMessageEditor = computed(() => {
        :show-inboxes-dropdown="showInboxesDropdown"
        :contactable-inboxes-list="contactableInboxesList"
        :has-errors="validationStates.isInboxInvalid"
+        :is-fetching-inboxes="isFetchingInboxes"
        @update-inbox="removeTargetInbox"
        @toggle-dropdown="showInboxesDropdown = $event"
        @handle-inbox-action="handleInboxAction"
@@ -382,6 +416,7 @@ const shouldShowMessageEditor = computed(() => {
        :has-errors="validationStates.isMessageInvalid"
        :channel-type="inboxChannelType"
        :medium="targetInbox?.medium || ''"
+        :copilot="copilot"
      />

      <AttachmentPreviews
@@ -391,7 +426,15 @@ const shouldShowMessageEditor = computed(() => {
      />
    </div>

+    <CopilotReplyBottomPanel
+      v-if="isCopilotActive"
+      :is-generating-content="copilot.isButtonDisabled.value"
+      class="h-[3.25rem] !px-4 !py-2"
+      @submit="onSubmitCopilotReply"
+      @cancel="copilot.reset"
+    />
    <ActionButtons
+      v-else
      :attached-files="state.attachedFiles"
      :is-whatsapp-inbox="inboxTypes.isWhatsapp"
      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
--- a/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
@@ -99,7 +99,6 @@ const inputClass = computed(() => {
          type="email"
          allow-create
          class="flex-1 min-h-7"
-          @focus="emit('updateDropdown', 'cc', true)"
          @input="emit('searchCcEmails', $event)"
          @on-click-outside="emit('updateDropdown', 'cc', false)"
          @update:model-value="handleCcUpdate"
@@ -133,7 +132,6 @@ const inputClass = computed(() => {
        allow-create
        class="flex-1 min-h-7"
        focus-on-mount
-        @focus="emit('updateDropdown', 'bcc', true)"
        @input="emit('searchBccEmails', $event)"
        @on-click-outside="emit('updateDropdown', 'bcc', false)"
        @update:model-value="handleBccUpdate"
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
@@ -1,9 +1,15 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
 <template>
  <div
    class="flex items-center w-full px-4 py-3 dark:bg-n-amber-11/15 bg-n-amber-3"
  >
    <span class="text-sm dark:text-n-amber-11 text-n-amber-11">
-      {{ $t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
+      {{ t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
    </span>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -6,6 +6,7 @@ import { generateLabelForContactableInboxesList } from 'dashboard/components-nex

 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';

 const props = defineProps({
  targetInbox: {
@@ -28,6 +29,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  isFetchingInboxes: {
+    type: Boolean,
+    default: false,
+  },
 });

 const emit = defineEmits([
@@ -71,7 +76,9 @@ const targetInboxLabel = computed(() => {
      v-on-click-outside="() => emit('toggleDropdown', false)"
      class="relative flex items-center h-7"
    >
+      <Spinner v-if="isFetchingInboxes" :size="16" />
      <Button
+        v-else
        :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
        variant="link"
        size="sm"
--- a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';

 import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import CopilotEditorSection from 'dashboard/components/widgets/conversation/CopilotEditorSection.vue';

 const props = defineProps({
  hasErrors: { type: Boolean, default: false },
@@ -10,6 +11,7 @@ const props = defineProps({
  messageSignature: { type: String, default: '' },
  channelType: { type: String, default: '' },
  medium: { type: String, default: '' },
+  copilot: { type: Object, default: null },
 });

 const editorKey = computed(() => `editor-${props.channelType}-${props.medium}`);
@@ -20,29 +22,67 @@ const modelValue = defineModel({
  type: String,
  default: '',
 });
+
+const isCopilotActive = computed(() => props.copilot?.isActive?.value ?? false);
+
+const executeCopilotAction = (action, data) => {
+  if (props.copilot) {
+    props.copilot.execute(action, data);
+  }
+};
 </script>

 <template>
-  <div class="flex-1 h-full">
-    <Editor
-      v-model="modelValue"
-      :editor-key="editorKey"
-      :placeholder="
-        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
-      "
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[10rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
-      :class="
-        hasErrors
-          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
-          : ''
-      "
-      enable-variables
-      :show-character-count="false"
-      :signature="messageSignature"
-      allow-signature
-      :send-with-signature="sendWithSignature"
-      :channel-type="channelType"
-      :medium="medium"
-    />
+  <div class="flex-1 h-full px-4 py-4">
+    <Transition
+      mode="out-in"
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 translate-y-2 scale-[0.98]"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 translate-y-2 scale-[0.98]"
+    >
+      <div
+        :key="copilot ? copilot.editorTransitionKey.value : 'rich'"
+        class="h-full"
+      >
+        <CopilotEditorSection
+          v-if="isCopilotActive"
+          :show-copilot-editor="copilot.showEditor.value"
+          :is-generating-content="copilot.isGenerating.value"
+          :generated-content="copilot.generatedContent.value"
+          class="!mb-0"
+          @focus="() => {}"
+          @blur="() => {}"
+          @clear-selection="() => {}"
+          @content-ready="copilot.setContentReady"
+          @send="copilot.sendFollowUp"
+        />
+        <Editor
+          v-else
+          v-model="modelValue"
+          :editor-key="editorKey"
+          :placeholder="
+            t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+          "
+          class="[&>div]:!border-transparent [&>div]:px-0 [&>div]:py-0 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[12rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
+          :class="
+            hasErrors
+              ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+              : ''
+          "
+          enable-variables
+          enable-captain-tools
+          :show-character-count="false"
+          :signature="messageSignature"
+          allow-signature
+          :send-with-signature="sendWithSignature"
+          :channel-type="channelType"
+          :medium="medium"
+          @execute-copilot-action="executeCopilotAction"
+        />
+      </div>
+    </Transition>
  </div>
 </template>