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

<template>
  <div class="search">
    <div class="s_top" ref="chatRef">
      
      <div class="s_t_chat" v-for="(item, index) in chatList" :key="index">
        <div
          class="s_t_c_user"
          v-if="
            item.content &&
              item.content != 'wanSearch' &&
              item.content != 'getImage' &&
							item.content !='addAsk'
          "
        >
          <div class="s_t_c_u_left">
            <div class="s_t_c_u_l_content">{{ item.content }}</div>
            <div class="s_t_c_u_l_time">{{ item.createtime }}</div>
          </div>
          <div class="s_t_c_u_right">
            <span>我</span>
          </div>
        </div>

        <div
          class="s_t_c_ai"
          v-if="item.content != 'wanSearch' && item.content != 'getImage' && item.content !='addAsk'"
        >
          <div class="s_t_c_a_left">
            <span>Ai</span>
          </div>
          <div class="s_t_c_a_right">
            <div
              class="s_t_c_a_r_content"
              v-if="pan(item.aiContent).length"
              style="display: flex;justify-content: space-between;flex-wrap: wrap;"
            >
              <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, index) in pan(item.aiContent)"
                :key="index"
								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>
              <!-- {{ item }} -->
              <div style="margin-top: 10px;width: 100%;display: flex;justify-content: end;" v-if="pan(item.aiContent).length > 1 && chatList.length-2 == index" >
                <img style="cursor: pointer;" @click="resetImg(item.content)" src="../../../assets/icon/course/resImg.png" alt="">
              </div>
            </div>
            <div
              v-else
              class="s_t_c_a_r_content"
              v-loading="item.loading"
              v-html="htmlContent(item.aiContent)"
            ></div>
            <!-- {{ Array.isArray(JSON.parse(item.aiContent)) }} -->
            <!-- {{ JSON.parse(item) }} -->
            <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="s_t_c_a_r_contentImage"
              v-loading="item.loading"

            >
            
              <span style="margin-bottom: 10px;">为您找到以下图片: {{ item.content }}</span> -->
            <!-- {{ item.aiContent }} -->
            <!-- <img
                v-for="(i, index) in item.aiContent"
                @click.stop="$hevueImgPreview(item)"
                :key="index"
                :src="i.image"
              /> -->
            <!-- <div class="imgNumberBlock">
                <div class="imgNumber" v-for="(i,index) in imgNumList" :key="index+'b'">
                  {{ i }}
                </div>
                <div  class="imgNumber" style="background: none;">
                  <img style="width: 36px;height: 30px;" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Frame%20131715569413607.png" alt="">
                </div>
              </div> -->
            <!-- </div> -->
            <!-- <div class="s_t_c_a_r_time">{{ item.createtime }}</div> -->
          </div>
        </div>

        <div class="s_t_chat" v-if="item.content == 'wanSearch'">
          <div class="s_t_c_ai">
            <div class="s_t_c_a_left">
              <el-avatar v-if="item.filename" :src="item.filename"></el-avatar>
              <span v-else>Ai</span>
            </div>
            <div class="s_t_c_a_right">
              <div class="s_t_c_a_r_content2" v-loading="item.loading">
                <div class="s_t_c_a_r_c_title">
                  <img :src="require('../../../assets/icon/course/idea.png')" />
                  <span>猜你想搜:</span>
                </div>
                <div
                  class="s_t_c_a_r_c_item"
                  v-for="(item, index) in item.aiContent"
                  :key="index"
                  @click="sendAiIdea(item.label)"
                >
                  {{ index + 1 }}.{{ item.title }}：{{ item.label }}
                </div>
              </div>
              <div class="s_t_c_a_r_time">{{ item.createtime }}</div>
            </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="s_bottom">
			<!-- <div class="s_b_btnAreaTop">

			</div> -->
      <div class="s_b_btnArea">
				<div :class="['s_b_ba-item',sendType==3?'s_b_ba_active':'']" @click="chooseType(3)" >
          <!-- <img src="../../../assets/icon/course/sImg.png" style="margin-right: 5px;" alt="" v-if="sendType!=3">
					<img src="../../../assets/icon/course/sImg2.png" style="margin-right: 5px;" alt="" v-else> -->
					生成图片
        </div>
        <div :class="['s_b_ba-item',sendType==1?'s_b_ba_active':'']" @click="chooseType(1)" >
          <!-- <img src="../../../assets/icon/course/sImg.png" style="margin-right: 5px;" alt="" v-if="sendType!=1">
					<img src="../../../assets/icon/course/sImg2.png" style="margin-right: 5px;" alt="" v-else> -->
					搜索图片
        </div>
        <div :class="['s_b_ba-item',sendType==2?'s_b_ba_active':'']" @click="chooseType(2)">
          <!-- <img src="../../../assets/icon/course/sRio.png" style="margin-right: 5px;" alt="" v-if="sendType!=2">
					<img src="../../../assets/icon/course/sRio2.png" style="margin-right: 5px;" alt="" v-else> -->
					搜索视频
				</div>
        <!-- <div class="s_b_ba-item" @click="clear()" v-if="!openAtBox">
          清空聊天记录
        </div>

				<div :class="['s_b_ba-item',recordType==1?'s_b_ba_active':'']" @click="$parent.startAssistant()" v-if="!openAtBox">
          语音助手
        </div> -->

      </div>

      <div class="s_b_atBox" v-if="openAtBox" v-loading="loading">
        <div class="s_b_at_tag">
          <span
            :class="[atTagIndex == 0 ? 's_b_at_tag_active' : '']"
            @click.stop="atTagIndex = 0"
            >任务</span
          >
          <span
            :class="[[1, 2].includes(atTagIndex) ? 's_b_at_tag_active' : '']"
            @click.stop="atTagIndex = 1"
            >成员</span
          >
        </div>
        <div class="s_b_at_list">
          <template v-if="atTagIndex == 0">
            <div v-for="(item1, index1) in taskList" :key="index1">
              <div
                class="s_b_at_l_top"
                v-if="item1.dyName"
                @click="
                  atTask(`阶段${index1 + 1} ${item1.dyName} `, index1, 0, item1)
                "
              >
                <span>阶段{{ index1 + 1 }} {{ item1.dyName }}</span>
                <span
                  class="s_b_at_l_i_h_icon1"
                  :style="
                    `${!item1.isOpen ? 'transform: rotate(-90deg);' : ''}'`
                  "
                  @click.stop="item1.isOpen = !item1.isOpen"
                ></span>
              </div>
              <div
                class="s_b_at_l_item"
                v-for="(item2, index2) in item1.task"
                :key="index1 + '-' + index2"
                v-if="item1.isOpen"
              >
                <div
                  class="s_b_at_l_i_header"
                  v-if="item2.tool[0].tool != undefined"
                  @click="
                    atTask(
                      `阶段${index1 + 1} ${item1.dyName}-任务${index2 + 1}：${
                        item2.taskName
                      } `,
                      index2,
                      1,
                      item2
                    )
                  "
                >
                  <span
                    class="s_b_at_l_i_h_icon1"
                    :style="
                      `${!item2.isOpen ? 'transform: rotate(-90deg);' : ''}'`
                    "
                    @click.stop="item2.isOpen = !item2.isOpen"
                  ></span>
                  <span>任务{{ index2 + 1 }}：{{ item2.taskName }}</span>
                </div>
                <div
                  class="s_b_at_l_i_header"
                  v-else
                  @click="
                    atTask(
                      `阶段${index1 + 1} ${item1.dyName}-任务${index2 + 1}：${
                        item2.taskName
                      } `,
                      index2,
                      1,
                      item2
                    )
                  "
                >
                  <span
                    class="s_b_at_l_i_h_icon2"
                    :style="
                      `${!item2.isOpen ? 'transform: rotate(-90deg);' : ''}'`
                    "
                    @click.stop="item2.isOpen = !item2.isOpen"
                  ></span>
                  <span>任务{{ index2 + 1 }}：{{ item2.taskName }}</span>
                </div>
                <div
                  class="s_b_at_l_i_content"
                  v-if="item2.tool[0].tool != undefined && item2.isOpen"
                  v-for="(item3, index3) in item2.tool"
                  :key="index1 + '-' + index2 + '-' + index3"
                  @click="
                    atTask(
                      `阶段${index1 + 1} ${item1.dyName}-任务${index2 + 1}：${
                        item2.taskName
                      }-工具${index3 + 1}：${toolsList[item3.tool]} `,
                      index3,
                      2,
                      item3
                    )
                  "
                >
                  <span>工具{{ index3 + 1 }}：{{ toolsList[item3.tool] }}</span>
                </div>
              </div>
            </div>
          </template>
          <template v-if="atTagIndex == 1 && workSum!=0">
            <div v-if="userList.length == 0">暂无成员...</div>
            <div
              class="s_b_ab_user"
              v-for="(item, index) in userList"
              :key="item.id"
              v-else
            >
              <div class="s_b_ab_u_name">
                <el-tooltip
                  class="item"
                  effect="light:"
                  :content="item.username"
                  placement="top"
                >
                  <span>{{ item.username }}</span>
                </el-tooltip>
              </div>
              <div class="s_b_ab_u_message">
                <span>作业提交情况</span>
                <div>
                  <span>已提交：{{ item.count }}</span>
                  <span>未提交：{{ (workSum-item.count) }}</span>
                </div>
              </div>
              <div class="s_b_ab_u_btnArea">
                <span @click="sumUpStudent(item)">总结分析</span>
                <span @click.stop="lookStudentDetail(item)">作业详细</span>
              </div>
            </div>
          </template>
          <template v-if="atTagIndex == 2">
            <div class="s_b_at_studentDetail">
              <img
                :src="require('../../../assets/icon/course/back.svg')"
                @click.stop="atTagIndex = 1"
              />
              <span>学生：{{ lookStudentData.userName }}</span>
            </div>
            <div class="s_b_at_studentList">
              <div
                class="s_b_at_sl_item"
                v-if="[3, 2, 8].includes(item.type)"
                v-for="(item, index) in lookStudentData.list"
                @click.stop="sumUpStudent2(item)"
              >
                <div class="s_b_at_sl_phase">
                  {{
                    `阶段${item.stage + 1}/任务${item.task +
                      1}/工具${item.tool + 1}`
                  }}
                </div>
                <div class="s_b_at_sl_message" v-if="item.type === 3">
                  <div>
                    题目：
                    <el-tooltip
                      class="item"
                      effect="light:"
                      :content="item.content.answerTitle"
                      placement="top"
                      ><span>{{ item.content.answerTitle }}</span></el-tooltip
                    >
                  </div>
                  <div>
                    答题：
                    <span>{{ item.content.answer }}</span>
                  </div>
                </div>

                <div
                  class="s_b_at_sl_message"
                  v-if="item.type === 8"
                  v-for="(item1, index1) in item.content.testJson
                    ? item.content.testJson.testJson
                    : []"
                  :key="index1"
                >
                  <div>
                    题目：
                    <el-tooltip
                      class="item"
                      effect="light:"
                      :content="item1.teststitle"
                      placement="top"
                      ><span>{{ item1.teststitle }}</span></el-tooltip
                    >
                  </div>

                  <div>
                    选项：
                    <span>
                      <div v-for="(item2, index2) in item1.checkList">
                        {{ index2 + 1 }}、{{ item2.src ? item2.src : item2 }}
                      </div>
                    </span>
                  </div>
                  <div>
                    答案：{{ answerData(item1.checkList, item1.answer) }}
                  </div>
                  <div>
                    答题：
                    <span>{{
                      answerData(item1.checkList, item.content.anwer[index1])
                    }}</span>
                  </div>
                </div>

                <div
                  class="s_b_at_sl_message"
                  v-if="item.type === 2"
                  v-for="(item1, index1) in item.content.askJson
                    ? item.content.askJson.askJson
                    : []"
                  :key="index1"
                >
                  <div>
                    题目：
                    <el-tooltip
                      class="item"
                      effect="light:"
                      :content="item1.askstitle"
                      placement="top"
                      ><span>{{ item1.askstitle }}</span></el-tooltip
                    >
                  </div>

                  <div>
                    选项：
                    <span>
                      <div v-for="(item2, index2) in item1.checkList">
                        {{ index2 + 1 }}、{{ item2.src ? item2.src : item2 }}
                      </div>
                    </span>
                  </div>
                  <div>
                    答题：
                    <span>{{
                      answerData(item1.checkList, item.content.anwer[index1])
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <div class="s_b_inputArea">
        <!-- <div class="s_b_tape" @click="goTape()"></div> -->
        <div class="s_b_input">
          <el-input
            :disabled="loading || chatLoading"
            v-loading="loading || chatLoading"
            @keyup.enter.native="send()"
						placeholder="输入@可以分析任务和作业情况"
            class="s_b_i_left"
            v-model="text"
            ref="textRef"
          ></el-input>
          <!-- <div class="s_b_i_right" @click="sendFile()">
            <span></span>
          </div> -->
        </div>
        <div class="s_b_btn" @click="send()">
          <span v-if="!loading && !chatLoading"></span>
          <div v-else @click.stop="stopSend()">停止</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
import { tools } from "../../../common/tools";
var OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
		from:'hk',
		to:'cn'
})
export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
		recordType:{
			type:Number,
			default:0
		},
    navList: {
      type: Array,
      default: () => []
    },
    tcid: {
      type: String,
      default: ""
    },
		fileId:{
			type:Array,
			default:()=>[]
		}
  },
  data() {
    return {
      text: "",
      ppage: 1,
      sendType: 0,
      loading: false,
      chatLoading: false,
      imageCheck: false,
      videoCheck: false,
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
      imgNumList: ["U1", "U2", "U3", "U4"],
      chatList: [],
      nowChatList: [],
      atTagIndex: 0,
      source: null,
      saveUid: "",
      toolsList: {
        "58": "模拟驾驶",
        "59": "路径搜索",
        "60": "深度学习",
        "10": "倒计时",
        "65": "挑人",
        "7": "思维网格",
        "1": "电子白板",
        "52": "文档",
        "3": "思维导图",
        "48": "表格",
        "49": "学生分组",
        "4": "问卷调查",
        "45": "选择题",
        "15": "问答",
        "16": "作业提交",
        "50": "批量上传",
        "41": "选择匹配",
        "47": "排序",
        "40": "个人评价",
        "18": "训练平台",
        "21": "AIoT Blockly",
        "23": "AI Python",
        "24": "AI Blockly",
        "32": "源码编辑",
        "57": "CocoPi",
        "63": "海龟编程",
        "28": "翻译",
        "31": "数字画板",
        "39": "GeoGebra",
        "66": "公式编辑",
        "67": "分子结构",
        "68": "时间轴",
        "69": "英语写作",
        "70": "英语口语",
        "25": "目标管理",
        "26": "课程设计",
        "62": "交互视频",
        "71": "AI智能体"
      },
      lookStudentData: {},
      taskList: [],
      userList: [],
      tools: JSON.parse(converter(JSON.stringify(tools))),
    };
  },
  computed: {
    openAtBox() {
      // return false;
      if (this.text.length == 0) return false;
      if (this.text.lastIndexOf("@") == this.text.length - 1) {
        return true;
      } else {
        return false;
      }
    },
    atTaskList() {
      let _result = [];
      this.taskList.forEach((item1, index1) => {
        if (item1.dyName) {
          _result.push({
            name: `阶段${index1 + 1} ${item1.dyName}`,
						tool:null,
            type: 0
          });
        }
        item1.task.forEach((item2, index2) => {
          if (item2.taskName) {
            _result.push({
              name: `任务${index2 + 1}：${item2.taskName}`,
							tool:null,
              type: 1,
              superiors: {
                name: `阶段${index1 + 1} ${item1.dyName}`,
                type: 0
              }
            });
          }
          item2.tool.forEach((item3, index3) => {
            if (item3.tool != undefined) {
              _result.push({
                name: `工具${index3 + 1}：${this.toolsList[item3.tool]}`,
								tool:item3.tool,
                type: 2,
                superiors: {
                  name: `任务${index2 + 1}：${item2.taskName}`,
                  type: 1,
                  superiors: {
                    name: `阶段${index1 + 1} ${item1.dyName}`,
                    type: 0
                  }
                }
              });
            }
          });
        });
      });
      return _result;
    },
    pan() {
      return content => {
        try {
          return JSON.parse(content);
        } catch (error) {
          return [];
        }
      };
    },
    htmlContent() {
      const md = new MarkdownIt();
      return _md => {
        return md.render(_md);
      };
    },
    answerData() {
      return (checkList, answer) => {
        if (typeof answer == "number") {
          return answer + 1;
        } else {
          let _result = ``;
          answer.forEach((item, index) => {
            _result += `${item + 1}`;
            if (index != answer.length - 1) {
              _result += `、`;
            }
          });
          return _result;
        }
      };
    },
		workSum(){
			let sum = 0;
			this.atTaskList.forEach(i=>{
				if(i.type!=2)return;
				if([4,15,45].includes(i.tool)){
					return sum+=1;
				}
			})
			return sum;
		}
  },
  watch: {
    navList() {
      this.initTaskList();
    },
    atTagIndex(newValue) {
      if (newValue != 2) {
        this.lookStudentData = {};
      }
    }
  },
  methods: {
		chooseType(type){
			console.log('👇')
			console.log(type)
			if(this.sendType==type){
				this.sendType = 0;
			}else{
				this.sendType = type;
			}
			console.log('👇')
			console.log(this.sendType)
			
		},
    resetImg(_text){
        this.ppage++

        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.text = "";
        let params = {
          page: this.ppage,
          pagesize: 6,
          query: _text
        };
        // this.$message.info(_text);
        this.chatList.push({
          role: "user",
          content: `getImage`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.chatList.length,
          is_mind_map: false,
          loading: true
        });
        this.scrollBottom();

        this.ajax
          .post("https://gpt.cocorobo.cn/search_image", params)
          .then(res => {
            let data = res.data.FunctionResponse.result;
            // console.log('res',res.data.FunctionResponse.result);
            this.chatList.find(i => i.uid == _uuid).aiContent = JSON.stringify(
              data
            );
            this.chatList.find(i => i.uid == _uuid).loading = false;
            this.chatLoading = false;
            this.insertChat(_uuid);
          });
    },
    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"
      });
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    clear() {
      this.chatList = [];
    },
    atTask(name, index, type, data) {
      let _result = name;
      // if(type == 1){
      // 	_result=`任务${index+1}：${name} `
      // }else if(type==2){
      // 	_result=`工具${index+1}：${name} `
      // }else if(type==0){
      // 	_result=`阶段${index+1} ${name} `
      // }
      this.text += _result;
      this.$refs.textRef.focus();
    },
    // 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,val = 0) {
      this.ppage = 1
      if (this.loading || this.chatLoading) return this.$message.info("请稍等");
      if (_text.trim().length == 0) return this.$message.info("请输入内容");
      let _atRoleList = [];
      this.atTaskList.forEach(i => {
        let _result = ``;
        if (i.type == 0) {
          _result = `${i.name} `;
        } else if (i.type == 1) {
          _result = `${i.superiors.name}-${i.name} `;
        } else if (i.type == 2) {
          _result = `${i.superiors.superiors.name}-${i.superiors.name}-${i.name} `;
        }
        if (_text.indexOf(`@${_result}`) != -1) {
          _atRoleList.push(i);
        }
      });
      if (_atRoleList.length > 0) {
        return this.atSend(_text, _atRoleList);
      }
      let _msg = ``;
      this.chatLoading = true;
      let _uuid = uuidv4();
			// if(this.sendType==3){
			// 	_text = `帮我生成一张图片：`
			// }
      this.chatList.push({
        role: "user",
        content: `${this.sendType==3?`帮我生成一张图片：${_text}`:_text}`,
        uid: _uuid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.chatList.length,
        is_mind_map: false,
        loading: true
      });
      this.scrollBottom();
			console.log(this.sendType)
      if ( this.sendType == 2 || _text.indexOf("视频") != -1) {
					return this.ajax.post(`https://gpt4.cocorobo.cn/get_network_search`,{
						 engine:"bilibili",
    				keyword:_text
					}).then(res=>{
					console.log(res)
					let _dataList = res.data.FunctionResponse;
					let _resultText = ``;
					_dataList.forEach(i=>{
						i.title = i.title.replaceAll('<em class="keyword">','').replaceAll('</em>','')
						_resultText+=`名称：${i.title}\n简介：${i.description}\n地址：[${i.arcurl}](${i.arcurl})\n\n`
					})
					this.chatList.find(i => i.uid == _uuid).aiContent =_resultText
					this.chatList.find(i => i.uid == _uuid).loading = false;
         this.chatLoading = false;
					this.scrollBottom();
         this.insertChat(_uuid);
					this.text = "";
				}).catch(e=>{
					this.$message.error('获取视频失败');
					this.chatLoading = false;
				})
			}else if(this.sendType == 3){
		
				this.text = "";
        let params = {
          page: this.ppage,
          pagesize: 1,
          query: _text
        };
        // this.$message.info(_text);
        this.chatList.push({
          role: "user",
          content: `getImage`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.chatList.length,
          is_mind_map: false,
          loading: true
        });
        this.ajax
          .post("https://gpt.cocorobo.cn/search_image", params)
          .then(res => {
            let data = res.data.FunctionResponse.result;
            // console.log('res',res.data.FunctionResponse.result);
            this.chatList.find(i => i.uid == _uuid).aiContent = JSON.stringify(
              data
            );
            this.chatList.find(i => i.uid == _uuid).loading = false;
            this.chatLoading = false;
            this.insertChat(_uuid);
          });
        return;
      } else if (this.sendType == 1 || _text.indexOf("图片") != -1 ) {
        // console.log("图片");

        this.text = "";
        let params = {
          page: this.ppage,
          pagesize: 6,
          query: _text
        };
        // this.$message.info(_text);
        this.chatList.push({
          role: "user",
          content: `getImage`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.chatList.length,
          is_mind_map: false,
          loading: true
        });
        this.ajax
          .post("https://gpt.cocorobo.cn/search_image", params)
          .then(res => {
            let data = res.data.FunctionResponse.result;
            // console.log('res',res.data.FunctionResponse.result);
            this.chatList.find(i => i.uid == _uuid).aiContent = JSON.stringify(
              data
            );
            this.chatList.find(i => i.uid == _uuid).loading = false;
            this.chatLoading = false;
            this.insertChat(_uuid);

            // console.log('resresresres',res);
            // if (res.data.FunctionResponse.result == "发送成功") {

            // } else {
            //   this.$message.warning(res.data.FunctionResponse.result);
            // }
          });

        return;
      }
      //         num=0
      //       	_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
      // ## 任务
      // 你的任务是根据用户的请求，结合以下“课程信息”包含的子条目（“课程标题”，“主题”，“学科”以及“年级”），向用户输出相关的4张图片，将结果2*2的形式返回给用户。
      // 课程信息
      // 课程标题：${this.courseDetail.title}
      // 分类：${this.courseDetail.name?this.courseDetail.name:"无"}
      // 学生年级：${this.courseDetail.classname?this.courseDetail.classname:"无"}

      // ## 规则
      //     1. 输出内容应该与“课程信息”相关，避免提供无关的信息。
      //     2. 当课程信息中的子条目内容为“无”时，无视这些条目进行输出即可。
      //     3. 搜索建议的结果应该符合伦理规范。

      // ## 输出格式
      //     1. 以2*2的格式输出应包括4张相关的图片。
      //       `
      //       }
      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({
            type: "text",
            text: i.aiContent
          });
        }else if(i.content == "addAsk"){

				}
        if (i.content) {
          history.push({
            type: "text",
            text: i.content
          });
        }
        if (i.aiContent) {
          history.push({
            type: "text",
            text: i.aiContent
          });
        }
      });
      // history.pop();
      if (_msg) {
        history.push({ type: "text", text: _msg });
      }else{
        history.push({ type: "text", text: _text });
      }
			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 = "";
      // console.log('56465166541561616',params);

      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 (converter(res.data.FunctionResponse.result) == converter("发送成功")) {
          } 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.getAtAuContent(_uuid);
    },
    atSend(_text, _atList) {
      let _msg = ``;
      let noAtText = _text;
      _atList.forEach(i => {
        let _result = ``;
        if (i.type == 0) {
          _result = `${i.name} `;
        } else if (i.type == 1) {
          _result = `${i.superiors.name}-${i.name} `;
        } else if (i.type == 2) {
          _result = `${i.superiors.superiors.name}-${i.superiors.name}-${i.name} `;
        }
        if (_text.indexOf(`@${_result}`) != -1) {
          noAtText = noAtText.replaceAll(`@${_result}`, "");
        }
      });
      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();

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

## 目的
你是用户的课堂助手，你需要基于提供给你的课程相关信息，对用户的提问进行回答。
---
## 定义
给你提供的课程发生在一个网络教学平台上，各元素存在以下的关系：课程⊇阶段⊇任务⊇工具。
【课程】：课程通常是一个完整的项目，有一个或多个阶段。
【阶段】：阶段表示课程的某一单独部分，通常包含一个或多个任务。
【任务】：任务是课程的基本单元，包含一个或多个工具，通常写明了学生要具体完成的事项。
【工具】：工具通常是指学生要完成任务的手段。比如“提交作业”表示学生需要提交一份文件；又比如“问答”，表示学生需要输入一个回答；再比如“选择题”，表示学生需要根据题目要求选择正确的答案。
---
## 工作流程
    1. 读取【课程信息】中的内容，了解课程说明、课程结构以及【任务】详情。
    2. 用户会询问你某个【任务】的具体信息，你需要总结该任务信息，并就用户的问题进行回答。
    3. 你的总结包括以下要点：
        3.1 任务从属于哪个阶段。
        3.2 任务包含哪些工具。
        3.3 该任务目标是什么，以及该任务的工具如何达成它的目标。
---
## 规则
    1.你和用户讨论的范围应当仅局限于课程相关内容。
    2.当用户的提问需要你对课程拥有完整的信息、而你又缺乏部分信息时，你应当向客户询问你缺少的信息，再回答用户的提问。
    3.你通常可以在【任务描述】中了解任务目标，但当【任务描述】不包含此内容的时候，你不需要总结这部分内容。
---
## 课程信息

###课程说明与课程结构
课程标题：${this.courseDetail.title}
分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
学生年级：${this.courseDetail.classname ? this.courseDetail.classname : "无"}
学习内容：${this.exportCourse()}

## 要求
${_atList
  .map(i => {
    let _result = ``;
    if (i.type == 0) {
      _result = `${i.name}`;
    } else if (i.type == 1) {
      _result = `${i.superiors.name}-${i.name}`;
    } else if (i.type == 2) {
      _result = `${i.superiors.superiors.name}-${i.superiors.name}-${i.name}`;
    }
    console.log(_result);
    return _result;
  })
  .join(",")} ${noAtText}
`;
      // this.chatLoading = false;
      // console.log(_msg)
      // return
      // ${this._atList.map(i=>i.name).join(',')} ${noAtText}
      let history = [];
      this.nowChatList.forEach(i => {
        if (i.content == "wanSearch") {
          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
          });
        }
      });

      // if (_msg) {
      history.push({ role: "user", content: _msg });
      // }
      history.push({ role: "user", content: _text });
			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: noAtText
      // };
      // 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://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
				.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);
						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)
    },
    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;
    },
    // 获取ai对话
    getAiContent(_uid) {
      // this.source = new EventSource(
      //   `https://claude3.cocorobo.cn/streamChat/${_uid}`
      // );
			this.source = new EventSource(`https://gpt4.cocorobo.cn/question/${_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));
					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 = "";
			let _index = 0;
      // 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 {
					_index+=1;
          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);
         if(_index==10){
					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;
          });
					_index= 0;
				 }
          // 处理流数据
        }
      };
    },
    getWAntSearchContent(_uid) {
      // this.source = new EventSource(
      //   `https://claude3.cocorobo.cn/streamChat/${_uid}`
      // );
			this.source = new EventSource(`https://gpt4.cocorobo.cn/question/${_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 = "";
      this.scrollBottom();
      this.source.onmessage = _e => {
        if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
          //对话已经完成
          _mdText = _mdText.replace("_", "");
          _mdText = _mdText.replace("```json", "");
          _mdText = _mdText.replace("```", "");
					// 使用正则表达式匹配JSON数组
					const regex = /\[\s*{[^]*}\s*\]/;
					const match = _mdText.match(regex);
					let _result = match[0]
          this.source.close();
          this.chatLoading = false;
          this.chatList.find(i => i.uid == _uid).aiContent = JSON.parse(
            _result
          );
          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.scrollBottom();
          // 这里保存对话
          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";
          //转化返回的回复流数据
          this.scrollBottom();
        }
      };
    },
    //保存消息
    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;
        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;
            } else {
              //没有对话记录
              this.loading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            resolve();
          });
      });
    },
    sendAiIdea(text) {
      if (this.loading) return this.$message.info("请稍等");
      this.send(text);
    },
    getWantSearch() {
      this.chatLoading = true;
      let _uuid = uuidv4();

      let _msg = `
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

## 任务
你的任务是根据“课程信息”，提供用户需要的搜索建议，将搜索建议的结果以有序列表的形式返回给用户。
## 课程信息
#### 课程标题：${this.courseDetail.title}
#### 分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
#### 学生年级：${
  this.courseDetail.classname ? this.courseDetail.classname : "无"
}

## 规则
输出结果基于“课程信息”，避免提供无关的信息。
搜索建议的结果符合伦理规范。
## 输出
输出应包括6个相关的搜索建议，每个搜索建议需要以问号的方式结束。
请一步步思考如何根据现有信息推送搜索建议，但是不需要输出搜索建议以外的内

## 输出格式
搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。输出JSON格式的

## Format example
[{"index": 1,"title": "垃圾分类标准","label": "不同国家的垃圾分类标准和方法？"},{"index": 2,"title":"可回收垃圾处理","label": "可回收垃圾的处理流程和再利用方法？"},{  "index": 3,  "title": "有害垃圾的影响",  "label": "有害垃圾对环境和人体健康的潜在影响？"},{  "index": 4,  "title": "垃圾分类标准",  "label": "不同国家的垃圾分类标准和方法？"},{  "index": 5,  "title": "可回收垃圾处理",  "label": "可回收垃圾的处理流程和再利用方法？"},{  "index": 6,  "title": "有害垃圾的影响",  "label": "有害垃圾对环境和人体健康的潜在影响？"}]
`;
      this.chatList.push({
        role: "user",
        content: `wanSearch`,
        uid: _uuid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.chatList.length,
        is_mind_map: false,
        loading: true
      });

      this.scrollBottom();

      // let params = {
      //   model: "gpt-3.5-turbo",
      //   temperature: 0,
      //   max_tokens: 4096,
      //   top_p: 1,
      //   frequency_penalty: 0,
      //   presence_penalty: 0,
      //   messages: [{ role: "user", content: _msg }],
      //   uid: _uuid,
      //   mind_map_question: ""
      // };
			let params = {
          assistant_id: '6063369f-289a-11ef-8bf4-12e77c4cb76b',
          userId: this.userid,
          message: [{ type: "text", text: _msg }],
          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;
					_data = _data.replaceAll("```json", "").replaceAll("```", "");
					const match = _data.match(/\[\s*{[^]*}\s*\]/)
					console.log(_data)
					console.log(match)
					this.chatList.find(i => i.uid == _uuid).aiContent =JSON.parse(match[0]);
					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;
          console.log(e);
        });
      // this.getWAntSearchContent(_uuid);
    },
		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);
        });
		},
    scrollBottom() {
      this.$nextTick(() => {
        this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
      });
    },
    initTaskList() {
      this.taskList = [];
      this.taskList = JSON.parse(JSON.stringify(this.navList));
      this.taskList.forEach(i1 => {
        i1.isOpen = true;
        i1.task.forEach(i2 => {
          i2.isOpen = true;
          i2.tool.forEach(i3 => {
            i3.isOpen = true;
          });
        });
      });
    },
    getWorkData() {
			if(this.workSum==0)return;
      let params = {
        cid: this.courseId,
        classid: this.tcid
      };
      this.userList = [];

      this.ajax
        .get(this.$store.state.api + "selectWorkBycidAi", params)
        .then(res => {
          let _data = res.data[0];
          console.log(_data);
          if (_data.length > 0) {
            this.userList = _data;
          }
        })
        .catch(e => {
          // this.$message.error()
          this.userList = [];
          console.log(e);
        });
    },
    lookStudentDetail(_data) {
      this.loading = true;
      let params = {
        cid: this.courseId,
        uid: _data.userid
      };
      this.ajax
        .get(this.$store.state.api + "selectWorkBycidAiByUid", params)
        .then(res => {
          let _result = res.data[0];
          this.atTagIndex = 2;
          this.loading = false;
          _result.forEach(i => {
            i.content = JSON.parse(i.content)[0];
          });
          this.lookStudentData = {
            userName: _data.username,
            list: _result ? _result : []
          };
          console.log(this.lookStudentData);
        });
    },
    sumUpStudent(_data) {
      let params = {
        cid: this.courseId,
        uid: _data.userid
      };
      this.loading = true;
      this.ajax
        .get(this.$store.state.api + "selectWorkBycidAiByUid", params)
        .then(res => {
          let _result = res.data[0];
          console.log(_result);
          console.log("👆");
          this.text += `${_data.username} 总结分析`;
          let _msg = ``;
          this.chatLoading = true;
          let _uuid = uuidv4();
          this.chatList.push({
            role: "user",
            content: `${this.text}`,
            uid: _uuid,
            AI: "AI",
            aiContent: "",
            oldContent: "",
            isShowSynchronization: false,
            filename: "",
            index: this.chatList.length,
            is_mind_map: false,
            loading: true
          });
          this.text = "";
          let _wordData = "";
          _result.forEach(i => {
            if (i.type == 3) {
              let content = JSON.parse(i.content)[0];
              return (_wordData += `问答题：\n题目：${content.answerTitle}\n学生回答：${content.answer}\n\n`);
            } else if (i.type == 8) {
              let content = JSON.parse(i.content)[0];
              _wordData += `选择题：\n`;
              let _json = content.testJson ? content.testJson.testJson : [];
              _json.forEach((i2, index2) => {
                _wordData += `题目：${i2.teststitle}\n选项：\n`;
                i2.checkList.forEach((item, index) => {
                  _wordData += `${index + 1}：${item.src ? item.src : item}\n`;
                });
                if (typeof i2.answer != "number") {
                  i2.answer.forEach(a => {
                    a += 1;
                  });
                  content.anwer[index2].forEach(b => {
                    b += 1;
                  });
                  _wordData += `答案：${i2.answer.join("、")}`;
                  _wordData += `学生选择：${content.anwer[index2].join(
                    "、"
                  )}\n\n`;
                } else {
                  _wordData += `答案：${i2.answer + 1}`;
                  _wordData += `学生选择：${content.anwer[index2] + 1}\n\n`;
                }
              });
              return _wordData;
            } else if (i.type == 2) {
              let content = JSON.parse(i.content)[0];
              _wordData += `问卷：${content.askJson.askTitle}\n`;
              let _json = content.askJson ? content.askJson.askJson : [];
              _json.forEach((i2, index2) => {
                _wordData += `题目：${i2.askstitle}\n选项：\n`;
                i2.checkList.forEach((item, index) => {
                  _wordData += `${index + 1}：${item.src ? item.src : item}\n`;
                });
                if (typeof content.anwer[index2] != "number") {
                  _wordData += `学生选择：${content.anwer[index2].join(
                    "、"
                  )}\n\n`;
                } else {
                  _wordData += `学生选择：${content.anwer[index2] + 1}\n\n`;
                }
              });
            }
          });
          // console.log(_wordData)
          // this.loading = false;
          // return this.chatLoading = false;
          _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.

## 目的
你是教师用户的课堂助手，你需要基于提供给你的课程相关信息以及学生的作业数据，就某些具体作业对全班学生进行总结分析。
---
## 定义
给你提供的课程发生在一个网络教学平台上，各元素存在以下的关系：课程⊇阶段⊇任务⊇工具。
【课程】：课程通常是一个完整的项目，有一个或多个阶段。
【阶段】：阶段表示课程的某一单独部分，包含一个或多个任务。
【任务】：任务是课程的基本单元，包含一个或多个工具，通常写明了学生要具体完成的事项。
【工具】：工具通常是指学生的作业（在课上要具体做的事情）。比如“提交作业”表示学生需要提交一份文件；又比如“问答”，表示学生需要输入一个回答；再比如“选择题”，表示学生需要根据题目要求选择正确的答案。工具中通常会包含学生的作业数据。
---    
## 工作流程与规则
    1. 了解信息。读取【工具总览表格】以及【工具详情：总体数据】中的内容，了解学生作业详情。
    2. 确保信息的完整性和可解读性。当面对不确定信息时，你应当积极提问。这一点适用于以下两种情况：
        2.1 当用户的提问需要你对课程、任务或工具拥有完整的信息、而你又缺乏部分信息时，你应当向客户询问你缺少的信息，再回答用户的提问。
        2.2 当你不理解某个工具的设置时（比如当你发现题目、选项的表述不完整或者有不符合中文表达规则的符号；又比如你发现缺乏必要的统计信息），你应当积极向用户询问。
        2.3 **例外情况**：在告知用户并征得同意的情况下，你可以忽视上述问题并执行后续流程。
    3. 进行总结。
        3.1 对表格信息进行简单总结。包括任务、阶段、工具及其内容。
        3.2 进行结果分析。对于每一个工具，都从全班的角度出发进行简单总结。
        3.3 进行错因分析。仅仅针对于某些错误率较高的题目，从全班的角度出发，进行错因分析。
    4. 提供扩展题目。针对错误的题目，向用户提供同等水平的题目以起到举一反三的练习效果。
    5. 回答问题。当用户询问你某个【工具】的具体信息，这部分信息通常将就是学生的作业。你需要简单总结该部分信息，并就用户的问题进行回答。
---
## 做题信息
学生名称：${_data.username}
${_wordData}

					`;

          console.log(_msg);
          // this.chatLoading = false;
          // return;
          let history = [];
          this.nowChatList.forEach(i => {
            if (i.content == "wanSearch") {
              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
              });
            }
          });

          // if (_msg) {
          history.push({ role: "user", content: _msg });
					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.ajax
            // .post("https://gpt4.cocorobo.cn/chat", params)
            // .post("https://claude3.cocorobo.cn/chat", params)
						.post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
            .then(res => {
              if (converter(res.data.FunctionResponse.result) == converter("发送成功")) {
                this.loading = false;
              } else {
                // this.$message.warning(res.data.FunctionResponse.result);
								console.log(res.data.FunctionResponse.result)
                this.chatLoading = false;
                this.loading = false;
              }
            })
            .catch(e => {
              console.log(e);
              this.chatLoading = false;
              this.loading = false;
            });
          this.saveUid = _uuid;
          // this.getAiContent(_uuid);
					this.getAtAuContent(_uuid)
        });
    },
    sumUpStudent2(_data) {
      this.text += `${_data.username} 作业分析`;
      let _msg = ``;
      this.chatLoading = true;
      let _uuid = uuidv4();
      this.chatList.push({
        role: "user",
        content: `${this.text}`,
        uid: _uuid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.chatList.length,
        is_mind_map: false,
        loading: true
      });
      this.text = "";
      let _wordData = "";

      let content = _data.content;
      if (_data.type == 3) {
        _wordData += `问答题：\n题目：${content.answerTitle}\n学生回答：${content.answer}\n\n`;
      } else if (_data.type == 8) {
        _wordData += `选择题：\n`;
        let _json = content.testJson ? content.testJson.testJson : [];
        _json.forEach((i2, index2) => {
          _wordData += `题目：${i2.teststitle}\n选项：\n`;
          i2.checkList.forEach((item, index) => {
            _wordData += `${index + 1}：${item.src ? item.src : item}\n`;
          });
          if (typeof i2.answer != "number") {
            i2.answer.forEach(a => {
              a += 1;
            });
            content.anwer[index2].forEach(b => {
              b += 1;
            });
            _wordData += `答案：${i2.answer.join("、")}`;
            _wordData += `学生选择：${content.anwer[index2].join("、")}\n\n`;
          } else {
            _wordData += `答案：${i2.answer + 1}`;
            _wordData += `学生选择：${content.anwer[index2] + 1}\n\n`;
          }
        });
        _wordData;
      } else if (_data.type == 2) {
        _wordData += `问卷：${content.askJson.askTitle}\n`;
        let _json = content.askJson ? content.askJson.askJson : [];
        _json.forEach((i2, index2) => {
          _wordData += `题目：${i2.askstitle}\n选项：\n`;
          i2.checkList.forEach((item, index) => {
            _wordData += `${index + 1}：${item.src ? item.src : item}\n`;
          });
          if (typeof content.anwer[index2] != "number") {
            _wordData += `学生选择：${content.anwer[index2].join("、")}\n\n`;
          } else {
            _wordData += `学生选择：${content.anwer[index2] + 1}\n\n`;
          }
        });
      }
      // if(_data.type==3){
      // 	_wordData+=`问答题：\n题目：${content.answerTitle}\n学生回答：${content.answer}\n`
      // }else if(_data.type==8){
      // 	_wordData+=`选择题：\n`
      // 	content.testJson.testJson.forEach((i2,index2)=>{
      // 		_wordData += `题目：${i2.teststitle}\n选项：\n`
      // 		i2.checkList.forEach((item,index)=>{
      // 			_wordData+=`${index+1}：${item}\n`
      // 		})
      // 		_wordData +=`答案：${i2.answer}`
      // 		_wordData +=`学生选择：${(content.anwer[index2])+1}\n`
      // 	})
      // }
      // console.log("👇👇👇")
      // console.log(_wordData)
      // this.chatLoading = false;
      // this.loading = false;
      // return

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

## 目的
你是教师用户的课堂助手，你需要基于提供给你的课程相关信息以及学生的作业数据，就某些具体作业对全班学生进行总结分析。
---
## 定义
给你提供的课程发生在一个网络教学平台上，各元素存在以下的关系：课程⊇阶段⊇任务⊇工具。
【课程】：课程通常是一个完整的项目，有一个或多个阶段。
【阶段】：阶段表示课程的某一单独部分，包含一个或多个任务。
【任务】：任务是课程的基本单元，包含一个或多个工具，通常写明了学生要具体完成的事项。
【工具】：工具通常是指学生的作业（在课上要具体做的事情）。比如“提交作业”表示学生需要提交一份文件；又比如“问答”，表示学生需要输入一个回答；再比如“选择题”，表示学生需要根据题目要求选择正确的答案。工具中通常会包含学生的作业数据。
---    
## 工作流程与规则
    1. 了解信息。读取【工具总览表格】以及【工具详情：总体数据】中的内容，了解学生作业详情。
    2. 确保信息的完整性和可解读性。当面对不确定信息时，你应当积极提问。这一点适用于以下两种情况：
        2.1 当用户的提问需要你对课程、任务或工具拥有完整的信息、而你又缺乏部分信息时，你应当向客户询问你缺少的信息，再回答用户的提问。
        2.2 当你不理解某个工具的设置时（比如当你发现题目、选项的表述不完整或者有不符合中文表达规则的符号；又比如你发现缺乏必要的统计信息），你应当积极向用户询问。
        2.3 **例外情况**：在告知用户并征得同意的情况下，你可以忽视上述问题并执行后续流程。
    3. 进行总结。
        3.1 对表格信息进行简单总结。包括任务、阶段、工具及其内容。
        3.2 进行结果分析。对于每一个工具，都从全班的角度出发进行简单总结。
        3.3 进行错因分析。仅仅针对于某些错误率较高的题目，从全班的角度出发，进行错因分析。
    4. 提供扩展题目。针对错误的题目，向用户提供同等水平的题目以起到举一反三的练习效果。
    5. 回答问题。当用户询问你某个【工具】的具体信息，这部分信息通常将就是学生的作业。你需要简单总结该部分信息，并就用户的问题进行回答。
---
## 做题信息
学生名称：${_data.username}
${_wordData}

					`;
      console.log(_msg);
      let history = [];
      this.nowChatList.forEach(i => {
        if (i.content == "wanSearch") {
          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
          });
        }
      });

      // if (_msg) {
      history.push({ role: "user", content: _msg });
			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.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
				.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);
						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)
    },
		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.getWantSearch();
    });
    this.nowChatList = [];
		this.sendType = 0;
    this.initTaskList();
    this.getWorkData();
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.checkboxCss{
  color: #fff;
  background-color: #76a7f5 !important;
}
.imgNumberBlock {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  /* padding: 5px 10px; */
}
.imgNumberBlock > .imgNumber {
  width: 18%;
  height: 30px;
  white-space: initial;
  background: rgba(224, 234, 251, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

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

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

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

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

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

.s_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;
  word-break: break-all;
}

.s_t_c_a_r_contentImage > span {
  display: block;
}

.s_t_c_a_r_contentImage > img {
  width: 45%;
  height: 125px;
  margin: 1% 1.5%;
  border-radius: 5px;
  cursor: pointer;
}

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

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

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

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

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

.aiCopy {
  position: absolute;
  right: 5px;
  bottom: 0%;
  /* transform: translate(0, -30%); */
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

.s_b_btnAreaTop{
	width: 100%;
  height: 35px;
	margin-bottom:5px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
	overflow: auto;
	background-color: yellow;
}

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

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

.s_b_ba_active{
	background-color: #3781FC;
	color: #fff;
}

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

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

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

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

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

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

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

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

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

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

.s_b_atBox {
  width: 95%;
  height: 450px;
  position: absolute;
  bottom: calc(100% - 30px);
  left: 0;
  max-height: 450px;
  box-sizing: border-box;
  border: solid 1px #d8d8d8;
  box-shadow: 0 4px 4px 0 #00000040;
  margin-left: 1.5%;
  background-color: #fff;
}

.s_b_at_tag {
  width: 100%;
  height: 35px;
  border-bottom: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
}

.s_b_at_tag > span {
  margin: 0 10px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.1s;
  position: relative;
}

.s_b_at_tag_active {
  color: #3681fc;
}

.s_b_at_tag_active::after {
  content: "";
  width: 100%;
  height: 3px;
  border-radius: 3px;
  bottom: -8px;
  left: 0px;
  background-color: #3681fc;
  position: absolute;
}

.s_b_at_list {
  width: 100%;
  max-height: calc(100% - 35px);
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
}

.s_b_at_l_top {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  border-bottom: solid 1px #e2f5fc;
}

.s_b_at_l_top > span:nth-child(1) {
  display: block;
  width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s_b_at_l_i_header {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  height: 30px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.s_b_at_l_i_header > span:nth-child(2) {
  display: block;
  width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s_b_at_l_top > hover {
  background-color: #3781fc;
  color: #fff;
}

.s_b_at_l_top > hover > .s_b_at_l_i_h_icon1 {
  background-image: url("../../../assets/icon/course/bDown2.png");
}

.s_b_at_l_i_header:hover {
  background-color: #3781fc;
  color: #fff;
}

.s_b_at_l_i_header:hover > .s_b_at_l_i_h_icon1 {
  background-image: url("../../../assets/icon/course/bDown2.png");
}

.s_b_at_l_i_header:hover > .s_b_at_l_i_h_icon2 {
  background-color: #fff;
}

.s_b_at_l_i_h_icon1 {
  min-width: 15px;
  min-height: 15px;
  background-image: url("../../../assets/icon/course/down.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* transform: rotate(90deg); */
  margin-right: 10px;
  transition: 0.2s;
}

.s_b_at_l_i_h_icon2 {
  min-width: 10px;
  min-height: 10px;
  background-color: #3681fc;
  border-radius: 50%;
  margin-right: 15px;
  transition: 0.2s;
}

.s_b_at_l_i_content {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 35px;
  height: 25;
  display: flex;
  align-items: center;
  margin: 5px 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.s_b_at_l_i_content:hover {
  background-color: #3781fc;
  color: #fff;
}

.s_b_ab_user {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border: solid 1px #3781fc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
}

.s_b_ab_u_name {
  width: 25%;
  max-width: 25%;
  box-sizing: border-box;
  margin: 0 20px;
  padding: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #3781fc;
  border-radius: 2px;
}

.s_b_ab_u_name > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-size: 14px;
  color: #3681fc;
}

.s_b_ab_u_message {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 10px;
  padding-right: 10px;
}

.s_b_ab_u_message > span {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  flex: 1;
}

.s_b_ab_u_message > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

.s_b_ab_u_btnArea {
  width: auto;
  height: auto;
  position: absolute;
  right: 0;
  top: 5px;
}

.s_b_ab_u_btnArea > span {
  box-sizing: border-box;
  color: #3681fc;
  border: solid 1px #3681fc;
  padding: 2px;
  margin-left: 2px;
  font-size: 14px;
  cursor: pointer;
}

.s_b_ab_u_btnArea > span:hover {
  color: #fff;
  border: solid 1px #fff;
  background-color: #3681fc;
}

.s_b_at_studentDetail {
  width: 100%;
  height: 25px;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
}

.s_b_at_studentDetail > img {
  width: 20px;
  height: 15px;
  margin-right: 10px;
  cursor: pointer;
}

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

.s_b_at_studentList {
  width: 100%;
  height: calc(100% - 25px);
  overflow: auto;
}

.s_b_at_sl_item {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: solid 1px #36a9fc;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.s_b_at_sl_item > .s_b_at_sl_message:nth-child(n + 1) {
  margin-top: 10px;
}

.s_b_at_sl_phase {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
}

.s_b_at_sl_message {
  font-weight: bold;
  margin: 10px;
}

.s_b_at_sl_message > div {
  display: flex;
  width: 100%;
  margin: 10px;
}

.s_b_at_sl_message > div > span {
  width: calc(100% - 50px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
.s_b_at_sl_message > div > span > div {
  margin: 5px 0;
  white-space: wrap;
}

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