Merge branch 'staging' into group-join-examples

public/script.js

@@ -849,11 +849,9 @@ export let is_send_press = false; //Send generation
 
 let this_del_mes = -1;
 
-//message editing and chat scroll position persistence
+//message editing
 var this_edit_mes_chname = '';
 var this_edit_mes_id;
-var scroll_holder = 0;
-var is_use_scroll_holder = false;
 
 //settings
 export let settings;
@@ -9727,16 +9725,16 @@ jQuery(async function () {
         chooseBogusFolder($(this), tagId);
     });
 
+    const cssAutofit = CSS.supports('field-sizing', 'content');
+    if (!cssAutofit) {
         /**
          * Sets the scroll height of the edit textarea to fit the content.
          * @param {HTMLTextAreaElement} e Textarea element to auto-fit
          */
         function autoFitEditTextArea(e) {
-        scroll_holder = chatElement[0].scrollTop;
             e.style.height = '0px';
             const newHeight = e.scrollHeight + 4;
             e.style.height = `${newHeight}px`;
-        is_use_scroll_holder = true;
         }
         const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short);
         document.addEventListener('input', e => {
@@ -9746,6 +9744,8 @@ jQuery(async function () {
                 immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target);
             }
         });
+    }
+
     const chatElementScroll = document.getElementById('chat');
     const chatScrollHandler = function () {
         if (power_user.waifuMode) {
@@ -9767,12 +9767,6 @@ jQuery(async function () {
     };
     chatElementScroll.addEventListener('wheel', chatScrollHandler, { passive: true });
     chatElementScroll.addEventListener('touchmove', chatScrollHandler, { passive: true });
-    chatElementScroll.addEventListener('scroll', function () {
-        if (is_use_scroll_holder) {
-            this.scrollTop = scroll_holder;
-            is_use_scroll_holder = false;
-        }
-    }, { passive: true });
 
     $(document).on('click', '.mes', function () {
         //when a 'delete message' parent div is clicked
@@ -10511,14 +10505,16 @@ jQuery(async function () {
                 .closest('.mes_block')
                 .find('.mes_text')
                 .append(
-                    '<textarea id=\'curEditTextarea\' class=\'edit_textarea mdHotkeys\' style=\'max-width:auto;\'></textarea>',
+                    '<textarea id=\'curEditTextarea\' class=\'edit_textarea mdHotkeys\'></textarea>',
                 );
             $('#curEditTextarea').val(text);
             let edit_textarea = $(this)
                 .closest('.mes_block')
                 .find('.edit_textarea');
+            if (!cssAutofit) {
                 edit_textarea.height(0);
                 edit_textarea.height(edit_textarea[0].scrollHeight);
+            }
             edit_textarea.focus();
             edit_textarea[0].setSelectionRange(     //this sets the cursor at the end of the text
                 String(edit_textarea.val()).length,

public/scripts/RossAscends-mods.js

@@ -887,7 +887,40 @@ export function initRossMods() {
         saveSettingsDebounced();
     });
 
+    const cssAutofit = CSS.supports('field-sizing', 'content');
+
+    if (cssAutofit) {
+        let lastHeight = chatBlock.offsetHeight;
+        const chatBlockResizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target !== chatBlock) {
+                    continue;
+                }
+
+                const threshold = 1;
+                const newHeight = chatBlock.offsetHeight;
+                const deltaHeight = newHeight - lastHeight;
+                const isScrollAtBottom = Math.abs(chatBlock.scrollHeight - chatBlock.scrollTop - newHeight) <= threshold;
+
+                if (!isScrollAtBottom && Math.abs(deltaHeight) > threshold) {
+                    chatBlock.scrollTop -= deltaHeight;
+                }
+                lastHeight = newHeight;
+            }
+        });
+
+        chatBlockResizeObserver.observe(chatBlock);
+    }
+
     sendTextArea.addEventListener('input', () => {
+        saveUserInputDebounced();
+
+        if (cssAutofit) {
+            // Unset modifications made with a manual resize
+            sendTextArea.style.height = 'auto';
+            return;
+        }
+
         const hasContent = sendTextArea.value !== '';
         const fitsCurrentSize = sendTextArea.scrollHeight <= sendTextArea.offsetHeight;
         const isScrollbarShown = sendTextArea.clientWidth < sendTextArea.offsetWidth;
@@ -895,7 +928,6 @@ export function initRossMods() {
         const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
         if (needsDebounce) autoFitSendTextAreaDebounced();
         else autoFitSendTextArea();
-        saveUserInputDebounced();
     });
 
     restoreUserInput();

public/scripts/extensions/expressions/index.js

@@ -15,6 +15,7 @@ import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashComm
 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { slashCommandReturnHelper } from '../../slash-commands/SlashCommandReturnHelper.js';
 import { SlashCommandClosure } from '../../slash-commands/SlashCommandClosure.js';
+import { generateWebLlmChatPrompt, isWebLlmSupported } from '../shared.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'expressions';
@@ -59,6 +60,7 @@ const EXPRESSION_API = {
     local: 0,
     extras: 1,
     llm: 2,
+    webllm: 3,
 };
 
 let expressionsList = null;
@@ -852,7 +854,7 @@ function setTalkingHeadState(newState) {
     extension_settings.expressions.talkinghead = newState; // Store setting
     saveSettingsDebounced();
 
-    if (extension_settings.expressions.api == EXPRESSION_API.local || extension_settings.expressions.api == EXPRESSION_API.llm) {
+    if ([EXPRESSION_API.local, EXPRESSION_API.llm, EXPRESSION_API.webllm].includes(extension_settings.expressions.api)) {
         return;
     }
 
@@ -1057,21 +1059,25 @@ function parseLlmResponse(emotionResponse, labels) {
             console.debug(`fuzzy search found: ${result[0].item} as closest for the LLM response:`, emotionResponse);
             return result[0].item;
         }
+        const lowerCaseResponse = String(emotionResponse || '').toLowerCase();
+        for (const label of labels) {
+            if (lowerCaseResponse.includes(label.toLowerCase())) {
+                console.debug(`Found label ${label} in the LLM response:`, emotionResponse);
+                return label;
+            }
+        }
     }
 
     throw new Error('Could not parse emotion response ' + emotionResponse);
 }
 
-function onTextGenSettingsReady(args) {
+/**
-    // Only call if inside an API call
+ * Gets the JSON schema for the LLM API.
-    if (inApiCall && extension_settings.expressions.api === EXPRESSION_API.llm && isJsonSchemaSupported()) {
+ * @param {string[]} emotions A list of emotions to search for.
-        const emotions = DEFAULT_EXPRESSIONS.filter((e) => e != 'talkinghead');
+ * @returns {object} The JSON schema for the LLM API.
-        Object.assign(args, {
+ */
-            top_k: 1,
+function getJsonSchema(emotions) {
-            stop: [],
+    return {
-            stopping_strings: [],
-            custom_token_bans: [],
-            json_schema: {
         $schema: 'http://json-schema.org/draft-04/schema#',
         type: 'object',
         properties: {
@@ -1083,7 +1089,19 @@ function onTextGenSettingsReady(args) {
         required: [
             'emotion',
         ],
-            },
+    };
+}
+
+function onTextGenSettingsReady(args) {
+    // Only call if inside an API call
+    if (inApiCall && extension_settings.expressions.api === EXPRESSION_API.llm && isJsonSchemaSupported()) {
+        const emotions = DEFAULT_EXPRESSIONS.filter((e) => e != 'talkinghead');
+        Object.assign(args, {
+            top_k: 1,
+            stop: [],
+            stopping_strings: [],
+            custom_token_bans: [],
+            json_schema: getJsonSchema(emotions),
         });
     }
 }
@@ -1139,6 +1157,22 @@ export async function getExpressionLabel(text, expressionsApi = extension_settin
                 const emotionResponse = await generateRaw(text, main_api, false, false, prompt);
                 return parseLlmResponse(emotionResponse, expressionsList);
             }
+            // Using WebLLM
+            case EXPRESSION_API.webllm: {
+                if (!isWebLlmSupported()) {
+                    console.warn('WebLLM is not supported. Using fallback expression');
+                    return getFallbackExpression();
+                }
+
+                const expressionsList = await getExpressionsList();
+                const prompt = substituteParamsExtended(customPrompt, { labels: expressionsList }) || await getLlmPrompt(expressionsList);
+                const messages = [
+                    { role: 'user', content: text + '\n\n' + prompt },
+                ];
+
+                const emotionResponse = await generateWebLlmChatPrompt(messages);
+                return parseLlmResponse(emotionResponse, expressionsList);
+            }
             // Extras
             default: {
                 const url = new URL(getApiUrl());
@@ -1603,7 +1637,7 @@ function onExpressionApiChanged() {
     const tempApi = this.value;
     if (tempApi) {
         extension_settings.expressions.api = Number(tempApi);
-        $('.expression_llm_prompt_block').toggle(extension_settings.expressions.api === EXPRESSION_API.llm);
+        $('.expression_llm_prompt_block').toggle([EXPRESSION_API.llm, EXPRESSION_API.webllm].includes(extension_settings.expressions.api));
         expressionsList = null;
         spriteCache = {};
         moduleWorker();
@@ -1940,7 +1974,7 @@ function migrateSettings() {
 
         await renderAdditionalExpressionSettings();
         $('#expression_api').val(extension_settings.expressions.api ?? EXPRESSION_API.extras);
-        $('.expression_llm_prompt_block').toggle(extension_settings.expressions.api === EXPRESSION_API.llm);
+        $('.expression_llm_prompt_block').toggle([EXPRESSION_API.llm, EXPRESSION_API.webllm].includes(extension_settings.expressions.api));
         $('#expression_llm_prompt').val(extension_settings.expressions.llmPrompt ?? '');
         $('#expression_llm_prompt').on('input', function () {
             extension_settings.expressions.llmPrompt = $(this).val();

public/scripts/extensions/expressions/settings.html

@@ -24,7 +24,8 @@
                 <select id="expression_api" class="flex1 margin0">
                     <option value="0" data-i18n="Local">Local</option>
                     <option value="1" data-i18n="Extras">Extras</option>
-                    <option value="2" data-i18n="LLM">LLM</option>
+                    <option value="2" data-i18n="Main API">Main API</option>
+                    <option value="3" data-i18n="WebLLM Extension">WebLLM Extension</option>
                 </select>
             </div>
             <div class="expression_llm_prompt_block m-b-1 m-t-1">

public/scripts/textgen-models.js

@@ -25,6 +25,7 @@ const OPENROUTER_PROVIDERS = [
     'Anthropic',
     'Google',
     'Google AI Studio',
+    'Amazon Bedrock',
     'Groq',
     'SambaNova',
     'Cohere',
@@ -50,6 +51,8 @@ const OPENROUTER_PROVIDERS = [
     'Featherless',
     'Inflection',
     'xAI',
+    'Cloudflare',
+    'SF Compute',
     '01.AI',
     'HuggingFace',
     'Mancer',

public/style.css

@@ -1264,6 +1264,7 @@ button {
     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     flex: 1;
     order: 3;
+    field-sizing: content;
 
     --progColor: rgb(146, 190, 252);
     --progFlashColor: rgb(215, 136, 114);
@@ -4111,6 +4112,7 @@ input[type="range"]::-webkit-slider-thumb {
     line-height: calc(var(--mainFontSize) + .25rem);
     max-height: 75vh;
     max-height: 75dvh;
+    field-sizing: content;
 }
 
 #anchor_order {