-
- {props.children.replace('', '\n\n\n\n')}
-
+
+ {reasoning ? (
+
+ ) : null}
+
)
}
MarkdownRender.propTypes = {
- ...ReactMarkdown.propTypes,
+ children: PropTypes.string.isRequired,
+ done: PropTypes.bool,
+ reasoning: PropTypes.string,
}
export default memo(MarkdownRender)
diff --git a/src/components/MarkdownRender/math-plugin-without-katex.mjs b/src/components/MarkdownRender/math-plugin-without-katex.mjs
new file mode 100644
index 000000000..76abf9804
--- /dev/null
+++ b/src/components/MarkdownRender/math-plugin-without-katex.mjs
@@ -0,0 +1,2 @@
+/** The minimal build ships without KaTeX, so maths stays literal text. */
+export const mathPlugin = () => undefined
diff --git a/src/components/MarkdownRender/math-plugin.mjs b/src/components/MarkdownRender/math-plugin.mjs
new file mode 100644
index 000000000..8f34e7265
--- /dev/null
+++ b/src/components/MarkdownRender/math-plugin.mjs
@@ -0,0 +1,4 @@
+import { katexPlugin } from '@aeven-ai/hypermarkdown/plugins/math'
+
+/** The minimal build swaps this module for math-plugin-without-katex.mjs; see build.mjs. */
+export const mathPlugin = katexPlugin
diff --git a/src/components/MarkdownRender/mykatex-without-katex.css b/src/components/MarkdownRender/mykatex-without-katex.css
new file mode 100644
index 000000000..a47a190c5
--- /dev/null
+++ b/src/components/MarkdownRender/mykatex-without-katex.css
@@ -0,0 +1 @@
+/* The minimal build swaps out mykatex.min.css; see build.mjs. */
diff --git a/src/components/MarkdownRender/renderer-config.mjs b/src/components/MarkdownRender/renderer-config.mjs
new file mode 100644
index 000000000..9cd58edbd
--- /dev/null
+++ b/src/components/MarkdownRender/renderer-config.mjs
@@ -0,0 +1,18 @@
+import { highlightPlugin } from '@aeven-ai/hypermarkdown/plugins/code'
+import { Hyperlink } from './Hyperlink'
+import { highlightOptions } from './highlight-options.mjs'
+import { mathPlugin } from './math-plugin.mjs'
+
+// The answer and the thinking share one pipeline, so both renderers parse the same way.
+// rehype-react keys elements by component identity, so these maps and plugin instances have
+// to stay stable across renders or every block remounts.
+export const PLUGINS = { math: mathPlugin(), code: highlightPlugin(highlightOptions) }
+export const COMPONENTS = { a: Hyperlink }
+// Fullscreen and the HTML preview expect the host to hide its own chrome around them, which
+// this card does not do; the copy button is the part that works on its own.
+export const CONTROLS = {
+ code: { fullscreen: false, preview: false },
+ table: { fullscreen: false },
+}
+// The loading placeholder is injected as HTML and styled through this class.
+export const ALLOWED_TAGS = { p: ['className'] }
diff --git a/src/components/MarkdownRender/special-tags.mjs b/src/components/MarkdownRender/special-tags.mjs
new file mode 100644
index 000000000..7c7012c5b
--- /dev/null
+++ b/src/components/MarkdownRender/special-tags.mjs
@@ -0,0 +1,71 @@
+// The renderer treats all three names as reasoning tags, so one source keeps the pattern in
+// sync.
+const REASONING_TAG_NAME = 'think|thinking|reasoning'
+const REASONING_TAG_PATTERN = new RegExp(`]*>`, 'gi')
+const FENCE_PATTERN = /^ {0,3}(?:```+|~~~+)/
+
+function escapeTags(text) {
+ // Only the leading angle bracket is escaped, so the tag still reads as "
".
+ return text.replace(REASONING_TAG_PATTERN, (tag) => `<${tag.slice(1)}`)
+}
+
+function escapeTagsOutsideInlineCode(line) {
+ let result = ''
+ let index = 0
+ while (index < line.length) {
+ const tickIndex = line.indexOf('`', index)
+ if (tickIndex === -1) {
+ result += escapeTags(line.slice(index))
+ break
+ }
+ const ticks = /^`+/.exec(line.slice(tickIndex))[0]
+ const closeIndex = line.indexOf(ticks, tickIndex + ticks.length)
+ if (closeIndex === -1) {
+ result += escapeTags(line.slice(index))
+ break
+ }
+ result += escapeTags(line.slice(index, tickIndex))
+ result += line.slice(tickIndex, closeIndex + ticks.length)
+ index = closeIndex + ticks.length
+ }
+ return result
+}
+
+function escapeTagsOutsideCode(text) {
+ let inFence = false
+ return text
+ .split(/(?<=\n)/)
+ .map((line) => {
+ const isFenceLine = FENCE_PATTERN.test(line)
+ if (inFence) {
+ if (isFenceLine) inFence = false
+ return line
+ }
+ if (isFenceLine) {
+ inFence = true
+ return line
+ }
+ return escapeTagsOutsideInlineCode(line)
+ })
+ .join('')
+}
+
+/**
+ * Show ``-style tags as literal text.
+ *
+ * HyperMarkdown treats them as markup: a leading one becomes a reasoning block, and any other
+ * one is stripped out of the answer. That is wrong for text the user typed, and for prose that
+ * merely mentions a tag.
+ *
+ * A reasoning model's thinking never reaches this: it is rendered from its own field, so this
+ * only has to neutralise tags left in ordinary content. Fenced code and inline code are left
+ * alone -- their content is literal text already, and the streaming renderer does not look for
+ * a reasoning tag inside them.
+ *
+ * @param {string} text
+ * @returns {string}
+ */
+export function escapeReasoningTags(text) {
+ if (typeof text !== 'string' || !text.includes('<')) return text
+ return escapeTagsOutsideCode(text)
+}
diff --git a/src/components/MarkdownRender/stream-delta.mjs b/src/components/MarkdownRender/stream-delta.mjs
new file mode 100644
index 000000000..5217d5d01
--- /dev/null
+++ b/src/components/MarkdownRender/stream-delta.mjs
@@ -0,0 +1,32 @@
+/**
+ * Tracks what has already been handed to a streaming renderer, so a growing snapshot can
+ * be fed to it as deltas. Returns null when there is nothing to do.
+ * @returns {{ next: (content: string, done: boolean) => ({reset: boolean, write: string, finalize: boolean} | null) }}
+ */
+export function createStreamDelta() {
+ let written = null
+ let finalized = false
+
+ return {
+ next(content, done) {
+ // The first snapshot, and one that no longer extends what was written, both start a
+ // new render rather than growing the previous one.
+ if (written === null || !content.startsWith(written)) {
+ written = content
+ finalized = done
+ return { reset: true, write: content, finalize: done }
+ }
+ const delta = content.slice(written.length)
+ if (delta) {
+ written = content
+ finalized = done
+ return { reset: false, write: delta, finalize: done }
+ }
+ if (done && !finalized) {
+ finalized = true
+ return { reset: false, write: '', finalize: true }
+ }
+ return null
+ },
+ }
+}
diff --git a/src/components/MarkdownRender/waiting-placeholder.mjs b/src/components/MarkdownRender/waiting-placeholder.mjs
new file mode 100644
index 000000000..6e3e7c2aa
--- /dev/null
+++ b/src/components/MarkdownRender/waiting-placeholder.mjs
@@ -0,0 +1,12 @@
+/**
+ * The "waiting for response" placeholder the card shows until the first answer chunk arrives.
+ *
+ * Both the card, which writes it, and the streaming renderer, which must not mistake it for
+ * answer text, build it from this one template, so the two can never drift apart.
+ *
+ * @param {(key: string) => string} t translation function
+ * @returns {string}
+ */
+export function waitingPlaceholder(t) {
+ return `${t('Waiting for response...')}
`
+}
diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx
index c49164a8b..ce706f5e1 100644
--- a/src/content-script/index.jsx
+++ b/src/content-script/index.jsx
@@ -1,4 +1,9 @@
import './styles.scss'
+// The Markdown renderer lives in the shared chunk, so its stylesheets are pulled in here
+// instead; without this the minimal variants would emit them into an unshipped chunk.
+import '@aeven-ai/hypermarkdown/styles.css'
+import 'tippy.js/dist/tippy.css'
+import '../components/MarkdownRender/mykatex.min.css'
import { unmountComponentAtNode } from 'react-dom'
import { render } from 'preact'
import DecisionCard from '../components/DecisionCard'
diff --git a/src/content-script/styles.scss b/src/content-script/styles.scss
index be52d8c2c..62182109f 100644
--- a/src/content-script/styles.scss
+++ b/src/content-script/styles.scss
@@ -146,6 +146,44 @@
word-wrap: break-word;
}
+ // HyperMarkdown draws list markers through `li::before` rules that match any item with
+ // an ancestor list of that kind, and through a counter that ignores the `start` attribute
+ // the renderer emits for lists that do not begin at 1. Bullets nested in a numbered list
+ // therefore come out numbered, and a list that resumes at 3 comes out as "1. 2." (or
+ // "1.1." once the native marker is added on top). Let the browser draw the markers
+ // instead: they follow the list type, honour `start`, and survive re-rendering.
+ .markdown-body .hypermarkdown ol,
+ .markdown-body .hypermarkdown ul {
+ list-style-position: outside !important;
+ padding-left: 2em !important;
+ }
+
+ .markdown-body .hypermarkdown ol {
+ list-style-type: decimal !important;
+ }
+
+ .markdown-body .hypermarkdown ul {
+ list-style-type: disc !important;
+ }
+
+ .markdown-body .hypermarkdown li {
+ padding-left: 0 !important;
+ }
+
+ .markdown-body .hypermarkdown li::before {
+ content: none !important;
+ }
+
+ // The reasoning block renders through its own renderer so that no tag in the answer can
+ // open or close it. That renderer is another `.hypermarkdown` root, which would reset the
+ // small, muted type the reasoning block asks for; let the block's own type win instead.
+ .markdown-body .reasoning-content .hypermarkdown {
+ font-size: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ color: inherit;
+ }
+
.markdown-body .octicon {
display: inline-block;
fill: currentColor;
diff --git a/src/services/apis/azure-openai-api.mjs b/src/services/apis/azure-openai-api.mjs
index f5e1b4b6d..cf892ba10 100644
--- a/src/services/apis/azure-openai-api.mjs
+++ b/src/services/apis/azure-openai-api.mjs
@@ -1,94 +1,33 @@
import { getUserConfig } from '../../config/index.mjs'
-import { pushRecord, setAbortController } from './shared.mjs'
-import { getConversationPairs } from '../../utils/get-conversation-pairs.mjs'
-import { fetchSSE } from '../../utils/fetch-sse.mjs'
-import { isEmpty } from 'lodash-es'
import { getModelValue } from '../../utils/model-name-convert.mjs'
-import { getTemperatureParams } from './temperature-params.mjs'
+import { generateAnswersWithOpenAICompatible } from './openai-compatible-core.mjs'
/**
+ * Azure OpenAI wraps the same chat-completions payload as the other OpenAI-compatible
+ * providers, so it only has to describe the deployment URL and the `api-key` header; the
+ * shared core owns the request body and the stream parsing.
+ *
* @param {Runtime.Port} port
* @param {string} question
* @param {Session} session
*/
export async function generateAnswersWithAzureOpenaiApi(port, question, session) {
- const { controller, messageListener, disconnectListener } = setAbortController(port)
const config = await getUserConfig()
- let deploymentName = getModelValue(session)
- if (!deploymentName) deploymentName = config.azureDeploymentName
+ const deploymentName = getModelValue(session) || config.azureDeploymentName
+ const baseUrl = config.azureEndpoint.replace(/\/$/, '')
- const prompt = getConversationPairs(
- session.conversationRecords.slice(-config.maxConversationContextLength),
- false,
- )
- prompt.push({ role: 'user', content: question })
-
- let answer = ''
- await fetchSSE(
- `${config.azureEndpoint.replace(
- /\/$/,
- '',
- )}/openai/deployments/${deploymentName}/chat/completions?api-version=2024-02-01`,
- {
- method: 'POST',
- signal: controller.signal,
- headers: {
- 'Content-Type': 'application/json',
- 'api-key': config.azureApiKey,
- },
- body: JSON.stringify({
- messages: prompt,
- stream: true,
- max_tokens: config.maxResponseTokenLength,
- // Azure deployment names are opaque aliases, not canonical model identifiers.
- ...getTemperatureParams(config),
- }),
- onMessage(message) {
- console.debug('sse message', message)
- let data
- try {
- data = JSON.parse(message)
- } catch (error) {
- console.debug('json error', error)
- return
- }
- if (
- data.choices &&
- data.choices.length > 0 &&
- data.choices[0] &&
- data.choices[0].delta &&
- 'content' in data.choices[0].delta
- ) {
- answer += data.choices[0].delta.content
- port.postMessage({ answer: answer, done: false, session: null })
- }
-
- if (data.choices && data.choices.length > 0 && data.choices[0]?.finish_reason) {
- pushRecord(session, question, answer)
- console.debug('conversation history', { content: session.conversationRecords })
- port.postMessage({ answer: null, done: true, session: session })
- }
- },
- async onStart() {},
- async onEnd(aborted) {
- try {
- if (!aborted) {
- port.postMessage({ done: true })
- }
- } finally {
- port.onMessage.removeListener(messageListener)
- port.onDisconnect.removeListener(disconnectListener)
- }
- },
- async onError(resp) {
- port.onMessage.removeListener(messageListener)
- port.onDisconnect.removeListener(disconnectListener)
- if (resp instanceof Error) throw resp
- const error = await resp.json().catch(() => ({}))
- throw new Error(
- !isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`,
- )
- },
- },
- )
+ await generateAnswersWithOpenAICompatible({
+ port,
+ question,
+ session,
+ endpointType: 'chat',
+ requestUrl: `${baseUrl}/openai/deployments/${deploymentName}/chat/completions?api-version=2024-02-01`,
+ // The deployment is in the URL and the key rides in a header, so no model and no bearer
+ // token are sent. The empty model also keeps the temperature allow-list from treating an
+ // opaque deployment alias as a canonical model id.
+ model: '',
+ apiKey: '',
+ config,
+ extraHeaders: { 'api-key': config.azureApiKey },
+ })
}
diff --git a/src/services/apis/chatgpt-web.mjs b/src/services/apis/chatgpt-web.mjs
index 37f63d518..4a8777bda 100644
--- a/src/services/apis/chatgpt-web.mjs
+++ b/src/services/apis/chatgpt-web.mjs
@@ -1,9 +1,8 @@
// web version
import { fetchSSE } from '../../utils/fetch-sse.mjs'
-import { isEmpty } from 'lodash-es'
import { getUserConfig, Models } from '../../config/index.mjs'
-import { pushRecord, setAbortController } from './shared.mjs'
+import { createApiResponseError, pushRecord, setAbortController } from './shared.mjs'
import Browser from 'webextension-polyfill'
import { v4 as uuidv4 } from 'uuid'
import { t } from 'i18next'
@@ -431,10 +430,7 @@ export async function generateAnswersWithChatgptWebApi(port, question, session,
if (resp.status === 403) {
throw new Error('CLOUDFLARE')
}
- const error = await resp.json().catch(() => ({}))
- throw new Error(
- !isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`,
- )
+ throw await createApiResponseError(resp)
},
})
} finally {
diff --git a/src/services/apis/claude-api.mjs b/src/services/apis/claude-api.mjs
index 5d298877a..ad7fa413a 100644
--- a/src/services/apis/claude-api.mjs
+++ b/src/services/apis/claude-api.mjs
@@ -1,7 +1,11 @@
import { getUserConfig } from '../../config/index.mjs'
-import { pushRecord, setAbortController } from './shared.mjs'
+import {
+ createApiResponseError,
+ parseJsonMessage,
+ pushRecord,
+ setAbortController,
+} from './shared.mjs'
import { FETCH_RESPONSE_STREAM_FAILED, fetchSSE } from '../../utils/fetch-sse.mjs'
-import { isEmpty } from 'lodash-es'
import { getConversationPairs } from '../../utils/get-conversation-pairs.mjs'
import { getModelValue } from '../../utils/model-name-convert.mjs'
import { getTemperatureParams } from './temperature-params.mjs'
@@ -39,6 +43,7 @@ export async function generateAnswersWithClaudeApi(port, question, session) {
if (thinking) body.thinking = thinking
let answer = ''
+ let reasoning = ''
let stopReason = ''
let completionError
let wasAborted = false
@@ -56,13 +61,8 @@ export async function generateAnswersWithClaudeApi(port, question, session) {
onMessage(message) {
console.debug('sse message', message)
- let data
- try {
- data = JSON.parse(message)
- } catch (error) {
- console.debug('json error', error)
- return
- }
+ const data = parseJsonMessage(message)
+ if (data === undefined) return
if (data?.type === 'error') {
controller.abort()
const error = new Error(JSON.stringify(data))
@@ -102,6 +102,14 @@ export async function generateAnswersWithClaudeApi(port, question, session) {
return
}
+ // Extended thinking arrives as its own delta type. It is shown as reasoning and never
+ // recorded as the answer, exactly like the reasoning field of an OpenAI-compatible API.
+ const thinkingDelta = data?.delta?.thinking
+ if (typeof thinkingDelta === 'string' && thinkingDelta) {
+ reasoning += thinkingDelta
+ port.postMessage({ reasoning, done: false, session: null })
+ }
+
const delta = data?.delta?.text
if (delta) {
answer += delta
@@ -121,8 +129,7 @@ export async function generateAnswersWithClaudeApi(port, question, session) {
port.onMessage.removeListener(messageListener)
port.onDisconnect.removeListener(disconnectListener)
if (resp instanceof Error) throw resp
- const error = await resp.json().catch(() => ({}))
- throw new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`)
+ throw await createApiResponseError(resp)
},
}).catch((error) => error)
if (wasAborted) return
diff --git a/src/services/apis/moonshot-web.mjs b/src/services/apis/moonshot-web.mjs
index 2f2bfdd6d..e1d9cbebc 100644
--- a/src/services/apis/moonshot-web.mjs
+++ b/src/services/apis/moonshot-web.mjs
@@ -1,7 +1,6 @@
-import { pushRecord, setAbortController } from './shared.mjs'
+import { createApiResponseError, pushRecord, setAbortController } from './shared.mjs'
import { setUserConfig } from '../../config/index.mjs'
import { fetchSSE } from '../../utils/fetch-sse.mjs'
-import { isEmpty } from 'lodash-es'
import { getModelValue } from '../../utils/model-name-convert.mjs'
export class MoonshotWeb {
@@ -442,10 +441,7 @@ export class Conversation {
reject(resp)
return
}
- const error = await resp.json().catch(() => ({}))
- reject(
- new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`),
- )
+ reject(await createApiResponseError(resp))
},
})
return returnPromise
diff --git a/src/services/apis/openai-compatible-core.mjs b/src/services/apis/openai-compatible-core.mjs
index 02dfe4a81..92bb7da56 100644
--- a/src/services/apis/openai-compatible-core.mjs
+++ b/src/services/apis/openai-compatible-core.mjs
@@ -1,7 +1,12 @@
import { fetchSSE } from '../../utils/fetch-sse.mjs'
import { getConversationPairs } from '../../utils/get-conversation-pairs.mjs'
-import { isEmpty } from 'lodash-es'
-import { getCompletionPromptBase, pushRecord, setAbortController } from './shared.mjs'
+import {
+ createApiResponseError,
+ getCompletionPromptBase,
+ parseJsonMessage,
+ pushRecord,
+ setAbortController,
+} from './shared.mjs'
import { getChatCompletionsTokenParams } from './openai-token-params.mjs'
import { getTemperatureParams } from './temperature-params.mjs'
@@ -14,20 +19,46 @@ function buildHeaders(apiKey, extraHeaders = {}) {
return headers
}
-function buildMessageAnswer(answer, data, allowLegacyResponseField) {
+/**
+ * The answer carried by one response payload. Chat completions and legacy completions put
+ * the text in different places, and content that is not a plain string is ignored rather
+ * than coerced, so a stray object can never reach the card.
+ */
+function appendAnswerChunk(answer, data, allowLegacyResponseField) {
if (allowLegacyResponseField && typeof data?.response === 'string' && data.response) {
return data.response
}
- const delta = data?.choices?.[0]?.delta?.content
- const content = data?.choices?.[0]?.message?.content
- const text = data?.choices?.[0]?.text
+ const choice = data?.choices?.[0]
+ const delta = choice?.delta?.content
if (typeof delta === 'string') return answer + delta
+
+ // A non-streaming body, or a provider that sends the full message, replaces the answer.
+ const content = choice?.message?.content
if (typeof content === 'string' && content) return content
+
+ const text = choice?.text
if (typeof text === 'string' && text) return answer + text
+
return answer
}
+/**
+ * The thinking a reasoning model keeps out of its content: DeepSeek's `reasoning_content`,
+ * OpenRouter-style `reasoning`, or a whole non-streaming message. It is read verbatim, so
+ * nothing is parsed out of, or into, the answer.
+ */
+function readReasoningChunk(data) {
+ const choice = data?.choices?.[0]
+ const delta = choice?.delta?.reasoning_content ?? choice?.delta?.reasoning
+ if (typeof delta === 'string' && delta) return { text: delta, replace: false }
+
+ const message = choice?.message?.reasoning_content ?? choice?.message?.reasoning
+ if (typeof message === 'string' && message) return { text: message, replace: true }
+
+ return null
+}
+
function hasFinished(data) {
return Boolean(data?.choices?.[0]?.finish_reason)
}
@@ -76,6 +107,9 @@ export async function generateAnswersWithOpenAICompatible({
session.conversationRecords = conversationRecords
const safeExtraBody = { ...extraBody }
delete safeExtraBody.temperature
+ // Azure deployments are addressed by the URL, not by the body, so an empty model means
+ // "send none" rather than "send an empty string".
+ const modelParam = model ? { model } : {}
if (endpointType === 'completion') {
const prompt =
(await getCompletionPromptBase()) +
@@ -83,7 +117,7 @@ export async function generateAnswersWithOpenAICompatible({
`Human: ${question}\nAI: `
requestBody = {
prompt,
- model,
+ ...modelParam,
stream: true,
max_tokens: config.maxResponseTokenLength,
...getTemperatureParams(config, model),
@@ -106,7 +140,7 @@ export async function generateAnswersWithOpenAICompatible({
delete safeExtraBody[conflictingTokenParamKey]
requestBody = {
messages,
- model,
+ ...modelParam,
stream: true,
...tokenParams,
...getTemperatureParams(config, model),
@@ -115,11 +149,32 @@ export async function generateAnswersWithOpenAICompatible({
}
let answer = ''
+ let reasoning = ''
+ let postedAnswer = ''
+ let postedReasoning = ''
let finished = false
+
+ // The thinking is whatever the reasoning field carried; the content channel is the answer,
+ // verbatim. Nothing is parsed out of the answer, so a model or a reader that writes a
+ // "" tag is writing text, and the renderer shows it as such.
+ const postStreamText = () => {
+ if (answer !== postedAnswer) {
+ postedAnswer = answer
+ port.postMessage({ answer, done: false, session: null })
+ }
+ if (reasoning && reasoning !== postedReasoning) {
+ postedReasoning = reasoning
+ port.postMessage({ reasoning, done: false, session: null })
+ }
+ }
+
const finish = () => {
if (finished) return
finished = true
- pushRecord(session, question, answer)
+ // A turn that was nothing but thinking has no answer to record; keeping it out of the
+ // records is what stops the model from being sent its own unfinished reasoning back as
+ // context. A plain empty answer is still recorded, as it always has been.
+ if (answer || !reasoning) pushRecord(session, question, answer)
port.postMessage({ answer: null, done: true, session: session })
}
@@ -134,16 +189,17 @@ export async function generateAnswersWithOpenAICompatible({
finish()
return
}
- let data
- try {
- data = JSON.parse(message)
- } catch (error) {
- console.debug('json error', error)
- return
- }
+ const data = parseJsonMessage(message)
+ if (data === undefined) return
- answer = buildMessageAnswer(answer, data, allowLegacyResponseField)
- port.postMessage({ answer: answer, done: false, session: null })
+ const reasoningChunk = readReasoningChunk(data)
+ if (reasoningChunk) {
+ // A delta grows the thinking; a full message that replaces the content replaces it too.
+ reasoning = reasoningChunk.replace ? reasoningChunk.text : reasoning + reasoningChunk.text
+ }
+ answer = appendAnswerChunk(answer, data, allowLegacyResponseField)
+ // A chunk can carry reasoning only; an unchanged answer is not posted again.
+ postStreamText()
if (hasFinished(data)) {
finish()
@@ -183,8 +239,7 @@ export async function generateAnswersWithOpenAICompatible({
port.onMessage.removeListener(messageListener)
port.onDisconnect.removeListener(disconnectListener)
if (resp instanceof Error) throw resp
- const error = await resp.json().catch(() => ({}))
- throw new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`)
+ throw await createApiResponseError(resp)
},
})
}
diff --git a/src/services/apis/shared.mjs b/src/services/apis/shared.mjs
index a425305f1..9b5a04c01 100644
--- a/src/services/apis/shared.mjs
+++ b/src/services/apis/shared.mjs
@@ -1,3 +1,5 @@
+import { isEmpty } from 'lodash-es'
+
export const getChatSystemPromptBase = async () => {
return `You are a helpful, creative, clever, and very friendly assistant. You are familiar with various languages in the world.`
}
@@ -83,3 +85,31 @@ export function pushRecord(session, question, answer) {
if (session.isRetry && lastRecord && lastRecord.question === question) lastRecord.answer = answer
else session.conversationRecords.push({ question: question, answer: answer })
}
+
+/**
+ * The user-facing error for a non-ok HTTP response: the provider's JSON body when there is
+ * one, and the status line otherwise. Every transport reports failures the same way.
+ *
+ * @param {Response} resp
+ * @returns {Promise}
+ */
+export async function createApiResponseError(resp) {
+ const error = await resp.json().catch(() => ({}))
+ return new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`)
+}
+
+/**
+ * Decode one SSE payload. A line that is not JSON is logged and dropped, which is how a
+ * stray comment or keep-alive is ignored.
+ *
+ * @param {string} message
+ * @returns {any} the decoded payload, or undefined when it was not JSON
+ */
+export function parseJsonMessage(message) {
+ try {
+ return JSON.parse(message)
+ } catch (error) {
+ console.debug('json error', error)
+ return undefined
+ }
+}
diff --git a/src/services/apis/waylaidwanderer-api.mjs b/src/services/apis/waylaidwanderer-api.mjs
index a07cdf1bf..451ea04f4 100644
--- a/src/services/apis/waylaidwanderer-api.mjs
+++ b/src/services/apis/waylaidwanderer-api.mjs
@@ -1,7 +1,11 @@
-import { pushRecord, setAbortController } from './shared.mjs'
+import {
+ createApiResponseError,
+ parseJsonMessage,
+ pushRecord,
+ setAbortController,
+} from './shared.mjs'
import { getUserConfig } from '../../config/index.mjs'
import { fetchSSE } from '../../utils/fetch-sse.mjs'
-import { isEmpty } from 'lodash-es'
/**
* @param {Runtime.Port} port
@@ -42,13 +46,8 @@ export async function generateAnswersWithWaylaidwandererApi(port, question, sess
port.postMessage({ answer: null, done: true, session: session })
return
}
- let data
- try {
- data = JSON.parse(message)
- } catch (error) {
- console.debug('json error', error)
- return
- }
+ const data = parseJsonMessage(message)
+ if (data === undefined) return
if (data.conversationId) session.conversationId = data.conversationId
if (data.parentMessageId) session.parentMessageId = data.parentMessageId
if (data.encryptedConversationSignature)
@@ -77,8 +76,7 @@ export async function generateAnswersWithWaylaidwandererApi(port, question, sess
port.onMessage.removeListener(messageListener)
port.onDisconnect.removeListener(disconnectListener)
if (resp instanceof Error) throw resp
- const error = await resp.json().catch(() => ({}))
- throw new Error(!isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`)
+ throw await createApiResponseError(resp)
},
})
}
diff --git a/src/utils/change-children-font-size.mjs b/src/utils/change-children-font-size.mjs
deleted file mode 100644
index b65f236b9..000000000
--- a/src/utils/change-children-font-size.mjs
+++ /dev/null
@@ -1,10 +0,0 @@
-export function changeChildrenFontSize(element, size) {
- try {
- element.style.fontSize = size
- } catch {
- /* empty */
- }
- for (let i = 0; i < element.childNodes.length; i++) {
- changeChildrenFontSize(element.childNodes[i], size)
- }
-}
diff --git a/src/utils/index.mjs b/src/utils/index.mjs
index ef82e9846..f0e5bb4c5 100644
--- a/src/utils/index.mjs
+++ b/src/utils/index.mjs
@@ -1,4 +1,3 @@
-export * from './change-children-font-size'
export * from './create-element-at-position'
export * from './crop-text'
export * from './ends-with-question-mark'
diff --git a/tests/setup/content-script-selection-toolbar-loader-hooks.mjs b/tests/setup/content-script-selection-toolbar-loader-hooks.mjs
index 912c43f62..b0e3485ef 100644
--- a/tests/setup/content-script-selection-toolbar-loader-hooks.mjs
+++ b/tests/setup/content-script-selection-toolbar-loader-hooks.mjs
@@ -3,6 +3,9 @@ import { fileURLToPath } from 'node:url'
const contentScriptStubs = new Map([
['./styles.scss', 'test:styles'],
+ ['@aeven-ai/hypermarkdown/styles.css', 'test:markdown-styles'],
+ ['tippy.js/dist/tippy.css', 'test:tippy-styles'],
+ ['../components/MarkdownRender/mykatex.min.css', 'test:katex-styles'],
['../components/DecisionCard', 'test:decision-card'],
['./site-adapters', 'test:site-adapters'],
['./selection-tools', 'test:selection-tools'],
@@ -34,6 +37,9 @@ const floatingToolbarStubs = new Map([
const sources = {
'test:styles': '',
+ 'test:markdown-styles': '',
+ 'test:tippy-styles': '',
+ 'test:katex-styles': '',
'test:decision-card': 'export default function DecisionCard() { return null }',
'test:site-adapters': 'export const config = {}',
'test:selection-tools': 'export const config = {}',
diff --git a/tests/setup/conversation-card-lifecycle-loader-hooks.mjs b/tests/setup/conversation-card-lifecycle-loader-hooks.mjs
index 2cd6889c0..90fe37b53 100644
--- a/tests/setup/conversation-card-lifecycle-loader-hooks.mjs
+++ b/tests/setup/conversation-card-lifecycle-loader-hooks.mjs
@@ -40,7 +40,20 @@ const sources = {
return null
}
`,
- 'test:conversation-item': 'export default function ConversationItem() { return null }',
+ 'test:conversation-item': `
+ export default function ConversationItem(props) {
+ if (props.type === 'answer') {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ state.answerContents.push(props.content)
+ state.answerProps.push({
+ content: props.content,
+ reasoning: props.reasoning,
+ done: props.done,
+ })
+ }
+ return null
+ }
+ `,
'test:conversation-utils': `
export const apiModeToModelName = () => 'test-model'
export const createElementAtPosition = () => document.createElement('div')
diff --git a/tests/setup/markdown-render-loader-hooks.mjs b/tests/setup/markdown-render-loader-hooks.mjs
new file mode 100644
index 000000000..ed20b327d
--- /dev/null
+++ b/tests/setup/markdown-render-loader-hooks.mjs
@@ -0,0 +1,37 @@
+// Loader hooks for rendering tests: resolve extensionless relative imports the way
+// webpack does, and transform JSX through esbuild for the preact runtime.
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+
+const JSX_RE = /<[A-Z][A-Za-z0-9]*[\s/>]|<>/
+
+export async function resolve(specifier, context, nextResolve) {
+ if (/^\.\.?\//.test(specifier) && !/\.[a-z0-9]+$/i.test(specifier)) {
+ for (const extension of ['.jsx', '.mjs', '.js']) {
+ try {
+ return await nextResolve(specifier + extension, context)
+ } catch {
+ /* try the next extension */
+ }
+ }
+ }
+ return nextResolve(specifier, context)
+}
+
+export async function load(url, context, nextLoad) {
+ if (url.startsWith('file://') && !url.includes('node_modules')) {
+ if (url.endsWith('.jsx') || url.endsWith('.mjs')) {
+ const source = await readFile(fileURLToPath(url), 'utf8')
+ if (url.endsWith('.jsx') || JSX_RE.test(source)) {
+ const esbuild = await import('esbuild')
+ const result = await esbuild.transform(source, {
+ loader: 'jsx',
+ jsx: 'automatic',
+ jsxImportSource: 'preact',
+ })
+ return { shortCircuit: true, format: 'module', source: result.code }
+ }
+ }
+ }
+ return nextLoad(url, context)
+}
diff --git a/tests/unit/components/conversation-card-lifecycle.test.mjs b/tests/unit/components/conversation-card-lifecycle.test.mjs
index fb5d37e39..92437f6d0 100644
--- a/tests/unit/components/conversation-card-lifecycle.test.mjs
+++ b/tests/unit/components/conversation-card-lifecycle.test.mjs
@@ -126,6 +126,8 @@ const resetState = () => {
state.generateAnswersCount += 1
}
state.runtimeOnMessage.clear()
+ state.answerContents = []
+ state.answerProps = []
}
const mountCard = (container, props = {}) => {
@@ -237,6 +239,34 @@ test('remote runtime Port disconnect reconnects and unmount cleans the replaceme
assert.equal(state.ports.length, 2)
})
+test('a remote Port disconnect during a foreground generation does not unlock sending', async () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+ state.foreground = true
+ state.generateAnswers = () => {
+ state.generateAnswersCount += 1
+ return new Promise(() => {})
+ }
+
+ mountCard(container)
+ await waitFor(
+ () => typeof state.inputBoxProps?.onSubmit === 'function',
+ 'InputBox did not render',
+ )
+
+ state.inputBoxProps.onSubmit('question')
+ await waitFor(() => state.generateAnswersCount === 1, 'foreground provider did not start')
+ await waitFor(() => state.inputBoxProps.enabled === false, 'sending was not locked')
+
+ act(() => state.ports[0].emitRemoteDisconnect())
+
+ // The keepalive Port is replaced, but the foreground stream still owns the answer, so
+ // sending stays locked until that stream ends on its own.
+ assert.equal(state.ports.length, 2)
+ assert.equal(state.inputBoxProps.enabled, false)
+})
+
test('close button disposes foreground transport before onClose', async () => {
const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
const container = document.createElement('div')
@@ -730,3 +760,151 @@ test('provider failure disconnects fake Port and removes stale listeners', async
act(() => render(null, container))
})
+
+test('a burst of streamed chunks stays buffered until completion flushes it', () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+ const session = {
+ ...baseSession(),
+ question: 'why?',
+ conversationRecords: [{ question: 'why?', answer: 'partial' }],
+ }
+
+ mountCard(container, { question: 'why?', session })
+ const port = state.ports[0]
+
+ act(() => port.onMessage.trigger({ answer: 'a' }))
+ act(() => port.onMessage.trigger({ answer: 'ab' }))
+ assert.equal(state.answerContents.includes('ab'), false, 'the burst must not render per chunk')
+
+ act(() => port.onMessage.trigger({ answer: 'abc', done: true, session }))
+
+ assert.equal(state.answerContents.includes('abc'), true, 'completion must flush the newest chunk')
+})
+
+test('switching the question drops a buffered answer from the previous one', async () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+
+ mountCard(container, { question: 'first', session: { ...baseSession(), question: 'first' } })
+ const port = state.ports[0]
+
+ act(() => port.onMessage.trigger({ answer: 'stale answer' }))
+
+ act(() => {
+ render(
+ h(ConversationCard, {
+ session: { ...baseSession(), question: 'second' },
+ question: 'second',
+ }),
+ container,
+ )
+ })
+
+ await new Promise((resolve) => setTimeout(resolve, 32))
+
+ assert.equal(state.answerContents.includes('stale answer'), false)
+})
+
+test('a dropped transport flushes the buffered answer before reconnecting', () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+ const session = {
+ ...baseSession(),
+ question: 'why?',
+ conversationRecords: [{ question: 'why?', answer: 'partial' }],
+ }
+
+ mountCard(container, { question: 'why?', session })
+ const port = state.ports[0]
+
+ act(() => port.onMessage.trigger({ answer: 'newest chunk' }))
+ assert.equal(
+ state.answerContents.includes('newest chunk'),
+ false,
+ 'the chunk must be buffered first',
+ )
+
+ act(() => port.emitRemoteDisconnect())
+
+ assert.equal(state.ports.length, 2)
+ assert.equal(
+ state.answerContents.includes('newest chunk'),
+ true,
+ 'a dropped transport must flush the newest chunk synchronously',
+ )
+ const flushed = state.answerProps.filter((props) => props.content === 'newest chunk').at(-1)
+ assert.equal(flushed.done, true, 'a dropped transport must finish the trailing answer')
+})
+
+test('an empty answer snapshot replaces the loading placeholder', async () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+
+ mountCard(container, { question: 'why?' })
+ assert.match(state.answerProps.at(-1).content, /gpt-loading/)
+
+ act(() => state.ports[0].onMessage.trigger({ answer: '' }))
+ await new Promise((resolve) => setTimeout(resolve, 32))
+
+ assert.equal(state.answerProps.at(-1).content, '')
+})
+
+test('reasoning chunks are coalesced into one render per frame', async () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+
+ mountCard(container, { question: 'why?' })
+ const port = state.ports[0]
+
+ act(() => port.onMessage.trigger({ reasoning: 'thin' }))
+ act(() => port.onMessage.trigger({ reasoning: 'thinking' }))
+ assert.equal(
+ state.answerProps.some((props) => props.reasoning === 'thinking'),
+ false,
+ 'reasoning must be buffered, not rendered per chunk',
+ )
+
+ await new Promise((resolve) => setTimeout(resolve, 32))
+ assert.equal(state.answerProps.at(-1).reasoning, 'thinking')
+})
+
+test('a reasoning-only completion clears the placeholder and finishes the answer', () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+ const session = { ...baseSession(), question: 'why?' }
+
+ mountCard(container, { question: 'why?', session })
+ const port = state.ports[0]
+
+ act(() => port.onMessage.trigger({ reasoning: 'thinking hard' }))
+ act(() => port.onMessage.trigger({ answer: null, done: true, session }))
+
+ const answer = state.answerProps.at(-1)
+ assert.equal(answer.content, '')
+ assert.equal(answer.reasoning, 'thinking hard')
+ assert.equal(answer.done, true)
+})
+
+test('an error closes the trailing answer so its reasoning stops streaming', async () => {
+ const state = globalThis.__CONVERSATION_LIFECYCLE_TEST__
+ const container = document.createElement('div')
+ document.body.append(container)
+ const session = { ...baseSession(), question: 'why?' }
+
+ mountCard(container, { question: 'why?', session })
+ const port = state.ports[0]
+
+ act(() => port.onMessage.trigger({ answer: 'partial answer', reasoning: 'thinking' }))
+ await new Promise((resolve) => setTimeout(resolve, 32))
+ act(() => port.onMessage.trigger({ error: 'boom' }))
+
+ const partial = state.answerProps.filter((props) => props.content === 'partial answer').at(-1)
+ assert.equal(partial.done, true)
+})
diff --git a/tests/unit/components/conversation-card-session.test.mjs b/tests/unit/components/conversation-card-session.test.mjs
index fdf543c72..97a6dd47d 100644
--- a/tests/unit/components/conversation-card-session.test.mjs
+++ b/tests/unit/components/conversation-card-session.test.mjs
@@ -4,7 +4,6 @@ import {
createConversationPortMessage,
createRetrySession,
finalizeInterruptedSession,
- getCompletedAnswerUpdate,
getInterruptedCompletionState,
isSupersededGenerationMessage,
isSupersededRequestMessage,
@@ -169,20 +168,6 @@ test('createRetrySession keeps provider retry mode when no target was removed',
assert.equal(retrySession.isRetry, true)
})
-test('getCompletedAnswerUpdate replaces loading content when restoring a retry answer', () => {
- assert.deepEqual(getCompletedAnswerUpdate('Old answer'), {
- value: 'Old answer',
- appended: false,
- })
-})
-
-test('getCompletedAnswerUpdate preserves streamed content on normal completion', () => {
- assert.deepEqual(getCompletedAnswerUpdate(null), {
- value: '',
- appended: true,
- })
-})
-
test('getInterruptedCompletionState restores retry context for a sessionless stop', () => {
const retryRecord = { question: 'Q1', answer: 'Old answer' }
diff --git a/tests/unit/components/highlight-options.test.mjs b/tests/unit/components/highlight-options.test.mjs
new file mode 100644
index 000000000..fca17cec9
--- /dev/null
+++ b/tests/unit/components/highlight-options.test.mjs
@@ -0,0 +1,80 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeHighlight from 'rehype-highlight'
+import { highlightOptions } from '../../../src/components/MarkdownRender/highlight-options.mjs'
+
+async function renderCodeNodes(markdown) {
+ const processor = unified()
+ .use(remarkParse)
+ .use(remarkRehype, { allowDangerousHtml: true })
+ .use(rehypeHighlight, highlightOptions)
+
+ const tree = await processor.run(processor.parse(markdown))
+ const nodes = []
+ const walk = (node) => {
+ if (node.type === 'element' && node.tagName === 'code') nodes.push(node)
+ for (const child of node.children ?? []) walk(child)
+ }
+ walk(tree)
+ return nodes
+}
+
+function classNames(node) {
+ return node.properties?.className ?? []
+}
+
+test('auto-detection still labels blocks from the configured subset', async () => {
+ const [code] = await renderCodeNodes('```\nconst value = computeSomething(alpha, beta)\n```\n')
+
+ const detected = classNames(code).find((name) => name.startsWith('language-'))
+ assert.ok(
+ detected && highlightOptions.subset.includes(detected.replace('language-', '')),
+ `expected a detection within the subset, got ${classNames(code).join(', ')}`,
+ )
+ // A failure inside highlightAuto is swallowed by ignoreMissing, so token spans are the
+ // evidence that the whole subset resolved.
+ assert.ok(
+ code.children.some((child) => classNames(child).some((name) => name.startsWith('hljs-'))),
+ 'expected token spans from auto-detection',
+ )
+})
+
+test('the subset only narrows detection, not labelled blocks', async () => {
+ // `objectivec` is registered by lowlight but deliberately left out of the detection subset.
+ assert.equal(highlightOptions.subset.includes('objectivec'), false)
+
+ const [code] = await renderCodeNodes('```objectivec\nNSString *value = @"hi";\n```\n')
+
+ assert.ok(
+ code.children.some((child) => classNames(child).some((name) => name.startsWith('hljs-'))),
+ 'expected token spans for a labelled language outside the detection subset',
+ )
+})
+
+test('auto-detection keeps the common unlabelled languages', async () => {
+ const cases = [
+ ['diff', 'diff --git a/x b/x\n@@ -1,3 +1,3 @@\n-old line\n+new line'],
+ ['markdown', '# Title\n\nSome *emphasis* and a [link](http://example.com).\n\n- item'],
+ ['lua', 'local function add(a, b)\n return a + b\nend\nprint(add(1, 2))'],
+ ]
+
+ for (const [language, snippet] of cases) {
+ const [code] = await renderCodeNodes(`\`\`\`\n${snippet}\n\`\`\`\n`)
+ const detected = classNames(code).find((name) => name.startsWith('language-'))
+ assert.equal(
+ detected,
+ `language-${language}`,
+ `expected ${language} to stay auto-detectable, got ${classNames(code).join(', ')}`,
+ )
+ }
+})
+
+test('an unknown language label is ignored instead of failing the render', async () => {
+ const [code] = await renderCodeNodes('```not-a-language\nconst value = 1\n```\n')
+
+ assert.equal(code.children.length, 1)
+ assert.equal(code.children[0].type, 'text')
+})
diff --git a/tests/unit/components/list-markers.test.mjs b/tests/unit/components/list-markers.test.mjs
new file mode 100644
index 000000000..66c459249
--- /dev/null
+++ b/tests/unit/components/list-markers.test.mjs
@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { JSDOM } from 'jsdom'
+import { normalizeListStarts } from '../../../src/components/MarkdownRender/list-markers.mjs'
+
+function createContainer(html) {
+ const dom = new JSDOM(`${html}
`)
+ return dom.window.document.getElementById('root')
+}
+
+test('a list the renderer marked as starting at 0 is numbered from 1 again', () => {
+ const container = createContainer('- Alpha
- Beta
')
+
+ assert.equal(normalizeListStarts(container), 1)
+ assert.equal(container.querySelector('ol').hasAttribute('start'), false)
+})
+
+test('a list that really resumes at another number keeps its start', () => {
+ const container = createContainer('- Gamma
- Delta
')
+
+ assert.equal(normalizeListStarts(container), 0)
+ assert.equal(container.querySelector('ol').getAttribute('start'), '3')
+})
+
+test('nested lists are corrected too and a missing container is tolerated', () => {
+ const container = createContainer(
+ '- Alpha
- Beta
',
+ )
+
+ assert.equal(normalizeListStarts(container), 2)
+ assert.equal(container.querySelectorAll('ol[start]').length, 0)
+ assert.equal(normalizeListStarts(null), 0)
+})
diff --git a/tests/unit/components/markdown-render.test.mjs b/tests/unit/components/markdown-render.test.mjs
new file mode 100644
index 000000000..9770b6677
--- /dev/null
+++ b/tests/unit/components/markdown-render.test.mjs
@@ -0,0 +1,227 @@
+import assert from 'node:assert/strict'
+import { register } from 'node:module'
+import { cwd } from 'node:process'
+import { after, afterEach, before, test } from 'node:test'
+import { pathToFileURL } from 'node:url'
+import { JSDOM } from 'jsdom'
+import { h, render } from 'preact'
+import { act } from 'preact/test-utils'
+
+register('./tests/setup/markdown-render-loader-hooks.mjs', pathToFileURL(cwd() + '/').href)
+
+const LOADING = 'Waiting for response...
'
+
+// Everything the renderer touches, borrowed from the jsdom window.
+const globalNames = [
+ 'window',
+ 'document',
+ 'Node',
+ 'HTMLElement',
+ 'Element',
+ 'Event',
+ 'MouseEvent',
+ 'CustomEvent',
+ 'MutationObserver',
+ 'getComputedStyle',
+ 'requestAnimationFrame',
+ 'cancelAnimationFrame',
+ 'ResizeObserver',
+ 'IntersectionObserver',
+ 'DOMParser',
+ 'SVGElement',
+ 'DocumentFragment',
+]
+
+let dom
+let MarkdownRender
+const containers = new Set()
+
+class NoopObserver {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+}
+
+before(async () => {
+ dom = new JSDOM('', {
+ url: 'https://example.com/',
+ pretendToBeVisual: true,
+ })
+ for (const name of globalNames) {
+ if (dom.window[name] === undefined) continue
+ Object.defineProperty(globalThis, name, { configurable: true, value: dom.window[name] })
+ }
+ if (!globalThis.ResizeObserver) globalThis.ResizeObserver = NoopObserver
+ if (!globalThis.IntersectionObserver) globalThis.IntersectionObserver = NoopObserver
+ Object.defineProperty(globalThis, 'matchMedia', {
+ configurable: true,
+ value: dom.window.matchMedia,
+ })
+ ;({ default: MarkdownRender } = await import(
+ '../../../src/components/MarkdownRender/markdown.jsx'
+ ))
+})
+
+afterEach(() => {
+ act(() => {
+ for (const container of containers) render(null, container)
+ })
+ for (const container of containers) container.remove()
+ containers.clear()
+})
+
+after(() => {
+ dom.window.close()
+})
+
+const mount = (props) => {
+ const container = dom.window.document.createElement('div')
+ dom.window.document.body.append(container)
+ containers.add(container)
+ act(() => render(h(MarkdownRender, props), container))
+ return container
+}
+
+test('the streaming loading placeholder keeps the class its styles target', () => {
+ const container = mount({ children: LOADING, done: false })
+
+ const placeholder = container.querySelector('p.gpt-loading')
+ assert.ok(placeholder, 'the placeholder must survive sanitizing')
+ assert.equal(placeholder.textContent, 'Waiting for response...')
+})
+
+test('a fenced code block keeps the highlight.js classes the theme targets', () => {
+ const container = mount({ children: '```js\nconst answer = 42\n```' })
+
+ const code = container.querySelector('pre code')
+ assert.ok(code, 'the code block must render inside a pre/code pair')
+ assert.ok(code.classList.contains('hljs'), 'the hljs theme class must survive')
+ assert.ok(code.classList.contains('language-js'), 'the language class must survive')
+ assert.ok(container.querySelector('code .hljs-keyword'), 'keywords must be highlighted')
+})
+
+test('a gfm table renders as a table element', () => {
+ const container = mount({ children: '| a | b |\n| - | - |\n| 1 | 2 |' })
+
+ assert.equal(container.querySelectorAll('table th').length, 2)
+ assert.deepEqual(
+ [...container.querySelectorAll('table td')].map((cell) => cell.textContent),
+ ['1', '2'],
+ )
+})
+
+test('inline math renders through katex', () => {
+ const container = mount({ children: 'Inline $a^2$ end' })
+
+ assert.ok(container.querySelector('.katex'), 'the katex markup must be present')
+ assert.equal(container.textContent.includes('$a^2$'), false)
+})
+
+test('reasoning stays open while streaming and collapses once done', () => {
+ const streaming = mount({ children: LOADING, reasoning: 'weighing options', done: false })
+ assert.ok(streaming.querySelector('.reasoning-wrapper.open'), 'a live block stays open')
+
+ const finished = mount({ children: 'The answer.', reasoning: 'weighing options', done: true })
+ assert.ok(finished.querySelector('.reasoning-wrapper.collapsed'), 'a finished block collapses')
+})
+
+test('a question that mentions a reasoning tag renders it as text', () => {
+ const container = mount({ children: 'Use like this.' })
+
+ assert.equal(container.querySelector('.reasoning-wrapper'), null)
+ assert.match(container.textContent, /Use like this\./)
+})
+
+test('a reasoning tag in the answer renders as text, never as a thinking block', () => {
+ const container = mount({ children: 'not thinking\n\nJust text.' })
+
+ assert.equal(container.querySelector('.reasoning-wrapper'), null)
+ assert.match(container.textContent, /not thinking<\/think>/)
+})
+
+test('a reasoning tag inside a code fence stays in the answer', () => {
+ const container = mount({ children: 'Example:\n\n```html\nx\n```' })
+
+ assert.equal(container.querySelector('.reasoning-wrapper'), null)
+ assert.ok(container.querySelector('pre code'))
+ assert.match(container.textContent, /x<\/think>/)
+})
+
+test('raw html in an answer is preserved', () => {
+ const container = mount({ children: 'a
b' })
+
+ assert.ok(container.querySelector('br'), 'a line break must survive sanitizing')
+})
+
+test('links render through the shared Hyperlink component', () => {
+ const container = mount({ children: '[docs](https://example.com/docs)' })
+
+ const link = container.querySelector('a')
+ assert.equal(link.getAttribute('href'), 'https://example.com/docs')
+ assert.equal(link.getAttribute('target'), '_blank')
+ assert.equal(link.getAttribute('rel'), 'nofollow noopener noreferrer')
+})
+
+test('an answer that mentions the loading class still renders with its reasoning', () => {
+ const container = mount({
+ children: 'The class gpt-loading marks the waiting placeholder.',
+ reasoning: 'weighing options',
+ done: true,
+ })
+
+ assert.ok(container.querySelector('.reasoning-wrapper.collapsed'))
+ assert.match(container.textContent, /gpt-loading marks the waiting placeholder/)
+})
+
+test('a closing tag inside code in the reasoning cannot leak into the answer', () => {
+ const container = mount({
+ children: 'The answer.',
+ reasoning: 'The user wrote `` in code, then explained it.',
+ done: true,
+ })
+
+ assert.ok(container.querySelector('.reasoning-wrapper.collapsed'))
+ assert.match(container.textContent, /The answer\./)
+ assert.doesNotMatch(container.textContent, /then explained it/)
+})
+
+test('reasoning stays open when its code mentions a closing tag', () => {
+ const container = mount({
+ children: LOADING,
+ reasoning: 'The user wrote `` in code.',
+ done: false,
+ })
+
+ assert.ok(container.querySelector('.reasoning-wrapper.open'))
+})
+
+test('a reasoning tag inside the thinking stays literal, not a nested block', () => {
+ const container = mount({
+ children: LOADING,
+ reasoning: 'nested still thinking',
+ done: false,
+ })
+
+ assert.equal(container.querySelectorAll('.reasoning-wrapper').length, 1)
+ assert.match(container.textContent, /nested<\/think>/)
+})
+
+test('the thinking is rendered as markdown inside its own block', () => {
+ const container = mount({ children: LOADING, reasoning: 'weighing **options**', done: false })
+
+ const content = container.querySelector('.reasoning-content')
+ assert.ok(content, 'the thinking block holds the content')
+ assert.ok(content.querySelector('strong'), 'the thinking goes through the markdown pipeline')
+})
+
+test('the thinking highlights code the same way the answer does', () => {
+ const container = mount({
+ children: LOADING,
+ reasoning: '```js\nconst answer = 42\n```',
+ done: false,
+ })
+
+ const code = container.querySelector('.reasoning-content pre code')
+ assert.ok(code, 'the thinking renders its code block')
+ assert.ok(code.classList.contains('hljs'), 'the thinking uses the same highlight plugin')
+})
diff --git a/tests/unit/components/special-tags.test.mjs b/tests/unit/components/special-tags.test.mjs
new file mode 100644
index 000000000..14a355161
--- /dev/null
+++ b/tests/unit/components/special-tags.test.mjs
@@ -0,0 +1,46 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { escapeReasoningTags } from '../../../src/components/MarkdownRender/special-tags.mjs'
+
+test('reasoning tags in plain text are shown as written', () => {
+ assert.equal(
+ escapeReasoningTags('Use and to wrap thinking.'),
+ 'Use <think> and </think> to wrap thinking.',
+ )
+})
+
+test('the tag name case and attributes do not matter', () => {
+ assert.equal(
+ escapeReasoningTags('x'),
+ '<THINKING level="2">x</Thinking>',
+ )
+ assert.equal(
+ escapeReasoningTags('why'),
+ '<reasoning>why</reasoning>',
+ )
+})
+
+test('other tags and autolinks are left alone', () => {
+ const text = 'See and html
.'
+ assert.equal(escapeReasoningTags(text), text)
+})
+
+test('a leading reasoning block is escaped, so it cannot open one', () => {
+ const answer = 'secret\n\nThe answer.'
+ assert.equal(escapeReasoningTags(answer), '<think>secret</think>\n\nThe answer.')
+})
+
+test('fenced code and inline code keep their text untouched', () => {
+ const fenced = 'Example:\n\n```html\nexample\n```\n'
+ assert.equal(escapeReasoningTags(fenced), fenced)
+
+ const inline = 'Write `text` to wrap it.'
+ assert.equal(escapeReasoningTags(inline), inline)
+})
+
+test('prose around code is still escaped', () => {
+ assert.equal(
+ escapeReasoningTags('`` means thinking.'),
+ '`` means <think>thinking</think>.',
+ )
+})
diff --git a/tests/unit/components/stream-buffer.test.mjs b/tests/unit/components/stream-buffer.test.mjs
new file mode 100644
index 000000000..64be90fa7
--- /dev/null
+++ b/tests/unit/components/stream-buffer.test.mjs
@@ -0,0 +1,171 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import {
+ createFrameScheduler,
+ createStreamBuffer,
+} from '../../../src/components/ConversationCard/stream-buffer.mjs'
+
+function createFakeFrames() {
+ let nextHandle = 1
+ const callbacks = new Map()
+ const cancelled = []
+
+ return {
+ cancelled,
+ requestFrame(callback) {
+ const handle = nextHandle++
+ callbacks.set(handle, callback)
+ return handle
+ },
+ cancelFrame(handle) {
+ cancelled.push(handle)
+ callbacks.delete(handle)
+ },
+ runFrames() {
+ const pending = [...callbacks.values()]
+ callbacks.clear()
+ for (const callback of pending) callback()
+ },
+ }
+}
+
+function setup() {
+ const frames = createFakeFrames()
+ const renders = []
+ const buffer = createStreamBuffer({
+ requestFrame: frames.requestFrame,
+ cancelFrame: frames.cancelFrame,
+ render: (patch) => renders.push(patch),
+ })
+ return { frames, renders, buffer }
+}
+
+test('a burst of chunks renders once per frame with only the newest values', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'a' })
+ buffer.push({ content: 'ab' })
+ buffer.push({ content: 'abc' })
+ assert.deepEqual(renders, [])
+
+ frames.runFrames()
+
+ assert.deepEqual(renders, [{ content: 'abc' }])
+})
+
+test('answer and reasoning arriving together are applied in a single patch', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'The answer.' })
+ buffer.push({ reasoning: 'weighing options' })
+ frames.runFrames()
+
+ assert.deepEqual(renders, [{ content: 'The answer.', reasoning: 'weighing options' }])
+})
+
+test('a patch keeps the fields it does not mention', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'first' })
+ frames.runFrames()
+ buffer.push({ reasoning: 'thinking' })
+ frames.runFrames()
+
+ assert.deepEqual(renders, [{ content: 'first' }, { reasoning: 'thinking' }])
+})
+
+test('a chunk arriving after a frame schedules the next render', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'a' })
+ frames.runFrames()
+ buffer.push({ content: 'ab' })
+ frames.runFrames()
+
+ assert.deepEqual(renders, [{ content: 'a' }, { content: 'ab' }])
+})
+
+test('flush renders the newest patch so completion cannot drop the last one', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'a' })
+ buffer.push({ content: 'ab', done: true })
+ buffer.flush()
+ assert.deepEqual(renders, [{ content: 'ab', done: true }])
+ assert.equal(frames.cancelled.length, 1)
+
+ frames.runFrames()
+ assert.deepEqual(renders, [{ content: 'ab', done: true }], 'the cancelled frame must not render')
+})
+
+test('flush without a pending patch does not render', () => {
+ const { renders, buffer } = setup()
+
+ buffer.flush()
+
+ assert.deepEqual(renders, [])
+})
+
+test('discard drops the pending patch without rendering it', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'a' })
+ buffer.discard()
+ frames.runFrames()
+
+ assert.deepEqual(renders, [])
+})
+
+test('pushing after a discard schedules a fresh frame', () => {
+ const { frames, renders, buffer } = setup()
+
+ buffer.push({ content: 'a' })
+ buffer.discard()
+ buffer.push({ content: 'b' })
+ frames.runFrames()
+
+ assert.deepEqual(renders, [{ content: 'b' }])
+})
+
+test('createFrameScheduler uses the host animation frames when available', () => {
+ const requested = []
+ const cancelled = []
+ const scheduler = createFrameScheduler({
+ requestAnimationFrame: (callback) => {
+ requested.push(callback)
+ return 7
+ },
+ cancelAnimationFrame: (handle) => cancelled.push(handle),
+ })
+
+ const handle = scheduler.requestFrame(() => {})
+ scheduler.cancelFrame(handle)
+
+ assert.equal(requested.length, 1)
+ assert.deepEqual(cancelled, [7])
+})
+
+test('createFrameScheduler falls back to a timer without animation frames', async () => {
+ const scheduler = createFrameScheduler({})
+ const renders = []
+
+ await new Promise((resolve) => {
+ scheduler.requestFrame(() => {
+ renders.push('tick')
+ resolve()
+ })
+ })
+
+ assert.deepEqual(renders, ['tick'])
+})
+
+test('the timer fallback cancels a pending frame', async () => {
+ const scheduler = createFrameScheduler({})
+ const renders = []
+ const handle = scheduler.requestFrame(() => renders.push('tick'))
+
+ scheduler.cancelFrame(handle)
+ await new Promise((resolve) => setTimeout(resolve, 32))
+
+ assert.deepEqual(renders, [])
+})
diff --git a/tests/unit/components/stream-delta.test.mjs b/tests/unit/components/stream-delta.test.mjs
new file mode 100644
index 000000000..ac94d2e27
--- /dev/null
+++ b/tests/unit/components/stream-delta.test.mjs
@@ -0,0 +1,74 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { createStreamDelta } from '../../../src/components/MarkdownRender/stream-delta.mjs'
+
+test('the first snapshot is written whole', () => {
+ const stream = createStreamDelta()
+
+ assert.deepEqual(stream.next('Hello', false), {
+ reset: true,
+ write: 'Hello',
+ finalize: false,
+ })
+})
+
+test('growth is written as a delta', () => {
+ const stream = createStreamDelta()
+ stream.next('Hello', false)
+
+ assert.deepEqual(stream.next('Hello world', false), {
+ reset: false,
+ write: ' world',
+ finalize: false,
+ })
+})
+
+test('an unchanged snapshot does nothing', () => {
+ const stream = createStreamDelta()
+ stream.next('Hello', false)
+
+ assert.equal(stream.next('Hello', false), null)
+})
+
+test('completion finalizes once, and only after the last text', () => {
+ const stream = createStreamDelta()
+ stream.next('Hello', false)
+ stream.next('Hello world', false)
+
+ assert.deepEqual(stream.next('Hello world!', true), {
+ reset: false,
+ write: '!',
+ finalize: true,
+ })
+ assert.equal(stream.next('Hello world!', true), null)
+})
+
+test('completion with no trailing text still finalizes once', () => {
+ const stream = createStreamDelta()
+ stream.next('Hello', false)
+
+ assert.deepEqual(stream.next('Hello', true), { reset: false, write: '', finalize: true })
+ assert.equal(stream.next('Hello', true), null)
+})
+
+test('a snapshot that does not extend the last one restarts the renderer', () => {
+ const stream = createStreamDelta()
+ stream.next('Hello world', true)
+
+ assert.deepEqual(stream.next('Fresh', false), {
+ reset: true,
+ write: 'Fresh',
+ finalize: false,
+ })
+})
+
+test('a completed answer already on screen is left alone', () => {
+ const stream = createStreamDelta()
+
+ assert.deepEqual(stream.next('Stored answer', true), {
+ reset: true,
+ write: 'Stored answer',
+ finalize: true,
+ })
+ assert.equal(stream.next('Stored answer', true), null)
+})
diff --git a/tests/unit/services/apis/azure-openai-api.test.mjs b/tests/unit/services/apis/azure-openai-api.test.mjs
index 1576fc8a0..1c915fcbf 100644
--- a/tests/unit/services/apis/azure-openai-api.test.mjs
+++ b/tests/unit/services/apis/azure-openai-api.test.mjs
@@ -221,7 +221,7 @@ test('azure-openai: aggregates SSE deltas and pushes record on finish', async (t
port.postedMessages.some((m) => m.done === true && m.session === session),
true,
)
- assert.deepEqual(port.postedMessages.at(-1), { done: true })
+ assert.deepEqual(port.postedMessages.at(-1), { answer: null, done: true, session })
assert.deepEqual(session.conversationRecords.at(-1), {
question: 'CurrentQ',
answer: 'Hello',
diff --git a/tests/unit/services/apis/claude-api.test.mjs b/tests/unit/services/apis/claude-api.test.mjs
index 0b0490f61..952683144 100644
--- a/tests/unit/services/apis/claude-api.test.mjs
+++ b/tests/unit/services/apis/claude-api.test.mjs
@@ -267,6 +267,32 @@ test('claude-api: delta.text streams accumulate and message_stop terminates', as
])
})
+test('claude-api: thinking deltas stream as reasoning, never as the answer', async (t) => {
+ t.mock.method(console, 'debug', () => {})
+ const { session, port } = setupCompletionTest()
+
+ t.mock.method(globalThis, 'fetch', async () =>
+ createMockSseResponse([
+ 'data: {"type":"content_block_delta","delta":{"type":"thinking_delta","thinking":"weighing "}}\n\n',
+ 'data: {"type":"content_block_delta","delta":{"type":"thinking_delta","thinking":"options"}}\n\n',
+ 'data: {"type":"content_block_delta","delta":{"type":"text_delta","text":"The answer."}}\n\n',
+ 'data: {"type":"message_delta","delta":{"stop_reason":"end_turn"}}\n\n',
+ 'data: {"type":"message_stop"}\n\n',
+ ]),
+ )
+
+ await generateAnswersWithClaudeApi(port, 'CurrentQ', session)
+
+ assert.deepEqual(
+ port.postedMessages.filter((message) => message.reasoning).map((message) => message.reasoning),
+ ['weighing ', 'weighing options'],
+ )
+ assert.deepEqual(session.conversationRecords.at(-1), {
+ question: 'CurrentQ',
+ answer: 'The answer.',
+ })
+})
+
test('claude-api: rejects incomplete Claude responses', async (t) => {
t.mock.method(console, 'debug', () => {})
diff --git a/tests/unit/services/apis/custom-api.test.mjs b/tests/unit/services/apis/custom-api.test.mjs
index 57a6f7fde..3e4f2cd75 100644
--- a/tests/unit/services/apis/custom-api.test.mjs
+++ b/tests/unit/services/apis/custom-api.test.mjs
@@ -567,7 +567,7 @@ test('retry mode overwrites last conversation record', async (t) => {
assert.deepEqual(session.conversationRecords[0], { question: 'Q1', answer: 'new answer' })
})
-test('delta.content with empty string is appended (no skip)', async (t) => {
+test('an empty delta.content leaves the answer unchanged and does not repost it', async (t) => {
t.mock.method(console, 'debug', () => {})
setStorage({
maxConversationContextLength: 2,
@@ -599,9 +599,10 @@ test('delta.content with empty string is appended (no skip)', async (t) => {
'model',
)
- // After empty delta, answer should still be "A" (empty appended, not skipped)
+ // The empty delta appends nothing, so the unchanged answer is not posted again.
const streaming = port.postedMessages.filter((m) => m.done === false)
- assert.equal(streaming[0].answer, 'A')
- assert.equal(streaming[1].answer, 'A') // "A" + "" = "A"
- assert.equal(streaming[2].answer, 'AB')
+ assert.deepEqual(
+ streaming.map((m) => m.answer),
+ ['A', 'AB'],
+ )
})
diff --git a/tests/unit/services/apis/reasoning-content.test.mjs b/tests/unit/services/apis/reasoning-content.test.mjs
new file mode 100644
index 000000000..22eda5d30
--- /dev/null
+++ b/tests/unit/services/apis/reasoning-content.test.mjs
@@ -0,0 +1,124 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { generateAnswersWithOpenAICompatible } from '../../../../src/services/apis/openai-compatible-core.mjs'
+import { createFakePort } from '../../helpers/port.mjs'
+import { createMockSseResponse } from '../../helpers/sse-response.mjs'
+
+const CONFIG = {
+ maxConversationContextLength: 9,
+ maxResponseTokenLength: 1000,
+ temperatureOverrideEnabled: false,
+ temperature: 1,
+}
+
+async function run(t, chunks) {
+ t.mock.method(console, 'debug', () => {})
+ t.mock.method(globalThis, 'fetch', async () => createMockSseResponse(chunks))
+ const port = createFakePort()
+ const session = { conversationRecords: [] }
+ await generateAnswersWithOpenAICompatible({
+ port,
+ question: 'hi',
+ session,
+ endpointType: 'chat',
+ requestUrl: 'https://example.com/v1/chat/completions',
+ model: 'deepseek-reasoner',
+ apiKey: 'key',
+ provider: 'openai',
+ config: CONFIG,
+ })
+ return { port, session }
+}
+
+test('reasoning_content is streamed to the card', async (t) => {
+ const { port } = await run(t, [
+ 'data: {"choices":[{"delta":{"reasoning_content":"weighing "}}]}\n\n',
+ 'data: {"choices":[{"delta":{"reasoning_content":"options"}}]}\n\n',
+ 'data: {"choices":[{"delta":{"content":"The answer."},"finish_reason":"stop"}]}\n\n',
+ 'data: [DONE]\n\n',
+ ])
+
+ const reasoningUpdates = port.postedMessages.filter((message) => message.reasoning)
+ assert.deepEqual(
+ reasoningUpdates.map((message) => message.reasoning),
+ ['weighing ', 'weighing options'],
+ )
+})
+
+test('reasoning stays out of what is sent back as context', async (t) => {
+ const { session } = await run(t, [
+ 'data: {"choices":[{"delta":{"reasoning_content":"secret thinking"}}]}\n\n',
+ 'data: {"choices":[{"delta":{"content":"The answer."},"finish_reason":"stop"}]}\n\n',
+ 'data: [DONE]\n\n',
+ ])
+
+ assert.equal(session.conversationRecords.length, 1)
+ assert.equal(session.conversationRecords[0].answer, 'The answer.')
+})
+
+test('an answer with no reasoning behaves as before', async (t) => {
+ const { port, session } = await run(t, [
+ 'data: {"choices":[{"delta":{"content":"Plain"},"finish_reason":"stop"}]}\n\n',
+ 'data: [DONE]\n\n',
+ ])
+
+ assert.equal(port.postedMessages.filter((message) => message.reasoning).length, 0)
+ assert.equal(session.conversationRecords[0].answer, 'Plain')
+})
+
+test('a non-streaming body carries its reasoning in the message', async (t) => {
+ const { port, session } = await run(t, [
+ 'data: {"choices":[{"message":{"reasoning_content":"weighing options","content":"The answer."},"finish_reason":"stop"}]}\n\n',
+ 'data: [DONE]\n\n',
+ ])
+
+ const reasoningUpdates = port.postedMessages.filter((message) => message.reasoning)
+ assert.deepEqual(
+ reasoningUpdates.map((message) => message.reasoning),
+ ['weighing options'],
+ )
+ assert.equal(session.conversationRecords[0].answer, 'The answer.')
+})
+
+test('reasoning-only chunks do not repost the unchanged answer', async (t) => {
+ const { port } = await run(t, [
+ 'data: {"choices":[{"delta":{"content":"The answer."}}]}\n\n',
+ 'data: {"choices":[{"delta":{"reasoning_content":"more thinking"}}]}\n\n',
+ 'data: {"choices":[{"delta":{},"finish_reason":"stop"}]}\n\n',
+ 'data: [DONE]\n\n',
+ ])
+
+ const answerUpdates = port.postedMessages.filter((message) => message.answer)
+ assert.deepEqual(
+ answerUpdates.map((message) => message.answer),
+ ['The answer.'],
+ )
+})
+
+test('a turn that only reasoned is not recorded', async (t) => {
+ const { session } = await run(t, [
+ 'data: {"choices":[{"delta":{"reasoning_content":"cut off while thinking"}}]}\n\n',
+ 'data: {"choices":[{"delta":{},"finish_reason":"length"}]}\n\n',
+ 'data: [DONE]\n\n',
+ ])
+
+ // Recording thinking would send the model its own reasoning back as context.
+ assert.equal(session.conversationRecords.length, 0)
+})
+
+test('thinking tags in the content stay in the answer instead of being parsed out', async (t) => {
+ const answer = 'weighing options\n\nThe answer.'
+ const { port, session } = await run(t, [
+ `data: {"choices":[{"delta":{"content":${JSON.stringify(
+ answer,
+ )}},"finish_reason":"stop"}]}\n\n`,
+ 'data: [DONE]\n\n',
+ ])
+
+ // The thinking block is decided by the reasoning field alone. A tag written in the content
+ // is ordinary text: the renderer escapes it, and it is recorded as the answer verbatim.
+ assert.equal(port.postedMessages.filter((message) => message.reasoning).length, 0)
+ const answerUpdate = port.postedMessages.find((message) => typeof message.answer === 'string')
+ assert.equal(answerUpdate.answer, answer)
+ assert.equal(session.conversationRecords[0].answer, answer)
+})