pbl-student-table/src/components/classRoomHelper/component/dialogArea.vue

<template>
  <div class="dialog">
    <div v-show="cardType == 0">
      <div class="d_top" ref="chatRef">
        <div class="d_t_chat" v-for="(item, index) in chatList" :key="index">
          <div class="d_t_c_user" v-if="item.content">
            <div class="d_t_c_u_left">
              <div class="d_t_c_u_l_content">{{ item.content }}</div>
              <div class="d_t_c_u_l_time">{{ item.createtime }}</div>
            </div>
            <div class="d_t_c_u_right">
              <span>我</span>
            </div>
          </div>

          <div class="d_t_c_ai">
            <div class="d_t_c_a_left">
              <el-avatar v-if="item.filename" :src="item.filename"></el-avatar>
              <span v-else>Ai</span>
            </div>
            <div class="d_t_c_a_right">
              <div
                class="d_t_c_a_r_content"
                v-loading="item.loading"
                v-html="item.aiContent"
              ></div>
              <div class="d_t_c_a_r_time">{{ item.createtime }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="d_bottom">
        <div class="d_b_btnArea">
          <div class="d_b_ba-item" @click.stop="choiceRole()">
            <img
              style="width: 20px;"
              src="../../../assets/icon/course/role.png"
              alt=""
            />
            选择角色
          </div>
					<div class="d_b_ba-item" @click.stop="clear()">
            清空聊天记录
          </div>
        </div>
        <div class="d_b_inputArea">
          <!-- <div class="d_b_tape" @click="goTape()"></div> -->
          <div class="d_b_input">
            <el-input
              :disabled="loading || chatLoading"
              v-loading="loading || chatLoading"
              @keyup.enter.native="send()"
              class="d_b_i_left"
              v-model="text"
            ></el-input>
            <!-- <div class="d_b_i_right" @click="sendFile()">
							<span></span>
						</div> -->
          </div>
          <div class="d_b_btn" @click="send()">
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="" v-show="cardType == 1">
      <div class="choiceTop">
        <div class="choiceRoleHeader">
          <div>切换角色：</div>
          <span>您希望以下哪个角色回答您的问题，请选择：</span>
        </div>
        <div class="choiceSelect">
          <el-button
            class="option"
            :style="{
              background: sortOption == 0 ? '#36A9FC' : '',
              color: sortOption == 0 ? '#fff' : ''
            }"
            @click="optBtn(0)"
            plain
            >我的</el-button
          >
          <el-button
            class="option"
            :style="{
              background: sortOption == 1 ? '#36A9FC' : '',
              color: sortOption == 1 ? '#fff' : ''
            }"
            @click="optBtn(1)"
            plain
            >社区</el-button
          >
        </div>
        <div
          class="characterBlock"
          v-if="sortOption == 0"
          v-for="(item, index) in roleList"
          :key="item.id"
          @click.stop="choseRole(item)"
        >
          <div class="imgLeft">
            <div class="img">
              <img style="width: 100%;height: 100%;" :src="item.avatar" />
            </div>
          </div>
          <div class="txtRight">
            <div class="bir">{{ item.assistantName }}</div>
            <div
              :style="{
                color: '#fff',
                display:
                  choseRoleItem.assistant_id == item.assistant_id
                    ? 'block'
                    : 'none'
              }"
            >
              已选择
            </div>
            <!-- <span></span> -->
          </div>
        </div>
        <div
          class="characterBlock"
          v-if="sortOption == 1"
          v-for="(item, index) in roleList2"
          :key="item.id"
          @click.stop="choseRole(item)"
        >
          <div class="imgLeft">
            <div class="img">
              <img
                style="width: 100%;height: 100%;"
                :src="
                  item.headUrl
                    ? item.headUrl
                    : require('../../../assets/icon/course/ai.png')
                "
              />
            </div>
          </div>
          <div class="txtRight">
            <div class="bir">{{ item.assistantName }}</div>
            <div
              :style="{
                color: '#fff',
                display:
                  choseRoleItem.assistant_id == item.assistant_id
                    ? 'block'
                    : 'none'
              }"
            >
              已选择
            </div>
            <!-- <span></span> -->
          </div>
        </div>
        <!-- <div class="characterBlock" @click="addCharacter">
					<div class="imgLeft">
						<div class="img2">
							<img style="width: 100%;height: 100%;" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/basil_add-outline1715564539170.png">
						</div>
					</div>
					<div class="txtRight">
						<div style="color: #fff;margin-left: 5px;">添加新角色</div>
					</div>
				</div> -->

        <!-- <div class="filterSubjects">
					<div class="fs_title">筛选科目</div>
					<div class="fs_box">
						<div :class="['fs_b_item',subjectsType==index?'fs_b_itemActive':'']" v-for="(item,index) in subjectsList" :key="index" @click="subjectsType = index">{{ item }}</div>
					</div>
				</div>

				<div class="roleList">
					<div class="r_title">角色列表 ({{ roleList.length }})</div>
					<div class="r_box">
						<div :class="['r_b_item',roleType==index?'r_b_itemActive':'']" v-for="(item,index) in roleList" :key="item.id" @click.stop="roleType=index">
							<img :src="item.avatar">
							<span>{{ item.name }}</span>
						</div>
					</div>
				</div> -->
      </div>
      <div class="choiceBottom">
        <el-button class="cb_btn" size="mini" @click="noChangeRole()"
          >取消</el-button
        >
        <el-button
          class="cb_btn"
          size="mini"
          type="primary"
          @click="changeRole()"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
export default {
  data() {
    return {
      cardType: 0, //0-对话 1-选角色
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      org: this.$route.query.org,
      choseRoleItem: {},
      text: "",
      sortOption: 0, //切换角色 0我的 1 社区
      subjectsList: [
        "语文",
        "数学",
        "英语",
        "科学",
        "信息",
        "历史",
        "地理",
        "政治",
        "生物",
        "化学",
        "物理",
        "其他"
      ],
      subjectsType: -1,
      rightSubjects: -1,
      roleType: -1,
      rightRole: -1,
      loading: false,
      chatLoading: false,
      roleList2: [
        {
          id: 3,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "莱昂纳多·达芬奇",
          bir: "我是莱昂纳多·达芬奇"
        },
        {
          id: 4,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "列文虎克",
          bir: "我是列文虎克"
        },
        {
          id: 5,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "詹姆斯·瓦特",
          bir: "我是詹姆斯·瓦特"
        },
        {
          id: 6,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "瑞秋·卡森",
          bir: "我是瑞秋·卡森"
        },
        {
          id: 7,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "尼古拉·特斯拉",
          bir: "我是尼古拉·特斯拉"
        },
        {
          id: 8,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "约翰·穆尔",
          bir: "我是约翰·穆尔"
        }
      ],
      roleList: [
        {
          id: 0,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "爱因斯坦",
          bir: "我是爱因斯坦"
        },
        {
          id: 1,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "居里夫人",
          bir: "我是居里夫人"
        },
        {
          id: 2,
          avatar: require("../../../assets/icon/course/aiAvatar.png"),
          name: "达尔文",
          bir: "我是达尔文"
        }
        // {id:3,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"莱昂纳多·达芬奇"},
        // {id:4,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"列文虎克"},
        // {id:5,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
        // {id:6,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"瑞秋·卡森"},
        // {id:7,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"尼古拉·特斯拉"},
        // {id:8,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰·穆尔"},
        // {id:9,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"艾萨克·牛顿"},
        // {id:10,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"伽利略"},
        // {id:11,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"格雷戈尔·孟德尔"},
        // {id:12,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"张衡"},
        // {id:13,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"李时珍"},
        // {id:14,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"钱学森"},
        // {id:15,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿基米德"},
        // {id:16,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"霍金"},
        // {id:17,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"蔡伦"},
        // {id:18,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
        // {id:19,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"路易·巴斯德"},
        // {id:20,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿尔弗雷德·诺贝尔"},
        // {id:21,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·麦克斯韦"},
        // {id:22,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"亚历山大·格拉汉姆·贝尔"},
        // {id:23,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰内斯·开普勒"},
        // {id:24,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"安德烈·安培"},
      ],
      chatList: []
    };
  },
  methods: {
		clear(){
			this.chatList = [];
		},
    // addCharacter(){
    // 	this.$message.info("点击了添加新角色")
    // },
    optBtn(val) {
      this.sortOption = val;
    },
    choiceRole() {
      if (this.loading) return this.$message.info("请稍等");
      this.cardType = 1;
    },
    sendFile() {
      if (this.loading) return this.$message.info("请稍等");
      this.$message.info("点击了附件");
    },
    goTape() {
      if (this.loading) return this.$message.info("请稍等");
      this.$message.info(`点击了语音`);
    },
    send(_text = this.text) {
      if (this.loading || this.chatLoading) return this.$message.info("请稍等");
      if (_text.trim().length == 0) return this.$message.info("请输入内容");
      this.chatLoading = true;
      if (this.choseRoleItem.assistant_id) {
        let _uid = uuidv4();
        let _item = this.choseRoleItem;
        this.chatList.push({
          loading: true,
          role: "user",
          content: `${_text}`,
          uid: _uid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: _item.headUrl,
          index: this.chatList.length,
          is_mind_map: false,
          fileid: _item.assistantName
          // createtime: new Date().toLocaleString().replaceAll("/", "-")
        });
        this.text = "";
        let params = {
          assistant_id: this.choseRoleItem.assistant_id,
          userId: this.userid,
          message: _text,
          session_name: `${this.courseId}-studyStudent-dialog`,
          uid: _uid,
          file_ids: []
        };
        this.ajax
          .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
          .then(res => {
            if (res.data.FunctionResponse.result == "发送成功") {
            } else {
              this.chatLoading = false;
              this.$message.warning(res.data.FunctionResponse.result);
            }
          })
          .catch(err => {
            this.chatLoading = false;
            console.log(err);
          });
        this.getAtAuContent(_uid);
      } else {
        let _uuid = uuidv4();
        this.chatList.push({
          role: "user",
          content: `${_text}`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.chatList.length,
          is_mind_map: false,
          loading: true
        });
        this.scrollBottom();
        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: _text }],
          uid: _uuid,
          mind_map_question: ""
        };
        this.text = "";

        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.getAiContent(_uuid);
      }
    },
    // 获取ai对话
    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.scrollBottom();
          this.chatLoading = false;
          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.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();
          // 处理流数据
        }
      };
    },
    getAtAuContent(_uid) {
      let _source = new EventSource(
        `https://gpt4.cocorobo.cn/question/${_uid}`
      ); //http://gpt4.cocorobo.cn:8011/question/   https://gpt4.cocorobo.cn/question/
      let _allText = "";
      let _mdText = "";
      const md = new MarkdownIt();
      _source.onmessage = _e => {
        let _eData = JSON.parse(_e.data);
        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
          let _result = [];
          if ("result" in _eData) {
            _result = _eData.result;
            for (let i = 0; i < _result.length; i++) {
              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
            }
          }
          _mdText = _mdText.replace("_", "");
          this.chatLoading = false;
          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.insertChat(_uid);
        } else {
          let _text = _eData.content.replace("'", "").replace("'", "");
          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.$nextTick(() => {
            this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
          });
          // 处理流数据
        }
      };
    },
    //保存消息
    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: _data.fileid ? _data.fileid : "",
        alltext: _data.aiContent,
        type: "chat",
        filename: _data.filename,
        session_name: `${this.courseId}-studyStudent` //这是对话记录位置
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/insert_chat", params)
        .then(res => {});
    },
    // 获取对应的聊天记录
    getChatList() {
      return new Promise((resolve, reject) => {
        if (this.loading) return this.$message.info("请稍等...");
        this.chatList = [];
        this.loading = true;
        this.chatLoading = true;
        let params = {
          userid: this.userid,
          groupid: "602def61-005d-11ee-91d8-005056b8q12w",
          // session_name:``
          session_name: `${this.courseId}-studyStudent`
        };
        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) {
              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
                });
              }
              this.chatList = _chatList;
              this.loading = false;
              this.chatLoading = false;
            } else {
              //没有对话记录
              this.chatLoading = false;
              this.loading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            this.chatLoading = false;
            resolve();
          });
      });
    },
    getRoleList() {
      this.roleList = [];
      let params = {
        userId: this.userid
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/get_ai_agent_assistant_list", params)
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data.length == 0) return;
          if (_data) {
            this.roleList = JSON.parse(_data);
          }
        })
        .catch(e => {
          console.log("获取角色列表失败");
          this.roleList = [];
        });
    },
    getPublicRoleList() {
      this.roleList2 = [];
      let params = {
        userId: this.userid,
        // organizeid: this.org,
        organizeid: "45facc0a-1211-11ec-80ad-005056b86db5"
      };
      this.ajax
        .post(
          "https://gpt4.cocorobo.cn/get_ai_agent_assistant_share_list",
          params
        )
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data.length == 0) return;
          if (_data) {
            this.roleList2 = JSON.parse(_data);
          }
        })
        .catch(e => {
          this.roleList2 = [];
          console.log("获取公共角色失败", e);
        });
    },
    changeRole() {
      this.cardType = 0;
      // this.rightSubjects = this.subjectsType;
      // this.rightRole = this.roleType;
      if (this.choseRoleItem.assistant_id) {
        this.chatList = [];
        let _uuid = uuidv4();
        this.chatList.push({
          role: "user",
          content: `您好，${this.choseRoleItem.assistantName}`,
          uid: _uuid,
          AI: "AI",
          aiContent: this.choseRoleItem.prologue
            ? this.choseRoleItem.prologue
            : "您好，有什么需要我帮忙的吗？",
          oldContent: "",
          isShowSynchronization: false,
          filename: this.choseRoleItem.headUrl,
          index: this.chatList.length,
          is_mind_map: false,
          loading: false
        });
        this.scrollBottom();
      }

      // 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: `你好,${_text}` }],
      //   uid: _uuid,
      //   mind_map_question: ""
      // };
      // this.text = "";

      // this.ajax
      //   .post("https://gpt4.cocorobo.cn/chat", params)
      //   .then(res => {
      //     if (res.data.FunctionResponse.result == "发送成功") {
      //     } else {
      //       this.$message.warning(res.data.FunctionResponse.result);
      //     }
      //   })
      //   .catch(e => {
      //     console.log(e);
      //   });
      // this.getAiContent(_uuid);
      // this.chatList.push({
      //   role: "ai",
      //   content: "", //这里需要调用接口
      //   time: new Date().toLocaleString().replace(/\//gi, "-")
      // });
      // setTimeout(() => {
      //   let aiContent = "你好";
      //   switch (this.rightRole) {
      //     case 0:
      //       aiContent =
      //         "你好，我是爱因斯坦，相对论的提出者，相信科学的力量可以揭示宇宙的奥秘。";
      //       break;
      //     case 1:
      //       aiContent =
      //         "你好，我是居里夫人，放射性研究的先驱，第一位获得两次诺贝尔奖的女性。";
      //       break;
      //     case 2:
      //       aiContent =
      //         "你好，我是查尔斯·达尔文，进化论的创立者，相信物种通过自然选择不断进化。";
      //       break;
      //     case 3:
      //       aiContent =
      //         "你好，我是达芬奇，文艺复兴的象征，艺术与科学的多面手。";
      //       break;
      //     case 4:
      //       aiContent =
      //         "你好，我是列文虎克，通过我的简单显微镜，开启了微生物学的大门。";
      //       break;
      //     case 5:
      //       aiContent =
      //         "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。";
      //       break;
      //     case 6:
      //       aiContent =
      //         "你好，我是瑞秋·卡森，环保运动的先驱，通过《寂静的春天》提醒世界关注环境保护。";
      //       break;
      //     case 7:
      //       aiContent =
      //         "你好，我是特斯拉，交流电的推广者，致力于无线电和电力传输的研究。";
      //       break;
      //     case 8:
      //       aiContent =
      //         "你好，我是约翰·穆尔，自然保护的倡导者，努力保护美国的森林和野生地区。";
      //       break;
      //     case 9:
      //       aiContent =
      //         "你好，我是牛顿，万有引力和三大运动定律的发现者，为现代物理学奠定了基础。";
      //       break;
      //     case 10:
      //       aiContent =
      //         "你好，我是伽利略，通过望远镜观测支持了日心说，被誉为现代观测天文学之父。";
      //       break;
      //     case 11:
      //       aiContent =
      //         "你好，我是孟德尔，遗传学的奠基人，通过豌豆实验发现了遗传的基本规律。";
      //       break;
      //     case 12:
      //       aiContent =
      //         "你好，我是张衡，东汉杰出的天文学家和科学家，发明了地动仪。";
      //       break;
      //     case 13:
      //       aiContent =
      //         "你好，我是李时珍，中国古代著名的医学家，编纂了《本草纲目》。";
      //       break;
      //     case 14:
      //       aiContent =
      //         "你好，我是钱学森，现代火箭科学的奠基人之一，被誉为“中国航天之父”。";
      //       break;
      //     case 15:
      //       aiContent =
      //         "你好，我是阿基米德，古希腊的数学家和物理学家，提出了浮力原理。";
      //       break;
      //     case 16:
      //       aiContent =
      //         "你好，我是斯蒂芬·霍金，研究黑洞和宇宙起源，致力于解释宇宙的奥秘。";
      //       break;
      //     case 17:
      //       aiContent =
      //         "你好，我是蔡伦，东汉时期改进了造纸术，使纸张更加广泛地应用于社会。";
      //       break;
      //     case 18:
      //       aiContent =
      //         "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。";
      //       break;
      //     case 19:
      //       aiContent =
      //         "你好，我是路易·巴斯德，微生物学的奠基人，发现了疫苗和巴斯德消毒法。";
      //       break;
      //     case 20:
      //       aiContent =
      //         "你好，我是诺贝尔，发明了炸药，为和平与科学的贡献设立了诺贝尔奖。";
      //       break;
      //     case 21:
      //       aiContent =
      //         "你好，我是麦克斯韦，统一了电磁理论，提出了麦克斯韦方程组。";
      //       break;
      //     case 22:
      //       aiContent =
      //         "你好，我是贝尔，电话的发明者，致力于通信技术的发展和听力障碍人士的教育。";
      //       break;
      //     case 23:
      //       aiContent =
      //         "你好，我是开普勒，行星运动三大定律的发现者，为天文学和物理学的发展做出了重要贡献。";
      //       break;
      //     case 24:
      //       aiContent =
      //         "你好，我是安培，电磁学的先驱之一，提出了电流的磁效应。";
      //       break;
      //   }
      //   this.chatList[this.chatList.length - 1].content = aiContent;
      //   this.chatList[
      //     this.chatList.length - 1
      //   ].time = new Date().toLocaleString().replace(/\//gi, "-");
      //   this.loading = false;
      // }, 2000);
    },
    choseRole(item) {
      this.choseRoleItem = item;
    },
    noChangeRole() {
      this.cardType = 0;
      // this.subjectsType = this.rightSubjects;
      // this.roleType = this.rightRole;
    },
    scrollBottom() {
      this.$nextTick(() => {
        this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
      });
    }
  },
  mounted() {
    this.getRoleList();
    this.getPublicRoleList();
    this.getChatList().then(_ => {
      this.scrollBottom();
    });
  }
};
</script>

<style scoped>
.dialog {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.dialog > div {
  width: 100%;
  height: 100%;
}

.characterBlock {
  display: flex;
  background: rgba(54, 169, 252, 1);
  width: 100%;
  height: 80px;
  margin: 0 auto;
  border-radius: 10px;
  margin-bottom: 15px;
  cursor: pointer;
}
.characterBlock > .imgLeft {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.characterBlock > .imgLeft > .img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}
.characterBlock > .imgLeft > .img2 {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
}
.characterBlock > .txtRight {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.characterBlock > .txtRight > .bir {
  width: 180px;
  height: 35px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 5px 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.d_top {
  width: 100%;
  height: calc(100% - 90px);
  overflow: auto;
  box-sizing: border-box;
  padding: 20px 0;
}

.d_t_chat {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  flex-direction: column;
}

.d_t_chat > div {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.d_t_c_user {
  box-sizing: border-box;
  padding-left: 35px;
}

.d_t_c_u_left {
  width: 90%;
  height: auto;
}

.d_t_c_u_l_content {
  width: auto;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  background-color: #3681fc;
  border-radius: 8px 2px 8px 8px;
  white-space: pre-line;
}

.d_t_c_u_l_time {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: #9f9f9f;
  margin-top: 5px;
}

.d_t_c_u_right {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  margin-left: 5px;
}

.d_t_c_u_right > span {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #3681fc;
  border-radius: 50%;
}

.d_t_c_ai {
  box-sizing: border-box;
  padding-right: 35px;
  margin-top: 10px;
}

.d_t_c_a_right {
  min-width: 90%;
  height: auto;
}

.d_t_c_a_r_content {
  width: auto;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f6f8ff;
  border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
  word-break: break-all;
}

.d_t_c_a_r_time {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: 12px;
  color: #9f9f9f;
  margin-top: 5px;
}

.d_t_c_a_left {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  margin-right: 5px;
}

.d_t_c_a_left > span {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #3681fc;
  border-radius: 50%;
}

.d_bottom {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.d_b_btnArea {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
}

.d_b_ba-item {
  width: auto;
  box-sizing: border-box;
  padding: 0 10px;
  height: 25px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 阴影 */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
}

.d_b_inputArea {
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  border-top: solid 1px #ededed;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
}

.d_b_tape {
  width: 35px;
  height: 35px;
  background: url("../../../assets/icon/course/tape.png") no-repeat;
  background-size: 50% 60%;
  background-position: center;
  cursor: pointer;
}

.d_b_input {
  /* width: 75%; */
  flex: 1;
  height: 45px;
  background-color: #f3f3f3;
  border-radius: 50px;
  margin: 0 10px;
  display: flex;
  overflow: hidden;
  align-items: center;
}

.d_b_i_left {
  width: 100%;
  line-height: 45px;
  height: 100%;
}

.d_b_i_left >>> .el-input__inner {
  border: none;
  background-color: #f3f3f3;
  outline: none;
  border-radius: 50px 0 0 50px;
}

.d_b_i_right {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.d_b_i_right > span {
  width: 35px;
  height: 35px;
  background: url("../../../assets/icon/course/file.png") no-repeat;
  background-size: 50% 60%;
  background-position: center;
  cursor: pointer;
}

.d_b_btn {
  width: 40px;
  height: 40px;
  background-color: #3681fc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.d_b_btn > span {
  width: 30px;
  height: 30px;
  background: url("../../../assets/icon/course/send.png") no-repeat;
  background-size: 70% 70%;
  background-position: center;
}

.choiceTop {
  width: 100%;
  height: 95%;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 10px;
}

.choiceBottom {
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cb_btn {
  margin: 0 10px;
}

.choiceRoleHeader {
  width: 100%;
  /* margin: 10px; */
  margin-bottom: 20px;
}

.choiceRoleHeader > div {
  font-size: 16px;
  font-weight: bold;
}

.choiceRoleHeader > span {
  font-size: 14px;
}
.choiceSelect {
  width: 100%;
  display: flex;
  height: 35px;
  justify-content: flex-start;
  align-items: center;
  margin: 15px 0;
}
.choiceSelect > .option {
  width: 80px;
  height: 100%;
  border-radius: 5px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.filterSubjects {
  margin: 10px;
  width: 100%;
  height: auto;
}

.fs_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.fs_b_item {
  width: auto;
  height: 35px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 9px;
  background-color: #f3f7fd;
  border: solid 1px #f3f7fd;
  border-radius: 5px;
  margin-right: 8px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.fs_b_itemActive {
  border: solid 1px #4d8ffc;
  color: #4d8ffc;
  background-color: #f3f7fd;
}

.roleList {
  width: 100%;
  height: auto;
  margin: 10px;
}

.r_box {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.r_b_item {
  height: 40px;
  font-size: 14px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  background-color: #f0f2f5;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 4px;
  border: solid 1px #f0f2f5;
}

.r_b_itemActive {
  box-sizing: border-box;
  border: solid 1px #aeccfe;
  color: #4d8ffb;
}

.r_b_item > img {
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
  /* margin-left: 10px; */
}
</style>