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

<template>
  <div class="ai_body" v-loading="loading">
    <div class="ai_body_dialog" ref="chatDialog">
      <div class="dialog_content" v-for="item in array" :key="item.uid">
        <div v-if="item.content" style="margin-left: auto;">
          <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:20px;margin-bottom:20px ; margin-right: auto;">
          <div class="role">
            <img :src="item.fileid
                ? item.fileid
                : require('../../../assets/icon/new/role1.png')
              " />
          </div>
          <div element-loading-background="#f6f9ff" :style="{
            minHeight: item.loading ? '50px' : 'unset',
            minWidth: item.loading ? '50px' : 'unset'
          }" class="content" v-loading="item.loading">
            <span class="vditor-reset" v-html="item.aiContent"></span><span class="createTime"
              v-text="item.createtime"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="ai_body_select" v-if="false">
      <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">
      <div class="ai_b_i_btnArea">
        <span class="clear" @click.stop="clear()">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M2.5 3.125C2.5 2.77982 2.77982 2.5 3.125 2.5H16.875C17.2202 2.5 17.5 2.77982 17.5 3.125V8.02715C17.5 8.37233 17.2202 8.65215 16.875 8.65215C16.5298 8.65215 16.25 8.37233 16.25 8.02715V3.75H3.75V16.25H8.125C8.47018 16.25 8.75 16.5298 8.75 16.875C8.75 17.2202 8.47018 17.5 8.125 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V3.125Z" />
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M5.625 6.1521C5.625 5.80692 5.90482 5.5271 6.25 5.5271H13.125C13.4702 5.5271 13.75 5.80692 13.75 6.1521C13.75 6.49728 13.4702 6.7771 13.125 6.7771H6.25C5.90482 6.7771 5.625 6.49728 5.625 6.1521Z" />
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M5.625 9.2771C5.625 8.93192 5.90482 8.6521 6.25 8.6521H9.37496C9.72014 8.6521 9.99996 8.93192 9.99996 9.2771C9.99996 9.62228 9.72014 9.9021 9.37496 9.9021H6.25C5.90482 9.9021 5.625 9.62228 5.625 9.2771Z" />
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M12.465 11.507L15.9141 14.9048C16.1279 14.5365 16.25 14.1088 16.25 13.6521C16.25 12.2714 15.1307 11.1521 13.75 11.1521C13.2799 11.1521 12.8406 11.2815 12.465 11.507ZM15.0374 15.7957L11.5873 12.397C11.3726 12.7659 11.25 13.1944 11.25 13.6521C11.25 15.0328 12.3693 16.1521 13.75 16.1521C14.2211 16.1521 14.6613 16.0222 15.0374 15.7957ZM11.0797 11.0192C11.759 10.3303 12.7051 9.9021 13.75 9.9021C15.8211 9.9021 17.5 11.581 17.5 13.6521C17.5 14.6767 17.0882 15.6064 16.4226 16.2827C15.7431 16.9729 14.7961 17.4021 13.75 17.4021C11.6789 17.4021 10 15.7232 10 13.6521C10 12.6263 10.4127 11.6957 11.0797 11.0192Z" />
          </svg>
          <span>清屏</span>
        </span>
        <span class="clear" @click.stop="showjList = !showjList" v-if="jArray.length">
          <span>查看</span>
        </span>
        <div style="margin-left: auto;">
          <el-switch v-model="continuous"></el-switch>
          <span @click.stop="continuous = !continuous">连续对话</span>
        </div>
      </div>

      <div class="ai_b_i_roleListBox" ref="roleListRef" v-if="showRoleList && choseRoleList.length > 0">
        <div :class="[
          'ai_b_i_rlb_item',
          index == choseRoleItem ? 'ai_b_i_rlb_itemActive' : ''
        ]" :ref="`roleItem${index}Ref`" v-for="(item, index) in choseRoleList" :key="item.id"
          @mouseover="choseRoleItem = index" @click.stop="choseRole(item)">
          <div class="ai_b_i_rlb_itemTop">
            <img :src="item.headUrl
                ? item.headUrl
                : require('../../../assets/icon/new/role1.png')
              " alt="" />
            <div class="ai_b_i_rlb_i_name">
              <span>{{ item.assistantName }}</span>
              <span>作者：{{ item.username }}</span>
            </div>
          </div>
          <div class="ai_b_i_rlb_itemBottom">
            {{ item.prologue }}
          </div>
        </div>
      </div>
      <div class="ai_b_i_jListPanel" @click="showjList = !showjList" v-if="showjList && jArray.length > 0"></div>
      <div class="ai_b_i_jListBox" v-if="showjList && jArray.length > 0">
        <div class="jlist_box" v-for="(item, index) in jArray" :key="index">
          <el-tooltip :content="item.area + '：' + item.value" placement="top" effect="dark" popper-class="text_tooltip2">
            <!-- content to trigger tooltip here -->
            <span>{{ item.area }}：{{ item.value }}</span>
          </el-tooltip>
          <div class="cancel" @click="cancelJ(item.string)">×</div>
        </div>
      </div>
      <!-- <div class="ai_b_i_textListBox">
				<div class="ai_b_i_tlb_left"></div>
				<div class="ai_b_i_tlb_right"></div>
			</div> -->
      <!-- @input="inputChange" -->

      <textarea class="ai_body_input_textarea" @keydown="textareaKeydown" ref="textareaRef" v-model.trim="courseText"
        placeholder="在此输入您想了解的内容"></textarea>
      <div :class="[
        'c_pub_button_confirm',
        courseText ? '' : 'c_pub_button_confirmDisabled'
      ]" v-if="!loading" @click="addContent">
        发送
      </div>
    </div>
    <!-- <div class="ai_body_input">
      <textarea
        style="padding-right: 85px;"
        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: ""
    },
    quoteArray: {
      type: Object,
      default: function () {
        return {};
      }
    },
    teacherCourseText: {
      type: String,
      default: ""
    },
    targetCourseText: {
      type: String,
      default: ""
    },
    courseText2: {
      type: String,
      default: ""
    },
    targetCourseText2: {
      type: String,
      default: ""
    },
    cpote: {
      type: Object,
      default: function () {
        return {};
      }
    },
  },
  data() {
    return {
      array: [],
      jArray: [],
      courseText: "",
      checkImg: checkImg,
      checkIsImg: checkIsImg,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      checkArray: [],
      course: [{ title: "任务1" }, { title: "任务2" }, { title: "任务3" }],
      partArray: [
        { name: "全部内容" },
        { name: "任务设计" },
        { name: "评价设计" }
      ],
      part: "全部内容",
      checkBool: false,
      loading: false,
      textareaHeight: 50,
      publicRoleList: [],
      roleList: [],
      textList: [
        {
          title: "项目式学习",
          dataList: [
            "请给我一些学生开展项目式学习可以使用的主题或问题参考，请说出学生将要解决的问题，以及学生要经历怎样的学习活动。",
            "请将一个关于生态保护项目的项目式学习展开描述，你需要描述学生如何解决这个问题，你需要至少写出四个活动，这些活动需要按照前后逻辑关系排列。",
            "请对驱动问题为“如何为学校建造一个富有特色的花坛？”的项目式学习进行子问题拆解，至少拆解为5个子问题，并根据子问题对应写出各环节的主要活动。"
          ]
        },
        {
          title: "教学评价",
          dataList: [
            "如果需要给学生的社区服务进行评价，给出评价维度和至少3个等级的表现描述。",
            "为6年级学生设计一份关于梧桐山研究报告的评估任务表，并给出参考的报告流程，至少包含8个步骤，并包括地图、图片和至少300个词。",
            "创建一个给5年级学生使用的课堂小测试，包含5道多选题，评价学生对于太阳能这个概念的理解。你需要给出题目和正确答案。"
          ]
        },
        {
          title: "教学设计",
          dataList: [
            "如果需要5年级学生感受“移步换景”的景观写作手法，你有什么合适的阅读材料推荐？你需要给出材料名称，以及材料的哪部分内容。",
            "设计一个针对8年级学生且关于人类迁徙主题的地理课，并在课程中设计至少1项小组活动。",
            "设计一个针对5年级学生的课程，课程综合科学和信息技术领域，解决生物与环境领域的生活问题，你需要给出完整的课程框架和活动。",
            "如果3年级的学生不能理解光合作用的实现过程，需要你帮我设计一个支持他们理解的教学活动，需要包含活动的形式、实施材料和清单。",
            "请基于贝叶斯定理为8年级学生出三道题目。",
            "如果需要八年级学生了解尼罗河流域的文化发展史，你有哪些推荐的网站或参考书籍？"
          ]
        },
        {
          title: "班级管理",
          dataList: [
            "创建一组给一年级学生使用的班级口号，要求大家注意卫生、保护环境，口号需要对仗工整，符合一年级学生的理解水平。",
            " 设计一套用于6年级学生的班级管理规章制度，内容需要包括学习、纪律、卫生、思想品德方面。"
          ]
        },
        {
          title: "课堂组织",
          dataList: [
            "请为“制作垃圾分类宣传单”的小组活动设计小组分工表，每个小组的成员为4-6人。",
            "请给5年级“校园植物图鉴”社团课程设计一份小组合作公约，需包含小组成员信息、小组项目目标、填写日期，总长度不超过300字，并且提供至少3处学生自行填写的部分。",
            "请用苏格拉底提问的方式，引导5年级学生拆解驱动问题：如何解决教室黑板反光的问题？其中需包含对于反光原因的分析与实验探究。"
          ]
        },
        {
          title: "教师发展",
          dataList: [
            "教师需要理解项目式学习的理论基础和基础概念，你需要生成一份阅读清单，要求内容为中文书籍或文献。",
            "设计一个教师进行个人学期总结的框架，需要体现在教学、教研、个人学习方面的进步。"
          ]
        },
        {
          title: "代码分析",
          dataList: [
            "这段代码实现了什么效果？",
            "请描述这段代码。",
            "根据这段代码，给我一些修改意见。"
          ]
        }
      ],
      showTextList: false,
      showRoleList: false,
      choseRoleItem: 0,
      choseTextItem: 0,
      continuous: true,
      showjList: false
    };
  },
  watch: {
    unitJson: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.course = this.unitJson[0].chapterInfo[0].taskJson;
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
    courseId: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.getChatList().then(_ => {
            this.$nextTick(() => {
              console.log(this.$refs.chatDialog.scrollHeight);
              this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
            });
          });
        }
      }
    },
    quoteArray: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
    teacherCourseText: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
    targetCourseText: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
    courseText2: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
    targetCourseText2: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
    cpote: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.jArray = this.getString();
        if (!this.jArray.length) {
          this.showjList = false
        }
      }
    },
  },
  methods: {
    cancelJ(string) {
      this.$emit('setIsQuote', string)
    },
    getString() {
      let quoteArray = []
      let array = Object.keys(this.quoteArray)
      array.forEach(item => {
        if (!this.quoteArray[item]) {
          return
        }
        let string = item
        let area = ''
        let text = ''
        if (string == 'aiteacherTextDetail') {
          area = '已有教案摘要'
          text = this.teacherCourseText
        } else if (string == 'aitargetTextDetail') {
          area = '课程目标'
          text = this.targetCourseText
        } else if (string == 'aiDetail') {
          area = '课程简要描述'
          text = this.courseText2
        } else if (string == 'aitargetTextDetail2') {
          area = '课程目标'
          text = this.targetCourseText2
        } else if (string.indexOf('aiDetail1') != -1) {
          let index = parseInt(string.split('aiDetail1-')[1])
          area = `任务${index + 1}课程大纲`
          text = this.unitJson[0].chapterInfo[0].taskJson[index].taskDetail2
        } else if (string == 'aiCpote1') {
          area = '概念群'
          text = this.cpote.cpote1
        } else if (string == 'aiCpote2') {
          area = '问题链'
          text = this.cpote.cpote2
        } else if (string == 'aiCpote3') {
          area = '目标层'
          text = this.cpote.cpote3
        } else if (string == 'aiCpote4') {
          area = '任务簇'
          text = this.cpote.cpote4
        } else if (string.indexOf('teacherDetail2') != -1) {
          let index = parseInt(string.split('teacherDetail2-')[1])
          area = `任务${index + 1}教案`
          text = this.unitJson[0].chapterInfo[0].taskJson[index].taskDetail3
        } else if (string.indexOf('aiDetail2') != -1) {
          let index = parseInt(string.split('aiDetail2-')[1])
          area = `任务${index + 1}任务描述`
          text = this.unitJson[0].chapterInfo[0].taskJson[index].taskDetail
        } else if (string.indexOf('aiDetail3') != -1) {
          let index = parseInt(string.split('-')[1])
          let index2 = parseInt(string.split('-')[2])
          area = `任务${index + 1}工具${index2 + 1}的工具描述`
          text = this.unitJson[0].chapterInfo[0].taskJson[index].toolChoose[index2].toolDetail
        }

        quoteArray.push({
          string,
          area,
          value: text
        })
      })

      return quoteArray

    },
    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 = ``;
        if (this.checkArray.length) {
          msg = `
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".`
          let task = [];
          if (this.part == "全部内容") {
            for (var i = 0; i < this.checkArray.length; i++) {
              let _index = this.checkArray[i];
              task.push(this.course[_index]);
            }
          } else if (this.part == "任务设计") {
            for (var i = 0; i < this.checkArray.length; i++) {
              let _index = this.checkArray[i];
              task.push(this.course[_index]);
            }
          } else if (this.part == "评价设计") {
            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;
        }

        if (this.jArray.length) {
          let task = [];
          for (var i = 0; i < this.jArray.length; i++) {
            let _index = this.jArray[i];
            task.push(`${_index.area}: ${_index.value.replaceAll('\n', '')}`);
          }

          msg += `
          ## 参考资料
          ${task.join('\n')}
          `;

          msg += `
          ## 要求
          根据<参考资料>中的内容实现以下要求：${this.courseText}
          `;
          message = msg;
        }

        // 这里处理@的角色
        let _atRoleList = [];
        let _roleList = [...this.roleList, ...this.publicRoleList];
        _roleList.forEach(i => {
          if (message.indexOf(`@${i.assistantName}`) != -1) {
            _atRoleList.push(i);
          }
        });

        if (_atRoleList.length > 0) {
          //有@角色
          let _replaceText = message;
          let _htmlText = message;
          _atRoleList.forEach(_i => {
            _replaceText = _replaceText.replaceAll(`@${_i.assistantName}`, ``);
            _htmlText = _htmlText.replaceAll(
              `@${_i.assistantName}`,
              `<span class='aite-name'>@${_i.assistantName}</span>`
            );
          });

          _atRoleList.forEach((_item, _index) => {
            const _uid = uuidv4();
            if (_index == 0) {
              this.array.push({
                loading: true,
                role: "user",
                content: _htmlText,
                uid: _uid,
                AI: "AI",
                aiContent: "",
                oldContent: "",
                isShowSynchronization: false,
                filename: _item.assistantName,
                index: this.array.length,
                is_mind_map: false,
                fileid: _item.headUrl,
                createtime: new Date().toLocaleString().replaceAll("/", "-")
              });
            } else {
              this.array.push({
                loading: true,
                role: "user",
                content: "",
                uid: _uid,
                AI: "AI",
                aiContent: "",
                oldContent: "",
                isShowSynchronization: false,
                filename: _item.assistantName,
                index: this.array.length,
                is_mind_map: false,
                fileid: _item.headUrl,
                createtime: new Date().toLocaleString().replaceAll("/", "-")
              });
            }
            this.$nextTick(() => {
              this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
            });

            let params = {
              assistant_id: _item.assistant_id,
              userId: this.userid,
              message: _replaceText,
              session_name: `${this.courseId}-addCourseA`,
              uid: _uid,
              file_ids: [],
              model: "gpt-4o-2024-08-06"
            };
            var OpenCC = require("opencc-js");
            let converter = OpenCC.Converter({
              from: "cn",
              to: "hk"
            });

            this.ajax
              .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
              .then(res => {
                if (
                  converter(res.data.FunctionResponse.result) ==
                  converter("发送成功")
                ) {
                } else {
                  this.$message.warning(res.data.FunctionResponse.result);
                }
              })
              .catch(err => {
                console.log(err);
              });
            this.getAtAuContent(_uid);
          });
          this.courseText = "";
        } else {
          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,
            createtime: new Date().toLocaleString().replaceAll("/", "-"),
            loading: true
          });

          let history = [];
          if (this.continuous) {
            this.array.forEach(i => {
              if (i.content) history.push({ role: "user", content: i.content });
              if (i.aiContent)
                history.push({ role: "assistant", content: i.aiContent });
            });
          }

          history.push({ role: "user", content: message });
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          let params = JSON.stringify({
            // model: "gpt-3.5-turbo",
            // model: "gpt-4o-2024-08-06",
            model: "qwen-plus",
            temperature: 0,
            max_tokens: 4096,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
            messages: history,
            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;
          // 这里保存对话
          if (this.courseId) {
            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;
          });
          // 处理流数据
        }
      };
    },
    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.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.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          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.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}-addCourseA` //这是对话记录位置
      };
      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}-addCourseA`
        };
        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,
                  createtime: _data[i].createtime
                });
              }
              this.array = _chatList;
              this.loading = false;
            } else {
              let _uid = uuidv4();
              let _chatList = [];
              _chatList.push({
                loading: false,
                role: "",
                content: "",
                uid: _uid,
                AI: "AI",
                aiContent:
                  "您好，我是您的创课助手小可，在创课中遇到什么问题，都可以与我对话~,我会尽量帮助您的",
                oldContent:
                  "您好，我是您的创课助手小可，在创课中遇到什么问题，都可以与我对话~,我会尽量帮助您的",
                isShowSynchronization: false,
                filename: "",
                index: 0,
                is_mind_map: false,
                fileid: ""
              });
              this.array = _chatList;
              if (this.courseId) {
                this.insertChat(_uid);
              }
              //没有对话记录
              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;
    },
    inputChange() {
      if (this.courseText.at(-1) == "@") {
        this.showRoleList = true;
      }
      if (this.courseText.at(-1) == "/") {
        console.log("哇卡ka2");
      }

      this.$nextTick(() => {
        this.$refs.textareaRef.style.height = "35px";
        this.$refs.textareaRef.style.height =
          this.$refs.textareaRef.scrollHeight + "px";
        this.textareaHeight = this.$refs.textareaRef.style.height;
      });
    },
    textareaKeydown(_e) {
      if (this.showRoleList && this.choseRoleList.length > 0) {
        console.log(_e.keyCode);
        switch (_e.keyCode) {
          case 38: //小键盘上
            _e.preventDefault();
            if (this.choseRoleItem == 0) return;
            this.choseRoleItem--;
            // 修改滚动条高度
            this.$refs.roleListRef.scrollTo({
              top:
                this.$refs[`roleItem${this.choseRoleItem}Ref`][0].offsetTop -
                10,
              behavior: "smooth"
            });
            // this.$refs.roleListRef.scrollTop = this.choseRoleItem * 107;
            break;
          case 40: //小键盘下
            _e.preventDefault();
            if (this.choseRoleItem == this.choseRoleList.length - 1) return;
            this.choseRoleItem++;
            this.$refs.roleListRef.scrollTo({
              top:
                this.$refs[`roleItem${this.choseRoleItem}Ref`][0].offsetTop -
                10,
              behavior: "smooth"
            });
            // this.$refs.roleListRef.scrollTop = this.choseRoleItem * 107;
            break;
          case 13: //回车
            _e.preventDefault();
            this.choseRole(this.choseRoleList[this.choseRoleItem]);
            break;
        }
      } else if (_e.key === "Enter") {
        _e.preventDefault();
        if (_e.shiftKey) {
          this.courseText += "\n";
        } else {
          this.addContent();
        }
      }
    },
    clear() {
      this.$confirm("确定清空聊天记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(_ => {
          this.loading = true;
          let params = {
            user_id: this.userid,
            id: "602def61-005d-11ee-91d8-005056b8q12w",
            session_name: `${this.courseId}-addCourseA`
          };

          this.ajax
            .post("https://gpt4.cocorobo.cn/delete_park_session", params)
            .then(res => {
              this.array = [];
              this.$message.success("清除聊天记录成功");
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
              this.$message.error("清除聊天记录失败");
            });
        })
        .catch(_ => { });
    },
    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) {
            this.roleList = JSON.parse(_data);
          }
        })
        .catch(e => {
          console.log(e);
          // this.$message.error("获取角色列表失败");
          this.roleList = [];
        });
    },
    getPublicRoleList() {
      this.publicRoleList = [];
      let params = {
        userId: this.userid,
        organizeid: this.oid
      };
      this.ajax
        .post(
          "https://gpt4.cocorobo.cn/get_ai_agent_assistant_share_list",
          params
        )
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data) {
            this.publicRoleList = JSON.parse(_data);
          }
        })
        .catch(e => {
          this.publicRoleList = [];
          console.log(e);
          // console.log("获取公共角色失败", e);
        });
    },
    choseRole(item) {
      let _lastAtIndex = this.courseText.lastIndexOf("@");
      this.courseText = `${this.courseText.slice(0, _lastAtIndex)}@${item.assistantName
        } `;
      this.$refs.textareaRef.focus();
      this.showRoleList = false;
    }
  },
  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;
    },
    choseRoleList() {
      let result = [...this.roleList, ...this.publicRoleList];
      const _index = this.courseText.lastIndexOf("@");
      if (_index !== -1) {
        let roleName = this.courseText.substring(_index + 1);
        result = result.filter(i => i.assistantName.indexOf(roleName) != -1);
      } else {
        return [];
      }
      this.choseRoleItem = 0;
      return result;
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.$nextTick(() => {
        console.log(this.$refs.chatDialog.scrollHeight);
        this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
      });
    });
    this.getRoleList();
    this.getPublicRoleList();
    this.jArray = this.getString();
  }
};
</script>

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

.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;

  margin-top: auto;
  width: 100%;
  /* height: auto; */
  /* max-height: 80vh; */
  justify-content: space-between;
  align-items: flex-end;
  border-radius: 10px;
  border: 1.5px solid #3681fc !important;
  /* padding: 10px;
	padding-top: 20px; */
  /* overflow: auto; */
}

.ai_b_i_btnArea {
  width: calc(100% - 10px);
  position: absolute;
  bottom: calc(100% + 5px);
  height: 30px;
  display: flex;
  /* justify-content: space-between; */
}

.ai_b_i_btnArea>div {
  display: flex;
  align-items: center;

}

.ai_b_i_btnArea>div>span {
  margin-left: 5px;
  cursor: pointer;
}

.ai_b_i_btnArea>.clear+.clear {
  margin-left: 10px;
}

.ai_b_i_btnArea>.clear {
  box-sizing: border-box;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
  border: solid 1px #3781fb;
  border-radius: 15px;
  display: flex;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.ai_b_i_btnArea>.clear>svg {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  fill: black;
}

.ai_b_i_btnArea>.clear:hover {
  background-color: #ebf4fe;
  color: #409eff;
}

.ai_b_i_btnArea>.clear:hover>svg {
  fill: #409eff;
}

.ai_b_i_textListBox {
  width: 100%;
  height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: calc(100% + 5px);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
  display: flex;
}

.ai_b_i_tlb_left {
  width: 60px;
  height: 100%;
  background-color: red;
}

.ai_b_i_tlb_right {
  flex: 1;
  height: 100%;
  background-color: yellow;
}

.ai_b_i_roleListBox {
  width: 100%;
  height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: calc(100% + 5px);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
}

.ai_b_i_rlb_item {
  width: calc(100% - 20px);
  height: auto;
  padding: 10px;
  background-color: #f3f7fd;
  margin-bottom: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
  cursor: pointer;
}

.ai_b_i_rlb_itemActive {
  background-color: #d1d5db !important;
}

/* .ai_b_i_rlb_item:hover{
	background-color: #d1d5db;
} */

.ai_b_i_rlb_itemTop {
  display: flex;
}

.ai_b_i_rlb_itemTop>img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 100%;
  overflow: hidden;
}

.ai_b_i_rlb_itemTop>div {
  display: flex;
  flex-direction: column;
}

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

.ai_b_i_rlb_itemTop>div>span:last-child {
  font-size: 14px;
  color: #999;
}

.ai_b_i_rlb_itemBottom {
  margin-top: 10px;
  display: flex;
}

.ai_b_i_rlb_itemBottom>span {
  width: 60px;
  height: 30px;
  border-radius: 15px;
  display: flex;
}

.ai_body_input_textarea {
  flex: 1;
  margin: 10px 5px 10px 5px;
  min-height: 35px;
  height: 35px;
  max-height: 60vh;
  border: none;
  outline: none;
  resize: none;
  font-size: 18px;
  overflow: auto;
  padding-right: 100px;
}

.ai_body_input_textarea::-webkit-input-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
}

.ai_body_input_textarea::-moz-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
  opacity: 1;
  /* 修复Firefox的透明度问题 */
}

.ai_body_input_textarea::-moz-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
  opacity: 1;
  /* 修复Firefox的透明度问题 */
}

.ai_body_input_textarea::-ms-input-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
}

.ai_body_input_textarea::-webkit-scrollbar {
  width: 6px;
}

.ai_body_input_textarea::-webkit-scrollbar-track {
  background: #d8d9dc;
  border-radius: 2px;
}

.ai_body_input_textarea::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 10px;
}

.ai_body_input_textarea::-webkit-scrollbar-thumb:hover {
  background: #c9c9c9;
}

.c_pub_button_confirm {
  /* position: absolute;
    bottom: 13px;
    right: 13px; */
  /* margin-top: 10px; */
  width: 60px;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
}

.c_pub_button_confirmDisabled {
  background-color: #aeccfe;
}

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

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

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

.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%;
  border-radius: 100%;
}

.dialog_content>div .content {
  padding: 10px 10px;
  border-radius: 2px 8px 8px 8px;
  width: auto;
  word-break: break-word;
  box-sizing: border-box;
  /* white-space: pre-line; */
  max-width: calc(100% - 50px);
  background: #f6f9ff;
  /* overflow: hidden; */
  margin: 0 10px;
  position: relative;
}

.createTime {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -25px;
  left: 0;
  font-size: 14px;
  white-space: nowrap;
  color: #919191;
}

.dialog_content>div .content2 {
  background: #3681fc;
  color: #fff;
  border-radius: 8px 2px 8px 8px;
  margin-left: auto;
}

.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;
}

.ai_b_i_jListPanel {
  width: 400px;
  height: 100%;
  top: 0;
  right: 0;
  position: fixed;
  /* background-color: #000; */
  z-index: 990;
}

.ai_b_i_jListBox {
  width: 100%;
  max-height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: calc(100% + 5px);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
  z-index: 999;
}

.jlist_box {
  background: #f1f1f1;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 8px 18px 8px 8px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.jlist_box .cancel {
  position: absolute;
  top: 8px;
  right: 5px;
  cursor: pointer;
  font-size: 14px;
}

.jlist_box>span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>