chore: Minor fix

app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue

@@ -7,54 +7,25 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
 const props = defineProps({
-  subject: {
-    type: String,
-    required: true,
-  },
-  ccEmails: {
-    type: String,
-    required: true,
-  },
-  bccEmails: {
-    type: String,
-    required: true,
-  },
-  contacts: {
-    type: Array,
-    required: true,
-  },
-  showCcEmailsDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  showBccEmailsDropdown: {
-    type: Boolean,
-    required: true,
-  },
-  showBccInput: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  hasErrors: {
-    type: Boolean,
-    default: false,
-  },
+  contacts: { type: Array, required: true },
+  showCcEmailsDropdown: { type: Boolean, required: false },
+  showBccEmailsDropdown: { type: Boolean, required: false },
+  showBccInput: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  hasErrors: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
-  'update:ccEmails',
-  'update:bccEmails',
-  'update:subject',
   'searchCcEmails',
   'searchBccEmails',
   'toggleBcc',
   'updateDropdown',
 ]);
 
+const subject = defineModel('subject', { type: String, default: '' });
+const ccEmails = defineModel('ccEmails', { type: String, default: '' });
+const bccEmails = defineModel('bccEmails', { type: String, default: '' });
+
 const { t } = useI18n();
 
 // Convert string to array for TagInput
@@ -79,11 +50,11 @@ const contactEmailsList = computed(() => {
 
 // Handle updates from TagInput and convert array back to string
 const handleCcUpdate = value => {
-  emit('update:ccEmails', value.join(','));
+  ccEmails.value = value.join(',');
 };
 
 const handleBccUpdate = value => {
-  emit('update:bccEmails', value.join(','));
+  bccEmails.value = value.join(',');
 };
 </script>
 
@@ -91,7 +62,7 @@ const handleBccUpdate = value => {
   <div class="flex flex-col divide-y divide-n-strong">
     <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
       <InlineInput
-        :model-value="subject"
+        v-model="subject"
         :placeholder="
           t('COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS.SUBJECT_PLACEHOLDER')
         "
@@ -102,7 +73,6 @@ const handleBccUpdate = value => {
             ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
             : ''
         "
-        @update:model-value="emit('update:subject', $event)"
       />
     </div>
     <div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">

app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue

@@ -5,10 +5,6 @@ import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 
 defineProps({
-  modelValue: {
-    type: String,
-    required: true,
-  },
   isEmailOrWebWidgetInbox: {
     type: Boolean,
     required: true,
@@ -23,9 +19,12 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
-
 const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
 </script>
 
 <template>
@@ -35,7 +34,7 @@ const { t } = useI18n();
     :class="!hasAttachments && 'min-h-[200px]'"
   >
     <Editor
-      :model-value="modelValue"
+      v-model="modelValue"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
@@ -46,12 +45,11 @@ const { t } = useI18n();
           : ''
       "
       :show-character-count="false"
-      @update:model-value="emit('update:modelValue', $event)"
     />
   </div>
   <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
     <TextArea
-      :model-value="modelValue"
+      v-model="modelValue"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
@@ -62,7 +60,6 @@ const { t } = useI18n();
           ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
           : ''
       "
-      @update:model-value="emit('update:modelValue', $event)"
     />
   </div>
 </template>