Move typing indicator to an extension https://github.com/SillyTavern/Extension-TypingIndicator

6deaa31d4176774dd0e7292ecba8a3bf7cebb286

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 1f0aa293072d1432a1837c8a392cbb6f0a85f1a1
4 files changed, +1 -44Ignore whitespace
public/index.html+1 -3
@@ -4830,6 +4830,7 @@
48304830 </div>
48314831 <div id="extensions_settings" class="flex1 wide50p">
48324832 <div id="assets_container" class="extension_container"></div>
4833+ <div id="typing_indicator_container" class="extension_container"></div>
48334834 <div id="expressions_container" class="extension_container"></div>
48344835 <div id="sd_container" class="extension_container"></div>
48354836 <div id="tts_container" class="extension_container"></div>
@@ -6473,9 +6474,6 @@
64736474 </div>
64746475
64756476 <!-- chat and input bar -->
6476- <div id="typing_indicator_template" class="template_element">
6477- <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
6478- </div>
64796477 <div id="message_file_template" class="template_element">
64806478 <div class="mes_file_container">
64816479 <div class="fa-lg fa-solid fa-file-alt mes_file_icon"></div>
public/script.js+0 -5
@@ -8738,11 +8738,6 @@ const swipe_right = () => {
87388738 easing: animation_easing,
87398739 queue: false,
87408740 complete: async function () {
8741- /*if (!selected_group) {
8742- var typingIndicator = $("#typing_indicator_template .typing_indicator").clone();
8743- typingIndicator.find(".typing_indicator_name").text(characters[this_chid].name);
8744- } */
8745- /* $("#chat").append(typingIndicator); */
87468741 const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop('scrollHeight') - $('#chat').outerHeight()) - 10);
87478742 //console.log(parseInt(chat[chat.length-1]['swipe_id']));
87488743 //console.log(chat[chat.length-1]['swipes'].length);
public/scripts/group-chats.js+0 -19
@@ -818,7 +818,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
818818
819819 /** @type {any} Caution: JS war crimes ahead */
820820 let textResult = '';
821- let typingIndicator = $('#chat .typing_indicator');
822821 const group = groups.find((x) => x.id === selected_group);
823822
824823 if (!group || !Array.isArray(group.members) || !group.members.length) {
@@ -834,14 +833,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
834833 setCharacterId(undefined);
835834 const userInput = String($('#send_textarea').val());
836835
837- if (typingIndicator.length === 0 && !isStreamingEnabled()) {
838- typingIndicator = $(
839- '#typing_indicator_template .typing_indicator',
840- ).clone();
841- typingIndicator.hide();
842- $('#chat').append(typingIndicator);
843- }
844-
845836 // id of this specific batch for regeneration purposes
846837 group_generation_id = Date.now();
847838 const lastMessage = chat[chat.length - 1];
@@ -919,14 +910,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
919910 }
920911 await eventSource.emit(event_types.GROUP_MEMBER_DRAFTED, chId);
921912
922- if (type !== 'swipe' && type !== 'impersonate' && !isStreamingEnabled()) {
923- // update indicator and scroll down
924- typingIndicator
925- .find('.typing_indicator_name')
926- .text(characters[chId].name);
927- typingIndicator.show();
928- }
929-
930913 // Wait for generation to finish
931914 textResult = await Generate(generateType, { automatic_trigger: by_auto_mode, ...(params || {}) });
932915 let messageChunk = textResult?.messageChunk;
@@ -943,8 +926,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
943926 }
944927 }
945928 } finally {
946- typingIndicator.hide();
947-
948929 is_group_generating = false;
949930 setSendButtonState(false);
950931 setCharacterId(undefined);
public/style.css+0 -17
@@ -4602,23 +4602,6 @@ body .ui-widget-content li:hover {
46024602 opacity: 1;
46034603}
46044604
4605-.typing_indicator {
4606- position: sticky;
4607- bottom: 10px;
4608- margin: 10px;
4609- opacity: 0.85;
4610- text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
4611- order: 9999;
4612-}
4613-
4614-.typing_indicator:after {
4615- display: inline-block;
4616- vertical-align: bottom;
4617- animation: ellipsis steps(4, end) 1500ms infinite;
4618- content: "";
4619- width: 0px;
4620-}
4621-
46224605#group_avatar_preview .missing-avatar {
46234606 display: inline;
46244607 vertical-align: middle;