fix: apply ESLint rule vue/prefer-true-attribute-shorthand

app/javascript/dashboard/components/ConversationItem.vue

@@ -58,7 +58,7 @@ export default {
     :conversation-type="conversationType"
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
-    :enable-context-menu="true"
+    enable-context-menu
     @selectConversation="selectConversation"
     @deSelectConversation="deSelectConversation"
     @assignAgent="assignAgent"

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -92,7 +92,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         icon="book-open-globe"
         name="DOCS"
-        :open-in-new-page="true"
+        open-in-new-page
         :to="helpDocsURL"
       />
       <NotificationBell @openNotificationPanel="openNotificationPanel" />

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -27,8 +27,8 @@ export default {
 <template>
   <div class="date-picker">
     <DatePicker
-      :range="true"
-      :confirm="true"
+      range
+      confirm
       :clearable="false"
       :editable="false"
       :confirm-text="confirmText"

app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -34,7 +34,7 @@ export default {
   <div class="date-picker">
     <DatePicker
       type="datetime"
-      :confirm="true"
+      confirm
       :clearable="false"
       :editable="false"
       :confirm-text="confirmText"

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -138,7 +138,7 @@ export default {
               track-by="id"
               label="name"
               :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              :multiple="true"
+              multiple
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
@@ -186,7 +186,7 @@ export default {
       v-if="inputType === 'textarea'"
       v-model="castMessageVmodel"
       rows="4"
-      :enable-variables="true"
+      enable-variables
       :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
       class="action-message"
     />

app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue

@@ -33,7 +33,7 @@ export default {
         track-by="id"
         label="name"
         :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        :multiple="true"
+        multiple
         selected-label
         :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
         deselect-label=""

app/javascript/dashboard/components/widgets/ColorPicker.vue

@@ -42,7 +42,7 @@ export default {
     <Chrome
       v-if="isPickerOpen"
       v-on-clickaway="closeTogglePicker"
-      :disable-alpha="true"
+      disable-alpha
       :value="value"
       class="colorpicker--chrome"
       @input="updateColor"

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -203,7 +203,7 @@ export default {
               track-by="id"
               label="name"
               placeholder="Select"
-              :multiple="true"
+              multiple
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""

app/javascript/dashboard/components/widgets/LabelSelector.vue

@@ -84,7 +84,7 @@ export default {
       :key="label.id"
       :title="label.title"
       :description="label.description"
-      :show-close="true"
+      show-close
       :color="label.color"
       variant="smooth"
       @click="removeItem"

app/javascript/dashboard/components/widgets/ThumbnailGroup.vue

@@ -43,7 +43,7 @@ export default {
       :title="user.name"
       :src="user.thumbnail"
       :username="user.name"
-      :has-border="true"
+      has-border
       :size="size"
       :class="`overlapping-thumbnail gap-${gap}`"
     />

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

@@ -325,7 +325,7 @@ export default {
           :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :grouped-filters="true"
+          grouped-filters
           :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"

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

@@ -1087,7 +1087,7 @@ export default {
       color-scheme="secondary"
       class="banner--self-assign"
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-      :has-action-button="true"
+      has-action-button
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
       @click="onClickSelfAssign"
     />
@@ -1146,7 +1146,7 @@ export default {
         :placeholder="messagePlaceHolder"
         :min-height="4"
         :signature="signatureToApply"
-        :allow-signature="true"
+        allow-signature
         :send-with-signature="sendWithSignature"
         @typingOff="onTypingOff"
         @typingOn="onTypingOn"
@@ -1162,10 +1162,10 @@ export default {
         :placeholder="messagePlaceHolder"
         :update-selection-with="updateEditorSelectionWith"
         :min-height="4"
-        :enable-variables="true"
+        enable-variables
         :variables="messageVariables"
         :signature="signatureToApply"
-        :allow-signature="true"
+        allow-signature
         :channel-type="channelType"
         @typingOff="onTypingOff"
         @typingOn="onTypingOn"

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -26,7 +26,7 @@ export default {
 <template>
   <div class="image message-text__wrap">
     <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
+    <woot-modal full-width :show.sync="show" :on-close="onClose">
       <img :src="url" class="modal-image skip-context-menu" />
     </woot-modal>
   </div>

app/javascript/dashboard/modules/contact/components/ContactFields.vue

@@ -59,7 +59,7 @@ export default {
       icon="mail"
       emoji=""
       :value="contact.email"
-      :show-edit="true"
+      show-edit
       @update="onEmailUpdate"
     />
     <Attribute
@@ -67,7 +67,7 @@ export default {
       icon="call"
       emoji=""
       :value="contact.phone_number"
-      :show-edit="true"
+      show-edit
       @update="onPhoneUpdate"
     />
     <Attribute
@@ -76,7 +76,7 @@ export default {
       icon="map"
       emoji="🌍"
       :value="additionalAttributes.location"
-      :show-edit="true"
+      show-edit
       @update="onLocationUpdate"
     />
     <div
@@ -88,7 +88,7 @@ export default {
         :label="attribute"
         icon="chevron-right"
         :value="customAttributes[attribute]"
-        :show-edit="true"
+        show-edit
         @update="value => onCustomAttributeUpdate(attribute, value)"
       />
     </div>

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -91,7 +91,7 @@ export default {
             :clear-on-select="false"
             :show-labels="false"
             :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
-            :allow-empty="true"
+            allow-empty
             :loading="isSearching"
             :max-height="150"
             open-direction="top"

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -100,7 +100,7 @@ export default {
 <template>
   <ninja-keys
     ref="ninjakeys"
-    :no-auto-load-md-icons="true"
+    no-auto-load-md-icons
     hide-breadcrumbs
     :placeholder="placeholder"
     @selected="onSelected"

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -286,7 +286,7 @@ export default {
           :key="i"
           v-model="appliedFilters[i]"
           :filter-groups="filterGroups"
-          :grouped-filters="true"
+          grouped-filters
           :input-type="
             getInputType(
               appliedFilters[i].attribute_key,

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -253,7 +253,7 @@ export default {
     class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
   >
     <VeTable
-      :fixed-header="true"
+      fixed-header
       max-height="calc(100vh - 7.125rem)"
       scroll-width="187rem"
       :columns="columns"

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -60,7 +60,7 @@ export default {
           :key="conversation.id"
           :chat="conversation"
           :hide-inbox-name="false"
-          :hide-thumbnail="true"
+          hide-thumbnail
           class="compact"
         />
       </div>

app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue

@@ -155,11 +155,11 @@ export default {
     <div class="flex justify-between">
       <div class="flex justify-between w-full mb-1">
         <div>
-          <p v-if="watchersList.length" class="total-watchers m-0 text-sm">
+          <p v-if="watchersList.length" class="m-0 text-sm total-watchers">
             <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
-          <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
+          <p v-else class="m-0 text-sm text-slate-400 dark:text-slate-700">
             {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
           </p>
         </div>
@@ -174,7 +174,7 @@ export default {
         />
       </div>
     </div>
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <ThumbnailGroup
         :more-thumbnails-text="moreThumbnailsText"
         :show-more-thumbnails-count="showMoreThumbs"
@@ -182,7 +182,7 @@ export default {
       />
       <p
         v-if="isUserWatching"
-        class="text-slate-300 dark:text-slate-300 m-0 text-sm"
+        class="m-0 text-sm text-slate-300 dark:text-slate-300"
       >
         {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
       </p>
@@ -205,9 +205,9 @@ export default {
       :class="{ 'dropdown-pane--open': showDropDown }"
       class="dropdown-pane"
     >
-      <div class="flex justify-between items-center mb-1">
+      <div class="flex items-center justify-between mb-1">
         <h4
-          class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
         >
           {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
         </h4>
@@ -222,7 +222,7 @@ export default {
       <MultiselectDropdownItems
         :options="agentsList"
         :selected-items="selectedWatchers"
-        :has-thumbnail="true"
+        has-thumbnail
         @click="onClickItem"
       />
     </div>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -373,7 +373,7 @@ export default {
           :custom-label="countryNameWithCode"
           :max-height="160"
           :options="countries"
-          :allow-empty="true"
+          allow-empty
           :option-height="104"
         />
       </div>

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -351,7 +351,7 @@ export default {
               select-label=""
               deselect-label=""
               :max-height="160"
-              :close-on-select="true"
+              close-on-select
               :options="[...inboxes]"
             >
               <template slot="singleLabel" slot-scope="{ option }">
@@ -440,9 +440,9 @@ export default {
                 v-model="message"
                 class="message-editor"
                 :class="{ editor_warning: v$.message.$error }"
-                :enable-variables="true"
+                enable-variables
                 :signature="signatureToApply"
-                :allow-signature="true"
+                allow-signature
                 :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
                 @toggle-canned-menu="toggleCannedMenu"
                 @blur="v$.message.$touch"
@@ -495,8 +495,8 @@ export default {
               input-id="newConversationAttachment"
               :size="4096 * 4096"
               :accept="allowedFileTypes"
-              :multiple="true"
-              :drop="true"
+              multiple
+              drop
               :drop-directory="false"
               :data="{
                 direct_upload_url: '/rails/active_storage/direct_uploads',

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -157,7 +157,7 @@ export default {
       :label="attribute.attribute_display_name"
       :description="attribute.attribute_description"
       :value="attribute.value"
-      :show-actions="true"
+      show-actions
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :class="attributeClass"

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -86,7 +86,7 @@ export default {
           :key="label.id"
           :title="label.title"
           :description="label.description"
-          :show-close="true"
+          show-close
           :color="label.color"
           variant="smooth"
           class="max-w-[calc(100%-0.5rem)]"

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue

@@ -74,7 +74,7 @@ export default {
               )
             "
             color-scheme="warning"
-            :small="true"
+            small
             variant="smooth"
             class="default-status"
           />

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -208,8 +208,8 @@ export default {
             label="name"
             :options="metaOptions"
             track-by="name"
-            :multiple="true"
-            :taggable="true"
+            multiple
+            taggable
             :close-on-select="false"
             @search-change="handleSearchChange"
             @close="onBlur"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -107,7 +107,7 @@ export default {
       v-if="showEmojiPicker"
       v-on-clickaway="hideEmojiPicker"
       class="left-0 top-16"
-      :show-remove-button="true"
+      show-remove-button
       :on-click="onClickInsertEmoji"
     />
   </div>

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -227,8 +227,8 @@ export default {
               track-by="name"
               :class="{ invalid: isMultiselectInvalid }"
               :options="options"
-              :multiple="true"
-              :taggable="true"
+              multiple
+              taggable
               @close="onTouch"
               @tag="addTagValue"
             />

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -232,8 +232,8 @@ export default {
             track-by="name"
             :class="{ invalid: isMultiselectInvalid }"
             :options="options"
-            :multiple="true"
-            :taggable="true"
+            multiple
+            taggable
             @tag="addTagValue"
           />
           <label v-show="isMultiselectInvalid" class="error-message">

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -268,10 +268,10 @@ export default {
             :options="audienceList"
             track-by="id"
             label="title"
-            :multiple="true"
+            multiple
             :close-on-select="false"
             :clear-on-select="false"
-            :hide-selected="true"
+            hide-selected
             :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
             selected-label
             :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"

app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue

@@ -194,7 +194,7 @@ export default {
           <WootMessageEditor
             v-model="message"
             class="message-editor"
-            :is-format-mode="true"
+            is-format-mode
             :class="{ editor_warning: v$.message.$error }"
             :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
             @input="v$.message.$touch"

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -109,7 +109,7 @@ export default {
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
+              enable-variables
               :enable-canned-responses="false"
               :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
               @blur="v$.content.$touch"

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -114,7 +114,7 @@ export default {
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
+              enable-variables
               :enable-canned-responses="false"
               :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
               @blur="v$.content.$touch"

app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue

@@ -80,10 +80,10 @@ export default {
               :options="agentList"
               track-by="id"
               label="name"
-              :multiple="true"
+              multiple
               :close-on-select="false"
               :clear-on-select="false"
-              :hide-selected="true"
+              hide-selected
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -257,8 +257,8 @@ export default {
               {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
               <multiselect
                 v-model.trim="selectedPage"
-                :close-on-select="true"
-                :allow-empty="true"
+                close-on-select
+                allow-empty
                 :options="getSelectablePages"
                 track-by="id"
                 label="name"

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue

@@ -134,7 +134,7 @@ export default {
           />
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
         </label>
-        <p class="text-slate-700 dark:text-slate-300 mb-4">
+        <p class="mb-4 text-slate-700 dark:text-slate-300">
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
         </p>
         <div v-if="isBusinessHoursEnabled" class="mb-6">
@@ -144,12 +144,12 @@ export default {
             </label>
             <div
               v-if="isRichEditorEnabled"
-              class="py-0 px-4 border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md mx-0 mt-0 mb-4"
+              class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
             >
               <WootMessageEditor
                 v-model="unavailableMessage"
-                :enable-variables="true"
-                :is-format-mode="true"
+                enable-variables
+                is-format-mode
                 class="message-editor"
                 :min-height="4"
               />
@@ -168,7 +168,7 @@ export default {
               selected-label=""
               track-by="value"
               label="label"
-              :close-on-select="true"
+              close-on-select
               :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
               :allow-empty="false"
             />

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue

@@ -127,10 +127,10 @@ export default {
         :options="agentList"
         track-by="id"
         label="name"
-        :multiple="true"
+        multiple
         :close-on-select="false"
         :clear-on-select="false"
-        :hide-selected="true"
+        hide-selected
         placeholder="Pick some"
         selected-label
         :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -112,7 +112,7 @@ export default {
           :script="inbox.web_widget_script"
           lang="html"
           :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
-          :enable-code-pen="true"
+          enable-code-pen
         />
       </SettingsSection>
 

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -88,7 +88,7 @@ export default {
         :dropdown-values="dropdownValues()"
         :show-action-input="showActionInput"
         :show-remove-button="false"
-        :is-macro="true"
+        is-macro
         :error-message="errors[`action_${index}`] || ''"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"

app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue

@@ -32,11 +32,11 @@ const updateSignature = () => {
       id="message-signature-input"
       v-model="signature"
       class="message-editor h-[10rem] !px-3"
-      :is-format-mode="true"
+      is-format-mode
       :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
       :enabled-menu-options="customEditorMenuList"
       :enable-suggestions="false"
-      :show-image-resize-toolbar="true"
+      show-image-resize-toolbar
     />
     <FormButton
       type="submit"

app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue

@@ -93,7 +93,7 @@ export default {
   <div class="flex-1 p-4 overflow-auto">
     <ReportFilterSelector
       :show-agents-filter="false"
-      :show-group-by-filter="true"
+      show-group-by-filter
       :show-business-hours-switch="false"
       @filterChange="onFilterChange"
     />

app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue

@@ -110,9 +110,9 @@ export default {
 <template>
   <div class="flex-1 p-4 overflow-auto">
     <ReportFilterSelector
-      :show-agents-filter="true"
-      :show-inbox-filter="true"
-      :show-rating-filter="true"
+      show-agents-filter
+      show-inbox-filter
+      show-rating-filter
       :show-team-filter="isTeamsEnabled"
       :show-business-hours-switch="false"
       @filterChange="onFilterChange"

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -118,7 +118,7 @@ export default {
     </woot-button>
     <ReportFilterSelector
       :show-agents-filter="false"
-      :show-group-by-filter="true"
+      show-group-by-filter
       @filterChange="onFilterChange"
     />
     <ReportContainer :group-by="groupBy" />

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -131,8 +131,8 @@ export default {
   <div class="csat--table-container">
     <VeTable
       max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
-      :border-around="true"
+      fixed-header
+      border-around
       :columns="columns"
       :table-data="tableData"
     />

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue

@@ -32,10 +32,10 @@ export default {
       :options="options"
       track-by="id"
       label="name"
-      :multiple="true"
+      multiple
       :close-on-select="false"
       :clear-on-select="false"
-      :hide-selected="true"
+      hide-selected
       :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
       selected-label
       :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue

@@ -112,7 +112,7 @@ export default {
   <div class="agent-table-container">
     <VeTable
       max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
+      fixed-header
       :columns="columns"
       :table-data="tableData"
     />

app/javascript/shared/components/GreetingsEditor.vue

@@ -47,13 +47,13 @@ export default {
   <section class="w-3/4">
     <div
       v-if="richtext"
-      class="py-0 px-4 rounded-md border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 mt-0 mx-0 mb-4"
+      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
     >
       <WootMessageEditor
         v-model="greetingsMessage"
-        :is-format-mode="true"
-        :enable-variables="true"
-        class="input bg-white dark:bg-slate-900"
+        is-format-mode
+        enable-variables
+        class="bg-white input dark:bg-slate-900"
         :placeholder="placeholder"
         :min-height="4"
         @input="handleInput"

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -94,7 +94,7 @@ export default {
           ref="searchbar"
           v-model="search"
           type="text"
-          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0"
+          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
         <woot-button