prompt-builder.tsx
基本信息
- 类型: React Client 组件
- 路径:
./src/components/prompts/prompt-builder.tsx
功能描述
AI驱动的Prompt构建器组件,提供聊天界面帮助用户创建和优化Prompt。支持流式响应、工具调用(设置标题、描述、内容、类型、标签、分类等)、Prompt搜索参考、状态管理和移动端适配。
导出内容
PromptBuilder - 主组件(forwardRef)
PromptBuilderHandle - Ref句柄接口
Props 接口
| 属性 | 类型 | 说明 |
| availableTags | array | 可用标签列表 |
| availableCategories | array | 可用分类列表 |
| currentState | PromptBuilderState | 当前Prompt状态 |
| onStateChange | (state: PromptBuilderState) => void | 状态变更回调 |
| modelName | string | AI模型名称 |
| initialPromptRequest | string | 初始Prompt请求 |
PromptBuilderState
| 属性 | 类型 | 说明 |
| title | string | 标题 |
| description | string | 描述 |
| content | string | 内容 |
| type | "TEXT" \ | "IMAGE" \ | "VIDEO" \ | "AUDIO" \ | "SKILL" | 类型 |
| structuredFormat | "JSON" \ | "YAML" | 结构化格式 |
| categoryId | string | 分类ID |
| tagIds | string[] | 标签ID数组 |
| isPrivate | boolean | 是否私有 |
| requiresMediaUpload | boolean | 是否需要媒体上传 |
| requiredMediaType | "IMAGE" \ | "VIDEO" \ | "DOCUMENT" | 所需媒体类型 |
| requiredMediaCount | number | 所需媒体数量 |
Ref句柄方法
sendMessage(content: string) - 发送消息
open() - 打开构建器面板
支持的工具调用
- set_title - 设置标题
- set_description - 设置描述
- set_content - 设置内容
- set_type - 设置类型
- set_tags - 设置标签
- set_category - 设置分类
- set_privacy - 设置隐私
- setmediarequirements - 设置媒体要求
- search_prompts - 搜索Prompt
- getavailabletags - 获取可用标签
- getavailablecategories - 获取可用分类
- getcurrentstate - 获取当前状态
依赖
react - React核心
next-intl - 国际化
lucide-react - 图标库
react-markdown - Markdown渲染
@/components/ui/button - 按钮组件
@/components/ui/textarea - 文本域组件
@/components/ui/badge - 徽章组件
@/lib/utils - 工具函数
./mini-prompt-card - 迷你Prompt卡片
相关组件
MiniPromptCard - 搜索结果中的迷你卡片
PromptForm - 集成Prompt构建器的表单