Add toggle for showing hidden reasoning
| @@ -3810,6 +3810,12 @@ | |||
| 3810 | Auto-Expand | 3810 | Auto-Expand |
| 3811 | </small> | 3811 | </small> |
| 3812 | </label> | 3812 | </label> |
| 3813 | <label class="checkbox_label flex1" for="reasoning_show_hidden" title="Show reasoning time for models with hidden reasoning." data-i18n="[title]reasoning_show_hidden"> | ||
| 3814 | <input id="reasoning_show_hidden" type="checkbox" /> | ||
| 3815 | <small data-i18n="Show Hidden"> | ||
| 3816 | Show Hidden | ||
| 3817 | </small> | ||
| 3818 | </label> | ||
| 3813 | </div> | 3819 | </div> |
| 3814 | <div class="flex-container alignItemsBaseline"> | 3820 | <div class="flex-container alignItemsBaseline"> |
| 3815 | <label class="checkbox_label flex1" for="reasoning_add_to_prompts" title="Add existing reasoning blocks to prompts. To add a new reasoning block, use the message edit menu." data-i18n="[title]reasoning_add_to_prompts"> | 3821 | <label class="checkbox_label flex1" for="reasoning_add_to_prompts" title="Add existing reasoning blocks to prompts. To add a new reasoning block, use the message edit menu." data-i18n="[title]reasoning_add_to_prompts"> |
| @@ -258,6 +258,7 @@ let power_user = { | |||
| 258 | auto_parse: false, | 258 | auto_parse: false, |
| 259 | add_to_prompts: false, | 259 | add_to_prompts: false, |
| 260 | auto_expand: false, | 260 | auto_expand: false, |
| 261 | show_hidden: false, | ||
| 261 | prefix: '<think>\n', | 262 | prefix: '<think>\n', |
| 262 | suffix: '\n</think>', | 263 | suffix: '\n</think>', |
| 263 | separator: '\n\n', | 264 | separator: '\n\n', |
| @@ -503,6 +503,15 @@ function loadReasoningSettings() { | |||
| 503 | toggleReasoningAutoExpand(); | 503 | toggleReasoningAutoExpand(); |
| 504 | saveSettingsDebounced(); | 504 | saveSettingsDebounced(); |
| 505 | }); | 505 | }); |
| 506 | toggleReasoningAutoExpand(); | ||
| 507 | |||
| 508 | $('#reasoning_show_hidden').prop('checked', power_user.reasoning.show_hidden); | ||
| 509 | $('#reasoning_show_hidden').on('change', function () { | ||
| 510 | power_user.reasoning.show_hidden = !!$(this).prop('checked'); | ||
| 511 | $('#chat').attr('data-show-hidden-reasoning', power_user.reasoning.show_hidden ? 'true' : null); | ||
| 512 | saveSettingsDebounced(); | ||
| 513 | }); | ||
| 514 | $('#chat').attr('data-show-hidden-reasoning', power_user.reasoning.show_hidden ? 'true' : null); | ||
| 506 | } | 515 | } |
| 507 | 516 | ||
| 508 | function registerReasoningSlashCommands() { | 517 | function registerReasoningSlashCommands() { |
| @@ -874,7 +883,6 @@ function registerReasoningAppEvents() { | |||
| 874 | 883 | ||
| 875 | export function initReasoning() { | 884 | export function initReasoning() { |
| 876 | loadReasoningSettings(); | 885 | loadReasoningSettings(); |
| 877 | toggleReasoningAutoExpand(); | ||
| 878 | setReasoningEventHandlers(); | 886 | setReasoningEventHandlers(); |
| 879 | registerReasoningSlashCommands(); | 887 | registerReasoningSlashCommands(); |
| 880 | registerReasoningMacros(); | 888 | registerReasoningMacros(); |
| @@ -428,16 +428,11 @@ input[type='checkbox']:focus-visible { | |||
| 428 | background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%); | 428 | background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%); |
| 429 | } | 429 | } |
| 430 | 430 | ||
| 431 | /** Hide hidden reasoning blocks - revert this selector to show them again */ | 431 | /** If hidden reasoning should not be shown, we hide all blocks that don't have content */ |
| 432 | .mes.reasoning[data-reasoning-state="hidden"] .mes_reasoning_details { | 432 | #chat:not([data-show-hidden-reasoning="true"]) .mes:has(.mes_reasoning:empty) .mes_reasoning_details { |
| 433 | display: none; | 433 | display: none; |
| 434 | } | 434 | } |
| 435 | 435 | ||
| 436 | /** Show "Thinking..." during generation, even if the reasoning is hidden by default */ | ||
| 437 | body[data-generating="true"] .last_mes.reasoning[data-reasoning-state="hidden"] .mes_reasoning_details { | ||
| 438 | display: block; | ||
| 439 | } | ||
| 440 | |||
| 441 | .mes_reasoning_details .mes_reasoning_arrow { | 436 | .mes_reasoning_details .mes_reasoning_arrow { |
| 442 | position: absolute; | 437 | position: absolute; |
| 443 | top: 50%; | 438 | top: 50%; |