pbl-teacher-table/src/components/pages/aiAddCourse/aiBox.vue

<template>
  <div class="ai_body">
    <div class="ai_body_dialog" v-loading="loading" ref="chatDialog">
      <div
        class="dialog_content"
        v-for="(item, index) in array"
        :key="item.uid"
      >
        <div v-if="item.content">
          <div class="content content2" v-html="item.content"></div>
          <div class="role">
            <img src="../../../assets/icon/new/role2.png" />
          </div>
        </div>
        <div style="margin-top:10px ;">
          <div class="role">
            <img src="../../../assets/icon/new/role1.png" />
          </div>
          <div
            class="content"
            v-loading="item.loading"
            v-html="item.aiContent"
          ></div>
        </div>
        <!-- <div class="role">
          <img src="../../../assets/icon/new/role1.png"/>
          <img src="../../../assets/icon/new/role2.png"/>
        </div>
        <div class="content content2" :class="{ content2: item.role == 2 }">
          {{ item.text }}
        </div>
				<div class="role">
          <img src="../../../assets/icon/new/role1.png"/>
        </div>
        <div class="content">
          {{ item.text }}
        </div> -->
      </div>
    </div>
    <div class="ai_body_select">
      <div class="checkBox" v-if="checkBool">
        <div class="task">
          <div class="title">选择需要优化的任务：</div>
          <div class="content">
            <div class="span" @click="addAllTask()">
              <div class="check">
                <img
                  :src="checkImg"
                  alt=""
                  v-if="checkArray.length !== course.length"
                />
                <img :src="checkIsImg" alt="" v-else />
              </div>
              <span>全选</span>
            </div>
            <div
              class="span"
              v-for="(item, index) in course"
              :key="index"
              @click="addTask(index)"
            >
              <div class="check">
                <img
                  :src="checkImg"
                  alt=""
                  v-if="checkArray.indexOf(index) === -1"
                />
                <img :src="checkIsImg" alt="" v-else />
              </div>
              <span>任务{{ index + 1 }}</span>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="title">选择优化的部分：</div>
          <div class="content">
            <div
              class="span"
              v-for="(item, index) in partArray"
              :key="index"
              :class="{ active: part == item.name }"
              @click="checkPart(item.name)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <span
        class="check"
        :class="{ isCheck: checkBool }"
        v-if="!checkArray.length && !part"
        @click="checkBool = !checkBool"
        >选择优化内容</span
      >
      <span
        class="check"
        :class="{ isCheck: checkBool }"
        @click="checkBool = !checkBool"
        v-else
      >
        <el-tooltip :content="taskName" placement="top" effect="dark">
          <!-- content to trigger tooltip here -->
          <span>{{ taskName }}</span>
        </el-tooltip>
      </span>
    </div>
    <div class="ai_body_input">
      <textarea
        rows="3"
        @keyup.enter="addContent"
        class="binfo_input binfo_textarea"
        cols
        v-model.trim="courseText"
        placeholder="在此输入您想了解的内容"
      ></textarea>
      <div
        class="c_pub_button_confirm"
        v-if="!loading && courseText"
        @click="addContent"
      >
        发送
      </div>
      <div class="c_pub_button_confirm" @click="promptTit" v-else>发送</div>
    </div>
  </div>
</template>

<script>
import checkImg from "../../../assets/icon/sourceFile/check.png";
import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
export default {
  props: {
    unitJson: {
      type: Array
    },
		courseId:{
			type:String,
			default:""
		},
  },
  data() {
    return {
      array: [],
      courseText: "",
      checkImg: checkImg,
      checkIsImg: checkIsImg,
			userid: this.$route.query.userid,
      checkArray: [],
      course: [{ title: "任务1" }, { title: "任务2" }, { title: "任务3" }],
      partArray: [
        { name: "全部内容" },
        { name: "任务设计" },
        { name: "评价设计" }
      ],
      part: "全部内容",
      checkBool: false,
      loading: false
    };
  },
  watch: {
    unitJson: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.course = this.unitJson[0].chapterInfo[0].taskJson;
      }
    }
  },
  methods: {
    promptTit() {
      if (!this.loading && !this.courseText) {
        this.$message({
          message: "请输入您想要了解的内容",
          type: "warning"
        });
      } else {
        this.$message({
          message: "请回答完毕后再次发送",
          type: "warning"
        });
      }
    },
    addContent() {
      let message = this.courseText
      if (this.courseText) {
        let msg = `
          ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".`
        if(this.checkArray.length){
          let task = []
          if(this.part == "全部内容"){
            // msg += `--------
            // ## 示例
            // [
            //   {
            //     detail: "面向学生的任务描述",
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1", "score": 5},
            //       {"value":"评价名字2","detail":"评价维度2", "score": 5},
            //       {"value":"评价名字3","detail":"评价维度3", "score": 5}
            //     ],
            //     toolChoose: [
            //       {
            //         tool:"电子白板", 
            //         detail: "工具描述"
            //       },
            //       {
            //         tool:"思维大图", 
            //         detail: "工具描述"
            //       }
            //     ]
            //   },
            //   {
            //     detail: "面向学生的任务描述",
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1", "score": 5},
            //       {"value":"评价名字2","detail":"评价维度2", "score": 5},
            //       {"value":"评价名字3","detail":"评价维度3", "score": 5}
            //     ],
            //     toolChoose: []
            //   },
            //   {
            //     detail: "面向学生的任务描述",
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1", "score": 5},
            //       {"value":"评价名字2","detail":"评价维度2", "score": 5},
            //       {"value":"评价名字3","detail":"评价维度3", "score": 5}
            //     ],
            //     toolChoose: [
            //       {
            //         tool:"文档", 
            //         detail: "工具描述"
            //       }
            //     ]
            //   }
            // ]
            
            // --------
            // ## 输出格式与要求
            // [
            //   {
            //     detail: "面向学生的任务描述",
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1","score":5},
            //       {"value":"评价名字2","detail":"评价维度2","score":5},
            //       {"value":"评价名字3","detail":"评价维度3","score":5}
            //     ],//至少3条评价标准，这个评价是教师用来评价学生表现的，需要包含评价维度，以及该维度中教师期待学生的表现，句式为学生应该能....
            //     toolChoose: [
            //       {
            //         tool: "工具", //电子白板,文档,思维导图,表格,作业提交中选择其中一个工具
            //         detail: "工具描述"
            //       }
            //     ] //可0~2个工具
            //   }
            // ]
            // `
            for(var i = 0; i < this.checkArray.length; i++){
              let _index = this.checkArray[i]
              task.push(this.course[_index])
            }
          }else if(this.part == "任务设计"){
            // msg += `
            // --------
            // ## 示例
            // [
            //   {
            //     detail: "面向学生的任务描述",
            //     toolChoose: [
            //       {
            //         tool:"电子白板", 
            //         detail: "工具描述"
            //       },
            //       {
            //         tool:"思维大图", 
            //         detail: "工具描述"
            //       }
            //     ]
            //   },
            //   {
            //     detail: "面向学生的任务描述",
            //     toolChoose: []
            //   },
            //   {
            //     detail: "面向学生的任务描述",
            //     toolChoose: [
            //       {
            //         tool:"文档", 
            //         detail: "工具描述"
            //       }
            //     ]
            //   }
            // ]
            
            // --------
            // ## 输出格式与要求
            // [
            //   {
            //     detail: "面向学生的任务描述",
            //     toolChoose: [
            //       {
            //         tool: "工具", //电子白板,文档,思维导图,表格,作业提交中选择其中一个工具
            //         detail: "工具描述"
            //       }
            //     ] //可0~2个工具
            //   }
            // ]
            // `
            for(var i = 0; i < this.checkArray.length; i++){
              let _index = this.checkArray[i]
              task.push(this.course[_index])
            }
          }else if(this.part == "评价设计"){
            // msg += `
            // --------
            // ## 示例
            // [
            //   {
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1", "score": 5},
            //       {"value":"评价名字2","detail":"评价维度2", "score": 5},
            //       {"value":"评价名字3","detail":"评价维度3", "score": 5}
            //     ],
            //   },
            //   {
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1", "score": 5},
            //       {"value":"评价名字2","detail":"评价维度2", "score": 5},
            //       {"value":"评价名字3","detail":"评价维度3", "score": 5}
            //     ],
            //   },
            //   {
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1", "score": 5},
            //       {"value":"评价名字2","detail":"评价维度2", "score": 5},
            //       {"value":"评价名字3","detail":"评价维度3", "score": 5}
            //     ],
            //   }
            // ]
            
            // --------
            // ## 输出格式与要求
            // [
            //   {
            //     elist:[
            //       {"value":"评价名字1","detail":"评价维度1","score":5},
            //       {"value":"评价名字2","detail":"评价维度2","score":5},
            //       {"value":"评价名字3","detail":"评价维度3","score":5}
            //     ],//至少3条评价标准，这个评价是教师用来评价学生表现的，需要包含评价维度，以及该维度中教师期待学生的表现，句式为学生应该能....
            //   }
            // ]
            // `
            for(var i = 0; i < this.checkArray.length; i++){
              let _index = this.checkArray[i]
              task.push(this.course[_index].eList)
            }
          }
          
          msg += `
          --------
          ## 修改内容
          ${JSON.stringify(task)}
          `

          msg += `
          --------
          ## 要求
          ${this.courseText}
          `
          message = msg
        }
        let _uuid = uuidv4();
        this.array.push({
          role: "user",
          content: `${this.courseText}`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.array.length,
          is_mind_map: false,
          loading: true
        });
        this.$nextTick(() => {
          this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        });
        let params = JSON.stringify({
          model: "gpt-3.5-turbo",
          temperature: 0,
          max_tokens: 4096,
          top_p: 1,
          frequency_penalty: 0,
          presence_penalty: 0,
          messages: [{ role: "user", content: message }],
          uid: _uuid,
          mind_map_question: ""
        });
        this.courseText = "";

        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);
      }
    },
    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.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).isalltext = true;
          this.array.find(i => i.uid == _uid).isShowSynchronization = true;
          this.array.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.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).loading = false;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          // 处理流数据
        }
      };
    },
    //保存消息
    insertChat(_uid) {
      let _data = this.array.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}-addCourse` //这是对话记录位置
      };
      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.array = [];
        this.loading = true;
        let params = {
          userid: this.userid,
          groupid: "602def61-005d-11ee-91d8-005056b8q12w",
          // session_name:``
          session_name: `${this.courseId}-addCourse`
        };
        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.array = _chatList;
              this.loading = false;
            } else {
              //没有对话记录
              this.loading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            resolve();
          });
      });
    },
    addTask(index) {
      if (this.checkArray.indexOf(index) !== -1) {
        this.checkArray.splice(this.checkArray.indexOf(index), 1);
      } else {
        this.checkArray.push(index);
      }
      console.log(index);
    },
    addAllTask() {
      if (this.checkArray.length === this.course.length) {
        this.checkArray = [];
      } else {
        this.checkArray = [];
        this.course.forEach((item, index) => {
          this.checkArray.push(index);
        });
      }
    },
    checkPart(name) {
      this.part = name;
    }
  },
  computed: {
    courseTextLength() {
      return this.courseText.length;
    },
    taskName() {
      let task = "";
      if (this.checkArray.length) {
        task = "任务";
        this.checkArray = this.checkArray.sort((a, b) => a - b);
        let a = JSON.parse(JSON.stringify(this.checkArray));
        for (let index = 0; index < a.length; index++) {
          a[index]++;
        }
        task += a.join("/");
      }
      return task + " " + this.part;
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.$nextTick(() => {
				console.log(this.$refs.chatDialog.scrollHeight)
        this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
      });
    });
  }
};
</script>

<style scoped>
.ai_body {
  height: 100%;
  width: calc(100% - 20px);
  margin: 0 auto;
}

.binfo_input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 48px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #cad1dc;
}

.binfo_textarea {
  border: 1.5px solid #cad1dc;
  font-size: 14px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: "Microsoft YaHei";
}

.binfo_textarea::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.binfo_input:focus-visible {
  border: 1.5px solid #3681fc !important;
}

.ai_body_input {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}

.c_pub_button_confirm {
  /* position: absolute;
    bottom: 13px;
    right: 13px; */
  margin-top: 10px;
  width: 80px;
  display: flex;
  justify-content: center;
}

.ai_body_dialog {
  padding: 10px 0;
  box-sizing: border-box;
  height: calc(100% - 180px);
  overflow: auto;
  margin-bottom: 10px;
}

.dialog_content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dialog_content > div {
  display: flex;
  align-items: flex-start;
}

.dialog_content + .dialog_content {
  margin: 15px 0;
}

.dialog_content > div .right {
  flex-direction: row-reverse;
}

.dialog_content > div .right .role {
  margin-right: 0;
  margin-left: 10px;
}

.dialog_content > div .role {
  min-width: 30px;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
}

.dialog_content > div .role > img {
  height: 100%;
  width: 100%;
}

.dialog_content > div .content {
  padding: 10px 5px;
  border-radius: 5px;
  width: 100%;
  word-break: break-word;
  box-sizing: border-box;
  /* white-space: pre-line; */
  max-width: 100%;
  background: #f7f7f7;
  overflow: hidden;
  margin: 0 10px;
}

.dialog_content > div .content2 {
  background: #3681fc;
  color: #fff;
}

.ai_body_select {
  position: relative;
}

.ai_body_select > .check {
  background: #e7e7e7;
  display: flex;
  width: fit-content;
  padding: 0 10px;
  height: 30px;
  border-radius: 21px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  color: #0061ff;
  font-weight: 700;
  margin: 10px 0;
  cursor: pointer;
}

.ai_body_select > .check::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../assets/icon/course/aiPart.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .check::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../assets/icon/course/aiPart_arrow.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .isCheck {
  background: #0061ff;
  display: flex;
  width: fit-content;
  padding: 0 10px;
  height: 30px;
  border-radius: 21px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  margin: 10px 0;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
}

.ai_body_select > .isCheck > span {
  width: calc(100% - 40px);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai_body_select > .isCheck::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../assets/icon/course/aiPart_active.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .isCheck::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../assets/icon/course/aiPart_arrow_active.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .checkBox {
  position: absolute;
  bottom: 40px;
  border: 1px solid #e0eafb;
  width: 100%;
  height: 300px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.ai_body_select > .checkBox > .task > .title,
.ai_body_select > .checkBox > .part > .title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

.ai_body_select > .checkBox > .task {
  height: calc(100% - 60px);
}

.ai_body_select > .checkBox > .part {
}

.ai_body_select > .checkBox > .task > .content {
  height: calc(100% - 40px);
  overflow: auto;
}

.ai_body_select > .checkBox > .task > .content > .span + .span {
  margin-top: 5px;
}

.ai_body_select > .checkBox > .task > .content > .span {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.ai_body_select > .checkBox > .task > .content > .span > .check {
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.ai_body_select > .checkBox > .task > .content > .span > .check > img {
  width: 100%;
  height: 100%;
}

.ai_body_select > .checkBox > .part > .content {
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: space-between;
}

.ai_body_select > .checkBox > .part > .content > .span {
  padding: 3px 6px;
  border: 1px solid #e0eafb;
  border-radius: 40px;
  cursor: pointer;
}

.ai_body_select > .checkBox > .part > .content > .span.active {
  color: #0061ff;
  border-color: #0061ff;
}
</style>