fixup! Add support for fe_/be_ language prefixes in CodeSnippet

Author: GregHolmes

src/core/CodeSnippet.tsx

@@ -10,15 +10,20 @@ import React, {
 import Code from "./Code";
 import cn from "./utils/cn";
 import Icon from "./Icon";
-import { getLanguageInfo, stripSdkType } from "./CodeSnippet/languages";
+import {
+  getLanguageInfo,
+  stripSdkType,
+  SDK_PREFIXES,
+  SDKType,
+} from "./CodeSnippet/languages";
 import LanguageSelector from "./CodeSnippet/LanguageSelector";
 import ApiKeySelector from "./CodeSnippet/ApiKeySelector";
 import PlainCodeView from "./CodeSnippet/PlainCodeView";
 import CopyButton from "./CodeSnippet/CopyButton";
 import SegmentedControl from "./SegmentedControl";
 
-// Define SDK type
-export type SDKType = "realtime" | "rest" | "fe" | "be" | null;
+// Re-export SDKType for consumers
+export type { SDKType };
 
 // Define API key types
 export type ApiKeysItem = {
@@ -211,14 +216,11 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
 
         if (!codeLanguage) return;
 
-        if (codeLanguage.startsWith("realtime_")) {
-          sdkTypes.add("realtime");
-        } else if (codeLanguage.startsWith("rest_")) {
-          sdkTypes.add("rest");
-        } else if (codeLanguage.startsWith("fe_")) {
-          sdkTypes.add("fe");
-        } else if (codeLanguage.startsWith("be_")) {
-          sdkTypes.add("be");
+        for (const prefix of SDK_PREFIXES) {
+          if (codeLanguage.startsWith(`${prefix}_`)) {
+            sdkTypes.add(prefix);
+            break;
+          }
         }
 
         if (!languages.includes(codeLanguage)) {
@@ -237,14 +239,14 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
       };
     }, [children, extractLanguageFromCode, findCodeElement]);
 
-  const resolvedSdk: SDKType = useMemo(() => {
+  const resolvedSdk: SDKType | undefined = useMemo(() => {
     if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {
       return Array.from(sdkTypes)[0];
     }
-    return sdk ?? null;
+    return sdk;
   }, [sdk, sdkTypes]);
 
-  // Only show SDK selector for realtime/rest types, not for fe/be (which are controlled by page-level selector)
+  // Only show SDK selector for realtime/rest types, not for client/agent (which are controlled by page-level selector)
   const showSDKSelector = sdkTypes.has("realtime") || sdkTypes.has("rest");
 
   const filteredLanguages = useMemo(() => {
@@ -273,8 +275,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
   }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);
 
   const activeLanguage = useMemo(() => {
-    // For fe/be SDK types (controlled by page-level selector), construct the full language
-    if (resolvedSdk === "fe" || resolvedSdk === "be") {
+    // For client/agent SDK types (controlled by page-level selector), construct the full language
+    if (resolvedSdk === "client" || resolvedSdk === "agent") {
       const fullLang = `${resolvedSdk}_${lang}`;
       // Verify this language exists in available languages
       if (languages.includes(fullLang)) {
@@ -434,6 +436,29 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
   // Show a read-only language label when fixed (controlled by external selector)
   const showFixedLanguageLabel = fixed && activeLanguage;
 
+  const renderLanguageLabel = (langKey: string, onClick?: () => void) => (
+    <div
+      className={cn(
+        "border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",
+        { "rounded-t-lg": !headerRow },
+      )}
+    >
+      <div
+        className={cn("inline-flex items-center", onClick && "cursor-pointer")}
+        {...(onClick && { onClick })}
+      >
+        <Icon
+          name={getLanguageInfo(langKey).icon}
+          size="16px"
+          additionalCSS="mr-2"
+        />
+        <span className="ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none">
+          {getLanguageInfo(langKey).label}
+        </span>
+      </div>
+    </div>
+  );
+
   const renderContent = useMemo(() => {
     if (!activeLanguage) return null;
 
@@ -535,25 +560,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
         </div>
       )}
 
-      {showFixedLanguageLabel && (
-        <div
-          className={cn(
-            "border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",
-            { "rounded-t-lg": !headerRow },
-          )}
-        >
-          <div className="inline-flex items-center">
-            <Icon
-              name={getLanguageInfo(activeLanguage).icon}
-              size="16px"
-              additionalCSS="mr-2"
-            />
-            <span className="ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none">
-              {getLanguageInfo(activeLanguage).label}
-            </span>
-          </div>
-        </div>
-      )}
+      {showFixedLanguageLabel &&
+        renderLanguageLabel(activeLanguage)}
 
       {showLanguageSelector &&
         (showFullSelector ? (
@@ -563,32 +571,10 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
             onLanguageChange={handleLanguageChange}
           />
         ) : (
-          <div
-            className={cn(
-              "border-b border-neutral-300 dark:border-neutral-1000 h-[2.125rem] inline-flex items-center px-3 w-full",
-              { "rounded-t-lg": !headerRow },
-            )}
-          >
-            {filteredLanguages.length > 0 && (
-              <div
-                className={cn("inline-flex items-center", {
-                  "cursor-pointer": filteredLanguages.length > 0,
-                })}
-                {...(filteredLanguages.length > 0 && {
-                  onClick: () => handleLanguageChange(filteredLanguages[0]),
-                })}
-              >
-                <Icon
-                  name={getLanguageInfo(filteredLanguages[0]).icon}
-                  size="16px"
-                  additionalCSS="mr-2"
-                />
-                <span className="ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none">
-                  {getLanguageInfo(filteredLanguages[0]).label}
-                </span>
-              </div>
-            )}
-          </div>
+          renderLanguageLabel(
+            filteredLanguages[0],
+            () => handleLanguageChange(filteredLanguages[0]),
+          )
         ))}
       <div
         ref={codeRef}

src/core/CodeSnippet/languages.ts

@@ -8,6 +8,9 @@ export interface LanguageInfo {
 
 export type LanguageMap = Record<string, LanguageInfo>;
 
+export const SDK_PREFIXES = ["realtime", "rest", "client", "agent"] as const;
+export type SDKType = (typeof SDK_PREFIXES)[number];
+
 const languages: LanguageMap = {
   javascript: {
     label: "JavaScript",
@@ -133,10 +136,10 @@ const languages: LanguageMap = {
 };
 
 export const stripSdkType = (lang: string) => {
-  const prefixes = ["realtime_", "rest_", "fe_", "be_"];
-  for (const prefix of prefixes) {
-    if (lang.startsWith(prefix)) {
-      return lang.slice(prefix.length);
+  for (const prefix of SDK_PREFIXES) {
+    const withUnderscore = `${prefix}_`;
+    if (lang.startsWith(withUnderscore)) {
+      return lang.slice(withUnderscore.length);
     }
   }
   return lang;