diff --git a/.changeset/rnd-11847-separate-prompt-block-actions.md b/.changeset/rnd-11847-separate-prompt-block-actions.md new file mode 100644 index 000000000..b93ee22c5 --- /dev/null +++ b/.changeset/rnd-11847-separate-prompt-block-actions.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Separate the prompt block actions into a primary "Open in" dropdown and a secondary "Copy prompt" button, instead of a single combined button group, and align the block's design with the expandable block (bordered frame, left disclosure chevron, and subtle elevation when expanded). diff --git a/packages/gitbook/src/components/DocumentView/Prompt/Prompt.tsx b/packages/gitbook/src/components/DocumentView/Prompt/Prompt.tsx index b4c50f356..c1ecc4efb 100644 --- a/packages/gitbook/src/components/DocumentView/Prompt/Prompt.tsx +++ b/packages/gitbook/src/components/DocumentView/Prompt/Prompt.tsx @@ -1,4 +1,3 @@ -import { tcls } from '@/lib/tailwind'; import { CustomizationPageActionType, type DocumentBlockPrompt, @@ -15,21 +14,12 @@ export function Prompt(props: BlockProps) { block.data.icon && validateIconName(block.data.icon) ? block.data.icon : null; return ( -
- -
+ ); } diff --git a/packages/gitbook/src/components/DocumentView/Prompt/PromptClient.tsx b/packages/gitbook/src/components/DocumentView/Prompt/PromptClient.tsx index b768e99c7..cb2fbfe69 100644 --- a/packages/gitbook/src/components/DocumentView/Prompt/PromptClient.tsx +++ b/packages/gitbook/src/components/DocumentView/Prompt/PromptClient.tsx @@ -1,12 +1,6 @@ 'use client'; -import { - Button, - ButtonGroup, - DropdownMenu, - DropdownMenuItem, - ToggleChevron, -} from '@/components/primitives'; +import { Button, DropdownMenu, DropdownMenuItem, ToggleChevron } from '@/components/primitives'; import { getURLForLLM } from '@/components/utils'; import { tString, useLanguage } from '@/intl/client'; import { tcls } from '@/lib/tailwind'; @@ -26,10 +20,21 @@ export function PromptClient(props: { const language = useLanguage(); const promptId = React.useId(); const [open, setOpen] = React.useState(false); - const [headerHasFocus, setHeaderHasFocus] = React.useState(false); return ( - <> -
+
+
) : null} - - ); -} - -function PromptDisclosureIcon(props: { - contentIcon: IconName | null; - headerHasFocus: boolean; - open: boolean; -}) { - const { contentIcon, headerHasFocus, open } = props; - return ( - - {contentIcon ? ( - <> - - - - - - - - ) : ( - - )} - +
); } @@ -109,10 +75,10 @@ function PromptActions(props: { prompt: string; openInAIProviders: boolean }) { const { prompt, openInAIProviders } = props; return ( - +
{openInAIProviders ? : null} - +
); } @@ -140,11 +106,9 @@ function CopyPromptButton(props: { prompt: string }) { return (