Adds the prompt block

.changeset/lovely-cameras-sip.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add a Prompt block

package.json

@@ -43,7 +43,7 @@
         "catalog": {
             "@tsconfig/strictest": "^2.0.6",
             "@tsconfig/node20": "^20.1.6",
-            "@gitbook/api": "0.184.0",
+            "@gitbook/api": "0.185.0",
             "@scalar/api-client-react": "^1.3.46",
             "@types/react": "^19.0.0",
             "@types/react-dom": "^19.0.0",

packages/gitbook/src/components/DocumentView/Block.tsx

@@ -28,6 +28,7 @@ import { ListItem } from './ListItem';
 import { BlockMath } from './Math';
 import { OpenAPIOperation, OpenAPISchemas, OpenAPIWebhook } from './OpenAPI';
 import { Paragraph } from './Paragraph';
+import { Prompt } from './Prompt';
 import { Quote } from './Quote';
 import { ReusableContent } from './ReusableContent';
 import { Stepper } from './Stepper';
@@ -111,6 +112,8 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
                 return <Updates {...props} block={block} />;
             case 'update':
                 return <Update {...props} block={block} />;
+            case 'prompt':
+                return <Prompt {...props} block={block} />;
             case 'if':
                 // If block should be processed by the API.
                 return null;
@@ -151,6 +154,7 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
         case 'hint':
         case 'tabs':
         case 'stepper-step':
+        case 'prompt':
         case 'if':
             return <SkeletonParagraph id={id} className={style} />;
         case 'expandable':

packages/gitbook/src/components/DocumentView/Prompt/Prompt.tsx

@@ -0,0 +1,63 @@
+import { tcls } from '@/lib/tailwind';
+import {
+    CustomizationPageActionType,
+    type DocumentBlockPrompt,
+    type SiteCustomizationSettings,
+} from '@gitbook/api';
+import { validateIconName } from '@gitbook/icons/icons';
+import type { BlockProps } from '../Block';
+import { getPlainCodeBlock } from '../CodeBlock/highlight';
+import { PromptClient } from './PromptClient';
+
+export function Prompt(props: BlockProps<DocumentBlockPrompt>) {
+    const { block } = props;
+    const contentIcon =
+        block.data.icon && validateIconName(block.data.icon) ? block.data.icon : null;
+
+    return (
+        <div
+            className={tcls(
+                'relative flex w-full flex-col overflow-hidden',
+                'border border-tint-subtle bg-tint-subtle theme-bold-tint:bg-tint-base theme-muted:bg-tint-base text-tint-strong contrast-more:border-tint contrast-more:bg-tint-base',
+                'circular-corners:rounded-2xl rounded-corners:rounded-xl straight-corners:rounded-xs',
+                'depth-subtle:shadow-xs'
+            )}
+        >
+            <PromptClient
+                contentIcon={contentIcon}
+                description={block.data.description}
+                prompt={getPromptText(block)}
+                openInAIProviders={getOpenInAIProviders(props)}
+            />
+        </div>
+    );
+}
+
+function getOpenInAIProviders(props: BlockProps<DocumentBlockPrompt>): boolean {
+    const { block, context } = props;
+    const { openInAIProviders } = block.data;
+
+    if (openInAIProviders !== undefined) {
+        return openInAIProviders;
+    }
+
+    const contentContext = context.contentContext;
+    if (contentContext && 'customization' in contentContext) {
+        const { pageActions } = contentContext.customization;
+        return isExternalAIPageActionEnabled(pageActions);
+    }
+
+    return false;
+}
+
+function isExternalAIPageActionEnabled(
+    pageActions: SiteCustomizationSettings['pageActions']
+): boolean {
+    return pageActions.items
+        ? pageActions.items.includes(CustomizationPageActionType.ExternalAi)
+        : pageActions.externalAI;
+}
+
+function getPromptText(block: DocumentBlockPrompt): string {
+    return (block.nodes ?? []).map((node) => getPlainCodeBlock(node)).join('\n');
+}

packages/gitbook/src/components/DocumentView/Prompt/PromptClient.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import {
+    Button,
+    ButtonGroup,
+    DropdownMenu,
+    DropdownMenuItem,
+    ToggleChevron,
+} from '@/components/primitives';
+import { tString, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
+import { Icon, type IconName } from '@gitbook/icons';
+import React from 'react';
+
+const OPEN_IN_AI_PROVIDERS = ['claude', 'chatgpt', 'cursor'] as const;
+type AIProviders = (typeof OPEN_IN_AI_PROVIDERS)[number];
+
+export function PromptClient(props: {
+    contentIcon: IconName | null;
+    description: string;
+    prompt: string;
+    openInAIProviders: boolean;
+}) {
+    const { contentIcon, description, prompt, openInAIProviders } = props;
+    const language = useLanguage();
+    const promptId = React.useId();
+    const [open, setOpen] = React.useState(false);
+    const [headerHasFocus, setHeaderHasFocus] = React.useState(false);
+    return (
+        <>
+            <div className="group/prompt-header relative flex min-h-9 flex-row items-center justify-between gap-4 px-3 py-2">
+                <button
+                    type="button"
+                    aria-controls={promptId}
+                    aria-expanded={open}
+                    aria-label={tString(language, 'view')}
+                    className={tcls(
+                        'absolute inset-0 z-10 cursor-pointer outline-hidden',
+                        'focus-visible:ring-2 focus-visible:ring-primary-hover'
+                    )}
+                    disabled={!prompt}
+                    onBlur={() => setHeaderHasFocus(false)}
+                    onClick={() => setOpen((prev) => !prev)}
+                    onFocus={() => setHeaderHasFocus(true)}
+                />
+                <div className="pointer-events-none relative z-0 flex min-w-0 flex-row items-center gap-2 text-tint-strong">
+                    <PromptDisclosureIcon
+                        contentIcon={contentIcon}
+                        headerHasFocus={headerHasFocus}
+                        open={open}
+                    />
+                    <span className="min-w-0 truncate">{description}</span>
+                </div>
+                <PromptActions prompt={prompt} openInAIProviders={openInAIProviders} />
+            </div>
+            {open ? (
+                <div id={promptId} className="border-tint-subtle border-t bg-tint-base">
+                    <pre className="overflow-auto p-4 text-sm text-tint-strong">
+                        <code className="language-markdown whitespace-pre-wrap font-mono">
+                            {prompt}
+                        </code>
+                    </pre>
+                </div>
+            ) : null}
+        </>
+    );
+}
+
+function PromptDisclosureIcon(props: {
+    contentIcon: IconName | null;
+    headerHasFocus: boolean;
+    open: boolean;
+}) {
+    const { contentIcon, headerHasFocus, open } = props;
+    return (
+        <span className="relative flex size-4 shrink-0 items-center justify-center">
+            {contentIcon ? (
+                <>
+                    <span
+                        className={tcls(
+                            'flex items-center transition-opacity duration-150 group-hover/prompt-header:opacity-0',
+                            headerHasFocus && 'opacity-0'
+                        )}
+                    >
+                        <Icon icon={contentIcon} className="size-4 shrink-0" />
+                    </span>
+                    <span
+                        className={tcls(
+                            'absolute inset-0 flex items-center justify-center text-tint-subtle opacity-0 transition-opacity duration-150 group-hover/prompt-header:opacity-100',
+                            headerHasFocus && 'opacity-100'
+                        )}
+                    >
+                        <ToggleChevron open={open} orientation="right-to-down" className="size-3" />
+                    </span>
+                </>
+            ) : (
+                <ToggleChevron
+                    open={open}
+                    orientation="right-to-down"
+                    className="size-3 text-tint-subtle"
+                />
+            )}
+        </span>
+    );
+}
+
+function PromptActions(props: { prompt: string; openInAIProviders: boolean }) {
+    const { prompt, openInAIProviders } = props;
+
+    return (
+        <ButtonGroup className="relative z-20 shrink-0 overflow-visible">
+            <CopyPromptButton prompt={prompt} />
+            {openInAIProviders ? <OpenPromptDropdown prompt={prompt} /> : null}
+        </ButtonGroup>
+    );
+}
+
+// time in milliseconds to show the "Copied" message after copying a prompt
+const COPIED_MESSAGE_DURATION = 1000;
+
+function CopyPromptButton(props: { prompt: string }) {
+    const { prompt } = props;
+    const language = useLanguage();
+    const [copied, setCopied] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!copied) {
+            return;
+        }
+
+        const timeout = setTimeout(() => {
+            setCopied(false);
+        }, COPIED_MESSAGE_DURATION);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [copied]);
+
+    return (
+        <Button
+            variant="secondary"
+            size="xsmall"
+            icon={copied ? 'check' : 'copy'}
+            label={copied ? tString(language, 'code_copied') : tString(language, 'prompt_copy')}
+            className="bg-tint-base"
+            disabled={!prompt}
+            onClick={() => {
+                navigator.clipboard.writeText(prompt);
+                setCopied(true);
+            }}
+        />
+    );
+}
+
+function OpenPromptDropdown(props: { prompt: string }) {
+    const { prompt } = props;
+    const language = useLanguage();
+
+    return (
+        <DropdownMenu
+            align="end"
+            className="!min-w-48 max-w-max"
+            button={
+                <Button
+                    icon={<ToggleChevron className="size-text-sm" />}
+                    label={tString(language, 'open')}
+                    iconOnly
+                    size="xsmall"
+                    variant="secondary"
+                    className="bg-tint-base"
+                    disabled={!prompt}
+                />
+            }
+        >
+            {OPEN_IN_AI_PROVIDERS.map((provider) => {
+                const definition = getPromptOpenActionDefinition(provider, prompt);
+
+                return (
+                    <DropdownMenuItem
+                        key={provider}
+                        href={definition.href}
+                        target="_blank"
+                        leadingIcon={definition.icon}
+                    >
+                        {tString(language, 'open_in', definition.label)}
+                    </DropdownMenuItem>
+                );
+            })}
+        </DropdownMenu>
+    );
+}
+
+function getPromptOpenActionDefinition(
+    action: AIProviders,
+    prompt: string
+): { href: string; icon: IconName; label: string } {
+    const encodedPrompt = encodeURIComponent(prompt);
+
+    switch (action) {
+        case 'cursor':
+            return {
+                href: `${CURSOR_PROMPT_URL}?text=${encodedPrompt}`,
+                icon: 'cursor',
+                label: 'Cursor',
+            };
+        case 'claude':
+            return {
+                href: `${CLAUDE_PROMPT_URL}?q=${encodedPrompt}`,
+                icon: 'claude',
+                label: 'Claude',
+            };
+        case 'chatgpt':
+            return {
+                href: `${CHATGPT_PROMPT_URL}?q=${encodedPrompt}`,
+                icon: 'chatgpt',
+                label: 'ChatGPT',
+            };
+    }
+}
+
+const CLAUDE_PROMPT_URL = 'https://claude.ai/new';
+const CHATGPT_PROMPT_URL = 'https://chat.openai.com/';
+const CURSOR_PROMPT_URL = 'https://cursor.com/link/prompt';

packages/gitbook/src/components/DocumentView/Prompt/index.ts

@@ -0,0 +1,2 @@
+export * from './Prompt';
+export type * from './types';

packages/gitbook/src/components/DocumentView/Prompt/types.ts

@@ -0,0 +1,14 @@
+import type { DocumentBlockCode } from '@gitbook/api';
+
+export type PromptBlock = {
+    object: 'block';
+    type: 'prompt';
+    key?: string;
+    data: {
+        icon?: string;
+        description?: string;
+        openInAIProviders?: boolean;
+    };
+    nodes?: DocumentBlockCode[];
+    isVoid?: false;
+};

packages/gitbook/src/intl/translations/ar.ts

@@ -56,6 +56,7 @@ export const ar: TranslationLanguage = {
     annotation_button_label: 'فتح التعليق التوضيحي',
     code_copied: 'تم النسخ!',
     code_copy: 'نسخ',
+    prompt_copy: 'نسخ الموجّه',
     code_block_collapsed: 'عرض كل الأسطر ${1}',
     code_block_expanded: 'عرض أقل',
     table_of_contents_button_label: 'فتح جدول المحتويات',

packages/gitbook/src/intl/translations/bg.ts

@@ -56,6 +56,7 @@ export const bg: TranslationLanguage = {
     annotation_button_label: 'Отваряне на бележка',
     code_copied: 'Копирано!',
     code_copy: 'Копиране',
+    prompt_copy: 'Копиране на подканата',
     code_block_collapsed: 'Показване на всички ${1} реда',
     code_block_expanded: 'Показване на по-малко',
     table_of_contents_button_label: 'Отваряне на съдържанието',

packages/gitbook/src/intl/translations/cs.ts

@@ -56,6 +56,7 @@ export const cs: TranslationLanguage = {
     annotation_button_label: 'Otevřít anotaci',
     code_copied: 'Zkopírováno!',
     code_copy: 'Kopírovat',
+    prompt_copy: 'Kopírovat výzvu',
     code_block_collapsed: 'Zobrazit všech ${1} řádků',
     code_block_expanded: 'Zobrazit méně',
     table_of_contents_button_label: 'Otevřít obsah',

packages/gitbook/src/intl/translations/da.ts

@@ -56,6 +56,7 @@ export const da: TranslationLanguage = {
     annotation_button_label: 'Åbn kommentar',
     code_copied: 'Kopieret!',
     code_copy: 'Kopiér',
+    prompt_copy: 'Kopiér prompten',
     code_block_collapsed: 'Vis alle ${1} linjer',
     code_block_expanded: 'Vis mindre',
     table_of_contents_button_label: 'Åbn indholdsfortegnelse',