From b502ec065a93a80f2d3fd74c5ec0f535506949d3 Mon Sep 17 00:00:00 2001
From: Roland Tannous <rolandtannous@gravityq.ai>
Date: Thu, 9 Apr 2026 20:11:39 +0000
Subject: [PATCH] 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.
---
 studio/frontend/src/features/chat/chat-page.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index 65080bda3b..00d407fab9 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -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 }}