FEATURE: Add onebox support for chat threads (#23580)

With this commit we now support onboxes of:
- channel
- channel message
- thread
- thread message

plugins/chat/lib/chat/engine.rb

@@ -28,4 +28,12 @@ module ::Chat
         File.read(path)
       end
   end
+
+  def self.thread_onebox_template
+    @thread_onebox_template ||=
+      begin
+        path = "#{Rails.root}/plugins/chat/lib/onebox/templates/discourse_chat_thread.mustache"
+        File.read(path)
+      end
+  end
 end

plugins/chat/lib/chat/onebox_handler.rb

@@ -10,9 +10,13 @@ module Chat
         chat_channel = message.chat_channel
         user = message.user
         return if !chat_channel || !user
+
+        thread = Chat::Thread.find_by(id: message.thread_id) if message.thread_id
       else
         chat_channel = Chat::Channel.find_by(id: route[:channel_id])
         return if !chat_channel
+
+        thread = Chat::Thread.find_by(id: route[:thread_id]) if route[:thread_id]
       end
 
       return if !Guardian.new.can_preview_chat_channel?(chat_channel)
@@ -20,9 +24,13 @@ module Chat
       args = build_args(url, chat_channel)
 
       if message.present?
-        render_message_onebox(args, message)
+        render_message_onebox(args, message, thread)
       else
-        render_channel_onebox(args, chat_channel)
+        if thread.present?
+          render_thread_onebox(args, thread)
+        else
+          render_channel_onebox(args, chat_channel)
+        end
       end
     end
 
@@ -30,7 +38,6 @@ module Chat
 
     def self.build_args(url, chat_channel)
       args = {
-        url: url,
         channel_id: chat_channel.id,
         channel_name: chat_channel.name,
         is_category: chat_channel.category_channel?,
@@ -38,7 +45,19 @@ module Chat
       }
     end
 
-    def self.render_message_onebox(args, message)
+    def self.render_thread_onebox(args, thread)
+      args.merge!(
+        cooked: build_thread_snippet(thread),
+        thread_id: thread.id,
+        thread_title: thread.title,
+        thread_title_connector: I18n.t("chat.onebox.thread_title_connector"),
+        images: get_image_uploads(thread),
+      )
+
+      Mustache.render(Chat.thread_onebox_template, args)
+    end
+
+    def self.render_message_onebox(args, message, thread)
       args.merge!(
         message_id: message.id,
         username: message.user.username,
@@ -46,6 +65,9 @@ module Chat
         cooked: message.cooked,
         created_at: message.created_at,
         created_at_str: message.created_at.iso8601,
+        thread_id: message.thread_id,
+        thread_title: thread&.title,
+        images: get_image_uploads(message),
       )
 
       Mustache.render(Chat.message_onebox_template, args)
@@ -66,6 +88,17 @@ module Chat
       Mustache.render(Chat.channel_onebox_template, args)
     end
 
+    def self.get_image_uploads(target)
+      if target.is_a?(Message)
+        message = target
+      elsif target.is_a?(Thread)
+        message = Chat::Message.includes(:uploads).find_by(id: target.original_message_id)
+      end
+
+      return if !message
+      message.uploads.select { |u| u.height.present? || u.width.present? }
+    end
+
     def self.build_users_list(chat_channel)
       Chat::ChannelMembershipsQuery
         .call(channel: chat_channel, limit: 10)
@@ -82,5 +115,11 @@ module Chat
         I18n.t("chat.onebox.and_x_others", count: chat_channel.user_count - users.size)
       end
     end
+
+    def self.build_thread_snippet(thread)
+      message = Chat::Message.find_by(id: thread.original_message_id)
+      return nil if !message
+      message.cooked
+    end
   end
 end

plugins/chat/lib/onebox/templates/discourse_chat_channel.mustache

@@ -1,13 +1,13 @@
 <aside class="onebox chat-onebox">
   <article class="onebox-body chat-onebox-body">
     <h3 class="chat-onebox-title">
-      <a href="{{url}}">
+      <a href="/chat/c/-/{{channel_id}}">
         {{#is_category}}
           <span class="category-chat-badge" style="color: #{{color}}">
             <svg class="fa d-icon d-icon-d-chat svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#d-chat"></use></svg>
           </span>
         {{/is_category}}
-        <span class="clear-badge">{{{channel_name}}}</span>
+        <span class="clear-badge">{{channel_name}}</span>
       </a>
     </h3>
     {{#description}}

plugins/chat/lib/onebox/templates/discourse_chat_message.mustache

@@ -5,9 +5,9 @@
         <img loading="lazy" alt="{{username}}" width="20" height="20" src="{{avatar_url}}" class="avatar">
       </a>
     </div>
-  <div class="chat-transcript-username">{{username}}</div>
+    <div class="chat-transcript-username">{{username}}</div>
     <div class="chat-transcript-datetime">
-      <a href="{{url}}" title="{{created_at}}">{{created_at}}</a>
+      <a href="/chat/c/-/{{channel_id}}" title="{{created_at}}">{{created_at}}</a>
     </div>
     <a class="chat-transcript-channel" href="/chat/c/-/{{channel_id}}">
       {{#is_category}}
@@ -22,6 +22,22 @@
       {{/is_topic}}
       {{channel_name}}
     </a>
+    {{#thread_id}}
+      <span class="chat-transcript-separator">&#124</span>
+      <a class="chat-transcript-thread" href="/chat/c/-/{{channel_id}}/t/{{thread_id}}">
+        <span class="topic-thread-icon">
+          <svg class="fa d-icon d-icon-discourse-threads svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-threads"></use></svg>
+        </span>
+        {{thread_title}}
+      </a>
+    {{/thread_id}}
+  </div>
+  <div class="chat-transcript-messages">
+    {{{cooked}}}
+  </div>
+  <div class="chat-transcript-images onebox">
+    {{#images}}
+      <img src="{{url}}" loading="lazy" alt="{{original_filename}}" width="{{width}}" height="{{height}}">
+    {{/images}}
   </div>
-  <div class="chat-transcript-messages">{{{cooked}}}</div>
 </div>

plugins/chat/lib/onebox/templates/discourse_chat_thread.mustache

@@ -0,0 +1,31 @@
+<aside class="onebox chat-onebox">
+  <article class="onebox-body chat-onebox-body">
+    <div class="chat-transcript-user">
+      <h3 class="chat-onebox-title">
+        <a href="/chat/c/-/{{channel_id}}/t/{{thread_id}}">
+          <span class="category-chat-badge" style="color: #{{color}}">
+            <svg class="fa d-icon d-icon-discourse-threads svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-threads"></use></svg>
+          </span>
+          <span class="clear-badge">{{thread_title}}</span>
+        </a>
+      </h3>
+      <span class="thread-title-connector">{{thread_title_connector}}</span>
+      <a href="/chat/c/-/{{channel_id}}">
+        <span class="category-chat-badge" style="color: #{{color}}">
+          <svg class="fa d-icon d-icon-d-chat svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#d-chat"></use></svg>
+        </span>
+        <span class="clear-badge">{{channel_name}}</span>
+      </a>
+    </div>
+    {{#cooked}}
+      <div class="chat-onebox-cooked">
+      {{{cooked}}}
+      </div>
+    {{/cooked}}
+    <div class="chat-onebox-images onebox">
+      {{#images}}
+        <img src="{{url}}" loading="lazy" alt="{{original_filename}}" width="{{width}}" height="{{height}}">
+      {{/images}}
+    </div>
+  </article>
+</aside>