src/
├── components/          # 15+ 个高内聚组件
│   ├── AgentPanel.vue      # 智能体信息面板
│   ├── ChatArea.vue        # 对话区域容器
│   ├── MessageItem.vue     # 单条消息组件
│   ├── MessageList.vue     # 消息列表
│   ├── InputArea.vue       # 输入区域
│   ├── ImagePreview.vue    # 图片预览
│   ├── LoginModal.vue      # 登录弹窗
│   └── 更多组件...
├── stores/             # Pinia 状态管理
│   ├── agent.ts            # 智能体状态
│   ├── chat.ts             # 对话状态
│   └── user.ts             # 用户状态
├── utils/              # 工具函数
│   ├── agent.ts            # 智能体相关
│   ├── request.ts          # HTTP 请求
│   └── app.ts              # 通用工具
├── lib/                # 可复用库组件
│   ├── MessageContentRenderer.vue  # 消息内容渲染器
│   └── ImageViewer.vue     # 图片查看器
├── App.vue             # 主应用组件
├── Login.vue           # 登录组件
├── main.ts             # 应用入口
└── main.css            # 全局样式

设计规范

配色方案: 浅色主题，蓝色强调色
间距系统: 4px 基础单位的规范化间距
圆角规范: 6px-20px 的柔和圆角
动画系统: 150ms-300ms 的流畅过渡

🚀 快速开始

环境要求

Node.js ^20.19.0 || >=22.12.0
pnpm 包管理器

安装与启动

# 克隆项目
git clone <repository-url>
cd gnai-angent-web

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

开发命令

# 类型检查
pnpm type-check

# 代码格式化
pnpm format

# 构建库组件（MessageContentRenderer）
pnpm run build:lib

📱 使用方式

智能体部署

应用会自动从域名解析智能体 ID：

demo.a.gnlab.com → 智能体 ID: demo
gnlab.a.gnlab.com → 智能体 ID: gnlab
localhost:5173 → 开发环境默认使用 demo

对话功能

发送消息: 输入文本后按 Enter 或点击发送按钮
图片上传: 点击图片按钮选择最多 5 张图片
新对话: 使用 Cmd/Ctrl + K 快捷键
切换面板: 使用 Cmd/Ctrl + I 快捷键

移动端体验

面板默认收起，点击边缘按钮展开
支持侧滑手势操作
适配各种移动设备尺寸

📦 库组件发布

本项目包含可复用的 MessageContentRenderer 库组件：

# 构建库组件
pnpm run build:lib

# 发布到 npm
npm login
npm publish

MessageContentRenderer 特性

支持多种消息类型（文本、图片、文件、音频、视频）
Markdown 渲染支持
响应式设计
类型安全的 Vue 组件

🔧 配置说明

环境变量

项目支持以下环境变量配置：

VITE_API_BASE: API 基础地址
VITE_APP_ENV: 应用环境标识

构建配置

vite.config.ts: 主应用构建配置
vite.config.lib.ts: 库组件构建配置
tsconfig.json: TypeScript 配置

🎨 自定义开发

主题定制

通过 CSS 变量系统可以轻松定制主题：

:root {
  --color-primary: #007aff;
  --color-bg: #f5f5f7;
  --color-text: #1d1d1f;
}

组件扩展

所有组件都遵循高内聚低耦合原则，易于扩展和维护：

新增功能建议创建独立组件
使用 TypeScript 提供类型安全
遵循现有的设计规范和命名约定

📋 API 接口

智能体接口

// 获取智能体详情
GET /api/athena/v1/chatbot/detail?pid={agentId}

对话接口

// 发送消息
POST /api/athena/v1/chat/send
{
  agentId: string,
  message: string,
  images?: string[]
}

🧪 测试与调试

开发模式

热重载开发服务器
TypeScript 实时检查
ESLint 代码检查
Prettier 代码格式化

浏览器支持

Chrome / Edge (最新版本)
Firefox (最新版本)
Safari (最新版本)
移动端浏览器

📈 性能优化

代码分割: 基于路由的代码分割
图片懒加载: 大图片的懒加载处理
虚拟滚动: 大量消息的性能优化（可选）
缓存策略: 智能体信息本地缓存

🤝 贡献指南

Fork 项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

Vue.js 团队
Pinia 团队
所有开源库的贡献者

📞 联系方式

如有问题或建议，请通过以下方式联系：

提交 GitHub Issues
查看开发文档: DEVELOPMENT.md
快速指南: QUICKSTART.md

✨ 由光年 AI 提供技术支持 | 🚀 立即体验智能对话新境界

FAQs

What is @gnai/message-content-renderer?

Is @gnai/message-content-renderer popular?

Is @gnai/message-content-renderer well maintained?

Package last updated on 13 Jan 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@gnai/message-content-renderer

光年 AI 智能体对话网页端

🎯 项目概述

✨ 核心功能

🤖 智能体识别与信息加载

💬 智能对话系统

🔐 用户认证系统

🎨 现代化界面

🏗️ 技术架构

技术栈

项目结构