0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-09 18:01:48 +08:00
discourse/plugins/chat/lib/onebox/templates/discourse_chat_message.mustache
Régis Hanol ce2767cf38
FIX: Chat channel onebox icons render and support channel emoji (#39826)
Chat channel oneboxes have been rendering with no icon next to the
channel title since #20744. That PR changed the mustache templates to
emit `<svg><use href="#d-chat"></use></svg>` and registered a JS-side
`replaceIcon("d-chat", "comment")` to compensate. The replacement only
runs through `iconHTML()` / `{{icon}}` at render time though — the
mustache markup is cooked into the post HTML server-side, so the JS swap
never touches it. `d-chat` has never been part of the SVG sprite, which
means the browser cannot resolve `#d-chat` and the badge renders empty.

This commit pre-renders the channel badge in `Chat::OneboxHandler` and
passes it to the templates as a single HTML blob:

* When the channel has an emoji, it is rendered via
`Emoji.codes_to_img`.
* Otherwise we fall back to the chat bubble (`#comment`, which is in the
sprite) tinted with the channel's category color.

The fix covers all three onebox templates (channel, message, thread). A
post-deploy migration flips `baked_version` to 0 on every post whose
cooked HTML contains `chat-onebox`, so the recurring `Post.rebake_old`
job picks them up and rebakes them in the background with the fixed
templates.

Ref - t/183234
2026-05-11 15:17:36 +02:00

39 lines
1.7 KiB
Text
Vendored

<div class="chat-transcript" data-message-id="{{message_id}}" data-username="{{username}}" data-datetime="{{created_at_str}}" data-channel-name="{{channel_name}}" data-channel-id="{{channel_id}}">
<div class="chat-transcript-user">
<div class="chat-transcript-user-avatar">
<a class="trigger-user-card" data-user-card="{{username}}" aria-hidden="true" tabindex="-1">
<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-datetime">
{{#thread_id}}
<a href="/chat/c/-/{{channel_id}}/t/{{thread_id}}/{{message_id}}" title="{{created_at}}">{{created_at}}</a>
{{/thread_id}}
{{^thread_id}}
<a href="/chat/c/-/{{channel_id}}/{{message_id}}" title="{{created_at}}">{{created_at}}</a>
{{/thread_id}}
</div>
<a class="chat-transcript-channel" href="/chat/c/-/{{channel_id}}">
{{{channel_badge}}}
{{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>