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=""
                  @error="setDefaultSrc"
                  @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
                v-if="chatList.length - 2 == index"
                @click.stop="refresh(item)"
                style="width: 15px; margin-bottom: 7px"
                :src="require('../../../assets/icon/course/refresh.svg')"
              />
              <img
                @click="onCopy(item.aiContent)"
                style="width: 30px; margin-bottom: 7px"
                src="../../../assets/icon/course/copyTxt.png"
                alt=""
              />
              <svg
                @click.stop="aiTalkAll(item)"
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                style="width: 15px; margin-bottom: 7px"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10.92 1.6203C11.1849 1.42128 11.5611 1.47474 11.7601 1.73969C13.0908 3.51135 13.8796 5.71444 13.8796 8.10004C13.8796 10.4856 13.0908 12.6887 11.7601 14.4604C11.5611 14.7253 11.1849 14.7788 10.92 14.5798C10.655 14.3808 10.6016 14.0046 10.8006 13.7397C11.9806 12.1687 12.6796 10.2169 12.6796 8.10004C12.6796 5.98321 11.9806 4.03137 10.8006 2.46038C10.6016 2.19543 10.655 1.81931 10.92 1.6203ZM6.91962 4.6203C7.18457 4.42128 7.56069 4.47474 7.75971 4.73969C8.46276 5.67568 8.8796 6.84005 8.8796 8.10003C8.8796 9.36002 8.46276 10.5244 7.75971 11.4604C7.56069 11.7253 7.18457 11.7788 6.91962 11.5798C6.65467 11.3808 6.60121 11.0046 6.80023 10.7397C7.35255 10.0044 7.6796 9.09126 7.6796 8.10003C7.6796 7.10881 7.35255 6.19571 6.80023 5.46038C6.60121 5.19543 6.65467 4.81931 6.91962 4.6203ZM4.05485 7.29282C3.82996 7.04946 3.45035 7.03449 3.20698 7.25939C2.96362 7.48428 2.94865 7.86389 3.17355 8.10725C3.23988 8.17904 3.27961 8.27348 3.27961 8.37855C3.27961 8.48652 3.23762 8.58344 3.16781 8.65593C2.93796 8.89462 2.94512 9.27445 3.18381 9.50431C3.4225 9.73416 3.80233 9.727 4.03219 9.48831C4.30866 9.20122 4.47961 8.80923 4.47961 8.37855C4.47961 7.95987 4.318 7.57758 4.05485 7.29282Z"
                  :fill="
                    aiTalkUid == item.uid && aiIsTalk ? '#3681FC' : 'black'
                  "
                />
              </svg>

              <!-- <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')"
							/> -->
            </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.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="choiceTopArea" v-if="cardType == 1">
      <div class="choiceTop">
        <div class="choiceRoleHeader">
          <div class="s_t_c_ai">
            <div class="s_t_c_a_left">
              <el-avatar
                :src="require('../../../assets/icon/course/ai.png')"
              ></el-avatar>
            </div>
            <div class="s_t_c_a_right">
              <div class="s_t_c_a_r_content">选择您需要的智能体，开始对话</div>
            </div>
          </div>
        </div>

        <div class="choiceSelect">
          <div class="cs_type">
            <span
              :class="sortOption == 0 ? 'cs_typeActive' : ''"
              @click="optBtn(0)"
              >我的</span
            >
            <span
              :class="sortOption == 1 ? 'cs_typeActive' : ''"
              @click="optBtn(1)"
              >社区</span
            >
          </div>
          <div class="cs_box">
            <div
              :class="[
                'cs_b_item',
                choseRoleItem && choseRoleItem.assistant_id == item.assistant_id
                  ? 'cs_b_itemActive'
                  : ''
              ]"
              v-for="(item, index) in showRoleList"
              :key="sortOption + '-' + index"
              @click.stop="choseRole(item)"
            >
              <el-avatar
                class="cs_b_i_avatar"
                fit="cover"
                shape="square"
                :src="
                  item.headUrl && item.headUrl != ''
                    ? item.headUrl
                    : require('../../../assets/icon/course/ai.png')
                "
              ></el-avatar>

              <div class="cs_b_i_name">{{ item.assistantName }}</div>
              <div class="cs_b_i_des">{{ item.description }}</div>
            </div>
          </div>
          <!-- <div style="width: 100%">
						<div class="roleInput">
							<el-input
								placeholder="请输入内容"
								v-model="roleText"
								prefix-icon="el-icon-search"
								clearable
							>
							</el-input>
						</div>

						<div class="roleBtn">
							<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>
					<div class="roleListBox">
						<div
							class="characterBlock"
							v-for="(item, index) in showRoleList"
							:key="item.id"
							@click.stop="choseRole(item)"
						>
							<div class="imgLeft">
								<div class="img">
									<img
										style="width: 100%; height: 100%"
										:src="
											item.headUrl && item.headUrl != ''
												? item.headUrl
												: require('../../../assets/icon/course/ai.png')
										"
									/>
								</div>
							</div>
							<div class="txtRight">
								<el-tooltip
									class="item"
									effect="dark"
									:content="item.assistantName"
									placement="top"
								>
									<div class="bir">{{ item.assistantName }}</div>
								</el-tooltip>
								<div
									:style="{
										color: '#fff',
										display:
											choseRoleItem &&
											choseRoleItem.assistant_id == item.assistant_id
												? 'block'
												: 'none',
									}"
								>
									已选择
								</div>
							</div>
						</div>
					</div> -->
        </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 v-if="item.headUrl" style="width: 100%;height: 100%;" :src="item.headUrl" />
							<img v-else style="width: 100%;height: 100%;" :src="require('../../../assets/icon/course/ai.png')">
            </div>
          </div>
          <div class="txtRight">
            <div class="bir">{{ item.assistantName }}</div>
            <div
              :style="{
                color: '#fff',
                display:
									(choseRoleItem && 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>

    <div class="s_bottom">
      <div class="s_b_btnAreaTop" v-if="cardType != 1">
        <div class="s_b_bat_left">
          <span
            ><el-tooltip
              class="item"
              effect="dark"
              content="清空聊天记录"
              placement="top"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                @click.stop="clear()"
              >
                <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"
                  fill="black"
                  fill-opacity="0.6"
                />
                <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"
                  fill="black"
                  fill-opacity="0.6"
                />
                <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"
                  fill="black"
                  fill-opacity="0.6"
                />
                <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"
                  fill="black"
                  fill-opacity="0.6"
                />
              </svg>
            </el-tooltip>
          </span>
          <span
            ><el-tooltip
              class="item"
              effect="dark"
              :content="openMegaphone ? '默认不朗诵' : '默认朗诵'"
              placement="top"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                @click.stop="changeMegaphone()"
                xmlns="http://www.w3.org/2000/svg"
								v-if="!openMegaphone"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.65 2.02537C13.9812 1.7766 14.4513 1.84342 14.7001 2.17461C16.3635 4.38918 17.3495 7.14305 17.3495 10.125C17.3495 10.9115 17.2809 11.6821 17.1494 12.4311L15.7571 11.6061C15.8181 11.121 15.8495 10.6267 15.8495 10.125C15.8495 7.47901 14.9758 5.03921 13.5007 3.07548C13.252 2.74429 13.3188 2.27414 13.65 2.02537ZM10.9679 8.76803C10.7613 7.71703 10.3195 6.74982 9.69963 5.92461C9.45087 5.59342 8.98072 5.5266 8.64952 5.77537C8.31833 6.02414 8.25152 6.49429 8.50028 6.82548C8.68121 7.06635 8.84279 7.32248 8.98275 7.59163L10.9679 8.76803ZM9.434 11.4702L10.7676 12.2604C10.5271 13.012 10.1631 13.7084 9.69963 14.3255C9.45087 14.6567 8.98072 14.7235 8.64952 14.4747C8.31833 14.226 8.25152 13.7558 8.50028 13.4246C8.93199 12.8499 9.2536 12.1882 9.434 11.4702ZM14.9175 14.7196L16.218 15.4903C15.8093 16.4122 15.2985 17.2787 14.7001 18.0755C14.4513 18.4067 13.9812 18.4735 13.65 18.2247C13.3188 17.9759 13.252 17.5058 13.5007 17.1746C14.0666 16.4213 14.544 15.5979 14.9175 14.7196ZM5.06857 9.11603C4.78744 8.81182 4.31294 8.79311 4.00873 9.07423C3.70452 9.35535 3.68581 9.82986 3.96693 10.1341C4.04986 10.2238 4.09951 10.3419 4.09951 10.4732C4.09951 10.6082 4.04703 10.7293 3.95977 10.8199C3.67245 11.1183 3.6814 11.5931 3.97976 11.8804C4.27812 12.1677 4.75291 12.1588 5.04023 11.8604C5.38582 11.5015 5.59951 11.0115 5.59951 10.4732C5.59951 9.94984 5.3975 9.47198 5.06857 9.11603Z"
                  fill="black"
                  fill-opacity="0.6"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M1.03865 4.82622C1.21124 4.52729 1.59349 4.42486 1.89242 4.59745L18.7327 14.3202C19.0316 14.4928 19.134 14.875 18.9614 15.1739C18.7888 15.4729 18.4066 15.5753 18.1077 15.4027L1.26742 5.67998C0.968486 5.5074 0.866064 5.12515 1.03865 4.82622Z"
                  fill="black"
                  fill-opacity="0.6"
                />
              </svg>

							<svg v-else  @click.stop="changeMegaphone()" 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="M13.65 2.02537C13.9812 1.7766 14.4513 1.84342 14.7001 2.17461C16.3635 4.38918 17.3495 7.14305 17.3495 10.125C17.3495 13.107 16.3635 15.8609 14.7001 18.0755C14.4513 18.4067 13.9812 18.4735 13.65 18.2247C13.3188 17.9759 13.252 17.5058 13.5007 17.1746C14.9758 15.2109 15.8495 12.7711 15.8495 10.125C15.8495 7.47901 14.9758 5.03921 13.5007 3.07548C13.252 2.74429 13.3188 2.27414 13.65 2.02537Z" fill="#3681FC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64952 5.77537C8.98072 5.5266 9.45087 5.59342 9.69963 5.92461C10.5784 7.09461 11.0995 8.55006 11.0995 10.125C11.0995 11.7 10.5784 13.1555 9.69963 14.3255C9.45087 14.6567 8.98072 14.7235 8.64952 14.4747C8.31833 14.226 8.25152 13.7558 8.50028 13.4246C9.19069 12.5055 9.5995 11.3641 9.5995 10.125C9.5995 8.88601 9.19069 7.74463 8.50028 6.82548C8.25152 6.49429 8.31833 6.02414 8.64952 5.77537Z" fill="#3681FC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00873 9.07423C4.31294 8.79311 4.78744 8.81182 5.06857 9.11603C5.3975 9.47198 5.59951 9.94984 5.59951 10.4732C5.59951 11.0115 5.38582 11.5015 5.04023 11.8604C4.75291 12.1588 4.27812 12.1677 3.97976 11.8804C3.6814 11.5931 3.67245 11.1183 3.95977 10.8199C4.04703 10.7293 4.09951 10.6082 4.09951 10.4732C4.09951 10.3419 4.04986 10.2238 3.96693 10.1341C3.68581 9.82986 3.70452 9.35535 4.00873 9.07423Z" fill="#3681FC"/>
</svg>

							
							</el-tooltip
          ></span>
        </div>
        <div class="s_b_bat_right">
          <!-- <img :src="require('../../../assets/icon/course/bulb.svg')"> -->
          <span>
            <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="M10 6.25C7.92893 6.25 6.25 7.92893 6.25 10C6.25 12.0711 7.92893 13.75 10 13.75C12.0711 13.75 13.75 12.0711 13.75 10C13.75 7.92893 12.0711 6.25 10 6.25ZM5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M10 1.25C10.3452 1.25 10.625 1.52982 10.625 1.875V3.125C10.625 3.47018 10.3452 3.75 10 3.75C9.65482 3.75 9.375 3.47018 9.375 3.125V1.875C9.375 1.52982 9.65482 1.25 10 1.25Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M18.75 10C18.75 10.3452 18.4702 10.625 18.125 10.625L16.875 10.625C16.5298 10.625 16.25 10.3452 16.25 10C16.25 9.65482 16.5298 9.375 16.875 9.375L18.125 9.375C18.4702 9.375 18.75 9.65482 18.75 10Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M3.75 10C3.75 10.3452 3.47018 10.625 3.125 10.625L1.875 10.625C1.52982 10.625 1.25 10.3452 1.25 10C1.25 9.65482 1.52982 9.375 1.875 9.375L3.125 9.375C3.47018 9.375 3.75 9.65482 3.75 10Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.58052 5.58061C5.33644 5.82469 4.94071 5.82469 4.69664 5.58061L3.81275 4.69673C3.56867 4.45265 3.56867 4.05692 3.81275 3.81285C4.05683 3.56877 4.45256 3.56877 4.69664 3.81285L5.58052 4.69673C5.8246 4.94081 5.8246 5.33654 5.58052 5.58061Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M14.4194 5.58052C14.1753 5.33644 14.1753 4.94071 14.4194 4.69664L15.3033 3.81275C15.5473 3.56867 15.9431 3.56867 16.1872 3.81275C16.4312 4.05683 16.4312 4.45256 16.1872 4.69664L15.3033 5.58052C15.0592 5.8246 14.6635 5.8246 14.4194 5.58052Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M8.75 18.125C8.75 17.7798 9.02982 17.5 9.375 17.5H10.625C10.9702 17.5 11.25 17.7798 11.25 18.125C11.25 18.4702 10.9702 18.75 10.625 18.75H9.375C9.02982 18.75 8.75 18.4702 8.75 18.125Z"
                fill="black"
                fill-opacity="0.6"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.5 16.25C7.5 15.9048 7.77982 15.625 8.125 15.625H11.875C12.2202 15.625 12.5 15.9048 12.5 16.25C12.5 16.5952 12.2202 16.875 11.875 16.875H8.125C7.77982 16.875 7.5 16.5952 7.5 16.25Z"
                fill="black"
                fill-opacity="0.6"
              />
            </svg>
          </span>
        </div>
      </div>
      <div class="s_b_btnArea">
        <div
          :class="['s_b_ba-item', cardType == 1 ? 's_b_ba_active' : '']"
          @click.stop="choiceRole()"
        >
          <!-- <img
						style="width: 20px"
						src="../../../assets/icon/course/role.png"
						alt=""
					/> -->
          <svg
            width="16"
            height="16"
            style="margin-right: 5px"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7.65475 5.14423C7.84523 4.95323 8.15406 4.95323 8.34454 5.14423L11.8564 8.66565C12.0469 8.85665 12.0469 9.16633 11.8564 9.35733C11.6659 9.54833 11.3571 9.54833 11.1666 9.35733L7.99964 6.18174L4.83266 9.35733C4.64218 9.54833 4.33334 9.54833 4.14286 9.35733C3.95238 9.16633 3.95238 8.85665 4.14286 8.66565L7.65475 5.14423Z"
              :fill="cardType == 1 ? '#fff' : 'black'"
            />
            <path
              d="M13.9433 2.84505L11.222 1.54948C11.1036 1.49702 10.9687 1.49109 10.8459 1.53296C10.7231 1.57483 10.6221 1.66119 10.5643 1.77369C10.5066 1.88618 10.4967 2.01594 10.5367 2.13536C10.5767 2.25478 10.6635 2.35446 10.7787 2.41319L13.5 3.70876V11.2767L8 13.4973L2.50001 11.277V3.70876L5.22167 2.41319C5.33977 2.35619 5.42965 2.25649 5.47169 2.13586C5.51372 2.01524 5.50449 1.88349 5.44602 1.7694C5.38754 1.6553 5.28457 1.56814 5.1596 1.52693C5.03462 1.48573 4.89779 1.49383 4.779 1.54948L2.05701 2.84505C1.88938 2.92416 1.74825 3.04712 1.64975 3.19986C1.55125 3.3526 1.49936 3.52895 1.50001 3.70876V11.2767C1.50001 11.6665 1.74101 12.0152 2.11334 12.1651L7.807 14.4634C7.93067 14.5135 8.07033 14.5135 8.194 14.4634L13.887 12.1654C14.0689 12.0922 14.2241 11.9688 14.3332 11.8107C14.4423 11.6525 14.5004 11.4668 14.5 11.277V3.70876C14.5006 3.52899 14.4488 3.35268 14.3503 3.19995C14.2519 3.04722 14.1109 2.92424 13.9433 2.84505Z"
              :fill="cardType == 1 ? '#fff' : 'black'"
            />
          </svg>

          智能体
        </div>
        <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>

      <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" v-if="cardType == 0">
        <!-- <div class="s_b_tape" @click="goTape()"></div> -->
        <div class="s_b_input">
          <el-input
            :disabled="loading || chatLoading || sendFnType == 1"
            v-loading="loading || chatLoading"
            v-if="sendFnType == 0"
            @keyup.enter.native="send()"
            :placeholder="
              sendFnType == 0
                ? '请在此输入您想了解的内容'
                : '请点击录音按钮开始录音'
            "
            class="s_b_i_left"
            v-model="text"
            ref="textRef"
          ></el-input>

          <el-input
            v-loading="loading || chatLoading"
            v-if="sendFnType == 1 && isTalk"
            :readonly="isReadonly"
            @focus="setCursorToEnd"
            placeholder="请说话"
            class="s_b_i_left"
            v-model="text"
            ref="inputEndRef"
          ></el-input>

          <div
            class="s_b_recorded"
            @click.stop="talk()"
            v-loading="loading || chatLoading"
            v-if="sendFnType && !isTalk"
          >
            <span>点击说话</span>
          </div>

          <!-- <div class="s_b_i_right" @click="sendFile()">
            <span></span>
          </div> -->
        </div>
        <div class="s_b_inputBtnArea">
          <el-tooltip
            v-if="sendFnType == 0 && text == '' && !chatLoading"
            class="item"
            effect="light"
            content="语音输入"
            placement="top"
          >
            <span @click.stop="changeFnType(1)">
              <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>
          </el-tooltip>

          <el-tooltip
            v-if="sendFnType == 1 && text == '' && !isTalk && !chatLoading"
            class="item"
            effect="light"
            content="文字输入"
            placement="top"
          >
            <span @click.stop="changeFnType(0)">
              <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>
          </el-tooltip>

          <el-tooltip
            v-if="text == '' && !isTalk && !chatLoading"
            class="item"
            effect="light"
            content="语音助手"
            placement="top"
          >
            <span @click.stop="openPhone">
              <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="M6.84155 5.76478C6.55991 5.4855 6.10327 5.4855 5.82162 5.76478L4.37921 7.1951C4.23486 7.33825 4.18177 7.5001 4.19436 7.6318C4.3842 9.61702 5.57859 12.5019 7.56276 14.4694C9.61252 16.502 11.9775 17.6669 14.4337 17.8187C14.5856 17.8281 14.7568 17.7668 14.8985 17.6263L16.2213 16.3145C16.5253 16.0132 16.4975 15.5167 16.1619 15.2504L14.8224 14.1878C14.5354 13.9602 14.1218 13.9829 13.8619 14.2405L13.3463 14.7518C12.6962 15.3965 11.6475 15.5966 10.809 15.0406C10.2045 14.6397 9.43899 14.0617 8.70643 13.3353C7.92049 12.556 7.30647 11.7387 6.90026 11.1205C6.41585 10.3834 6.52495 9.47493 7.0107 8.83269L7.88884 7.67165C8.10418 7.38693 8.07563 6.98852 7.82185 6.73686L6.84155 5.76478ZM4.80168 4.7534C5.64663 3.91553 7.01655 3.91554 7.86149 4.7534L8.84178 5.72547C9.60314 6.48045 9.6888 7.67569 9.04277 8.52984L8.16462 9.69089C7.99476 9.91548 7.99659 10.169 8.10873 10.3396C8.47364 10.8949 9.02654 11.63 9.72637 12.3239C10.3781 12.9702 11.0661 13.4905 11.6108 13.8516C11.8045 13.9801 12.0985 13.9664 12.3264 13.7404L12.842 13.2292C13.6215 12.4561 14.8626 12.388 15.7235 13.0709L17.063 14.1335C18.0699 14.9323 18.1531 16.4217 17.2413 17.3259L15.9185 18.6377C15.5191 19.0336 14.9558 19.284 14.344 19.2462C11.4699 19.0687 8.78913 17.7083 6.54282 15.4808C4.31506 13.2717 2.97905 10.0743 2.7584 7.76683C2.69877 7.14323 2.96262 6.57704 3.35928 6.18372L4.80168 4.7534Z"
                  fill="#3681FC"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967L19.0303 8.96967C19.3232 9.26256 19.3232 9.73744 19.0303 10.0303C18.7374 10.3232 18.2626 10.3232 17.9697 10.0303L11.9697 4.03033C11.6768 3.73744 11.6768 3.26256 11.9697 2.96967ZM11.2197 7.78033C10.9268 7.48744 10.9268 7.01256 11.2197 6.71967C11.5126 6.42678 11.9874 6.42678 12.2803 6.71967L15.2803 9.71967C15.5732 10.0126 15.5732 10.4874 15.2803 10.7803C14.9874 11.0732 14.5126 11.0732 14.2197 10.7803L11.2197 7.78033Z"
                  fill="#3681FC"
                />
              </svg>
            </span>
          </el-tooltip>

          <el-tooltip
            v-if="isTalk && !chatLoading"
            class="item"
            effect="light"
            content="结束录音"
            placement="top"
          >
            <span @click.stop="stopTalk()">
              <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>
            </span>
          </el-tooltip>

          <el-tooltip
            v-if="sendFnType == 0 && text != '' && !chatLoading"
            class="item"
            effect="light"
            content="发送"
            placement="top"
          >
            <span @click.stop="send()" style="background-color: #3681FC;">
              <svg
                width="22"
                height="22"
                viewBox="0 0 22 22"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.42244 19.8714C8.22794 19.8714 8.04142 19.7941 7.90389 19.6566C7.76636 19.5191 7.6891 19.3325 7.6891 19.138V12.4427C7.6891 12.2227 7.7881 12.0137 7.96044 11.8744L13.9004 7.06005C14.0517 6.94251 14.2429 6.88887 14.4332 6.91061C14.6235 6.93235 14.7977 7.02775 14.9185 7.17636C15.0393 7.32498 15.0971 7.515 15.0795 7.70572C15.0619 7.89644 14.9704 8.07269 14.8244 8.19672L9.15577 12.791V16.9344L10.9378 14.5584C11.1541 14.2687 11.5538 14.1807 11.8728 14.353L14.8281 15.937L18.3334 3.35305C18.4031 3.10738 18.2601 2.95338 18.1941 2.89838C18.1281 2.84338 17.9558 2.72972 17.7248 2.83605L4.4331 9.07305L6.15644 10.063C6.50844 10.2647 6.62944 10.712 6.42777 11.064C6.2261 11.416 5.77877 11.537 5.42677 11.3354L2.48244 9.64505C2.36583 9.57832 2.2699 9.48072 2.20521 9.36297C2.14051 9.24523 2.10957 9.11192 2.11577 8.97772C2.12677 8.70272 2.2881 8.46072 2.53744 8.34338L17.1014 1.50872C17.7834 1.18972 18.5644 1.29238 19.1401 1.78005C19.4203 2.01397 19.6266 2.32417 19.734 2.67302C19.8414 3.02187 19.8452 3.39438 19.7451 3.74538L15.9904 17.213C15.9608 17.3188 15.9078 17.4165 15.8354 17.499C15.7629 17.5815 15.6728 17.6466 15.5718 17.6896C15.4707 17.7325 15.3613 17.7522 15.2516 17.7472C15.1419 17.7421 15.0348 17.7124 14.9381 17.6604L11.7334 15.9407L9.0091 19.578C8.8661 19.765 8.6461 19.8714 8.42244 19.8714Z"
                  fill="white"
                />
              </svg>
            </span>
          </el-tooltip>

          <el-tooltip
            v-if="chatLoading"
            class="item"
            effect="light"
            content="停止发送"
            placement="top"
          >
            <span @click.stop="stopSend()" style="background-color: #3681FC;">
              <svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5.25 4C5.25 3.44772 5.69772 3 6.25 3H8.7C9.25228 3 9.7 3.44772 9.7 4V20C9.7 20.5523 9.25228 21 8.7 21H6.25C5.69772 21 5.25 20.5523 5.25 20V4ZM14.25 4C14.25 3.44772 14.6977 3 15.25 3H17.75C18.3023 3 18.75 3.44772 18.75 4V20C18.75 20.5523 18.3023 21 17.75 21H15.25C14.6977 21 14.25 20.5523 14.25 20V4Z"
                  fill="white"
                  fill-opacity="0.9"
                />
              </svg>
            </span>
          </el-tooltip>
        </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 class="s_b_btn2" @click.stop="openPhone">
					<img :src="require('../../../assets/icon/course/phone.svg')" />
				</div> -->
      </div>

      <div class="s_b_inputArea" v-if="cardType == 1">
        <div class="s_b_input">
          <el-input
            placeholder="搜索想要的智能体"
            class="s_b_i_left"
            v-model="roleText"
          ></el-input>

          <!-- <div class="s_b_i_right" @click="sendFile()">
            <span></span>
          </div> -->
        </div>
        <div class="s_b_inputBtnArea">
          <el-tooltip
            class="item"
            effect="light"
            content="查询"
            placement="top"
          >
            <span style="background-color: #3681FC;">
              <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="M10.568 6.01235C8.05196 6.01235 6.01235 8.05196 6.01235 10.568C6.01235 13.0839 8.05196 15.1235 10.568 15.1235C11.8261 15.1235 12.9643 14.6142 13.7892 13.7892C14.6142 12.9643 15.1235 11.8261 15.1235 10.568C15.1235 8.05196 13.0839 6.01235 10.568 6.01235ZM5 10.568C5 7.49286 7.49286 5 10.568 5C13.643 5 16.1359 7.49286 16.1359 10.568C16.1359 11.923 15.6513 13.1657 14.8468 14.1309L16.6421 15.9262C16.8398 16.1239 16.8398 16.4444 16.6421 16.6421C16.4444 16.8398 16.1239 16.8398 15.9262 16.6421L14.1309 14.8468C13.1657 15.6513 11.923 16.1359 10.568 16.1359C7.49286 16.1359 5 13.643 5 10.568Z" fill="white" fill-opacity="0.9"/>
</svg>

            </span>
          </el-tooltip>
        </div>
      </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,
      tcid2: this.$route.query.tcid,
      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: null,
      cardType: 0,
      roleList: [],
      roleList2: [],
      sortOption: 0, //切换角色 0我的 1 社区
      roleText: "",
      isReadonly: true
    };
  },
  computed: {
    showRoleList() {
      let _result = [];

      if (this.sortOption == 0) {
        _result = this.roleList;
      } else if (this.sortOption == 1) {
        _result = this.roleList2;
      }

      if (this.roleText) {
        _result = _result.filter(
          i => i.assistantName.indexOf(this.roleText) != -1
        );
      }
      return _result;
    },
    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: {
    insertMemorandum(_html) {
      //保存行为操作
      //variable
      //btn
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId + (this.tcid2 ? this.tcid2 : ""),
          content: _html
        }
      ];

      this.ajax
        .post(
          this.$store.state.api + "insert_systemOperation_countdownBehavior",
          params
        )
        .then(res => {
          if (res.data == 1) {
            console.log("保存操作成功");
          } else {
            console.log("保存操作失败");
          }
        })
        .catch(e => {
          console.log("保存操作失败");
          console.log(e);
        });
    },
    openPhone() {
      // this.$message.info("打开电话面板")
      this.$parent.changeItemType(4);
    },
    setDefaultSrc(e) {
      e.target.src = require("../../../assets/icon/course/404.png");
    },
    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;
      };
      // setTimeout(()=>this.text="珠穆朗玛峰的高度",3000)
    },
    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 = [];
      if ((this.cardType = 1)) {
        this.cardType = 0;
      }
      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) {
        this.insertMemorandum(`<span class="btn">搜索视频</span>`);
        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.insertMemorandum(`<span class="btn">生成图片</span>`);
        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) {
        this.insertMemorandum(`<span class="btn">搜索图片</span>`);
        // 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.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}`
      // );
      let 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();
      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];
          source.close();
          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() {
      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.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;

          _data = _data.replaceAll("```json", "").replaceAll("```", "");
          const match = _data.match(/\[\s*{[^]*}\s*\]/);
          console.log(match[0]);
          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;
          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;
      // }
    },
		changeMegaphone(){
			this.$parent.changeMegaphone()
			if(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;
        }
			}
		},
    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) {
      if (
        this.choseRoleItem &&
        this.choseRoleItem.assistant_id == item.assistant_id
      ) {
        return (this.choseRoleItem = null);
      }
      this.choseRoleItem = item;
      this.changeRole();
      console.log("选择角色", this.choseRoleItem);
      // this.scrollBottom();
    },
    noChangeRole() {
      this.cardType = 0;
      this.choseRoleItem = null;
      this.scrollBottom();
    },
    changeRole() {
      this.cardType = 0;
      if (this.choseRoleItem && 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();
        this.insertMemorandum(
          `选择智能体<span class="variable">${this.choseRoleItem.assistantName}</span>`
        );
      }
    },
    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 = this.cardType == 1 ? 0 : 1;
    },
    setCursorToEnd(event) {
      // 获取输入框的原生 DOM 元素
      const inputElement = event.target;

      // 将光标设置到输入框内容的末尾
      inputElement.setSelectionRange(this.text.length, this.text.length);
    }
  },
  mounted() {
    this.getChatList().then(_ => {
      this.scrollBottom();
      this.getWantSearch();
    });
    this.nowChatList = [];
    this.sendType = 0;
    this.initTaskList();
    this.getWorkData();
    this.getPublicRoleList();
    this.getRoleList();
    this.insertMemorandum(`打开<span class="btn">对话</span>面板`);
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.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% - 56px);
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 20px 0;
	position: absolute;
  padding-bottom: 70px;
	top: 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: 15px 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: 15px 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: -35px;
  bottom: 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* transform: translate(0, -30%); */
}

.aiCopy > img {
  margin-right: 5px;
  cursor: pointer;
}
.aiCopy > svg {
  margin-right: 6px;
  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_content >>> ul {
  margin-left: 20px;
}

/* .s_t_c_a_r_content>>> ol{
	margin-left: 20px;
} */

.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: flex-end;
  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_left > span {
  padding: 3px 10px;
  background: #fff;
  box-shadow: 0px 2px 5px 0px #1d398314;
  box-shadow: 0.5px 0.5px 10px 2px #1d39830d;
  border: 0.5px solid #e0eafb;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.s_b_bat_left > span > svg {
  width: 20px;
  height: 20px;
}

.s_b_bat_right > span {
  padding: 3px 10px;
  background: #fff;
  box-shadow: 0px 2px 5px 0px #1d398314;
  box-shadow: 0.5px 0.5px 10px 2px #1d39830d;
  border: 0.5px solid #e0eafb;
  border-radius: 50px;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.s_b_bat_right > span > svg {
  width: 20px;
  height: 20px;
}

.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;
  margin-bottom: 5px;
}

.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: 40px;
  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%;
  display: flex;
  align-items: center;
}

.s_b_recorded {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00000066;
  cursor: pointer;
}

.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_btn2 {
  width: 40px;
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: 0 0 2px 2px gray;
  margin-left: 10px;
}

.s_b_btn2 > 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%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 130px);
}

.choiceTop {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  position: relative;
  bottom: -76px;
  padding-bottom: 30px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(54, 129, 252, 0.6) 100%
  );
}

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

.cb_btn {
  margin: 0 10px;
}

.choiceRoleHeader {
  width: 100%;
  height: 100px;
  display: flex;
  /* margin: 10px; */
}

.choiceRoleHeader > div {
  display: flex;
}

.choiceSelect {
  width: 100%;
  height: calc(50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

.cs_type {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  overflow-y: hidden;
  align-items: center;
}

.cs_type > span {
  width: auto;
  height: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: 0.2s;
}

.cs_typeActive {
  font-weight: bold;
}

.cs_typeActive::after {
  content: "";
  width: 100%;
  height: 4px;
  background-color: #3681fc;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cs_box {
  width: 100%;
  height: calc(100% - 40px);
  overflow-x: hidden;
  box-sizing: border-box;
}

.cs_b_item {
  width: 110px;
  height: 150px;
  border-radius: 8px;
  background-color: #ffffffe5;
  box-sizing: border-box;
  border: solid 1px #ffffffe5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  float: left;
  margin: 5px 0;
  cursor: pointer;
  transition: 0.2s;
}

.cs_b_i_avatar {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
  background-color: #ffffffe5;
	border-radius: 8px;
}

.cs_b_item:hover {
  border-color: #3681fc;
}

.cs_b_i_name {
  font-weight: bold;
  color: #768196;
	font-size: 14px;
}

.cs_b_i_des {
  color: #768196;
	margin-top: 5px;
	font-size: 12px;
}

.cs_box > .cs_b_item:nth-of-type(3n + 2) {
  margin: 5px 8px;
}

.cs_b_itemActive {
  background: #e0eafb !important;
  border-color: #3681fc;
}

.cs_b_itemActive > .cs_b_i_name {
  color: black;
}

.cs_b_item > div {
  margin-top: 10px;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.choiceSelect > .option {
  width: 80px;
  height: 100%;
  border-radius: 5px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.roleInput {
  width: 100%;
  height: 50px;
}

.roleBtn {
  width: 100%;
  height: 50px;
  margin: 5px 0;
}

.roleListBox {
  width: 100%;
  height: calc(100% - 100px - 10px);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.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: auto;
  padding: 10px 0;
  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: 170px;
  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;
}

.s_b_inputBtnArea {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 0 5px; */
}

.s_b_inputBtnArea > span {
  height: 40px;
  padding: 0px 15px;
  background: #f0f2f5;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 5px;
}

.s_b_inputBtnArea > span > svg {
  width: 24px;
  height: 24px;
}
</style>