Dify 智能体对话插件

基于 Dify 智能体的对话插件，支持流式响应、点赞/点踩反馈等功能。

📋 版本说明

v1.0.4 (2026-05-12)

新增功能：

• ✅ 支持 Dify 智能体流式响应
• ✅ 消息点赞/点踩反馈功能
• ✅ Markdown 内容渲染
• ✅ 代码高亮显示
• ✅ ECharts 图表渲染支持
• ✅ 消息复制功能
• ✅ 重新生成响应功能

技术特性：

• Vue 2 + jQuery 技术栈
• 支持历史对话列表
• 响应式设计
• 支持会话切换

📦 依赖安装

安装命令

# 安装核心依赖（固定版本）
npm install [email protected] [email protected] [email protected] --save

# 如果使用 jQuery（已内置）
npm install [email protected] --save

依赖列表

| 依赖 | 版本 | 说明 | | :--- | :--- | :--- | | marked | ^4.3.0 | Markdown 解析器 | | highlight.js | ^11.7.0 | 代码高亮库 | | echarts | ^5.5.0 | 图表渲染库 | | jquery | ^3.7.1 | AJAX 请求（可选，已内置） | | vue | ^2.7.14 | Vue 2 框架 |

🛠️ 安装说明

方式一：npm 安装

npm install hy-dify-chat-box --save

// 在 Vue 组件中使用
import DifyChatBox from 'hy-dify-chat-box';

export default {
  components: {
    DifyChatBox
  },
  data() {
    return {
      apiUrl: 'https://api.example.com/dify',
      userId: 'user-001'
    };
  }
};

<template>
  <DifyChatBox 
    :api-url="apiUrl" 
    :user-id="userId" 
    title="智能助手"
  />
</template>

⚙️ 配置参数

基础参数

| 参数 | 类型 | 必填 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | apiUrl | String | 是 | - | Dify API 服务地址 | | userId | String | 否 | 'default_user' | 用户唯一标识 | | title | String | 否 | '智能助手' | 聊天窗口标题 | | showHeader | Boolean | 否 | true | 是否显示头部区域 |

参数示例

{
  apiUrl: 'https://api.yourdomain.com/dify',
  userId: 'user-12345',
  title: 'AI 智能助手',
  showHeader: true
}

🚀 使用方法

Vue 组件使用

<template>
  <div class="chat-wrapper">
    <DifyChatBox
      :api-url="apiUrl"
      :user-id="userId"
      :title="chatTitle"
      :show-header="showHeader"
    />
  </div>
</template>

<script>
import DifyChatBox from 'hy-dify-chat-box';

export default {
  name: 'ChatWrapper',
  components: {
    DifyChatBox
  },
  data() {
    return {
      apiUrl: 'https://api.example.com/dify',
      userId: 'user-001',
      chatTitle: '智能助手',
      showHeader: true
    };
  }
};
</script>

<style scoped>
.chat-wrapper {
  width: 100%;
  height: 100vh;
}
</style>

📡 API 接口说明

1. 聊天接口

URL: POST {apiUrl}/chat

请求体:

{
  "query": "用户输入的问题",
  "inputs": {},
  "response_mode": "streaming",
  "conversation_id": "会话ID（可选）",
  "user": "用户ID"
}

2. 历史消息接口

URL: POST {apiUrl}/messages

请求体:

{
  "conversation_id": "会话ID",
  "first_id": "",
  "limit": 100,
  "user": "用户ID"
}

3. 反馈接口

URL: POST {apiUrl}/feedbacks?id={messageId}

请求体:

{
  "message_id": "消息ID",
  "rating": "like" | "dislike" | null
}

4. 会话列表接口

URL: POST {apiUrl}/queryConversations

请求体:

{
  "user": "用户ID"
}

5. 删除会话接口

URL: DELETE {apiUrl}/conversations/{id}

请求体:

{
  "conversation_id": "会话ID",
  "user": "用户ID"
}

🎨 功能特性

消息交互

• 点赞/点踩: 支持对 AI 回复进行反馈，互斥显示
• 复制: 一键复制消息内容
• 重新生成: 重新生成当前回复

内容渲染

• Markdown: 支持完整 Markdown 语法
• 代码高亮: 支持多种编程语言语法高亮
• 图表渲染: 支持 ECharts 图表展示
• 流式响应: 支持实时流式消息展示

会话管理

• 历史记录: 查看历史对话列表
• 会话切换: 切换不同会话
• 会话删除: 删除指定会话

📁 项目结构

hy-dify-chat-box/
├── src/
│   ├── components/
│   │   ├── DifyChatBox.vue      # 主组件
│   │   ├── MessageItem.vue      # 消息项组件
│   │   ├── InputArea.vue        # 输入区域
│   │   ├── ChatHeader.vue       # 头部组件
│   │   ├── ThinkingBlock.vue    # 思考过程组件
│   │   ├── ConversationSidebar.vue  # 会话侧边栏
│   │   └── EmptyState.vue       # 空状态组件
│   └── index.js                 # 入口文件
├── dist/                        # 打包输出
├── package.json
├── webpack.config.js            # Webpack 配置
└── README.md

🔧 开发命令

# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build

# 代码检查
npm run lint

📄 许可证

MIT License

📞 联系方式

如有问题或建议，请联系开发团队。