Smart Compose

Smart Compose 是一个智能文本补全组件，为 React 应用程序提供实时文本建议功能。

GitHub 仓库: https://github.com/dadafawang/smart-compose

功能特点

• 实时文本补全建议
• 支持 ContentEditable 和 Textarea 两种编辑器模式
• 可自定义 API 端点
• 支持初始文本值
• 提供补全回调和输入变化处理
• 可设置占位符文本
• 支持自定义样式

安装

| 包管理器 | 命令 | | -------- | --------------------------- | | npm | npm install smart-compose | | yarn | yarn add smart-compose | | pnpm | pnpm add smart-compose |

使用方法

import { SmartCompose } from 'smart-compose'
import type { CompletionResult } from 'smart-compose'

const handleComplete = (completion: CompletionResult) => {
  console.log('补全建议:', completion)
}

function MyComponent() {
  return (
    <SmartCompose
      apiEndpoint="https://your-api-endpoint.com/smart-compose"
      initialValue="开始输入..."
      placeholder="在此输入文本"
      onComplete={handleComplete}
      onChange={(text) => console.log('输入变化:', text)}
    />
  )
}

API

SmartCompose 属性

| 属性 | 类型 | 默认值 | 描述 | | -------------- | ---------------------------------------- | ----------------------------- | ----------------------------------------------- | | apiEndpoint | string | - | 必填。用于获取补全建议的 API 端点 | | initialValue | string | '' | 可选。编辑器的初始文本 | | placeholder | string | '' | 可选。编辑器的占位符文本 | | elementType | ElementType | ElementType.ContentEditable | 可选。编辑器类型（ContentEditable 或 Textarea） | | onChange | (text: string) => void | - | 可选。输入文本变化时的回调函数 | | onComplete | (completion: CompletionResult) => void | - | 可选。应用补全建议时的回调函数 | | className | string | '' | 可选。应用于容器的额外 CSS 类名 | | style | React.CSSProperties | - | 可选。应用于容器的内联样式 |

开发

安装依赖

pnpm install

运行开发服务器

pnpm dev

构建项目

pnpm build

运行测试

pnpm test

许可证

MIT

TODO

1. initialValue 不生效
2. 已经接受联想建议后，此时是基于所有内容截取最后 20 个字符
3. 应该的解决方案：已经接受联想后，再输入新文字才应该是联想的内容
4. 那么问题来了：已经接受联想后，又删除呢？
   1. 需要联想吗？
      1. 需要联想：基于删除后的所有内容，重新联想？
      2. 不需要联想
5. 容器出现滚动条后，生成的联想建议不可见