cd-aichat

cd-aichat

Vue3组件，用于与Dify API进行交互，实现AI聊天功能。

功能特点

• 与Dify API集成，实现AI聊天功能
• 支持多轮对话历史记录
• 支持用户ID传递
• 支持将AI回答应用到指定的前端元素
• 完全可定制的UI和交互

安装

# 使用npm
npm install cd-aichat

# 使用pnpm
pnpm add cd-aichat

# 使用yarn
yarn add cd-aichat

基本用法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import CdAiChatPlugin from 'cd-aichat'

const app = createApp(App)
app.use(CdAiChatPlugin)
app.mount('#app')

局部注册

<script>
import { CdAiChat } from 'cd-aichat'

export default {
  components: {
    CdAiChat
  }
}
</script>

在模板中使用

<template>
  <div>
    <textarea v-model="content" rows="5" cols="50"></textarea>
    
    <cd-aichat 
      :inputdata="{ data: content }" 
      output="content" 
      agent="assistant" 
      id="your-agent-id"
      userid="user123"
      url="https://api.dify.ai/v1"
      @apply="handleApply"
      @cancel="handleCancel"
    >AI助手</cd-aichat>
  </div>
</template>

<script>
import { ref } from 'vue';
import { CdAiChat } from 'cd-aichat';

export default {
  components: {
    CdAiChat
  },
  setup() {
    const content = ref('这是一段示例文本，可以通过AI聊天来优化或修改它。');
    
    const handleApply = (result) => {
      console.log('应用AI回答:', result);
      content.value = result;
    };
    
    const handleCancel = () => {
      console.log('取消应用');
    };
    
    return {
      content,
      handleApply,
      handleCancel
    };
  }
};
</script>

环境变量配置

组件支持通过环境变量配置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	当发生错误时触发

高级用例：文本框应用示例

<template>
  <div>
    <textarea v-model="textareaValue" rows="10" cols="50"></textarea>
    <button @click="showAiChat">AI优化内容</button>
    
    <cd-aichat 
      v-if="showChat"
      :inputdata="{ data: textareaValue }" 
      output="textareaValue" 
      id="your-agent-id"
      userid="user123"
      url="https://api.dify.ai/v1"
      @apply="handleApply"
      @cancel="showChat = false"
    >AI助手</cd-aichat>
  </div>
</template>

<script>
import { ref } from 'vue';
import { CdAiChat } from 'cd-aichat';

export default {
  components: {
    CdAiChat
  },
  setup() {
    const textareaValue = ref('');
    const showChat = ref(false);
    
    function showAiChat() {
      showChat.value = true;
    }
    
    function handleApply(result) {
      textareaValue.value = result;
      showChat.value = false;
    }
    
    return {
      textareaValue,
      showChat,
      showAiChat,
      handleApply
    };
  }
};
</script>

许可证

MIT