fix(theme): render code tag in Response placeholder message (#1299)

Replace translate() function with Translate component using JSX
interpolation to properly render the <code> element in the Response
placeholder message instead of displaying it as raw text.

Fixes #1298

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Response/index.tsx

@@ -9,13 +9,13 @@ import React from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { usePrismTheme } from "@docusaurus/theme-common";
-import { translate } from "@docusaurus/Translate";
+import Translate, { translate } from "@docusaurus/Translate";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
-import { OPENAPI_RESPONSE } from "@theme/translationIds";
+import { OPENAPI_REQUEST, OPENAPI_RESPONSE } from "@theme/translationIds";
 import clsx from "clsx";
 import type { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
@@ -126,11 +126,22 @@ function Response({ item }: { item: ApiItem }) {
               >
                 {prettyResponse || (
                   <p className="openapi-explorer__response-placeholder-message">
-                    {translate({
-                      id: OPENAPI_RESPONSE.PLACEHOLDER,
-                      message:
-                        "Click the <code>Send API Request</code> button above and see the response here!",
-                    })}
+                    <Translate
+                      id={OPENAPI_RESPONSE.PLACEHOLDER}
+                      values={{
+                        code: (
+                          <code>
+                            <Translate id={OPENAPI_REQUEST.SEND_BUTTON}>
+                              Send API Request
+                            </Translate>
+                          </code>
+                        ),
+                      }}
+                    >
+                      {
+                        "Click the {code} button above and see the response here!"
+                      }
+                    </Translate>
                   </p>
                 )}
               </ApiCodeBlock>
@@ -163,11 +174,20 @@ function Response({ item }: { item: ApiItem }) {
           </div>
         ) : (
           <p className="openapi-explorer__response-placeholder-message">
-            {translate({
-              id: OPENAPI_RESPONSE.PLACEHOLDER,
-              message:
-                "Click the <code>Send API Request</code> button above and see the response here!",
-            })}
+            <Translate
+              id={OPENAPI_RESPONSE.PLACEHOLDER}
+              values={{
+                code: (
+                  <code>
+                    <Translate id={OPENAPI_REQUEST.SEND_BUTTON}>
+                      Send API Request
+                    </Translate>
+                  </code>
+                ),
+              }}
+            >
+              {"Click the {code} button above and see the response here!"}
+            </Translate>
           </p>
         )}
       </div>