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 @@
4830 </div>4830 </div>
4831 <div id="extensions_settings" class="flex1 wide50p">4831 <div id="extensions_settings" class="flex1 wide50p">
4832 <div id="assets_container" class="extension_container"></div>4832 <div id="assets_container" class="extension_container"></div>
4833 <div id="typing_indicator_container" class="extension_container"></div>
4833 <div id="expressions_container" class="extension_container"></div>4834 <div id="expressions_container" class="extension_container"></div>
4834 <div id="sd_container" class="extension_container"></div>4835 <div id="sd_container" class="extension_container"></div>
4835 <div id="tts_container" class="extension_container"></div>4836 <div id="tts_container" class="extension_container"></div>
@@ -6473,9 +6474,6 @@
6473 </div>6474 </div>
64746475
6475 <!-- chat and input bar -->6476 <!-- 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>
6479 <div id="message_file_template" class="template_element">6477 <div id="message_file_template" class="template_element">
6480 <div class="mes_file_container">6478 <div class="mes_file_container">
6481 <div class="fa-lg fa-solid fa-file-alt mes_file_icon"></div>6479 <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 = () => {
8738 easing: animation_easing,8738 easing: animation_easing,
8739 queue: false,8739 queue: false,
8740 complete: async function () {8740 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); */
8746 const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop('scrollHeight') - $('#chat').outerHeight()) - 10);8741 const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop('scrollHeight') - $('#chat').outerHeight()) - 10);
8747 //console.log(parseInt(chat[chat.length-1]['swipe_id']));8742 //console.log(parseInt(chat[chat.length-1]['swipe_id']));
8748 //console.log(chat[chat.length-1]['swipes'].length);8743 //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
819 /** @type {any} Caution: JS war crimes ahead */819 /** @type {any} Caution: JS war crimes ahead */
820 let textResult = '';820 let textResult = '';
821 let typingIndicator = $('#chat .typing_indicator');
822 const group = groups.find((x) => x.id === selected_group);821 const group = groups.find((x) => x.id === selected_group);
823822
824 if (!group || !Array.isArray(group.members) || !group.members.length) {823 if (!group || !Array.isArray(group.members) || !group.members.length) {
@@ -834,14 +833,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
834 setCharacterId(undefined);833 setCharacterId(undefined);
835 const userInput = String($('#send_textarea').val());834 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
845 // id of this specific batch for regeneration purposes836 // id of this specific batch for regeneration purposes
846 group_generation_id = Date.now();837 group_generation_id = Date.now();
847 const lastMessage = chat[chat.length - 1];838 const lastMessage = chat[chat.length - 1];
@@ -919,14 +910,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
919 }910 }
920 await eventSource.emit(event_types.GROUP_MEMBER_DRAFTED, chId);911 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
930 // Wait for generation to finish913 // Wait for generation to finish
931 textResult = await Generate(generateType, { automatic_trigger: by_auto_mode, ...(params || {}) });914 textResult = await Generate(generateType, { automatic_trigger: by_auto_mode, ...(params || {}) });
932 let messageChunk = textResult?.messageChunk;915 let messageChunk = textResult?.messageChunk;
@@ -943,8 +926,6 @@ async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
943 }926 }
944 }927 }
945 } finally {928 } finally {
946 typingIndicator.hide();
947
948 is_group_generating = false;929 is_group_generating = false;
949 setSendButtonState(false);930 setSendButtonState(false);
950 setCharacterId(undefined);931 setCharacterId(undefined);
public/style.css+0 -17
@@ -4602,23 +4602,6 @@ body .ui-widget-content li:hover {
4602 opacity: 1;4602 opacity: 1;
4603}4603}
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
4622#group_avatar_preview .missing-avatar {4605#group_avatar_preview .missing-avatar {
4623 display: inline;4606 display: inline;
4624 vertical-align: middle;4607 vertical-align: middle;