# ai-chat-web

**Repository Path**: gxkord/ai-chat-web

## Basic Information

- **Project Name**: ai-chat-web
- **Description**: Vue3搭建的AI对话项目
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 22
- **Forks**: 7
- **Created**: 2025-03-25
- **Last Updated**: 2025-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: AI, Vue

## README

# ai-chat-web

## 项目介绍

实现一个基于 Vue3 的AI聊天机器人。

## 开发依赖

1. Vue3 + TypeScript + Vite
2. markdown-it + wooorm/starry-night

## 安装教程

1. npm install
2. npm run dev

## 使用说明

1. 本项目暂未完善，仅供学习参考。
2. 需要自行搭建后端服务，后端服务参考：https://gitee.com/gxkord/ai-chat-server

## 功能介绍

### 整体功能

| 功能      | 描述                                       | 可自定义 | 完成度 |
|---------|------------------------------------------|------|-----|
| 用户对话框渲染 | 仅支持纯文本                                   | ✅    | ✔️  |
| 解答对话框渲染 | 支持markdown渲染<br />支持代码渲染<br />支持非流式、流式回答 | ✅    | ✔️  |
| 用户输入    | 支持文本输入，发送、停止回答                           | ✅    | ✔️  |
| 标题栏     | 显示title                                  | ✅    | ✔️  |
| 智能体列表   | 支持多智能体（agent）列表展示                        | ✅    | ✔️  |
| 历史记录列表  | 支持历史记录的查看                                | ✅    | ✔️  |
| 移动端     | 支持移动端样式                                  |      | ✔️  |
| 深色模式    | 支持随系统自动切换深色模式                            |      | ✔️  |

### 细节功能

| 功能     | 描述                  | 可自定义 | 完成度 |
|--------|---------------------|------|-----|
| 气泡工具栏  | 支持时间显示<br />支持复制、重试 | ✅    | ✔️  |
| 输入工具栏  |                     | ✅    | ✔️  |
| 附件上传   |                     | ✅    | ✔️  |
| 开场白提示词 |                     | ✅    | ✔️  |
| 思考过程   | 展示/折叠思考过程<br />     |      | ✔️  |
| 思考动画   | 内置简单思考动画            | ✅    | ✔️  |
| 机器人头像  | 内置文本头像              | ✅    | ✔️  |

## 界面展示

### 电脑端界面

#### 浅色模式

![回答演示](./img/浅色/回答演示.png)
![多智能体](./img/浅色/多智能体.png)
![历史记录](./img/浅色/历史记录.png)
![附件](./img/浅色/附件.png)

#### 深色模式

![回答演示](./img/深色/回答演示.png)
![多智能体](./img/深色/多智能体.png)
![历史记录](./img/深色/历史记录.png)
![附件](./img/深色/附件.png)

### 移动端界面

![回答演示](./img/移动端/回答演示.png)
![多智能体](./img/移动端/多智能体.png)
![历史记录](./img/移动端/历史记录.png)
![附件](./img/移动端/附件.png)

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request