fix: Access Endpoint code snippets not updating when API key rotates

Streamdown memoizes and diffs markdown blocks, so when only the inline
API key inside a static code fence changed, it held onto the previously
highlighted output and the cURL/Python examples kept showing the stale
key while the API Key input showed the new one. Giving Streamdown a
React key tied to the markdown string forces a fresh mount whenever the
snippet content changes.
This commit is contained in:
Roland Tannous 2026-04-09 20:11:39 +00:00
commit b502ec065a

View file

@ -98,9 +98,14 @@ function HighlightedSnippet({
[language, source],
);
// Streamdown memoizes/diffs markdown blocks and can hold onto previously
// highlighted content when only an inline value inside the code fence
// changes (e.g. the API key). Forcing a remount keyed on the source string
// guarantees the displayed snippet always matches the latest props.
return (
<div className="mt-2 overflow-x-auto rounded bg-muted p-2 text-[11px] leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!overflow-x-auto [&_code]:!whitespace-pre-wrap [&_code]:!break-all [&_[data-streamdown=code-block]]:!my-0 [&_[data-streamdown=code-block]]:!border-0 [&_[data-streamdown=code-block]]:!p-0">
<Streamdown
key={markdown}
mode="static"
plugins={{ code: codePlugin }}
controls={{ code: false }}