Skip to content

phsl / new-api

Go to a project
Commit 30ef8786 by Apple\Apple
Options

🔖chore: Remove the handling of the MarkdownRender component and the <think> tag

parent 66927d05
Showing with 10 additions and 146 deletions
web/src/pages/Playground/Playground.js
...@@ -17,7 +17,6 @@ import { ...@@ -17,7 +17,6 @@ import {
TextArea, TextArea,
Typography, Typography,
Button, Button,
MarkdownRender,
Tag, Tag,
Tabs, Tabs,
TabPane, TabPane,
...@@ -313,33 +312,6 @@ const Playground = () => { ...@@ -313,33 +312,6 @@ const Playground = () => {
let content = choice.message?.content || ''; let content = choice.message?.content || '';
let reasoningContent = choice.message?.reasoning_content || ''; let reasoningContent = choice.message?.reasoning_content || '';
if (content.includes('<think>')) {
const thinkTagRegex = /<think>([\s\S]*?)<\/think>/g;
let thoughts = [];
let replyParts = [];
let lastIndex = 0;
let match;
thinkTagRegex.lastIndex = 0;
while ((match = thinkTagRegex.exec(content)) !== null) {
replyParts.push(content.substring(lastIndex, match.index));
thoughts.push(match[1]);
lastIndex = match.index + match[0].length;
}
replyParts.push(content.substring(lastIndex));
content = replyParts.join('');
if (thoughts.length > 0) {
if (reasoningContent) {
reasoningContent += '\n\n---\n\n' + thoughts.join('\n\n---\n\n');
} else {
reasoningContent = thoughts.join('\n\n---\n\n');
}
}
}
content = content.replace(/<\/?think>/g, '').trim();
setMessage((prevMessage) => { setMessage((prevMessage) => {
const newMessages = [...prevMessage]; const newMessages = [...prevMessage];
const lastMessage = newMessages[newMessages.length - 1]; const lastMessage = newMessages[newMessages.length - 1];
...@@ -633,23 +605,13 @@ const Playground = () => { ...@@ -633,23 +605,13 @@ const Playground = () => {
status: 'incomplete', status: 'incomplete',
}; };
} else if (type === 'content') { } else if (type === 'content') {
const shouldCollapseReasoning = !lastMessage.content && lastMessage.reasoningContent;
const newContent = (lastMessage.content || '') + textChunk; const newContent = (lastMessage.content || '') + textChunk;
let shouldCollapseFromThinkTag = false;
if (lastMessage.isReasoningExpanded && newContent.includes('</think>')) {
const thinkMatches = newContent.match(/<think>/g);
const thinkCloseMatches = newContent.match(/<\/think>/g);
if (thinkMatches && thinkCloseMatches && thinkCloseMatches.length >= thinkMatches.length) {
shouldCollapseFromThinkTag = true;
}
}
newMessage = { newMessage = {
...newMessage, ...newMessage,
content: newContent, content: newContent,
status: 'incomplete', status: 'incomplete',
isReasoningExpanded: (shouldCollapseReasoning || shouldCollapseFromThinkTag) ? false : lastMessage.isReasoningExpanded, isReasoningExpanded: lastMessage.isReasoningExpanded,
}; };
} }
} }
...@@ -801,57 +763,9 @@ const Playground = () => { ...@@ -801,57 +763,9 @@ const Playground = () => {
setMessage((prevMessage) => { setMessage((prevMessage) => {
const lastMessage = prevMessage[prevMessage.length - 1]; const lastMessage = prevMessage[prevMessage.length - 1];
if (lastMessage.status === 'loading' || lastMessage.status === 'incomplete') { if (lastMessage.status === 'loading' || lastMessage.status === 'incomplete') {
let currentContent = lastMessage.content || '';
let currentReasoningContent = lastMessage.reasoningContent || '';
if (currentContent.includes('<think>')) {
const thinkTagRegex = /<think>([\s\S]*?)<\/think>/g;
let match;
let thoughtsFromPairedTags = [];
let replyParts = [];
let lastIndex = 0;
while ((match = thinkTagRegex.exec(currentContent)) !== null) {
replyParts.push(currentContent.substring(lastIndex, match.index));
thoughtsFromPairedTags.push(match[1]);
lastIndex = match.index + match[0].length;
}
replyParts.push(currentContent.substring(lastIndex));
if (thoughtsFromPairedTags.length > 0) {
const pairedThoughtsStr = thoughtsFromPairedTags.join('\n\n---\n\n');
if (currentReasoningContent) {
currentReasoningContent += '\n\n---\n\n' + pairedThoughtsStr;
} else {
currentReasoningContent = pairedThoughtsStr;
}
}
currentContent = replyParts.join('');
}
const lastOpenThinkIndex = currentContent.lastIndexOf('<think>');
if (lastOpenThinkIndex !== -1) {
const fragmentAfterLastOpen = currentContent.substring(lastOpenThinkIndex);
if (!fragmentAfterLastOpen.includes('</think>')) {
const unclosedThought = fragmentAfterLastOpen.substring('<think>'.length).trim();
if (unclosedThought) {
if (currentReasoningContent) {
currentReasoningContent += '\n\n---\n\n' + unclosedThought;
} else {
currentReasoningContent = unclosedThought;
}
}
currentContent = currentContent.substring(0, lastOpenThinkIndex);
}
}
currentContent = currentContent.replace(/<\/?think>/g, '').trim();
return [...prevMessage.slice(0, -1), { return [...prevMessage.slice(0, -1), {
...lastMessage, ...lastMessage,
status: 'complete', status: 'complete',
reasoningContent: currentReasoningContent || null,
content: currentContent,
isReasoningExpanded: false isReasoningExpanded: false
}]; }];
} }
...@@ -1008,65 +922,13 @@ const Playground = () => { ...@@ -1008,65 +922,13 @@ const Playground = () => {
const isThinkingStatus = message.status === 'loading' || message.status === 'incomplete'; const isThinkingStatus = message.status === 'loading' || message.status === 'incomplete';
let currentExtractedThinkingContent = null; let currentExtractedThinkingContent = null;
let currentDisplayableFinalContent = message.content || ""; let currentDisplayableFinalContent = message.content || "";
let thinkingSource = null;
if (message.role === 'assistant') { if (message.role === 'assistant') {
let baseContentForDisplay = message.content || "";
let combinedThinkingContent = "";
if (message.reasoningContent) { if (message.reasoningContent) {
combinedThinkingContent = message.reasoningContent; currentExtractedThinkingContent = message.reasoningContent;
thinkingSource = 'reasoningContent';
}
if (baseContentForDisplay.includes('<think>')) {
const thinkTagRegex = /<think>([\s\S]*?)<\/think>/g;
let match;
let thoughtsFromPairedTags = [];
let replyParts = [];
let lastIndex = 0;
while ((match = thinkTagRegex.exec(baseContentForDisplay)) !== null) {
replyParts.push(baseContentForDisplay.substring(lastIndex, match.index));
thoughtsFromPairedTags.push(match[1]);
lastIndex = match.index + match[0].length;
}
replyParts.push(baseContentForDisplay.substring(lastIndex));
if (thoughtsFromPairedTags.length > 0) {
const pairedThoughtsStr = thoughtsFromPairedTags.join('\n\n---\n\n');
if (combinedThinkingContent) {
combinedThinkingContent += '\n\n---\n\n' + pairedThoughtsStr;
} else {
combinedThinkingContent = pairedThoughtsStr;
}
thinkingSource = thinkingSource ? thinkingSource + ' & <think> tags' : '<think> tags';
} }
baseContentForDisplay = replyParts.join(''); currentDisplayableFinalContent = message.content || "";
}
if (isThinkingStatus) {
const lastOpenThinkIndex = baseContentForDisplay.lastIndexOf('<think>');
if (lastOpenThinkIndex !== -1) {
const fragmentAfterLastOpen = baseContentForDisplay.substring(lastOpenThinkIndex);
if (!fragmentAfterLastOpen.includes('</think>')) {
const unclosedThought = fragmentAfterLastOpen.substring('<think>'.length).trim();
if (unclosedThought) {
if (combinedThinkingContent) {
combinedThinkingContent += '\n\n---\n\n' + unclosedThought;
} else {
combinedThinkingContent = unclosedThought;
}
thinkingSource = thinkingSource ? thinkingSource + ' + streaming <think>' : 'streaming <think>';
}
baseContentForDisplay = baseContentForDisplay.substring(0, lastOpenThinkIndex);
}
}
}
currentExtractedThinkingContent = combinedThinkingContent || null;
currentDisplayableFinalContent = baseContentForDisplay.replace(/<\/?think>/g, '').trim();
} }
const headerText = isThinkingStatus ? t('思考中...') : t('思考过程'); const headerText = isThinkingStatus ? t('思考中...') : t('思考过程');
...@@ -1110,11 +972,9 @@ const Playground = () => { ...@@ -1110,11 +972,9 @@ const Playground = () => {
<Typography.Text strong className="text-gray-800 text-base"> <Typography.Text strong className="text-gray-800 text-base">
{headerText} {headerText}
</Typography.Text> </Typography.Text>
{thinkingSource && (
<Typography.Text className="text-gray-500 text-xs mt-0.5"> <Typography.Text className="text-gray-500 text-xs mt-0.5">
来源: {thinkingSource} 来源: reasoning_content
</Typography.Text> </Typography.Text>
)}
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
...@@ -1144,7 +1004,9 @@ const Playground = () => { ...@@ -1144,7 +1004,9 @@ const Playground = () => {
<div className="p-5 pt-4"> <div className="p-5 pt-4">
<div className="bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-inner overflow-x-auto max-h-50 overflow-y-auto"> <div className="bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-inner overflow-x-auto max-h-50 overflow-y-auto">
<div className="prose prose-sm prose-purple max-w-none"> <div className="prose prose-sm prose-purple max-w-none">
<MarkdownRender raw={finalExtractedThinkingContent} /> <Typography.Paragraph className="whitespace-pre-wrap">
{finalExtractedThinkingContent}
</Typography.Paragraph>
</div> </div>
</div> </div>
</div> </div>
...@@ -1155,7 +1017,9 @@ const Playground = () => { ...@@ -1155,7 +1017,9 @@ const Playground = () => {
{(finalDisplayableFinalContent && finalDisplayableFinalContent.trim() !== '') && ( {(finalDisplayableFinalContent && finalDisplayableFinalContent.trim() !== '') && (
<div className="prose prose-sm prose-gray max-w-none overflow-x-auto"> <div className="prose prose-sm prose-gray max-w-none overflow-x-auto">
<MarkdownRender raw={finalDisplayableFinalContent} /> <Typography.Paragraph className="whitespace-pre-wrap">
{finalDisplayableFinalContent}
</Typography.Paragraph>
</div> </div>
)} )}
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment