|
|
@@ -1,538 +1,559 @@
|
|
|
<template>
|
|
|
- <div class="chat" v-loading="loading">
|
|
|
- <div class="c_chat" ref="chatRef">
|
|
|
- <div class="c_c_item" v-for="item in chatList" :key="item.uid">
|
|
|
- <div class="c_c_i_user" v-if="item.content">
|
|
|
- <div class="c_c_i_u_message">
|
|
|
- <div class="c_c_i_u_m_top">
|
|
|
- <span class="chatTime">{{ item.createtime }}</span>
|
|
|
- <span>科科</span>
|
|
|
- </div>
|
|
|
- <div class="c_c_i_u_m_bottom">
|
|
|
- <span class="coptText" @click="copyText(item.aiContent)"></span>
|
|
|
- <div
|
|
|
- class="c_c_i_u_m_content chatContent"
|
|
|
- v-html="item.content"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="c_c_i_u_avatar">
|
|
|
- <el-avatar
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- :src="require('../../../../assets/icon/pblCourse/userAvatar.png')"
|
|
|
- fit="fit"
|
|
|
- ></el-avatar>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="c_c_i_ai">
|
|
|
- <div class="c_c_i_ai_avatar">
|
|
|
- <el-avatar
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- :src="
|
|
|
- require('../../../../assets/icon/pblCourse/aiTeacherAvatar.png')
|
|
|
- "
|
|
|
- fit="fit"
|
|
|
- ></el-avatar>
|
|
|
- </div>
|
|
|
- <div class="c_c_i_ai_message">
|
|
|
- <div class="c_c_i_ai_m_top">
|
|
|
- <span>小可老师</span>
|
|
|
- <span class="chatTime">{{item.createtime}}</span>
|
|
|
- </div>
|
|
|
- <div class="c_c_i_ai_m_bottom">
|
|
|
- <div
|
|
|
- v-loading="item.loading"
|
|
|
- class="c_c_i_ai_m_content chatContent"
|
|
|
- v-html="item.aiContent"
|
|
|
- ></div>
|
|
|
- <span class="coptText" @click="copyText(item.aiContent)"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="c_controls">
|
|
|
+ <div class="chat" v-loading="loading">
|
|
|
+ <div class="c_chat" ref="chatRef">
|
|
|
+ <div class="c_c_item" v-for="item in chatList" :key="item.uid">
|
|
|
+ <div class="c_c_i_user" v-if="item.content">
|
|
|
+ <div class="c_c_i_u_message">
|
|
|
+ <div class="c_c_i_u_m_top">
|
|
|
+ <span class="chatTime">{{ item.createtime }}</span>
|
|
|
+ <span>科科</span>
|
|
|
+ </div>
|
|
|
+ <div class="c_c_i_u_m_bottom">
|
|
|
+ <span class="coptText" @click="copyText(item.aiContent)"></span>
|
|
|
+ <div
|
|
|
+ class="c_c_i_u_m_content chatContent"
|
|
|
+ v-html="item.content"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c_c_i_u_avatar">
|
|
|
+ <el-avatar
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="require('../../../../assets/icon/pblCourse/userAvatar.png')"
|
|
|
+ fit="fit"
|
|
|
+ ></el-avatar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="c_c_i_ai">
|
|
|
+ <div class="c_c_i_ai_avatar">
|
|
|
+ <el-avatar
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="
|
|
|
+ require('../../../../assets/icon/pblCourse/aiTeacherAvatar.png')
|
|
|
+ "
|
|
|
+ fit="fit"
|
|
|
+ ></el-avatar>
|
|
|
+ </div>
|
|
|
+ <div class="c_c_i_ai_message">
|
|
|
+ <div class="c_c_i_ai_m_top">
|
|
|
+ <span>小可老师</span>
|
|
|
+ <span class="chatTime">{{ item.createtime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="c_c_i_ai_m_bottom">
|
|
|
+ <div
|
|
|
+ v-loading="item.loading"
|
|
|
+ class="c_c_i_ai_m_content chatContent"
|
|
|
+ v-html="item.aiContent"
|
|
|
+ ></div>
|
|
|
+ <span class="coptText" @click="copyText(item.aiContent)"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="c_controls">
|
|
|
<span class="c_controls_item" @click="clearChat">清空对话</span>
|
|
|
</div> -->
|
|
|
- <div class="c_bottom" v-loading="chatLoading">
|
|
|
- <!-- <div class="c_b_record">
|
|
|
+ <div class="c_bottom" v-loading="chatLoading">
|
|
|
+ <!-- <div class="c_b_record">
|
|
|
<span></span>
|
|
|
</div> -->
|
|
|
- <div class="c_b_inputArea">
|
|
|
- <el-input
|
|
|
- class="c_b_input"
|
|
|
- @keyup.enter.native="send()"
|
|
|
- v-model="textValue"
|
|
|
-
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <!-- <span></span> -->
|
|
|
- </div>
|
|
|
- <div class="c_b_send" @click="send">
|
|
|
- <span></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="c_b_inputArea">
|
|
|
+ <el-input
|
|
|
+ class="c_b_input"
|
|
|
+ @keyup.enter.native="send()"
|
|
|
+ v-model="textValue"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <!-- <span></span> -->
|
|
|
+ </div>
|
|
|
+ <div class="c_b_send" @click="send">
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { v4 as uuidv4 } from "uuid";
|
|
|
import MarkdownIt from "markdown-it";
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: false,
|
|
|
- chatLoading:false,
|
|
|
- userId:this.$route.query['userid'],
|
|
|
- chatList: [],
|
|
|
- textValue: "",
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 发送消息
|
|
|
- send() {
|
|
|
- if(this.chatLoading || this.loading)return this.$message.info("请稍等...")
|
|
|
- if(!this.textValue.trim())return this.$message.info("请输入内容");
|
|
|
- const _uuid = uuidv4();
|
|
|
- this.chatLoading = true;
|
|
|
- this.chatList.push({
|
|
|
- role: "user",
|
|
|
- content: `${this.textValue}`,
|
|
|
- uid: _uuid,
|
|
|
- AI: "AI",
|
|
|
- aiContent: "",
|
|
|
- oldContent: "",
|
|
|
- filename: "",
|
|
|
- index: this.chatList.length,
|
|
|
- createtime:new Date().toLocaleString().replaceAll("/",'-'),
|
|
|
- loading: true,
|
|
|
- })
|
|
|
-
|
|
|
- let params = {
|
|
|
- model: "gpt-3.5-turbo",
|
|
|
- temperature: 0,
|
|
|
- max_tokens: 4096,
|
|
|
- top_p: 1,
|
|
|
- frequency_penalty: 0,
|
|
|
- presence_penalty: 0,
|
|
|
- messages: [{role:"user",content:this.textValue}],
|
|
|
- uid: _uuid,
|
|
|
- mind_map_question: "",
|
|
|
- }
|
|
|
- this.scrollBottom();
|
|
|
- this.textValue = "";
|
|
|
- this.ajax
|
|
|
- .post("https://gpt4.cocorobo.cn/chat", params)
|
|
|
- .then((res) => {
|
|
|
- if (res.data.FunctionResponse.result == "发送成功") {
|
|
|
- } else {
|
|
|
- this.chatLoading = false;
|
|
|
- this.$message.warning(res.data.FunctionResponse.result);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- this.chatLoading = false;
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- // this.$message.info(`发送:${this.textValue}`);
|
|
|
- // this.textValue = "";
|
|
|
- this.getAiContent(_uuid)
|
|
|
- },
|
|
|
- getAiContent(_uid) {
|
|
|
- let _source = new EventSource(`https://gpt4.cocorobo.cn/stream/${_uid}`); //http://gpt4.cocorobo.cn:8011/stream/ https://gpt4.cocorobo.cn/stream/
|
|
|
- let _allText = "";
|
|
|
- let _mdText = "";
|
|
|
- const md = new MarkdownIt();
|
|
|
- _source.onmessage = (_e) => {
|
|
|
- if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
|
|
|
- //对话已经完成
|
|
|
- _mdText = _mdText.replace("_", "");
|
|
|
- _source.close();
|
|
|
- this.chatList.find((i) => i.uid == _uid).aiContent = _mdText;
|
|
|
- this.chatList.find((i) => i.uid == _uid).isalltext = true;
|
|
|
- this.chatList.find((i) => i.uid == _uid).isShowSynchronization = true;
|
|
|
- this.chatList.find((i) => i.uid == _uid).loading = false;
|
|
|
- this.chatLoading = false;
|
|
|
- this.insertChat(_uid);
|
|
|
- return;
|
|
|
- } else {
|
|
|
- //对话还在继续
|
|
|
- let _text = "";
|
|
|
- _text = _e.data.replaceAll("'", "");
|
|
|
- if (_allText == "") {
|
|
|
- _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
|
|
|
- } else {
|
|
|
- _allText += _text;
|
|
|
- }
|
|
|
- _mdText = _allText + "_";
|
|
|
- _mdText = _mdText.replace(/\\n/g, "\n");
|
|
|
- _mdText = _mdText.replace(/\\/g, "");
|
|
|
- if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
|
|
|
- //转化返回的回复流数据
|
|
|
- _mdText = md.render(_mdText);
|
|
|
- this.chatList.find((i) => i.uid == _uid).aiContent = _mdText;
|
|
|
- this.chatList.find((i) => i.uid == _uid).loading = false;
|
|
|
- this.scrollBottom();
|
|
|
- // 处理流数据
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- // 复制
|
|
|
- copyText(_html) {
|
|
|
- const div = document.createElement("div")
|
|
|
- div.innerHTML = _html
|
|
|
- const _text = div.innerText
|
|
|
- navigator.clipboard.writeText(_text).then(_=>{
|
|
|
- this.$message.success("复制成功")
|
|
|
- }, function(err) {
|
|
|
- this.$message.error(`无法复制：${err}`)
|
|
|
- });
|
|
|
- },
|
|
|
- // 保存对话
|
|
|
- //保存消息
|
|
|
- insertChat(_uid) {
|
|
|
- let _data = this.chatList.find((i) => i.uid == _uid);
|
|
|
- if (!_data) return;
|
|
|
- let params = {
|
|
|
- userId: this.userId,
|
|
|
- userName: "qgt",
|
|
|
- groupId: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
- answer: _data.aiContent,
|
|
|
- problem: _data.content,
|
|
|
- file_id: "",
|
|
|
- alltext: _data.aiContent,
|
|
|
- type: "chat",
|
|
|
- filename: _data.filename,
|
|
|
- session_name: `${this.userId}-pblCourse`,
|
|
|
- };
|
|
|
- this.ajax
|
|
|
- .post("https://gpt4.cocorobo.cn/insert_chat", params)
|
|
|
- .then((res) => {
|
|
|
- console.log("保存对话")
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取对话记录
|
|
|
- getChatList() {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- this.chatList = [];
|
|
|
- this.loading = true;
|
|
|
- this.chatLoading = true;
|
|
|
- let params = {
|
|
|
- userid: this.userId,
|
|
|
- groupid: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
- // session_name:``
|
|
|
- session_name: `${this.userId}-pblCourse`,
|
|
|
- };
|
|
|
- this.ajax
|
|
|
- .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
|
|
|
- .then((res) => {
|
|
|
- let _data = JSON.parse(res.data.FunctionResponse);
|
|
|
- if (_data.length > 0) {
|
|
|
- console.log(_data)
|
|
|
- let _chatList = [];
|
|
|
- for (let i = 0; i < _data.length; i++) {
|
|
|
- _chatList.push({
|
|
|
- loading: false,
|
|
|
- role: "user",
|
|
|
- content: _data[i].problem,
|
|
|
- uid: _data[i].id,
|
|
|
- AI: "AI",
|
|
|
- aiContent: _data[i].answer,
|
|
|
- oldContent: _data[i].answer,
|
|
|
- isShowSynchronization: false,
|
|
|
- filename: _data[i].filename,
|
|
|
- index: i,
|
|
|
- is_mind_map: false,
|
|
|
- fileid: _data[i].fileid,
|
|
|
- createtime:_data[i].createtime
|
|
|
- });
|
|
|
- }
|
|
|
- this.chatList = _chatList;
|
|
|
- this.chatLoading = false;
|
|
|
- this.loading = false;
|
|
|
- } else {
|
|
|
- //没有对话记录
|
|
|
- this.loading = false;
|
|
|
- this.chatLoading = false;
|
|
|
- }
|
|
|
- resolve();
|
|
|
- this.scrollBottom();
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err);
|
|
|
- this.$message.error("获取对话记录失败");
|
|
|
- this.chatLoading = false;
|
|
|
- this.scrollBottom();
|
|
|
- resolve();
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- //对话触底
|
|
|
- scrollBottom(){
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
- })
|
|
|
- },
|
|
|
- //清除对话
|
|
|
- clearChat(){
|
|
|
- this.chatList = [];
|
|
|
- this.scrollBottom();
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- this.getChatList().then(_=>{
|
|
|
- this.scrollBottom();
|
|
|
- })
|
|
|
- },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ chatLoading: false,
|
|
|
+ userId: this.$route.query["userid"],
|
|
|
+ chatList: [],
|
|
|
+ textValue: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 发送消息
|
|
|
+ send() {
|
|
|
+ if (this.chatLoading || this.loading)
|
|
|
+ return this.$message.info("请稍等...");
|
|
|
+ if (!this.textValue.trim()) return this.$message.info("请输入内容");
|
|
|
+ const _uuid = uuidv4();
|
|
|
+ this.chatLoading = true;
|
|
|
+ this.chatList.push({
|
|
|
+ role: "user",
|
|
|
+ content: `${this.textValue}`,
|
|
|
+ uid: _uuid,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: "",
|
|
|
+ oldContent: "",
|
|
|
+ filename: "",
|
|
|
+ index: this.chatList.length,
|
|
|
+ createtime: new Date().toLocaleString().replaceAll("/", "-"),
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+
|
|
|
+ // let params = {
|
|
|
+ // model: "gpt-3.5-turbo",
|
|
|
+ // temperature: 0,
|
|
|
+ // max_tokens: 4096,
|
|
|
+ // top_p: 1,
|
|
|
+ // frequency_penalty: 0,
|
|
|
+ // presence_penalty: 0,
|
|
|
+ // messages: [{role:"user",content:this.textValue}],
|
|
|
+ // uid: _uuid,
|
|
|
+ // mind_map_question: "",
|
|
|
+ // }
|
|
|
+ let params = JSON.stringify({
|
|
|
+ message: {
|
|
|
+ anthropic_version: "bedrock-2023-05-31",
|
|
|
+ max_tokens: 4096,
|
|
|
+ temperature: 0,
|
|
|
+ top_p: 1,
|
|
|
+ messages: [
|
|
|
+ {
|
|
|
+ role: "user",
|
|
|
+ content: this.textValue
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ uid: _uuid,
|
|
|
+ model: "Claude 3 Sonnet" // Claude 3 Sonnet或者Claude 3 Haiku
|
|
|
+ });
|
|
|
+ this.scrollBottom();
|
|
|
+ this.textValue = "";
|
|
|
+ this.ajax
|
|
|
+ // .post("https://gpt4.cocorobo.cn/chat", params)
|
|
|
+ .post("https://claude3.cocorobo.cn/chat", params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.FunctionResponse.result == "发送成功") {
|
|
|
+ } else {
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.$message.warning(res.data.FunctionResponse.result);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.chatLoading = false;
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ // this.$message.info(`发送:${this.textValue}`);
|
|
|
+ // this.textValue = "";
|
|
|
+ this.getAiContent(_uuid);
|
|
|
+ },
|
|
|
+ getAiContent(_uid) {
|
|
|
+ let _source = new EventSource(`https://claude3.cocorobo.cn/streamChat/${_uid}`);
|
|
|
+ // let _source = new EventSource(`https://gpt4.cocorobo.cn/stream/${_uid}`); //http://gpt4.cocorobo.cn:8011/stream/ https://gpt4.cocorobo.cn/stream/
|
|
|
+ let _allText = "";
|
|
|
+ let _mdText = "";
|
|
|
+ const md = new MarkdownIt();
|
|
|
+ _source.onmessage = _e => {
|
|
|
+ if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
|
|
|
+ //对话已经完成
|
|
|
+ _mdText = _mdText.replace("_", "");
|
|
|
+ _source.close();
|
|
|
+ this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.chatList.find(i => i.uid == _uid).isalltext = true;
|
|
|
+ this.chatList.find(i => i.uid == _uid).isShowSynchronization = true;
|
|
|
+ this.chatList.find(i => i.uid == _uid).loading = false;
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.insertChat(_uid);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ //对话还在继续
|
|
|
+ let _text = "";
|
|
|
+ _text = _e.data.replaceAll("'", "");
|
|
|
+ if (_allText == "") {
|
|
|
+ _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
|
|
|
+ } else {
|
|
|
+ _allText += _text;
|
|
|
+ }
|
|
|
+ _mdText = _allText + "_";
|
|
|
+ _mdText = _mdText.replace(/\\n/g, "\n");
|
|
|
+ _mdText = _mdText.replace(/\\/g, "");
|
|
|
+ if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
|
|
|
+ //转化返回的回复流数据
|
|
|
+ _mdText = md.render(_mdText);
|
|
|
+ this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.chatList.find(i => i.uid == _uid).loading = false;
|
|
|
+ this.scrollBottom();
|
|
|
+ // 处理流数据
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 复制
|
|
|
+ copyText(_html) {
|
|
|
+ const div = document.createElement("div");
|
|
|
+ div.innerHTML = _html;
|
|
|
+ const _text = div.innerText;
|
|
|
+ navigator.clipboard.writeText(_text).then(
|
|
|
+ _ => {
|
|
|
+ this.$message.success("复制成功");
|
|
|
+ },
|
|
|
+ function(err) {
|
|
|
+ this.$message.error(`无法复制：${err}`);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 保存对话
|
|
|
+ //保存消息
|
|
|
+ insertChat(_uid) {
|
|
|
+ let _data = this.chatList.find(i => i.uid == _uid);
|
|
|
+ if (!_data) return;
|
|
|
+ let params = {
|
|
|
+ userId: this.userId,
|
|
|
+ userName: "qgt",
|
|
|
+ groupId: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
+ answer: _data.aiContent,
|
|
|
+ problem: _data.content,
|
|
|
+ file_id: "",
|
|
|
+ alltext: _data.aiContent,
|
|
|
+ type: "chat",
|
|
|
+ filename: _data.filename,
|
|
|
+ session_name: `${this.userId}-pblCourse`
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/insert_chat", params)
|
|
|
+ .then(res => {
|
|
|
+ console.log("保存对话");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取对话记录
|
|
|
+ getChatList() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.chatList = [];
|
|
|
+ this.loading = true;
|
|
|
+ this.chatLoading = true;
|
|
|
+ let params = {
|
|
|
+ userid: this.userId,
|
|
|
+ groupid: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
+ // session_name:``
|
|
|
+ session_name: `${this.userId}-pblCourse`
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
|
|
|
+ .then(res => {
|
|
|
+ let _data = JSON.parse(res.data.FunctionResponse);
|
|
|
+ if (_data.length > 0) {
|
|
|
+ console.log(_data);
|
|
|
+ let _chatList = [];
|
|
|
+ for (let i = 0; i < _data.length; i++) {
|
|
|
+ _chatList.push({
|
|
|
+ loading: false,
|
|
|
+ role: "user",
|
|
|
+ content: _data[i].problem,
|
|
|
+ uid: _data[i].id,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: _data[i].answer,
|
|
|
+ oldContent: _data[i].answer,
|
|
|
+ isShowSynchronization: false,
|
|
|
+ filename: _data[i].filename,
|
|
|
+ index: i,
|
|
|
+ is_mind_map: false,
|
|
|
+ fileid: _data[i].fileid,
|
|
|
+ createtime: _data[i].createtime
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.chatList = _chatList;
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ //没有对话记录
|
|
|
+ this.loading = false;
|
|
|
+ this.chatLoading = false;
|
|
|
+ }
|
|
|
+ resolve();
|
|
|
+ this.scrollBottom();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("获取对话记录失败");
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.scrollBottom();
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //对话触底
|
|
|
+ scrollBottom() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //清除对话
|
|
|
+ clearChat() {
|
|
|
+ this.chatList = [];
|
|
|
+ this.scrollBottom();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.getChatList().then(_ => {
|
|
|
+ this.scrollBottom();
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.chat {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- border: solid 1px #f3f7fd;
|
|
|
- box-shadow: 0 4px 10px 0 #1d388321;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 1px #f3f7fd;
|
|
|
+ box-shadow: 0 4px 10px 0 #1d388321;
|
|
|
}
|
|
|
|
|
|
.c_chat {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 56px);
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15px;
|
|
|
- overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 56px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
.c_c_item {
|
|
|
- background-color: none;
|
|
|
+ background-color: none;
|
|
|
}
|
|
|
|
|
|
.c_c_i_user {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_u_message {
|
|
|
- height: auto;
|
|
|
- width: auto;
|
|
|
- max-width: calc(100% - 50px - 40px);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-end;
|
|
|
- margin-right: 5px;
|
|
|
+ height: auto;
|
|
|
+ width: auto;
|
|
|
+ max-width: calc(100% - 50px - 40px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
.c_c_i_u_m_top {
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.c_c_i_u_m_top > span {
|
|
|
- margin-left: 5px;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_u_m_bottom {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.coptText {
|
|
|
- min-width: 15px;
|
|
|
- min-height: 15px;
|
|
|
- display: block;
|
|
|
- background: url("../../../../assets/icon/pblCourse/copyIcon.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin: 0px 10px 6px 10px;
|
|
|
- cursor: pointer;
|
|
|
+ min-width: 15px;
|
|
|
+ min-height: 15px;
|
|
|
+ display: block;
|
|
|
+ background: url("../../../../assets/icon/pblCourse/copyIcon.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0px 10px 6px 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.c_c_i_u_m_content {
|
|
|
- width: auto;
|
|
|
- height: auto;
|
|
|
- padding: 10px;
|
|
|
- background-color: #e2eeff;
|
|
|
- border-radius: 8px 2px 8px 8px;
|
|
|
- border: solid 1px #000000e5;
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #e2eeff;
|
|
|
+ border-radius: 8px 2px 8px 8px;
|
|
|
+ border: solid 1px #000000e5;
|
|
|
}
|
|
|
|
|
|
.c_c_i_u_avatar {
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- margin: 0px 0 0 10px;
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ margin: 0px 0 0 10px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_ai {
|
|
|
- margin-top: 10px;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_ai_avatar {
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- margin: 0px 0 0 10px;
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ margin: 0px 0 0 10px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_ai_message {
|
|
|
- height: auto;
|
|
|
- width: auto;
|
|
|
- max-width: calc(100% - 50px - 40px);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- margin-left: 5px;
|
|
|
+ height: auto;
|
|
|
+ width: auto;
|
|
|
+ max-width: calc(100% - 50px - 40px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
.c_c_i_ai_m_top {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_ai_m_top > span {
|
|
|
- margin-left: 5px;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.c_c_i_ai_m_bottom {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.c_c_i_ai_m_content {
|
|
|
- min-width: 40px;
|
|
|
- min-height: 25px;
|
|
|
- width: auto;
|
|
|
- height: auto;
|
|
|
- padding: 10px;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 2px 8px 8px 8px;
|
|
|
- border: solid 1px #000000e5;
|
|
|
+ min-width: 40px;
|
|
|
+ min-height: 25px;
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 2px 8px 8px 8px;
|
|
|
+ border: solid 1px #000000e5;
|
|
|
}
|
|
|
|
|
|
.chatContent >>> ol {
|
|
|
- margin-left: 25px;
|
|
|
+ margin-left: 25px;
|
|
|
}
|
|
|
|
|
|
.chatContent >>> ul {
|
|
|
- margin-left: 25px;
|
|
|
+ margin-left: 25px;
|
|
|
}
|
|
|
|
|
|
-.chatTime{
|
|
|
- font-size: 14px;
|
|
|
- margin: 0 10px;
|
|
|
- color: #2c2f3b;
|
|
|
+.chatTime {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 10px;
|
|
|
+ color: #2c2f3b;
|
|
|
}
|
|
|
|
|
|
-.c_controls{
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
+.c_controls {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
|
|
|
-.c_controls>span{
|
|
|
- max-height: 30px;
|
|
|
- width: auto;
|
|
|
- padding: 5px 10px;
|
|
|
- font-size: 14px;
|
|
|
- border-radius: 15px;
|
|
|
- box-shadow: 0 0 2px 0px gray;
|
|
|
- margin-left: 10px;
|
|
|
- cursor: pointer;
|
|
|
+.c_controls > span {
|
|
|
+ max-height: 30px;
|
|
|
+ width: auto;
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 15px;
|
|
|
+ box-shadow: 0 0 2px 0px gray;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.c_controls>span:hover{
|
|
|
- background-color: #f3f7fd;
|
|
|
+.c_controls > span:hover {
|
|
|
+ background-color: #f3f7fd;
|
|
|
}
|
|
|
|
|
|
.c_bottom {
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-sizing: border-box;
|
|
|
- border-top: solid 0.5px #e7e7e7;
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-top: solid 0.5px #e7e7e7;
|
|
|
}
|
|
|
|
|
|
.c_b_record {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.c_b_record > span {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- background-image: url("../../../../assets/icon/pblCourse/recordIcon.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url("../../../../assets/icon/pblCourse/recordIcon.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.c_b_inputArea {
|
|
|
- width: calc(100% - 100px);
|
|
|
- background-color: #f3f3f3;
|
|
|
- border-radius: 50px;
|
|
|
- height: 80%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin: 0 15px;
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border-radius: 50px;
|
|
|
+ height: 80%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 15px;
|
|
|
}
|
|
|
|
|
|
.c_b_input {
|
|
|
- width: calc(100% - 40px);
|
|
|
- margin-right: 10px;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.c_b_input >>> .el-input__inner {
|
|
|
- border: none;
|
|
|
- background-color: #f3f3f3;
|
|
|
- outline: none;
|
|
|
- border-radius: 50px 0 0 50px;
|
|
|
- font-size: 1.2em;
|
|
|
+ border: none;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ outline: none;
|
|
|
+ border-radius: 50px 0 0 50px;
|
|
|
+ font-size: 1.2em;
|
|
|
}
|
|
|
|
|
|
.c_b_inputArea > span {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- background-image: url("../../../../assets/icon/pblCourse/fileIcon.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-right: 10px;
|
|
|
- cursor: pointer;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url("../../../../assets/icon/pblCourse/fileIcon.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.c_b_send {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #3681fc;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #3681fc;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.c_b_send > span {
|
|
|
- width: 60%;
|
|
|
- height: 60%;
|
|
|
- background-image: url("../../../../assets/icon/pblCourse/sendIcon.png");
|
|
|
- background-size: 100% 100%;
|
|
|
+ width: 60%;
|
|
|
+ height: 60%;
|
|
|
+ background-image: url("../../../../assets/icon/pblCourse/sendIcon.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
</style>
|
