diff --git a/web/src/rendered_markdown.ts b/web/src/rendered_markdown.ts
index d1830b7818..1a20b64dc4 100644
--- a/web/src/rendered_markdown.ts
+++ b/web/src/rendered_markdown.ts
@@ -82,9 +82,9 @@ function get_message_for_message_content($content: JQuery): Message | undefined
// This enables mentions to display inline, while adjusting
// the outer element's font-size for better appearance on
// lines of message text.
-function wrap_mention_content_in_dom_element(element: HTMLElement): HTMLElement {
+function wrap_mention_content_in_dom_element(element: HTMLElement, is_bot = false): HTMLElement {
const mention_text = $(element).text();
- $(element).html(render_mention_content_wrapper({mention_text}));
+ $(element).html(render_mention_content_wrapper({mention_text, is_bot}));
return element;
}
@@ -94,6 +94,7 @@ export function set_name_in_mention_element(
name: string,
user_id?: number,
): void {
+ const user_is_bot = user_id !== undefined && people.is_valid_bot_user(user_id);
if (user_id !== undefined && people.should_add_guest_user_indicator(user_id)) {
let display_text;
if (!$(element).hasClass("silent")) {
@@ -112,7 +113,7 @@ export function set_name_in_mention_element(
$(element).text("@" + name);
}
- wrap_mention_content_in_dom_element(element);
+ wrap_mention_content_in_dom_element(element, user_is_bot);
}
export const update_elements = ($content: JQuery): void => {
@@ -134,6 +135,8 @@ export const update_elements = ($content: JQuery): void => {
$content.find(".user-mention").each(function (): void {
const user_id = get_user_id_for_mention_button(this);
const message = get_message_for_message_content($content);
+ const user_is_bot =
+ user_id !== undefined && user_id !== "*" && people.is_valid_bot_user(user_id);
// We give special highlights to the mention buttons
// that refer to the current user.
if (user_id === "*" && message && message.stream_wildcard_mentioned) {
@@ -174,7 +177,7 @@ export const update_elements = ($content: JQuery): void => {
set_name_in_mention_element(this, person.full_name, user_id);
}
- wrap_mention_content_in_dom_element(this);
+ wrap_mention_content_in_dom_element(this, user_is_bot);
});
$content.find(".topic-mention").each(function (): void {
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index 7c6bd5f5dc..5e0781fc4e 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -941,3 +941,11 @@
white-space: nowrap;
}
}
+
+.user-mention {
+ i.zulip-icon-bot {
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+ }
+}
diff --git a/web/templates/mention_content_wrapper.hbs b/web/templates/mention_content_wrapper.hbs
index bd14a52ce9..364c6e9400 100644
--- a/web/templates/mention_content_wrapper.hbs
+++ b/web/templates/mention_content_wrapper.hbs
@@ -1,3 +1,4 @@
{{~!-- --~}}
{{ mention_text }}
+{{#if is_bot}}{{/if}}
{{~!-- --~}}