<template>
<div class="container">
<div class="chat-window">
<div class="chat-message" v-for="message in messages" :key="message.id">
<div class="message-content">{{ message.content }}</div>
</div>
</div>
<textarea v-model="userInput" @keydown="handleEnterPress"></textarea>
<button @click="sendMessage">Send</button>
</div>
</template>
<script>
import { ColaAIPlus } from 'cola-ai-plus';
export default {
data() {
return {
userInput: '',
messages: [],
cola: null,
};
},
created() {
this.cola = new ColaAIPlus({
// 配置项
});
},
methods: {
handleEnterPress(event) {
if (event.key === 'Enter' && event.shiftKey === false) {
this.sendMessage();
event.preventDefault();
}
},
async sendMessage() {
if (this.userInput.trim() === '') {
alert('输入不能为空');
return;
}
this.messages.push({ id: Date.now(), content: this.userInput });
const response = await this.cola.chat({
content: this.userInput,
// 其他配置项
});
this.messages.push({ id: Date.now(), content: response });
this.userInput = '';
},
},
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.chat-window {
height: 400px;
overflow-y: scroll;
padding: 10px;
border: 1px solid #ccc;
}
.chat-message {
margin-bottom: 10px;
}
.message-content {
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
max-width: 80%;
word-wrap: break-word;
}
textarea {
margin-top: 10px;
width: 80%;
height: 100px;
padding: 10px;
}
button {
margin-top: 10px;
padding: 10px 15px;
}
</style>这个简易的Vue组件展示了如何创建一个基本的聊天界面，并使用ColaAI Plus大模型进行消息的发送和接收。用户输入的消息被发送到大模型，然后模型的回复被显示在聊天窗口中。这个例子没有实现完整的ColaAI Plus接口调用，只是提供了一个框架，展示了如何集成大模型到Vue应用中。