为 AI 聊天 UI 设计的 Prompt 区域

Source: Dev.to

Introduction

文本输入是任何聊天 UI 中使用最频繁的元素，但它常常被当作事后才考虑的东西——要么是一个普通的 “，要么是一个臃肿的编辑器。在“太简单”和“太复杂”之间存在一个鸿沟。

现有解决方案

• react‑mentions – 只处理提及，无法处理命令/标签/markdown
• Tiptap – 完整的 ProseMirror 编辑器，体积庞大，采用文档编辑范式
• Lexical – Meta 的框架，功能强大但插件系统复杂
• Plate – 基于 Slate，重量级，面向 Notion 风格的编辑器

这些方案都不是为提示输入而设计的。

PromptArea Component

一个专为 AI 聊天 UI 构建的 React 组件：

• 作为 shadcn 注册表组件发布（单命令安装）
• 零额外依赖

Usage

const triggers = [
  mentionTrigger({ onSearch: searchUsers }),
  commandTrigger({ onSearch: searchCommands }),
  hashtagTrigger({ onResolve: resolveTag }),
];

Features

• 实时预览 粗体、斜体、URL
• 无工具栏，无模式切换
• 支持拖拽、粘贴并显示缩略图预览
• 基于段落的文档模型
• 纯引擎 (prompt-area-engine.ts) – 可在没有 DOM 的情况下进行测试
• contentEditable 并带装饰层
• 防抖的撤销/重做快照

Installation

npx shadcn@latest add https://prompt-area.com/r/prompt-area.json

Feature Matrix

与七种替代方案的对比突显了 PromptArea 在 AI 聊天提示方面的专注特性。

Contributing

我们欢迎读者贡献代码。请查看 GitHub issue 了解计划中的功能并提交想法。

Demo

探索实时演示：

Links

• GitHub: