Vue3组件，用于与Dify API进行交互，实现AI聊天功能
npm install cd-aichatVue3组件，用于与Dify API进行交互，实现AI聊天功能。
- 与Dify API集成，实现AI聊天功能
- 支持多轮对话历史记录
- 支持用户ID传递
- 支持将AI回答应用到指定的前端元素
- 完全可定制的UI和交互
``bash使用npm
npm install cd-aichat
基本用法
$3
js
import { createApp } from 'vue'
import App from './App.vue'
import CdAiChatPlugin from 'cd-aichat'const app = createApp(App)
app.use(CdAiChatPlugin)
app.mount('#app')
`$3
vue
`$3
vue
output="content"
agent="assistant"
id="your-agent-id"
userid="user123"
url="https://api.dify.ai/v1"
@apply="handleApply"
@cancel="handleCancel"
>AI助手
`环境变量配置
组件支持通过环境变量配置Dify API URL：
.env 文件
VITE_AICHAT_API_URL=https://api.dify.ai/v1
组件属性
| 属性名 | 类型 | 必填 | 描述 |
|--------|------|------|------|
| inputdata | Object/String | 是 | 输入数据，可以是对象或JSON字符串 |
| output | String | 是 | 指定输出结果应用到的目标变量名 |
| agent | String | 否 | 指定使用的AI代理类型 |
| id | String | 是 | 指定Dify API的代理ID |
| userid | String | 是 | 用户ID，用于多用户场景区分 |
| url | String | 否 | Dify API的URL地址，优先级高于环境变量 |
组件事件
| 事件名 | 参数 | 描述 |
|--------|------|------|
| apply | result | 当用户点击"应用"按钮时触发，返回AI回答结果 |
| cancel | - | 当用户点击"取消"按钮时触发 |
| message | message | 当收到新消息时触发 |
| error | error | 当发生错误时触发 |
高级用例：文本框应用示例
vue
:inputdata="{ data: textareaValue }"
output="textareaValue"
id="your-agent-id"
userid="user123"
url="https://api.dify.ai/v1"
@apply="handleApply"
@cancel="showChat = false"
>AI助手
``MIT