<template>
  <div class="home">
    <div class="home-head">
      <div> 
        <span class="logo">OOIN知识库小助手</span>
      </div>
    </div>

    <div class="home-main">
      <div class="home-main-box">
        <div class="chat-main">
          <div class="home-main-box-middle">
            <div class="main-head">
            </div>
            <div class="chat-container" v-if="messageAll.length">
              <div class="message" :class="item.role == '坐席' ? 'right' : 'left'" v-for="(item, aindex) in messageAll"
                :key="aindex">
                <img src="@/assets/red-robot.png" alt="" v-if="item.role == '坐席'">
                <img src="@/assets/user.png" alt="" v-if="item.role == '用户'">
                <div class="box">
                  <template v-if="item.content">
                    <div class="text" v-if="item.role == '坐席'"  v-html="handleMarked(item.content)"></div>
                    <div class="text" v-if="item.role == '用户'"> {{ item.content }}</div>
                  </template>
                  <div class="text" v-else>
                    <a-spin />
                  </div>
                  <div class="toolbox-bottom">
                    <div class="toolbox-bottom-right" v-if="item.role == '坐席'">
                      <img src="../../assets/zan-active.png" alt="" v-show="item.isLike" @click="handleLike(item,false)">
                      <img src="../../assets/zan.png" alt="" v-show="!item.isLike" @click="handleLike(item,true)">
                      <a-divider type="vertical" />
                      <img src="../../assets/cai-active.png" alt="" v-show="item.isStamp" @click="handleStamp(item,false)">
                      <img src="../../assets/cai.png" alt="" v-show="!item.isStamp" @click="handleStamp(item,true)">
                    </div>
                  </div>
                  <!-- 引用 -->
                  <div class="toolbox-quote" v-if="item.role == '坐席'">
                    <template v-if="item.chatDatasetQuote && item.chatDatasetQuote.length">
                      <p class="toolbox-quote-title" >来源：</p>
                      <ul class="quote-item">
                        <li v-for="(citem,cindex) in item.chatDatasetQuote" :key="cindex" @click="handleDatasetQuote(citem)">
                          <div class="quote-item-box">
                            <img src="../../assets/pdf.png" alt="" v-if="citem.isPdf" class="icon-word">
                            <img src="../../assets/word.png" alt="" v-else-if="citem.isWord" class="icon-word">
                            <img src="../../assets/ppt.png" alt="" v-else-if="citem.isPpt" class="icon-word">
                            <img src="../../assets/excel.png" alt="" v-else-if="citem.isExcel" class="icon-word">
                            <img src="../../assets/no-key.png" alt="" v-else class="icon-word">
                            <p class="quote-title">{{ citem.document_name }}</p>
                          </div>
                        </li>
                      </ul>
                    </template>
                    <p class="toolbox-quote-title toolbox-quote-title-no" v-if="item.isDefault">来源大模型自身知识</p>
                    <!-- <p class="toolbox-quote-title toolbox-quote-title-no" v-if="item.isDefault">来源：百度文心一言</p> -->
                  </div>
                </div>
              </div>
            </div>

            <div class="default" v-else>
              <div class="no-data">
                <div class="no-data-top">
                  <img src="@/assets/company-logo.svg" alt=""> 
                  
                  <span class="no-data-top-title">欢迎使用OOIN小助手</span>
                </div>
                <div class="no-data-content">
                  <span>我是基于大语言模型的智能原生数据分析助手，可以为您实现数据分析及数据解读</span>
                </div>
                <!-- <div class="no-data-list">
                  <div v-for="(item, index) in noDataList" :key="index" class="no-data-list-item">
                    <span>{{ item }}</span>
                    <img src="@/assets/no-data-list-btn.png" alt="" srcset="" @click="handleSetText(item)">
                  </div>
                </div> -->
              </div>
            </div>
            <div class="main-footer">
              <a-spin :spinning="loading"></a-spin>
              <div class="main-footer-left" v-if="chatMsgList.length" >
                <a-select default-value="lucy" v-model="datasetId"
                  style="width: 160px;margin-right: 6px;height: 48px;border-radius: 8px;" @change="changeRecord">
                  <a-select-option :value="item.id" v-for="(item, index) in chatMsgList" :key="index">
                    <img src="../../assets/document.png" alt="" class="icon-knowledge">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </div>
              <div class="main-footer-box">
                <input type="text" class="input" v-model="valText" placeholder="请输入查询内容" @keyup.enter="handleSave">
                <img src="@/assets/message-sent.png" class="send-icon" @click="handleSave" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <chat-dataset-quote ref="chatDatasetQuote" :datasetQuoteList="datasetQuoteList"></chat-dataset-quote>
  </div>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll'
import { fetchEventSource } from "@microsoft/fetch-event-source";
import { chatOpen, listPage, getChatDatasetQuote } from "../../api";
import marked from 'marked' // 引入marked
import hljs from 'highlight.js' // 引入 highlight.js
import 'highlight.js/styles/monokai-sublime.css'
import ChatDatasetQuote from '../../components/chatDatasetQuote.vue'
export default {
  name: 'chat',
  directives: { infiniteScroll },
  data() {
    return {
      messageAll: [],
      chatMsgList: [],
      busy: false,
      datasetId: '',
      knowledgeBaseList: [],
      loading:false,
      valText: '',
      noDataList: [
        '',
      ],
      datasetQuoteList: [],
      isScrollToBottom: true,
      dataset_id_list: [],
      requestObj:{
        pageNum:1,
        pageSize:20
      },
      chat_id: '',
      title:process.env.NODE_CHAT_TITLE,
      similarity:process.env.CHAT_SIMILRITY
    }
  },
  components: {
    ChatDatasetQuote
  },
  watch: {
    messageAll: {
      deep: true,
      handler() {
        setTimeout(() => {
          if (this.isScrollToBottom) this.scrollToBottom()
        }, 300)
      }
    }
  },
  async created() {
    if(JSON.parse(sessionStorage.getItem('chatDatasetId'))){
      const chatDatasetId = JSON.parse(sessionStorage.getItem('chatDatasetId'))
      this.dataset_id_list = [chatDatasetId]
      this.datasetId = chatDatasetId
      await this.getChatList()
      await this.getChatId()
    }else{
      await this.getChatList()
    }
    
  },
  methods: {
    handleDatasetQuote(item){
      this.$refs.chatDatasetQuote.edit(item)
    },
    //文心大模型
    handleWenxinModel(text,time){
      const _this = this
      const ctrl = new AbortController();
      fetchEventSource(``, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': '*/*'
        },
        body: JSON.stringify({
          "stream": true,
          "system": "",
          "messages": [
            {
              "role": "user",
              "content": text
            }
          ]
        }),
        signal: ctrl.signal,
        openWhenHidden: true,
        async onopen(response) {
        },
        onmessage(msg) {
          const jsonText = JSON.parse(msg.data)
          if (!jsonText.is_end) {
            let current = _this.messageAll.find(item => item.time == time && item.fetchEventSource)
            let content = jsonText.result
            if (content) {
              current.content += content
              _this.$forceUpdate()
            }
          }else{
            const item = _this.messageAll.find(item => item.time == time && item.role == '坐席')
            item.isDefault = true
            _this.$set(item,'isDefault',true)
            item.chatDatasetQuote = []
            _this.$set(item,'chatDatasetQuote',[])
            _this.$forceUpdate()
          }
        },
        onclose() {
        },
        onerror(err) {
          let current = _this.messageAll.find(item => item.time == time && item.fetchEventSource)
          current.content = '回复失败'
          _this.$forceUpdate()
          ctrl.abort();
          throw err;
        }
      })
    },
    //来源
    async getChatQuoteTemp(text,time){
      const params = {
        datasetId:this.datasetId,
        query_text:text,
        top_number:10,
        similarity:this.similarity,
        search_mode: 'blend'
      }
      getChatDatasetQuote(params).then(async res => {
        const list = res.data
        this.datasetQuoteList = list
        const item = this.messageAll.find(item => item.time == time && item.role == '坐席')
        if(list.length){
          await this.handleQuoteList(list,item)
        }
      })
    },
    //引用
    async getChatDatasetQuote(text,time){
      const params = {
        datasetId:this.datasetId,
        query_text:text,
        top_number:10,
        similarity:this.similarity,
        search_mode: 'blend'
      }
      getChatDatasetQuote(params).then(async res => {
        const list = res.data
        const item = this.messageAll.find(item => item.time == time && item.role == '坐席')
        if(list.length == 0){
          item.content = '在知识库中未找到相关信息'
          this.$forceUpdate()
          // this.handleWenxinModel(text,time)
          return 
        }else{
          // const isModel = list.every(acc=>acc.comprehensive_score<0.6)
          // if(isModel){
          //   this.handleWenxinModel(text,time)
          // }else{
            await this.getDataAnalysis({ text, time})
          // }
        }
      })
    },
    handleQuoteList(list,item){
      const uniqueArray = Array.from(new Map(list.map(item => [item.document_name, item])).values());
      uniqueArray.forEach(acc=>{
        var extension = acc.document_name.split('.').pop().toLowerCase();
        if(extension === 'pdf') {
          // 显示PDF图片
          acc.isPdf = true;
        } else if(extension === 'docx') {
          // 显示Word图片
          acc.isWord = true;
        } else if(extension === 'ppt' || extension === 'pptx') {
          acc.isPpt = true;
        }else if(extension === 'xls' || extension === 'xlsx'){
          acc.isExcel = true
        }
      })
      item.chatDatasetQuote = uniqueArray
      this.$set(item,'chatDatasetQuote',item.chatDatasetQuote)
      this.$forceUpdate()
    },
    handleLike(item,type){
      if(type && item.isStamp){
        item.isStamp = !type
      }
      item.isLike = type
    },
    handleStamp(item,type){
      if(type && item.isLike){
        item.isLike = !type
      }
      item.isStamp = type
    },
    async handleInfiniteOnLoad() {
      this.busy = false
      if (this.chatMsgList.length >= this.total) {
        this.busy = true
      } else {
        this.requestObj.pageNum++
        await this.getChatList()
      }
    },
    async getChatList() {
      this.loading = true
      try{
        const result = await listPage(this.requestObj)
        this.chatMsgList = this.chatMsgList.concat(result.data.records.filter(item => item.name !== 'sql'))
        this.loading = false
        if(!this.datasetId){
          this.datasetId = this.chatMsgList[0].id
          this.dataset_id_list = [this.chatMsgList[0].id]
          sessionStorage.setItem('chatDatasetId',JSON.stringify(this.chatMsgList[0].id))
          this.getChatId()
        }
        this.total = result.data.total
      }catch(e){}
    },
    handleChange() { },
    //删除
    handleClose() {
      this.chatMsgList.splice(this.recordNum, 1)
    },
    handleAddChat() {
      this.chatMsgList.push({ label: '新建对话' })
    },
    changeRecord(val) {
      if(val){
        this.datasetId = val
        this.dataset_id_list = [val]
        sessionStorage.setItem('chatDatasetId',JSON.stringify(val))
        this.getChatId()
      }
     
     },
    async getChatId() {
      try {
        let params = {
          "work_flow": {
                "edges": [
                    {
                        "id": "0a988f08-06d0-4eed-9701-5f20552ed131",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 1160,
                            "y": 3130
                        },
                        "pointsList": [
                            {
                                "x": 1050,
                                "y": 3090
                            },
                            {
                                "x": 1160,
                                "y": 3090
                            },
                            {
                                "x": 1050,
                                "y": 3130
                            },
                            {
                                "x": 1160,
                                "y": 3130
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 1050,
                            "y": 3090
                        },
                        "sourceNodeId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
                        "targetNodeId": "0c2bd082-4c7e-4153-a233-9f899a23c362",
                        "sourceAnchorId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5_right",
                        "targetAnchorId": "0c2bd082-4c7e-4153-a233-9f899a23c362_left"
                    },
                    {
                        "id": "0de583e8-01cd-4d26-97e6-8d9863d5fdd2",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 2240,
                            "y": 3120
                        },
                        "pointsList": [
                            {
                                "x": 2130,
                                "y": 3120
                            },
                            {
                                "x": 2240,
                                "y": 3120
                            },
                            {
                                "x": 2130,
                                "y": 3120
                            },
                            {
                                "x": 2240,
                                "y": 3120
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 2130,
                            "y": 3120
                        },
                        "sourceNodeId": "fb2bce09-d37c-43c4-af87-bf961dc67287",
                        "targetNodeId": "d2fe93a4-b246-4da1-9ea4-43983f5b11af",
                        "sourceAnchorId": "fb2bce09-d37c-43c4-af87-bf961dc67287_right",
                        "targetAnchorId": "d2fe93a4-b246-4da1-9ea4-43983f5b11af_left"
                    },
                    {
                        "id": "47f37390-e982-41be-b558-9a9e4e6570cc",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 1810,
                            "y": 3120
                        },
                        "pointsList": [
                            {
                                "x": 1740,
                                "y": 3059.91
                            },
                            {
                                "x": 1850,
                                "y": 3059.91
                            },
                            {
                                "x": 1700,
                                "y": 3120
                            },
                            {
                                "x": 1810,
                                "y": 3120
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 1740,
                            "y": 3059.91
                        },
                        "sourceNodeId": "0c2bd082-4c7e-4153-a233-9f899a23c362",
                        "targetNodeId": "fb2bce09-d37c-43c4-af87-bf961dc67287",
                        "sourceAnchorId": "0c2bd082-4c7e-4153-a233-9f899a23c362_8236_right",
                        "targetAnchorId": "fb2bce09-d37c-43c4-af87-bf961dc67287_left"
                    },
                    {
                        "id": "fe0d9ffe-316d-4091-b43d-4cfad958f84e",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 3540,
                            "y": 3120
                        },
                        "pointsList": [
                            {
                                "x": 3430,
                                "y": 3120
                            },
                            {
                                "x": 3540,
                                "y": 3120
                            },
                            {
                                "x": 3430,
                                "y": 3120
                            },
                            {
                                "x": 3540,
                                "y": 3120
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 3430,
                            "y": 3120
                        },
                        "sourceNodeId": "5a59aa11-0555-4314-ae7d-5cfd463ca5c9",
                        "targetNodeId": "b622d270-17e5-4474-b8c8-609b3594794f",
                        "sourceAnchorId": "5a59aa11-0555-4314-ae7d-5cfd463ca5c9_right",
                        "targetAnchorId": "b622d270-17e5-4474-b8c8-609b3594794f_left"
                    },
                    {
                        "id": "1ae90623-a1ef-4864-a4dc-7b6d83e37960",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 730,
                            "y": 3880
                        },
                        "pointsList": [
                            {
                                "x": 600,
                                "y": 3710
                            },
                            {
                                "x": 710,
                                "y": 3710
                            },
                            {
                                "x": 620,
                                "y": 3880
                            },
                            {
                                "x": 730,
                                "y": 3880
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 600,
                            "y": 3710
                        },
                        "sourceNodeId": "start-node",
                        "targetNodeId": "8f56eced-878e-45b6-9454-f5ce2f2ca818",
                        "sourceAnchorId": "start-node_right",
                        "targetAnchorId": "8f56eced-878e-45b6-9454-f5ce2f2ca818_left"
                    },
                    {
                        "id": "0d366224-1d5d-4fc9-9c8b-ab678ab4afb2",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 1810,
                            "y": 3850
                        },
                        "pointsList": [
                            {
                                "x": 1740,
                                "y": 3149.4
                            },
                            {
                                "x": 1850,
                                "y": 3149.4
                            },
                            {
                                "x": 1700,
                                "y": 3850
                            },
                            {
                                "x": 1810,
                                "y": 3850
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 1740,
                            "y": 3149.4
                        },
                        "sourceNodeId": "0c2bd082-4c7e-4153-a233-9f899a23c362",
                        "targetNodeId": "78a8e364-320f-4c50-8426-41f46a3cff98",
                        "sourceAnchorId": "0c2bd082-4c7e-4153-a233-9f899a23c362_6858_right",
                        "targetAnchorId": "78a8e364-320f-4c50-8426-41f46a3cff98_left"
                    },
                    {
                        "id": "19041afe-5134-4eb5-81c6-ca1a100eca81",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 1160,
                            "y": 3880
                        },
                        "pointsList": [
                            {
                                "x": 1050,
                                "y": 3880
                            },
                            {
                                "x": 1160,
                                "y": 3880
                            },
                            {
                                "x": 1050,
                                "y": 3880
                            },
                            {
                                "x": 1160,
                                "y": 3880
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 1050,
                            "y": 3880
                        },
                        "sourceNodeId": "8f56eced-878e-45b6-9454-f5ce2f2ca818",
                        "targetNodeId": "63d13c14-f2b1-4315-9c69-ae65bdad4cf0",
                        "sourceAnchorId": "8f56eced-878e-45b6-9454-f5ce2f2ca818_right",
                        "targetAnchorId": "63d13c14-f2b1-4315-9c69-ae65bdad4cf0_left"
                    },
                    {
                        "id": "a2d3ab6c-02a0-4adc-ba82-ed0be035c46d",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 730,
                            "y": 3090
                        },
                        "pointsList": [
                            {
                                "x": 1480,
                                "y": 3880
                            },
                            {
                                "x": 1590,
                                "y": 3880
                            },
                            {
                                "x": 620,
                                "y": 3090
                            },
                            {
                                "x": 730,
                                "y": 3090
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 1480,
                            "y": 3880
                        },
                        "sourceNodeId": "63d13c14-f2b1-4315-9c69-ae65bdad4cf0",
                        "targetNodeId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
                        "sourceAnchorId": "63d13c14-f2b1-4315-9c69-ae65bdad4cf0_right",
                        "targetAnchorId": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5_left"
                    },
                    {
                        "id": "4fb6126b-ca15-4aef-9c6a-7012c75ec694",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 2240,
                            "y": 3850
                        },
                        "pointsList": [
                            {
                                "x": 2130,
                                "y": 3850
                            },
                            {
                                "x": 2240,
                                "y": 3850
                            },
                            {
                                "x": 2130,
                                "y": 3850
                            },
                            {
                                "x": 2240,
                                "y": 3850
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 2130,
                            "y": 3850
                        },
                        "sourceNodeId": "78a8e364-320f-4c50-8426-41f46a3cff98",
                        "targetNodeId": "2643d814-cc2e-43f6-97ed-db14f90abd26",
                        "sourceAnchorId": "78a8e364-320f-4c50-8426-41f46a3cff98_right",
                        "targetAnchorId": "2643d814-cc2e-43f6-97ed-db14f90abd26_left"
                    },
                    {
                        "id": "ff48f1fd-579c-4eb1-8c77-8f3d48299901",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 2660,
                            "y": 3120
                        },
                        "pointsList": [
                            {
                                "x": 2560,
                                "y": 3120
                            },
                            {
                                "x": 2670,
                                "y": 3120
                            },
                            {
                                "x": 2550,
                                "y": 3120
                            },
                            {
                                "x": 2660,
                                "y": 3120
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 2560,
                            "y": 3120
                        },
                        "sourceNodeId": "d2fe93a4-b246-4da1-9ea4-43983f5b11af",
                        "targetNodeId": "1af8a08c-c8b3-416b-be80-1a56a677efe9",
                        "sourceAnchorId": "d2fe93a4-b246-4da1-9ea4-43983f5b11af_right",
                        "targetAnchorId": "1af8a08c-c8b3-416b-be80-1a56a677efe9_left"
                    },
                    {
                        "id": "b6de666a-24cf-4f5f-b3c5-a92848794871",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 3110,
                            "y": 3120
                        },
                        "pointsList": [
                            {
                                "x": 2980,
                                "y": 3120
                            },
                            {
                                "x": 3090,
                                "y": 3120
                            },
                            {
                                "x": 3000,
                                "y": 3120
                            },
                            {
                                "x": 3110,
                                "y": 3120
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 2980,
                            "y": 3120
                        },
                        "sourceNodeId": "1af8a08c-c8b3-416b-be80-1a56a677efe9",
                        "targetNodeId": "5a59aa11-0555-4314-ae7d-5cfd463ca5c9",
                        "sourceAnchorId": "1af8a08c-c8b3-416b-be80-1a56a677efe9_right",
                        "targetAnchorId": "5a59aa11-0555-4314-ae7d-5cfd463ca5c9_left"
                    },
                    {
                        "id": "abaad3e2-d135-459e-bc94-5d754eeeb62e",
                        "type": "app-edge",
                        "endPoint": {
                            "x": 3540,
                            "y": 3850
                        },
                        "pointsList": [
                            {
                                "x": 3860,
                                "y": 3120
                            },
                            {
                                "x": 3970,
                                "y": 3120
                            },
                            {
                                "x": 3430,
                                "y": 3850
                            },
                            {
                                "x": 3540,
                                "y": 3850
                            }
                        ],
                        "properties": {},
                        "startPoint": {
                            "x": 3860,
                            "y": 3120
                        },
                        "sourceNodeId": "b622d270-17e5-4474-b8c8-609b3594794f",
                        "targetNodeId": "ea678d21-d63d-4070-bbdf-145745c6641a",
                        "sourceAnchorId": "b622d270-17e5-4474-b8c8-609b3594794f_right",
                        "targetAnchorId": "ea678d21-d63d-4070-bbdf-145745c6641a_left"
                    }
                ],
                "nodes": [
                    {
                        "x": 440,
                        "y": 3430,
                        "id": "base-node",
                        "type": "base-node",
                        "properties": {
                            "config": {},
                            "height": 673,
                            "stepName": "基本信息",
                            "node_data": {
                                "desc": "",
                                "name": "CHAT",
                                "prologue": ""
                            }
                        }
                    },
                    {
                        "x": 440,
                        "y": 3710,
                        "id": "start-node",
                        "type": "start-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "用户问题",
                                        "value": "question"
                                    }
                                ],
                                "globalFields": [
                                    {
                                        "label": "当前时间",
                                        "value": "time"
                                    }
                                ]
                            },
                            "fields": [
                                {
                                    "label": "用户问题",
                                    "value": "question"
                                }
                            ],
                            "height": 272.8,
                            "stepName": "开始",
                            "globalFields": [
                                {
                                    "label": "当前时间",
                                    "value": "time"
                                }
                            ]
                        }
                    },
                    {
                        "x": 890,
                        "y": 3090,
                        "id": "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
                        "type": "search-dataset-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "检索结果的分段列表",
                                        "value": "paragraph_list"
                                    },
                                    {
                                        "label": "满足直接回答的分段列表",
                                        "value": "is_hit_handling_method_list"
                                    },
                                    {
                                        "label": "检索结果",
                                        "value": "data"
                                    },
                                    {
                                        "label": "满足直接回答的分段内容",
                                        "value": "directly_return"
                                    }
                                ]
                            },
                            "height": 794.08,
                            "stepName": "知识库检索",
                            "node_data": {
                                "dataset_id_list": this.dataset_id_list,
                                "dataset_setting": {
                                    "top_n": 10,
                                    "similarity": 0.3,
                                    "search_mode": "embedding",
                                    "max_paragraph_char_number": 100000
                                },
                                "source_dataset_id_list": [],
                                "question_reference_address": [
                                    "63d13c14-f2b1-4315-9c69-ae65bdad4cf0",
                                    "result"
                                ]
                            }
                        }
                    },
                    {
                        "x": 1450,
                        "y": 3130,
                        "id": "0c2bd082-4c7e-4153-a233-9f899a23c362",
                        "type": "condition-node",
                        "properties": {
                            "width": 600,
                            "config": {
                                "fields": [
                                    {
                                        "label": "分支名称",
                                        "value": "branch_name"
                                    }
                                ]
                            },
                            "height": 409.96,
                            "stepName": "判断器",
                            "node_data": {
                                "branch": [
                                    {
                                        "id": "8236",
                                        "type": "IF",
                                        "condition": "and",
                                        "conditions": [
                                            {
                                                "field": [
                                                    "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
                                                    "paragraph_list"
                                                ],
                                                "value": "4",
                                                "compare": "len_gt"
                                            }
                                        ]
                                    },
                                    {
                                        "id": "6858",
                                        "type": "ELSE",
                                        "condition": "and",
                                        "conditions": []
                                    }
                                ]
                            },
                            "branch_condition_list": [
                                {
                                    "id": "8236",
                                    "index": 0,
                                    "height": 119.78
                                },
                                {
                                    "id": "6858",
                                    "index": 1,
                                    "height": 43.2
                                }
                            ]
                        }
                    },
                    {
                        "x": 1970,
                        "y": 3120,
                        "id": "fb2bce09-d37c-43c4-af87-bf961dc67287",
                        "type": "function-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "结果",
                                        "value": "result"
                                    }
                                ]
                            },
                            "height": 633.5,
                            "stepName": "自定义函数",
                            "node_data": {
                                "code": "def m(a):\n  return [{index:item['content'] for index, item in enumerate(a[5:])},a[:5]]",
                                "is_result": false,
                                "input_field_list": [
                                    {
                                        "name": "a",
                                        "type": "array",
                                        "value": [
                                            "b931efe5-5b66-46e0-ae3b-0160cb18eeb5",
                                            "paragraph_list"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "x": 2400,
                        "y": 3120,
                        "id": "d2fe93a4-b246-4da1-9ea4-43983f5b11af",
                        "type": "ai-chat-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "AI 回答内容",
                                        "value": "answer"
                                    }
                                ]
                            },
                            "height": 760.6,
                            "stepName": "AI 对话",
                            "node_data": {
                                "prompt": "根据问题从已知信息中选择语义相关的文本段落的数据序号. 下面是已知信息：\n{{自定义函数.result[0]}}\n\nUse the following format:\n\nQuestion: 你需要参考的问题\nThought: 分析你做出选择的原因\nID: 你根据问题选择的文本段落的序号\nFinal Answer: 用列表展示你选择的序号，如果没有相关段落则展示空列表[]\n\nBegin!\nQuestion:{{自定义函数2.result}}",
                                "system": "文档分析师",
                                "model_id": "eb803ca4-69b2-11ef-a5a6-fa163e378f38",
                                "is_result": false,
                                "max_tokens": null,
                                "temperature": null,
                                "dialogue_number": 0,
                                "model_params_setting": {
                                    "max_tokens": 800,
                                    "temperature": 0.5
                                }
                            }
                        }
                    },
                    {
                        "x": 3270,
                        "y": 3120,
                        "id": "5a59aa11-0555-4314-ae7d-5cfd463ca5c9",
                        "type": "function-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "结果",
                                        "value": "result"
                                    }
                                ]
                            },
                            "height": 713.72,
                            "stepName": "自定义函数1",
                            "node_data": {
                                "code": "import re,json\ndef m1(a,c):\n  try:\n    select = eval(c)\n    return ''.join([i['content'] for i in a[1]])+''.join(a[0][j] for j in c)\n  except:\n    return ''.join([i['content'] for i in a[1]])",
                                "is_result": false,
                                "input_field_list": [
                                    {
                                        "name": "a",
                                        "type": "array",
                                        "value": [
                                            "fb2bce09-d37c-43c4-af87-bf961dc67287",
                                            "result"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    },
                                    {
                                        "name": "c",
                                        "type": "string",
                                        "value": [
                                            "1af8a08c-c8b3-416b-be80-1a56a677efe9",
                                            "result"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "x": 3700,
                        "y": 3120,
                        "id": "b622d270-17e5-4474-b8c8-609b3594794f",
                        "type": "ai-chat-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "AI 回答内容",
                                        "value": "answer"
                                    }
                                ]
                            },
                            "height": 760.6,
                            "stepName": "AI 对话1",
                            "node_data": {
                                "prompt": "根据已知信息回答问题。下面是已知信息：\n{{自定义函数1.result}}\n\nUse the following format:\nQuestion: 你需要回答的问题\nThought: 分析回答问题需要知道的前置信息\nReference: 从已知信息中引用的所需要的前置信息\nThought: 分析Reference中提供的信息是否足以回答问题\nFinal Answer: 你对问题做出的回答，若Reference中提供的信息不足以回答问题，则回复没有在知识库中查找到相关信息。\n\nBegin!\nQuestion:{{自定义函数2.result}}",
                                "system": "文档分析师",
                                "model_id": "eb803ca4-69b2-11ef-a5a6-fa163e378f38",
                                "is_result": false,
                                "max_tokens": null,
                                "temperature": null,
                                "dialogue_number": 0,
                                "model_params_setting": {
                                    "max_tokens": 1024,
                                    "temperature": 0.5
                                }
                            }
                        }
                    },
                    {
                        "x": 890,
                        "y": 3880,
                        "id": "8f56eced-878e-45b6-9454-f5ce2f2ca818",
                        "type": "question-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "问题优化结果",
                                        "value": "answer"
                                    }
                                ]
                            },
                            "height": 760.6,
                            "stepName": "问题优化",
                            "node_data": {
                                "prompt": "尽可能的按要求处理句子，你可以采取的行动以及对应条件如下:\n改为问句：需要处理的句子为陈述句\n优化结构：需要处理的句子为问句，但是含义不清晰\n不做处理：需要处理的句子是问句且含义清晰\n\nUse the following format:\n\nQuestion: 你需要处理的句子\nThought: 分析句子是否为问句\nAction: 选择你接下来的行动，should be one of [改为问句,优化结构,不做处理]\nResult: 执行行动后的结果\nFinal Answer: 通过行动处理后的句子\n\nBegin!\nQuestion:{{开始.question}}",
                                "system": "你是一个问题优化大师",
                                "model_id": "eb803ca4-69b2-11ef-a5a6-fa163e378f38",
                                "is_result": false,
                                "dialogue_number": 0,
                                "model_params_setting": {
                                    "max_tokens": 800,
                                    "temperature": 0.5
                                }
                            }
                        }
                    },
                    {
                        "x": 1970,
                        "y": 3850,
                        "id": "78a8e364-320f-4c50-8426-41f46a3cff98",
                        "type": "ai-chat-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "AI 回答内容",
                                        "value": "answer"
                                    }
                                ]
                            },
                            "height": 760.6,
                            "stepName": "AI 对话2",
                            "node_data": {
                                "prompt": "根据已知信息回答问题。下面是已知信息：\n{{知识库检索.data}}\n\nUse the following format:\nQuestion: 你需要回答的问题\nThought: 分析回答问题需要知道的前置信息\nReference: 从已知信息中引用的所需要的前置信息\nThought: 分析Reference中提供的信息是否足以回答问题\nFinal Answer: 你对问题做出的回答，若Reference中提供的信息不足以回答问题，则回复没有在知识库中查找到相关信息。\n\nBegin!\nQuestion:{{自定义函数2.result}}",
                                "system": "",
                                "model_id": "eb803ca4-69b2-11ef-a5a6-fa163e378f38",
                                "is_result": false,
                                "max_tokens": null,
                                "temperature": null,
                                "dialogue_number": 0,
                                "model_params_setting": {
                                    "max_tokens": 1024,
                                    "temperature": 0.5
                                }
                            }
                        }
                    },
                    {
                        "x": 1320,
                        "y": 3880,
                        "id": "63d13c14-f2b1-4315-9c69-ae65bdad4cf0",
                        "type": "function-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "结果",
                                        "value": "result"
                                    }
                                ]
                            },
                            "height": 633.5,
                            "stepName": "自定义函数2",
                            "node_data": {
                                "code": "import re\ndef extract_final_answer(text):\n    match = re.search(r'Final Answer:\\s*(.*)', text, re.DOTALL)\n    if match:\n        return match.group(1).strip()\n    return None",
                                "is_result": false,
                                "input_field_list": [
                                    {
                                        "name": "text",
                                        "type": "string",
                                        "value": [
                                            "8f56eced-878e-45b6-9454-f5ce2f2ca818",
                                            "answer"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "x": 2400,
                        "y": 3850,
                        "id": "2643d814-cc2e-43f6-97ed-db14f90abd26",
                        "type": "function-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "结果",
                                        "value": "result"
                                    }
                                ]
                            },
                            "height": 633.5,
                            "stepName": "自定义函数23",
                            "node_data": {
                                "code": "import re\ndef extract_final_answer(text):\n    match = re.search(r'Final Answer:\\s*(.*)', text, re.DOTALL)\n    if match:\n        return match.group(1).strip()\n    return None",
                                "is_result": true,
                                "input_field_list": [
                                    {
                                        "name": "text",
                                        "type": "string",
                                        "value": [
                                            "78a8e364-320f-4c50-8426-41f46a3cff98",
                                            "answer"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "x": 2820,
                        "y": 3120,
                        "id": "1af8a08c-c8b3-416b-be80-1a56a677efe9",
                        "type": "function-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "结果",
                                        "value": "result"
                                    }
                                ]
                            },
                            "height": 633.5,
                            "stepName": "自定义函数234",
                            "node_data": {
                                "code": "import re\ndef extract_final_answer(text):\n    match = re.search(r'Final Answer:\\s*(.*)', text, re.DOTALL)\n    if match:\n        return match.group(1).strip()\n    return None",
                                "is_result": false,
                                "input_field_list": [
                                    {
                                        "name": "text",
                                        "type": "string",
                                        "value": [
                                            "d2fe93a4-b246-4da1-9ea4-43983f5b11af",
                                            "answer"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    }
                                ]
                            }
                        }
                    },
                    {
                        "x": 3700,
                        "y": 3850,
                        "id": "ea678d21-d63d-4070-bbdf-145745c6641a",
                        "type": "function-node",
                        "properties": {
                            "config": {
                                "fields": [
                                    {
                                        "label": "结果",
                                        "value": "result"
                                    }
                                ]
                            },
                            "height": 633.5,
                            "stepName": "自定义函数235",
                            "node_data": {
                                "code": "import re\ndef extract_final_answer(text):\n    match = re.search(r'Final Answer:\\s*(.*)', text, re.DOTALL)\n    if match:\n        return match.group(1).strip()\n    return None",
                                "is_result": true,
                                "input_field_list": [
                                    {
                                        "name": "text",
                                        "type": "string",
                                        "value": [
                                            "b622d270-17e5-4474-b8c8-609b3594794f",
                                            "answer"
                                        ],
                                        "source": "reference",
                                        "is_required": true
                                    }
                                ]
                            }
                        }
                    }
                ]
            }
        }
        const result = await chatOpen(params)
        if (result.code == 200) {
          this.chat_id = result.data
        } else {
          this.$message.error(result.message)
        }
      } catch (e) {
        throw e
      }
    },
    handleSetText(text) {
      this.valText = text
      this.handleSave()
    },
    async handleSave() {
      const text = this.valText
      this.valText = ''
      if (!text) return
      let time = new Date().getTime()
      let dataObj = {
        role: '用户',
        content: text,
        time
      }
      this.messageAll.push(dataObj)
      this.messageAll.push({
        role: '坐席',
        content: '',
        time,
        fetchEventSource: true,
        isLike:false,
        isStamp:false
      })
      await  this.getChatDatasetQuote(text,time)
      // await this.getDataAnalysis({ text, time })
    },
    async getDataAnalysis({ text, time }) {
      const _this = this
      const ctrl = new AbortController();
      fetchEventSource(`${process.env.API}/api/application/chat_message/${this.chat_id}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': '*/*'
        },
        body: JSON.stringify({
          "message": text,
          "re_chat": false,
          "stream": true
        }),
        signal: ctrl.signal,
        openWhenHidden: true,
        async onopen(response) {
        },
        onmessage(msg) {
          const jsonText = JSON.parse(msg.data)
          if (!jsonText.is_end) {
            let current = _this.messageAll.find(item => item.time == time && item.fetchEventSource)
            let content = jsonText.content
            if (content) {
              current.content += content
              _this.$forceUpdate()
            }
          }else{
            _this.$nextTick(()=>{
              _this.getChatQuoteTemp(text,time)
            })
          }
        },
        onclose() {
        },
        onerror(err) {
          let current = _this.messageAll.find(item => item.time == time && item.fetchEventSource)
          current.content = '回复失败'
          _this.$forceUpdate()
          ctrl.abort();
          throw err;
        }
      })
    },
    scrollToBottom() {
      this.$nextTick(() => {
        let el = document.getElementsByClassName('chat-container')[0]
        el.scrollTop = el.scrollHeight
      })
    },
    handleMarked (str) {
      var rendererMD = new marked.Renderer()
      marked.setOptions({
        renderer: rendererMD,
        highlight: function (code) {
          return hljs.highlightAuto(code).value
        },
        pedantic: false,
        gfm: true,
        tables: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false,
      })
      var str = marked(str)
      if (this.uniPlatform == 'mp-weixin') {
        str = str.replace(/<pre/gi, '<pre style="background: #000;max-width: 315px; overflow-x:auto;"')
      }
      return str
    },
  }
}
</script>

<style scoped lang="less">
.default {
  position: relative;
  width: 100%;
  height: calc(100% - 81px - 48px);

  .no-data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .no-data-top {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      img {
        height: 40px;
        vertical-align: middle;

        &:last-child {
          margin-left: 15px;

        }
      }
      .no-data-top-title{
        font-size: 32px;
        font-weight: 700;
        color: transparent;
        -webkit-background-clip: text;
        background:#ef4444;
        background-clip: text;
      }
    }

    .no-data-content {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #ef4444;
    }

    .no-data-list {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 34px;

      .no-data-list-item {
        width: 30%;
        max-width: 323px;
        height: 133px;
        background: linear-gradient(180deg, #D7E7FF 0%, #E2EFFF 100%), linear-gradient(166deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, #D8E7FF 51%, #E1EDFF 100%);
        border-radius: 16px;
        border: 1px solid #fff;
        padding: 16px 16px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;

        img {
          height: 32px;
          cursor: pointer;
        }

        span {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          text-align: left;
          display: inline-block;
        }

        &+.no-data-list-item {
          margin-left: 16px;
        }
      }
    }
  }
}
.home {
  background: #18181b;
  //background-size: 100% 100%;
  position: relative;
  width: 100%;
  height: 100%;

  &::after {
    display: none;
    // content: "";
    // position: absolute;
    // bottom: 0;
    // left: 0;
    // width: 100%;
    // height: 100px;
    // background: url('../../assets/bg-footer.png') no-repeat center center;
    // background-size: 100% 100%;
  }

  .home-head {
    height: 96px;
    width: 100%;
    position: relative;
    background: #18181b;
    //background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding: 0 24px;

    .menu-list {
      position: absolute;
      display: flex;
      align-items: center;

      .menu-item {
        height: 30px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 5px;
        color: #fff;

        &.active {
          border-top: 2px solid #2f54eb;
          border-bottom: 2px solid #2f54eb;
        }

        & + .menu-item {
          margin-left: 5px;
        }
      }
    }

    .logo {
      font-size: 32px;
      font-weight: 700;
      color: #ef4444;
      // width: 155px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -65%);
    }
  }

  .home-main {
    position: relative;
    z-index: 9;
    box-sizing: border-box;
    height: calc(100% - 96px);
    position: relative;
    padding: 0 24px;

    .home-main-box {
      padding: 24px 24px 44px;
      text-align: left;
      position: relative;
      border-radius: 16px;
      background: #18181b;
      //background-size: 100% 100%;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
    }
  }
}
.chat-main {
  position: relative;
  display: flex;
  justify-content: space-between;
  // margin: 12px 26px 18px;
  box-sizing: border-box;
  flex: 1;
  height: 100%;

  .chat-main-left {
    width: 240px;
    margin-right: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;

    .upload {
      width: 240px;
      height: 48px;
      background: url('../../assets/btn-bg.png') no-repeat center center;
      background-size: 100% 100%;
      text-align: center;
      cursor: pointer;

      .upload-icon {
        width: 19px;
        height: 16px;
        vertical-align: text-top;
        display: inline-block;
        margin-right: 2px;
        color: #fff;
        margin-top: 2px;
      }

      span {
        font-size: 16px;
        display: inline-block;
        font-family: Inter, Inter;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 45px;
      }

    }

    .chatMsgNum {
      font-family: Inter, Inter;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin: 10px 0 14px;
      line-height: 16px;
      text-align: center;
      font-style: normal;
    }

    .record {
      list-style: none;
      padding: 0;
      overflow-y: auto;
      flex: 1 1 auto;
      height: 0;
      padding-right: 5px;
      /* 滚动条整体 */

      &::-webkit-scrollbar {
        width: 4px;
        /* 设置滑轨宽度 */
        height: 0;
        color: transparent;
      }

      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: transparent;

        // 添加 horizonal ，单独设置水平方向上的 轨道
        &:horizontal {
          background-color: blue;
        }
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: transparent;

        // 添加 vertical ，单独设置垂直方向上的 滑块
        &:vertical {
          background: #94A3CE;
        }
      }

      li {
        height: 59px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 6px 6px 3px 12px;
        box-sizing: border-box;
        cursor: pointer;

        .record-icon {
          width: 22px;
          height: 22px;
          margin-right: 12px;
          background: red;
          // background: url('../assets/record.png') no-repeat center center;
          // background-size: 50px 50px;
        }

        .box {
          flex: 1;
          text-align: left;
          overflow-x: hidden;

          .label {
            margin: 0;
            font-family: Inter, Inter;
            font-weight: 500;
            font-size: 14px;
            color: #333;
            line-height: 16px;
            text-align: left;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        &.active {
          background: url('../../assets/msg-bg.png') no-repeat center center;
          background-size: 100% 100%;
          // opacity: 1;

          .record-icon {
            width: 22px;
            height: 22px;
            background: blue;
            // background: url('../assets/record-active.png') no-repeat center center;
            // background-size: 50px 50px;
          }

          .box {
            .label {
              color: #000;
            }
          }
        }
      }
    }
  }
}

.home-main-box-middle {
  position: relative;
  height: 100%;
  width: 100%;
  background: #2d2d30;
  border-radius: 16px;
  border: 1px solid #27272a;
  display: flex;
  flex-direction: column;

  /deep/ .ant-spin-nested-loading {
    height: calc(100% - 81px - 48px);
  }

  .main-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 48px;
    position: relative;
    padding: 14px 24px 14px;
    box-sizing: border-box;
    //background: url('~@/assets/main-head-bg.png') no-repeat center center;
    background-size: 100% 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;

    .logo {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;


      .title {
        font-size: 16px;
        font-family: Inter-Bold, Inter;
        font-weight: bold;
        line-height: 22px;
        background: linear-gradient(88deg, #324EFF 0%, #324EFF 52%, #2DA7FF 100%),
          linear-gradient(179deg, #FFFFFF 0%, #FFFFFF 66%, rgba(255, 255, 255, 0) 67%, rgba(255, 255, 255, 0) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    .right {
      display: flex;

      .icon {
        width: 20px;
        height: 20px;
        margin-right: 16px;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }
      }

      .icon-fullScreen {
        background: url('../../assets/full-screen.png') no-repeat center center;
        background-size: 100% 100%;

        &:hover {
          background: url('../../assets/full-screen-active.png') no-repeat center center;
          background-size: 100% 100%;
        }
      }

      .icon-sidebar {
        background: url('../../assets/sidebar.png') no-repeat center center;
        background-size: 100% 100%;

        &:hover {
          background: url('../../assets/sidebar-active.png') no-repeat center center;
          background-size: 100% 100%;
        }
      }

      .icon-close {
        background: url('../../assets/close.png') no-repeat center center;
        background-size: 100% 100%;

        &:hover {
          // background: url('../../assets/close-active.png') no-repeat center center;
          // background-size: 100% 100%;
        }
      }

    }

  }

  .chat-container {
    padding: 20px 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
    /* 滚动条整体 */

    &::-webkit-scrollbar {
      width: 4px;
      /* 设置滑轨宽度 */
    }

    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: transparent;

      // 添加 horizonal ，单独设置水平方向上的 轨道
      &:horizontal {
        background-color: blue;
      }
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: transparent;

      // 添加 vertical ，单独设置垂直方向上的 滑块
      &:vertical {
        background: #94A3CE;
      }
    }

    .message {
      .box {
    position: relative;
    max-width: 90%;
    min-height: 40px;
    border: 1px solid #27272a;
    border-radius: 5px;
    background: #27272a;
    box-shadow: none;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;

    .text {
      color: #ffffff;
    }
  }
      display: flex;
      // align-items: flex-end;
      width: 100%;

      .toolbox-bottom {
        position: absolute;
        right: -5px;
        bottom: -36px;
        display: flex;

        &>div {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          background: url('~@/assets/chat-tip.png') no-repeat center center;
          background-size: 100% 100%;
          border-radius: 8px;
          padding: 5px 10px;
          margin-right: 5px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 3px;
          }

          .label {
            display: inline-block;
            font-size: 14px;
            color: #757E9B;
            cursor: pointer;
          }
        }
      }
      .toolbox-quote{
        position: relative;
        .toolbox-quote-title{
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #61676F;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          margin-top: 10px;
          margin-bottom: 12px;
        }
        .toolbox-quote-title-no{
          margin-bottom: 0;
        }
        .quote-item{
          padding-top:8px;
          padding-left: 0;
          margin-bottom: 10px;
          list-style: none;
          li{
            width: 208px;
            height: 70px;
            background: #fff;
            border:1px solid #E8E9EB;
            border-radius: 4px;
            display: inline-block;
            padding:12px;
            box-sizing: border-box;
            margin:0 6px 6px 0;
            cursor: pointer;
            .quote-item-box{
              display: flex;
              align-items: center;
              .icon-word{
                // background: url('../../assets/word.png') no-repeat left center;
                // background-size: 30px 36px;
                width: 36px;
                height: 36px;
                margin-right: 4px;
              }
              .quote-title{
                font-size: 14px;
                flex: 1;
                margin:0;
                display: inline-block;
                font-family: Inter-Medium, Inter;
                font-weight: 500;
                color: #333;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;  /*2行末尾显示点点点*/
              }
            }
          }
        }
      }

      .resetSave {
        display: inline-block;

        .label {
          display: inline-block;
          font-size: 14px;
          color: #3E5AFF;
          cursor: pointer;
        }
      }

      .box {
        position: relative;
        max-width: 90%;
        min-height: 40px;
        border: 1px solid #fff;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0px -2px 12px 0px rgba(129, 139, 150, 0.09);
        text-align: left;
        padding: 10px;
        box-sizing: border-box;

        &.have-toolbox-box {
          margin-bottom: 25px;
          min-width: 100px;
        }

        .table-content {
          height: 90%;

          /deep/ .ant-table table {
            width: auto !important;
          }

          /deep/ .ant-table-pagination.ant-pagination {
            float: left !important;
          }

          /deep/ .ant-table-scroll table {
            min-width: auto !important;
          }
        }

        .text {
          line-height: 22px;
          word-break: break-word;
          white-space: normal;
          font-size: 14px;
          font-family: Inter-Medium, Inter;
          font-weight: 500;
          color: #333;

          /deep/ .ant-spin-spinning {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

      }
    }

    .left {
      margin-bottom: 20px;
      flex-direction: row-reverse;

      img {
        width: 40px;
        height: 40px;
        margin-left: 10px;
      }

      .box {
        // background: linear-gradient(135deg, #3E5AFF 0%, #19C9FF 100%);
        //background: url('~@/assets/chat-bg.png') no-repeat center center;
        background: #ef4444;
        background-size: 100% 100%;
        border-image-slice: 10px;
        min-height: 48px;
        height: 100%;
        padding-bottom: 18px;
        border: none;
        box-shadow: none;

        .text {
          line-height: 22px;
          word-break: break-word;
          white-space: pre-line;
          font-size: 14px;
          font-family: Inter-Medium, Inter;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }

    .right {
      margin-bottom: 50px;
      flex-direction: row;

      img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        margin-bottom: 1px;
      }

      .box {
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
        opacity: 1;
        max-width: 85%;
        border-top: 1px solid rgba(144, 216, 255, 0.5);
        border-left: 1px solid rgba(144, 216, 255, 0.5);
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
      }

    }

  }

  .question-box {
    padding: 23px 24px;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    height: calc(100% - 81px - 48px);
    overflow-y: auto;
    background: #E7F1FF;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        list-style: none;
        background: #F7FAFF;
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
        border-top: 1px solid rgba(144, 216, 255, 0.5);
        border-left: 1px solid rgba(144, 216, 255, 0.5);
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        border-radius: 8px;
        min-height: 50px;
        margin-bottom: 14px;
        text-align: left;
        padding: 12px 20px;
        font-size: 14px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
        cursor: pointer;
      }
    }
  }

  .main-footer {
    position: relative;
    z-index: 9;
    padding: 15px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-top: 1px solid #27272a;
    background: #2d2d30;

    .add-icon {
      width: 40px;
      cursor: pointer;
      margin-right: 8px;
      margin-top: 4px;
    }


    .main-footer-box {
      padding: 8px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #27272a;
      border: 1px solid #3f3f46;
      //border-top: 1px solid rgba(144, 216, 255, 0.5);
      //border-left: 1px solid rgba(144, 216, 255, 0.5);
      //border-bottom: 1px solid #fff;
      //border-right: 1px solid #fff;
      width: 100%;
      border-radius: 8px;


      .input {
        flex: 1;
        border: none !important;
        outline: none !important;
        background: #27272a;
        color: #ffffff;

      }

      .send-icon {
        width: 32px;
        cursor: pointer;
      }

    }
  }
}

.default {
  position: relative;
  width: 100%;
  flex: 1;

  &-box {
    position: absolute;
    top: 50%;
    /* 使图片顶部在容器中垂直居中 */
    left: 50%;
    /* 使图片左侧在容器中水平居中 */
    transform: translate(-50%, -50%);
    /* 将图片的中心点对齐容器的中心点 */
    background: url('../../assets/default.png') no-repeat center center;
    background-size: 100% 100%;
    width: 110px;
    height: 146px;
  }

  &-box2 {
    width: 141px;
    height: 175px;
  }
}

/deep/.ant-select-selection--single {
  height: 48px !important;
}

/deep/.ant-select-selection-selected-value {
  line-height: 48px !important;
}

.icon-knowledge {
  width: 20px;
  height: 20px;
}
</style>
