-
Notifications
You must be signed in to change notification settings - Fork 0
/
chat.vue
135 lines (129 loc) · 4.51 KB
/
chat.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<v-btn
fab
bottom
dark
right
fixed
color="blue"
@click="chat_dialog = true"
> AI助手
</v-btn>
<v-dialog
v-model="chat_dialog"
max-width="500"
>
<v-card class="chat-window">
<v-card-title class="d-flex justify-space-between align-center" style="border-bottom: 3px solid lavender;background-color:#12b7f5; color:#202123;">
<div>
<h2 class="mb-2">Victor-智能助手</h2>
<p class="mb-0">量子计算、区块链、web3是什么?</p>
</div>
<div class="d-flex flex-column justify-center align-center">
<p class="mb-0" style="font-size: 14px; color: #4a4a4a;">欢迎使用AI对话</p>
<p class="mb-0" style="font-size: 12px; color: #e5dede;">基于最新训练模型</p>
</div>
</v-card-title>
<v-list class="message-list" style="border-bottom: 5px solid lavender">
<v-list-item v-for="(message, index) in messages" :key="index">
<v-list-item-content>
<v-card :class="message.role === 'user' ? 'message-me' : 'message-other'">
<v-card-text style="color:white">{{ message.text }}</v-card-text>
<div class="message-timestamp">{{ message.timestamp }}</div>
</v-card>
</v-list-item-content>
</v-list-item>
</v-list>
<v-card-actions>
<v-textarea
v-model="inputText"
label="请输入你的问题"
outlined
dense
auto-grow
:rows="3"
@keydown.enter="sendMessage"
></v-textarea>
<v-btn color="secondary" @click="clearMessages" style="position: absolute; bottom: -5px; left: 6px; margin: 10px; height: 25px; min-width: 50px;">清除聊天记录</v-btn>
<v-btn color="secondary" @click="sendMessage" style="position: absolute; bottom: 25px; right: 6px; margin: 10px; height: 25px; min-width: 50px;">发送</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
上面是悬浮窗和悬浮按钮
data: function () {
return {
chat_dialog: false,
inputText: "",
messages: [],
dialog: false,
}
},
//聊天消息保存到localstorage
created() {
if (typeof window !== 'undefined') {
if (localStorage.getItem('chat_messages')) {
this.messages = JSON.parse(localStorage.getItem('chat_messages'));
}
}
},
methods:{
//实现发送消息和清除历史记录
async sendMessage() {
if (this.inputText) {
const timestamp = new Date().toLocaleString();
this.messages.push({ role: 'user', text: this.inputText, timestamp });
// Scroll to the bottom
this.$nextTick(() => {
const chatWindow = document.querySelector('.message-list');
chatWindow.scrollTop = chatWindow.scrollHeight;
});
const payload = {
message: this.inputText,
}
this.inputText = "";
const response = await article.getchat(payload);
if (response && response.data && response.data.length > 0) {
const message = response.data[0].message;
this.messages.push({ role: message.role, text: message.content, timestamp: new Date().toLocaleString() });
}
localStorage.setItem("chat_messages", JSON.stringify(this.messages));
this.$nextTick(() => {
const chatWindow = document.querySelector('.message-list');
chatWindow.scrollTop = chatWindow.scrollHeight;
});
}
},
clearMessages() {
localStorage.removeItem('chat_messages');
this.messages = [];
},
}
<style scoped>
.chat-window {
max-width: 600px;
margin: 0 auto;
}
.message-list {
height: 400px;
overflow-y: auto;
}
.message-me {
background-color:#12b7f5;
border-radius: 10px;
max-width: 70%;
margin-left: auto;
margin-right: 10px;
}
.message-other {
background-color:#000000;
border-radius: 10px;
max-width: 70%;
margin-left: 10px;
margin-right: auto;
}
.message-timestamp {
font-size: 10px;
color: rgb(230, 223, 223);
margin-right: 10px;
float: right;
}
</style>