ChatSDK中大模型卡片与Markdown卡片的HTML渲染差异分析

背景介绍

在ChatSDK 6.4.5版本中，开发人员发现了一个关于大模型卡片(foundation-model)和Markdown卡片在HTML代码渲染方面的差异问题。这个问题涉及到两种不同类型卡片对富文本内容的处理方式，值得深入探讨其技术实现原理和设计考量。

问题现象

当使用大模型卡片时，如果内容中包含HTML代码（特别是<div>标签），这些HTML代码不会被正确渲染，而是以原始代码形式显示。相比之下，Markdown卡片能够正常解析和渲染相同的HTML内容。

技术原理分析

大模型卡片的渲染机制

大模型卡片采用了特殊的渲染策略：

1. 内容检测机制：系统会检查返回内容中是否包含</div>闭合标签
2. 渲染模式选择：
   • 如果检测到</div>标签，则启用HTML渲染模式
   • 否则，使用默认的文本渲染方式

这种设计主要是为了兼容通义晓蜜大模型的返回结果，该模型可能会返回预配置的富文本内容。

Markdown卡片的渲染机制

Markdown卡片采用了不同的处理方式：

1. 统一的Markdown解析：无论内容中是否包含HTML标签，都会先尝试进行Markdown解析
2. HTML兼容性：现代Markdown解析器通常都支持内联HTML，因此能够正确处理混合内容

设计考量与最佳实践

大模型卡片的设计初衷

1. 性能优化：避免对所有内容都进行HTML解析，减少不必要的性能开销
2. 安全性考虑：限制HTML渲染范围可以降低XSS等安全风险
3. 特定场景优化：针对通义晓蜜大模型的输出特性进行了专门适配

开发建议

1. 内容类型选择：

   • 对于纯Markdown内容，优先使用Markdown卡片
   • 对于已知会返回富文本的大模型，使用大模型卡片

2. 内容预处理：

   // 示例：简单的内容类型检测
   function shouldUseHtmlRender(content) {
     return content.includes('</div>');
   }
   

3. 一致性处理：

   • 如果项目需要统一的渲染效果，可以考虑对所有内容进行预处理
   • 或者统一使用Markdown卡片来处理所有文本内容

技术实现对比

特性	大模型卡片	Markdown卡片
HTML支持	条件性支持(需包含)	全面支持
渲染性能	更高(选择性解析)	相对较低
使用场景	大模型富文本输出	通用Markdown内容
安全性	更高(限制HTML解析范围)	依赖Markdown解析器实现

总结

ChatSDK中不同卡片类型对HTML渲染的处理差异体现了框架设计中的权衡考量。大模型卡片通过条件性HTML渲染实现了性能优化和特定场景适配，而Markdown卡片则提供了更通用的内容渲染能力。开发人员应根据实际内容类型和需求选择合适的卡片组件，必要时可以通过预处理来确保一致的渲染效果。