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

<template>
  <div class="ai_body" v-loading="loading">
    <div class="ai_body_dialog" ref="chatDialog">
      <div class="dialog_content" v-for="item in array" :key="item.uid">
        <div v-if="item.content" style="margin-left: auto;">
          <div
            class="ai_btn_box"
            style="margin-left: auto;"
            v-if="!pan(item.content).length"
          >
            <img
              src="../../../assets/icon/course/pasete.png"
              @click="onCopy(item.content)"
            />
          </div>
          <div class="content content2" v-html="item.content"></div>
          <div class="role">
            <img src="../../../assets/icon/new/role2.png" />
          </div>
        </div>
        <div
          style="margin-top:20px;margin-bottom:20px ; margin-right: auto;"
          v-if="item.aiContent || item.loading"
        >
          <div class="role">
            <img
              :src="
                item.fileid
                  ? item.fileid
                  : require('../../../assets/icon/new/role1.png')
              "
            />
          </div>
          <div
            element-loading-background="#f6f9ff"
            :style="{
              minHeight: item.loading ? '50px' : 'unset',
              minWidth: item.loading ? '50px' : 'unset'
            }"
            class="content"
            v-loading="item.loading"
          >
            <span class="vditor-reset" v-html="item.aiContent"></span>
            <span class="createTime" v-text="item.createtime"></span>
          </div>
          <div
            class="ai_btn_box"
            v-if="!pan(item.aiContent).length && !item.loading"
          >
            <img
              src="../../../assets/icon/course/pasete.png"
              @click="onCopy(item.aiContent)"
            />
          </div>
          <div class="ai_tips_btn_box" v-if="chatTypeArray.includes(item.chatType) && !item.loading">
            <!-- @click="quickAdd(item.addedData, pr)" -->
            <span v-if="item.chatType == 'start'" @click="quickAdd('start')">{{ lang.ssAddTopic }}</span>
            <span v-if="item.chatType == 'recordCourseD'" @click="setCourseText(item.aiContent)">{{ lang.ssAdopt }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="ai_body_select" v-if="false">
      <div class="checkBox" v-if="checkBool">
        <div class="task">
          <div class="title">{{ lang.ssSelectOptTask }}</div>
          <div class="content">
            <div class="span" @click="addAllTask()">
              <div class="check">
                <img
                  :src="checkImg"
                  alt=""
                  v-if="checkArray.length !== course.length"
                />
                <img :src="checkIsImg" alt="" v-else />
              </div>
              <span>{{ lang.ssSelectAll }}</span>
            </div>
            <div
              class="span"
              v-for="(item, index) in course"
              :key="index"
              @click="addTask(index)"
            >
              <div class="check">
                <img
                  :src="checkImg"
                  alt=""
                  v-if="checkArray.indexOf(index) === -1"
                />
                <img :src="checkIsImg" alt="" v-else />
              </div>
              <span>{{ lang.ssTask }}{{ index + 1 }}</span>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="title">{{ lang.ssSelectOptPart }}</div>
          <div class="content">
            <div
              class="span"
              v-for="(item, index) in partArray"
              :key="index"
              :class="{ active: part == item.name }"
              @click="checkPart(item.name)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <span
        class="check"
        :class="{ isCheck: checkBool }"
        v-if="!checkArray.length && !part"
        @click="checkBool = !checkBool"
        >{{ lang.ssSelectOptContent }}</span
      >
      <span
        class="check"
        :class="{ isCheck: checkBool }"
        @click="checkBool = !checkBool"
        v-else
      >
        <el-tooltip :content="taskName" placement="top" effect="dark">
          <!-- content to trigger tooltip here -->
          <span>{{ taskName }}</span>
        </el-tooltip>
      </span>
    </div>
    <div class="ai_body_input">
      <div class="ai_b_i_btnArea">
        <span class="clear" @click.stop="clear()">
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.5 3.125C2.5 2.77982 2.77982 2.5 3.125 2.5H16.875C17.2202 2.5 17.5 2.77982 17.5 3.125V8.02715C17.5 8.37233 17.2202 8.65215 16.875 8.65215C16.5298 8.65215 16.25 8.37233 16.25 8.02715V3.75H3.75V16.25H8.125C8.47018 16.25 8.75 16.5298 8.75 16.875C8.75 17.2202 8.47018 17.5 8.125 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V3.125Z"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.625 6.1521C5.625 5.80692 5.90482 5.5271 6.25 5.5271H13.125C13.4702 5.5271 13.75 5.80692 13.75 6.1521C13.75 6.49728 13.4702 6.7771 13.125 6.7771H6.25C5.90482 6.7771 5.625 6.49728 5.625 6.1521Z"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.625 9.2771C5.625 8.93192 5.90482 8.6521 6.25 8.6521H9.37496C9.72014 8.6521 9.99996 8.93192 9.99996 9.2771C9.99996 9.62228 9.72014 9.9021 9.37496 9.9021H6.25C5.90482 9.9021 5.625 9.62228 5.625 9.2771Z"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12.465 11.507L15.9141 14.9048C16.1279 14.5365 16.25 14.1088 16.25 13.6521C16.25 12.2714 15.1307 11.1521 13.75 11.1521C13.2799 11.1521 12.8406 11.2815 12.465 11.507ZM15.0374 15.7957L11.5873 12.397C11.3726 12.7659 11.25 13.1944 11.25 13.6521C11.25 15.0328 12.3693 16.1521 13.75 16.1521C14.2211 16.1521 14.6613 16.0222 15.0374 15.7957ZM11.0797 11.0192C11.759 10.3303 12.7051 9.9021 13.75 9.9021C15.8211 9.9021 17.5 11.581 17.5 13.6521C17.5 14.6767 17.0882 15.6064 16.4226 16.2827C15.7431 16.9729 14.7961 17.4021 13.75 17.4021C11.6789 17.4021 10 15.7232 10 13.6521C10 12.6263 10.4127 11.6957 11.0797 11.0192Z"
            />
          </svg>
          <span>{{ lang.ssClearScreen }}</span>
        </span>
        <!-- <span class="clear" @click.stop="quickAdd('more')">
          <span>更多课程灵感</span>
        </span> -->
        <span class="clear" @click.stop="quickAdd('recordCheckJindu')">
          <span>{{ lang.ssSummaryDiscuss }}</span>
        </span>
        <span class="clear" @click.stop="quickAdd('recordCourseD')">
          <span>{{ lang.ssSummaryCourse }}</span>
        </span>
        <!-- <div style="margin-left: auto;">
          <el-switch v-model="continuous"></el-switch>
          <span @click.stop="continuous = !continuous">连续对话</span>
        </div> -->
      </div>

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

      <textarea
        class="ai_body_input_textarea"
        @keydown="textareaKeydown"
        :disabled="isVoice"
        ref="textareaRef"
        v-model.trim="courseText"
        :placeholder="
          isVoice
            ? isTalk
              ? ''
              : lang.ssClickStartRec
            : lang.ssEnterWantKnow
        "
      ></textarea>

      <span
        class="c_voiceBtn"
        v-if="!courseText && !isVoice"
        @click.stop="changeVoice(true)"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.4583 14.0308C13.8381 14.0308 15.7551 12.0651 15.7551 9.62496V6.23588C15.7551 3.79574 13.8381 1.83008 11.4583 1.83008C9.07845 1.83008 7.16138 3.79574 7.16138 6.23588V9.62496C7.16138 12.0651 9.07845 14.0308 11.4583 14.0308ZM8.4835 6.23588C8.4835 4.54134 9.80561 3.18571 11.4583 3.18571C13.1109 3.18571 14.433 4.54134 14.433 6.23588V9.62496C14.433 11.3195 13.1109 12.6751 11.4583 12.6751C9.80561 12.6751 8.4835 11.3195 8.4835 9.62496V6.23588ZM18.3333 10.6405C18.3333 10.2677 18.0358 9.96264 17.6722 9.96264C17.3417 9.96264 17.0442 10.2338 17.0111 10.5727C16.5484 13.3178 14.2347 15.3852 11.4583 15.3852C8.68181 15.3852 6.36811 13.3178 5.90537 10.5727C5.87231 10.2338 5.57484 9.96264 5.24431 9.96264C4.88073 9.96264 4.58325 10.2677 4.58325 10.6405V10.7421C5.1121 13.9279 7.65717 16.4019 10.7972 16.7069V19.635H7.93254C7.54315 19.635 7.22748 19.9587 7.22748 20.358C7.22748 20.7572 7.54315 21.0809 7.93254 21.0809H14.9832C15.3726 21.0809 15.6883 20.7572 15.6883 20.358C15.6883 19.9587 15.3726 19.635 14.9832 19.635H12.1193V16.7069C15.2593 16.4019 17.8044 13.9279 18.3002 10.776C18.3002 10.7591 18.3085 10.7337 18.3167 10.7082L18.3167 10.7082L18.3167 10.7082C18.325 10.6828 18.3333 10.6574 18.3333 10.6405Z"
            fill="black"
            fill-opacity="0.9"
          />
        </svg>
      </span>

      <span
        class="c_voiceBtn"
        :style="{right: faloading ? '85px' : '70px'}"
        v-if="!courseText && isVoice && !isTalk"
        @click.stop="changeVoice(false)"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M2.75 3.4375C2.75 3.0578 3.0578 2.75 3.4375 2.75H18.5625C18.9422 2.75 19.25 3.0578 19.25 3.4375V18.5625C19.25 18.9422 18.9422 19.25 18.5625 19.25H3.4375C3.0578 19.25 2.75 18.9422 2.75 18.5625V3.4375ZM4.125 4.125V17.875H17.875V4.125H4.125Z"
            fill="black"
            fill-opacity="0.9"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M6.875 6.875C6.875 6.4953 7.1828 6.1875 7.5625 6.1875H14.4375C14.8172 6.1875 15.125 6.4953 15.125 6.875V8.25C15.125 8.6297 14.8172 8.9375 14.4375 8.9375C14.0578 8.9375 13.75 8.6297 13.75 8.25V7.5625H11.6875V14.4375H12.375C12.7547 14.4375 13.0625 14.7453 13.0625 15.125C13.0625 15.5047 12.7547 15.8125 12.375 15.8125H9.625C9.2453 15.8125 8.9375 15.5047 8.9375 15.125C8.9375 14.7453 9.2453 14.4375 9.625 14.4375H10.3125V7.5625H8.25V8.25C8.25 8.6297 7.9422 8.9375 7.5625 8.9375C7.1828 8.9375 6.875 8.6297 6.875 8.25V6.875Z"
            fill="black"
            fill-opacity="0.9"
          />
        </svg>
      </span>

      <div
        :class="[
          'c_pub_button_confirm',
          courseText ? '' : 'c_pub_button_confirmDisabled'
        ]"
        v-if="!faloading && !isVoice"
        @click="addContent"
      >
        {{ lang.ssSend }}
      </div>

      <div
        :class="['c_pub_button_confirmVoice']"
        v-if="!faloading && isVoice && !isTalk"
        @click="startVoice"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.4583 14.0308C13.8381 14.0308 15.7551 12.0651 15.7551 9.62496V6.23588C15.7551 3.79574 13.8381 1.83008 11.4583 1.83008C9.07845 1.83008 7.16138 3.79574 7.16138 6.23588V9.62496C7.16138 12.0651 9.07845 14.0308 11.4583 14.0308ZM8.4835 6.23588C8.4835 4.54134 9.80561 3.18571 11.4583 3.18571C13.1109 3.18571 14.433 4.54134 14.433 6.23588V9.62496C14.433 11.3195 13.1109 12.6751 11.4583 12.6751C9.80561 12.6751 8.4835 11.3195 8.4835 9.62496V6.23588ZM18.3333 10.6405C18.3333 10.2677 18.0358 9.96264 17.6722 9.96264C17.3417 9.96264 17.0442 10.2338 17.0111 10.5727C16.5484 13.3178 14.2347 15.3852 11.4583 15.3852C8.68181 15.3852 6.36811 13.3178 5.90537 10.5727C5.87231 10.2338 5.57484 9.96264 5.24431 9.96264C4.88073 9.96264 4.58325 10.2677 4.58325 10.6405V10.7421C5.1121 13.9279 7.65717 16.4019 10.7972 16.7069V19.635H7.93254C7.54315 19.635 7.22748 19.9587 7.22748 20.358C7.22748 20.7572 7.54315 21.0809 7.93254 21.0809H14.9832C15.3726 21.0809 15.6883 20.7572 15.6883 20.358C15.6883 19.9587 15.3726 19.635 14.9832 19.635H12.1193V16.7069C15.2593 16.4019 17.8044 13.9279 18.3002 10.776C18.3002 10.7591 18.3085 10.7337 18.3167 10.7082L18.3167 10.7082L18.3167 10.7082C18.325 10.6828 18.3333 10.6574 18.3333 10.6405Z"
            fill-opacity="0.9"
          />
        </svg>
      </div>

      <div
        :class="['c_pub_button_StopConfirmVoice']"
        v-if="!faloading && isVoice && isTalk"
        @click="stopVoice"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11 19.25C6.4625 19.25 2.75 15.5375 2.75 11C2.75 6.4625 6.4625 2.75 11 2.75C15.5375 2.75 19.25 6.4625 19.25 11C19.25 15.5375 15.5375 19.25 11 19.25ZM11 17.1875C14.4031 17.1875 17.1875 14.4031 17.1875 11C17.1875 7.59687 14.4031 4.8125 11 4.8125C7.59687 4.8125 4.8125 7.59687 4.8125 11C4.8125 14.4031 7.59687 17.1875 11 17.1875Z"
            fill="#EE3E3E"
          />
          <path
            d="M12.75 8.25H9.25C8.69772 8.25 8.25 8.69772 8.25 9.25V12.75C8.25 13.3023 8.69772 13.75 9.25 13.75H12.75C13.3023 13.75 13.75 13.3023 13.75 12.75V9.25C13.75 8.69772 13.3023 8.25 12.75 8.25Z"
            fill="#EE3E3E"
          />
        </svg>
      </div>

      <div v-if="!faloading && isVoice"></div>
      <div class="c_pub_button_confirm" v-if="faloading" @click="stopSend">
        {{ lang.ssTerminate }}
      </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>
    <!-- <div class="ai_body_input">
      <textarea
        style="padding-right: 85px;"
        rows="3"
        @keyup.enter="addContent"
        class="binfo_input binfo_textarea"
        cols
        v-model.trim="courseText"
        placeholder="在此输入您想了解的内容"
      ></textarea>
      <div
        class="c_pub_button_confirm"
        v-if="!loading && courseText"
        @click="addContent"
      >
        发送
      </div>
      <div class="c_pub_button_confirm" @click="promptTit" v-else>发送</div>
    </div> -->
  </div>
</template>

<script>
import checkImg from "../../../assets/icon/sourceFile/check.png";
import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
import TurndownService from "turndown";

const OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
  from: "cn",
  to: "hk"
});

export default {
  props: {
    courseId: {
      type: String,
      default: ""
    },
    courseText2: {
      type: String,
      default: ""
    },
    fileids: {
      type: Array,
      default: []
    },
    languageSetting: {
      type: Number,
      default: 0
    },
    viedoText: {
      type: String,
      default: ''
    },
    agentid: {
      type: String,
    },
    recordstart: {
      type: String,
    },
    recordCheckJindu: {
      type: String,
    },
    recordCourseD: {
      type: String,
    },
    courseInfo: {
      type: String
    }
  },
  data() {
    return {
      array: [],
      jArray: [],
      courseText: "",
      checkImg: checkImg,
      checkIsImg: checkIsImg,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      checkArray: [],
      course: [],
      partArray: [],
      part: "",
      checkBool: false,
      loading: false,
      textareaHeight: 50,
      publicRoleList: [],
      roleList: [],
      textList: [
        {
          title: "项目式学习",
          dataList: [
            "请给我一些学生开展项目式学习可以使用的主题或问题参考，请说出学生将要解决的问题，以及学生要经历怎样的学习活动。",
            "请将一个关于生态保护项目的项目式学习展开描述，你需要描述学生如何解决这个问题，你需要至少写出四个活动，这些活动需要按照前后逻辑关系排列。",
            "请对驱动问题为“如何为学校建造一个富有特色的花坛？”的项目式学习进行子问题拆解，至少拆解为5个子问题，并根据子问题对应写出各环节的主要活动。"
          ]
        },
        {
          title: "教学评价",
          dataList: [
            "如果需要给学生的社区服务进行评价，给出评价维度和至少3个等级的表现描述。",
            "为6年级学生设计一份关于梧桐山研究报告的评估任务表，并给出参考的报告流程，至少包含8个步骤，并包括地图、图片和至少300个词。",
            "创建一个给5年级学生使用的课堂小测试，包含5道多选题，评价学生对于太阳能这个概念的理解。你需要给出题目和正确答案。"
          ]
        },
        {
          title: "教学设计",
          dataList: [
            "如果需要5年级学生感受“移步换景”的景观写作手法，你有什么合适的阅读材料推荐？你需要给出材料名称，以及材料的哪部分内容。",
            "设计一个针对8年级学生且关于人类迁徙主题的地理课，并在课程中设计至少1项小组活动。",
            "设计一个针对5年级学生的课程，课程综合科学和信息技术领域，解决生物与环境领域的生活问题，你需要给出完整的课程框架和活动。",
            "如果3年级的学生不能理解光合作用的实现过程，需要你帮我设计一个支持他们理解的教学活动，需要包含活动的形式、实施材料和清单。",
            "请基于贝叶斯定理为8年级学生出三道题目。",
            "如果需要八年级学生了解尼罗河流域的文化发展史，你有哪些推荐的网站或参考书籍？"
          ]
        },
        {
          title: "班级管理",
          dataList: [
            "创建一组给一年级学生使用的班级口号，要求大家注意卫生、保护环境，口号需要对仗工整，符合一年级学生的理解水平。",
            " 设计一套用于6年级学生的班级管理规章制度，内容需要包括学习、纪律、卫生、思想品德方面。"
          ]
        },
        {
          title: "课堂组织",
          dataList: [
            "请为“制作垃圾分类宣传单”的小组活动设计小组分工表，每个小组的成员为4-6人。",
            "请给5年级“校园植物图鉴”社团课程设计一份小组合作公约，需包含小组成员信息、小组项目目标、填写日期，总长度不超过300字，并且提供至少3处学生自行填写的部分。",
            "请用苏格拉底提问的方式，引导5年级学生拆解驱动问题：如何解决教室黑板反光的问题？其中需包含对于反光原因的分析与实验探究。"
          ]
        },
        {
          title: "教师发展",
          dataList: [
            "教师需要理解项目式学习的理论基础和基础概念，你需要生成一份阅读清单，要求内容为中文书籍或文献。",
            "设计一个教师进行个人学期总结的框架，需要体现在教学、教研、个人学习方面的进步。"
          ]
        },
        {
          title: "代码分析",
          dataList: [
            "这段代码实现了什么效果？",
            "请描述这段代码。",
            "根据这段代码，给我一些修改意见。"
          ]
        }
      ],
      showTextList: false,
      showRoleList: false,
      choseRoleItem: 0,
      choseTextItem: 0,
      continuous: true,
      showjList: false,
      faloading: false,
      fasource: null,
      saveUid: "",
      isVoice: false,
      isTalk: false,
      username: "",
      chatTypeArray: [
        // 'start'
        'recordCourseD'
      ],
      agentJSON:{
        model: '',
        url: '',
        start: ''
      }
    };
  },
  watch: {
    courseId: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.getChatList().then(_ => {
            this.$nextTick(() => {
              console.log(this.$refs.chatDialog.scrollHeight);
              this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
            });
          });
        }
      }
    },
    agentid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.getAgent()
        }
      }
    },
  },
  methods: {
    removeMarkdownSymbols(text) {
      return text
        .replace(/(?:\*\*|__)(.*?)\1/g, '$1') // 加粗
        .replace(/(?:\*|_)(.*?)\1/g, '$1') // 斜体
        .replace(/`(.*?)`/g, '$1') // 代码
        .replace(/^(#{1,6})\s*(.*)$/gm, '$2') // 标题
        .replace(/^\s*[-*+]\s+/gm, '') // 无序列表
        .replace(/^\s*\d+\.\s+/gm, '') // 有序列表
        .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1') // 链接
        .replace(/>\s+/g, '') // 引用
        .replace(/\n/g, '')
        .replaceAll(' ', '');
    },
    getLang() {
      let lang = "";
      if (this.languageSetting == 0) {
        lang = "Chinese.";
      } else if (this.languageSetting == 1) {
        lang = "Traditional Chinese.";
      } else if (this.languageSetting == 2) {
        lang = "English.";
      }
      return lang;
    },
    getLang2() {
      let lang = "";
      if (this.languageSetting == 0) {
        lang = "中文。";
      } else if (this.languageSetting == 1) {
        lang = "繁体中文。";
      } else if (this.languageSetting == 2) {
        lang = "英文。";
      }
      return lang;
    },
    cancelJ(string) {
      this.$emit("setIsQuote", string);
    },
    promptTit() {
      if (!this.loading && !this.courseText) {
        this.$message({
          message: this.lang.ssEnterWantKnowPls,
          type: "warning"
        });
      } else {
        this.$message({
          message: this.lang.ssAnswerFinishSend,
          type: "warning"
        });
      }
    },
    quickAdd(type){
      if(this.faloading){
        this.$message.error(this.lang.ssWaitAnswerSend)
        return
      }
      if(!this.viedoText){
        this.$message.error(this.lang.ssRecordAudioSend)
        return
      }
      this.faloading = true;
      let content = ''
      let string = ''
      if(type == 'start'){
        content = '追加议题'
        string = `## 转文本内容
${this.viedoText}
        
## 要求
根据<转文本内容>中的内容实现以下要求：${content}`
      }else if(type == 'recordCheckJindu'){
        content = '总结讨论'
        string = `## 转文本内容
${this.viedoText}

## 议程和问题引导
${this.viedoText}

## 要求
${this.recordCheckJindu}`
      }else if(type == 'recordCourseD'){
        content = '总结并生成课程概况'
        string = `## 课程信息
${this.courseInfo}

## 要求
${this.recordCourseD}

## 讨论
${this.viedoText}`
      }


      let _uuid = uuidv4();
      this.array.push({
        role: "user",
        content: `${content}`,
        uid: _uuid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.array.length,
        is_mind_map: false,
        createtime: new Date().toLocaleString().replaceAll("/", "-"),
        loading: true,
        chatType: type
      });
      // 注意：输出语言为${this.getLang2()}

      let _replaceText = `NOTICE
      Language: ${this.getLang()}
      ${string}`;
      this.$nextTick(() => {
        this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
      });
      let params = {
        assistant_id: this.agentid,
        userId: this.userid,
        message: _replaceText,
        session_name: this.continuous ? `${this.courseId}-courseDetail` : uuidv4(),
        uid: _uuid,
        model: this.agentJSON.model,
        sound_url: "",
        file_ids: this.agentJSON.model.includes('qwen') ? [] : [...this.fileids],//...this.fileids
        // model: "gpt-4o-2024-11-20"
        // model: "qwen-plus"
      };

      this.ajax
        .post(`${this.agentJSON.url.includes("llm") ? this.agentJSON.url+'/agent' : this.agentJSON.url}/ai_agent_park_chat_new`, params)
        .then(res => {
          if (
            converter(res.data.FunctionResponse.result) ==
            converter("发送成功")
          ) {
          } else {
            this.$message.warning(res.data.FunctionResponse.result);
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.getAtAuContent2(_uuid);
      this.saveUid = _uuid;
      this.courseText = "";
    },
    addContent() {
      if (this.courseText.trim().length == 0)
        return this.$message.error(this.lang.ssEnterContent);
      if(this.faloading){
        this.$message.error(this.lang.ssWaitAnswerSend)
        return
      }
      let message = this.courseText;

      if (this.courseText) {
        let msg = ``;
        if (this.checkArray.length) {
          msg = `
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".`;
          let task = [];
          if (this.part == this.lang.ssAllContent) {
            for (var i = 0; i < this.checkArray.length; i++) {
              let _index = this.checkArray[i];
              task.push(this.course[_index]);
            }
          } else if (this.part == this.lang.ssTaskDesign) {
            for (var i = 0; i < this.checkArray.length; i++) {
              let _index = this.checkArray[i];
              task.push(this.course[_index]);
            }
          } else if (this.part == this.lang.ssEvalDesign) {
            for (var i = 0; i < this.checkArray.length; i++) {
              let _index = this.checkArray[i];
              task.push(this.course[_index].eList);
            }
          }

          msg += `
          ## 修改内容
          ${JSON.stringify(task)}
          `;

          msg += `
          ## 要求
          ${this.courseText}
          `;
          message = msg;
        }
        if(this.viedoText){
          let msg = ``;
          msg += `
          ## 引用内容
          ${this.viedoText}
          `;

          msg += `
          ## 要求
          ${this.courseText}
          `;
          message = msg;
        }
        // 这里处理@的角色
        let _atRoleList = [];
        let _roleList = [...this.roleList, ...this.publicRoleList];
        _roleList.forEach(i => {
          if (message.indexOf(`@${i.assistantName}`) != -1) {
            _atRoleList.push(i);
          }
        });
        this.faloading = true;
        if (_atRoleList.length > 0) {
          //有@角色
          let _replaceText = `NOTICE
Language: ${this.getLang()}

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

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

            let params = {
              assistant_id: _item.assistant_id,
              userId: this.userid,
              message: _replaceText,
              session_name: `${this.courseId}-courseDetail`,
              uid: _uid,
              file_ids: [...this.fileids],
              model: "gpt-4o-2024-11-20"
              // model: "qwen-plus"
            };

            this.ajax
              .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
              .then(res => {
                if (
                  converter(res.data.FunctionResponse.result) ==
                  converter("发送成功")
                ) {
                } else {
                  this.$message.warning(res.data.FunctionResponse.result);
                }
              })
              .catch(err => {
                console.log(err);
              });
            this.getAtAuContent(_uid);
            this.saveUid = _uid;
          });
          this.courseText = "";
        } else {
          let _uuid = uuidv4();
          this.array.push({
            role: "user",
            content: `${this.courseText}`,
            uid: _uuid,
            AI: "AI",
            aiContent: "",
            oldContent: "",
            isShowSynchronization: false,
            filename: "",
            index: this.array.length,
            is_mind_map: false,
            createtime: new Date().toLocaleString().replaceAll("/", "-"),
            loading: true
          });

          let history = [];
//           if (this.continuous) {
//             this.array.forEach((i, index) => {
//               if (i.content)
//                 history.push({
//                   role: "user",
//                   content: index == this.array.length - 1 ? `NOTICE
// Language: ${this.getLang()}

// ${message}` : `NOTICE
// Language: ${this.getLang()}

// ${i.content}`
//                 });
//               if (i.aiContent)
//                 history.push({ role: "assistant", content: i.aiContent });
//             });
//           } else {
//             history.push({ role: "user", content: message });
//           }
//           history = history.filter(
//             i =>
//               i.content !=
//               this.agentJSON.start
//           );

//           history = history.map(i => ({
//             role: i.role,
//             content: `NOTICE
// Language: ${this.getLang()}

// ${i.content}`
//           }));
          let _replaceText = `NOTICE
          Language: ${this.getLang()}

          ${message}`;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          let params = {
            assistant_id: this.agentid,
            userId: this.userid,
            message: _replaceText,
            session_name: this.continuous ? `${this.courseId}-courseDetail` : uuidv4(),
            model: this.agentJSON.model,
            sound_url: "",
            uid: _uuid,
            file_ids: this.agentJSON.model.includes('qwen') ? [] : [...this.fileids],//...this.fileids
            // model: "gpt-4o-2024-11-20"
            // model: "qwen-plus"
          };
          this.ajax
            .post(`${this.agentJSON.url.includes("llm") ? this.agentJSON.url+'/agent' : this.agentJSON.url}/ai_agent_park_chat_new`, params)
            .then(res => {
              if (
                converter(res.data.FunctionResponse.result) ==
                converter("发送成功")
              ) {
              } else {
                this.$message.warning(res.data.FunctionResponse.result);
              }
            })
            .catch(err => {
              console.log(err);
            });
          this.getAtAuContent2(_uuid);
          this.saveUid = _uuid;
          this.courseText = "";
          // let params = JSON.stringify({
          //   // model: "gpt-3.5-turbo",
          //   // model: "gpt-4o-2024-11-20",
          //   model: "qwen-plus",
          //   temperature: 0,
          //   max_tokens: 4096,
          //   top_p: 1,
          //   frequency_penalty: 0,
          //   presence_penalty: 0,
          //   messages: history,
          //   uid: _uuid,
          //   mind_map_question: ""
          // });
          // this.courseText = "";

          // this.ajax
          //   .post("https://gpt4.cocorobo.cn/chat", params)
          //   .then(res => {
          //     if (
          //       converter(res.data.FunctionResponse.result) ==
          //       converter("发送成功")
          //     ) {
          //     } else {
          //       this.$message.warning(res.data.FunctionResponse.result);
          //     }
          //   })
          //   .catch(e => {
          //     console.log(e);
          //   });
          // this.getAiContent(_uuid);
          // this.saveUid = _uuid;
        }
      }
    },
    getAiContent(_uid) {
      this.fasource = 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.fasource.onmessage = _e => {
        if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
          //对话已经完成
          _mdText = _mdText.replace("_", "");
          this.fasource.close();
          this.fasource = null;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).isalltext = true;
          this.array.find(i => i.uid == _uid).isShowSynchronization = true;
          this.array.find(i => i.uid == _uid).loading = false;
          // 这里保存对话
          if (this.courseId) {
            this.insertChat(_uid);
          }
          return;
        } else {
          //对话还在继续
          let _text = "";
          _text = _e.data.replaceAll("'", "");
          if (_allText == "") {
            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
          } else {
            _allText += _text;
          }
          _mdText = _allText + "_";
          _mdText = _mdText.replace(/\\n/g, "\n");
          _mdText = _mdText.replace(/\\/g, "");
          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
          //转化返回的回复流数据
          _mdText = md.render(_mdText);
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).loading = false;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          // 处理流数据
        }
      };
    },
    getAtAuContent(_uid) {
      this.fasource = new EventSource(
        `https://gpt4.cocorobo.cn/question/${_uid}`
      ); //http://gpt4.cocorobo.cn:8011/question/   https://gpt4.cocorobo.cn/question/
      let _allText = "";
      let _mdText = "";
      const md = new MarkdownIt();
      this.fasource.onmessage = _e => {
        let _eData = JSON.parse(_e.data);
        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
          let _result = [];
          if ("result" in _eData) {
            _result = _eData.result;
            for (let i = 0; i < _result.length; i++) {
              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
            }
          }
          _mdText = _mdText.replace("_", "");
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).isalltext = true;
          this.array.find(i => i.uid == _uid).isShowSynchronization = true;
          this.array.find(i => i.uid == _uid).loading = false;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          this.fasource.close();
          this.fasource = null;
          if (this.courseId) {
            this.insertChat(_uid);
          }
        } else {
          let _text = _eData.content.replace("'", "").replace("'", "");
          if (_allText == "") {
            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
          } else {
            _allText += _text;
          }
          _mdText = _allText + "_";
          _mdText = _mdText.replace(/\\n/g, "\n");
          _mdText = _mdText.replace(/\\/g, "");
          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
          //转化返回的回复流数据
          _mdText = md.render(_mdText);
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).loading = false;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          // 处理流数据
        }
      };
    },
    getAtAuContent2(_uid) {
      this.fasource = new EventSource(
        `${this.agentJSON.url}/question/${_uid}`
      ); //http://gpt4.cocorobo.cn:8011/question/   https://gpt4.cocorobo.cn/question/
      let _allText = "";
      let _mdText = "";
      const md = new MarkdownIt();
      this.fasource.onmessage = _e => {
        let _eData = JSON.parse(_e.data);
        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
          let _result = [];
          if ("result" in _eData) {
            _result = _eData.result;
            for (let i = 0; i < _result.length; i++) {
              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
            }
          }
          _mdText = _mdText.replace("_", "");
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).isalltext = true;
          this.array.find(i => i.uid == _uid).isShowSynchronization = true;
          this.array.find(i => i.uid == _uid).loading = false;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          this.fasource.close();
          this.fasource = null;
          if (this.courseId) {
            this.insertChat(_uid);
          }
        } else {
          let _text = _eData.content.replace("'", "").replace("'", "");
          if (_allText == "") {
            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
          } else {
            _allText += _text;
          }
          _mdText = _allText + "_";
          _mdText = _mdText.replace(/\\n/g, "\n");
          _mdText = _mdText.replace(/\\/g, "");
          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
          //转化返回的回复流数据
          _mdText = md.render(_mdText);
          this.array.find(i => i.uid == _uid).aiContent = _mdText;
          this.array.find(i => i.uid == _uid).loading = false;
          this.$nextTick(() => {
            this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
          });
          // 处理流数据
        }
      };
    },
    async getUserName() {
      let params = { uid: this.userid };
      try {
        let res = await this.ajax.get(
          this.$store.state.api + "getUser",
          params
        );
        this.username = res.data[0][0].name;
      } catch (err) {
        console.error(err);
      }
    },
    //保存消息
    async insertChat(_uid) {
      let _data = this.array.find(i => i.uid == _uid);
      this.saveUid = "";
      this.faloading = false;
      if (!this.username) {
        await this.getUserName();
      }
      if (!_data) return;
      let params = {
        userId: this.userid,
        userName: this.username,
        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}-courseDetail` //这是对话记录位置
      };
      await this.ajax.post("https://gpt4.cocorobo.cn/insert_chat", params).then(res => {});
    },
    getAgent(){
      return new Promise((resolve, reject) => {
        let params = {
          id: this.agentid
        };
        this.ajax
          .post("https://gpt4.cocorobo.cn/get_ai_agent_assistant_id", params)
          .then(res => {
            let _data = JSON.parse(res.data.FunctionResponse.result);
            console.log(res);
            
            if (_data.length > 0) {
              this.agentJSON = {
                model: _data[0].modelType == 'GPT' ? "gpt-4o-2024-11-20" : _data[0].modelType,
                url: _data[0].modelType.includes('qwen') ? 'https://llm.cocorobo.cn' : 'https://gpt4.cocorobo.cn',
                start: _data[0].prologue ? _data[0].prologue : this.lang.ssHelloAssistant
              }
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            resolve();
          });
      });
    },
    // 获取对应的聊天记录
    getChatList() {
      return new Promise(async (resolve, reject) => {
        if(!this.agentJSON.model){ await this.getAgent() }
        if (this.loading) return;
        this.array = [];
        this.loading = true;
        let params = {
          userid: this.userid,
          groupid: "602def61-005d-11ee-91d8-005056b8q12w",
          // session_name:``
          session_name: `${this.courseId}-courseDetail`
        };
        this.ajax
          .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
          .then(async res => {
            let _data = JSON.parse(res.data.FunctionResponse).response;
            if (_data.length > 0) {
              let _chatList = [];
              for (let i = 0; i < _data.length; i++) {
                _chatList.push({
                  loading: false,
                  role: "user",
                  content: _data[i].problem,
                  uid: _data[i].id,
                  AI: "AI",
                  aiContent: _data[i].answer,
                  oldContent: _data[i].answer,
                  isShowSynchronization: false,
                  filename: _data[i].filename,
                  index: i,
                  is_mind_map: false,
                  fileid: _data[i].fileid,
                  createtime: _data[i].createtime,
                  isalltext: true
                });
              }
              this.array = _chatList;
              this.loading = false;
            } else {
              let _uid = uuidv4();
              let _chatList = [];
              _chatList.push({
                loading: false,
                role: "",
                content: "",
                uid: _uid,
                AI: "AI",
                aiContent: this.agentJSON.start,
                oldContent: this.agentJSON.start,
                isShowSynchronization: false,
                filename: "",
                index: 0,
                is_mind_map: false,
                fileid: "",
                createtime: new Date().toLocaleString().replaceAll("/", "-"),
                chatType: 'start',
                isalltext: true
              });
              this.array = _chatList;
              if (this.courseId) {
                await this.insertChat(_uid);
              }
              if(this.recordstart){
                let _uid2 = uuidv4();
                const md = new MarkdownIt();
                _chatList.push({
                  loading: false,
                  role: "",
                  content: "",
                  uid: _uid2,
                  AI: "AI",
                  aiContent: md.render(this.recordstart),
                  oldContent: md.render(this.recordstart),
                  isShowSynchronization: false,
                  filename: "",
                  index: 0,
                  is_mind_map: false,
                  fileid: "",
                  createtime: new Date().toLocaleString().replaceAll("/", "-"),
                  chatType: 'recordstart',
                  isalltext: true
              });
                if (this.courseId) {
                  await this.insertChat(_uid2);
                }
              }
              
              //没有对话记录
              this.loading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error(this.lang.ssGetChatFail);
            this.loading = false;
            resolve();
          });
      });
    },
    addTask(index) {
      if (this.checkArray.indexOf(index) !== -1) {
        this.checkArray.splice(this.checkArray.indexOf(index), 1);
      } else {
        this.checkArray.push(index);
      }
      console.log(index);
    },
    addAllTask() {
      if (this.checkArray.length === this.course.length) {
        this.checkArray = [];
      } else {
        this.checkArray = [];
        this.course.forEach((item, index) => {
          this.checkArray.push(index);
        });
      }
    },
    checkPart(name) {
      this.part = name;
    },
    inputChange() {
      if (this.courseText.at(-1) == "@") {
        this.showRoleList = true;
      }
      if (this.courseText.at(-1) == "/") {
        console.log("哇卡ka2");
      }

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

          this.ajax
            .post("https://gpt4.cocorobo.cn/delete_park_session", params)
            .then(res => {
              this.array = [];
              this.$message.success(this.lang.ssClearChatSuccess);
              this.loading = false;
              this.getChatList()
            })
            .catch(err => {
              this.loading = false;
              this.$message.error(this.lang.ssClearChatFail);
            });
        })
        .catch(_ => {});
    },
    getRoleList() {
      this.roleList = [];
      let params = {
        userId: this.userid
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/get_ai_agent_assistant_list", params)
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data) {
            this.roleList = JSON.parse(_data);
          }
        })
        .catch(e => {
          console.log(e);
          // this.$message.error("获取角色列表失败");
          this.roleList = [];
        });
    },
    getPublicRoleList() {
      this.publicRoleList = [];
      let params = {
        userId: this.userid,
        organizeid: this.oid
      };
      this.ajax
        .post(
          "https://gpt4.cocorobo.cn/get_ai_agent_assistant_share_list",
          params
        )
        .then(res => {
          let _data = res.data.FunctionResponse.result;
          if (_data) {
            this.publicRoleList = JSON.parse(_data);
          }
        })
        .catch(e => {
          this.publicRoleList = [];
          console.log(e);
          // console.log("获取公共角色失败", e);
        });
    },
    choseRole(item) {
      let _lastAtIndex = this.courseText.lastIndexOf("@");
      this.courseText = `${this.courseText.slice(0, _lastAtIndex)}@${
        item.assistantName
      } `;
      this.$refs.textareaRef.focus();
      this.showRoleList = false;
    },
    onCopy(content) {
      const turndownService = new TurndownService();
      // 添加自定义规则来处理表格
      turndownService.addRule("table", {
        filter: "table",
        replacement: (content, node) => {
          const rows = node.querySelectorAll("tr");
          let markdown = "";

          rows.forEach(row => {
            const cells = row.querySelectorAll("th, td");
            const rowMarkdown = Array.from(cells)
              .map(cell => cell.textContent)
              .join(" | ");
            markdown += `| ${rowMarkdown} |\n`;
            if (cells && cells.length && cells[0].tagName == "TH") {
              let a = Array.from(cells)
                .map(cell => "")
                .join(" --- |");
              markdown += `| --- |${a}\n`;
            }
          });

          // 添加分隔行
          // markdown = markdown.replace(/^/, '| --- |\n');
          return markdown;
        }
      });
      // 创建临时textarea元素
      const tempInput = document.createElement("textarea");

      tempInput.value = turndownService.turndown(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: this.lang.ssCopySuccess,
        type: "success"
      });
    },
    setCourseText(content){
      const turndownService = new TurndownService();
      // 添加自定义规则来处理表格
      turndownService.addRule("table", {
        filter: "table",
        replacement: (content, node) => {
          const rows = node.querySelectorAll("tr");
          let markdown = "";

          rows.forEach(row => {
            const cells = row.querySelectorAll("th, td");
            const rowMarkdown = Array.from(cells)
              .map(cell => cell.textContent)
              .join(" | ");
            markdown += `| ${rowMarkdown} |\n`;
            if (cells && cells.length && cells[0].tagName == "TH") {
              let a = Array.from(cells)
                .map(cell => "")
                .join(" --- |");
              markdown += `| --- |${a}\n`;
            }
          });

          // 添加分隔行
          // markdown = markdown.replace(/^/, '| --- |\n');
          return markdown;
        }
      });
      // 创建临时textarea元素

      let _content = turndownService.turndown(content); // 设置要复制的内容

      // 新增的确认提示框
      if (this.courseText2) {
        this.$confirm(this.lang.ssCourseBriefHas, this.lang.ssTip, {
          confirmButtonText: this.lang.ssConfirm,
          cancelButtonText: this.lang.ssCancel,
          type: 'warning'
        }).then(() => {
          this.updatCourse(_content)
          this.$message.success(this.lang.ssAdoptSuccess);
        }).catch(() => {
        });
      } else {
        this.updatCourse(_content)
        this.$message.success(this.lang.ssAdoptSuccess);
      }
    },
    updatCourse(content){
      let _content = content+='*0*%*'
      this.$emit('update:courseText2', _content);
      setTimeout(() => {
        this.$emit('update:courseText2', _content.replaceAll("*0*%*", ""));
      }, 0);
    },
    stopSend() {
      if (this.fasource) {
        this.fasource.close();
        if (this.array[this.array.length - 1].content == "wanSearch") {
          this.array.pop();
        }
        this.array.find(i => i.uid == this.saveUid).loading = false;
        this.faloading = false;
        this.fasource = null;
        this.insertChat(this.saveUid);
      }
    },
    changeVoice(flag) {
      this.isVoice = flag;
    },
    startVoice() {
      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.courseText += _msg;
      };
    },
    stopVoice() {
      try {
        if (!this.isTalk) return this.$message.info(this.lang.ssStartRecPls);
        let iiframe = this.$refs["iiframe"];
        iiframe.contentWindow.window.document
          .getElementById("scenarioStopButton")
          .click();
        iiframe.contentWindow.onSessionStopped = (s, e) => {
          this.isTalk = false;
          if (this.courseText) {
            this.addContent();
          }
        };
      } catch (error) {
        console.log(error);
        this.isTalk = false;
        if (this.courseText) {
          this.addContent();
        }
      }
    }
  },
  computed: {
    pan() {
      return content => {
        try {
          return JSON.parse(content);
        } catch (error) {
          return [];
        }
      };
    },
    courseTextLength() {
      return this.courseText.length;
    },
    taskName() {
      let task = "";
      if (this.checkArray.length) {
        task = this.lang.ssTask;
        this.checkArray = this.checkArray.sort((a, b) => a - b);
        let a = JSON.parse(JSON.stringify(this.checkArray));
        for (let index = 0; index < a.length; index++) {
          a[index]++;
        }
        task += a.join("/");
      }
      return task + " " + this.part;
    },
    choseRoleList() {
      let result = [...this.roleList, ...this.publicRoleList];
      const _index = this.courseText.lastIndexOf("@");
      if (_index !== -1) {
        let roleName = this.courseText.substring(_index + 1);
        result = result.filter(i => i.assistantName.indexOf(roleName) != -1);
      } else {
        return [];
      }
      this.choseRoleItem = 0;
      return result;
    }
  },
  mounted() {
    // 初始化需要从 lang 获取的数组
    if (!this.course.length) {
      this.course = [
        { title: `${this.lang.ssTask}1` },
        { title: `${this.lang.ssTask}2` },
        { title: `${this.lang.ssTask}3` }
      ];
    }
    this.partArray = [
      { name: this.lang.ssAllContent },
      { name: this.lang.ssTaskDesign },
      { name: this.lang.ssEvalDesign }
    ];
    this.part = this.lang.ssAllContent;
    

    // this.getChatList().then(_ => {
    //   this.$nextTick(() => {
    //     console.log(this.$refs.chatDialog.scrollHeight);
    //     this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
    //   });
    // });
    // this.getRoleList();
    // this.getPublicRoleList();
    // this.jArray = this.getString();
  }
};
</script>

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

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

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

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

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

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

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

.ai_body_input {
  position: relative;
  display: flex;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ai_b_i_rlb_itemTop {
  display: flex;
}

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

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

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

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

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

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

.ai_body_input_textarea {
  flex: 1;
  margin: 10px 5px 10px 5px;
  min-height: 35px;
  height: 35px;
  max-height: 100px;
  border: none;
  outline: none;
  resize: none;
  font-size: 16px;
  overflow: auto;
  padding-right: 100px;
  background-color: #fff !important;
}

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

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

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

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

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

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

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

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

.c_pub_button_confirm {
  /* position: absolute;
    bottom: 13px;
    right: 13px; */
  /* margin-top: 10px; */
  width: 60px;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
}
.c_pub_button_confirmVoice {
  width: 30px;
  height: 36px;
  min-width: auto;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
  background-color: #3681fc;
  cursor: pointer;
  padding: 0 10px;
}
.c_pub_button_confirmVoice > svg {
  fill: #fff;
  width: 25px;
  height: 25px;
}

.c_pub_button_StopConfirmVoice {
  width: 30px;
  height: 36px;
  min-width: auto;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
  background-color: #dde2e2;
  cursor: pointer;
  padding: 0 10px;
}

.c_pub_button_StopConfirmVoice > svg {
  width: 25px;
  height: 25px;
}

.c_voiceBtn {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 85px;
  bottom: 0px;
  margin-bottom: 17px;
  cursor: pointer;
}

.c_voiceBtn > svg {
  width: 100%;
  height: 100%;
}

.c_pub_button_confirmDisabled {
  background-color: #aeccfe;
}

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

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

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

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

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

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

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

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

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

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

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

.ai_body_select {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

.ai_body_select > .checkBox > .part {
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.ai_btn_box {
  min-width: fit-content;
  margin-top: auto;
}

.ai_btn_box > img {
  cursor: pointer;
  width: 15px;
}

.ai_tips_btn_box{
  width: 100%;
  padding: 0 20px 0 50px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 27px;
  box-sizing: border-box;
}

.ai_tips_btn_box > span{
  cursor: pointer;
  background: #9bc1ff;
  color: #ffffff;
  width: fit-content;
  padding: 8px;
  border-radius: 5px;
  transition: all .3s;
  margin-right: 5px;
}

.ai_tips_btn_box > span + span{
  margin-top: 6px;
}

.ai_tips_btn_box > span:hover{
  background: #3683ff;
}
</style>