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

<template>
  <div class="search">
    <div class="s_top" ref="chatRef" v-if="cardType == 0">
      <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">
						<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_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 && !item.loading"
              class="aiCopy"
            >
              <img
                @click="onCopy(item.aiContent)"
                style="width: 30px;"
                src="../../../assets/icon/course/copyTxt.png"
                alt=""
              />
              <img
                @click.stop="aiTalkAll(item)"
                v-if="aiTalkUid == item.uid && aiIsTalk"
                style="width: 15px;margin-bottom:7px;"
                :src="require('../../../assets/icon/course/megaphone.svg')"
              />
              <img
                @click.stop="aiTalkAll(item)"
                v-else
                style="width: 15px;margin-bottom:7px;"
                :src="require('../../../assets/icon/course/megaphone3.svg')"
              />
              <img
                v-if="chatList.length - 2 == index"
                @click.stop="refresh(item)"
                style="width: 15px;margin-bottom:7px;"
                :src="require('../../../assets/icon/course/refresh.svg')"
              />
            </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" v-if="cardType == 0">
      <div class="s_b_btnAreaTop">
        <div class="s_b_bat_left">
          <el-tooltip
            class="item"
            effect="dark"
            content="清空聊天记录"
            placement="top"
          >
            <img
              :src="require('../../../assets/icon/course/clean.svg')"
              @click.stop="clear()"
            />
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            :content="openMegaphone ? '关闭喇叭' : '打开喇叭'"
            placement="top"
          >
            <img
              v-if="!openMegaphone"
              :src="require('../../../assets/icon/course/megaphone2.svg')"
              @click.stop="$parent.changeMegaphone()"
            />
            <img
              v-else
              :src="require('../../../assets/icon/course/megaphone.svg')"
              @click.stop="$parent.changeMegaphone()"
            />
          </el-tooltip>
        </div>
        <div class="s_b_bat_right">
          <!-- <img :src="require('../../../assets/icon/course/bulb.svg')"> -->
          <img :src="require('../../../assets/icon/course/bulb2.svg')" />
        </div>
      </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.stop="choiceRole()">
            <img
              style="width: 20px;"
              src="../../../assets/icon/course/role.png"
              alt=""
            />
            选择智能体
          </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 || sendFnType == 1"
            v-loading="loading || chatLoading"
            @keyup.enter.native="send()"
            :placeholder="
              sendFnType == 0
                ? '请在此输入您想了解的内容'
                : '请点击录音按钮开始录音'
            "
            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="voice_or_keyboard">
          <el-tooltip
            v-if="sendFnType == 0"
            class="item"
            effect="dark"
            content="使用语音"
            placement="top"
          >
            <img
              :src="require('../../../assets/icon/course/voice.svg')"
              @click.stop="changeFnType(1)"
            />
          </el-tooltip>

          <el-tooltip
            v-if="sendFnType == 1"
            class="item"
            effect="dark"
            content="使用键盘"
            placement="top"
          >
            <img
              :src="require('../../../assets/icon/course/keyboard.svg')"
              @click.stop="changeFnType(0)"
            />
          </el-tooltip>
        </div>
        <div class="s_b_btn" @click="send()" v-if="sendFnType == 0">
          <span v-if="!loading && !chatLoading"></span>
          <div v-else @click.stop="stopSend()">停止</div>
        </div>

        <div class="s_b_btn" v-if="sendFnType == 1">
          <img
            v-if="!loading && !chatLoading && !isTalk"
            @click.stop="talk()"
            :src="require('../../../assets/icon/course/voice2.svg')"
          />
          <img
            style="width:50px;height:50px"
            v-else-if="!loading && !chatLoading && isTalk"
            @click.stop="stopTalk()"
            :src="require('../../../assets/icon/course/isTape.svg')"
          />
          <div v-else @click.stop="stopSend()">停止</div>
        </div>
      </div>
    </div>

    <div class="choiceTopArea" v-if="cardType == 1">
      <div class="choiceTop">
        <div class="choiceRoleHeader">
          <div>切换角色：</div>
          <span>您希望以下哪个角色回答您的问题，请选择：</span>
        </div>
        <div class="choiceSelect">
          <el-button
            class="option"
            :style="{
              background: sortOption == 0 ? '#36A9FC' : '',
              color: sortOption == 0 ? '#fff' : ''
            }"
            @click="optBtn(0)"
            plain
            >我的</el-button
          >
          <el-button
            class="option"
            :style="{
              background: sortOption == 1 ? '#36A9FC' : '',
              color: sortOption == 1 ? '#fff' : ''
            }"
            @click="optBtn(1)"
            plain
            >社区</el-button
          >
        </div>
        <div
          class="characterBlock"
          v-if="sortOption == 0"
          v-for="(item, index) in roleList"
          :key="item.id"
          @click.stop="choseRole(item)"
        >
          <div class="imgLeft">
            <div class="img">
              <img style="width: 100%;height: 100%;" :src="item.avatar" />
            </div>
          </div>
          <div class="txtRight">
            <div class="bir">{{ item.assistantName }}</div>
            <div
              :style="{
                color: '#fff',
                display:
                  choseRoleItem.assistant_id == item.assistant_id
                    ? 'block'
                    : 'none'
              }"
            >
              已选择
            </div>
          </div>
        </div>
        <div
          class="characterBlock"
          v-if="sortOption == 1"
          v-for="(item, index) in roleList2"
          :key="item.id"
          @click.stop="choseRole(item)"
        >
          <div class="imgLeft">
            <div class="img">
              <img
                style="width: 100%;height: 100%;"
                :src="
                  item.headUrl
                    ? item.headUrl
                    : require('../../../assets/icon/course/ai.png')
                "
              />
            </div>
          </div>
          <div class="txtRight">
            <div class="bir">{{ item.assistantName }}</div>
            <div
              :style="{
                color: '#fff',
                display:
                  choseRoleItem.assistant_id == item.assistant_id
                    ? 'block'
                    : 'none'
              }"
            >
              已选择
            </div>
          </div>
        </div>
      </div>
      <div class="choiceBottom">
        <el-button class="cb_btn" size="mini" @click="noChangeRole()"
          >取消</el-button
        >
        <el-button
          class="cb_btn"
          size="mini"
          type="primary"
          @click="changeRole()"
          >确定</el-button
        >
      </div>
    </div>
    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
      ref="iiframe"
      v-show="false"
    ></iframe>

    <!-- 文字转语音-->
    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index1.html"
      ref="iiframe2"
      v-show="false"
    ></iframe>
  </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: () => []
    },
    openMegaphone: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      text: "村上春树",
      ppage: 1,
      sendType: 0,
      sendFnType: 0,
      isTalk: false,
      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))),
      aiTalkList: [],
      aiIsTalk: false,
      aiTalkUid: "",
      choseRoleItem: {},
      cardType: 0,
      roleList: [],
      sortOption: 0 //切换角色 0我的 1 社区
    };
  },
  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: {
    refresh(item) {
      this.send(item.content);
    },
    changeFnType(newValue) {
      if (this.isTalk) return this.$message.info("请先停止录音");
      this.sendFnType = newValue;
    },
    chooseType(type) {
      if (this.sendType == type) {
        this.sendType = 0;
      } else {
        this.sendType = type;
      }
    },
    talk() {
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document.getElementById(
        "languageOptions"
      ).selectedIndex = 2; //普通话
      iiframe.contentWindow.testdoContinuousPronunciationAssessment();
      this.isTalk = true;
      iiframe.contentWindow.onRecognizedResult = e => {
        let _msg = e.privText;
        console.log(_msg);
        if (_msg) this.text += _msg;
      };
    },
    stopTalk() {
      if (!this.isTalk) return this.$message.info("请先开始录音");
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document
        .getElementById("scenarioStopButton")
        .click();
      iiframe.contentWindow.onSessionStopped = (s, e) => {
        this.isTalk = false;
        this.send();
      };
    },
    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 = [];
      this.$confirm("确定清空聊天记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(_ => {
          this.loading = true;
          let params = {
            user_id: this.userid,
						id:"602def61-005d-11ee-91d8-005056b8q12w",
            session_name: `${this.courseId}-studyStudent-md`
          };

          this.ajax
            .post("https://gpt4.cocorobo.cn/delete_park_session", params)
            .then(res => {
              this.chatList = [];
							this.stopSend();
              this.$message.success("清除聊天记录成功");
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
              this.$message.error("清除聊天记录失败");
            });
        })
        .catch(_ => {});
    },
    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();
    },
    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: this.choseRoleItem?this.choseRoleItem.headUrl:"",
        index: this.chatList.length,
        is_mind_map: false,
        loading: true
      });
      this.scrollBottom();
      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 = {
          n: 1,
          prompt: _text,
          quality: "standard",
          size: "1024x1024",
          style: "natural"
        };
        // 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://gpt4.cocorobo.cn/getImage", params)
          .then(res => {
            let data = res.data.FunctionResponse;
            // console.log('res',res.data.FunctionResponse.result);
            let _result = [];
            if (!data.image_url_list.length) {
              this.chatLoading = false;
              this.chatList.pop();
              this.chatList.pop();
              return this.$message.error("生成图片失败");
            }
            data.image_url_list.forEach(i => {
              _result.push({
                image: i
              });
            });

            this.chatList.find(i => i.uid == _uuid).aiContent = JSON.stringify(
              _result
            );
            this.chatList.find(i => i.uid == _uuid).loading = false;
            console.log(this.chatList.find(i => i.uid == _uuid).aiContent);
            this.chatLoading = false;
            this.insertChat(_uuid);
            this.scrollBottom();
          })
          .catch(e => {
            this.chatLoading = false;
            this.chatList.pop();
            this.chatList.pop();
            this.$message.error("生成失败");
          });
        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
            );
            console.log("👇");
            console.log(this.chatList.find(i => i.uid == _uuid).aiContent);
            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;
      }
      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: this.choseRoleItem?this.choseRoleItem.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 (
            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;
      let _talkText = "";
      // 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("_", "");
          if (this.openMegaphone && this.aiTalkUid == _uid) {
            if (_talkText != "") {
              let _resultText = this.removeMarkdown(_talkText);
              this.aiTalkList.push(_resultText);
              _talkText = "";
              if (!this.aiIsTalk) this.aiTalk(1);
            }
          }
          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+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
            _talkText += _text.replace(/^\n+/, "");
          } else {
            _allText += _text;
            _talkText += _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;
          }
          if (this.openMegaphone && /[，。：；？！）]/.test(_talkText)) {
            let _resultText = this.removeMarkdown(_talkText);
            if (this.aiTalkUid != _uid) {
              this.aiTalkList = [];
            }
            this.aiTalkList.push(_resultText);
            _talkText = "";
            if (this.aiTalkUid != _uid) {
              this.aiTalkUid = _uid;
              this.aiTalk(0);
            } else if (!this.aiIsTalk) {
              this.aiTalk(1);
            }
          }
          // 处理流数据
        }
      };
    },
    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();
    },
    removeMarkdown(text) {
      return text
        .replace(/[#*_~`>+\-]/g, "") // 移除 #、*、_、~、`、>、+、- 符号
        .replace(/!\[.*?\]\(.*?\)/g, "") // 移除图片
        .replace(/\[.*?\]\(.*?\)/g, "") // 移除链接
        .replace(/```[\s\S]*?```/g, "") // 移除代码块（不使用 s 标志）
        .replace(/`[^`]*`/g, "") // 移除行内代码
        .replace(/\d+\./g, "") // 移除有序列表
        .replace(/^\s*[-*+]\s+/gm, "") // 移除无序列表
        .replace(/\s+/g, " ") // 将多个空白字符替换为一个空格
        .trim(); // 去除字符串两端的空白字符
    },
    aiTalk(type = 0) {
      //0 新的  1继续
      if (type == 0 && this.aiIsTalk) {
        let _talkTextIiframe2 = this.$refs.iiframe2;
        try {
          _talkTextIiframe2.contentWindow.pausesynthesizer();
          _talkTextIiframe2.contentWindow.closesynthesizer();
          this.aiIsTalk = false;
          if (this.aiTalkList.length) this.aiTalk(0);
          else this.aiTalkUid = "";
        } catch (error) {
          // console.log("error")
          this.aiIsTalk = false;
          if (this.aiTalkList.length) this.aiTalk(0);
          else this.aiTalkUid = "";
        }
      } else {
        let _text = this.aiTalkList.shift();
        let _talkTextIiframe2 = this.$refs.iiframe2;
        if (_text) {
          this.aiIsTalk = true;
          // console.log("👇说👇");
          // console.log(_text);
          _talkTextIiframe2.contentWindow.texttospeech(
            _text,
            () => {
              this.aiTalk(1);
            },
            () => {
              this.aiTalk(0);
            }
          );
        } else {
          try {
            _talkTextIiframe2.contentWindow.closesynthesizer();
          } catch (error) {
            return;
          }
        }
      }

      // if(_text){
      // 	this.aiIsTalk = true;
      // }
    },
    aiTalkAll(item) {
      if (this.aiTalkUid == item.uid && this.aiIsTalk) {
        try {
          this.aiTalkList = [];
          let _talkTextIiframe2 = this.$refs.iiframe2;
          _talkTextIiframe2.contentWindow.pausesynthesizer();
          _talkTextIiframe2.contentWindow.closesynthesizer();
          this.aiIsTalk = false;
        } catch (error) {
          this.aiTalkList = [];
          this.aiIsTalk = false;
        }
      } else {
        let _resultText = this.removeMarkdown(item.aiContent);
        this.aiTalkUid = item.uid;
        this.aiTalkList = [];
        this.aiTalkList.push(_resultText);
        this.aiTalk(0);
      }
    },
    choseRole(item) {
      this.choseRoleItem = item;
      console.log("选择角色", this.choseRoleItem);
			this.scrollBottom();
    },
    noChangeRole() {
      this.cardType = 0;
      this.choseRoleItem = null;
			this.scrollBottom();
    },
    changeRole() {
      this.cardType = 0;
      if (this.choseRoleItem.assistant_id) {
        // this.chatList = [];
        this.nowChatList = [];
        let _uuid = uuidv4();
        this.chatList.push({
          role: "user",
          content: `您好，${this.choseRoleItem.assistantName}`,
          uid: _uuid,
          AI: "AI",
          aiContent: this.choseRoleItem.prologue
            ? this.choseRoleItem.prologue
            : "您好，有什么需要我帮忙的吗？",
          oldContent: "",
          isShowSynchronization: false,
          filename: this.choseRoleItem.headUrl,
          index: this.chatList.length,
          is_mind_map: false,
          loading: false
        });

        this.scrollBottom();
      }
    },
    optBtn(val) {
      this.sortOption = val;
    },
    getRoleList() {
      this.roleList = [];
      let params = {
        userId: this.userid
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/get_ai_agent_assistant_list", params)
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data.length == 0) return;
          if (_data) {
            this.roleList = JSON.parse(_data);
          }
        })
        .catch(e => {
          console.log("获取角色列表失败");
          this.roleList = [];
        });
    },
    getPublicRoleList() {
      this.roleList2 = [];
      let params = {
        userId: this.userid,
        // organizeid: this.org,
        organizeid: "45facc0a-1211-11ec-80ad-005056b86db5"
      };
      this.ajax
        .post(
          "https://gpt4.cocorobo.cn/get_ai_agent_assistant_share_list",
          params
        )
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data.length == 0) return;
          if (_data) {
            this.roleList2 = JSON.parse(_data);
          }
        })
        .catch(e => {
          this.roleList2 = [];
          console.log("获取公共角色失败", e);
        });
    },
    choiceRole() {
      if (this.loading) return this.$message.info("请稍等");
      this.cardType = 1;
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.scrollBottom();
      this.getWantSearch();
    });
    this.nowChatList = [];
    this.sendType = 0;
    this.initTaskList();
    this.getWorkData();
    this.getPublicRoleList();
    this.getRoleList();
  }
};
</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% - 130px);
  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%); */
}

.aiCopy > img {
  margin-right: 5px;
  cursor: pointer;
}

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

.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>img{
	width: 35px;
  height: 35px;
	border-radius: 50%;
}

.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: 130px;
  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;
  display: flex;
  justify-content: space-between;
}

.s_b_bat_left {
  width: auto;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.s_b_bat_left > img {
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin-right: 5px;
}

.s_b_bat_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.s_b_bat_right > img {
  width: 25px;
  height: 25px;
  /* cursor: pointer; */
  margin-right: 5px;
}

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

.voice_or_keyboard {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}

.voice_or_keyboard > img {
  width: 100%;
  height: 100%;
  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_btn > img {
  width: 30px;
  height: 30px;
}

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

.choiceTopArea {
  width: 100%;
  height: 100%;
}

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

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

.cb_btn {
  margin: 0 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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