message.ts Copy
interface StandardMessage {
id: string
role: 'assistant'
content: string
stream: true
} 怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a code block component.
STYLE
- dark panel, 12px radius, 13px monospace
- header row: three window dots, a filename tab, a copy button
- two syntax tints: keywords purple, strings green
STATES
- default, copied — button flips to a green check for 2s
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Add line numbers to the existing code block.
Use:
- a muted 12px number column on the left
- keep the header, colors and code unchanged
Only add the line numbers.
Create a code block, replacing the existing one.
Requirements:
- dark panel, 12px radius, 13px monospace, max-width 640px
- header: three window dots, filename tab, copy button
- copy: clipboard write, green check for 2s, then back to Copy
- syntax tints: keywords purple, strings green, comments gray
- horizontal scroll for long lines, no wrap
Keep the surrounding article layout unchanged.
MOTION
- Copy icon swap: 200ms cross-fade, scale 0.25 to 1 with blur 4px to 0.
- Code itself never animates. No typing effect, no line-by-line reveal.
- Collapse/expand: do not animate height; scroll or clip instead.
- prefers-reduced-motion: instant icon swap.
修改类 Prompt 只动目标，不碰页面其余部分。
代码块是什么？ 代码块原样展示示例。点名头部、复制交互和语法着色。
变体 点击属性即可在预览中高亮。
行内 在 Prompt 里写明这个类型。
块级 在 Prompt 里写明这个类型。
文件名标签 给具体值，不要只给感觉词。
复制按钮 给具体值，不要只给感觉词。
语法着色 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
已复制 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
什么时候用 API 与库文档 带预期输出的终端命令 文章里的配置或接口示例 什么时候别用 单个变量或函数名——用行内代码 用户要编辑的代码——改用编辑器 超过一屏——拆成多步 复制 Prompt Create a code block component.
STYLE
- dark panel, 12px radius, 13px monospace
- header row: three window dots, a filename tab, a copy button
- two syntax tints: keywords purple, strings green
STATES
- default, copied — button flips to a green check for 2s
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui