# chat-bi-public

**Repository Path**: wforever/chat-bi-public

## Basic Information

- **Project Name**: chat-bi-public
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-21
- **Last Updated**: 2026-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GuanData ChatBI Public Sample

纯 JavaScript 实现的 ChatBI 前台 Sample，不依赖前端框架，支持 L1 问数和 L2 洞察分析。

本工程用于演示如何基于 ChatBI [public-api](https://api.guandata.com/apidoc/docs-site/6000016) 与 [viz-sdk](https://github.com/GuandataOSS/sdk-demo/tree/master?tab=readme-ov-file#viz-sdk-%E8%AF%B4%E6%98%8E) 自研 Chat 前端。

详细的 API 参考、核心流程说明、数据结构文档请查阅：

**[docs/development-guide.md](docs/development-guide.md)**

## 说明与版本

- 本工程代码为 **100% AI 生成**，仅作为 Demo 参考，可能存在缺陷或未覆盖场景。
- 当前适配版本：
  - `Data Synapse (chatbi server) 2.11.0`

## 功能

- **主题管理**：列出可用主题，切换主题
- **会话管理**：创建、选择、重命名、删除会话
- **L1 问数（Query）**：自然语言提问 → AI 分析 → 图表可视化 + 数据解读
- **L2 洞察分析（Insight）**：多步 Agent 分析 → `query_data / search_web / search_knowledge / python_executor / think` → Markdown 报告 + 内嵌图表
- **图表交互**：切换图表类型、表格高度自适应
- **反馈功能**：点赞 / 点踩 / 收藏

## 技术栈

| 类型 | 技术 |
|---|---|
| 语言 | 纯 HTML + CSS + JavaScript（ES Modules） |
| 构建 | Vite（dev server + proxy + HMR） |
| UI | Tailwind CSS v4 + daisyUI v5 |
| HTTP | axios（拦截器统一鉴权） |
| 可视化 | viz-sdk（GDVizSDK，CDN） |
| Markdown | marked + DOMPurify + KaTeX + PrismJS |
| 工具 | dayjs（日期）、sql-formatter（SQL 格式化） |

## 快速开始

```bash
# 1. 安装依赖
npm install

# 2. 复制环境变量配置文件并填入实际值
cp .env.example .env
```

编辑 `.env` 文件，填入 BI 平台地址和鉴权信息：

```bash
# BI 平台地址（必填）
BI_BASE_URL=https://your-bi-platform.example.com

# 公共路径前缀（可选，留空表示无前缀）
# 获取方式：打开BI任意页面，浏览器控制台执行 window.__GD_PUBLIC_PATH__
BI_PUBLIC_PATH=
```

鉴权方式**二选一**：

**方式一：直接提供 Token**

```bash
BI_UID_TOKEN=your_token_here
```

获取方法：登录 BI 平台 → 开发者工具 → Application → Cookies → 复制 `uIdToken` 的值。

**方式二：通过[登录接口](https://api.guandata.com/apidoc/docs-site/345092/api-3470502)自动获取 Token（推荐）**

```bash
BI_LOGIN_DOMAIN=your_domain
BI_LOGIN_ID=your_login_id
BI_LOGIN_PASSWORD=your_password
```

启动 dev server 时会自动调用 `/public-api/sign-in` 接口获取 Token，无需手动复制。
如果同时配置了 `BI_UID_TOKEN` 和登录信息，优先使用 `BI_UID_TOKEN`。

```bash
# 3. 启动开发服务器
npm run dev

# 4. 在浏览器打开 http://localhost:5180
```

页面加载后会自动连接 BI 平台，选择主题后即可开始提问。

## 项目结构

```
chat-bi-public/
├── index.html                     # 入口页面 + UI 布局
├── .env.example                   # 环境变量模板
├── src/
│   ├── config.js                  # 运行时配置管理（themeId）
│   ├── http.js                    # 统一 HTTP 请求层（axios 拦截器）
│   ├── api/
│   │   ├── theme.js               # 主题相关 API
│   │   ├── session.js             # 会话管理 API
│   │   ├── l1-message.js          # L1 消息 API（send/get/list/cancel）
│   │   ├── l2-message.js          # L2 消息 API（send/status/v4 list-agent/v4 get-agent）
│   │   └── feedback.js            # 反馈 API（vote/collect）
│   ├── chat-l1.js                 # L1 聊天核心逻辑（发送 + 轮询状态机）
│   ├── chat-l2.js                 # L2 洞察核心逻辑（发送 + session 状态轮询）
│   ├── render-l1.js               # L1 消息渲染（分析步骤 + 文字回答 + 图表 + 数据解读）
│   ├── render-l2.js               # L2 消息渲染（工具调用卡片 + Markdown 报告 + 图表）
│   ├── render-session-list.js     # 侧边栏会话列表渲染与交互
│   ├── render-chat-input.js       # 输入区域（文本框 + 问数/洞察切换 + 发送/取消）
│   ├── viz-chart.js               # GDVizSDK 图表渲染封装
│   ├── markdown.js                # Markdown 渲染封装（marked + dompurify + katex + prismjs）
│   └── app.js                     # 主入口，串联各模块
├── styles/
│   └── index.css                  # 样式入口（Tailwind 指令 + 自定义样式）
├── vite.config.js                 # Vite 配置（env + proxy 代理 + Tailwind 插件）
├── package.json                   # 依赖声明 + scripts
├── docs/
│   └── development-guide.md       # 完整开发指南
└── README.md
```