DEV: Add started by and avatar align and more specs

plugins/chat/app/models/chat_message.rb

@@ -82,7 +82,7 @@ class ChatMessage < ActiveRecord::Base
     UploadReference.insert_all!(ref_record_attrs)
   end
 
-  def excerpt
+  def excerpt(max_length: 50)
     # just show the URL if the whole message is a URL, because we cannot excerpt oneboxes
     return message if UrlHelper.relaxed_parse(message).is_a?(URI)
 
@@ -90,7 +90,7 @@ class ChatMessage < ActiveRecord::Base
     return uploads.first.original_filename if cooked.blank? && uploads.present?
 
     # this may return blank for some complex things like quotes, that is acceptable
-    PrettyText.excerpt(cooked, 50, { text_entities: true })
+    PrettyText.excerpt(cooked, max_length, { text_entities: true })
   end
 
   def cooked_for_excerpt

plugins/chat/app/models/chat_thread.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class ChatThread < ActiveRecord::Base
+  EXCERPT_LENGTH = 150
+
   belongs_to :channel, foreign_key: "channel_id", class_name: "ChatChannel"
   belongs_to :original_message_user, foreign_key: "original_message_user_id", class_name: "User"
   belongs_to :original_message, foreign_key: "original_message_id", class_name: "ChatMessage"
@@ -19,6 +21,10 @@ class ChatThread < ActiveRecord::Base
   def relative_url
     "#{channel.relative_url}/t/#{self.id}"
   end
+
+  def excerpt
+    original_message.excerpt(max_length: EXCERPT_LENGTH)
+  end
 end
 
 # == Schema Information

plugins/chat/app/serializers/chat_thread_original_message_serializer.rb

@@ -6,6 +6,6 @@ class ChatThreadOriginalMessageSerializer < ApplicationSerializer
   has_one :chat_webhook_event, serializer: ChatWebhookEventSerializer, embed: :objects
 
   def excerpt
-    WordWatcher.censor(object.excerpt)
+    WordWatcher.censor(object.excerpt(max_length: ChatThread::EXCERPT_LENGTH))
   end
 end

plugins/chat/assets/javascripts/discourse/components/chat-thread.hbs

@@ -18,6 +18,9 @@
       </p>
 
       <div class="chat-thread__op">
+        <span class="chat-thread__op-started-by">{{i18n
+            "chat.threads.started_by"
+          }}</span>
         <ChatMessageAvatar
           class="chat-thread__op-avatar"
           @message={{this.thread.original_message}}

plugins/chat/assets/stylesheets/common/chat-thread-panel.scss

@@ -1,8 +0,0 @@
-.chat-thread-pane {
-  background-color: #aee6bd;
-  display: none;
-
-  &--active-thread {
-    display: block;
-  }
-}

plugins/chat/assets/stylesheets/common/chat-thread.scss

@@ -25,6 +25,20 @@
     margin-top: 0;
   }
 
+  &__op {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &-started-by {
+      margin-right: 0.5rem;
+    }
+
+    .chat-message-avatar {
+      width: var(--message-left-width);
+    }
+  }
+
   &__title {
     display: flex;
     align-items: center;

plugins/chat/config/locales/client.en.yml

@@ -444,6 +444,7 @@ en:
 
       threads:
         op_said: "OP said:"
+        started_by: "Started by"
         open: "Open Thread"
 
       draft_channel_screen:

plugins/chat/plugin.rb

@@ -26,7 +26,6 @@ register_asset "stylesheets/common/chat-channel-preview-card.scss"
 register_asset "stylesheets/common/chat-channel-info.scss"
 register_asset "stylesheets/common/chat-draft-channel.scss"
 register_asset "stylesheets/common/chat-tabs.scss"
-register_asset "stylesheets/common/chat-thread-panel.scss"
 register_asset "stylesheets/common/chat-form.scss"
 register_asset "stylesheets/common/d-progress-bar.scss"
 register_asset "stylesheets/common/incoming-chat-webhooks.scss"

plugins/chat/spec/system/page_objects/chat/chat_thread.rb

@@ -3,8 +3,16 @@
 module PageObjects
   module Pages
     class ChatThread < PageObjects::Pages::Base
+      def header
+        find(".chat-thread__header")
+      end
+
+      def op
+        header.find(".chat-thread__op")
+      end
+
       def has_header_content?(content)
-        find(".chat-thread__header").has_content?(content)
+        header.has_content?(content)
       end
     end
   end

plugins/chat/spec/system/single_thread_spec.rb

@@ -58,7 +58,14 @@ describe "Single thread in side panel", type: :system, js: true do
     it "shows the excerpt of the thread original message" do
       chat_page.visit_channel(channel)
       channel_page.open_message_thread(thread.original_message)
-      expect(open_thread).to have_header_content(thread.original_message.excerpt)
+      expect(open_thread).to have_header_content(thread.excerpt)
+    end
+
+    it "shows the avatar and username of the original message user" do
+      chat_page.visit_channel(channel)
+      channel_page.open_message_thread(thread.original_message)
+      expect(open_thread.op).to have_css(".chat-user-avatar img.avatar")
+      expect(open_thread.op).to have_content(thread.original_message_user.username)
     end
   end
 end