feat: add more features

app/controllers/api/v1/accounts/notifications_controller.rb

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseController
   RESULTS_PER_PAGE = 15
 
-  before_action :fetch_notification, only: [:update, :destroy]
+  before_action :fetch_notification, only: [:update]
   before_action :set_primary_actor, only: [:read_all]
   before_action :set_current_page, only: [:index]
 
@@ -28,11 +28,6 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
     render json: @notification
   end
 
-  def destroy
-    @notification.destroy
-    head :ok
-  end
-
   def unread_count
     @unread_count = current_user.notifications.where(account_id: current_account.id, read_at: nil).count
     render json: @unread_count

app/helpers/portal_helper.rb

@@ -61,9 +61,4 @@ module PortalHelper
   def render_category_content(content)
     ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
   end
-
-  def thumbnail_bg_color(username)
-    colors = ['#6D95BA', '#A4C3C3', '#E19191']
-    colors[username.length % colors.size]
-  end
 end

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -144,6 +144,7 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
   ALLOWED_FILE_TYPES,
   ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
+  ALLOWED_FILE_TYPES_FOR_LINE,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -270,6 +271,9 @@ export default {
       return this.showFileUpload || this.isNote;
     },
     showAudioRecorderButton() {
+      if (this.isALineChannel) {
+        return false;
+      }
       // Disable audio recorder for safari browser as recording is not supported
       const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
         navigator.userAgent
@@ -291,6 +295,9 @@ export default {
       if (this.isATwilioWhatsAppChannel) {
         return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
       }
+      if (this.isALineChannel) {
+        return ALLOWED_FILE_TYPES_FOR_LINE;
+      }
       return ALLOWED_FILE_TYPES;
     },
     enableDragAndDrop() {

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

@@ -28,7 +28,6 @@
           :message="inReplyTo"
           :message-type="data.message_type"
           :parent-has-attachments="hasAttachments"
-          @click="navigateToMessage"
         />
         <bubble-text
           v-if="data.content"
@@ -520,13 +519,6 @@ export default {
         this.showBackgroundHighlight = false;
       }, HIGHLIGHT_TIMER);
     },
-    async navigateToMessage() {
-      this.$nextTick(() => {
-        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
-          messageId: this.inReplyToMessageId,
-        });
-      });
-    },
   },
 };
 </script>

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

@@ -377,19 +377,12 @@ export default {
     removeBusListeners() {
       bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
     },
-    async onScrollToMessage({ messageId }) {
-      // TODO: check if the message is already loaded
-      await this.$store.dispatch('setActiveChat', {
-        data: this.currentChat,
-        after: messageId,
-        force: true,
-      });
-
+    onScrollToMessage({ messageId = '' } = {}) {
       this.$nextTick(() => {
         const messageElement = document.getElementById('message' + messageId);
         if (messageElement) {
           this.isProgrammaticScroll = true;
-          messageElement.scrollIntoView();
+          messageElement.scrollIntoView({ behavior: 'smooth' });
           this.fetchPreviousMessages();
         } else {
           this.scrollToBottom();

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

@@ -29,7 +29,6 @@
         v-if="shouldShowReplyToMessage"
         :message="inReplyTo"
         @dismiss="resetReplyToMessage"
-        @navigate-to-message="navigateToMessage"
       />
       <canned-response
         v-if="showMentions && hasSlashCommand"
@@ -393,7 +392,8 @@ export default {
         this.isAPIInbox ||
         this.isAnEmailChannel ||
         this.isASmsInbox ||
-        this.isATelegramChannel
+        this.isATelegramChannel ||
+        this.isALineChannel
       );
     },
     replyButtonLabel() {
@@ -1159,12 +1159,6 @@ export default {
       LocalStorage.deleteFromJsonStore(replyStorageKey, this.conversationId);
       bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE);
     },
-    navigateToMessage(messageId) {
-      bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
-        messageId,
-        behavior: 'instant',
-      });
-    },
     onNewConversationModalActive(isActive) {
       // Issue is if the new conversation modal is open and we drag and drop the file
       // then the file is not getting attached to the new conversation modal

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

@@ -1,7 +1,6 @@
 <template>
   <div
-    class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2 cursor-pointer"
-    @click="$emit('navigate-to-message', message.id)"
+    class="reply-editor bg-slate-50 dark:bg-slate-800 rounded-md py-1 pl-2 pr-1 text-xs tracking-wide mt-2 flex items-center gap-1.5 -mx-2"
   >
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
     <div class="flex-grow gap-1 mt-px text-xs truncate">

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

@@ -1,13 +1,12 @@
 <template>
   <div
-    class="px-2 py-1.5 -mx-2 rounded-sm min-w-[15rem] mb-2 cursor-pointer"
+    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
     :class="{
       'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
         messageType === MESSAGE_TYPE.INCOMING,
       'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
       '-mx-2': !parentHasAttachments,
     }"
-    @click="$emit('click')"
   >
     <message-preview
       :message="message"

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

@@ -7,11 +7,7 @@
     }"
   >
     <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
-    <letter
-      v-else
-      class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
-      :html="message"
-    />
+    <letter v-else class="text-content" :html="message" />
     <button
       v-if="showQuoteToggle"
       class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -25,7 +25,7 @@
         id="file"
         ref="file"
         type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        accept="image/png, image/jpeg, image/gif"
         @change="handleImageUpload"
       />
       <slot />

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

@@ -163,7 +163,14 @@ export default {
           return;
         }
         const { messageId } = this.$route.query;
-        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+        this.$store
+          .dispatch('setActiveChat', {
+            data: selectedConversation,
+            after: messageId,
+          })
+          .then(() => {
+            bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+          });
       } else {
         this.$store.dispatch('clearSelectedState');
       }

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

@@ -157,23 +157,16 @@ export default {
       return this.metaTags.map(item => item.name);
     },
   },
-  watch: {
-    article: {
-      handler() {
-        if (!isEmptyObject(this.article.meta || {})) {
-          const {
-            meta: { title = '', description = '', tags = [] },
-          } = this.article;
-          this.metaTitle = title;
-          this.metaDescription = description;
-          this.metaTags = this.formattedTags({ tags });
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
   mounted() {
+    if (!isEmptyObject(this.article.meta || {})) {
+      const {
+        meta: { title = '', description = '', tags = [] },
+      } = this.article;
+      this.metaTitle = title;
+      this.metaDescription = description;
+      this.metaTags = this.formattedTags({ tags });
+    }
+
     this.saveArticle = debounce(
       () => {
         this.$emit('save-article', {

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -160,10 +160,10 @@ const actions = {
     });
   },
 
-  async setActiveChat({ commit, dispatch }, { data, after, force = false }) {
+  async setActiveChat({ commit, dispatch }, { data, after }) {
     commit(types.SET_CURRENT_CHAT_WINDOW, data);
     commit(types.CLEAR_ALL_MESSAGES_LOADED);
-    if (data.dataFetched === undefined || force) {
+    if (data.dataFetched === undefined) {
       try {
         await dispatch('fetchPreviousMessages', {
           after,

app/javascript/shared/constants/messages.js

@@ -55,6 +55,8 @@ export const ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP =
   'audio/mpeg, audio/opus, audio/ogg, audio/amr,' +
   'video/mp4,' +
   'application/pdf,';
+// https://developers.line.biz/en/reference/messaging-api/#image-message, https://developers.line.biz/en/reference/messaging-api/#video-message
+export const ALLOWED_FILE_TYPES_FOR_LINE = 'image/png, image/jpeg,video/mp4';
 
 export const CSAT_RATINGS = [
   {

app/services/line/send_on_line_service.rb

@@ -6,7 +6,8 @@ class Line::SendOnLineService < Base::SendOnChannelService
   end
 
   def perform_reply
-    response = channel.client.push_message(message.conversation.contact_inbox.source_id, [{ type: 'text', text: message.content }])
+    response = channel.client.push_message(message.conversation.contact_inbox.source_id, build_payload)
+
     return if response.blank?
 
     parsed_json = JSON.parse(response.body)
@@ -20,6 +21,36 @@ class Line::SendOnLineService < Base::SendOnChannelService
     end
   end
 
+  def build_payload
+    if message.content && message.attachments.any?
+      [text_message, *attachments]
+    elsif message.content.nil? && message.attachments.any?
+      attachments
+    else
+      text_message
+    end
+  end
+
+  def attachments
+    message.attachments.map do |attachment|
+      # Support only image and video for now
+      next unless attachment.file_type == 'image' || attachment.file_type == 'video'
+
+      {
+        type: attachment.file_type,
+        originalContentUrl: attachment.download_url,
+        previewImageUrl: attachment.download_url
+      }
+    end
+  end
+
+  def text_message
+    {
+      type: 'text',
+      text: message.content
+    }
+  end
+
   # https://developers.line.biz/en/reference/messaging-api/#error-responses
   def external_error(error)
     # Message containing information about the error. See https://developers.line.biz/en/reference/messaging-api/#error-messages

app/services/twilio/incoming_message_service.rb

@@ -108,9 +108,7 @@ class Twilio::IncomingMessageService
     return if params[:MediaUrl0].blank?
 
     attachment_file = Down.download(
-      params[:MediaUrl0],
-      # https://support.twilio.com/hc/en-us/articles/223183748-Protect-Media-Access-with-HTTP-Basic-Authentication-for-Programmable-Messaging
-      http_basic_authentication: [twilio_channel.account_sid, twilio_channel.auth_token || twilio_channel.api_key_sid]
+      params[:MediaUrl0]
     )
 
     attachment = @message.attachments.new(

app/views/icons/_user.html.erb

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="" d="M6 1a2 2 0 1 0 0 4a2 2 0 0 0 0-4Zm2.5 5h-5A1.5 1.5 0 0 0 2 7.5c0 1.116.459 2.01 1.212 2.615C3.953 10.71 4.947 11 6 11c1.053 0 2.047-.29 2.788-.885C9.54 9.51 10 8.616 10 7.5A1.5 1.5 0 0 0 8.5 6Z"/></svg>

app/views/public/api/v1/portals/_authors.html.erb

@@ -1,24 +0,0 @@
-<% author_count = category.articles.published.order(position: :asc).map(&:author).uniq.size %>
-<% if author_count > 0 %>
-  <div class="flex flex-row items-center gap-1">
-    <div class="flex flex-row items-center -space-x-2">
-        <% category.articles.published.order(position: :asc).map(&:author).uniq.take(3).each do |author| %>
-          <%= render "public/api/v1/portals/thumbnail", author: author, size: 5 %>
-        <% end %>
-    </div>
-
-    <% first_author = category.articles.published.order(position: :asc).map(&:author).uniq.first.name %>
-    <% author_text = author_count > 1 ? "#{author_count} #{I18n.t('public_portal.common.authors')}" : "#{author_count} #{I18n.t('public_portal.common.author')}" %>
-    <% other_authors_count = author_count - 1 %>
-    <% other_authors_text = other_authors_count > 1 ? I18n.t('public_portal.common.others') : I18n.t('public_portal.common.other') %>
-
-    <span class="<%= show_expanded ? 'text-base' : 'text-sm' %> font-medium text-slate-600 dark:text-slate-400">
-    <% if show_expanded %>
-        <%= "#{I18n.t('public_portal.common.by')} #{first_author}" %>
-        <%= other_authors_count.positive? ? " and #{other_authors_count} #{other_authors_text}" : '' %>
-    <% else %>
-        <%= author_text %>
-    <% end %>
-    </span>
-  </div>
-<% end %>

app/views/public/api/v1/portals/_category-block.html.erb

@@ -34,7 +34,7 @@
          <% else %>
          <% category.articles.published.order(position: :asc).take(5).each do |article| %>
          <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
-            <div id="<%= !@is_plain_layout_enabled ? 'category-item' : '' %>" class="flex justify-between hover:cursor-pointer items-start py-1 rounded-lg gap-6 <%= !@is_plain_layout_enabled ? 'px-2' : 'hover:underline' %>">
+            <div id="<%= !@is_plain_layout_enabled ? 'category-item' : '' %>" class="flex justify-between hover:cursor-pointer items-start py-1 rounded-lg gap-3  <%= !@is_plain_layout_enabled ? 'px-2' : 'hover:underline' %>">
                <%= article.title %>
                <span class="flex items-center font-normal mt-1.5">
                   <%= render partial: 'icons/chevron-right' %>
@@ -45,9 +45,7 @@
          <% end %>
       </div>
       <div class="flex justify-between flex-row items-center <%= !@is_plain_layout_enabled && 'px-2' %>">
-         <div class="flex flex-row items-center gap-1">
-           <%= render "public/api/v1/portals/authors", category: category, show_expanded: false %>
-           <span class="text-slate-600 dark:text-slate-400">•</span>
+         <div>
            <span class="text-sm font-medium text-slate-600 dark:text-slate-400"><%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.order(position: :asc).size %></span>
          </div>
          <div>

app/views/public/api/v1/portals/_featured_articles.html.erb

@@ -14,7 +14,7 @@
       <div class="grid grid-cols-1 gap-2 md:grid-cols-2 gap-x-2 gap-y-2">
          <% featured_articles.each do |article| %>
          <a class="leading-7 text-slate-700 dark:text-slate-100" href="<%= generate_article_link(portal.slug, article.slug, @theme_from_params, @is_plain_layout_enabled) %>">
-            <div  id="category-item" class="flex items-start justify-between gap-6 px-2 py-1 rounded-lg">
+            <div  id="category-item" class="flex items-start justify-between gap-3 px-2 py-1 rounded-lg">
                <%= article.title %>
                <span class="flex items-center font-normal mt-1.5">
                   <%= render partial: 'icons/chevron-right' %>

app/views/public/api/v1/portals/_thumbnail.html.erb

@@ -1,7 +0,0 @@
-<% if author&.avatar_url&.present? %>
-  <img src="<%= url_for(author.avatar_url) %>" alt="<%= author.name %>" class="w-<%= size %> h-<%= size %> rounded-full border border-solid border-white dark:border-slate-900">
-<% else %>
-  <div class="w-<%= size %> h-<%= size %> rounded-full [&>svg]:opacity-70 border border-solid fill-white dark:fill-slate-900 border-white dark:border-slate-900 flex justify-center items-center" style="background-color: <%= thumbnail_bg_color(author&.available_name) %>;">
-    <%= render partial: 'icons/user' %>
-  </div>
-<% end %>

app/views/public/api/v1/portals/articles/_article_header.html.erb

@@ -30,9 +30,11 @@
 </h1>
 <div class="flex flex-col items-start justify-between w-full pt-6 md:flex-row md:items-center">
   <div class="flex items-start space-x-1">
-    <div class="pr-px mt-0.5 min-w-[20px] min-h-[20px]">
-      <%= render "public/api/v1/portals/thumbnail", author: article.author, size: 5 %>
-    </div>
+    <% if article.author&.avatar_url&.present? %>
+      <div class="pr-px mt-0.5 min-w-[20px] min-h-[20px]">
+        <img src="<%= article.author.avatar_url %>" alt="<%= article.author.display_name %>" class="w-5 h-5 border rounded-full">
+      </div>
+    <% end %>
     <span class="flex items-center text-base font-medium text-slate-600 dark:text-slate-400">By <%= article.author.available_name %> • <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
   </div>
 </div>

app/views/public/api/v1/portals/categories/_category-hero.html.erb

@@ -21,10 +21,6 @@
       <span class="font-medium text-slate-700 dark:text-slate-200 text-base leading-5"><%= category.description %></span>
       <% end %>
     </div>
-    <div class="flex flex-row items-center gap-1">
-      <%= render "public/api/v1/portals/authors", category: category, show_expanded: true %>
-      <span class="text-slate-600 dark:text-slate-400">•</span>
-      <span class="flex items-center text-base text-slate-600 dark:text-slate-400 font-medium"><%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.size %></span>
-    </div>
+    <span class="flex items-center text-base text-slate-600 dark:text-slate-400 font-medium"><%= render 'public/api/v1/portals/article_count', article_count: category.articles.published.size %></span>
   </div>
 </div>

app/views/public/api/v1/portals/categories/show.html.erb

@@ -29,18 +29,10 @@
       >
         <div class="flex flex-col gap-5">
           <div class="flex flex-col gap-1">
-            <h3 id="<%= !@is_plain_layout_enabled ? 'category-name' : '' %>" class="text-lg text-slate-900 tracking-[0.28px] dark:text-slate-50 font-semibold <%= @is_plain_layout_enabled ? 'group-hover:underline' : '' %>"><%= article.title %></h3>
-            <p class="text-base font-normal text-slate-600 dark:text-slate-200 line-clamp-1 break-all"><%= render_category_content(article.content) %></p>
-          </div>
-          <div class="flex flex-row items-center gap-1">
-            <div class="flex flex-row items-center gap-1">
-              <% author = article.author %>
-              <%= render "public/api/v1/portals/thumbnail", author: author, size: 5 %>
-              <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= "#{I18n.t('public_portal.common.by')} #{author.name}" %></span>
-            </div>
-            <span class="text-slate-600 dark:text-slate-400">•</span>
-            <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
+            <h3 id="<%= !@is_plain_layout_enabled ? 'category-name' : '' %>" class="text-lg text-slate-900 dark:text-slate-50 font-semibold <%= @is_plain_layout_enabled ? 'group-hover:underline' : '' %>"><%= article.title %></h3>
+            <p class="text-base font-normal text-slate-500 dark:text-slate-200 line-clamp-1 break-all"><%= render_category_content(article.content) %></p>
           </div>
+          <span class="text-sm text-slate-600 dark:text-slate-400 font-medium flex items-center"><%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %></span>
         </div>
       </a>
     </div>  

config/locales/en.yml

@@ -215,11 +215,6 @@ en:
       view_all_articles: View all
       article: article
       articles: articles
-      author: author
-      authors: authors
-      other: other
-      others: others
-      by: By
       no_articles: There are no articles here
     footer:
       made_with: Made with

config/routes.rb

@@ -166,7 +166,7 @@ Rails.application.routes.draw do
             end
           end
 
-          resources :notifications, only: [:index, :update, :destroy] do
+          resources :notifications, only: [:index, :update] do
             collection do
               post :read_all
               get :unread_count

spec/controllers/api/v1/accounts/notifications_controller_spec.rb

@@ -127,30 +127,4 @@ RSpec.describe 'Notifications API', type: :request do
       end
     end
   end
-
-  describe 'DELETE /api/v1/accounts/{account.id}/notifications/:id' do
-    let(:admin) { create(:user, account: account, role: :administrator) }
-    let!(:notification) { create(:notification, account: account, user: admin) }
-
-    context 'when it is an unauthenticated user' do
-      it 'returns unauthorized' do
-        delete "/api/v1/accounts/#{account.id}/notifications/#{notification.id}"
-
-        expect(response).to have_http_status(:unauthorized)
-      end
-    end
-
-    context 'when it is an authenticated user' do
-      let(:admin) { create(:user, account: account, role: :administrator) }
-
-      it 'deletes the notification' do
-        delete "/api/v1/accounts/#{account.id}/notifications/#{notification.id}",
-               headers: admin.create_new_auth_token,
-               as: :json
-
-        expect(response).to have_http_status(:success)
-        expect(Notification.count).to eq(0)
-      end
-    end
-  end
 end

spec/helpers/portal_helper_spec.rb

@@ -246,16 +246,4 @@ describe PortalHelper do
       expect(helper.render_category_content(markdown_content)).to eq(plain_text_content)
     end
   end
-
-  describe '#thumbnail_bg_color' do
-    it 'returns the correct color based on username length' do
-      expect(helper.thumbnail_bg_color('')).to eq('#6D95BA') # Length 0, so index is 0
-      expect(helper.thumbnail_bg_color('Joe')).to eq('#6D95BA') # Length 3, so index is 0
-      expect(helper.thumbnail_bg_color('John')).to eq('#A4C3C3') # Length 4, so index is 1
-      expect(helper.thumbnail_bg_color('Jane james')).to eq('#A4C3C3') # Length 10, so index is 1
-      expect(helper.thumbnail_bg_color('Jane_123')).to eq('#E19191') # Length 8, so index is 2
-      expect(helper.thumbnail_bg_color('AlexanderTheGreat')).to eq('#E19191') # Length 17, so index is 2
-      expect(helper.thumbnail_bg_color('Reginald John Sans')).to eq('#6D95BA') # Length 18, so index is 0
-    end
-  end
 end