SuperAPI AI 工具集

markstream-svelte

前端与建站

查看项目

更新于 10-16 04:32

技能介绍

用途:在 Svelte 5 或 SvelteKit 应用中集成 beta 版 markstream-svelte 包,实现 Markdown 渲染与流式内容展示,常用于 AI 聊天的实时输出场景。

必要前提:确认使用 Svelte 5;Svelte 4 用户需先升级。该包处于 beta 阶段,需确认应用可接受此 API 成熟度。

基本用法:只安装所需包与请求的可选 peer 依赖;CSS 放在 reset 之后导入,数学公式需导入 KaTeX CSS。默认使用 <MarkdownRender {content} />。使用 $props() 与回调。

流式配置:AI 聊天优先使用内置平滑流式。smoothStreaming="auto" 为默认值,在 typewriter={true} 或 maxLiveNodes <= 0 时激活;typewriter 仅控制闪烁光标,默认 false;fade 控制节点进入与流式文本淡入动画,默认 true。聊天界面可用同一渲染器先流式、后在 final={true} 时切换为历史内容。

推荐组合:流式时 smoothStreaming="auto"、fade={false}、typewriter={true},这是保守的视觉与性能选择,并非 API 不兼容;该适配器尚未采纳 Vue 3 的有界追加淡入,因此同时启用两者前需验证动画行为。恢复历史时 smoothStreaming={false}、fade={true}、typewriter={false}。动态切换可用 smoothStreaming={isStreaming ? 'auto' : false}、fade={!isStreaming}。

高级控制:使用 nodes + final 处理 worker 预解析内容、共享 AST 存储或自定义 AST 控制。Workers 可用 setKaTeXWorker、setMermaidWorker、workers/*?worker。自定义 UI 优先使用渲染器本地的 customComponents prop;需要共享注册时再用作用域化的 setCustomComponents、customId 与 customHtmlTags。

限制:浏览器专用 worker 与较重 peer 依赖需放在 SvelteKit 客户端边界之后;建议用 svelte-check、build 或 e2e 验证。文档可查 docs/guide/svelte.md 与 docs/frameworks/svelte.md。