# ai-chat

**Repository Path**: carloslst/ai-chat

## Basic Information

- **Project Name**: ai-chat
- **Description**: 简单的ai对话框，基于SSE实现
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-24
- **Last Updated**: 2025-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI分析弹窗项目

## 项目简介

本项目基于 Vue3 + TypeScript + Element Plus，实现了支持 SSE 流、打字动画、弹窗拖拽缩放、AI思考 loading 动画等功能的高可用弹窗分析组件。

## 快速开始

#### 介绍
简单的ai对话框，基于SSE实现

#### 软件架构
软件架构说明
py3.x + vue3 + ts + vite + element-plus

#### 安装教程

1.  npm install
2.  python 代码  pip install

#### 使用说明

1.  npm run dev
2.  控制台(python sseService.py) 或者 pycharm直接运行

#### 参与贡献

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


#### 问题点

## 技术方案

### 一、项目整体架构

简述本项目采用的技术栈、架构模式和主要设计思想。

- **技术栈**：Vue3 + Composition API + TypeScript + SCSS + Element Plus
- **架构模式**：组件化开发，关注点分离，核心功能通过 hooks 和独立组件封装
- **主要模块**：弹窗（ResizableDialog）、AI分析（AiAnalysisResult）、SSE流（useSSE）、打字动画（useTypingEffect）、Loading动画（AiThinking）

---

### 二、核心功能模块设计

#### 1. 弹窗（ResizableDialog）

- **功能点**：
  - 支持拖拽、缩放、最大化、最小化、还原
  - 尺寸限制支持百分比和像素
  - 弹窗body支持内容自适应和滚动
- **技术实现**：
  - 通过 `useResizableDialog` hook 管理弹窗状态和行为
  - 支持 props 配置 min/max/初始尺寸、位置等
  - 事件驱动（emit）与外部交互
  - 关键代码片段：
    ```ts
    const minWidth = computed(() => parseSize(props.minWidth, window.innerWidth, 560));
    // ...
    ```

#### 2. AI分析结果（AiAnalysisResult）

- **功能点**：
  - 弹窗内容区展示AI分析结果
  - 支持 markdown 渲染、代码高亮、内容安全
  - 打字动画、暂停、快进、全部显示等交互
- **技术实现**：
  - 通过插槽嵌入到弹窗
  - 使用 `useTypingEffect` 实现打字动画
  - 通过 DOMPurify 过滤 markdown 渲染结果
  - 滚动逻辑通过 ref 传递，保证内容区和弹窗body滚动分离

#### 3. SSE流式数据（useSSE + AdvancedSSE）

- **功能点**：
  - 支持流式数据推送，AI分析结果实时展示
  - 连接、关闭、状态、错误处理
- **技术实现**：
  - 封装 `useSSE` hook，统一管理 SSE 连接
  - 支持 onMessage/onEvent/onError 回调
  - 自动清理，防止内存泄漏
  - 关键代码片段：
    ```ts
    const { startSSE, closeSSE } = useSSE({ ... });
    ```

#### 4. AI 结果有用性反馈组件（AiResultUseful）

#### 组件功能
- 提供"有用/无用"反馈按钮，支持本地高亮，点击后可通过事件上报。
- 默认使用 Element Plus 的 `Promotion`（点赞/有用）和 `Bottom`（点踩/无用）图标。
- 可插入到弹窗头部中间区域，提升用户交互体验。

#### 用法示例

```vue
<ResizableDialog v-model="visible" title="AI分析">
  <template #header-center>
    <AiResultUseful @update:useful="onUsefulChange" />
  </template>
  <AiAnalysisResult />
</ResizableDialog>
```

#### 事件说明
- `update:useful(val: boolean)`：当用户点击"有用"或"无用"按钮时触发，`val` 为 `true`（有用）或 `false`（无用）。

#### 组件代码片段
```vue
<template>
  <div class="ai-result-useful">
    <el-tooltip content="有用" placement="top">
      <el-button :type="useful === true ? 'primary' : 'default'" circle @click="setUseful(true)">
        <el-icon><Promotion /></el-icon>
      </el-button>
    </el-tooltip>
    <el-tooltip content="无用" placement="top">
      <el-button :type="useful === false ? 'danger' : 'default'" circle @click="setUseful(false)">
        <el-icon><Bottom /></el-icon>
      </el-button>
    </el-tooltip>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElTooltip, ElIcon } from 'element-plus';
import { Promotion, Bottom } from '@element-plus/icons-vue';
const useful = ref<null | boolean>(null);
const emit = defineEmits<{ (e: 'update:useful', val: boolean): void }>();
function setUseful(val: boolean) {
  useful.value = val;
  emit('update:useful', val);
}
</script>

#### 5. Loading动画（AiThinking）

- **功能点**：
  - "AI思考中..."动态点点动画
  - 支持自定义颜色、点数、文案
- **技术实现**：
  - 封装为独立组件 `<AiThinking />`
  - 纯CSS动画，性能优良
  - 关键代码片段：
    ```vue
    <AiThinking color="#409eff" :dotCount="3">AI思考中</AiThinking>
    ```

---

### 三、关键交互与体验优化

- **滚动体验**：内容区和弹窗body滚动分离，自动滚动到底，保证用户始终看到最新内容。
- **打字动画**：逐字渲染，支持暂停、快进、全部显示，提升交互感。
- **异常处理**：SSE连接异常自动关闭，loading动画及时反馈。

---

### 四、可扩展性与维护性

- 所有核心功能均以 hook 或组件形式封装，便于后续业务扩展和团队协作。
- 关键参数（如弹窗尺寸、SSE地址、动画速度等）均支持 props 配置，灵活适配不同场景。
- 代码结构清晰，注释完善，便于新成员快速上手。

#### 插件化与二次开发友好

**设计理念**
- 解耦核心与扩展，主流程只关注基础能力，所有增强、定制、业务相关逻辑均可通过插件机制实现。
- 预留开放扩展点，方便外部注入自定义逻辑。
- 降低维护和升级成本，便于业务快速集成和二次开发。

**实现方式**
- 插槽与事件机制：通过 Vue 插槽（slot）和事件（emit），允许外部自定义弹窗内容、头部按钮、反馈组件等。
- 插件注册与钩子：预留插件注册接口（如 useSSE/useTypingEffect/useAnalysisPlugin），允许外部注册自定义处理函数，支持生命周期钩子（如 onSSEMessage、onTypingEnd、onFeedbackSubmit）。
- 配置驱动：通过 props 传递自定义配置（如自定义SSE地址、内容渲染器、敏感词检测器等），实现灵活适配。

**应用场景举例**
- 自定义 AI 内容渲染：通过插槽或传入自定义 markdown 渲染器，实现特殊格式、表格、图表等扩展。
- 反馈上报：通过事件监听 `AiResultUseful` 的反馈，接入埋点、上报、A/B 测试等。
- SSE 数据处理：注册自定义 SSE 消息解析器，适配不同后端协议。
- 交互扩展：在弹窗头部插入自定义按钮（如"导出"、"收藏"），或扩展底部操作区。

**代码示例**

插槽扩展：
```vue
<ResizableDialog v-model="visible" title="AI分析">
  <template #header-center>
    <MyCustomFeedback />
  </template>
  <template #actions>
    <el-button @click="exportResult">导出</el-button>
    <slot name="close"></slot>
  </template>
  <MyCustomContent />
</ResizableDialog>
```

事件与钩子：
```vue
<AiResultUseful @update:useful="val => sendFeedback(val)" />
```

插件注册（伪代码）：
```ts
// useAnalysisPlugin.ts
export function useAnalysisPlugin(options: { onSSEMessage?: (msg) => void, onFeedback?: (val) => void }) {
  // 在SSE、反馈等流程中调用options提供的钩子
}
```

配置驱动：
```vue
<AiAnalysisResult :markdownRenderer="myRenderer" :sensitiveWords="['xxx', 'yyy']" />
```

---

### 五、安全与性能

- **安全**：Markdown 渲染结果通过 DOMPurify 过滤，防止 XSS。
- **性能**：SSE流和打字动画均为异步、渐进式渲染，提升用户感知速度。loading动画纯CSS，无图片，性能优良。
- **资源释放**：SSE连接、打字动画等均在组件卸载时自动清理，防止内存泄漏。

---

### 六、未来可扩展方向

- 支持多种 loading 动画类型
- 弹窗支持多层嵌套、全局管理
- SSE支持断线重连、心跳检测
- AI分析结果支持多格式渲染（如表格、图表等）

---

### 七、关键代码结构示意

```plaintext
App.vue
 └─ ResizableDialog
      └─ AiAnalysisResult
           ├─ useTypingEffect
           ├─ useSSE
           └─ AiThinking
```

---

### 八、总结

本方案通过组件化、hook封装、关注点分离等方式，实现了高可维护、高扩展性、良好用户体验和安全性的AI分析弹窗功能。后续可根据业务需求灵活扩展和优化。