Add speed control

public/css/toggle-dependent.css

@@ -439,3 +439,11 @@ body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {
 #openai_image_inlining:checked~#image_inlining_hint {
     display: block;
 }
+
+#smooth_streaming:not(:checked)~#smooth_streaming_speed_control {
+    display: none;
+}
+
+#smooth_streaming:checked~#smooth_streaming_speed_control {
+    display: block;
+}

public/index.html

@@ -3618,7 +3618,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <label class="checkbox_label" for="smooth_streaming">
+                                <label class="checkbox_label flexWrap" for="smooth_streaming">
                                     <input id="smooth_streaming" type="checkbox" />
                                     <div class="flex-container alignItemsBaseline">
                                         <span data-i18n="Smooth Streaming">
@@ -3626,6 +3626,15 @@
                                         </span>
                                         <i class="fa-solid fa-flask" title="Experimental feature. May not work for all backends."></i>
                                     </div>
+                                    <div id="smooth_streaming_speed_control" class="flexBasis100p wide100p">
+                                        <small class="flex justifyCenter" data-i18n="Speed">Speed</small>
+                                        <input type="range" id="smooth_streaming_speed" name="smooth_streaming_speed" min="0" max="100" step="10" value="50">
+                                        <div class="slider_hint">
+                                            <span data-i18n="Slow">Slow</span>
+                                            <span data-i18n=""></span>
+                                            <span data-i18n="Slow">Fast</span>
+                                        </div>
+                                    </div>
                                 </label>
                             </div>
                         </div>

public/scripts/power-user.js

@@ -119,6 +119,7 @@ let power_user = {
     chat_truncation: 100,
     streaming_fps: 30,
     smooth_streaming: false,
+    smooth_streaming_speed: 50,
 
     ui_mode: ui_mode.POWER,
     fast_ui_mode: true,
@@ -1546,6 +1547,7 @@ function loadPowerUserSettings(settings, data) {
     $('#streaming_fps_counter').val(power_user.streaming_fps);
 
     $('#smooth_streaming').prop('checked', power_user.smooth_streaming);
+    $('#smooth_streaming_speed').val(power_user.smooth_streaming_speed);
 
     $('#font_scale').val(power_user.font_scale);
     $('#font_scale_counter').val(power_user.font_scale);
@@ -2949,6 +2951,11 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#smooth_streaming_speed').on('input', function () {
+        power_user.smooth_streaming_speed = Number($('#smooth_streaming_speed').val());
+        saveSettingsDebounced();
+    });
+
     $('input[name="font_scale"]').on('input', async function (e) {
         power_user.font_scale = Number(e.target.value);
         $('#font_scale_counter').val(power_user.font_scale);

public/scripts/sse-stream.js

@@ -78,9 +78,6 @@ class EventSourceStream {
     }
 }
 
-const defaultDelayMs = 20;
-const punctuationDelayMs = 500;
-
 /**
  * Gets a delay based on the character.
  * @param {string} s The character.
@@ -91,6 +88,10 @@ function getDelay(s) {
         return 0;
     }
 
+    const speedFactor = Math.max(100 - power_user.smooth_streaming_speed, 1);
+    const defaultDelayMs = speedFactor * 0.4;
+    const punctuationDelayMs = defaultDelayMs * 25;
+
     if ([',', '\n'].includes(s)) {
         return punctuationDelayMs / 2;
     }