fix: Update tweet character count logic (#2709)

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

@@ -53,9 +53,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-    }),
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
     showContactPanel() {
       return this.isContactPanelOpen && this.currentChat.id;
     },

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

@@ -46,6 +46,7 @@
           :message-type="data.message_type"
           :readable-time="readableTime"
           :source-id="data.source_id"
+          :inbox-id="data.inbox_id"
         />
       </div>
       <spinner v-if="isPending" size="tiny" />

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

@@ -33,11 +33,11 @@
 
     <div v-if="isATweet" class="banner">
       <span v-if="!selectedTweetId">
-        {{ $t('CONVERSATION.LAST_INCOMING_TWEET') }}
+        {{ $t('CONVERSATION.SELECT_A_TWEET_TO_REPLY') }}
       </span>
       <span v-else>
         {{ $t('CONVERSATION.REPLYING_TO') }}
-        {{ selectedTweet }}
+        {{ selectedTweet.content || '' }}
       </span>
       <button
         v-if="selectedTweetId"
@@ -89,9 +89,10 @@
           />
         </div>
       </div>
-      <ReplyBox
+      <reply-box
         :conversation-id="currentChat.id"
-        :in-reply-to="selectedTweetId"
+        :is-a-tweet="isATweet"
+        :selected-tweet="selectedTweet"
         @scrollToMessage="scrollToBottom"
       />
     </div>
@@ -207,10 +208,10 @@ export default {
     selectedTweet() {
       if (this.selectedTweetId) {
         const { messages = [] } = this.getMessages;
-        const [selectedMessage = {}] = messages.filter(
+        const [selectedMessage] = messages.filter(
           message => message.id === this.selectedTweetId
         );
-        return selectedMessage.content || '';
+        return selectedMessage || {};
       }
       return '';
     },

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

@@ -107,9 +107,13 @@ export default {
   },
   mixins: [clickaway, inboxMixin, uiSettingsMixin, alertMixin],
   props: {
-    inReplyTo: {
-      type: [String, Number],
-      default: '',
+    selectedTweet: {
+      type: [Object, String],
+      default: () => ({}),
+    },
+    isATweet: {
+      type: Boolean,
+      default: false,
     },
   },
   data() {
@@ -169,11 +173,14 @@ export default {
       return this.maxLength - this.message.length;
     },
     isReplyButtonDisabled() {
-      const isMessageEmpty = this.isMessageEmpty;
+      if (this.isATweet && !this.inReplyTo) {
+        return true;
+      }
 
       if (this.hasAttachments) return false;
+
       return (
-        isMessageEmpty ||
+        this.isMessageEmpty ||
         this.message.length === 0 ||
         this.message.length > this.maxLength
       );
@@ -198,7 +205,7 @@ export default {
       }
       if (this.isATwitterInbox) {
         if (this.conversationType === 'tweet') {
-          return MESSAGE_MAX_LENGTH.TWEET;
+          return MESSAGE_MAX_LENGTH.TWEET - this.replyToUserLength - 2;
         }
       }
       return MESSAGE_MAX_LENGTH.GENERAL;
@@ -235,9 +242,22 @@ export default {
     isOnPrivateNote() {
       return this.replyType === REPLY_EDITOR_MODES.NOTE;
     },
+    inReplyTo() {
+      const selectedTweet = this.selectedTweet || {};
+      return selectedTweet.id;
+    },
+    replyToUserLength() {
+      const selectedTweet = this.selectedTweet || {};
+      const {
+        sender: {
+          additional_attributes: { screen_name: screenName = '' } = {},
+        } = {},
+      } = selectedTweet;
+      return screenName ? screenName.length : 0;
+    },
     isMessageEmpty() {
-      if(!this.message) {
-        this.message = '';
+      if (!this.message) {
+        return true;
       }
       return !this.message.trim().replace(/\n/g, '').length;
     },

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

@@ -14,13 +14,13 @@
       @mouseleave="isHovered = false"
     />
     <i
-      v-if="isATweet && isIncoming"
+      v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
       v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
       class="icon ion-reply cursor-pointer"
       @click="onTweetReply"
     />
     <a
-      v-if="isATweet && isIncoming"
+      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
       target="_blank"
       rel="noopener noreferrer nofollow"
@@ -71,19 +71,33 @@ export default {
       type: [String, Number],
       default: '',
     },
+    inboxId: {
+      type: [String, Number],
+      default: 0,
+    },
   },
   computed: {
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.inboxId);
+    },
     isIncoming() {
       return MESSAGE_TYPE.INCOMING === this.messageType;
     },
+    isOutgoing() {
+      return MESSAGE_TYPE.OUTGOING === this.messageType;
+    },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
         this.sender || {};
       return additionalAttributes?.screen_name || '';
     },
     linkToTweet() {
+      if (!this.sourceId || !this.inbox.name) {
+        return '';
+      }
       const { screenName, sourceId } = this;
-      return `https://twitter.com/${screenName}/status/${sourceId}`;
+      return `https://twitter.com/${screenName ||
+        this.inbox.name}/status/${sourceId}`;
     },
   },
   methods: {
@@ -113,6 +127,13 @@ export default {
   }
 }
 
+.right {
+  .ion-reply,
+  .ion-android-open {
+    color: var(--white);
+  }
+}
+
 .message-text--metadata {
   align-items: flex-end;
   display: flex;