settings: Preview bot avatar in bot editing/creation forms.

Previews of the current bot avatar and the uploaded bot avatar were not
displayed during bot creation or editing.

We address this by extending The 'upload_widget' component with with
'preview_text' and 'preview_image' parameters to provide a preview of
the image that will be used as the bot's avatar during bot creation or
editing.

Fixes #23023.

static/js/avatar.js

@@ -21,13 +21,16 @@ export function build_bot_create_widget() {
     const $input_error = $("#bot_avatar_file_input_error");
     const $clear_button = $("#bot_avatar_clear_button");
     const $upload_button = $("#bot_avatar_upload_button");
-
+    const $preview_text = $("#add_bot_preview_text");
+    const $preview_image = $("#add_bot_preview_image");
     return upload_widget.build_widget(
         get_file_input,
         $file_name_field,
         $input_error,
         $clear_button,
         $upload_button,
+        $preview_text,
+        $preview_image,
     );
 }
 
@@ -40,6 +43,8 @@ export function build_bot_edit_widget($target) {
     const $input_error = $target.find(".edit_bot_avatar_error");
     const $clear_button = $target.find(".edit_bot_avatar_clear_button");
     const $upload_button = $target.find(".edit_bot_avatar_upload_button");
+    const $preview_text = $target.find(".edit_bot_avatar_preview_text");
+    const $preview_image = $target.find(".edit_bot_avatar_preview_image");
 
     return upload_widget.build_widget(
         get_file_input,
@@ -47,6 +52,8 @@ export function build_bot_edit_widget($target) {
         $input_error,
         $clear_button,
         $upload_button,
+        $preview_text,
+        $preview_image,
     );
 }
 

static/js/settings_bots.js

@@ -345,6 +345,7 @@ export function show_edit_bot_info_modal(user_id, from_user_info_popover) {
         full_name: bot.full_name,
         user_role_values: settings_config.user_role_values,
         disable_role_dropdown: !page_params.is_admin || (bot.is_owner && !page_params.is_owner),
+        bot_avatar_url: bot.avatar_url,
     });
 
     let owner_widget;
@@ -450,6 +451,16 @@ export function show_edit_bot_info_modal(user_id, from_user_info_popover) {
             );
         }
 
+        // Hide the avatar if the user has uploaded an image
+        $("#bot-edit-form").on("input", ".edit_bot_avatar_file_input", () => {
+            $("#current_bot_avatar_image").hide();
+        });
+
+        // Show the avatar if the user has cleared the image
+        $("#bot-edit-form").on("click", ".edit_bot_avatar_clear_button", () => {
+            $("#current_bot_avatar_image").show();
+        });
+
         $("#bot-edit-form").on("click", ".deactivate_bot_button", (e) => {
             e.preventDefault();
             e.stopPropagation();

static/styles/settings.css

@@ -858,6 +858,26 @@ input[type="checkbox"] {
     #bot-role-select:disabled {
         opacity: 1;
     }
+
+    #current_bot_avatar_image {
+        margin: 5px 0 8px;
+    }
+
+    .edit_bot_avatar_preview_text {
+        display: none;
+    }
+}
+
+#add_bot_preview_text {
+    display: none;
+}
+
+.edit_bot_avatar_preview_image,
+#add_bot_preview_image {
+    height: 100px;
+    object-fit: cover;
+    width: 100px;
+    margin: 2px 0 8px;
 }
 
 #add-alert-word {

static/templates/settings/add_new_bot_form.hbs

@@ -63,6 +63,9 @@
             <label for="bot_avatar_file_input">Avatar</label>
             <div id="bot_avatar_file"></div>
             <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
+            <div id="add_bot_preview_text">
+                <img id="add_bot_preview_image" />
+            </div>
             <button class="button white rounded small btn-danger" style="display: none;" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
             <button class="button white rounded" id="bot_avatar_upload_button">{{t "Choose avatar" }}</button> ({{t "Optional" }})
         </div>

static/templates/settings/edit_bot_form.hbs

@@ -31,9 +31,14 @@
         </div>
         <div class="input-group edit-avatar-section">
             <label>Avatar</label>
+            {{!-- Shows the current avatar --}}
+            <img src="{{bot_avatar_url}}" id="current_bot_avatar_image" />
             <input type="file" name="bot_avatar_file_input" class="notvisible edit_bot_avatar_file_input" value="{{t 'Upload profile picture' }}" />
             <div class="edit_bot_avatar_file"></div>
-            <button type="button" class="button white rounded edit_bot_avatar_upload_button">{{t "Choose avatar" }}</button>
+            <div class="edit_bot_avatar_preview_text">
+                <img class="edit_bot_avatar_preview_image" />
+            </div>
+            <button type="button" class="button white rounded edit_bot_avatar_upload_button">{{t "Change avatar" }}</button>
             <button type="button" class="button white rounded edit_bot_avatar_clear_button" style="display: none;">{{t "Clear profile picture" }}</button>
             <div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div>
         </div>