flowporr

Appearance

ai-core ​

纯 TypeScript、框架无关的 AI 聊天核心 —— 不依赖 Vue / DOM / uni-app，任何端（Vue / React / Node / Tauri）都可消费。

bash
pnpm add @flowporr/ai-core

子目录 ​

模块一览 ​

ai-core 通过 index.ts 统一出口，按域拆分 11 个子模块：

ts
export * from './markdown'        // markdown → HAST 管线
export * from './hast'            // HAST 树遍历 / 节点信息
export * from './stream'          // SSE 流式解析
export * from './namespace'       // BEM 类名
export * from './theme'           // 主题 → CSS 变量
export * from './file'            // 文件工具
export * from './virtual-scroll'  // 虚拟滚动判断
export * from './speech'          // Web Speech
export * from './platform'        // 平台契约
export * from './sender'          // x-sender 类型契约
export * from './utils'           // 文本切分等

markdown — Markdown 渲染管线 ​

基于 unified 生态（remark + rehype），把 markdown 字符串处理成 HAST 树，供渲染层消费：

  • LaTeX 预处理：\[...\] / \(...\) → $$...$$ / $...$（remark-math 标准格式）；代码块中的 $ 先用占位符保护，处理完恢复
  • 插件组装：remark-parse → remark-gfm/breaks/math → remark-rehype → rehype-katex/raw/sanitize + 自定义插件
  • tokenStyle：Shiki token → CSS 样式转换（字体样式位运算：1=italic / 2=bold / 4=underline / 8=strikethrough）

与 x-markdown-vue 的关系

@flowporr/x-markdown-vue 是 markdown 模块的 Vue 响应式壳（MarkdownRenderer 组件）；核心管线全在 ai-core，React 版渲染层可复用同一管线。

hast — HAST 遍历 ​

框架无关的 HAST 树遍历与节点信息计算，渲染层（Vue / React / 小程序）复用：

导出说明
walkHast(root, handlers)自顶向下遍历 HAST 树，handlers 提供 createNode / resolveSlot / renderChildren
getNodeInfos(node, parent, context, keyCounter, customAttrs)为单节点计算属性、别名列表、slot props
computeAttrs(node, aliasList, vnodeProps, attrs, customAttrs)合并自定义属性

getNodeInfos 为元素生成渲染信息：h1~h6 → level、code → language/inline/content、列表 → ordered/depth/index、表格 → isHead。别名解析从具体到通用（h1 → ['h1', 'heading']），供渲染层的插槽命中判断。

stream — SSE 流式解析 ​

前后端事件契约统一的 SSE 客户端，用 Web Streams（浏览器 + Node 18+ 均可）：

导出说明
createSseParser(callbacks)解析 SSE 事件流，回调：start / intent / sources / thinking / content / result / error
dispatchEvent(parser, type, data)派发事件
XStream流式数据类
splitStream按 \n\n 分隔 SSE 事件
splitPart按 \n 解析 key:value
XRequestSSE / fetch 请求类

事件契约：start → intent → sources → thinking → content → result / error，以 [DONE] 结束。服务端 AI 事件（如 ai-server + 你自己的聊天接口）与前端解析共用这套契约。

ts
import { createSseParser, dispatchEvent } from '@flowporr/ai-core'

const events = createSseParser({
  start: () => setLoading(true),
  content: ({ text }) => appendContent(text),
  result: () => setLoading(false),
  error: ({ message }) => showError(message),
})

dispatchEvent(events, 'content', { text: 'hello' })

namespace — BEM 类名 ​

纯逻辑的 BEM 命名空间生成器（渲染层 useNamespace 的底层）：

ts
import { getNamespace } from '@flowporr/ai-core'

const ns = getNamespace('bubble')
ns.b()                     // 'elx-bubble'
ns.e('content')            // 'elx-bubble__content'
ns.em('content', 'active') // 'elx-bubble__content--active'

theme — 主题 → CSS 变量 ​

ts
import { toCssVars } from '@flowporr/ai-core'
const vars = toCssVars(theme)  // { '--xxx-color': '#fff', ... }

file — 文件工具 ​

导出说明
getFileType(name)按扩展名判断文件类型
parseFileName(name)解析文件名（主名 / 扩展名）
isImageFileType(type)是否图片类型

virtual-scroll — 虚拟滚动判断 ​

纯数值决策（贴底 / 上滑），不依赖 DOM，供渲染层虚拟列表复用。

speech — 语音识别 ​

Web Speech 识别器 + 类型，封装 SpeechRecognition（中文）。渲染层可包成 useRecord。

platform — 平台契约 ​

ts
import type { PlatformAdapter } from '@flowporr/ai-core'

PlatformAdapter 是渲染层接入点：核心逻辑（markdown / SSE / 状态）与平台能力解耦。ai-core 提供 web 实现，uni-app / 其他端实现各自 Adapter。

sender — x-sender 类型契约 ​

@flowporr/x-sender 输入引擎的内容模型类型定义（html / text / mention / trigger / select / input），供 ai-chat-vue 的 XSender 与核心逻辑共用。

utils — 文本切分 ​

ts
import { createSegmenter } from '@flowporr/ai-core'
const segmenter = createSegmenter()  // Intl.Segmenter，特性检测 + 回退

用于流式动画的中英文智能分词。