cd-aichat 1.0.0

package/README.md

@@ -0,0 +1,188 @@
+# cd-aichat
+
+Vue3组件，用于与Dify API进行交互，实现AI聊天功能。
+
+## 功能特点
+
+- 与Dify API集成，实现AI聊天功能
+- 支持多轮对话历史记录
+- 支持用户ID传递
+- 支持将AI回答应用到指定的前端元素
+- 完全可定制的UI和交互
+
+## 安装
+
+```bash
+# 使用npm
+npm install cd-aichat
+
+# 使用pnpm
+pnpm add cd-aichat
+
+# 使用yarn
+yarn add cd-aichat
+```
+
+## 基本用法
+
+### 全局注册
+
+```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')
+```
+
+### 局部注册
+
+```vue
+<script>
+import { CdAiChat } from 'cd-aichat'
+
+export default {
+  components: {
+    CdAiChat
+  }
+}
+</script>
+```
+
+### 在模板中使用
+
+```vue
+<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 | 当发生错误时触发 |
+
+## 高级用例：文本框应用示例
+
+```vue
+<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