Coze 外部调用chat SDK 发送消息

1、coze的chat sdk尚未开放sendMessage方法。需要自己找到发送按钮和输入框,才能点击发送自定义的消息。比如点击按钮后,发送‘你好呀’,不需要手动去输入框输入内容,再点击发送。

2、coze窗口的UI效果可以自己改动的内容太少,如修改背景颜色,无法直接修改。也需要自己找到元素,使用document修改。

代码示例如下:

<!doctype html>
<html lang=”zh-CN”>
<head>
<style>
/* 自定义悬浮入口的位置 */
#position_demo {
position: absolute;
right: 10px;
bottom: 20px;
}
#sendButton {
margin: 10px 0;
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#sendButton:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<button id=”sendButton”>发送消息</button>
<div id=”position_demo”></div>
<script src=”https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.8/libs/cn/index.js”></script>
<script>
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: ‘7****你自己的botid’,
isIframe: false,
},
auth: {
type: ‘token’,
token: ‘pat_****你创建的Secret token’,
onRefreshToken: () => ‘pat_****你创建的Secret token’,
},
ui: {
chatBot: {
title: “智能体客服”,
uploadable: true
}
},
user: {
id: ‘user_’ + Date.now(),
name: ‘访客’,
avatar: ‘https://coze.cn/favicon.ico’
}
});

// 默认显示聊天框
cozeWebSDK.showChatBot();

// 查找发送按钮并点击的函数
function findAndClickSendButton() {
try {
// 1. 首先找到聊天窗口容器
const chatContainer = document.querySelector(‘[class*=”chat”], [class*=”coze”], [class*=”message”]’);
if (!chatContainer) return;

// 2. 直接查找 taro-textarea-core 元素
const textareaCore = chatContainer.querySelector(‘taro-textarea-core’);
if (!textareaCore) return;

// 3. 获取实际的 textarea 元素
const textarea = textareaCore.querySelector(‘textarea’);
if (!textarea) return;

// 4. 修改占位符文本
textarea.placeholder = ‘发送消息’;

// 5. 设置输入框的值
textarea.value = ‘你好呀’;
textarea.dispatchEvent(new Event(‘input’, { bubbles: true }));

// 6. 查找发送按钮
const sendButton = chatContainer.querySelector(‘[class*=”send-btn”], [class*=”send-button”], [class*=”send”]’);
if (!sendButton) return;

// 7. 等待一小段时间确保输入框内容已更新
setTimeout(() => {
sendButton.click();
}, 100);

} catch (error) {
console.log(‘发送消息时出错:’, error);
}
}

// 添加按钮点击事件
document.getElementById(‘sendButton’).addEventListener(‘click’, () => {
// 先等待一小段时间确保聊天窗口加载完成
setTimeout(findAndClickSendButton, 1000);
});
</script>
</body>
</html>

 

https://blog.csdn.net/yixiuquan/article/details/147578147