Feat: Add toggle to exclude think/reason blocks from smooth streaming (#4849) * Feat: Add toggle to exclude think/reason blocks from smooth streaming * Fix: Adjust new setting name to properly reflect what it does * Sync data-i18n with text content * Add reasoning stream flags for Mistral, Claude and Google models * Update layout * Fix: Enhance reasoning handling in parseStreamData function --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

6c8eb4d9ac6b9e76fd5ed53ad6e2739f112131bf

Kristian Schlikow <Dakraid@users.noreply.github.com>

Signed

Parents: f145296a5899274cbfeb5410c8cb5c239379b110

public/css/toggle-dependent.css+2 -5 Viewed

@@ -477,14 +477,11 @@ body.expandMessageActions .mes .mes_buttons .extraMesButtonsHint {
477	477	display: none !important;
478	478	}
479	479
480	480	#smooth_streaming_control:has(#smooth_streaming:not(:checked))~#smooth_streaming_speed_control {,
	481	+#smooth_streaming_control:has(#smooth_streaming:not(:checked))~#smooth_streaming_no_think_control {
481	482	display: none;
482	483	}
483	484
484		-#smooth_streaming:checked~#smooth_streaming_speed_control {
485		- display: block;
486		-}
487		-
488	485	.mdhotkey_icon {
489	486	opacity: 0.6;
490	487	}

public/index.html+9 -3 Viewed

                                     <small data-i18n="Clean-Up">Clean-Up</small>
                                 </div>
                             </div>
                             <label id="smooth_streaming_control" class="checkbox_label flexWrap" for="smooth_streaming">
                                 <input id="smooth_streaming" type="checkbox" />
                                 <div class="flex-container alignItemsBaseline">
                                     <small data-i18n="Smooth Streaming">
                                         Smooth Streaming
                                     </small>
                                 </div>
 -                                <div id="smooth_streaming_speed_control" class="flexBasis100p wide100p">
 +                            </label>
 +                            <label id="smooth_streaming_no_think_control" class="checkbox_label" for="smooth_streaming_no_think" title="Bypass smooth streaming in reasoning blocks." data-i18n="[title]Bypass smooth streaming in reasoning blocks.">
 +                                <input id="smooth_streaming_no_think" type="checkbox" />
 +                                <small data-i18n="Exclude 'Thinking...'">
 +                                    Exclude 'Thinking...'
 +                                </small>
 +                            </label>
 +                            <div id="smooth_streaming_speed_control" class="wide100p">
                                 <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="Fast">Fast</span>
                                 </div>
                             </div>
 -                            </label>
                             <label class="checkbox_label" for="stream_fade_in" title="Fade in streamed text when it appears, instead of it just popping in." data-i18n="[title]Fade in streamed text when it appears, instead of it just popping in">
                                 <input id="stream_fade_in" type="checkbox" />
                                 <small data-i18n="Stream Fade-In">Stream Fade-In</small>

public/scripts/power-user.js+7 -0 Viewed

     chat_truncation: 100,
     streaming_fps: 30,
     smooth_streaming: false,
 +    smooth_streaming_no_think: false,
     smooth_streaming_speed: 50,
     stream_fade_in: false,

     $('#streaming_fps_counter').val(power_user.streaming_fps);
     $('#smooth_streaming').prop('checked', power_user.smooth_streaming);
 +    $('#smooth_streaming_no_think').prop('checked', power_user.smooth_streaming_no_think);
     $('#smooth_streaming_speed').val(power_user.smooth_streaming_speed);
     $('#stream_fade_in').prop('checked', power_user.stream_fade_in);

         saveSettingsDebounced();
     });
 +    $('#smooth_streaming_no_think').on('input', function () {
 +        power_user.smooth_streaming_no_think = !!$(this).prop('checked');
 +        saveSettingsDebounced();
 +    });
++
     $('#smooth_streaming_speed').on('input', function () {
         power_user.smooth_streaming_speed = Number($('#smooth_streaming_speed').val());
         saveSettingsDebounced();

public/scripts/sse-stream.js+37 -2 Viewed

 /**
  * Parses the stream data and returns the parsed data and the chunk to be sent.
  * @param {object} json The JSON data.
  * @returns {AsyncGenerator<{data: object, chunk: string, reasoning?: boolean}>} The parsed data and the chunk to be sent.
  */
 async function* parseStreamData(json) {
     // Cohere

+        }
         return;
+    }
 +    else if (typeof json.delta === 'object' && typeof json.delta.thinking === 'string') {
 +        if (json.delta.thinking.length > 0) {
 +            for (let i = 0; i < json.delta.thinking.length; i++) {
 +                const str = json.delta.thinking[i];
 +                yield {
 +                    data: { ...json, delta: { thinking: str } },
 +                    chunk: str,
 +                    reasoning: true,
 +                };
 +            }
 +        }
 +        return;
 +    }
     // MakerSuite
     else if (Array.isArray(json.candidates)) {
         for (let i = 0; i < json.candidates.length; i++) {

                             candidateClone.content.parts[j].text = str;
                             candidateClone.content.parts = [candidateClone.content.parts[j]];
                             const candidates = [candidateClone];
 +                            const reasoning = json.candidates[i].content.parts[j].thought ?? false;
                             yield {
                                 data: { ...json, candidates },
                                 chunk: str,
 +                                reasoning,
                             };
+                        }
+                    }

                     yield {
                         data: { ...json, choices },
                         chunk: str,
 +                        reasoning: true,
                     };
+                }
                 return;

                     yield {
                         data: { ...json, choices },
                         chunk: str,
 +                        reasoning: true,
                     };
+                }
                 return;

+                }
                 return;
+            }
 +            else if (Array.isArray(json.choices[0].delta.content) && json.choices[0].delta.content.length > 0) {
 +                if (Array.isArray(json.choices[0].delta.content[0].thinking) && json.choices[0].delta.content[0].thinking.length > 0) {
 +                    if (typeof json.choices[0].delta.content[0].thinking[0].text === 'string' && json.choices[0].delta.content[0].thinking[0].text.length > 0) {
 +                        for (let j = 0; j < json.choices[0].delta.content[0].thinking[0].text.length; j++) {
 +                            const str = json.choices[0].delta.content[0].thinking[0].text[j];
 +                            const choiceClone = structuredClone(json.choices[0]);
 +                            choiceClone.delta.content[0].thinking[0].text = str;
 +                            const choices = [choiceClone];
 +                            yield {
 +                                data: { ...json, choices },
 +                                chunk: str,
 +                                reasoning: true,
 +                            };
 +                        }
 +                        return;
 +                    }
 +                }
 +            }
+        }
         else if (typeof json.choices[0].message === 'object') {
             if (typeof json.choices[0].message.content === 'string' && json.choices[0].message.content.length > 0) {

@@ -317,7 +352,7 @@ export class SmoothEventSourceStream extends EventSourceStream {
317	352	}
318	353
319	354	for await (const parsed of parseStreamData(json)) {
320	355	!(power_user.smooth_streaming_no_think && parsed.reasoning) && hasFocus && await delay(getDelay(lastStr));
321	356	controller.enqueue(new MessageEvent(event.type, { data: JSON.stringify(parsed.data) }));
322	357	lastStr = parsed.chunk;
323	358	}