Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

mention_pill: Show bot icon in bot mention pill. 

Render a bot icon to the right of bot name, in case
it is a bot.
This commit is contained in:
Vishesh Singh 2024-10-25 00:34:23 +05:30 committed by Tim Abbott
parent 482f6c5449
commit 5b70775ab6
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/rendered_markdown.ts
View File

@ -82,9 +82,9 @@ function get_message_for_message_content($content: JQuery): Message | undefined
// This enables mentions to display inline, while adjusting // This enables mentions to display inline, while adjusting
// the outer element's font-size for better appearance on // the outer element's font-size for better appearance on
// lines of message text. // 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(); 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; return element;
} }
@ -94,6 +94,7 @@ export function set_name_in_mention_element(
name: string, name: string,
user_id?: number, user_id?: number,
): void { ): 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)) { if (user_id !== undefined && people.should_add_guest_user_indicator(user_id)) {
let display_text; let display_text;
if (!$(element).hasClass("silent")) { if (!$(element).hasClass("silent")) {
@ -112,7 +113,7 @@ export function set_name_in_mention_element(
$(element).text("@" + name); $(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 => { 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 { $content.find(".user-mention").each(function (): void {
const user_id = get_user_id_for_mention_button(this); const user_id = get_user_id_for_mention_button(this);
const message = get_message_for_message_content($content); 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 // We give special highlights to the mention buttons
// that refer to the current user. // that refer to the current user.
if (user_id === "*" && message && message.stream_wildcard_mentioned) { 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); 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 { $content.find(".topic-mention").each(function (): void {

8
web/styles/rendered_markdown.css
View File

@ -941,3 +941,11 @@
white-space: nowrap; white-space: nowrap;
} }
} }
.user-mention {
i.zulip-icon-bot {
vertical-align: middle;
position: relative;
top: -1px;
}
}

1
web/templates/mention_content_wrapper.hbs
View File

@ -1,3 +1,4 @@
{{~!-- --~}} {{~!-- --~}}
<span class="mention-content-wrapper">{{ mention_text }}</span> <span class="mention-content-wrapper">{{ mention_text }}</span>
{{#if is_bot}}<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>{{/if}}
{{~!-- --~}} {{~!-- --~}}