From 7e1962dea58e63fd4c027b63722f5701e2d09aa5 Mon Sep 17 00:00:00 2001
From: Vishesh Singh <vishesh.bhu1971@gmail.com>
Date: Sun, 13 Oct 2024 00:49:28 +0530
Subject: [PATCH] compose: Show bot icon after bot name in recipient picker.

Bot icon shown in the typeahead recipient list which pops up
in the compose box while typing.
On typeahead hover, bot icon takes the color of the font
for better contrast.
---
 web/src/typeahead_helper.ts           | 1 +
 web/styles/typeahead.css              | 6 ++++++
 web/templates/typeahead_list_item.hbs | 3 +++
 3 files changed, 10 insertions(+)

diff --git a/web/src/typeahead_helper.ts b/web/src/typeahead_helper.ts
index 309a6a41c2..ef3fa6647a 100644
--- a/web/src/typeahead_helper.ts
+++ b/web/src/typeahead_helper.ts
@@ -145,6 +145,7 @@ export function render_person(person: UserPillData | UserOrMentionPillData): str
         img_src: avatar_url,
         user_circle_class,
         is_person: true,
+        is_bot: person.user.is_bot,
         status_emoji_info,
         should_add_guest_user_indicator: people.should_add_guest_user_indicator(
             person.user.user_id,
diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index 25259e06e0..c402d99352 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -179,3 +179,9 @@
         margin-left: 14px;
     }
 }
+
+.typeahead-text-container {
+    i.zulip-icon-bot {
+        align-self: center;
+    }
+}
diff --git a/web/templates/typeahead_list_item.hbs b/web/templates/typeahead_list_item.hbs
index 8db0266203..80436af44b 100644
--- a/web/templates/typeahead_list_item.hbs
+++ b/web/templates/typeahead_list_item.hbs
@@ -25,6 +25,9 @@
             {{~ primary ~}}
         {{~/if~}}
     </strong>
+    {{~#if is_bot}}
+        <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
+    {{/if}}
     {{~#if has_pronouns}}
         <span class="pronouns">{{pronouns}}{{#if (or has_secondary_html has_secondary)}},{{/if}}</span>
     {{~/if}}