fix(ui): render thinking/reasoning block content as markdown (#24611)

* fix(ui): render thinking/reasoning block content as markdown

* feat(ui): add toggle setting for thinking block markdown rendering

diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
index e21dff993ffd192a92ea3e652c76b9de412adfcf..07b0489cc3546729a3a247f8814c247e92854479 100644 (file)
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
@@ -56,6 +56,7 @@
 
        const showToolCallInProgress = $derived(config().showToolCallInProgress as boolean);
        const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
+       const renderThinkingAsMarkdown = $derived(config().renderThinkingAsMarkdown as boolean);
 
        const hasReasoningError = $derived(
                isLastAssistantMessage ? !!agenticLastError(message.convId) : false
@@ -316,9 +317,13 @@
                        onToggle={() => toggleExpanded(index, section)}
                >
                        <div class="pt-3">
-                               <div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
-                                       {section.content}
-                               </div>
+                               {#if renderThinkingAsMarkdown}
+                                       <MarkdownContent content={section.content} attachments={message?.extra} />
+                               {:else}
+                                       <div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
+                                               {section.content}
+                                       </div>
+                               {/if}
                        </div>
                </CollapsibleContentBlock>
        {:else if section.type === AgenticSectionType.REASONING_PENDING}
@@ -336,9 +341,13 @@
                        onToggle={() => toggleExpanded(index, section)}
                >
                        <div class="pt-3">
-                               <div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
-                                       {section.content}
-                               </div>
+                               {#if renderThinkingAsMarkdown}
+                                       <MarkdownContent content={section.content} attachments={message?.extra} />
+                               {:else}
+                                       <div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
+                                               {section.content}
+                                       </div>
+                               {/if}
                        </div>
                </CollapsibleContentBlock>
        {/if}

diff --git a/tools/ui/src/lib/constants/settings-keys.ts b/tools/ui/src/lib/constants/settings-keys.ts
index eea28b3409971a0dd24db8cc5fb0a610af8037bc..a3046caa935dbce25f24dbff87b39d336ce459ab 100644 (file)
--- a/tools/ui/src/lib/constants/settings-keys.ts
+++ b/tools/ui/src/lib/constants/settings-keys.ts
@@ -33,6 +33,7 @@ export const SETTINGS_KEYS = {
        SHOW_MODEL_TAGS: 'showModelTags',
        SHOW_BUILD_VERSION: 'showBuildVersion',
        SHOW_SYSTEM_MESSAGE: 'showSystemMessage',
+       RENDER_THINKING_AS_MARKDOWN: 'renderThinkingAsMarkdown',
        // Sampling
        TEMPERATURE: 'temperature',
        DYNATEMP_RANGE: 'dynatemp_range',

diff --git a/tools/ui/src/lib/constants/settings-registry.ts b/tools/ui/src/lib/constants/settings-registry.ts
index f3f1829753225f5f0964232df1e2ba81c019c570..37161c8e32f5c6febb88ae7edf3adb6728c3f741 100644 (file)
--- a/tools/ui/src/lib/constants/settings-registry.ts
+++ b/tools/ui/src/lib/constants/settings-registry.ts
@@ -282,6 +282,18 @@ const SETTINGS_REGISTRY: Record<string, SettingsSectionEntry> = {
                                        paramType: SyncableParameterType.BOOLEAN
                                }
                        },
+                       {
+                               key: SETTINGS_KEYS.RENDER_THINKING_AS_MARKDOWN,
+                               label: 'Render thinking as Markdown',
+                               help: 'Render the reasoning/thinking block content as formatted Markdown instead of plain text.',
+                               defaultValue: true,
+                               type: SettingsFieldType.CHECKBOX,
+                               section: SETTINGS_SECTION_SLUGS.DISPLAY,
+                               sync: {
+                                       serverKey: SETTINGS_KEYS.RENDER_THINKING_AS_MARKDOWN,
+                                       paramType: SyncableParameterType.BOOLEAN
+                               }
+                       },
                        {
                                key: SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS,
                                label: 'Use full height code blocks',