Create Next App

聊天数据转换工具

传统转换（渲染格式）

格式转换（字符串→对象）

将原始聊天数据转换为前端可渲染的格式。转换规则：

第一个 user 消息：用户的原始问题
assistant + user 对：AI工具调用 + 工具执行结果
finalResponse：最终回复

原始数据输入

[
  {
    "type": "message",
    "data": {
      "role": "user",
      "content": "介绍下项目的chatMessage渲染方式"
    }
  },
  {
    "type": "message",
    "data": {
      "role": "assistant",
      "content": "<use_tool>\n  <tool_name>FileReadTool</tool_name>\n  <arguments>\n    {\"file_path\":\"/Users/taohongyu/Desktop/insight/kai-node-demo/frontend/app/components/MessageItem.tsx\"}\n  </arguments>\n</use_tool>"
    }
  },
  {
    "type": "message",
    "data": {
      "role": "user",
      "content": "{\"success\":true,\"data\":{\"filePath\":\"/Users/taohongyu/Desktop/insight/kai-node-demo/frontend/app/components/MessageItem.tsx\",\"content\":\"'use client';\\n\\nimport React from 'react';\\nimport { Avatar, Card, Space, Typography } from 'antd';\\nimport { UserOutlined, RobotOutlined } from '@ant-design/icons';\\n\\ninterface MessageItemProps {\\n  role: 'user' | 'assistant';\\n  content: string;\\n}\\n\\nconst MessageItem: React.FC<MessageItemProps> = ({ role, content }) => {\\n  return (\\n    <div>MessageItem Component</div>\\n  );\\n};\\n\\nexport default MessageItem;\",\"totalLines\":231}}"
    }
  },
  {
    "type": "message",
    "data": {
      "role": "assistant",
      "content": "<use_tool>\n  <tool_name>FileReadTool</tool_name>\n  <arguments>\n    {\"file_path\":\"/Users/taohongyu/Desktop/insight/kai-node-demo/frontend/app/components/ToolCallVisualization.tsx\"}\n  </arguments>\n</use_tool>"
    }
  },
  {
    "type": "message",
    "data": {
      "role": "user",
      "content": "{\"success\":true,\"data\":{\"filePath\":\"/Users/taohongyu/Desktop/insight/kai-node-demo/frontend/app/components/ToolCallVisualization.tsx\",\"content\":\"'use client';\\n\\nimport React, { useState } from 'react';\",\"totalLines\":223}}"
    }
  },
  {
    "type": "finalResponse",
    "data": "项目使用MessageItem组件渲染聊天消息，主要特点：\n\n1. 区分用户和AI助手消息，使用不同样式和头像\n2. 解析消息内容，识别普通文本、工具调用和执行结果\n3. 工具调用通过ToolCallVisualization组件展示，支持展开/收起\n4. 文件读取结果用FileViewer组件显示，支持预览和完整查看\n5. 使用Ant Design组件构建UI，包含时间戳、状态标签等\n6. 根据消息类型应用不同背景色和视觉效果"
  }
]

使用说明

函数接口

import { transformChatData, validateChatData } from './utils/dataTransformer';

// 转换数据
const result = transformChatData(rawData);

// 验证数据格式
const validation = validateChatData(rawData);

数据格式要求

数组格式，包含多个消息对象
每个消息对象包含 type 和 data 字段
type 可以是 "message" 或 "finalResponse"
message 类型的 data 包含 role 和 content
role 可以是 "user" 或 "assistant"

转换后的数据特点

保持原有的消息顺序和内容
自动添加时间戳和唯一ID
包含会话元数据（sessionId、创建时间等）
兼容现有的聊天组件接口