@stainless-api/docs 0.1.0-beta.13 → 0.1.0-beta.130

package/plugin/components/StainlessIslands.tsx

@@ -0,0 +1,126 @@
+/**
+ * Technical overview:
+ * - `StainlessIslands.ts` is an Astro Client Island wherein we register a HTML custom element called `stl-island`
+ *     - When a `<stl-island component="MyComponent">` is added to the DOM, we:
+ *         1. receive a callback from the browser
+ *         2. dynamic-import `MyComponent`
+ *         3. create an instance of `MyComponent`, to which we pass the **`stl-island` DOM node** as a prop named `parent`
+ *         4. register the (`stlIslandDomNode` → `ReactNode`) pair in a global map named `roots`
+ *     - The actual Astro client island is a simple React component that renders all of the ReactNodes from the global `roots` map
+ *         - it uses a `useSyncExternalStore` to be notified of changes to the global `roots` map by registering a callback
+ *     - Each “stainless island” (instantiated by the custom element handler and rendered by the Astro client island) is responsible for using the `parent` prop it receives to identify one or more **portal targets** into which it can render its contents.
+ *         - the react parent of all Stainless Islands is the global `<StainlessIslands client:load />` singleton, but the _DOM parent_ is the various portal targets of all of the stainless islands
+ */
+
+import { useSyncExternalStore, ReactNode } from 'react';
+
+type StlIslandComponent = ({ parent }: { parent: HTMLElement }) => ReactNode;
+
+/**
+ * Register new Stainless Islands in this map.
+ * The component should be the default export and should be able to be dynamic-imported.
+ * The component should accept a single prop: `parent: HTMLElement`, which is the DOM node of the `<stl-island>` element.
+ * The component can create portals to render into the DOM subtree of the `parent`.
+ */
+const componentsMap: Record<string, () => Promise<{ default: StlIslandComponent }>> = {
+  SnippetStainlessIsland: () => import('./RequestBuilder/SnippetStainlessIsland'),
+};
+
+interface State {
+  roots: Map<HTMLElement, ReactNode>;
+  onRootsChange?: (() => void) | undefined;
+}
+
+// keep state in import.meta.hot.data so that our record of our react roots is not lost across HMR
+const state: State = import.meta.hot?.data?.state ?? {
+  roots: new Map(),
+};
+
+if (import.meta.hot?.data) {
+  import.meta.hot.data.state = state;
+}
+
+let key = 0;
+
+/**
+ * Custom element mounts and unmounts components and gives them a reference to the parent
+ * so they can render in portals.
+ */
+class StlIsland extends (globalThis?.HTMLElement ?? Object) {
+  connectedCallback(this: StlIsland) {
+    const componentName = this.getAttribute('component');
+    if (!componentName) {
+      console.error('[stl-island] missing required attribute "component"');
+      return;
+    }
+
+    if (!componentsMap[componentName]) {
+      console.error(`[stl-island] unknown component "${componentName}"`);
+      return;
+    }
+
+    componentsMap[componentName]().then(
+      ({ default: Component }) => {
+        state.roots = new Map(state.roots).set(this, <Component parent={this} key={key++} />);
+        state.onRootsChange?.();
+      },
+      (e) => {
+        console.error(`[stl-island] failed to load component "${componentName}":`, e);
+      },
+    );
+  }
+  connectedMoveCallback() {
+    // empty so we don't get disconnected/reconnected if the dom element gets moved
+  }
+  disconnectedCallback() {
+    state.roots = new Map(state.roots);
+    state.roots.delete(this);
+    state.onRootsChange?.();
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('stl-island')) {
+  customElements.define('stl-island', StlIsland);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'stl-island': StlIsland;
+  }
+}
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      // client-loaded
+      'stl-island': React.DetailedHTMLProps<React.HTMLAttributes<StlIsland>, StlIsland> & {
+        component: keyof typeof componentsMap;
+      };
+    }
+  }
+}
+
+/** Renders all StainlessIslands that have been registered in the global `state.roots` map */
+function StainlessIslandsInner() {
+  const roots = useSyncExternalStore<Map<HTMLElement, ReactNode> | null>(
+    (onChange) => {
+      state.onRootsChange = onChange;
+      return () => {
+        state.onRootsChange = undefined;
+      };
+    },
+    () => {
+      return state.roots;
+    },
+    () => null,
+  );
+  if (!roots) return null;
+  return [...roots.values()];
+}
+
+export function StainlessIslands() {
+  // Astro tries to call this function outside of react to detect if it's
+  // an Astro JSX or React JSX component, which causes warnings if we use hooks,
+  // so we use a wrapper component to avoid the hook calls.
+  return <StainlessIslandsInner />;
+}

package/plugin/components/search/SearchAlgolia.astro

@@ -1,23 +1,25 @@
 ---
-import { Icon } from '@astrojs/starlight/components';
 import { DocsSearch } from './SearchIsland';
-import { SEARCH } from 'virtual:stl-starlight-virtual-module';
+import { Button } from '@stainless-api/ui-primitives';
+import { SearchIcon, XIcon } from 'lucide-react';
 ---
 
-<site-search>
-  <button
-    popovertarget="stldocs-search"
+<site-search class={Astro.props.class}>
+  <Button
+    popoverTarget="stldocs-search"
     data-open-modal
     aria-label={Astro.locals.t('search.label')}
     aria-keyshortcuts="Control+K"
-    class="stldocs-button stldocs-button-secondary"
+    variant="outline"
+    className="stl-algolia-search"
   >
-    <Icon name="magnifier" />
+    <SearchIcon className="icon-search" size={14} />
+    <XIcon className="icon-close" size={14} />
     <span class="sl-hidden md:sl-block" aria-hidden="true">{Astro.locals.t('search.label')}</span>
     <kbd class="sl-hidden md:sl-flex" style="display: none;">
       <kbd>{Astro.locals.t('search.ctrlKey')}</kbd><kbd>K</kbd>
     </kbd>
-  </button>
+  </Button>
 
   <DocsSearch
     client:only="react"
@@ -31,27 +33,6 @@ import { SEARCH } from 'virtual:stl-starlight-virtual-module';
   />
 </site-search>
 
-{
-  SEARCH?.enableAISearch === true && (
-    <button id="chat-button" popovertarget="stldocs-chat" data-open-modal>
-      <Icon name="comment" />
-    </button>
-  )
-}
-
-<style>
-  #chat-button {
-    background: var(--sl-color-bg-ui);
-    border: 1px solid var(--sl-color-hairline);
-    height: 2.25rem;
-    width: 2.25rem;
-
-    &:hover {
-      border: 1px solid rgb(64, 64, 64);
-    }
-  }
-</style>
-
 <script is:inline>
   function setupShortcut() {
     const openBtn = document.querySelector('button[data-open-modal]');
@@ -78,3 +59,39 @@ import { SEARCH } from 'virtual:stl-starlight-virtual-module';
     }
   });
 </script>
+
+<style is:inline>
+  .default-tabs-container .stl-algolia-search {
+    max-width: unset;
+    width: unset;
+    flex-grow: 1;
+  }
+  .stl-algolia-search {
+    padding: 0;
+  }
+  @media (min-width: 50rem) {
+    .stl-algolia-search {
+      padding: 8px 10px;
+    }
+  }
+
+  .stl-algolia-search {
+    .icon-search {
+      display: inline;
+    }
+
+    .icon-close {
+      display: none;
+    }
+  }
+
+  site-search:has(#stldocs-search[data-stldocs-modal-open='true']) .stl-algolia-search {
+    .icon-search {
+      display: none;
+    }
+
+    .icon-close {
+      display: inline;
+    }
+  }
+</style>

package/plugin/components/search/SearchIsland.tsx

@@ -1,33 +1,35 @@
-import * as React from 'react';
-import { BASE_PATH, SEARCH } from 'virtual:stl-starlight-virtual-module';
-import { parseRoute, generateRoute } from '@stainless-api/docs-ui/src/routing';
-import { SearchModal } from '@stainless-api/docs-ui/src/search/index';
-import { ChatModal } from '@stainless-api/docs-ui/src/components/chat';
+import { useMemo } from 'react';
+import { RESOLVED_API_REFERENCE_PATH, HIGHLIGHT_THEMES } from 'virtual:stl-starlight-virtual-module';
+import { parseRoute, generateRoute } from '@stainless-api/docs-ui/routing';
+import { SearchModal } from '@stainless-api/docs-search';
 import * as Markdoc from '@markdoc/markdoc';
 import { createHighlighter } from 'shiki';
 import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';
 
 import {
   DocsProvider,
-  MarkdownProvider,
+  type MarkdownContextValue,
   NavigationProvider,
-  SearchProvider,
-} from '@stainless-api/docs-ui/src/contexts';
-import type { SearchSettings } from '@stainless-api/docs-ui/src/search/types';
+  SuspensefulMarkdownProvider,
+} from '@stainless-api/docs-ui/contexts';
+import { ComponentProvider } from '@stainless-api/docs-ui/contexts/component';
+import { SearchProvider } from '@stainless-api/docs-search/context';
+import type { SearchSettings } from '@stainless-api/docs-search/types';
 
-let $$highlighter: HighlighterGeneric<BundledLanguage, BundledTheme> | null = null;
-async function getHighlighter() {
-  if ($$highlighter === null) {
-    $$highlighter = await createHighlighter({
+declare global {
+  var __docsSearchShikiSingleton: Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> | undefined;
+}
+function getHighlighter() {
+  if (!globalThis.__docsSearchShikiSingleton) {
+    globalThis.__docsSearchShikiSingleton = createHighlighter({
       themes: ['github-dark'],
       langs: ['typescript', 'python', 'go', 'java', 'kotlin', 'ruby'],
     });
   }
-
-  return $$highlighter;
+  return globalThis.__docsSearchShikiSingleton;
 }
 
-async function createMarkdownRenderer() {
+async function createMarkdownRenderer(): Promise<MarkdownContextValue> {
   const highlighter = await getHighlighter();
   const markdocConfig: Markdoc.Config = {
     nodes: {
@@ -36,8 +38,15 @@ async function createMarkdownRenderer() {
         ...Markdoc.nodes.fence,
         transform(node, config) {
           const attributes = node.transformAttributes(config);
+          if (typeof node.attributes.language !== 'string' || typeof node.attributes.content !== 'string') {
+            throw new Error('Expected language and content to be strings');
+          }
           const lang = node.attributes.language === 'node' ? 'typescript' : node.attributes.language;
-          const code = highlighter.codeToTokens(node.attributes.content, { lang, theme: 'github-dark' });
+          const code = highlighter.codeToTokens(node.attributes.content, {
+            // @ts-expect-error - TODO: narrowing
+            lang,
+            theme: 'github-dark',
+          });
 
           return new Markdoc.Tag(
             'pre',
@@ -59,42 +68,57 @@ async function createMarkdownRenderer() {
         transform(node, config) {
           const children = node.transformChildren(config);
           const attrs = node.transformAttributes(config);
-          const href = attrs['href'].replace('docs://BASE_PATH', BASE_PATH);
+          if (typeof attrs['href'] !== 'string') throw new Error('Expected href to be a string');
+          const href = attrs['href'].replace('docs://BASE_PATH', RESOLVED_API_REFERENCE_PATH);
           return new Markdoc.Tag(this.render, { ...attrs, href }, children);
         },
       },
     },
   };
 
-  return (content: string) => {
-    const ast = Markdoc.parse(content);
-    const transformed = Markdoc.transform(ast, markdocConfig);
-    return Markdoc.renderers.html(transformed);
+  return {
+    render: (content: string) => {
+      const ast = Markdoc.parse(content);
+      const transformed = Markdoc.transform(ast, markdocConfig);
+      return Markdoc.renderers.html(transformed);
+    },
+    highlight: (content: string, language: string) => {
+      return highlighter.codeToHtml(content, {
+        lang: language ?? 'javascript',
+        themes: HIGHLIGHT_THEMES || {},
+      });
+    },
   };
 }
 
 export function DocsSearch({ settings, currentPath }: { settings: SearchSettings; currentPath: string }) {
-  const renderMarkdown = React.use(createMarkdownRenderer());
-  const { stainlessPath, language } = parseRoute(BASE_PATH, currentPath);
-  const pageFind = import.meta.env.DEV ? undefined : '/pagefind/pagefind.js';
+  const rendererPromise = useMemo(() => createMarkdownRenderer(), []);
+  const { stainlessPath, language } = parseRoute(RESOLVED_API_REFERENCE_PATH, currentPath);
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  const pageFind = import.meta.env.DEV
+    ? undefined
+    : `${import.meta.env.BASE_URL}/pagefind/pagefind.js`.replace(/\/+/g, '/');
 
-  function handleSelect(path: string) {
-    const url = path.startsWith('/') ? path : generateRoute(BASE_PATH, language, path);
+  function handleSelect(selectedPath: string) {
+    const url = selectedPath.startsWith('/')
+      ? selectedPath
+      : generateRoute(RESOLVED_API_REFERENCE_PATH, language, selectedPath);
     if (url) window.location.href = url;
   }
 
   return (
     <DocsProvider spec={null} language={language}>
-      <NavigationProvider basePath="/" selectedPath={stainlessPath}>
-        <MarkdownProvider render={renderMarkdown}>
-          <SearchProvider onSelect={handleSelect} pageFind={pageFind} settings={settings}>
-            <div className="stldocs-root">
-              <SearchModal id="stldocs-search" />
-              {SEARCH?.enableAISearch === true && <ChatModal id="stldocs-chat" />}
-            </div>
-          </SearchProvider>
-        </MarkdownProvider>
-      </NavigationProvider>
+      <ComponentProvider>
+        <NavigationProvider basePath="/" selectedPath={stainlessPath}>
+          <SuspensefulMarkdownProvider value={rendererPromise}>
+            <SearchProvider onSelect={handleSelect} pageFind={pageFind} settings={settings}>
+              <div className="stldocs-root">
+                <SearchModal id="stldocs-search" />
+              </div>
+            </SearchProvider>
+          </SuspensefulMarkdownProvider>
+        </NavigationProvider>
+      </ComponentProvider>
     </DocsProvider>
   );
 }

package/plugin/generateAPIReferenceLink.ts

@@ -1,47 +1,7 @@
 // This is probably temporary, but it fills in functionality needed for Mintlify imports
 
-import type { StarlightRouteData } from '@astrojs/starlight/route-data';
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-import { walkTree } from '@stainless-api/docs-ui/src/routing';
-
 const INTERNAL_REFERENCE_ENTRY_MARKER = 'STL_STARLIGHT_API_REFERENCE_METHOD_LINK_PLACEHOLDER';
 
-type SidebarEntry = StarlightRouteData['sidebar'][number];
-
-type SidebarLink = Extract<SidebarEntry, { href: string }>;
-
-export function getMethodFromSDKJSON(spec: SDKJSON.Spec, endpoint: string) {
-  for (const entry of walkTree(spec)) {
-    if (entry.data.kind === 'http_method' && entry.data.endpoint === endpoint) {
-      return entry.data;
-    }
-  }
-  throw new Error(`Endpoint ${endpoint} not found in API`);
-}
-
-export function recursiveReplacePlaceholderItems(
-  sidebar: SidebarEntry[],
-  modifyFn: (entry: SidebarLink, props: { endpoint: string; label?: string }) => void,
-) {
-  for (const entry of sidebar) {
-    const endpoint = 'attrs' in entry && entry.attrs?.['data-stldocs-endpoint'];
-    if (
-      'attrs' in entry &&
-      entry.attrs?.about === INTERNAL_REFERENCE_ENTRY_MARKER &&
-      endpoint &&
-      typeof endpoint === 'string'
-    ) {
-      modifyFn(entry, {
-        endpoint,
-        label: entry.attrs?.['data-stldocs-label'],
-      });
-    }
-    if ('entries' in entry) {
-      recursiveReplacePlaceholderItems(entry.entries, modifyFn);
-    }
-  }
-}
-
 type GenerateProps = string | { label?: string; endpoint: string };
 
 function normalizeGenerateProps(generateProps: GenerateProps) {

package/plugin/globalJs/ai-dropdown-options.ts

@@ -0,0 +1,248 @@
+import { initDropdownButton } from '@stainless-api/ui-primitives/scripts';
+import { getPageLoadEvent } from '../helpers/getPageLoadEvent';
+
+export type DropdownIcon = 'markdown' | 'copy' | 'claude' | 'chatgpt' | 'gemini' | 'cursor';
+
+interface DropdownOptionInputProps {
+  onClick: () => void;
+  icon: DropdownIcon;
+  primaryAction?: boolean;
+  clientHidden?: () => boolean;
+  external: boolean;
+}
+
+function option(label: string[] | string, props: DropdownOptionInputProps) {
+  const labelArr = typeof label === 'string' ? [label] : label;
+  return {
+    ...props,
+    label: labelArr,
+    primaryAction: props.primaryAction ?? false,
+    clientHidden: props.clientHidden ?? (() => false),
+    id: labelArr.join('').toLowerCase().replace(/ /g, '-'),
+  };
+}
+
+type DropdownOption = ReturnType<typeof option>;
+
+function getMarkdownUrl(type: 'relative' | 'absolute') {
+  const currentUrl = new URL(window.location.href);
+  const hasTrailingSlash = currentUrl.pathname.endsWith('/');
+
+  const markdownUrl = [
+    type === 'absolute' ? currentUrl.origin : '',
+    currentUrl.pathname,
+    hasTrailingSlash ? '' : '/',
+    'index.md',
+  ].join('');
+
+  return markdownUrl;
+}
+
+function getURLEncodedPrompt() {
+  const mdUrl = getMarkdownUrl('absolute');
+  const aiPrompt = encodeURIComponent(
+    `Load the contents of ${mdUrl} into this chat's context so we can discuss it.`,
+  );
+  return aiPrompt;
+}
+
+function openDeepLink({ deepLinkUrl, fallbackUrl }: { deepLinkUrl: string; fallbackUrl: string }) {
+  if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrom')) {
+    // safari doesn't let us detect if the deep link worked
+    window.open(fallbackUrl, '_blank');
+    return;
+  }
+
+  const controller = new AbortController();
+  let frame: HTMLIFrameElement | null;
+
+  // We are using a native deep link with a fallback web url.
+  if (navigator.userAgent.includes('Chrom')) {
+    // In Chrome, load it in a hidden frame, this shows the "Do you want to open ...?" prompt, but unlike
+    // top level navigation this preserves our userActivation, so we can open the fallback if it fails.
+    frame = Object.assign(document.createElement('iframe'), { src: deepLinkUrl });
+    document.head.append(frame);
+  } else {
+    // In Firefox do the opposite.
+    location.href = deepLinkUrl;
+  }
+
+  // The popup (in non-Safari browsers) fires a `blur` event.
+  window.addEventListener(
+    'blur',
+    () => {
+      controller.abort();
+    },
+    controller,
+  );
+
+  // If it's been 300ms with no popup, open the fallback web url.
+  const timeout = setTimeout(() => {
+    window.open(fallbackUrl, '_blank');
+  }, 300);
+
+  controller.signal.addEventListener('abort', () => {
+    clearTimeout(timeout);
+    frame?.remove();
+  });
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent#mobile_tablet_or_desktop
+const hasMobileUserAgent = () => navigator.userAgent.includes('Mobi');
+
+// 2d array of dropdown options
+// each sub-array is a group, separated by a horizontal rule in the UI
+const aiDropdownOptions: DropdownOption[][] = [
+  [
+    option(['Open in ', 'Claude'], {
+      onClick: () => {
+        window.open(`https://claude.ai/new?q=${getURLEncodedPrompt()}`, '_blank');
+      },
+      icon: 'claude',
+      primaryAction: false,
+      external: true,
+    }),
+    option(['Open in ', 'ChatGPT'], {
+      onClick: () => {
+        window.open(`https://chatgpt.com/?hints=search&prompt=${getURLEncodedPrompt()}`, '_blank');
+      },
+      icon: 'chatgpt',
+      primaryAction: false,
+      external: true,
+    }),
+    option(['Open in ', 'Cursor'], {
+      onClick: () => {
+        const aiPrompt = getURLEncodedPrompt();
+        openDeepLink({
+          deepLinkUrl: `cursor://anysphere.cursor-deeplink/prompt?text=${aiPrompt}`,
+          fallbackUrl: `https://cursor.com/link/prompt?text=${aiPrompt}`,
+        });
+      },
+      clientHidden: hasMobileUserAgent,
+      icon: 'cursor',
+      primaryAction: false,
+      external: true,
+    }),
+  ],
+  [
+    option('Copy Markdown', {
+      onClick: () => {
+        // Source: https://wolfgangrittner.dev/how-to-use-clipboard-api-in-firefox/
+        const markdownUrl = getMarkdownUrl('relative');
+        // ClipboardItem doesn't exist in every browser
+        // eslint-disable-next-line no-constant-binary-expression
+        if (typeof ClipboardItem && navigator.clipboard.write) {
+          // NOTE: Safari locks down the clipboard API to only work when triggered
+          //   by a direct user interaction. You can't use it async in a promise.
+          //   But! You can wrap the promise in a ClipboardItem, and give that to
+          //   the clipboard API.
+          //   Found this on https://developer.apple.com/forums/thread/691873
+          const text = new ClipboardItem({
+            'text/plain': fetch(markdownUrl)
+              .then((response) => response.text())
+              .then((text) => new Blob([text], { type: 'text/plain' })),
+          });
+          navigator.clipboard.write([text]).catch(() => {
+            console.error('Failed to copy to clipboard using ClipboardItem');
+          });
+        } else {
+          // NOTE: Firefox has support for ClipboardItem and navigator.clipboard.write,
+          //   but those are behind `dom.events.asyncClipboard.clipboardItem` preference.
+          //   Good news is that other than Safari, Firefox does not care about
+          //   Clipboard API being used async in a Promise.
+          fetch(markdownUrl)
+            .then((response) => response.text())
+            .then((text) => navigator.clipboard.writeText(text))
+            .catch(() => {
+              console.error('Failed to copy to clipboard');
+            });
+        }
+      },
+      icon: 'copy',
+      primaryAction: true,
+      external: false,
+    }),
+    option('View as Markdown', {
+      onClick: () => {
+        window.open(getMarkdownUrl('absolute'), '_blank');
+      },
+      icon: 'markdown',
+      primaryAction: false,
+      external: true,
+    }),
+  ],
+];
+
+// TODO: Add support for more LLMs
+// {
+//   label: ['Open in ', 'Gemini'],
+//   onClick: () => {
+//     openInLLM('https://gemini.google.com?prompt_action=prefill&prompt_text=');
+//   },
+//   icon: 'gemini',
+//   primaryAction: false,
+// },
+
+export function getAIDropdownOptions() {
+  const renderedOptions = aiDropdownOptions.map((group, index) => {
+    return {
+      options: group,
+      isLast: index === aiDropdownOptions.length - 1,
+      reactKey: index,
+    };
+  });
+
+  const allOptions = renderedOptions.flatMap((group) => group.options);
+  const primaryAction = allOptions.find((o) => o.primaryAction) ?? allOptions[0]!;
+
+  return {
+    primaryAction,
+    groups: renderedOptions,
+  };
+}
+
+export function wireAIDropdown() {
+  const { primaryAction, groups } = getAIDropdownOptions();
+  const flatOptions = groups.flatMap((group) => group.options);
+  function triggerOption(id: string) {
+    const option = flatOptions.find((option) => option.id === id);
+    if (!option) return;
+    option.onClick();
+  }
+
+  document.addEventListener(getPageLoadEvent(), () => {
+    // we hide the Cursor option on non-desktop devices
+    for (const option of flatOptions) {
+      if (option.clientHidden() === true) {
+        const el = document.querySelector(
+          `[data-dropdown-id="ai-dropdown-button"] [data-value="${option.id}"]`,
+        );
+        if (el) {
+          el.remove();
+        }
+      }
+    }
+
+    const dropdowns = document.querySelectorAll('[data-dropdown-id="ai-dropdown-button"]');
+
+    dropdowns.forEach((dropdown) => {
+      initDropdownButton({
+        dropdown: dropdown,
+        onSelect: (value) => {
+          triggerOption(value);
+        },
+        onPrimaryAction: (el) => {
+          triggerOption(primaryAction.id);
+          const span = el.querySelector('[data-part="primary-action-text"]');
+          if (span) {
+            const originalContent = span.textContent;
+            span.textContent = 'Copied!';
+            setTimeout(() => {
+              span.textContent = originalContent;
+            }, 2000);
+          }
+        },
+      });
+    });
+  });
+}