怎么js来调用自己发布的智能体API

<template>
  <div class="chat-container">
    <div class="chat-box" ref="chatBox">
      <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
        <span>{{ msg.content }}</span>
      </div>
    </div>
    <el-input v-model="input" placeholder="输入你的消息..." @keyup.enter="sendMessage" />
    <el-button type="primary" @click="sendMessage">发送</el-button>
  </div>
</template>

<script>
import axios from 'axios';
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const input = ref('');
    const messages = ref([]);
    const chatBox = ref(null);

    const sendMessage = async () => {
      if (!input.value.trim()) return;

      messages.value.push({ role: 'user', content: input.value });
      const userMessage = input.value;
      input.value = '';

      try {
        const response = await axios.post('https://api.coze.cn/open_api/v2/chat', {
          bot_id: '746963156094***',
          user_id: '1',
          stream: false,
          auto_save_history: true,
          additional_messages: [{ role: 'user', content: userMessage, content_type: 'text' }]
        }, {
          headers: {
            'Authorization': 'Bearer pat_iPSM6Ql****',
            'Content-Type': 'application/json'
          }
        });
        console.log('请求响应:', response.data)
        messages.value.push({ role: 'bot', content: response.data.reply || 'AI 未返回内容' });

      } catch (error) {
        console.error('请求出错:', error);
        messages.value.push({ role: 'bot', content: '请求失败，请稍后重试。' });
      }

      nextTick(() => {
        chatBox.value.scrollTop = chatBox.value.scrollHeight;
      });
    };

    return { input, messages, sendMessage, chatBox };
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 16px;
}
.chat-box {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 8px;
  margin-bottom: 8px;
}
.message {
  padding: 8px;
  margin: 4px 0;
  border-radius: 4px;
}
.user {
  background-color: #d1e7ff;
  align-self: flex-end;
}
.bot {
  background-color: #f1f1f1;
  align-self: flex-start;
}
</style>

上面是我写的vue页面源码，但是返回结果是空的，是因为调用的接口不对吗？求大佬解答。