Semi-Design Chat组件JSON字符串渲染问题解析与解决方案

问题背景

在Semi-Design UI库的Chat组件使用过程中，开发者反馈当传入的聊天消息内容(content)包含特定格式的字符串时，组件会出现白屏现象。具体表现为当消息内容为JSON格式字符串时，例如{ "error": {} }，Chat组件无法正常渲染，导致界面崩溃。

问题分析

经过技术分析，该问题源于Chat组件内部对消息内容的处理逻辑存在缺陷。当组件接收到形似JSON结构的字符串内容时，内部解析逻辑尝试将其作为JavaScript对象处理，而非直接作为字符串展示。这种自动类型转换的机制在没有充分错误处理的情况下，导致了组件渲染异常。

重现步骤

1. 准备包含JSON字符串的消息数据：

const messages = [
  {
    id: 1,
    role: 'user',
    content: '测试',
  },
  {
    id: 2,
    role: 'assistant',
    content: '{ "error": {} }' // 或更复杂的JSON字符串
  }
]

2. 将上述数据传入Chat组件的chats属性

3. 观察界面，发现组件无法正常渲染，控制台报错

解决方案

版本升级

该问题已在Semi-Design 2.66.0版本中得到修复。建议开发者将相关依赖升级至2.66.0或更高版本：

npm install @douyinfe/semi-ui@2.66.0

配套升级注意事项

在升级过程中，需要注意配套依赖的版本一致性：

1. 同时升级相关配套包至相同版本：

npm install @douyinfe/semi-illustrations@2.66.0 @douyinfe/semi-icons@2.66.0

2. 对于使用vite-plugin-semi-theme插件的项目，确保配置正确：

// vite.config.ts
import semi from 'vite-plugin-semi-theme';

export default defineConfig({
  plugins: [
    react(),
    semi({
      theme: '@semi-bot/semi-theme-we-assist',
      options: { cssLayer: true }
    })
  ],
});

技术原理

Chat组件在2.66.0版本中的改进主要包括：

1. 增强了对消息内容的类型判断，不再盲目尝试解析所有字符串内容
2. 完善了错误边界处理，确保即使内容解析失败也不会导致整个组件崩溃
3. 优化了JSON字符串的展示方式，确保其能够以原始格式正确显示

最佳实践

为避免类似问题，建议开发者在处理Chat组件数据时：

1. 对于确定需要展示为代码块的内容，可预先格式化为Markdown代码块形式
2. 对于API返回的错误信息，考虑在前端进行适当的格式处理
3. 始终使用最新稳定版本的UI组件库
4. 保持相关配套包的版本一致性

总结

Semi-Design作为一款优秀的企业级UI组件库，其Chat组件在2.66.0版本中修复了JSON字符串渲染问题，提升了组件的稳定性和兼容性。开发者通过合理升级和正确配置，可以避免此类问题的发生，确保聊天界面的稳定展示。