我想实现在koishi控制台与chatglm聊天,方式是类似于chatgpt的聊天框的形式,但我遇到了一些问题,这个是我的vue文件:
<template>
<div
class="container"
:style="{ backgroundImage: `url(${backgroundImage})` }"
>
<div class="title">ChatGlm</div>
<div class="dialog">
<div v-for="(message, index) in messages" :key="index" class="message">
<span class="username">{{ message.username }}</span>
<span class="content">{{ message.content }}</span>
</div>
<div class="input">
<input
v-model="newMessage"
@keyup.enter="sendMessage"
placeholder="请输入..."
:style="inputStyle"
/>
</div>
</div>
<div class="buttons">
<button @click="clearMessages">D</button>
<button @click="changeFontColor">A</button>
<button @click="increaseFontSize">+</button>
<button @click="decreaseFontSize">-</button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
messages: [],
newMessage: "",
username: "用户",
backgroundImage: "https://picsum.photos/800/600",
fontSize: 16,
fontColor: "white",
};
},
methods: {
sendMessage() {
if (this.newMessage.trim() !== "") {
let messageContent = this.newMessage;
this.messages.push({
username:
this.username.trim() === "" ? "匿名用户" : this.username.trim(),
content: messageContent,
});
axios
.get("https://api.chat.t4wefan.pub/chatglm", {
params: {
msg: messageContent,
usrid: "12345",
source: "glmwebui",
},
})
.then((response) => {
this.messages.push({
username: "ChatGlm",
content: response.data,
});
});
this.newMessage = "";
// 将新消息滚动到底部
this.$nextTick(() => {
let messageList = this.$el.querySelector(".message-list");
messageList.scrollTop = messageList.scrollHeight;
});
}
},
increaseFontSize() {
this.fontSize++;
},
decreaseFontSize() {
this.fontSize--;
},
changeFontColor() {
this.fontColor = this.fontColor === "white" ? "black" : "white";
},
clearMessages() {
this.messages = [];
},
},
computed: {
inputStyle() {
return {
fontSize: `${this.fontSize}px`,
color: this.fontColor,
};
},
},
};
</script>
我通过 sendMessage函数把用户输入的消息发送给chatglm的api,服务器那边也显示收到了,但是我这边却没有正确返回api的回复。
这个 source: “glmwebui”,表明这个请求是我发出的:
这段代码的核心其实是sendMessage函数:
sendMessage() {
if (this.newMessage.trim() !== "") {
let messageContent = this.newMessage;
this.messages.push({
username:
this.username.trim() === "" ? "匿名用户" : this.username.trim(),
content: messageContent,
});
axios
.get("https://api.chat.t4wefan.pub/chatglm", {
params: {
msg: messageContent,
usrid: "12345",
source: "glmwebui",
},
})
.then((response) => {
this.messages.push({
username: "ChatGlm",
content: response.data,
});
});
this.newMessage = "";
// 将新消息滚动到底部
this.$nextTick(() => {
let messageList = this.$el.querySelector(".message-list");
messageList.scrollTop = messageList.scrollHeight;
});
}
},
我试过向其他的api发起请求,比如“每日一句”的api,他的返回是正常是的:
sendMessage() {
if (this.newMessage.trim() !== "") {
let messageContent = this.newMessage;
this.messages.push({
username:
this.username.trim() === "" ? "匿名用户" : this.username.trim(),
content: messageContent,
});
axios
.get("https://api.chat.t4wefan.pub/chatglm", {
params: {
msg: messageContent,
usrid: "12345",
source: "glmwebui",
},
})
.then((response) => {
this.messages.push({
username: "ChatGlm",
content: response.data,
});
});
this.newMessage = "";
},
聊天框也有看到他返回的信息:
但我不知道为什么我收不到chatglm服务器的回复,我问了一下api主人t4关于api的返回格式,她表示是纯字符串:
情况就是这样了,我是vue新手,在这里请教一下各位大佬,我的代码出现了哪些问题,怎么样才能接收到api返回的内容
我把整个插件也打包了,放在这里: glm-webui/custom-page.vue at main · wochenlong/glm-webui · GitHub