devops-chatbot

一个基于 Next.js 的智能聊天机器人演示项目，展示了现代 DevOps 开发流程的最佳实践。项目集成了多个 AI 服务商，支持自动化测试、持续集成，是学习和实践 DevOps 工作流的示例。

小组成员

小组成员	昵称	分工
钱炳州	Azyka	维护代码仓库、建设CI/CD流程、将项目容器化并实现k8s部署
罗鹏	PengLuo	扩展项目功能代码，实现2个不同功能并撰写单元测试
韩燚	syrenisk	扩展项目功能代码，实现1个功能并撰写单元测试，给出从测试到修复的完整案例
武洪艳	oranggge	调研DevOps技术、形成系统分析结果

特性

多 AI 服务商支持：集成 SiliconFlow、DeepSeek、DouBao 等多个 AI 服务商
现代化 UI：基于 Tailwind CSS 的响应式设计
完整测试覆盖：包含单元测试、集成测试和测试覆盖率报告
Markdown 渲染：支持 Markdown 格式的对话内容和代码高亮
TypeScript 支持：完整的类型定义和类型检查
响应式设计：适配桌面和移动设备
实时流式响应：支持实时流式对话响应

技术栈

框架: Next.js 13.2.4
语言: TypeScript
样式: Tailwind CSS
UI组件: Tabler Icons
测试: Jest + React Testing Library
代码格式: ESLint
AI集成: OpenAI API 兼容接口

项目结构

devops-chatbot/
├── components/           # React 组件
│   ├── Chat/            # 聊天相关组件
│   └── Layout/          # 布局组件
├── pages/               # Next.js 页面
│   ├── api/            # API 路由
│   └── index.tsx       # 首页
├── types/              # TypeScript 类型定义
├── utils/              # 工具函数
├── __tests__/          # 测试文件
├── __mocks__/          # 测试模拟文件
├── styles/             # 样式文件
├── public/             # 静态资源
├── providers.json      # AI 服务商配置
├── jest.config.js      # Jest 配置
├── tailwind.config.js  # Tailwind 配置
└── tsconfig.json       # TypeScript 配置

快速开始

1. 克隆仓库

git clone https://www.gitlink.org.cn/Azyka/devops-chatbot.git
cd devops-chatbot

2. 安装依赖

npm install

3. 配置 AI 服务商

3.1 配置服务商信息

项目已在 providers.json 中预配置了以下服务商：

[
  {
    "id": "siliconflow",
    "name": "SiliconFlow",
    "baseUrl": "https://api.siliconflow.cn/v1/chat/completions",
    "apiKeyEnv": "SILICONFLOW_API_KEY",
    "models": [
      "deepseek-ai/DeepSeek-V3",
      "Qwen/Qwen3-8B"
    ]
  },
  {
    "id": "deepseek",
    "name": "DeepSeek",
    "baseUrl": "https://api.deepseek.com/v1/chat/completions",
    "apiKeyEnv": "DEEPSEEK_API_KEY",
    "models": [
      "deepseek-chat",
      "deepseek-reasoner"
    ]
  },
  {
    "id": "doubao",
    "name": "DouBao",
    "baseUrl": "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
    "apiKeyEnv": "DOUBAO_API_KEY",
    "models": [
      "doubao-seed-1.6-250615"
    ]
  }
]

3.2 添加新的服务商

如需添加新的服务商，请：

在 providers.json 中添加配置
在 pages/api/chat.ts 中的 apiKeys 对象中添加对应的环境变量映射

3.3 设置环境变量

在项目根目录创建 .env.local 文件：

# SiliconFlow API Key
SILICONFLOW_API_KEY=your_siliconflow_api_key

# DeepSeek API Key  
DEEPSEEK_API_KEY=your_deepseek_api_key

# DouBao API Key
DOUBAO_API_KEY=your_doubao_api_key

4. 启动开发服务器

npm run dev

访问 http://localhost:3000 查看应用。

测试

运行测试

# 运行所有测试
npm test

# 监视模式运行测试
npm run test:watch

# 生成测试覆盖率报告
npm run test:coverage

测试结构

__tests__/ - 主要测试文件
components/Chat/__tests__/ - 聊天组件测试
__mocks__/ - 测试模拟文件
jest.config.js - Jest 配置
jest.setup.js - 测试环境配置

构建和部署

构建生产版本

npm run build

启动生产服务器

npm start

代码检查

npm run lint

开发工作流

使用 Git 分支开发

创建新分支

git checkout -b <YOUR BRANCH NAME>

提交代码

git add .
git commit -m "feat: 添加新功能描述"

推送分支

git push origin <YOUR BRANCH NAME>

创建合并请求

在 GitLink 上创建 Merge Request：

进入项目页面
点击”合并请求” → “新建合并请求”
选择源分支和目标分支
填写描述并提交

代码审查和合并

团队成员审查代码后，合并到主分支。

清理分支

# 删除本地分支
git branch -d <YOUR BRANCH NAME>

# 删除远程分支
git push origin --delete <YOUR BRANCH NAME>

继续在现有分支上开发

git checkout <YOUR BRANCH NAME>
git fetch origin
git rebase origin/main

# 如果有冲突，解决后继续
git rebase --continue

自定义配置

修改系统提示词

编辑 utils/index.ts 文件中的系统提示词。

修改助手提示词

编辑 pages/index.tsx 文件中的助手提示词。

更新对话界面

修改 components/Chat/ 目录下的组件文件。

故障排除

常见问题

依赖安装失败

rm -rf node_modules package-lock.json
npm install

测试失败
```
npm run test:coverage
```
API 密钥错误
- 检查 .env.local 文件是否正确配置
- 确认 API 密钥有效性
构建失败
```
npm run lint
npm run build
```

许可证

本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。