Files
Anthony Lio 5918a69398 feat(docs): agent prompt block (#50565)
## What kind of change does this PR introduce?

docs ui polish for the prompt panel on the docs homepage and in the
quickstarts

## What is the current behavior?

agent prompt renders as one run on paragraph steps read as "1. ... 2.
... 3. ..." inline making it hard to read

## What is the new behavior?

- sets prompt bodies as markdown for easier readability
- adds long prompts collapse
- removes panel tab icons
- uses panel code block ui
- makes active tab has an underline on first paint
 
 `home`
| state | preview |
| -------|------|
| before | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/ba3a0948-efff-4144-8eba-9065e1f140d9"
/> |
| after | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/e63e71e9-86d2-4d9a-ac2d-925e197d69f9"
/> |

`quickstart`
| state | preview |
| -------|------|
| before | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/96faf012-a9f1-4ee9-8a98-3ec6de24d2de"
/> |
| after | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/7a41a259-e181-4a32-949f-de095d8bb66c"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Prompts now support Markdown formatting, inline code chips, expandable
content, and improved hover-reveal behavior.
* Code-copy controls support customizable labels and clearer
screen-reader announcements.
* Prompt tabs and panels have updated styling, spacing, and
active-content handling.

* **UI Improvements**
* Setup and agent prompts now use consistent Markdown-rendered
presentation.
  * Prompt headings now display “Agent Prompt.”
  * Home page setup code blocks use a more compact layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-18 21:54:31 +03:00

41 lines
1.4 KiB
TypeScript

import { aiPrompts } from '~/data/ai-prompts.data'
import { fromMarkdown } from 'mdast-util-from-markdown'
import { describe, expect, it } from 'vitest'
import { AiPrompt } from './AiPrompt'
describe('AiPrompt markdown schema', () => {
it('omits prompts by default', () => {
expect(AiPrompt({ props: { id: 'nextjs' } })).toBe('')
})
it('serializes an opted-in prompt from the shared registry', () => {
const markdown = AiPrompt({
props: { id: 'nextjs', includeInMarkdown: true },
})
expect(markdown).toContain('**Agent Prompt**')
expect(markdown).toContain('Help me add Supabase to my Next.js project.')
expect(markdown).toContain('```text')
})
it.each(Object.keys(aiPrompts).filter((id) => id.startsWith('monitoring-')))(
'exports the complete shared %s prompt when opted in',
(id) => {
const markdown = AiPrompt({ props: { id, includeInMarkdown: true } })
const codeBlocks = fromMarkdown(markdown).children.filter((node) => node.type === 'code')
expect(codeBlocks).toHaveLength(1)
expect(codeBlocks[0]).toMatchObject({
lang: 'text',
value: aiPrompts[id as keyof typeof aiPrompts],
})
}
)
it('fails clearly for an unknown opted-in prompt', () => {
expect(() => AiPrompt({ props: { id: 'missing-prompt', includeInMarkdown: true } })).toThrow(
'Unknown AiPrompt id: missing-prompt'
)
})
})