# stream-chat

**Repository Path**: qiaoy/stream-chat

## Basic Information

- **Project Name**: stream-chat
- **Description**: 用于跟本地的大模型适配接口进行流式交互
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-06
- **Last Updated**: 2026-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Stream Chat — AI 智能助手聊天应用

基于 Vue 3 + Vite 构建的 AI 智能助手聊天应用，支持 SSE 流式实时响应，具备完整的 Markdown 渲染能力，可正确处理表格、公式、图表、代码块等复杂内容。

## 功能特性

### 核心能力
- **SSE 流式响应** — 基于 Server-Sent Events 协议，AI 回复逐字呈现，支持中途停止
- **多轮对话** — 自动维护会话上下文，支持连续交互
- **思考过程展示** — 展示 AI 推理过程（reasoning content），默认展开，可折叠

### 渲染引擎（StreamMarkdown）
- **Markdown 全格式** — GFM 表格、任务列表、删除线、详情折叠（`<details>`）、高亮标记（`==text==`）
- **LaTeX 公式** — 行内 `$...$`、块级 `$$...$$`、`\[...\]`、`\(...\)`，中文混排智能识别，KaTeX 错误自动降级
- **Mermaid 图表** — flowchart、sequenceDiagram、gantt 等，流式结束后自动渲染，渲染失败可查看源码
- **PlantUML 图表** — 自动编码生成 SVG 图片
- **代码高亮** — 基于 highlight.js，支持 20+ 语言，代码块带语言标签和复制按钮
- **图片灯箱** — 点击图片全屏放大查看
- **流式安全** — 自动补全未闭合的 Markdown 结构（代码块、公式、粗体等），防止流式渲染抖动

### 交互体验
- **智能滚动** — 自动跟随最新消息，用户上滚时暂停自动滚动，显示"回到底部"按钮
- **错误重试** — 请求失败显示错误提示，支持一键重试
- **消息操作** — hover 显示复制/重试按钮
- **清空确认** — 清空对话需二次确认，防误操作
- **调试面板** — 右侧可切换的调试面板，实时展示 SSE 原始数据流、会话 ID、消息状态

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3 (Composition API + `<script setup>`) |
| 构建 | Vite 5 |
| Markdown | marked v12 + DOMPurify |
| 代码高亮 | highlight.js (按需引入 20+ 语言) |
| 公式 | KaTeX |
| 图表 | Mermaid v11 + PlantUML |
| 流式协议 | SSE (fetch + ReadableStream) |

## 项目结构

```
stream-chat/
├── index.html                  # Vite 入口
├── vite.config.js              # Vite 配置（代理、代码分割）
├── src/
│   ├── main.js                 # 应用入口，全局样式导入
│   ├── App.vue                 # 主组件（对话管理、调试面板）
│   ├── api/
│   │   └── chat.js             # SSE 流式请求（超时控制、中断、解析）
│   └── components/
│       ├── messageList.vue     # 消息列表（智能滚动、交互操作）
│       └── StreamMarkdown.vue  # 渲染引擎（LaTeX/Mermaid/代码高亮/流式安全）
└── test/
    └── sse-test.mjs            # SSE 接口自测脚本
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

### 运行 SSE 自测

```bash
npm run test:sse
```

## API 配置

开发环境通过 Vite 代理转发请求：

| 前端请求 | 代理目标 |
|---------|---------|
| `/llm-log/assistant/stream` | `http://127.0.0.1:8311/base-service/llm-log/assistant/stream` |

生产环境需自行配置反向代理（Nginx 等），将 `/llm-log` 路径转发到后端服务。

## SSE 接口协议

请求 `POST /llm-log/assistant/stream`：

```json
{
  "content": "用户消息",
  "conversationId": "可选，多轮对话ID"
}
```

响应为 SSE 流，每条消息格式：

```
data: {"conversationId": "xxx", "reasoning_content": "思考内容", "content": "回复内容"}
```

结束标志：`data: [DONE]` 或 `event: done`。

## 构建优化

Vite 配置了 `manualChunks` 代码分割，将大型依赖拆分为独立 chunk：

- `highlight` — highlight.js（按需引入，~20KB gzip）
- `katex` — KaTeX 公式引擎
- `markdown` — marked + DOMPurify

## 浏览器支持

Chrome / Firefox / Safari / Edge 最新版（需支持 `ReadableStream` 和 `AbortController`）。