@redocly/theme 0.70.0-next.8 → 0.70.0

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

@@ -0,0 +1,41 @@
+import { css } from 'styled-components';
+
+export const promptTag = css`
+  /**
+    * @tokens Prompt
+    **/
+  --prompt-bg-color: var(--bg-color); // @presenter Color
+  --prompt-border-color: var(--border-color-secondary); // @presenter Color
+  --prompt-border-width: var(--border-width); // @presenter Border
+  --prompt-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --prompt-margin: var(--spacing-base) 0; // @presenter Spacing
+  --prompt-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --prompt-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --prompt-gap: var(--spacing-sm); // @presenter Spacing
+  --prompt-border-highlight-color-start: var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy)); // @presenter Color
+  --prompt-border-highlight-color-end: var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy)); // @presenter Color
+  --prompt-border-highlight-size: 120px;
+  --prompt-border-highlight-transition: opacity 0.2s ease-out;
+
+  --prompt-header-gap: var(--spacing-xs); // @presenter Spacing
+  --prompt-header-actions-gap: var(--spacing-xxs); // @presenter Spacing
+  --prompt-header-copy-button-padding: var(--spacing-xxs); // @presenter Spacing
+  --prompt-icon-size: 18px;
+  --prompt-icon-color: var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
+  --prompt-title-font-size: var(--font-size-base); // @presenter FontSize
+  --prompt-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --prompt-title-line-height: var(--line-height-base); // @presenter LineHeight
+  --prompt-title-text-color: var(--text-color-primary); // @presenter Color
+
+  --prompt-body-bg-color: var(--color-primary-bg, var(--color-warm-grey-2)); // @presenter Color
+  --prompt-body-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --prompt-body-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --prompt-body-padding-horizontal: var(--spacing-sm); // @presenter Spacing
+  --prompt-body-gap: var(--spacing-xxs); // @presenter Spacing
+  --prompt-body-font-size: var(--font-size-base); // @presenter FontSize
+  --prompt-body-line-height: var(--line-height-base); // @presenter LineHeight
+  --prompt-body-text-color: var(--text-color-primary); // @presenter Color
+  --prompt-body-max-lines: 5;
+  --prompt-body-toggle-gap: var(--spacing-xxs); // @presenter Spacing
+  // @tokens End
+`;

package/src/markdoc/components/default.ts

@@ -28,3 +28,4 @@ export * from '@redocly/theme/markdoc/components/Icon/Icon';
 export * from '@redocly/theme/markdoc/components/ConnectMCP/ConnectMCP';
 export * from '@redocly/theme/markdoc/components/LoginButton/LoginButton';
 export * from '@redocly/theme/markdoc/components/MarkdownLink/MarkdownLink';
+export * from '@redocly/theme/markdoc/components/Prompt/Prompt';

package/src/markdoc/default.ts

@@ -33,6 +33,7 @@ import { icon } from '@redocly/theme/markdoc/tags/icon';
 import { connectMcp } from '@redocly/theme/markdoc/tags/connect-mcp';
 import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
 import { diagram } from '@redocly/theme/markdoc/tags/diagram';
+import { prompt } from '@redocly/theme/markdoc/tags/prompt';
 
 export const tags = {
   [accordion.tagName]: accordion.schema,
@@ -60,4 +61,5 @@ export const tags = {
   [connectMcp.tagName]: connectMcp.schema,
   [loginButton.tagName]: loginButton.schema,
   [diagram.tagName]: diagram.schema,
+  [prompt.tagName]: prompt.schema,
 };

package/src/markdoc/tags/code-walkthrough.ts

@@ -1,4 +1,4 @@
-import type { Node, RenderableTreeNode, ValidationError } from '@markdoc/markdoc';
+import type { Node, RenderableTreeNode, Tag, ValidationError } from '@markdoc/markdoc';
 import markdoc from '@markdoc/markdoc';
 
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
@@ -67,12 +67,7 @@ export const codeWalkthrough: MarkdocSchemaWrapper = {
           ...attributes,
           filters: node.attributes.filters || {},
           filesets: node.attributes.resolvedFilesets || [],
-          steps: steps.map((step) => {
-            return {
-              /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-              ...((step as any)?.attributes || {}),
-            } as CodeWalkthroughStepAttr;
-          }),
+          steps: steps.map((step) => (step as Tag).attributes as CodeWalkthroughStepAttr),
           inputs,
           toggles,
         },
@@ -184,17 +179,14 @@ export const codeWalkthrough: MarkdocSchemaWrapper = {
   },
 };
 
-export function collectStepsFromChildren(
-  children: RenderableTreeNode[],
-  idx = 0,
-): RenderableTreeNode[] {
+export function collectStepsFromChildren(children: RenderableTreeNode[]): RenderableTreeNode[] {
   return children.flatMap((child) => {
     const isTag = markdoc.Tag.isTag(child);
 
     if (!isTag) return [];
     if (child.name === 'CodeStep') return [child];
 
-    return collectStepsFromChildren(child.children, idx);
+    return collectStepsFromChildren(child.children);
   });
 }
 

package/src/markdoc/tags/prompt.ts

@@ -0,0 +1,58 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { Node, ValidationError } from '@markdoc/markdoc';
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { AI_PROMPT_TARGETS, PROMPT_TAG } from '@redocly/theme/core/constants';
+
+const ALLOWED_ACTIONS: string[] = Object.values(AI_PROMPT_TARGETS);
+
+export const prompt: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Prompt',
+    attributes: {
+      title: { type: String },
+      icon: { type: String, resolver: 'relativeOrCdnIcon' },
+      iconRawContent: { type: String, render: true }, // internal
+      actions: { type: Array, default: [] },
+      hidePrompt: { type: Boolean, default: false },
+      singleLine: { type: Boolean, default: false },
+      buttonOnly: { type: Boolean, default: false },
+      rawContent: { type: String, render: false, resolver: 'tagRawContent' }, // internal
+    },
+    transform(node, config) {
+      const attributes = node.transformAttributes(config);
+      const actions = Array.isArray(attributes.actions)
+        ? [...new Set(attributes.actions.filter((action) => ALLOWED_ACTIONS.includes(action)))]
+        : [];
+      const prompt = getRawBody(node);
+      return new markdoc.Tag('Prompt', { ...attributes, actions, prompt }, []);
+    },
+    validate(node) {
+      const errors: ValidationError[] = [];
+      const { actions } = node.attributes;
+
+      if (Array.isArray(actions)) {
+        for (const action of actions) {
+          if (!ALLOWED_ACTIONS.includes(action)) {
+            errors.push({
+              id: 'prompt-unknown-action',
+              level: 'error',
+              message: `attribute "actions" contains unknown value "${action}"; allowed values: ${ALLOWED_ACTIONS.join(', ')}`,
+            });
+          }
+        }
+      }
+
+      return errors;
+    },
+    // The prompt is for human readers: it stays out of the .md page, llms.txt, and AI search.
+    renderForLlms: () => '',
+  },
+  tagName: PROMPT_TAG,
+};
+
+function getRawBody(node: Node): string {
+  const rawContent = node.attributes.rawContent;
+  return typeof rawContent === 'string' ? rawContent : '';
+}