@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/markdoc/components/Prompt/Prompt.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { JSX } from 'react';
+import type { AiPromptTarget } from '@redocly/theme/core/types';
+
+import { PROMPT_NARROW_BLOCK_MAX_WIDTH } from '@redocly/theme/core/constants';
+import {
+  usePointerBorderHighlight,
+  usePromptActions,
+  usePromptTextLimit,
+} from '@redocly/theme/core/hooks';
+import { PromptActions } from '@redocly/theme/markdoc/components/Prompt/PromptActions';
+import { PromptBody } from '@redocly/theme/markdoc/components/Prompt/PromptBody';
+import { PromptShowHideButton } from '@redocly/theme/markdoc/components/Prompt/PromptShowHideButton';
+import { PromptCopyButton } from '@redocly/theme/markdoc/components/Prompt/PromptCopyButton';
+import { PromptHeader } from '@redocly/theme/markdoc/components/Prompt/PromptHeader';
+
+export type PromptProps = {
+  /** Raw Markdown source of the prompt; rendered and copied as plain text. */
+  prompt: string;
+  title?: string;
+  icon?: string;
+  iconRawContent?: string;
+  actions?: AiPromptTarget[];
+  hidePrompt?: boolean;
+  singleLine?: boolean;
+  buttonOnly?: boolean;
+  className?: string;
+};
+
+export function Prompt(props: PromptProps): JSX.Element {
+  const {
+    prompt,
+    title,
+    icon,
+    iconRawContent,
+    actions = [],
+    hidePrompt = false,
+    singleLine = false,
+    buttonOnly = false,
+    className,
+  } = props;
+  const [isPromptVisible, setIsPromptVisible] = useState(!hidePrompt);
+  const { reportCopy, openIn } = usePromptActions(prompt);
+  const { textRef, textLimit, isExpanded, hasHiddenText, toggleExpanded } = usePromptTextLimit({
+    prompt,
+    singleLine,
+    isPromptVisible,
+  });
+  const borderHighlight = usePointerBorderHighlight<HTMLDivElement>();
+
+  if (buttonOnly) {
+    const copyButton = (
+      <PromptCopyButton prompt={prompt} placement="standalone" onCopy={reportCopy} />
+    );
+
+    return (
+      <PromptButtonOnlyWrapper data-component-name="Markdoc/Prompt/Prompt" className={className}>
+        {actions.length > 0 ? (
+          <PromptActions actions={actions} onOpen={openIn} button={copyButton} alignment="start" />
+        ) : (
+          copyButton
+        )}
+      </PromptButtonOnlyWrapper>
+    );
+  }
+
+  const hasHeader = Boolean(title) || Boolean(icon) || actions.length > 0 || hidePrompt;
+  const headerControls = (
+    <>
+      {hidePrompt ? (
+        <PromptShowHideButton
+          isPromptVisible={isPromptVisible}
+          onToggle={() => setIsPromptVisible(!isPromptVisible)}
+        />
+      ) : null}
+      <HeaderCopyWrapper $alwaysVisible={hidePrompt}>
+        <PromptCopyButton prompt={prompt} placement="header" onCopy={reportCopy} />
+      </HeaderCopyWrapper>
+    </>
+  );
+
+  return (
+    <PromptWrapper data-component-name="Markdoc/Prompt/Prompt" className={className}>
+      <PromptCardWrapper
+        ref={borderHighlight.ref}
+        onPointerMove={borderHighlight.onPointerMove}
+        onPointerLeave={borderHighlight.onPointerLeave}
+      >
+        {hasHeader ? (
+          <PromptHeader
+            title={title}
+            icon={icon}
+            iconRawContent={iconRawContent}
+            controls={headerControls}
+          />
+        ) : null}
+        {actions.length > 0 ? <HeaderActionsWrapper actions={actions} onOpen={openIn} /> : null}
+        {isPromptVisible ? (
+          <PromptBody
+            prompt={prompt}
+            textRef={textRef}
+            textLimit={textLimit}
+            isExpanded={isExpanded}
+            hasHiddenText={hasHiddenText}
+            onToggleExpanded={toggleExpanded}
+            controls={
+              hidePrompt ? null : (
+                <BodyCopyWrapper $hiddenWhenNarrow={hasHeader}>
+                  <PromptCopyButton prompt={prompt} placement="body" onCopy={reportCopy} />
+                </BodyCopyWrapper>
+              )
+            }
+          />
+        ) : null}
+      </PromptCardWrapper>
+    </PromptWrapper>
+  );
+}
+
+/* The card cannot query its own width, so the container query sits on this wrapper. */
+const PromptWrapper = styled.div`
+  container: prompt / inline-size;
+  margin: var(--prompt-margin);
+`;
+
+/* Below 440px the block is a phone screen or a narrow column: the actions get their own
+   full-width row under the header, and the copy button moves from the prompt zone to the
+   header. The DOM order (header, actions, prompt) is the same in both layouts. */
+const NARROW_BLOCK = `@container prompt (width < ${PROMPT_NARROW_BLOCK_MAX_WIDTH})`;
+
+const PromptCardWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: var(--prompt-gap);
+  column-gap: var(--prompt-header-actions-gap);
+  padding: var(--prompt-padding-vertical) var(--prompt-padding-horizontal);
+
+  > [data-component-name='Markdoc/Prompt/PromptHeader'] {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  > [data-component-name='Markdoc/Prompt/PromptBody'] {
+    flex: 1 1 100%;
+  }
+  background-color: var(--prompt-bg-color);
+  border: var(--prompt-border-width) var(--border-style) var(--prompt-border-color);
+  border-radius: var(--prompt-border-radius);
+
+  /* A gradient ring over the border, lit around the pointer. The mask keeps only the
+     border-width frame of the gradient; --pointer-* come from usePointerBorderHighlight. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--prompt-border-width));
+    padding: var(--prompt-border-width);
+    border-radius: var(--prompt-border-radius);
+    background: radial-gradient(
+      var(--prompt-border-highlight-size) circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
+      var(--prompt-border-highlight-color-start),
+      var(--prompt-border-highlight-color-end) 40%,
+      transparent 80%
+    );
+    mask:
+      linear-gradient(currentColor 0 0) content-box,
+      linear-gradient(currentColor 0 0);
+    mask-composite: exclude;
+    opacity: var(--pointer-edge-proximity, 0);
+    transition: var(--prompt-border-highlight-transition);
+    pointer-events: none;
+  }
+`;
+
+const HeaderActionsWrapper = styled(PromptActions)`
+  flex: 0 0 auto;
+
+  ${NARROW_BLOCK} {
+    flex-basis: 100%;
+    display: flex;
+
+    [data-component-name='SplitButton/SplitButton'],
+    [data-component-name='Button/ButtonGroup'] {
+      width: 100%;
+    }
+
+    [data-component-name='Button/ButtonGroup'] > .button:first-child {
+      flex: 1;
+    }
+  }
+`;
+
+const HeaderCopyWrapper = styled.div<{ $alwaysVisible: boolean }>`
+  display: ${({ $alwaysVisible }) => ($alwaysVisible ? 'flex' : 'none')};
+
+  ${NARROW_BLOCK} {
+    display: flex;
+  }
+`;
+
+const BodyCopyWrapper = styled.div<{ $hiddenWhenNarrow: boolean }>`
+  display: flex;
+
+  ${({ $hiddenWhenNarrow }) =>
+    $hiddenWhenNarrow &&
+    css`
+      ${NARROW_BLOCK} {
+        display: none;
+      }
+    `}
+`;
+
+const PromptButtonOnlyWrapper = styled.div`
+  display: flex;
+  margin: var(--prompt-margin);
+`;

package/src/markdoc/components/Prompt/PromptActions.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX, ReactElement } from 'react';
+import type { ButtonProps } from '@redocly/theme/components/Button/Button';
+import type { AiPromptTarget } from '@redocly/theme/core/types';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { SplitButton } from '@redocly/theme/components/SplitButton/SplitButton';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { DropdownMenuItemContent } from '@redocly/theme/components/Dropdown/DropdownMenuItemContent';
+import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
+import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
+import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { AI_PROMPT_ACTION_OPTIONS } from '@redocly/theme/core/constants';
+
+export type PromptActionsProps = {
+  actions: AiPromptTarget[];
+  onOpen: (target: AiPromptTarget) => void;
+  /** Main button of the split button; without it, the first action is the main button. */
+  button?: ReactElement<ButtonProps>;
+  /** Side of the split button the menu lines up with. */
+  alignment?: 'start' | 'end';
+  className?: string;
+};
+
+const ACTION_ICONS: Record<AiPromptTarget, React.ComponentType> = {
+  cursor: CursorIcon,
+  claude: ClaudeIcon,
+  chatgpt: ChatGptIcon,
+};
+
+export function PromptActions({
+  actions,
+  onOpen,
+  button,
+  alignment = 'end',
+  className,
+}: PromptActionsProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const [firstAction, ...restActions] = actions;
+  if (!firstAction) return null;
+
+  const menuActions = button ? actions : restActions;
+  const primaryButton = button ?? (
+    <Button
+      variant="secondary"
+      size="small"
+      icon={<PromptActionIcon action={firstAction} />}
+      onClick={() => onOpen(firstAction)}
+    >
+      {translate(
+        AI_PROMPT_ACTION_OPTIONS[firstAction].titleTranslationKey,
+        AI_PROMPT_ACTION_OPTIONS[firstAction].titleDefault,
+      )}
+    </Button>
+  );
+
+  return (
+    <PromptActionsWrapper data-component-name="Markdoc/Prompt/PromptActions" className={className}>
+      <SplitButton
+        variant="secondary"
+        size="small"
+        alignment={alignment}
+        portalled
+        toggleAriaLabel={translate('page.actions.moreActions', 'More actions')}
+        button={primaryButton}
+      >
+        {menuActions.length > 0 ? (
+          <DropdownMenu>
+            {menuActions.map((action) => (
+              <DropdownMenuItem key={action} onAction={() => onOpen(action)}>
+                <DropdownMenuItemContent
+                  icon={<PromptActionIcon action={action} />}
+                  title={translate(
+                    AI_PROMPT_ACTION_OPTIONS[action].titleTranslationKey,
+                    AI_PROMPT_ACTION_OPTIONS[action].titleDefault,
+                  )}
+                  description={translate(
+                    AI_PROMPT_ACTION_OPTIONS[action].descriptionTranslationKey,
+                    AI_PROMPT_ACTION_OPTIONS[action].descriptionDefault,
+                  )}
+                />
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenu>
+        ) : null}
+      </SplitButton>
+    </PromptActionsWrapper>
+  );
+}
+
+function PromptActionIcon({ action }: { action: AiPromptTarget }): JSX.Element {
+  const Icon = ACTION_ICONS[action];
+  return <Icon />;
+}
+
+const PromptActionsWrapper = styled.div`
+  display: inline-flex;
+`;

package/src/markdoc/components/Prompt/PromptBody.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import type { JSX, ReactNode, RefObject } from 'react';
+import type { PromptTextLimit } from '@redocly/theme/core/hooks';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type PromptBodyProps = {
+  prompt: string;
+  textRef: RefObject<HTMLDivElement | null>;
+  textLimit: PromptTextLimit;
+  isExpanded: boolean;
+  hasHiddenText: boolean;
+  onToggleExpanded: () => void;
+  /** Shown inside the prompt zone; omitted when the header owns the copy button. */
+  controls?: ReactNode;
+  className?: string;
+};
+
+export function PromptBody({
+  prompt,
+  textRef,
+  textLimit,
+  isExpanded,
+  hasHiddenText,
+  onToggleExpanded,
+  controls,
+  className,
+}: PromptBodyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <PromptBodyWrapper data-component-name="Markdoc/Prompt/PromptBody" className={className}>
+      <ZoneWrapper>
+        <TextWrapper ref={textRef} $textLimit={textLimit}>
+          {prompt}
+        </TextWrapper>
+        {controls}
+      </ZoneWrapper>
+      {hasHiddenText || isExpanded ? (
+        <Button
+          variant="ghost"
+          size="small"
+          icon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          iconPosition="right"
+          onClick={onToggleExpanded}
+        >
+          {isExpanded
+            ? translate('promptTag.showLess', 'Show less')
+            : translate('promptTag.showFullPrompt', 'Show full prompt')}
+        </Button>
+      ) : null}
+    </PromptBodyWrapper>
+  );
+}
+
+const PromptBodyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--prompt-body-toggle-gap);
+`;
+
+const ZoneWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--prompt-body-gap);
+  padding: var(--prompt-body-padding-vertical) var(--prompt-body-padding-horizontal);
+  background-color: var(--prompt-body-bg-color);
+  border-radius: var(--prompt-body-border-radius);
+`;
+
+/* width: 0 keeps the nowrap text from widening the block; flex-grow gives the text the real width. */
+const TextWrapper = styled.div<{ $textLimit: PromptTextLimit }>`
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+  white-space: pre-wrap;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  font-size: var(--prompt-body-font-size);
+  line-height: var(--prompt-body-line-height);
+  color: var(--prompt-body-text-color);
+
+  ${({ $textLimit }) =>
+    $textLimit === 'maxLines' &&
+    css`
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--prompt-body-max-lines);
+      overflow: hidden;
+    `}
+
+  ${({ $textLimit }) =>
+    $textLimit === 'oneLine' &&
+    css`
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
+`;

package/src/markdoc/components/Prompt/PromptCopyButton.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type PromptCopyButtonPlacement = 'header' | 'body' | 'standalone';
+
+export type PromptCopyButtonProps = {
+  prompt: string;
+  /** `header` next to the split button, `body` inside the prompt zone, `standalone` for the button-only variant. */
+  placement: PromptCopyButtonPlacement;
+  onCopy: () => void;
+  className?: string;
+};
+
+export function PromptCopyButton({
+  prompt,
+  placement,
+  onCopy,
+  className,
+}: PromptCopyButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  if (placement === 'standalone') {
+    return (
+      <CopyButton
+        data={prompt}
+        type="compound"
+        variant="secondary"
+        size="small"
+        buttonText={translate('promptTag.copy.buttonText', 'Copy prompt')}
+        onCopyClick={onCopy}
+        dataTestId="prompt-copy-button"
+        className={className}
+      />
+    );
+  }
+
+  if (placement === 'header') {
+    return (
+      <HeaderCopyButtonWrapper
+        data={prompt}
+        variant="outlined"
+        size="small"
+        onCopyClick={onCopy}
+        dataTestId="prompt-header-copy-button"
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <CopyButton
+      data={prompt}
+      variant="text"
+      size="small"
+      onCopyClick={onCopy}
+      dataTestId="prompt-copy-button"
+      className={className}
+    />
+  );
+}
+
+/* The outlined border adds to the box; the smaller padding keeps the 24px height of the sibling buttons. */
+const HeaderCopyButtonWrapper = styled(CopyButton)`
+  && .button {
+    --button-icon-padding: var(--prompt-header-copy-button-padding);
+  }
+`;

package/src/markdoc/components/Prompt/PromptHeader.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX, ReactNode } from 'react';
+
+import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+
+export type PromptHeaderProps = {
+  title?: string;
+  icon?: string;
+  iconRawContent?: string;
+  controls?: ReactNode;
+  className?: string;
+};
+
+export function PromptHeader({
+  title,
+  icon,
+  iconRawContent,
+  controls,
+  className,
+}: PromptHeaderProps): JSX.Element {
+  return (
+    <PromptHeaderWrapper data-component-name="Markdoc/Prompt/PromptHeader" className={className}>
+      <IconWrapper>
+        {icon ? (
+          <GenericIcon icon={icon} rawContent={iconRawContent} />
+        ) : (
+          <AiStarsIcon color="--prompt-icon-color" />
+        )}
+      </IconWrapper>
+      {title ? <TitleWrapper>{title}</TitleWrapper> : null}
+      {controls ? <ControlsWrapper>{controls}</ControlsWrapper> : null}
+    </PromptHeaderWrapper>
+  );
+}
+
+const PromptHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--prompt-header-gap);
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--prompt-icon-size);
+  height: var(--prompt-icon-size);
+  color: var(--prompt-icon-color);
+  --icon-width: var(--prompt-icon-size);
+  --icon-height: var(--prompt-icon-size);
+  --icon-color: var(--prompt-icon-color);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const TitleWrapper = styled.div`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--prompt-title-font-size);
+  font-weight: var(--prompt-title-font-weight);
+  line-height: var(--prompt-title-line-height);
+  color: var(--prompt-title-text-color);
+`;
+
+const ControlsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  gap: var(--prompt-header-actions-gap);
+`;

package/src/markdoc/components/Prompt/PromptShowHideButton.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { PromptToggleLabel } from '@redocly/theme/markdoc/components/Prompt/PromptToggleLabel';
+
+export type PromptShowHideButtonProps = {
+  isPromptVisible: boolean;
+  onToggle: () => void;
+  className?: string;
+};
+
+export function PromptShowHideButton({
+  isPromptVisible,
+  onToggle,
+  className,
+}: PromptShowHideButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const showPromptLabel = translate('promptTag.showPrompt', 'Show prompt');
+  const hidePromptLabel = translate('promptTag.hidePrompt', 'Hide prompt');
+
+  return (
+    <Button
+      data-component-name="Markdoc/Prompt/PromptShowHideButton"
+      className={className}
+      variant="text"
+      size="small"
+      icon={isPromptVisible ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      iconPosition="right"
+      onClick={onToggle}
+    >
+      <PromptToggleLabel
+        active={isPromptVisible ? hidePromptLabel : showPromptLabel}
+        inactive={isPromptVisible ? showPromptLabel : hidePromptLabel}
+      />
+    </Button>
+  );
+}

package/src/markdoc/components/Prompt/PromptToggleLabel.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+export type PromptToggleLabelProps = {
+  active: string;
+  inactive: string;
+  className?: string;
+};
+
+/* Both labels share one grid cell, so the toggle keeps the width of the longer label
+   and the buttons next to it do not move when the label changes. */
+export function PromptToggleLabel({
+  active,
+  inactive,
+  className,
+}: PromptToggleLabelProps): JSX.Element {
+  return (
+    <PromptToggleLabelWrapper
+      data-component-name="Markdoc/Prompt/PromptToggleLabel"
+      className={className}
+    >
+      <span>{active}</span>
+      <span aria-hidden="true">{inactive}</span>
+    </PromptToggleLabelWrapper>
+  );
+}
+
+const PromptToggleLabelWrapper = styled.span`
+  display: grid;
+  text-align: center;
+
+  > span {
+    grid-area: 1 / 1;
+  }
+
+  > span[aria-hidden='true'] {
+    visibility: hidden;
+  }
+`;

package/src/markdoc/components/Prompt/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const promptTagDarkMode = css`
+  --prompt-body-bg-color: var(--color-brand-subtle-bg, var(--color-warm-grey-3)); // @presenter Color
+`;