<template>
  <div class="pocAi">
		<bar :backPage="1" :tit="'聊聊天'"></bar>
    <div class="pa_background">
      <img src="../../assets/images/pocAiClassroom/bg3.png" />
    </div>
    <div class="pa_documentArea" ref="documentAreaRef" v-show="showFileArea">
      <div
        ref="dialogRef"
        class="pa_da_dialog"
        @mouseenter="dialogMouse(0)"
        @mouseleave="dialogMouse(1)"
        :style="
          fullFileDialog
            ? 'width:100vw;height:100vh;border-radius:0;left:0;top:0'
            : `left:${dialogPosition.x}px;top:${dialogPosition.y}px`
        "
      >
        <div
          class="pa_da_d_head"
          ref="dialogHeadRef"
          v-show="showDialogBtn || alwaysShowDialogBtn"
					@touchstart="startMove"
        >
          <div class="pa_da_d_h_left">
            <span
              v-text="showFile.fileName ? showFile.fileName : '查看文件'"
            ></span>
          </div>
          <div class="pa_da_d_h_right">
            <!-- <span
              @click.stop="alwaysShowDialogBtnFn"
              :class="alwaysShowDialogBtn ? 'pa_da_d_h_r_active' : ''"
            >
              <svg
                t="1725429783868"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8906"
                width="200"
                height="200"
              >
                <path
                  d="M935.15 375.34c0-25.38-9.88-49.23-27.83-67.17L727.96 128.8c-37.04-37.04-97.31-37.04-134.35 0L338.53 383.89l-72.74-30.44c-35.71-14.94-76.48-6.91-103.85 20.46l-38.15 38.15c-37.04 37.04-37.04 97.31 0 134.35L282 704.62 127.5 859.13c-13.67 13.67-13.67 35.83 0 49.5 6.83 6.83 15.79 10.25 24.75 10.25s17.92-3.42 24.75-10.25l154.5-154.51 158.21 158.21c17.94 17.94 41.8 27.83 67.18 27.83s49.23-9.88 67.17-27.83l38.15-38.15c27.37-27.37 35.4-68.14 20.46-103.85l-30.44-72.74L907.32 442.5c17.95-17.93 27.83-41.79 27.83-67.16z m-77.33 17.67l-262.2 262.2c-15.85 15.85-20.5 39.45-11.85 60.12l34.32 82.02c3.93 9.4 1.82 20.13-5.38 27.33l-38.15 38.15c-4.72 4.72-11 7.32-17.68 7.32s-12.96-2.6-17.68-7.32L173.29 496.91c-9.75-9.75-9.75-25.61 0-35.36l38.15-38.15c4.8-4.8 11.16-7.34 17.65-7.34 3.25 0 6.54 0.64 9.68 1.95l82.02 34.32c20.68 8.65 44.28 4 60.12-11.85l262.2-262.2c9.75-9.75 25.61-9.75 35.36 0l179.36 179.36c9.74 9.77 9.74 25.63-0.01 35.37z"
                  p-id="8907"
                ></path>
              </svg>
            </span> -->
            <span v-if="!fullFileDialog" @click.stop="fullFileDialogFn()">
              <svg
                t="1725429213369"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5406"
                width="200"
                height="200"
              >
                <path
                  d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
                  p-id="5407"
                ></path>
              </svg>
            </span>
            <span v-else @click.stop="fullFileDialogFn()">
              <svg
                t="1725429227791"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5560"
                width="200"
                height="200"
              >
                <path
                  d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
                  p-id="5561"
                ></path>
              </svg>
            </span>

            <span @click.stop="showFileArea = !showFileArea">
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M14.8669 5.77596C15.0444 5.59845 15.0444 5.31064 14.8669 5.13313C14.6894 4.95562 14.4016 4.95562 14.2241 5.13313L9.99996 9.35729L5.77595 5.13326C5.59844 4.95575 5.31064 4.95575 5.13313 5.13326C4.95562 5.31077 4.95562 5.59857 5.13313 5.77608L9.35714 10.0001L5.1333 14.224C4.95579 14.4015 4.95579 14.6893 5.1333 14.8668C5.31081 15.0443 5.59861 15.0443 5.77612 14.8668L9.99996 10.6429L14.2239 14.8669C14.4014 15.0444 14.6892 15.0444 14.8667 14.8669C15.0443 14.6894 15.0443 14.4016 14.8667 14.2241L10.6428 10.0001L14.8669 5.77596Z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div class="pa_da_d_content">
          <vword
            style="width: 100%; height: 100% ; overflow: hidden"
            class="fullStyle"
            v-if="
              showFile.type == 2 && !['pdf', 'txt'].includes(showFile.suffix)
            "
            :pdfUrl="
              'https://view.officeapps.live.com/op/view.aspx?src=' +
                showFile.url
            "
          />
          <vpdf
            style="width: 100%;  height: 100%; overflow: hidden"
            class="fullStyle"
            :pdfUrl="showFile.url"
            v-if="showFile.type == 2 && ['pdf'].includes(showFile.suffix)"
          />

          <txtView
            style="width: 100%;height: 100%"
            v-if="showFile.type == 2 && ['txt'].includes(showFile.suffix)"
            :url="showFile.url"
          />

          <div class="pa_da_Image" v-if="showFile.type == 1">
            <el-image
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="showFile.url"
              :preview-src-list="[showFile.url]"
            >
            </el-image>
          </div>

          <div class="pa_da_Video" v-if="showFile.type == 3">
            <video-player
              style="width: 100%;max-height:100%;display: flex;justify-content: center;align-items: center;overflow: auto;"
              :playsinline="true"
              :options="showFile.videoOption"
            ></video-player>
          </div>
        </div>
        <div
          class="pa_da_d_bottom"
          v-show="showDialogBtn || alwaysShowDialogBtn"
        >
          <div></div>
          <div>
            <div class="pa_da_d_b_r_contentList">
              <span @click.stop="showDialogFileList = !showDialogFileList">
                <img
                  src="../../assets/images/pocAiClassroom/fileIcon.svg"
                />
                内容列表
              </span>

              <div class="pa_da_d_b_r_cl_fileList" v-if="showDialogFileList" v-click-outside="()=>showDialogFileList = false">
                <div
                  v-for="(item, index) in fileList"
                  :key="index"
                  :class="
                    showFile.url === item.fileUrl
                      ? 'pa_da_d_b_r_cl_fl_active'
                      : ''
                  "
                  @click.stop="showFileFn(item)"
                >
                  <span>{{ item.fileName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pa_chatArea">
      <!-- <div class="pa_ca_back" @click.stop="back()">返回</div> -->
      <!-- <div class="pa_ca_header">
        <span v-text="chatTitle"></span>
      </div> -->
      <div class="pa_ca_chat" v-loading="loading">
        <div
          class="pa_ca_c_list"
          ref="chatListRef"
        >
          <div v-for="(item, index) in chatList" :key="index">
            <div class="userChat" v-if="item.content">
              <div class="uc_left">
                <div class="chatName">科科</div>
                <div class="chatMessage">
                  <span v-text="item.content"></span>
                  <div class="cm_btnArea">
                    <span @click.stop="copy(item.content)">
                      <svg
                        width="12"
                        height="12"
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M2.76904 1.3171C2.76904 0.588877 3.35938 -0.00146484 4.08761 -0.00146484H10.6804C11.4087 -0.00146484 11.999 0.588876 11.999 1.3171V7.90992C11.999 8.63814 11.4087 9.22849 10.6804 9.22849H4.08761C3.35938 9.22849 2.76904 8.63814 2.76904 7.90992V1.3171ZM4.08761 0.987458C3.90555 0.987458 3.75797 1.13504 3.75797 1.3171V7.90992C3.75797 8.09198 3.90555 8.23956 4.08761 8.23956H10.6804C10.8625 8.23956 11.0101 8.09198 11.0101 7.90992V1.3171C11.0101 1.13504 10.8625 0.987458 10.6804 0.987458H4.08761Z"
                          fill="#333333"
                        />
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M1.31856 3.75748C1.13651 3.75748 0.988923 3.90506 0.988923 4.08712V10.6799C0.988923 10.862 1.13651 11.0096 1.31856 11.0096H7.91139C8.09344 11.0096 8.24103 10.862 8.24103 10.6799V9.85584C8.24103 9.58275 8.46241 9.36138 8.73549 9.36138C9.00857 9.36138 9.22995 9.58275 9.22995 9.85584V10.6799C9.22995 11.4082 8.63961 11.9985 7.91139 11.9985H1.31856C0.590342 11.9985 0 11.4082 0 10.6799V4.08712C0 3.3589 0.590341 2.76855 1.31856 2.76855H2.14267C2.41575 2.76855 2.63713 2.98993 2.63713 3.26302C2.63713 3.5361 2.41575 3.75748 2.14267 3.75748H1.31856Z"
                          fill="#333333"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
              <div class="uc_right">
                <el-avatar
                  class="chatAvatar"
                  :src="require('../../assets/images/pocAiClassroom/defaultAvatar.png')"
                ></el-avatar>
              </div>
            </div>
            <div class="aiChat">
              <div class="ac_left">
                <el-avatar
                  class="chatAvatar"
                  :src="require('../../assets/images/pocAiClassroom/character1.png')"
                ></el-avatar>
              </div>
              <div class="ac_right">
                <div class="chatName"><span>圆鼓鼓的大胖鱼</span></div>
                <div
                  class="chatMessage"
                  v-loading="item.loading"
                  :style="item.loading ? 'border:none' : ''"
                >
                  <span v-html="item.aiContent"></span>
                  <div class="cm_btnArea">
                    <span @click.stop="copy(item.aiContent)">
                      <svg
                        width="12"
                        height="12"
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M2.76904 1.3171C2.76904 0.588877 3.35938 -0.00146484 4.08761 -0.00146484H10.6804C11.4087 -0.00146484 11.999 0.588876 11.999 1.3171V7.90992C11.999 8.63814 11.4087 9.22849 10.6804 9.22849H4.08761C3.35938 9.22849 2.76904 8.63814 2.76904 7.90992V1.3171ZM4.08761 0.987458C3.90555 0.987458 3.75797 1.13504 3.75797 1.3171V7.90992C3.75797 8.09198 3.90555 8.23956 4.08761 8.23956H10.6804C10.8625 8.23956 11.0101 8.09198 11.0101 7.90992V1.3171C11.0101 1.13504 10.8625 0.987458 10.6804 0.987458H4.08761Z"
                          fill="#333333"
                        />
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M1.31856 3.75748C1.13651 3.75748 0.988923 3.90506 0.988923 4.08712V10.6799C0.988923 10.862 1.13651 11.0096 1.31856 11.0096H7.91139C8.09344 11.0096 8.24103 10.862 8.24103 10.6799V9.85584C8.24103 9.58275 8.46241 9.36138 8.73549 9.36138C9.00857 9.36138 9.22995 9.58275 9.22995 9.85584V10.6799C9.22995 11.4082 8.63961 11.9985 7.91139 11.9985H1.31856C0.590342 11.9985 0 11.4082 0 10.6799V4.08712C0 3.3589 0.590341 2.76855 1.31856 2.76855H2.14267C2.41575 2.76855 2.63713 2.98993 2.63713 3.26302C2.63713 3.5361 2.41575 3.75748 2.14267 3.75748H1.31856Z"
                          fill="#333333"
                        />
                      </svg>
                    </span>
                  </div>
                  <!-- <template v-html="item.aiContent"></template> -->
                </div>
                <div class="ac_r_btnArea">
                  <span @click.stop="checkFile()">查看文件</span>
                  <!-- <span @click.stop="sendChat('A')">A：不知道</span>
                  <span @click.stop="sendChat('B')">B：选A</span>
                  <span @click.stop="sendChat('C')">C：选B</span> -->
                </div>
                <!-- <div class="ac_r_time">2024-08-26 14:31:45</div> -->
              </div>
            </div>
          </div>
        </div>
        <div
          class="pa_ca_c_bottom"
         
        >
          <div class="pa_ca_c_b_inputArea">
						<el-input class="pa_ca_c_b_ia_input" v-model="chatValue"  ref="textAreaRef"  placeholder="请在此输入您想了解的内容"  :disabled="source != null"></el-input>
            <!-- <textarea
              id="myTextarea"
              ref="textAreaRef"
              min-rows="1"
              max-rows="5"
              v-model="chatValue"
              placeholder="你有任何想法，可以随时告诉我呀"
              autosize="none"
              :disabled="source != null"
            ></textarea> -->
            <div class="pa_ca_c_b_btnArea">
              <span :class="['pa_ca_c_b_ba_btn',source?'pa_ca_c_b_ba_btnDisabled':'']" @click="sendChat">
                <svg
                  t="1724748020468"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7309"
                  width="200"
                  height="200"
                >
                  <path
                    d="M931.392 11.264L45.12 530.688c-28.736 16.896-43.52 39.424-45.12 61.248v8.128c2.048 26.112 23.04 49.984 61.632 60.416l171.968 46.592a34.304 34.304 0 0 0 41.28-25.536 35.584 35.584 0 0 0-23.808-43.136L79.68 592l873.408-511.872-95.232 703.488c-1.408 10.432-9.152 15.68-18.752 12.992l-365.632-100.288 296.32-305.856a36.416 36.416 0 0 0 0-50.24 33.728 33.728 0 0 0-48.704 0l-324.8 335.36a110.72 110.72 0 0 0-7.872 9.088 35.52 35.52 0 0 0-16.128 30.784 104 104 0 0 0-5.248 32.64v206.4c0 49.664 53.568 79.168 93.568 51.712l166.272-114.368c10.24-6.976 16-19.136 15.232-31.872a35.712 35.712 0 0 0-19.2-29.504 33.28 33.28 0 0 0-34.24 2.304L435.84 937.856v-178.432l385.472 105.6c49.6 13.632 97.472-19.072 104.576-71.808l97.152-717.568c8.448-60.48-40-94.72-91.648-64.384z"
                    p-id="7310"
                  ></path>
                </svg>
              </span>
              <!-- <el-button
                class="pa_ca_c_b_ba_btn"
                type="primary"
                @click="sendChat"
                >发送</el-button
              > -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vpdf from "./component/vpdf.vue";
import vword from "./component/vword.vue";
import txtView from "./component/txtView.vue";
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
import {getChatListRequest,insertChatListRequest,aiChatRequest,aiRoleChatRequest} from '@/api/pocAiClassroom'
import bar from './component/bar.vue'
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  }
};

export default {
  components: {
    vpdf,
    vword,
    txtView
  },
  data() {
    return {
      userId: this.$store.state.user.userinfo.userid,
      org: this.$store.state.user.userinfo.org,
      oid: this.$store.state.user.userinfo.organizeid,
      showFileIndex: 0,
      showFileArea: false,
      fullFileDialog: false,
      showDialogBtn: false,
      alwaysShowDialogBtn: true,
      showDialogFileList: false,
      dialogIsMove: false,
      dialogPosition: {
				dialogWidth:0,
				dialogHeight:0,
        x: 0,
        y: 40,
        oldX: 0,
        oldY: 0
      },
      chatValue: "",
      source: null,
      loading: false,
      chatTitle: "第一章 声音的原理",
      showFileUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
      chatList: [
        {
          loading: false,
          role: "user",
          content: "哇卡哇卡",
          uid: "d601788a-5ece-11ef-826e-12e77c4cb76b",
          AI: "AI",
          aiContent:
            "<p>&quot;哇卡哇卡&quot; 是夏奇拉（Shakira）的一首非常知名的歌曲，全名是《Waka Waka (This Time for Africa)》。这首歌是2010年南非世界杯的官方主题曲，充满了非洲音乐元素和动感节奏，广受欢迎。如果你对这首歌或其意义感兴趣，可以分享更多你的想法！</p>\n",
          oldContent:
            "<p>&quot;哇卡哇卡&quot; 是夏奇拉（Shakira）的一首非常知名的歌曲，全名是《Waka Waka (This Time for Africa)》。这首歌是2010年南非世界杯的官方主题曲，充满了非洲音乐元素和动感节奏，广受欢迎。如果你对这首歌或其意义感兴趣，可以分享更多你的想法！</p>\n",
          isShowSynchronization: false,
          filename: "",
          index: 0,
          is_mind_map: false,
          fileid: "",
          createtime: "2024-08-20 08:33:11"
        },
        {
          loading: false,
          role: "user",
          content: "最近中国有什么好的游戏可以玩吗\n",
          uid: "e23485ec-5ece-11ef-826e-12e77c4cb76b",
          AI: "AI",
          aiContent:
            "<p>最近中国有几款备受关注的游戏，以下是其中一些推荐：</p>\n<ol>\n<li>\n<p><strong>《原神》</strong> - 这是一款由miHoYo开发的开放世界角色扮演游戏，以其精美的画面和开放的世界探索而受到广泛好评。</p>\n</li>\n<li>\n<p><strong>《崩坏：星穹铁道》</strong> - 也是miHoYo开发的作品，作为《崩坏》系列的新作，这款游戏结合了科幻元素和回合制战斗机制。</p>\n</li>\n<li>\n<p><strong>《阴阳师》</strong> - 由网易开发的卡牌策略游戏，以其独特的美术风格和丰富的剧情设定而受到玩家喜爱。</p>\n</li>\n<li>\n<p><strong>《和平精英》</strong> - 这是一款由腾讯光子工作室群开发的多人在线战术竞技类游戏，是中国版的《PUBG Mobile》。</p>\n</li>\n<li>\n<p><strong>《剑网3：缘起》</strong> - 西山居开发的一款大型多人在线角色扮演游戏（MMORPG），以其经典的武侠元素和深厚的剧情吸引了大量玩家。</p>\n</li>\n</ol>\n<p>这些游戏在画质、玩法和社交性方面各有特色，你可以根据自己的兴趣和偏好进行选择体验。</p>\n",
          oldContent:
            "<p>最近中国有几款备受关注的游戏，以下是其中一些推荐：</p>\n<ol>\n<li>\n<p><strong>《原神》</strong> - 这是一款由miHoYo开发的开放世界角色扮演游戏，以其精美的画面和开放的世界探索而受到广泛好评。</p>\n</li>\n<li>\n<p><strong>《崩坏：星穹铁道》</strong> - 也是miHoYo开发的作品，作为《崩坏》系列的新作，这款游戏结合了科幻元素和回合制战斗机制。</p>\n</li>\n<li>\n<p><strong>《阴阳师》</strong> - 由网易开发的卡牌策略游戏，以其独特的美术风格和丰富的剧情设定而受到玩家喜爱。</p>\n</li>\n<li>\n<p><strong>《和平精英》</strong> - 这是一款由腾讯光子工作室群开发的多人在线战术竞技类游戏，是中国版的《PUBG Mobile》。</p>\n</li>\n<li>\n<p><strong>《剑网3：缘起》</strong> - 西山居开发的一款大型多人在线角色扮演游戏（MMORPG），以其经典的武侠元素和深厚的剧情吸引了大量玩家。</p>\n</li>\n</ol>\n<p>这些游戏在画质、玩法和社交性方面各有特色，你可以根据自己的兴趣和偏好进行选择体验。</p>\n",
          isShowSynchronization: false,
          filename: "",
          index: 1,
          is_mind_map: false,
          fileid: "",
          createtime: "2024-08-20 08:33:32"
        },
        {
          loading: false,
          role: "user",
          content: "你这是多少年的数据了",
          uid: "eaa6c091-5ece-11ef-826e-12e77c4cb76b",
          AI: "AI",
          aiContent:
            "<p>我掌握的数据截止到2023年，是经过培训和处理的历史数据。有什么我可以帮你的吗？</p>\n",
          oldContent:
            "<p>我掌握的数据截止到2023年，是经过培训和处理的历史数据。有什么我可以帮你的吗？</p>\n",
          isShowSynchronization: false,
          filename: "",
          index: 2,
          is_mind_map: false,
          fileid: "",
          createtime: "2024-08-20 08:33:46"
        },
        {
          loading: false,
          role: "user",
          content: "巴黎奥运会怎么样了",
          uid: "f9188e27-5ece-11ef-826e-12e77c4cb76b",
          AI: "AI",
          aiContent:
            "<p>截至我最近的更新信息，巴黎奥运会将在2024年举行。具体情况包括：</p>\n<ol>\n<li>\n<p><strong>日期和地点</strong>：巴黎奥运会计划于2024年7月26日至8月11日举行。比赛将在法国巴黎及其周边地区的各大场馆进行。</p>\n</li>\n<li>\n<p><strong>项目</strong>：2024年巴黎奥运会预计将包括32个大项，覆盖从田径到游泳等传统项目，同时可能也会引入一些新的项目或调整现有项目的设置。</p>\n</li>\n<li>\n<p><strong>准备工作</strong>：巴黎方面正在积极进行场馆建设与改造、城市基础设施的提升以及各种筹备工作，以确保赛事顺利进行。</p>\n</li>\n<li>\n<p><strong>可持续性与创新</strong>：巴黎奥运会提出了“可持续性”与“创新”的理念，致力于通过多种方式（如使用临时设施、推广绿色交通等）减少对环境的影响。</p>\n</li>\n</ol>\n<p>具体的进展和变化可能会随着时间推移有所不同。要了解更多的信息和最新动态，可以关注巴黎奥组委的官方网站或相关的新闻报道。</p>\n",
          oldContent:
            "<p>截至我最近的更新信息，巴黎奥运会将在2024年举行。具体情况包括：</p>\n<ol>\n<li>\n<p><strong>日期和地点</strong>：巴黎奥运会计划于2024年7月26日至8月11日举行。比赛将在法国巴黎及其周边地区的各大场馆进行。</p>\n</li>\n<li>\n<p><strong>项目</strong>：2024年巴黎奥运会预计将包括32个大项，覆盖从田径到游泳等传统项目，同时可能也会引入一些新的项目或调整现有项目的设置。</p>\n</li>\n<li>\n<p><strong>准备工作</strong>：巴黎方面正在积极进行场馆建设与改造、城市基础设施的提升以及各种筹备工作，以确保赛事顺利进行。</p>\n</li>\n<li>\n<p><strong>可持续性与创新</strong>：巴黎奥运会提出了“可持续性”与“创新”的理念，致力于通过多种方式（如使用临时设施、推广绿色交通等）减少对环境的影响。</p>\n</li>\n</ol>\n<p>具体的进展和变化可能会随着时间推移有所不同。要了解更多的信息和最新动态，可以关注巴黎奥组委的官方网站或相关的新闻报道。</p>\n",
          isShowSynchronization: false,
          filename: "",
          index: 3,
          is_mind_map: false,
          fileid: "",
          createtime: "2024-08-20 08:34:10"
        },
        {
          loading: false,
          role: "user",
          content: "巴黎奥运会有哪些国家参加",
          uid: "0aedaebd-5ecf-11ef-826e-12e77c4cb76b",
          AI: "AI",
          aiContent:
            "<p>巴黎奥运会将于2024年举行，由于奥运会是由国际奥林匹克委员会（IOC）组织的，通常大多数国家都会派代表团参加，包括几乎所有联合国成员国和一些地区或地区代表队。截至目前，具体参赛的国家和地区名单尚未最终确定，但预计将会有200多个国家和地区参加。如果你想了解最新的参赛国家名单，建议关注国际奥林匹克委员会的官方网站或相关最新新闻。</p>\n",
          oldContent:
            "<p>巴黎奥运会将于2024年举行，由于奥运会是由国际奥林匹克委员会（IOC）组织的，通常大多数国家都会派代表团参加，包括几乎所有联合国成员国和一些地区或地区代表队。截至目前，具体参赛的国家和地区名单尚未最终确定，但预计将会有200多个国家和地区参加。如果你想了解最新的参赛国家名单，建议关注国际奥林匹克委员会的官方网站或相关最新新闻。</p>\n",
          isShowSynchronization: false,
          filename: "",
          index: 4,
          is_mind_map: false,
          fileid: "",
          createtime: "2024-08-20 08:34:40"
        }
      ],
      fileList: [
        {
          //docx
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%A0%A1%E7%BA%A7%E5%88%9B%E5%AE%A2%E9%A1%B9%E7%9B%AE%E7%BB%93%E9%A2%98%E7%94%B3%E8%AF%B7%E4%B9%A6-%E5%88%9B%E6%96%B0%E5%88%9B%E4%B8%9A%E5%AD%A6%E9%99%A21724638848483.docx",
          fileId: "file-xUxtMlJu7PoDBvzZg1JCegtM",
          fileName: "这是一个DOCX文件"
        },
        {
          //xlsx
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724640873576.xlsx",
          fileId: "file-61KteMZxNwzjJQFRdlwtdpmg",
          fileName: "这是一个XLSX文件"
        },
        {
          //ppt
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641111983.pptx",
          fileId: "",
          fileName: "这是一个PPT文件"
        },
        {
          //pdf
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%88%9B%E4%BD%9C%E4%B8%AD%E5%BF%83%E5%8E%9F%E5%9E%8B%E5%9B%BE1724641155668.pdf",
          fileId: "file-1ldbT8Ztg5QQPUucJs2FpLAJ",
          fileName: "这是一个PDF文件"
        },
        {
          //jpg
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%B5%8B%E8%AF%951724641221681.jpg",
          fileId: "",
          fileName: "这是一个JPG文件"
        },
        {
          //mp4
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/c3e87dc3-d5ab-4a1f-a519-63d903a270f8%2F2024-08-09+17-07-50.mp4",
          fileId: "",
          fileName: "这是一个MP4文件"
        },
        {
          //txt
          fileUrl:
            "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/ktgc31724643097906.txt",
          fileId: "file-YSVSAsDGvtiWJQ6mWf7ZdupA",
          fileName: "这是一个TXT文件"
        }
      ],
      canonical: {
        Image: /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
        File: /^https?:\/\/(.+\/)+.+(\.(docx|doc|xlsx|ppt|pdf|pptx|txt))$/i,
        video: /^https?:\/\/(.+\/)+.+(\.(avi|wmv|mpg|mpeg|mov|rm|ram|mp4|swf|flv))$/i
      }
    };
  },
	components:{
		bar
	},
	directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  computed: {
		dialogWidth(){
			if(!this.$refs.documentAreaRef)return 0
			return this.$refs.documentAreaRef.offsetWidth
		},
    showFile() {
      let result = {
        type: 0,
        suffix: "",
        url: "",
        videoOption: null,
        fileName: ""
      }; //0:无 1:图片 2:文件 3:视频
      if (this.showFileUrl) {
        result.url = this.showFileUrl;
        result.fileName = this.fileList.find(
          i => i.fileUrl == this.showFileUrl
        ).fileName;
        if (this.canonical.Image.test(this.showFileUrl)) {
          result.type = 1;
          result.suffix = this.showFileUrl.split(".").pop();
        } else if (this.canonical.File.test(this.showFileUrl)) {
          result.type = 2;
          result.suffix = this.showFileUrl.split(".").pop();
        } else if (this.canonical.video.test(this.showFileUrl)) {
          result.type = 3;
          result.videoOption = {
            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
            autoplay: false, //如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: "zh-CN",
            aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: this.showFileUrl,
            // poster: "https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=600y500", // 你的封面地址
            notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true,
              durationDisplay: true,
              remainingTimeDisplay: false,
              fullscreenToggle: true // 全屏按钮
            }
          };
          result.suffix = this.showFileUrl.split(".").pop();
        }
      }
      return result;
    }
  },
  methods: {
    chatListScrollBottom() {
      this.$nextTick(() => {
        this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight;
      });
    },
    sendChat(_text = this.chatValue) {
      if (this.source) return this.$toast("还在对话中，请稍等");
      if (typeof _text !== "string") _text = this.chatValue;
      if (!_text.trim()) return;
      this.chatValue = "";
      var OpenCC = require("opencc-js");
      let converter = OpenCC.Converter({
        from: "cn",
        to: "hk"
      });
      const _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,
        createtime: new Date().toLocaleString().replaceAll("/", "-"),
        loading: true
      });
      this.chatListScrollBottom();

      // 连续对话设置
      let _historyMessage = [];

      _historyMessage.push({ role: "user", content: _text });

      let params = {
        assistant_id: "f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b",
        userId: this.userId,
        message: _text,
        session_name: `${_uuid}-pocAi-md`,
        uid: _uuid,
        file_ids: [],
        model: "gpt-4o-2024-08-06"
      };

      aiRoleChatRequest(params)
        .then(res => {
          if (
            converter(res.FunctionResponse.result) == converter("发送成功")
          ) {
          } else {
            console.log(res.FunctionResponse.result);
          }
        })
        .catch(e => {
          console.log(e);
        });
      this.getAtAuContent(_uuid);
    },
    getAtAuContent(_uid) {
      this.source = new EventSource(
        `https://gpt4.cocorobo.cn/question/${_uid}`
      );
      let _allText = "";
      let _mdText = "";
      const md = new MarkdownIt();
      this.source.onmessage = _e => {
        let _eData = JSON.parse(_e.data);
        if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
          let _result = [];
          if ("result" in _eData) {
            _result = _eData.result;
            for (let i = 0; i < _result.length; i++) {
              _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
            }
          }
          _mdText = _mdText.replace("_", "");
          this.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.source.close();
          this.source = null;
          this.chatListScrollBottom();
          this.insertChat(_uid);
        } else {
          // _index += 1;
          let _text = _eData.content.replace("'", "").replace("'", "");
          if (_allText == "") {
            _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
          } else {
            _allText += _text;
          }
          _mdText = _allText + "_";
          _mdText = _mdText.replace(/\\n/g, "\n");
          _mdText = _mdText.replace(/\\/g, "");

          if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
          //转化返回的回复流数据
          _mdText = md.render(_mdText);
          // if (_index == 10) {
          this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
          this.chatList.find(i => i.uid == _uid).loading = false;
          this.chatListScrollBottom();
          // _index = 0;
          // }
          // 处理流数据
        }
      };
    },
    //保存消息
    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: "qwertyuiop-poc",
        answer: _data.aiContent,
        problem: _data.content,
        file_id: _data.fileid ? _data.fileid : "",
        alltext: _data.aiContent,
        type: "chat",
        filename: _data.filename,
        session_name: `pocAi-md` //这是对话记录位置
      };
			insertChatListRequest(params)
        .then(res => {});
    },
    // 获取对应的聊天记录
    getChatList() {
      return new Promise((resolve, reject) => {
        if (this.loading) return this.$toast("请稍等...");
        this.chatList = [];
        this.loading = true;
        let params = {
          userid: this.userId,
          groupid: "qwertyuiop-poc",
          // session_name:``
          session_name: `pocAi-md`
        };
        getChatListRequest(params)
          .then(res => {
            let _data = JSON.parse(res.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;
            }
            this.chatListScrollBottom();
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$toast.fail("获取对话记录失败");
            this.loading = false;
            resolve();
          });
      });
    },
    checkFile(url = "") {
      if (url) {
        this.showFileUrl = url;
      } else {
        const _index = Math.floor(Math.random() * this.fileList.length);
        this.showFileUrl = this.fileList[_index].fileUrl;
      }
      this.showFileArea = true;
    },
    back() {
      this.$router.push(
        `/pocAiClassroom`
      );
    },
    copy(_content) {
      // 创建临时textarea元素
      const tempInput = document.createElement("textarea");
      tempInput.value = _content.replace(/<[^>]+>/g, ""); // 设置要复制的内容
      // 隐藏元素
      tempInput.style.position = "absolute";
      tempInput.style.left = "-9999px";
      // 将元素添加到DOM中
      document.body.appendChild(tempInput);
      // 选中元素内容
      tempInput.select();
      // 执行复制操作
      document.execCommand("copy");
      // 移除临时元素
      document.body.removeChild(tempInput);
      this.$toast.success("复制成功");
    },
    alwaysShowDialogBtnFn() {
      this.alwaysShowDialogBtn = !this.alwaysShowDialogBtn;
    },
    fullFileDialogFn() {
      this.fullFileDialog = !this.fullFileDialog;
    },
    dialogMouse(type = 1) {
      // console.log(e.offsetY)
      // const y = e.offsetY;
      // console.log(this.$refs.dialogRef.offsetHeight)
      // // const height = this.$refs.dialogRef
      // if(y <= (100+50)){
      // 	this.showDialogBtn = true;
      // }else if(y>=(700-50)){
      // 	this.showDialogBtn = true;
      // }else{
      // 	if(this.showDialogFileList)return;
      // 	this.showDialogBtn = false;
      // }
      // this.showDialogBtn = true
      // console.log(e)
			if(this.alwaysShowDialogBtn)return;
      if (type == 1) {
        this.showDialogBtn = false;
				this.showDialogFileList = false;
      } else if (type == 0) {
        this.showDialogBtn = true;
      }
    },
    showFileFn(item) {
      this.showFileUrl = item.fileUrl;
      this.showDialogFileList = false;
    },
    //移动Dialog框
    startMove(e) {
      if (this.fullFileDialog) return;
			console.log("开始移动")
      this.dialogIsMove = true;
      this.dialogPosition.oldX = e.touches[0].clientX - this.dialogPosition.x;
      this.dialogPosition.oldY = e.touches[0].clientY - this.dialogPosition.y;
      // document.addEventListener("mousemove", this.moveDialog);
      // document.addEventListener("mouseup", this.stopMove);

			document.addEventListener('touchmove', this.moveDialog)
			document.addEventListener('touchend', this.stopMove)
    },
    moveDialog(e) {
      if (this.dialogIsMove) {
        // 获取窗口的宽度和高度
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        // 获取对话框的宽度和高度
				console.log(this.$refs.dialogRef.offsetWidth,this.$refs.dialogRef.offsetHeight,windowWidth,windowHeight)
        const dialogWidth = this.$refs.dialogRef.offsetWidth;
        const dialogHeight = this.$refs.dialogRef.offsetHeight;

        // 计算新位置
        let newX = e.touches[0].clientX - this.dialogPosition.oldX;
        let newY = e.touches[0].clientY - this.dialogPosition.oldY;
 
        // 边界检查：确保对话框不会穿过边缘
        if (newX < 0) newX = 0;
        if (newY < 40) newY = 40;
        if (newX > windowWidth - dialogWidth) newX = windowWidth - dialogWidth;
        if (newY > windowHeight - dialogHeight)
          newY = windowHeight - dialogHeight;

        // 更新对话框的位置
        this.dialogPosition.x = newX;
        this.dialogPosition.y = newY;
        // this.dialogPosition.x = e.clientX - this.dialogPosition.oldX;
        // this.dialogPosition.y = e.clientY - this.dialogPosition.oldY;
      }
    },
    stopMove() {
      this.dialogIsMove = false;
			document.removeEventListener('touchmove', this.moveDialog)
			document.removeEventListener('touchend', this.stopMove)
      // document.removeEventListener("mousemove", this.moveDialog);
      // document.removeEventListener("mouseup", this.stopMove);
    }
  },
  mounted() {
    this.getChatList();
		this.$nextTick(()=>{
		})
  }
};
</script>

<style scoped>
.pocAi {
  width: 100vw;
  height: 100vh;
  display: flex;
  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
  box-sizing: border-box;
  background-color: black;
	padding-top: 40px;
}

.pa_background {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  /* opacity: 0.7; */
  z-index: 1;
}

.pa_background > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pa_documentArea {
  width: 0;
  height: 0;
  box-sizing: border-box;
  z-index: 4;
}

.pa_da_dialog {
  width: 100vw;
  height: 300px;
  background-color: #fff;
  opacity: 1;
  border-radius: 0px;
  position: fixed;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #ffffff8c;
  box-shadow: 0px 8px 10px -5px #00000014;

  box-shadow: 0px 16px 24px 2px #0000000a;

  box-shadow: 0px 6px 30px 5px #0000000d;
}

.pa_da_d_head {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
	cursor: move;
  z-index: 3;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.pa_da_d_head {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.pa_da_d_h_left {
  font-size: 18px;
}

.pa_da_d_h_left > span {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin-left: 10px;
  color: #fff;
}

.pa_da_d_h_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa_da_d_h_r_active {
  background: #ffffff38;
  border-radius: 8px;
}

.pa_da_d_h_right > span {
  width: 25px;
  height: 25px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa_da_d_h_right > span > svg {
  width: 90%;
  height: 90%;
  fill: #fff;
  cursor: pointer;
}

.pa_da_d_content {
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: auto;
  z-index: 2;
  position: relative;
}

.pa_da_d_bottom {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 3;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

.pa_da_d_b_r_contentList {
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  position: relative;
}

.pa_da_d_b_r_contentList > span {
  padding: 7px 15px;
  background: #ffffff38;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}

.pa_da_d_b_r_contentList > span > img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.pa_da_d_b_r_cl_fileList {
  width: 180px;
  height: 200px;
  position: absolute;
  bottom: 45px;
  right: 10px;
  background: #00000099;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 4px;
  box-shadow: 0px 5px 5px -3px #0000001a;

  box-shadow: 0px 8px 10px 1px #0000000f;

  box-shadow: 0px 3px 14px 2px #0000000d;
  overflow: auto;
}

.pa_da_d_b_r_cl_fileList > div {
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 0 10px;
  transition: 0.3s;
}

.pa_da_d_b_r_cl_fileList > div > span {
  font-size: 14px;
  cursor: pointer;
  color: #ffffff8c;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.pa_da_d_b_r_cl_fileList > .pa_da_d_b_r_cl_fl_active {
  background-color: #3681fc !important;
  color: #ffffff8c !important;
}

.pa_da_d_b_r_cl_fileList > .pa_da_d_b_r_cl_fl_active > span {
  color: #fff !important;
}
.pa_da_d_b_r_cl_fileList > div:hover {
  background-color: #ffffff36;
}

.pa_da_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
}

.pa_da_head > span {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
}

.pa_da_Image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e2e2e2;
  box-sizing: border-box;
  padding: 20px;
}

.pa_da_Video {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e2e2e2;
  box-sizing: border-box;
  padding: 20px 20px 40px 20px;
}

.pa_da_Video >>> .video-js {
  width: 100%;
  height: 100%;
}

.pa_da_Video >>> .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pa_chatArea {
  width: 100vw;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.pa_ca_back {
  font-size: 20px;
  cursor: pointer;
	z-index: 3;
}

.pa_ca_back {
  position: absolute;
  right: 10px;
  top: 10px;
	color: #fff;
}

.pa_ca_header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.pa_ca_chat {
  width: 100%;
  box-sizing: border-box;
  height: calc(100%);
}

.pa_ca_c_list {
  width: 100%;
  height: calc(100% - 60px);
  overflow: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  /* padding: 50px 0; */
  box-sizing: border-box;
  /* background-color: red; */
}

.pa_ca_c_bottom {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
	background-color: #fff
}

.pa_ca_c_b_inputArea {
  width: 95%;

  height: 70%;
  /* background-color: #fff; */
  border-radius: 100px;
  /* box-shadow: 0 0 10px #ccc; */
  display: flex;
  align-items: center;
}
.pa_ca_c_b_btnArea {
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pa_ca_c_b_ia_input>>>.el-input__inner{
	border-radius: 50px;
	background: #F3F3F3 !important;
}

.pa_ca_c_b_ba_btn {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* background-color: red; */
  background-image: linear-gradient(to left, #4977eb 0%, #005bea 100%);
}

.pa_ca_c_b_ba_btn > svg {
  fill: #fff;
  width: 20px;
  height: 20px;
}

.pa_ca_c_b_ba_btnDisabled{
	opacity: .5;
}

.pa_ca_c_b_inputArea > textarea {
  resize: none;
  min-height: 50px;
  height: calc(100% - 40px);
  background: none;
  margin: 7px 0;
  width: calc(100% - 60px);
  font-size: 16px;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
  margin-left: 20px;
}

#myTextarea::-webkit-input-placeholder {
  /* Chrome, Opera, Safari */
  font-size: 14px; /* 修改placeholder字体大小 */
  color: grey; /* 修改placeholder文字颜色 */
}

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

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

#myTextarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 14px; /* 修改placeholder字体大小 */
  color: grey; /* 修改placeholder文字颜色 */
}

.userChat {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.uc_left {
  max-width: 90vw;
  width: auto;
  height: auto;
  padding: 10px 0px 10px 0;
}

.uc_left > .chatName {
  text-align: right;
}

.uc_left > .chatMessage {
  border-radius: 10px 2px 10px 10px;
  background-color: #e0eafb;
	padding: 10px 20px;
}

.uc_left > .chatMessage > .cm_btnArea {
  left: -35px;
}

/* .uc_left > span {
  width: auto;
  height: auto;
  padding: 20px 20px;
  background-color: #4a7ff4;
  border-radius: 10px;
  color: #fff;
} */

.uc_right {
  padding: 10px 10px 10px 10px;
}

.aiChat {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* padding: 20px 0; */
}

.ac_left {
  padding: 10px 10px 10px 10px;
}

.ac_right {
  width: auto;
  height: auto;
  padding: 10px 0px 10px 0;
}

.chatMessage {
  max-width: 50vw;
  background-color: #ffffff;
  border: solid 1px #000000e5;
  color: black;
  padding: 0px 20px;
  border-radius: 2px 8px 8px 8px;
  font-size: 14px;
  position: relative;
  box-shadow: 0px 4px 10px 0px #1d398314;
  box-shadow: 1px 1px 20px 4px #1d39830d;
	word-break: break-all
}

.cm_btnArea {
  width: 30px;
  height: 100%;
  position: absolute;
  right: -35px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cm_btnArea > span {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 5px;
}

.cm_btnArea > span > svg {
  width: 100%;
  height: 100%;
}

.chatMessage >>> ol {
  margin-left: 25px;
}

.chatMessage >>> ul {
  margin-left: 25px;
}

.ac_r_time {
  margin-top: 10px;
  font-size: 16px;
  color: #8f8f8f;
}

.ac_r_btnArea {
  margin-top: 5px;
  width: auto;
  display: flex;
  align-items: center;
  height: auto;
}
.ac_r_btnArea > span {
  max-height: 60px;
  padding: 5px 10px 5px 10px;
  background: #ffffff8c;
  border: 1px solid #ffffff8c;
  border-radius: 6px;
  cursor: pointer;
  color: black;
  font-size: 14px;
  margin-right: 20px;
}

.chatAvatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #fff;
  border-radius: 100%;
}



.chatName {
  font-size: 14px;
  /* color: rgb(80, 80, 80); */
  color: #ffffff8c;
  margin-bottom: 8px;
}
</style>
