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

<template>
  <div class="task">
    <div class="taskTop">
      <div class="tt_title">任务时间分配</div>
      <div class="tt_item">
        <div class="tt_i_title">
          <span>课程时间轴</span>
        </div>
        <div class="tt_i_box">
          <div class="tt_i_b_step" v-if="navList.length == 1">
            <!-- 只有一个阶段 -->
            <span
              :style="{
                background: taskCount >= index ? '#3681FC' : '#E0EAFB'
              }"
              v-for="(item, index) in navList[courseType].task"
            ></span>
          </div>
          <div class="tt_i_b_step" v-if="navList.length > 1">
            <!-- 多个阶段 -->
            <span
              :style="{
                background: courseType >= index ? '#3681FC' : '#E0EAFB'
              }"
              v-for="(item, index) in navList"
            ></span>
          </div>
          <!-- <img :src="require('../../../assets/icon/course/group.png')" /> -->
        </div>
      </div>

      <div class="tt_item">
        <div class="tt_i_title">
          <span>任务状态</span>
          <span>学生活动中...</span>
        </div>
        <div class="tt_i_box">
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">作业提交</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>提交人数</div>
                <span>{{ isWorkStudent }}<span>人</span></span>
              </div>
              <div
                class="tt_i_b_b_item"
                v-if="
                  (this.$route.query.tcid || courseDetail.juri) &&
                    allStudent &&
                    complete != '-'
                "
              >
                <div>完成率</div>
                <span>{{ complete }}<span>%</span></span>
              </div>
            </div>
          </div>
          <div class="tt_i_b_item">
            <div class="tt_i_b_title">交流互动</div>
            <div class="tt_i_b_box">
              <div class="tt_i_b_b_item">
                <div>参与人数</div>
                <span>{{ isWorkAll }}<span>人</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>点赞数</div>
                <span>{{ likeNum }}<span>个</span></span>
              </div>
              <div class="tt_i_b_b_item">
                <div>评论数</div>
                <span>{{ commentNum }}<span>条</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="t_top" ref="chatRef">
      <div class="t_t_chat" v-for="(item, index) in chatList" :key="index">
        <div class="t_t_c_user" v-if="item.content && item.content != 'addAsk'">
          <div class="t_t_c_u_left">
            <div class="t_t_c_u_l_content">{{ item.content }}</div>
            <div class="t_t_c_u_l_time">{{ item.createtime }}</div>
          </div>
          <div class="t_t_c_u_right">
            <span>我</span>
          </div>
        </div>
        <div class="t_t_c_ai" v-if="item.content != 'addAsk'">
          <div class="t_t_c_a_left">
            <el-avatar v-if="item.filename" :src="item.filename"></el-avatar>
            <span v-else>Ai</span>
          </div>
          <div class="t_t_c_a_right">
            <div
              class="t_t_c_a_r_content"
              style="display: flex;justify-content: space-between;flex-wrap: wrap;"
              v-if="pan(item.aiContent).length"
            >
              <div
                v-if="!pan(item.aiContent).length"
                class="d_t_c_a_r_content"
                v-loading="item.loading"
                v-html="item.aiContent"
              ></div>
              <div
                v-else
                v-for="i in pan(item.aiContent)"
                style="position: relative;"
                class="d_t_c_a_r_c_img"
              >
                <img
                  style="width: 130px;height: 130px;object-fit: cover;"
                  :src="i.image"
                  alt=""
                  @click="previewImg(i.image)"
                />
                <span class="download_image" @click.stop="download(i.image)">
                  <img
                    :src="require('../../../assets/icon/fileIcon/download.png')"
                  />
                </span>
              </div>
            </div>
            <div
              v-else
              class="t_t_c_a_r_content"
              v-loading="item.loading"
              v-html="htmlContent(item.aiContent)"
            ></div>
            <div v-if="!pan(item.aiContent).length" class="aiCopy">
              <img
                @click="onCopy(item.aiContent)"
                style="width: 30px;"
                src="../../../assets/icon/course/copyTxt.png"
                alt=""
              />
            </div>
            <div class="t_t_c_a_r_time">{{ item.createtime }}</div>
          </div>
        </div>
				<div class="s_t_addAsk" v-if="item.content == 'addAsk' && !item.aiContent.questions && item.aiContent.length && !item.loading">
						<span v-for="item2 in item.aiContent" :key="item2.index" @click.stop="send(item2.label)">{{item2.label}}</span>
					</div>
					<div class="s_t_addAsk" v-if="item.content == 'addAsk' && item.aiContent.questions && !item.loading">
						<span v-for="(item2,index2) in item.aiContent.questions" :key="index2" @click.stop="send(item2.question?item2.question:item2)">{{item2.question?item2.question:item2}}</span>
					</div>
					<div class="s_t_addAsk" v-if="item.content == 'addAsk' && item.loading">
						<span style="width:50px;height:50px" v-loading="true"></span>
					</div>
      </div>
    </div>
    <div class="t_bottom">
      <div class="t_b_btnArea">
        <!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
        <div class="t_b_ba_item" @click="sendType('智能总结')">智能总结</div>
        <div class="t_b_ba_item" @click="sendType('智能出题')">智能出题</div>
        <!-- <div class="t_b_ba_item" @click="sendType('优秀标兵')">优秀标兵</div> -->
        <div class="t_b_ba_item" @click="sendType('扩展知识')">扩展知识</div>
        <div class="t_b_ba_item" @click="clear()">清空聊天记录</div>
      </div>
      <div class="t_b_inputArea">
        <!-- <div class="t_b_tape" @click="goTape()"></div> -->
        <div class="t_b_input">
          <el-input
            :disabled="loading || chatLoading"
            v-loading="loading || chatLoading"
            @keyup.enter.native="send()"
            placeholder="请在此输入您想了解的内容"
            class="t_b_i_left"
            v-model="text"
          ></el-input>
          <!-- <div class="t_b_i_right" @click="sendFile()">
						<span></span>
					</div> -->
        </div>
        <div class="t_b_btn" @click="send()">
          <span v-if="!loading && !chatLoading"></span>
          <div v-else @click.stop="stopSend()">停止</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Loading } from 'element-ui';
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
import { tools } from "../../../common/tools";
export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
    navList: {
      type: Array,
      default: () => []
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    },
    worksStudent: {
      type: Array,
      default: () => []
    },
		fileId:{
			type:Array,
			default:()=>[]
		}
  },
  data() {
    return {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      text: "",
      loading: false,
      chatLoading: false,
      chatList: [],
      nowChatList: [],
      source: null,
      saveUid: "",
      allStudent: [],
      tcid: this.$route.query.tcid,
      oid: this.$route.query.oid
    };
  },
  computed: {
    isWorkAll() {
      let _userList = [];
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (i2.commentJson) {
                i2.commentJson.forEach(i3 => {
                  if (
                    i3.userid &&
                    !_userList.find(i5 => i5.userid == i3.userid)
                  ) {
                    _userList.push(i3);
                  }
                });
              }

              if (i2.likeJson) {
                i2.likeJson.forEach(i4 => {
                  if (
                    i4.likesId &&
                    !_userList.find(i5 => i5.userid == i4.likesId)
                  ) {
                    _userList.push({ ...i4, userid: i4.likesId });
                  }
                });
              }
            });
          }
        });
      }
      return _userList.length;
    },
    complete() {
      let _result = 0;
      let _all = this.allStudent ? this.allStudent.length : 0;
      if (_all == 0) return "-";
      _result = ((this.isWorkStudent / _all) * 100).toFixed(2);
      return _result;
    },
    likeNum() {
      let _result = 0;
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (i2.likesCount) {
                _result += i2.likesCount;
              }
            });
          }
        });
      }
      return _result;
    },
    commentNum() {
      let _result = 0;
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (i2.commentCount) {
                _result += i2.commentCount;
              }
            });
          }
        });
      }
      return _result;
    },
    isWorkStudent() {
      let _userList = [];
      if (this.worksStudent.length) {
        this.worksStudent.forEach(i => {
          if (i.length) {
            i.forEach(i2 => {
              if (
                i2.ttype == 2 &&
                !_userList.find(i3 => i3.userid == i2.userid)
              ) {
                _userList.push(i2);
              }
            });
          }
        });
      }
      return _userList.length;
    },
    pan() {
      return content => {
        try {
          return JSON.parse(content);
        } catch (error) {
          return [];
        }
      };
    },
    htmlContent() {
      const md = new MarkdownIt();
      return _md => {
        return md.render(_md);
      };
    }
  },
  methods: {
    stopSend() {
      if (this.source) {
        this.source.close();
        if (this.chatList[this.chatList.length - 1].content == "wanSearch") {
          this.chatList.pop();
        }
        this.loading = false;
        this.chatLoading = false;
        this.source = null;
        this.insertChat(this.saveUid);
      }
    },
    onCopy(content) {
      // 创建临时textarea元素
      const tempInput = document.createElement("textarea");
      tempInput.value = content; // 设置要复制的内容
      // 隐藏元素
      tempInput.style.position = "absolute";
      tempInput.style.left = "-9999px";
      // 将元素添加到DOM中
      document.body.appendChild(tempInput);
      // 选中元素内容
      tempInput.select();
      // 执行复制操作
      document.execCommand("copy");
      // 移除临时元素
      document.body.removeChild(tempInput);
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    exportCourse() {
      let _user = `<div style="font-size:30px;margin-top:10px;"><span style="color: rgb(113, 124, 141); font-weight: 400;">创建者：</span><span>${this.courseDetail.username}</span></div>`;
      const _chapInfo = JSON.parse(this.courseDetail.chapters);
      let _chap = "";

      for (let i = 0; i < _chapInfo.length; i++) {
        _chap += `<div style="font-size:40px;margin-top:70px;"><span>第${i +
          1}阶段：${_chapInfo[i].dyName}</span></div>`;
        let _task = _chapInfo[i].chapterInfo[0].taskJson;
        for (let j = 0; j < _task.length; j++) {
          _chap += `<div style="font-size:30px;margin-top:50px;"><span>任务${j +
            1}：${_task[j].task}</span></div>`;
          if (_task[j].taskDetail) {
            _chap += `<div style="font-size:25px;margin-top:40px;">任务描述</div>`;
            _chap += `<div style="font-size:25px;margin-top:10px;">${_task[j].taskDetail}</div>`;
          }
          let _tool = _task[j].toolChoose;
          if (_tool[0].tool.length) {
            for (let z = 0; z < _tool.length; z++) {
              _chap += `<div style="font-size:23px;margin-top:30px;"><span>步骤${z +
                1}：</span><span>${
                tools[_tool[z].tool[0]] ? tools[_tool[z].tool[0]].name : ""
              }</span></div>`;

              if (_tool[z].toolDetail) {
                _chap += `<div style="font-size:23px;margin-top:20px;">工具描述</div>`;
                _chap += `<div style="font-size:23px;margin-top:10px;">${_tool[z].toolDetail}</div>`;
              }
            }
          }
        }
      }

      let _html = _user + _chap;
      return _html;
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    clear() {
      this.chatList = [];
    },
    // 获取ai对话
    getAiContent(_uid) {
      // this.source = new EventSource(
      //   `https://claude3.cocorobo.cn/streamChat/${_uid}`
      // );
      this.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();
      this.source.onmessage = _e => {
        if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
          //对话已经完成
          _mdText = _mdText.replace("_", "");
          this.source.close();
          this.chatLoading = false;
          this.scrollBottom();
          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.nowChatList.push(this.chatList.find(i => i.uid == _uid));
          let _content = this.chatList.find(i => i.uid == _uid).content;
          if (!["智能总结", "智能出题", "扩展知识"].includes(_content)) {
            this.addAsk(this.chatList.find(i => i.uid == _uid).content);
          }
          // 这里保存对话
          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) {
      this.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();
      this.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.nowChatList.push(this.chatList.find(i => i.uid == _uid));
					this.addAsk(this.chatList.find(i => i.uid == _uid).content)
          this.source.close();
          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) {
      if (_uid == "") return;
      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-md` //这是对话记录位置
      };
      this.saveUid = "";
      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-md`
        };
        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.loading = false;
              this.chatLoading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            this.chatLoading = false;
            resolve();
          });
      });
    },
    // choiceRole() {
    //   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;
      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 history = [];
      this.nowChatList.forEach(i => {
        if (i.content == "wanSearch") {
          // history.push({
          //   role: "assistant",
          //   content: i.aiContent
          // });
          return;
        } else if (i.content == "getImage") {
          return history.push({
            role: "assistant",
            content: i.aiContent
          });
        }
        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: _text });
      // history.pop();
			let params = {
        assistant_id: 'f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b',
        userId: this.userid,
        message: _text,
        session_name: `${this.courseId}-studyStudent-md`,
        uid: _uuid,
        file_ids: this.fileId
      };
      // let params = {
      //   model: "gpt-3.5-turbo",
      //   temperature: 0,
      //   max_tokens: 4096,
      //   top_p: 1,
      //   frequency_penalty: 0,
      //   presence_penalty: 0,
      //   messages: history,
      //   uid: _uuid,
      //   mind_map_question: _text
      // };
      // let params = {
      //   message: {
      //     anthropic_version: "bedrock-2023-05-31",
      //     max_tokens: 4096,
      //     temperature: 0,
      //     top_p: 1,
      //     messages: history
      //   },
      //   uid: _uuid,
      //   model: "Claude 3 Sonnet" // Claude 3 Sonnet或者Claude 3 Haiku
      // };
      this.text = "";

      this.ajax
        // .post("https://claude3.cocorobo.cn/chat", params)
        // .post("https://gpt4.cocorobo.cn/chat", params)
				.post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
        .then(res => {
          if (res.data.FunctionResponse.result == "发送成功") {
          } else {
            // this.$message.warning(res.data.FunctionResponse.result);
						console.log(res.data.FunctionResponse.result)
            this.chatLoading = false;
          }
        })
        .catch(e => {
          console.log(e);
          this.chatLoading = false;
        });
      this.saveUid = _uuid;
      // this.getAiContent(_uuid);
			this.getAtAuContent(_uuid)
    },
    sendType(_text) {
      if (this.loading || this.chatLoading) return this.$message.info("请稍等");
      let _msg = ``;
      if (_text == "扩展知识") {
        // return console.log(this.courseDetail);
        _msg = `
        NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 任务
你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“分类”以及“年级”），向用户输出相关的扩展知识点，将结果以有序列表的形式返回给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
学生年级：${this.courseDetail.classname ? this.courseDetail.classname : "无"}

## 规则
1. 内容应该与“课程信息”相关，避免提供无关的信息。
2. 当课程信息中的子条目内容为“无”时，无视这些条目进行即可。
3. 搜索建议的结果应该符合伦理规范。
4. 一步步思考如何根据“课程信息”来输出“扩展知识点”，但是你不需要“扩展知识点”以外的内容。

## 格式要求
1. 应包括5个相关的“扩展知识点”。
2. 搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。

# Format example
## 课程标题：垃圾回收
分类：无
年级：无
1. 垃圾分类标准：不同国家的垃圾分类标准和方法。
2. 可回收垃圾处理：可回收垃圾的处理流程和再利用方法。
3. 有害垃圾的影响：有害垃圾对环境和人体健康的潜在影响。
4. 垃圾减量化策略：减少垃圾产生的有效策略和实践。
5. 环保教育活动：在学校中推广环保意识的活动和资源。
        `;
      } else if (_text == "智能出题") {
        // console.log("👇")
        // return console.log(this.navList[this.courseType].task[this.taskCount].taskName)
        _msg = `
        NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 任务
你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“分类”以及“年级”），向用户输出当前任务相关的练习题目，将结果以有序列表的形式返回给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
学生年级：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
当前任务名称：${this.navList[this.courseType].task[this.taskCount].taskName}

## 规则
1. 练习题目内容应该与“课程信息”相关，避免提供无关的信息。
2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
3. 一步步思考如何根据“课程信息”输出“练习题目”，但是你不需要输出“练习题目”以外的内容。
4.输出练习题目后，提示用户“希望这些题目能帮到你，如果需要其他类型题目或者更多题目，可以随时向我输入你的需求”

## 格式要求
1. 输出应包括3道相关的“练习题目”。
2. 练习题目默认只包含3道4选1的单选题，除非用户在提示词中更具体地指明了题目类型和数量。
3. 练习题目应以有序列表形式呈现，每个建议包括关键词和简短描述。

# Format example
## 课程标题：垃圾回收
分类：无
年级：无
1. 垃圾回收的主要目的是： a) 增加垃圾的数量 b) 减少垃圾的数量 c) 提高垃圾的质量 d) 增加垃圾的种类
2. 以下哪种垃圾是可以回收的？ a) 食物残渣 b) 塑料瓶 c) 湿纸巾 d) 动物粪便
3. 垃圾分类中，玻璃瓶通常属于哪一类？ a) 可回收垃圾 b) 厨余垃圾 c) 有害垃圾 d) 其他垃圾


					`;
        console.log(_msg);
      } else if (_text == "智能总结") {
        _msg = `
        NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 任务
你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“主题”，“学科”，“年级”以及“学习内容”），对课程进行课程总结，请根据输出格式将内容输出给用户。
课程信息
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
学生年级：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
学习内容：${this.exportCourse()}

## 规则
1. “课程总结”内容应该与“课程信息”相关，避免提供无关的信息。
2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
3. 一步步思考如何根据“课程信息”输出“课程总结”。

## 格式要求
1. 以无序列表的形式输出“课程信息”中的“课程标题”，“主题”，“学科”以及“年级”，若这些条目中的内容为“无”，则不需要输出

## 示例
课程标题：垃圾回收
分类：自然科学 语文 数学
年级：无
学习内容：垃圾回收是指将废弃物重新加工利用的过程，这不仅有助于减少环境污染，还能节约资源。首先，垃圾回收可以减少填埋场的压力，避免土地资源的浪费和地下水的污染。其次，通过回收纸张、塑料、金属等材料，我们可以减少对原材料的需求，从而保护森林、矿产等自然资源。此外，垃圾回收还能减少温室气体的排放，缓解气候变化。引导学生思考垃圾回收的意义，可以从以下几个方面入手：一是环境保护，垃圾回收能有效减少污染，保护生态系统；二是资源节约，通过回收利用，我们可以减少对自然资源的消耗；三是经济效益，垃圾回收产业可以创造就业机会，促进经济发展。通过这些思考，学生们可以更深刻地理解垃圾回收的重要性，并在日常生活中积极参与到垃圾分类和回收的行动中来，共同为可持续发展贡献力量。

# Format example
## 课程标题：垃圾回收
分类：自然科学 语文 数学
年级：无
学习内容：学习内容包含一份引导学生思考为何要进行垃圾回收的文档材料

					`;
      }
      if (!_msg) return;
      // console.log(_msg)
      this.chatLoading = true;
      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
      });
      let history = [];
      this.nowChatList.forEach(i => {
        if (i.content == "wanSearch") {
          // history.push({
          //   role: "assistant",
          //   content: JSON.stringify(i.aiContent)
          // });
          return;
        } else if (i.content == "getImage") {
          return history.push({
            role: "assistant",
            content: i.aiContent
          });
        }
        if (i.content) {
          history.push({
            role: "user",
            content: i.content
          });
        }
        if (i.aiContent) {
          history.push({
            role: "assistant",
            content: i.aiContent
          });
        }
      });
      // history.pop();
      if (_msg) {
        history.push({ role: "user", content: _msg });
      }
      // history.push({ role: "user", content: _text });
      this.scrollBottom();

			let params = {
          assistant_id: 'f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b',
          userId: this.userid,
          message: _msg,
          session_name: `${this.courseId}-studyStudent-md`,
          uid: _uuid,
          file_ids: this.fileId
        };

      // let params = {
      //   model: "gpt-3.5-turbo",
      //   temperature: 0,
      //   max_tokens: 4096,
      //   top_p: 1,
      //   frequency_penalty: 0,
      //   presence_penalty: 0,
      //   messages: history,
      //   uid: _uuid,
      //   mind_map_question: _text
      // };
      // let params = {
      //   message: {
      //     anthropic_version: "bedrock-2023-05-31",
      //     max_tokens: 4096,
      //     temperature: 0,
      //     top_p: 1,
      //     messages: history
      //   },
      //   uid: _uuid,
      //   model: "Claude 3 Sonnet" // Claude 3 Sonnet或者Claude 3 Haiku
      // };
      this.text = "";

      this.ajax
        // .post("https://claude3.cocorobo.cn/chat", params)
				.post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
        // .post("https://gpt4.cocorobo.cn/chat", params)
        .then(res => {
          if (res.data.FunctionResponse.result == "发送成功") {
          } else {
            //this.$message.warning(res.data.FunctionResponse.result);
						console.log(res.data.FunctionResponse.result)
            this.chatLoading = false;
          }
        })
        .catch(e => {
          console.log(e);
          this.chatLoading = false;
        });
      this.saveUid = _uuid;
      // this.getAiContent(_uuid);
			this.getAtAuContent(_uuid)
      // this.send(text);
    },
		addAsk(_text){
			// this.chatLoading = true;
      let _uuid = uuidv4();

      let _msg = `NOTICERole: 你是一个多功能的AI助手，能够根据学生的文本内容判断其情感状态，并提供相应的支持和引导。Output: Provide your output in json format.ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced \"Format example\".Instruction: Based on the context, follow \"Format example\", write content.# Context## 任务1.学生文本内容，执行以下任务。首先，请你判断学生是否进行情感倾诉，比如心情不好、遭遇校园暴力、对他人进行人身攻击等。如果是，请扮演一个心理咨询师的角色，坚持人本主义的立场，善良、温柔地引导对方，安抚对方的情绪，为对方提供心理支持。剩下的其它情况，请你扮演提问引导者的角色，延续学生的提问，围绕问题本身，提出3个问题，激发学生的深度思考、创造性思考。2.人本主义心理学人本主义心理学强调个体的主观体验和自我实现，认为每个人都有内在的潜力和价值。心理咨询师应当以同理心、无条件积极关注和真诚的态度对待来访者，帮助他们发现自身的力量和解决问题的能力。3.提问引导技巧提问引导技巧包括开放性问题、反思性问题和假设性问题等，旨在通过提问激发对方的思考和探索，帮助他们深入理解问题并找到解决方案。## 工作流程1. 仔细阅读并分析学生提供的文本内容。2. 判断学生是否进行情感倾诉。3. 如果是情感倾诉，扮演心理咨询师的角色，提供情感支持和引导。4. 如果不是情感倾诉，扮演提问引导者的角色，围绕问题本身提出3个问题。## 限制/注意事项 1.在回答时应保持专业性和权威性，确保信息的准确性和可靠性。2.避免生成与问题无关或不恰当的回答，确保回答的相关性和实用性。3.在提供情感支持时，注意用词温柔，避免引起对方的负面情绪。## 要求1. 内容包含情感支持或追加问题。2. 情感支持部分应体现同理心和积极关注。3. 追加问题应具有启发性和深度。## 学生文本内容${_text}# Format example [{\"index\": 1,\"label\": \"不同国家的垃圾分类标准和方法？\"},{\"index\": 2, \"label\": \"可回收垃圾的处理流程和再利用方法？\"},{\"index\": 3,\"label\": \"有害垃圾对环境和人体健康的潜在影响？\"}]`;
			_msg = _msg.replace(/[\r\n]/g, "");
      this.chatList.push({
        role: "user",
        content: `addAsk`,
        uid: _uuid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.chatList.length,
        is_mind_map: false,
        loading: true
      });

      this.scrollBottom();

			let history = [];
      // this.nowChatList.forEach(i => {
      //   if (i.content == "wanSearch") {
      //     // history.push({
      //     // 	role:"assistant",
      //     // 	content: JSON.stringify(i.aiContent)
      //     // })
      //     return;
      //   } else if (i.content == "getImage") {
      //     return history.push({
      //       role: "assistant",
      //       content: i.aiContent
      //     });
      //   }else if(i.content == "addAsk"){

			// 	}
      //   if (i.content) {
      //     history.push({
      //       role: "user",
      //       content: i.content
      //     });
      //   }
      //   if (i.aiContent) {
      //     history.push({
      //       role: "assistant",
      //       content: i.aiContent
      //     });
      //   }
      // });
      history.push({ type: "text", text: _msg });
			console.log(history)
      // let params = {
      //   model: "gpt-3.5-turbo",
      //   temperature: 0,
      //   max_tokens: 4096,
      //   top_p: 1,
      //   frequency_penalty: 0,
      //   presence_penalty: 0,
      //   messages:history,
			// 	stream: false,
      //   uid: _uuid,
      //   mind_map_question: ""
      // };
			let params = {
          assistant_id: '6063369f-289a-11ef-8bf4-12e77c4cb76b',
          userId: this.userid,
          message: history,
          session_name:_uuid,
          // uid: _uuid,
          file_ids: this.fileId
        };
      // let params = {
      //   message: {
      //     anthropic_version: "bedrock-2023-05-31",
      //     max_tokens: 4096,
      //     temperature: 0,
      //     top_p: 1,
      //     messages: [{ role: "user", content: _msg }]
      //   },
      //   uid: _uuid,
      //   model: "Claude 3 Sonnet" // Claude 3 Sonnet或者Claude 3 Haiku
      // };
      this.text = "";

      this.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
				.post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(res => {
					console.log(res)
					let _data = res.data.FunctionResponse.message;
					console.log(_data);
					_data = _data.replaceAll("```json", "").replaceAll("```", "");

					this.chatList.find(i => i.uid == _uuid).aiContent =JSON.parse(_data);
					this.chatList.find(i => i.uid == _uuid).isalltext = true;
          this.chatList.find(i => i.uid == _uuid).isShowSynchronization = true;
          this.chatList.find(i => i.uid == _uuid).loading = false;
					this.scrollBottom();
					// this.chatLoading = false;
        })
        .catch(e => {
          this.chatLoading = false;
					this.chatList.find(i => i.uid == _uuid).loading = false;
          console.log(e);
        });
		},
    getAllStudent() {
      let params = {
        oid: this.oid,
        cid: this.tcid ? this.tcid : this.courseDetail.juri
      };
      this.allStudent = [];
      this.ajax
        .get(this.$store.state.api + "selectWorksStudent", params)
        .then(res => {
          this.allStudent = res.data[0];
        });
    },
    scrollBottom() {
      this.$nextTick(() => {
        this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
      });
    },
    download(_url) {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", _url, true);
        xhr.responseType = "blob";
					xhr.onload = () => {
          if (xhr.status === 200) {
            let blob = xhr.response;
            // const _blob = new Blob([blob], { type: fileType });
            const downloadElement = document.createElement("a");
            const url = window.URL.createObjectURL(blob);
            downloadElement.href = url;
            downloadElement.download = "Image.jpg";
            downloadElement.click();
            window.URL.revokeObjectURL(url); // 释放内存
          }else{
						this.$message.error("此图片不支持下载");
					}
        };
				xhr.onerror = (e)=>{
					console.log(e)
					this.$message.error("此图片不支持下载");
				}
        
        xhr.send();
      
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.scrollBottom();
    });
    this.getAllStudent();
    this.nowChatList = [];
  }
};
</script>

<style scoped>
.task {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.aiCopy {
  position: absolute;
  right: 5px;
  bottom: 0%;
  /* transform: translate(0, -30%); */
  cursor: pointer;
}
.taskTop {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding: 10px;
  overflow-x: hidden;
}

.tt_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.tt_item {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.tt_i_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tt_i_title > span:nth-of-type(2) {
  box-sizing: border-box;
  padding: 0 10px;
  height: 25px;
  background-color: #effcf5;
  color: #83e0af;
}

.tt_i_box {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}

.tt_i_b_step {
  display: flex;
  width: 100%;
  height: auto;
  margin: 10px 0;
}

.tt_i_b_step > span {
  height: 5px;
  background-color: #e0eafb;
  flex: 1;
  border-left: 2px solid #fff;
}

.tt_i_b_step > span:nth-child(-1) {
  border: none;
}

.tt_i_box > img {
  width: 100%;
  height: 50px;
}

.tt_i_b_item {
  width: auto;
  height: 90px;
  background-color: #f6f9ff;
}

.tt_i_b_title {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: solid 1px #e0eafb;
  color: #626466;
}

.tt_i_b_box {
  width: auto;
  min-width: 140px;
  height: 60px;
  box-sizing: border-box;
  border: solid 1px #e0eafb;
  border-top: none;
  display: flex;
}

.tt_i_b_b_item {
  width: 70px;
  min-width: 70px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: solid 1px #e0eafb;
}

.tt_i_b_box > .tt_i_b_b_item:nth-of-type(1) {
  border-left: none;
}

.tt_i_b_b_item > div {
  font-size: 14px;
  color: #949599;
}

.tt_i_b_b_item > span {
  font-weight: bold;
}

.tt_i_b_b_item > span > span {
  font-size: 12px;
  font-weight: 200;
}

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

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

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

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

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

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

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

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

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

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

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

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

.t_t_c_a_r_content2 {
  background-color: #f6f8ff;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
  box-shadow: 0 0px 10px #c5cbee;
}

.t_t_c_a_r_c_title {
  display: flex;
  align-items: center;
}
.t_t_c_a_r_c_title > img {
  width: 16px;
  height: 16px;
}

.t_t_c_a_r_c_item {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 5px;
  color: #666666;
  font-size: 14px;
  cursor: pointer;
}

.t_t_c_a_r_c_item:hover {
  border: solid #b8d2fe 1px;
  box-shadow: 0 0 5px 2px #b8d2fe;
}

.t_t_c_a_r_c_title > span {
  font-weight: bold;
}

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

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

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

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

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

.t_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;
  margin-right: 10px;
  white-space: nowrap;
  transition: 0.3s;
}

.t_b_ba_item:hover {
  background-color: rgb(236, 236, 236);
}

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

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

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

.t_b_i_left {
  /* width: calc(100% - 45px); */
  width: 100%;
  line-height: 45px;
  height: 100%;
}

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

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

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

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

.t_b_btn > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

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

td,
th {
  padding: 10px;
}

.s_t_addAsk {
  width: 100%;
  height: auto;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.s_t_addAsk > span {
  box-sizing: border-box;
  width: auto;
  height: auto;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f5f6f7;
  border-radius: 10px;
  cursor: pointer;
  border: solid 1px #e8e9ec;
  transition: 0.3s;
}

.s_t_addAsk > span:hover {
  background-color: #e8e9ec;
}

.d_t_c_a_r_c_img:hover .download_image {
  display: block;
}

.download_image {
  position: absolute;
  display: none;
  right: 5px;
  bottom: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.download_image > img {
  width: 100%;
  height: 100%;
}
</style>