prompt-builder.tsx

prompt-builder.tsx

基本信息

  • 类型: React Client 组件
  • 路径: ./src/components/prompts/prompt-builder.tsx

功能描述

AI驱动的Prompt构建器组件,提供聊天界面帮助用户创建和优化Prompt。支持流式响应、工具调用(设置标题、描述、内容、类型、标签、分类等)、Prompt搜索参考、状态管理和移动端适配。

导出内容

  • PromptBuilder - 主组件(forwardRef)
  • PromptBuilderHandle - Ref句柄接口

Props 接口

属性类型说明
availableTagsarray可用标签列表
availableCategoriesarray可用分类列表
currentStatePromptBuilderState当前Prompt状态
onStateChange(state: PromptBuilderState) => void状态变更回调
modelNamestringAI模型名称
initialPromptRequeststring初始Prompt请求

PromptBuilderState

属性类型说明
titlestring标题
descriptionstring描述
contentstring内容
type"TEXT" \"IMAGE" \"VIDEO" \"AUDIO" \"SKILL"类型
structuredFormat"JSON" \"YAML"结构化格式
categoryIdstring分类ID
tagIdsstring[]标签ID数组
isPrivateboolean是否私有
requiresMediaUploadboolean是否需要媒体上传
requiredMediaType"IMAGE" \"VIDEO" \"DOCUMENT"所需媒体类型
requiredMediaCountnumber所需媒体数量

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构建器的表单
← 返回目录