chore: Improve compose new conversation form (#13176)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2026-01-13 18:52:10 +05:30
parent c483034a07
commit 1a220b2982
9 changed files with 165 additions and 92 deletions
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -5,6 +5,7 @@ import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';

 const props = defineProps({
  modelValue: { type: String, default: '' },
+  editorKey: { type: String, default: '' },
  label: { type: String, default: '' },
  placeholder: { type: String, default: '' },
  focusOnMount: { type: Boolean, default: false },
@@ -96,6 +97,7 @@ watch(
      ]"
    >
      <WootEditor
+        :editor-id="editorKey"
        :model-value="modelValue"
        :placeholder="placeholder"
        :focus-on-mount="focusOnMount"
@@ -152,6 +154,13 @@ watch(
          }
        }
      }
+
+      .ProseMirror-menubar {
+        width: fit-content !important;
+        position: relative !important;
+        top: unset !important;
+        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      }
    }
  }
 }
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -44,6 +44,12 @@ const emit = defineEmits([

 const { t } = useI18n();

+const attachmentId = ref(0);
+const generateUid = () => {
+  attachmentId.value += 1;
+  return `attachment-${attachmentId.value}`;
+};
+
 const uploadAttachment = ref(null);
 const isEmojiPickerOpen = ref(false);

@@ -176,7 +182,8 @@ const onPaste = e => {
    .filter(file => file.size > 0)
    .forEach(file => {
      const { name, type, size } = file;
-      onFileUpload({ file, name, type, size });
+      // Add unique ID for clipboard-pasted files
+      onFileUpload({ file, name, type, size, id: generateUid() });
    });
 };

--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -7,6 +7,7 @@ import {
  appendSignature,
  removeSignature,
  getEffectiveChannelType,
+  stripUnsupportedMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
  buildContactableInboxesList,
@@ -47,6 +48,8 @@ const emit = defineEmits([
  'createConversation',
 ]);

+const DEFAULT_FORMATTING = 'Context::Default';
+
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -198,10 +201,22 @@ const setSelectedContact = async ({ value, action, ...rest }) => {
  showInboxesDropdown.value = true;
 };

-const handleInboxAction = ({ value, action, ...rest }) => {
+const stripMessageFormatting = channelType => {
+  if (!state.message || !channelType) return;
+
+  state.message = stripUnsupportedMarkdown(state.message, channelType, false);
+};
+
+const handleInboxAction = ({ value, action, channelType, medium, ...rest }) => {
  v$.value.$reset();
-  state.message = '';
-  emit('updateTargetInbox', { ...rest });
+
+  // Strip unsupported formatting when changing the target inbox
+  if (channelType) {
+    const newChannelType = getEffectiveChannelType(channelType, medium);
+    stripMessageFormatting(newChannelType);
+  }
+
+  emit('updateTargetInbox', { ...rest, channelType, medium });
  showInboxesDropdown.value = false;
  state.attachedFiles = [];
 };
@@ -221,7 +236,9 @@ const removeSignatureFromMessage = () => {
 const removeTargetInbox = value => {
  v$.value.$reset();
  removeSignatureFromMessage();
-  state.message = '';
+
+  stripMessageFormatting(DEFAULT_FORMATTING);
+
  emit('updateTargetInbox', value);
  state.attachedFiles = [];
 };
@@ -324,67 +341,68 @@ const shouldShowMessageEditor = computed(() => {

 <template>
  <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
  >
-    <ContactSelector
-      :contacts="contacts"
-      :selected-contact="selectedContact"
-      :show-contacts-dropdown="showContactsDropdown"
-      :is-loading="isLoading"
-      :is-creating-contact="isCreatingContact"
-      :contact-id="contactId"
-      :contactable-inboxes-list="contactableInboxesList"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :has-errors="validationStates.isContactInvalid"
-      @search-contacts="handleContactSearch"
-      @set-selected-contact="setSelectedContact"
-      @clear-selected-contact="clearSelectedContact"
-      @update-dropdown="handleDropdownUpdate"
-    />
-    <InboxEmptyState v-if="showNoInboxAlert" />
-    <InboxSelector
-      v-else
-      :target-inbox="targetInbox"
-      :selected-contact="selectedContact"
-      :show-inboxes-dropdown="showInboxesDropdown"
-      :contactable-inboxes-list="contactableInboxesList"
-      :has-errors="validationStates.isInboxInvalid"
-      @update-inbox="removeTargetInbox"
-      @toggle-dropdown="showInboxesDropdown = $event"
-      @handle-inbox-action="handleInboxAction"
-    />
+    <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
+      <ContactSelector
+        :contacts="contacts"
+        :selected-contact="selectedContact"
+        :show-contacts-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :is-creating-contact="isCreatingContact"
+        :contact-id="contactId"
+        :contactable-inboxes-list="contactableInboxesList"
+        :show-inboxes-dropdown="showInboxesDropdown"
+        :has-errors="validationStates.isContactInvalid"
+        @search-contacts="handleContactSearch"
+        @set-selected-contact="setSelectedContact"
+        @clear-selected-contact="clearSelectedContact"
+        @update-dropdown="handleDropdownUpdate"
+      />
+      <InboxEmptyState v-if="showNoInboxAlert" />
+      <InboxSelector
+        v-else
+        :target-inbox="targetInbox"
+        :selected-contact="selectedContact"
+        :show-inboxes-dropdown="showInboxesDropdown"
+        :contactable-inboxes-list="contactableInboxesList"
+        :has-errors="validationStates.isInboxInvalid"
+        @update-inbox="removeTargetInbox"
+        @toggle-dropdown="showInboxesDropdown = $event"
+        @handle-inbox-action="handleInboxAction"
+      />

-    <EmailOptions
-      v-if="inboxTypes.isEmail"
-      v-model:cc-emails="state.ccEmails"
-      v-model:bcc-emails="state.bccEmails"
-      v-model:subject="state.subject"
-      :contacts="contacts"
-      :show-cc-emails-dropdown="showCcEmailsDropdown"
-      :show-bcc-emails-dropdown="showBccEmailsDropdown"
-      :is-loading="isLoading"
-      :has-errors="validationStates.isSubjectInvalid"
-      @search-cc-emails="searchCcEmails"
-      @search-bcc-emails="searchBccEmails"
-      @update-dropdown="handleDropdownUpdate"
-    />
+      <EmailOptions
+        v-if="inboxTypes.isEmail"
+        v-model:cc-emails="state.ccEmails"
+        v-model:bcc-emails="state.bccEmails"
+        v-model:subject="state.subject"
+        :contacts="contacts"
+        :show-cc-emails-dropdown="showCcEmailsDropdown"
+        :show-bcc-emails-dropdown="showBccEmailsDropdown"
+        :is-loading="isLoading"
+        :has-errors="validationStates.isSubjectInvalid"
+        @search-cc-emails="searchCcEmails"
+        @search-bcc-emails="searchBccEmails"
+        @update-dropdown="handleDropdownUpdate"
+      />

-    <MessageEditor
-      v-if="shouldShowMessageEditor"
-      v-model="state.message"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      :has-errors="validationStates.isMessageInvalid"
-      :has-attachments="state.attachedFiles.length > 0"
-      :channel-type="inboxChannelType"
-      :medium="targetInbox?.medium || ''"
-    />
+      <MessageEditor
+        v-if="shouldShowMessageEditor"
+        v-model="state.message"
+        :message-signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+        :has-errors="validationStates.isMessageInvalid"
+        :channel-type="inboxChannelType"
+        :medium="targetInbox?.medium || ''"
+      />

-    <AttachmentPreviews
-      v-if="state.attachedFiles.length > 0"
-      :attachments="state.attachedFiles"
-      @update:attachments="state.attachedFiles = $event"
-    />
+      <AttachmentPreviews
+        v-if="state.attachedFiles.length > 0"
+        :attachments="state.attachedFiles"
+        @update:attachments="state.attachedFiles = $event"
+      />
+    </div>

    <ActionButtons
      :attached-files="state.attachedFiles"
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
      <DropdownMenu
        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
        :menu-items="contactableInboxesList"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
        @action="emit('handleInboxAction', $event)"
      />
    </div>
--- a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
@@ -6,7 +6,6 @@ import Editor from 'dashboard/components-next/Editor/Editor.vue';

 const props = defineProps({
  hasErrors: { type: Boolean, default: false },
-  hasAttachments: { type: Boolean, default: false },
  sendWithSignature: { type: Boolean, default: false },
  messageSignature: { type: String, default: '' },
  channelType: { type: String, default: '' },
@@ -24,14 +23,14 @@ const modelValue = defineModel({
 </script>

 <template>
-  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
+  <div class="flex-1 h-full">
    <Editor
-      :key="editorKey"
      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-[200px]"
+      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'
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -230,7 +230,7 @@ const handleBlur = e => emit('blur', e);
        v-if="showDropdownMenu"
        :menu-items="filteredMenuItems"
        :is-searching="isLoading"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
        @action="handleDropdownAction"
      />
    </div>
--- a/app/javascript/dashboard/helper/editorHelper.js
+++ b/app/javascript/dashboard/helper/editorHelper.js
@@ -38,9 +38,14 @@ export function extractTextFromMarkdown(markdown) {
 *
 * @param {string} markdown - markdown text to process
 * @param {string} channelType - The channel type to check supported formatting
+ * @param {boolean} cleanWhitespace - Whether to clean up extra whitespace and blank lines (default: true for signatures)
 * @returns {string} - The markdown with unsupported formatting removed
 */
-export function stripUnsupportedSignatureMarkdown(markdown, channelType) {
+export function stripUnsupportedMarkdown(
+  markdown,
+  channelType,
+  cleanWhitespace = true
+) {
  if (!markdown) return '';

  const { marks = [], nodes = [] } = FORMATTING[channelType] || {};
@@ -55,6 +60,9 @@ export function stripUnsupportedSignatureMarkdown(markdown, channelType) {
    );
  }, markdown);

+  if (!cleanWhitespace) return result;
+
+  // Clean whitespace for signatures
  return result
    .split('\n')
    .map(line => line.trim())
@@ -155,7 +163,7 @@ export function getEffectiveChannelType(channelType, medium) {
 export function appendSignature(body, signature, channelType) {
  // Strip only unsupported formatting based on channel capabilities
  const preparedSignature = channelType
-    ? stripUnsupportedSignatureMarkdown(signature, channelType)
+    ? stripUnsupportedMarkdown(signature, channelType)
    : signature;
  const cleanedSignature = cleanSignature(preparedSignature);
  // if signature is already present, return body
@@ -178,7 +186,7 @@ export function appendSignature(body, signature, channelType) {
 export function removeSignature(body, signature, channelType) {
  // Build unique list of signature variants to try
  const channelStripped = channelType
-    ? cleanSignature(stripUnsupportedSignatureMarkdown(signature, channelType))
+    ? cleanSignature(stripUnsupportedMarkdown(signature, channelType))
    : null;
  const signaturesToTry = [
    cleanSignature(signature),
--- a/app/javascript/dashboard/helper/specs/editorHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/editorHelper.spec.js
@@ -5,7 +5,7 @@ import {
  replaceSignature,
  cleanSignature,
  extractTextFromMarkdown,
-  stripUnsupportedSignatureMarkdown,
+  stripUnsupportedMarkdown,
  insertAtCursor,
  findNodeToInsertImage,
  setURLWithQueryAndSize,
@@ -145,25 +145,19 @@ describe('appendSignature', () => {
  });
 });

-describe('stripUnsupportedSignatureMarkdown', () => {
+describe('stripUnsupportedMarkdown', () => {
  const richSignature =
    '**Bold** _italic_ [link](http://example.com) ![](http://localhost:3000/image.png)';

  it('keeps all formatting for Email channel (supports image, link, strong, em)', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Email'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Email');
    expect(result).toContain('**Bold**');
    expect(result).toContain('_italic_');
    expect(result).toContain('[link](http://example.com)');
    expect(result).toContain('![](http://localhost:3000/image.png)');
  });
  it('strips images but keeps bold/italic for Api channel', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Api'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Api');
    expect(result).toContain('**Bold**');
    expect(result).toContain('_italic_');
    expect(result).toContain('link'); // link text kept
@@ -171,20 +165,14 @@ describe('stripUnsupportedSignatureMarkdown', () => {
    expect(result).not.toContain('![]('); // image removed
  });
  it('strips images but keeps bold/italic/link for Telegram channel', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Telegram'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Telegram');
    expect(result).toContain('**Bold**');
    expect(result).toContain('_italic_');
    expect(result).toContain('[link](http://example.com)');
    expect(result).not.toContain('![](');
  });
  it('strips all formatting for SMS channel', () => {
-    const result = stripUnsupportedSignatureMarkdown(
-      richSignature,
-      'Channel::Sms'
-    );
+    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Sms');
    expect(result).toContain('Bold');
    expect(result).toContain('italic');
    expect(result).toContain('link');
@@ -194,8 +182,52 @@ describe('stripUnsupportedSignatureMarkdown', () => {
    expect(result).not.toContain('![](');
  });
  it('returns empty string for empty input', () => {
-    expect(stripUnsupportedSignatureMarkdown('', 'Channel::Api')).toBe('');
-    expect(stripUnsupportedSignatureMarkdown(null, 'Channel::Api')).toBe('');
+    expect(stripUnsupportedMarkdown('', 'Channel::Api')).toBe('');
+    expect(stripUnsupportedMarkdown(null, 'Channel::Api')).toBe('');
+  });
+
+  describe('with cleanWhitespace parameter', () => {
+    const textWithWhitespace =
+      '**Bold** text\n\nWith multiple\n\nLine breaks\n\n  And spaces  ';
+
+    it('cleans whitespace when cleanWhitespace=true (default)', () => {
+      const result = stripUnsupportedMarkdown(
+        textWithWhitespace,
+        'Channel::Api',
+        true
+      );
+      expect(result).toBe(
+        '**Bold** text\nWith multiple\nLine breaks\nAnd spaces'
+      );
+      expect(result).not.toContain('\n\n');
+      expect(result).not.toContain('  ');
+    });
+
+    it('preserves whitespace when cleanWhitespace=false', () => {
+      const result = stripUnsupportedMarkdown(
+        textWithWhitespace,
+        'Channel::Api',
+        false
+      );
+      expect(result).toContain('\n\n');
+      expect(result).toContain('  And spaces  ');
+      expect(result).toBe(
+        '**Bold** text\n\nWith multiple\n\nLine breaks\n\n  And spaces  '
+      );
+    });
+
+    it('strips formatting but preserves whitespace for messages', () => {
+      const messageWithFormatting = '**Bold**\n\n`code`\n\nNormal text';
+      const result = stripUnsupportedMarkdown(
+        messageWithFormatting,
+        'Channel::Sms',
+        false
+      );
+      expect(result).toBe('Bold\n\ncode\n\nNormal text');
+      expect(result).toContain('\n\n');
+      expect(result).not.toContain('**');
+      expect(result).not.toContain('`');
+    });
  });
 });

--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -370,7 +370,7 @@ onUnmounted(() => {
      />
    </div>
    <section class="flex flex-col flex-grow w-full h-full overflow-hidden">
-      <div class="w-full max-w-5xl mx-auto z-[60]">
+      <div class="w-full max-w-5xl mx-auto z-30">
        <div class="flex flex-col w-full px-4">
          <SearchHeader
            v-model:filters="filters"