@stainless-api/docs 0.1.0-beta.133 → 0.1.0-beta.135

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.135
+
+### Patch Changes
+
+- dea0395: fix backwards llmsTxt.disabled parsing
+
+## 0.1.0-beta.134
+
+### Minor Changes
+
+- eb35b5c: Integrate @stainless-api/docs-og-image package into core
+
 ## 0.1.0-beta.133
 
 ### Patch Changes

package/eslint-suppressions.json

@@ -12,26 +12,9 @@
       "count": 2
     }
   },
-  "plugin/globalJs/copy.ts": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 4
-    },
-    "@typescript-eslint/no-floating-promises": {
-      "count": 1
-    },
-    "@typescript-eslint/no-unsafe-assignment": {
-      "count": 2
-    },
-    "@typescript-eslint/no-unsafe-member-access": {
-      "count": 3
-    }
-  },
   "plugin/index.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
-    },
-    "@typescript-eslint/no-unsafe-assignment": {
-      "count": 1
     }
   },
   "plugin/languages.ts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.133",
+  "version": "0.1.0-beta.135",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,10 @@
     "./components/ContentBreadcrumbs": "./stl-docs/components/ContentBreadcrumbs.tsx",
     "./components/AIDropdown": "./stl-docs/components/AIDropdown.tsx",
     "./components/Footer": "./stl-docs/components/Footer.astro",
-    "./components/Pagination": "./stl-docs/components/pagination/Pagination.astro"
+    "./components/Pagination": "./stl-docs/components/pagination/Pagination.astro",
+    "./og-image/components/OpenGraphImage": "./stl-docs/og-image/components/OpenGraphImage.tsx",
+    "./og-image/components/OpenGraphFunctionSignature": "./stl-docs/og-image/components/OpenGraphFunctionSignature.tsx",
+    "./schema-extension": "./stl-docs/schema-extension.ts"
   },
   "keywords": [],
   "author": "",
@@ -35,11 +38,17 @@
   },
   "peerDependencies": {
     "@astrojs/starlight": ">=0.38.0",
+    "@takumi-rs/image-response": ">=0.66.6",
     "astro": ">=6.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "vite": ">=7.3.1"
   },
+  "peerDependenciesMeta": {
+    "@takumi-rs/image-response": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@astrojs/markdown-remark": "^7.1.0",
     "@astrojs/react": "^5.0.3",
@@ -62,7 +71,6 @@
     "remend": "^1.3.0",
     "shiki": "^4.0.2",
     "unified": "^11.0.5",
-    "vite-plugin-prebundle-workers": "^0.2.0",
     "web-worker": "^1.5.0",
     "@stainless-api/docs-search": "0.1.0-beta.48",
     "@stainless-api/docs-ui": "0.1.0-beta.95",
@@ -70,16 +78,17 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.8",
+    "@takumi-rs/image-response": "^0.73.1",
     "@types/node": "24.12.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "astro": "^6.1.5",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "typescript": "6.0.2",
     "vite": "^7.3.2",
-    "vitest": "^4.1.3",
+    "vitest": "^4.1.4",
     "zod": "^4.3.6",
     "@stainless/eslint-config": "0.1.0-beta.2",
     "@stainless/sdk-json": "^0.1.0-beta.10"

package/plugin/components/SnippetCode.tsx

@@ -8,7 +8,6 @@ import style from '@stainless-api/docs-ui/style';
 import * as cheerio from 'cheerio/slim';
 import {
   EXPERIMENTAL_COLLAPSIBLE_SNIPPETS,
-  EXPERIMENTAL_PLAYGROUNDS,
   EXPERIMENTAL_REQUEST_BUILDER,
 } from 'virtual:stl-starlight-virtual-module';
 import clsx from 'clsx';
@@ -18,26 +17,6 @@ import React from 'react';
 import { RequestBuilder } from './RequestBuilder';
 import { Method } from '@stainless/sdk-json';
 
-function PlaygroundIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={16}
-      height={16}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={'lucide ' + style.Icon}
-      aria-hidden="true"
-    >
-      <path d="m 1,2 h 1 a 4,4 0 0 1 4,4 v 1 m 5,15 H 10 A 4,4 0 0 1 6,18 V 6 a 4,4 0 0 1 4,-4 h 1 M 1,22 H 2 A 4,4 0 0 0 6,18 V 17 M 14.029059,8.147837 A 1.2853426,1.2853426 0 0 1 15.978924,7.0437277 L 22.40178,10.8959 a 1.2853426,1.2853426 0 0 1 0,2.208219 l -6.422856,3.852172 a 1.2853426,1.2853426 0 0 1 -1.949865,-1.105395 z" />
-    </svg>
-  );
-}
-
 /*
  * This may be replaced by additional data from the sdk.
  * Without information from the sdk, we use simple heuristics per language.
@@ -172,21 +151,11 @@ export function SnippetContainer({ children, signature, method }: SnippetContain
   );
 }
 
-export function SnippetButtons({ content }: { content: string }) {
-  void content;
-  const language = useLanguage();
+export function SnippetButtons() {
   return (
-    <>
-      <Button variant="outline" data-stldocs-snippet-copy>
-        <CopyIcon size={16} className={style.Icon} />
-      </Button>
-      {EXPERIMENTAL_PLAYGROUNDS &&
-        (language === 'python' || language === 'typescript' || language === 'http') && (
-          <Button data-stldocs-snippet-play variant="muted" border title="Play">
-            <PlaygroundIcon />
-          </Button>
-        )}
-    </>
+    <Button variant="outline" data-stldocs-snippet-copy>
+      <CopyIcon size={16} className={style.Icon} />
+    </Button>
   );
 }
 

package/plugin/globalJs/copy.ts

@@ -1,10 +1,4 @@
-import {
-  RESOLVED_API_REFERENCE_PATH,
-  EXPERIMENTAL_COLLAPSIBLE_SNIPPETS,
-} from 'virtual:stl-starlight-virtual-module';
-import { getPageLoadEvent } from '../helpers/getPageLoadEvent';
-import { updateSelectedLanguage } from '../languages';
-import { navigate } from 'astro/virtual-modules/transitions-router.js';
+import { EXPERIMENTAL_COLLAPSIBLE_SNIPPETS } from 'virtual:stl-starlight-virtual-module';
 const copyIcon = `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`;
 const circleAlertIcon = `<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>`;
 const checkIcon = `<path d="M20 6 9 17l-5-5"/>`;
@@ -25,13 +19,6 @@ function getContent(button: HTMLElement, full: boolean) {
   return contentCopy.textContent;
 }
 
-const preloadPlayground = (event: Event) => {
-  const playButton = (event.target as HTMLElement).closest('[data-stldocs-snippet-play]') as HTMLElement;
-  if (playButton) {
-    loadPlayground(playButton);
-  }
-};
-addEventListener('mouseover', preloadPlayground);
 addEventListener('click', (event) => {
   if (!(event.target instanceof Element)) return;
   const copyButton = event.target.closest('[data-stldocs-snippet-copy]');
@@ -54,72 +41,4 @@ addEventListener('click', (event) => {
         }).toString();
       });
   }
-
-  const playButton = event.target.closest('[data-stldocs-snippet-play]');
-  if (playButton instanceof HTMLElement) {
-    showPlayground(playButton).catch(() => {
-      console.error('Failed to load playground');
-    });
-  }
-});
-
-async function showPlayground(playButton: HTMLElement) {
-  if (playButton.getAttribute('aria-disabled') === 'true') return;
-  const iconElement = playButton.querySelector('.stldocs-icon') as SVGElement;
-  try {
-    // use aria-disabled, not disabled, to avoid losing focus
-    playButton.setAttribute('aria-disabled', 'true');
-    playButton.setAttribute('aria-label', 'Loading playground...');
-    playButton.classList.add('stl-ui-button--loading');
-    const showPlayground = loadPlayground(playButton);
-    await showPlayground();
-  } catch (e) {
-    console.error(e);
-    iconElement.innerHTML = circleAlertIcon;
-  }
-  playButton.removeAttribute('aria-disabled');
-  playButton.removeAttribute('aria-label');
-  playButton.classList.remove('stl-ui-button--loading');
-}
-
-function loadPlayground(playButton: HTMLElement) {
-  (playButton as any).__playgroundLoadPromise ??= (async () => {
-    const container = playButton.closest('.stldocs-snippet') as HTMLElement;
-    const language = (container.querySelector('.stl-sdk-select') as HTMLElement).dataset.currentValue;
-    const code = getContent(playButton, true);
-    // eslint-disable-next-line turbo/no-undeclared-env-vars
-    if (import.meta.env.DEV) {
-      const id = '/@id/astro:scripts/before-hydration.js';
-      await import(/* @vite-ignore */ id).catch(console.warn);
-    }
-    const { createPlayground } = await import('virtual:stl-playground/create');
-    const { default: playgroundData } = await import('virtual:stl-playground/data');
-    return createPlayground({
-      lang: language as any,
-      doc: (language === 'python' ? 'from rich import print\n' : '') + code.trimEnd(),
-      container,
-      onLanguageSelect: (value) => {
-        const originalLanguage = container.querySelector<HTMLElement>('[data-stldocs-snippet-select]')
-          ?.dataset.currentValue;
-        const path: string = updateSelectedLanguage(RESOLVED_API_REFERENCE_PATH, originalLanguage, value);
-        navigate(path.replace(/(\?.+)?($|#)/, (_, str, end) => (str ? str + '&play' : '?play') + end));
-      },
-      ...playgroundData,
-    });
-  })();
-  return async () => {
-    const promise = (playButton as any).__playgroundLoadPromise;
-    (playButton as any).__playgroundLoadPromise = null;
-    await ((await promise) as () => Promise<void>)();
-  };
-}
-document.addEventListener(getPageLoadEvent(), () => {
-  if (new URL(location.href).searchParams.has('play')) {
-    document.querySelectorAll('[data-stldocs-snippet-play]').forEach((e) => {
-      if (e instanceof HTMLElement)
-        showPlayground(e).catch(() => {
-          console.error('Failed to load playground');
-        });
-    });
-  }
 });

package/plugin/index.ts

@@ -26,7 +26,6 @@ import { getSharedLogger } from '../shared/getSharedLogger';
 import { resolveSrcFile } from '../resolveSrcFile';
 import { mkdir, writeFile } from 'fs/promises';
 import { fileURLToPath } from 'url';
-import prebundleWorkers from 'vite-plugin-prebundle-workers';
 import { SpecLoader, startSpecLoader } from './specs';
 
 import type * as ReferenceSidebarsVirtualModule from 'virtual:stl-starlight-reference-sidebars';
@@ -93,8 +92,6 @@ function stlStarlightAstroIntegration(pluginConfig: NormalizedStainlessStarlight
   const virtualId = `virtual:stl-starlight-virtual-module`;
   // The '\0' prefix tells Vite “this is a virtual module” and prevents it from being resolved again.
   const resolvedId = `\0${virtualId}`;
-  let playgroundsBase: string | undefined;
-  let buildPlaygrounds: (args: unknown) => Promise<void> | undefined;
   let astroBase = '/';
 
   let specLoader: SpecLoader | undefined;
@@ -104,39 +101,6 @@ function stlStarlightAstroIntegration(pluginConfig: NormalizedStainlessStarlight
     return result.specComposite;
   }
 
-  let building: Promise<void> | undefined;
-  let reportError: ((message: string) => void) | null = null;
-  let collectedErrors: string[] | null = null;
-
-  function startPlaygroundsBuild(playgroundsCachePath: string) {
-    if (!pluginConfig.experimentalPlaygrounds) return;
-    if (building) return building;
-    return (building = (async () => {
-      const specComposite = await resolveSpecs();
-
-      if (specComposite.listUniqueSpecs().length > 1) {
-        throw new Error('Multiple specs found. This is not supported for Playgrounds.');
-      }
-
-      const spec = specComposite.listUniqueSpecs()[0]!.data.sdkJson;
-      const auth = specComposite.listUniqueSpecs()[0]!.data.auth;
-
-      const langs = specComposite.getLanguages();
-
-      return buildPlaygrounds?.({
-        spec,
-        langs,
-        auth,
-        playPath: playgroundsCachePath,
-        reportError(message: string) {
-          (reportError ?? console.error)(message);
-        },
-      })?.catch(() => {
-        console.error('Failed to build playgrounds');
-      });
-    })());
-  }
-
   return {
     name: 'stl-starlight-astro',
     hooks: {
@@ -154,12 +118,6 @@ function stlStarlightAstroIntegration(pluginConfig: NormalizedStainlessStarlight
 
         specLoader = await startSpecLoader(pluginConfig, logger, createCodegenDir());
 
-        reportError = (message: string) => logger.error(message);
-
-        if (pluginConfig.experimentalPlaygrounds) {
-          playgroundsBase = pluginConfig.experimentalPlaygrounds.playgroundsBase;
-        }
-
         const middlewareFileBase = path.join(projectDir, 'middleware.stainless');
         const middlewareFile = ['.tsx', '.ts']
           .map((ext) => middlewareFileBase + ext)
@@ -255,55 +213,11 @@ function stlStarlightAstroIntegration(pluginConfig: NormalizedStainlessStarlight
               ...specLoader.vitePlugins,
               {
                 name: 'stl-starlight-vite',
-                buildStart() {
-                  building = undefined;
-                },
-                async configureServer(server) {
-                  if (playgroundsBase) {
-                    buildPlaygrounds = (await server.ssrLoadModule(playgroundsBase + '/src/build.ts'))
-                      .buildPlaygrounds;
-                  }
-
-                  // TODO: eventually - re-add support for watching local input changes (eg. reloading when OAS/config files change)
-                },
+                // TODO: eventually - re-add support for watching local input changes (eg. reloading when OAS/config files change)
                 resolveId(id) {
                   if (id === virtualId) {
                     return resolvedId;
                   }
-                  if (id === 'virtual:stl-playground/unstable-update-language') {
-                    return resolveSrcFile('plugin/languages.ts');
-                  }
-                  if (id === 'virtual:stl-playground/create') {
-                    return fileURLToPath(
-                      new URL(
-                        pluginConfig.experimentalPlaygrounds
-                          ? path.join(playgroundsBase!, '/src/create.tsx')
-                          : './globalJs/create-playground.shim.ts',
-                        import.meta.url,
-                      ),
-                    );
-                  }
-                  if (id === 'virtual:stl-playground/data') {
-                    return fileURLToPath(
-                      new URL(
-                        pluginConfig.experimentalPlaygrounds
-                          ? './globalJs/playground-data.ts'
-                          : './globalJs/playground-data.shim.ts',
-                        import.meta.url,
-                      ),
-                    );
-                  }
-                  if (id.startsWith('virtual:stl-playground/')) {
-                    const result = path.join(
-                      this.environment.getTopLevelConfig().cacheDir,
-                      'stl-playground',
-                      id.slice('virtual:stl-playground/'.length),
-                    );
-                    const config = this.environment.getTopLevelConfig();
-                    return startPlaygroundsBuild(path.join(config.cacheDir, 'stl-playground'))?.then(
-                      () => result,
-                    );
-                  }
                 },
                 load(id) {
                   if (id === resolvedId) {
@@ -321,7 +235,6 @@ function stlStarlightAstroIntegration(pluginConfig: NormalizedStainlessStarlight
                           pluginConfig.experimentalCollapsibleMethodDescriptions,
                         PROPERTY_SETTINGS: pluginConfig.propertySettings,
                         ENABLE_CONTEXT_MENU: pluginConfig.contextMenu,
-                        EXPERIMENTAL_PLAYGROUNDS: !!pluginConfig.experimentalPlaygrounds,
                         EXPERIMENTAL_REQUEST_BUILDER: pluginConfig.experimentalRequestBuilder,
                         STAINLESS_PROJECT: pluginConfig.stainlessProject,
                         LLMS_TXT_DESCRIPTION: pluginConfig.llmsTxt.description,
@@ -332,42 +245,14 @@ function stlStarlightAstroIntegration(pluginConfig: NormalizedStainlessStarlight
                   }
                 },
               },
-              prebundleWorkers({
-                include: [
-                  '**/typescript/runner*',
-                  '**/typescript/worker*',
-                  '**/pyright.worker*',
-                  '**/python/pyodide*',
-                ],
-                configureEsBuild(_, opts) {
-                  opts.external ??= [];
-                  opts.external.push('url');
-                  opts.loader ??= {};
-                  opts.loader['.wasm'] = 'dataurl';
-                  return opts;
-                },
-              }),
             ],
           },
         });
       },
-      'astro:build:start'({ logger }) {
-        collectedErrors = [];
-        reportError = (message: string) => {
-          logger.error(message);
-          collectedErrors!.push(message);
-        };
-      },
       'astro:build:done': async ({ dir, logger }) => {
         const dist = fileURLToPath(dir);
         const stainlessDir = path.join(dist, '_stainless');
         await mkdir(stainlessDir, { recursive: true });
-        if (collectedErrors) {
-          for (const error of collectedErrors) {
-            logger.error(error);
-          }
-          collectedErrors = null;
-        }
 
         const manifest = {
           astroBase,

package/plugin/loadPluginConfig.ts

@@ -151,12 +151,6 @@ export type StainlessStarlightUserConfig = {
 
   contextMenu?: boolean;
 
-  /**
-   * When set to `import playgrounds from '@stainless-api/playgrounds'`, code snippets will have a "Play" button,
-   * allowing users to edit and run code snippets in their browser.
-   */
-  experimentalPlaygrounds?: { playgroundsBase: string };
-
   /** When set to true, enables the experimental request builder interface for testing API endpoints. */
   experimentalRequestBuilder?: boolean;
 
@@ -397,12 +391,11 @@ function normalizeConfig(partial: SomeStainlessStarlightUserConfig, astroOptions
       includeModelProperties: partial.propertySettings?.includeModelProperties ?? true,
     },
     contextMenu: partial.contextMenu ?? true,
-    experimentalPlaygrounds: partial.experimentalPlaygrounds ?? undefined,
     experimentalRequestBuilder: partial.experimentalRequestBuilder ?? false,
     experimentalPrerender: partial.experimentalPrerender ?? true,
     stainlessProject: partial.stainlessProject,
     llmsTxt: {
-      enabled: partial.llmsTxt?.disabled ?? true,
+      enabled: !partial.llmsTxt?.disabled,
       description: partial.llmsTxt?.description ?? null,
       detailThreshold: partial.llmsTxt?.detailThreshold ?? 2000,
     },

package/plugin/specs/generateSpec.ts

@@ -93,14 +93,9 @@ async function generateSpecFromStrings({
     }
   }
 
-  const opts = Object.entries(config.client_settings.opts).map(([k, v]) => ({ name: k, ...v }));
   return {
     sdkJson,
     languages,
-    auth: sdkJson.security_schemes.map((scheme) => ({
-      ...scheme,
-      opts: opts.filter((opt) => opt.auth?.security_scheme === scheme.name),
-    })),
   };
 }
 

package/stl-docs/index.ts

@@ -27,6 +27,7 @@ import { stainlessStarlight } from '../plugin';
 import { getFontRoles, flattenFonts } from './fonts';
 import conditionalIntegration from '../shared/conditionalIntegration';
 import generateExamplesPlugin from './aiChatExamples';
+import { ogImageStarlightPlugin } from './og-image';
 
 export * from '../plugin';
 
@@ -91,7 +92,11 @@ function stainlessDocsStarlightIntegration(config: NormalizedStainlessDocsConfig
     componentOverrides.Search = resolveSrcFile('/plugin/components/search/Search.astro');
   }
 
-  plugins.push(...config.starlightCompat.plugins, ...config.plugins.map((p) => p(config)));
+  if (config.ogImage) {
+    plugins.push(ogImageStarlightPlugin(config.ogImage, config));
+  }
+
+  plugins.push(...config.starlightCompat.plugins);
 
   // TODO: re-add once we figure out what to do with the client router
   // if (config.enableClientRouter) {

package/stl-docs/loadStlDocsConfig.ts

@@ -1,10 +1,11 @@
 import type { StainlessStarlightUserConfig } from '../plugin/loadPluginConfig';
-import type { StarlightPlugin, StarlightUserConfig } from '@astrojs/starlight/types';
+import type { StarlightUserConfig } from '@astrojs/starlight/types';
 import type { ButtonVariant } from '@stainless-api/ui-primitives';
 import type { AnchorHTMLAttributes } from 'react';
 import type starlight from '@astrojs/starlight';
 import { normalizeFonts, type StlDocsFontConfig } from './fonts';
 import type { ExamplePromptResponse } from './aiChatExamples';
+import type { OGImageConfig } from './og-image/config';
 
 type StarlightConfig = Parameters<typeof starlight>[0];
 
@@ -102,10 +103,11 @@ export type StainlessDocsUserConfig = {
    */
   renderPageDescriptions?: boolean;
   /**
-   * Stainless Docs plugins.
-   * Each plugin is a function that receives the normalized config and returns a Starlight plugin.
+   * Enable and configure Open Graph image generation.
+   *
+   * Requires `@takumi-rs/image-response` to be installed as a dependency.
    */
-  plugins?: ((config: Exclude<NormalizedStainlessDocsConfig, 'plugins'>) => StarlightPlugin)[];
+  ogImage?: OGImageConfig;
 } & PassThroughStarlightConfigOptions;
 
 type HeaderLayout = 'default' | 'stacked';
@@ -195,11 +197,11 @@ function normalizeConfig(userConfig: StainlessDocsUserConfig) {
     contextMenu: userConfig.contextMenu ?? true,
     expressiveCode: userConfig.expressiveCode,
     renderPageDescriptions: userConfig.renderPageDescriptions ?? true,
-    plugins: userConfig.plugins ?? [],
     aiChat: userConfig.experimental?.aiChat,
     linkGroupTitlesToOverviewPages: userConfig.experimental?.linkGroupTitlesToOverviewPages ?? false,
     credits: !userConfig.disableCredits,
     siteTitle: normalizeSiteTitle(userConfig),
+    ogImage: userConfig.ogImage ?? null,
   };
 
   return configWithDefaults;

package/stl-docs/og-image/components/OpenGraphFunctionSignature.tsx

@@ -0,0 +1,64 @@
+import { darkThemeVars, lightThemeVars } from '../theme';
+
+export default function OpenGraphFunctionSignature({
+  params,
+  fullyQualifiedName,
+  theme,
+}: {
+  params: { ident: string; optional?: boolean }[] | undefined;
+  fullyQualifiedName: string | undefined;
+  theme?: 'light' | 'dark';
+}) {
+  if (!params || !fullyQualifiedName) {
+    return null;
+  }
+  const colors = theme === 'dark' ? darkThemeVars : lightThemeVars;
+
+  const joinedParams = params
+    .map((param) => {
+      if (param.optional) {
+        return `${param.ident}?`;
+      }
+      return param.ident;
+    })
+    .filter((p): p is string => p !== null)
+    .join(', ');
+
+  return (
+    <p
+      style={{
+        lineClamp: 1,
+        textOverflow: 'ellipsis',
+        fontSize: '33px',
+        lineHeight: '150%',
+        overflow: 'hidden',
+        width: '100%',
+        color: colors.foreground,
+        marginBottom: 0,
+        marginTop: 0,
+      }}
+    >
+      <span
+        style={{
+          color: colors.foregroundReduced,
+        }}
+      >
+        {fullyQualifiedName.split('.').slice(0, -1).join('.')}.
+      </span>
+      <span
+        style={{
+          fontWeight: 600,
+        }}
+      >
+        {fullyQualifiedName.split('.').slice(-1)}
+      </span>
+      <span
+        style={{
+          fontWeight: 600,
+        }}
+      >
+        ({joinedParams})
+      </span>
+    </p>
+  );
+}