mayeedwin/conversed
GitHub: mayeedwin/conversed
Conversed 是一个面向 AI Agent 和 LLM 聊天界面的可组合富内容 UI 库,将模型回复解析为结构化内容块并渲染为可交互组件。
Stars: 3 | Forks: 0
# Conversed
用于 AI 聊天的丰富交互式 UI。将 LLM 的回复解析为带类型的内容块,在 React 或 Angular 中渲染它们,并在有人交互时获取结构化事件。
▶ **在线体验:** [conversed-web.web.app](https://conversed-web.web.app) — 丰富的块 + 实时 **action inspector**。
## 缘由
模型不仅仅是说话——它们还会输出结构化数据:表格、统计、图表、列表。纯文本或 Markdown 无法让这些内容变得可交互。Conversed 将每次回复解析为一个 **Content Block AST**,并将每个块渲染为真实的组件。它渲染的是**内容,而不是对话**——将其放入你自己的聊天气泡中,并把解析好的 `blocks` 交给它即可。
## 安装
```
pnpm add @conversed/core @conversed/react # React
pnpm add @conversed/core @conversed/angular # Angular
```
包:`@conversed/core`(parser + AST + action protocol)、`@conversed/react`、`@conversed/angular`。
## 快速开始 (React)
```
import '@conversed/react/styles.css';
import { ConversedContent } from '@conversed/react';
import { parseMessageBlocks } from '@conversed/core';
console.log(e.action)}
/>;
```
Angular:``。通过 `getSystemPromptInstruction()` 向模型提供 block 约定。请参阅[文档](#docs)。
## Blocks
`paragraph` · `heading` · `list` · `table` · `stats` · `progress` · `callout` · `chart` · `code` · `details` · `steps` · `timeline` · `media` · `followups` · `divider`
默认情况下,Blocks 是 **flat** 的;可以通过 `variant="filled"` 选择填充样式的表面。列表通过 `listStyle`(`plain` · `card` · `grouped` · `directory`)以四种形式渲染。请参阅[主题](docs/theming.md)。
## Action protocol
交互式部分——表格行和行内按钮、统计卡片、后续提示标签、代码复制按钮——会向你的 `onAction` 处理程序发送一个 `AgentActionEvent`:`{ type, actionId, target?, params? }`。
| `type` | 触发时机 | 示例 |
| --- | --- | --- |
| `navigate` | 打开路由或目标 | 查看详情、打开 dashboard |
| `custom-command` | 运行应用定义的命令 | 批准、刷新、完成任务 |
| `prompt-submit` | 将文本作为新的 prompt 发送 | 后续提示标签 |
| `copy-code` | 代码块被复制时 | 代码片段 |
| `external-url` | 打开外部链接 | — |
使用 `data-action-type` / `data-action-id` / `data-action-target` / `data-action-params` 在元素上声明 action。请参阅[架构](docs/architecture.md#action-protocol)。
## 文档
- [架构与 AST](docs/architecture.md)
- [框架 — React 与 Angular](docs/frameworks.md)
- [LLM prompt 指南](docs/prompts.md)
- [主题](docs/theming.md)
- [贡献](CONTRIBUTING.md) · [Git 工作流](docs/git_workflow.md)
## 许可证
MIT © [Maye Edwin](https://github.com/mayeedwin)
标签:Angular, DLL 劫持, Grype, React, Syscalls, 前端组件库, 大语言模型, 用户界面, 自动化攻击