Skip to content

Commit 5f7e166

Browse files
ServeurpersoComallozaur
ServeurpersoCom
and
allozaur
authored
Fix thinking blocks with quotes + add handling [THINK]...[/THINK] blocks (#16326)
* fix: prevent reasoning blocks with quotes from being truncated * chore: update webui build output * feat: Improve thinking content parsing * test: Adds ChatMessage component stories for different thinking blocks * chore: update webui build output * fix: ChatMessage story fix --------- Co-authored-by: Aleksander Grygier <[email protected]>
1 parent d72f5f7 commit 5f7e166

File tree

3 files changed

+249
-30
lines changed

3 files changed

+249
-30
lines changed

‎tools/server/public/index.html.gz‎

191 Bytes
Binary file not shown.

‎tools/server/webui/src/lib/utils/thinking.ts‎

Lines changed: 83 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
/**
2-
* Parses thinking content from a message that may contain <think> tags
2+
* Parses thinking content from a message that may contain <think> tags or [THINK] tags
33
* Returns an object with thinking content and cleaned message content
4-
* Handles both complete <think>...</think> blocks and incomplete <think> blocks (streaming)
4+
* Handles both complete blocks and incomplete blocks (streaming)
5+
* Supports formats: <think>...</think> and [THINK]...[/THINK]
56
* @param content - The message content to parse
67
* @returns An object containing the extracted thinking content and the cleaned message content
78
*/
89
export function parseThinkingContent(content: string): {
910
thinking: string | null;
1011
cleanContent: string;
1112
} {
12-
const incompleteMatch = content.includes('<think>') && !content.includes('</think>');
13+
const incompleteThinkMatch = content.includes('<think>') && !content.includes('</think>');
14+
const incompleteThinkBracketMatch = content.includes('[THINK]') && !content.includes('[/THINK]');
1315

14-
if (incompleteMatch) {
15-
// Remove the entire <think>... part from clean content
16+
if (incompleteThinkMatch) {
1617
const cleanContent = content.split('</think>')?.[1]?.trim();
17-
// Extract everything after <think> as thinking content
1818
const thinkingContent = content.split('<think>')?.[1]?.trim();
1919

2020
return {
@@ -23,12 +23,40 @@ export function parseThinkingContent(content: string): {
2323
};
2424
}
2525

26-
const completeMatch = content.includes('</think>');
26+
if (incompleteThinkBracketMatch) {
27+
const cleanContent = content.split('[/THINK]')?.[1]?.trim();
28+
const thinkingContent = content.split('[THINK]')?.[1]?.trim();
2729

28-
if (completeMatch) {
2930
return {
30-
thinking: content.split('</think>')?.[0]?.trim(),
31-
cleanContent: content.split('</think>')?.[1]?.trim()
31+
cleanContent,
32+
thinking: thinkingContent
33+
};
34+
}
35+
36+
const completeThinkMatch = content.match(/<think>([\s\S]*?)<\/think>/);
37+
const completeThinkBracketMatch = content.match(/\[THINK\]([\s\S]*?)\[\/THINK\]/);
38+
39+
if (completeThinkMatch) {
40+
const thinkingContent = completeThinkMatch[1]?.trim() ?? '';
41+
const cleanContent = `${content.slice(0, completeThinkMatch.index ?? 0)}${content.slice(
42+
(completeThinkMatch.index ?? 0) + completeThinkMatch[0].length
43+
)}`.trim();
44+
45+
return {
46+
thinking: thinkingContent,
47+
cleanContent
48+
};
49+
}
50+
51+
if (completeThinkBracketMatch) {
52+
const thinkingContent = completeThinkBracketMatch[1]?.trim() ?? '';
53+
const cleanContent = `${content.slice(0, completeThinkBracketMatch.index ?? 0)}${content.slice(
54+
(completeThinkBracketMatch.index ?? 0) + completeThinkBracketMatch[0].length
55+
)}`.trim();
56+
57+
return {
58+
thinking: thinkingContent,
59+
cleanContent
3260
};
3361
}
3462

@@ -39,50 +67,75 @@ export function parseThinkingContent(content: string): {
3967
}
4068

4169
/**
42-
* Checks if content contains an opening <think> tag (for streaming)
70+
* Checks if content contains an opening thinking tag (for streaming)
71+
* Supports both <think> and [THINK] formats
4372
* @param content - The message content to check
44-
* @returns True if the content contains an opening <think> tag
73+
* @returns True if the content contains an opening thinking tag
4574
*/
4675
export function hasThinkingStart(content: string): boolean {
47-
return content.includes('<think>') || content.includes('<|channel|>analysis');
76+
return (
77+
content.includes('<think>') ||
78+
content.includes('[THINK]') ||
79+
content.includes('<|channel|>analysis')
80+
);
4881
}
4982

5083
/**
51-
* Checks if content contains a closing </think> tag (for streaming)
84+
* Checks if content contains a closing thinking tag (for streaming)
85+
* Supports both </think> and [/THINK] formats
5286
* @param content - The message content to check
53-
* @returns True if the content contains a closing </think> tag
87+
* @returns True if the content contains a closing thinking tag
5488
*/
5589
export function hasThinkingEnd(content: string): boolean {
56-
return content.includes('</think>');
90+
return content.includes('</think>') || content.includes('[/THINK]');
5791
}
5892

5993
/**
6094
* Extracts partial thinking content during streaming
61-
* Used when we have <think> but not yet </think>
95+
* Supports both <think> and [THINK] formats
96+
* Used when we have opening tag but not yet closing tag
6297
* @param content - The message content to extract partial thinking from
6398
* @returns An object containing the extracted partial thinking content and the remaining content
6499
*/
65100
export function extractPartialThinking(content: string): {
66101
thinking: string | null;
67102
remainingContent: string;
68103
} {
69-
const startIndex = content.indexOf('<think>');
70-
if (startIndex === -1) {
71-
return { thinking: null, remainingContent: content };
72-
}
104+
const thinkStartIndex = content.indexOf('<think>');
105+
const thinkEndIndex = content.indexOf('</think>');
73106

74-
const endIndex = content.indexOf('</think>');
75-
if (endIndex === -1) {
76-
// Still streaming thinking content
77-
const thinkingStart = startIndex + '<think>'.length;
78-
return {
79-
thinking: content.substring(thinkingStart),
80-
remainingContent: content.substring(0, startIndex)
81-
};
107+
const bracketStartIndex = content.indexOf('[THINK]');
108+
const bracketEndIndex = content.indexOf('[/THINK]');
109+
110+
const useThinkFormat =
111+
thinkStartIndex !== -1 && (bracketStartIndex === -1 || thinkStartIndex < bracketStartIndex);
112+
const useBracketFormat =
113+
bracketStartIndex !== -1 && (thinkStartIndex === -1 || bracketStartIndex < thinkStartIndex);
114+
115+
if (useThinkFormat) {
116+
if (thinkEndIndex === -1) {
117+
const thinkingStart = thinkStartIndex + '<think>'.length;
118+
119+
return {
120+
thinking: content.substring(thinkingStart),
121+
remainingContent: content.substring(0, thinkStartIndex)
122+
};
123+
}
124+
} else if (useBracketFormat) {
125+
if (bracketEndIndex === -1) {
126+
const thinkingStart = bracketStartIndex + '[THINK]'.length;
127+
128+
return {
129+
thinking: content.substring(thinkingStart),
130+
remainingContent: content.substring(0, bracketStartIndex)
131+
};
132+
}
133+
} else {
134+
return { thinking: null, remainingContent: content };
82135
}
83136

84-
// Complete thinking block found
85137
const parsed = parseThinkingContent(content);
138+
86139
return {
87140
thinking: parsed.thinking,
88141
remainingContent: parsed.cleanContent

‎tools/server/webui/src/stories/ChatMessage.stories.svelte‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,60 @@
5959
thinking: '',
6060
children: []
6161
});
62+
63+
// Message with <think> format thinking content
64+
const thinkTagMessage: DatabaseMessage = {
65+
id: '6',
66+
convId: 'conv-1',
67+
type: 'message',
68+
timestamp: Date.now() - 1000 * 60 * 2,
69+
role: 'assistant',
70+
content:
71+
"<think>\nLet me analyze this step by step:\n\n1. The user is asking about thinking formats\n2. I need to demonstrate the &lt;think&gt; tag format\n3. This content should be displayed in the thinking section\n4. The main response should be separate\n\nThis is a good example of reasoning content.\n</think>\n\nHere's my response after thinking through the problem. The thinking content above should be displayed separately from this main response content.",
72+
parent: '1',
73+
thinking: '',
74+
children: []
75+
};
76+
77+
// Message with [THINK] format thinking content
78+
const thinkBracketMessage: DatabaseMessage = {
79+
id: '7',
80+
convId: 'conv-1',
81+
type: 'message',
82+
timestamp: Date.now() - 1000 * 60 * 1,
83+
role: 'assistant',
84+
content:
85+
'[THINK]\nThis is the DeepSeek-style thinking format:\n\n- Using square brackets instead of angle brackets\n- Should work identically to the &lt;think&gt; format\n- Content parsing should extract this reasoning\n- Display should be the same as &lt;think&gt; format\n\nBoth formats should be supported seamlessly.\n[/THINK]\n\nThis is the main response content that comes after the [THINK] block. The reasoning above should be parsed and displayed in the thinking section.',
86+
parent: '1',
87+
thinking: '',
88+
children: []
89+
};
90+
91+
// Streaming message for <think> format
92+
let streamingThinkMessage = $state({
93+
id: '8',
94+
convId: 'conv-1',
95+
type: 'message',
96+
timestamp: 0, // No timestamp = streaming
97+
role: 'assistant',
98+
content: '',
99+
parent: '1',
100+
thinking: '',
101+
children: []
102+
});
103+
104+
// Streaming message for [THINK] format
105+
let streamingBracketMessage = $state({
106+
id: '9',
107+
convId: 'conv-1',
108+
type: 'message',
109+
timestamp: 0, // No timestamp = streaming
110+
role: 'assistant',
111+
content: '',
112+
parent: '1',
113+
thinking: '',
114+
children: []
115+
});
62116
</script>
63117

64118
<Story
@@ -144,3 +198,115 @@
144198
await new Promise(resolve => setTimeout(resolve, 100));
145199
}}
146200
/>
201+
202+
<Story
203+
name="ThinkTagFormat"
204+
args={{
205+
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
206+
message: thinkTagMessage
207+
}}
208+
/>
209+
210+
<Story
211+
name="ThinkBracketFormat"
212+
args={{
213+
class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
214+
message: thinkBracketMessage
215+
}}
216+
/>
217+
218+
<Story
219+
name="StreamingThinkTag"
220+
args={{
221+
message: streamingThinkMessage
222+
}}
223+
parameters={{
224+
test: {
225+
timeout: 30000
226+
}
227+
}}
228+
asChild
229+
play={async () => {
230+
// Phase 1: Stream <think> reasoning content
231+
const thinkingContent =
232+
'Let me work through this problem systematically:\n\n1. First, I need to understand what the user is asking\n2. Then I should consider different approaches\n3. I need to evaluate the pros and cons\n4. Finally, I should provide a clear recommendation\n\nThis step-by-step approach will ensure accuracy.';
233+
234+
let currentContent = '<think>\n';
235+
streamingThinkMessage.content = currentContent;
236+
237+
for (let i = 0; i < thinkingContent.length; i++) {
238+
currentContent += thinkingContent[i];
239+
streamingThinkMessage.content = currentContent;
240+
await new Promise((resolve) => setTimeout(resolve, 5));
241+
}
242+
243+
// Close the thinking block
244+
currentContent += '\n</think>\n\n';
245+
streamingThinkMessage.content = currentContent;
246+
await new Promise((resolve) => setTimeout(resolve, 200));
247+
248+
// Phase 2: Stream main response content
249+
const responseContent =
250+
"Based on my analysis above, here's the solution:\n\n**Key Points:**\n- The approach should be systematic\n- We need to consider all factors\n- Implementation should be step-by-step\n\nThis ensures the best possible outcome.";
251+
252+
for (let i = 0; i < responseContent.length; i++) {
253+
currentContent += responseContent[i];
254+
streamingThinkMessage.content = currentContent;
255+
await new Promise((resolve) => setTimeout(resolve, 10));
256+
}
257+
258+
streamingThinkMessage.timestamp = Date.now();
259+
}}
260+
>
261+
<div class="w-[56rem]">
262+
<ChatMessage message={streamingThinkMessage} />
263+
</div>
264+
</Story>
265+
266+
<Story
267+
name="StreamingThinkBracket"
268+
args={{
269+
message: streamingBracketMessage
270+
}}
271+
parameters={{
272+
test: {
273+
timeout: 30000
274+
}
275+
}}
276+
asChild
277+
play={async () => {
278+
// Phase 1: Stream [THINK] reasoning content
279+
const thinkingContent =
280+
'Using the DeepSeek format now:\n\n- This demonstrates the &#91;THINK&#93; bracket format\n- Should parse identically to &lt;think&gt; tags\n- The UI should display this in the thinking section\n- Main content should be separate\n\nBoth formats provide the same functionality.';
281+
282+
let currentContent = '[THINK]\n';
283+
streamingBracketMessage.content = currentContent;
284+
285+
for (let i = 0; i < thinkingContent.length; i++) {
286+
currentContent += thinkingContent[i];
287+
streamingBracketMessage.content = currentContent;
288+
await new Promise((resolve) => setTimeout(resolve, 5));
289+
}
290+
291+
// Close the thinking block
292+
currentContent += '\n[/THINK]\n\n';
293+
streamingBracketMessage.content = currentContent;
294+
await new Promise((resolve) => setTimeout(resolve, 200));
295+
296+
// Phase 2: Stream main response content
297+
const responseContent =
298+
"Here's my response after using the &#91;THINK&#93; format:\n\n**Observations:**\n- Both &lt;think&gt; and &#91;THINK&#93; formats work seamlessly\n- The parsing logic handles both cases\n- UI display is consistent across formats\n\nThis demonstrates the enhanced thinking content support.";
299+
300+
for (let i = 0; i < responseContent.length; i++) {
301+
currentContent += responseContent[i];
302+
streamingBracketMessage.content = currentContent;
303+
await new Promise((resolve) => setTimeout(resolve, 10));
304+
}
305+
306+
streamingBracketMessage.timestamp = Date.now();
307+
}}
308+
>
309+
<div class="w-[56rem]">
310+
<ChatMessage message={streamingBracketMessage} />
311+
</div>
312+
</Story>

0 commit comments

Comments
 (0)