<template>
  <div class="chat-container">
    <el-dialog
      title="应用配置"
      :visible.sync="applicationDialogVisible"
      width="80%"
      :before-close="handleCloseApplicationDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <!-- <div class="header" style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="AIform"
          :rules="rules"
          ref="AIformRef"
          class="demo-form-inline"
          style="margin-top: 15px; margin-left: 50px"
          label-position="top"
          label-width="90px"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="应用名称:" prop="chat_name">
                <el-input
                  style="width: 55%;"
                  v-model="AIform.chat_name"
                  placeholder="请输入应用名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应用类型:" prop="application_type">
                <el-select
                  v-model="AIform.application_type"
                  placeholder="应用类型"
                  style="width: 55%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in appTypeList"
                    :label="item.label"
                    :value="item.value"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="模型名称:" prop="model_name">
                <el-select
                
                  v-model="AIform.model_name"
                  placeholder="请输入选择"
                 style="width: 55%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in modelNameList"
                    :label="item.name"
                    :value="item.name"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="知识库:" prop="knowledge_base_names">
                <el-select
                  v-model="AIform.knowledge_base_names"
                  multiple
                  placeholder="请选择知识库"
                 style="width: 55%"
                  @change="handleKnowledgeBaseChange"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(item, index) in kneList"
                    :label="item.name"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="文档目录:" prop="document_directories">
                <el-select
                  v-model="AIform.document_directories"
                  placeholder="请选择文档目录"
                  style="width: 55%"
                  :disabled="!AIform.knowledge_base_names.length"
                  @change="handleDirectoryChange"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(dir, index) in directoryList"
                    :label="dir.name"
                    :value="dir.id"
                    :key="index"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="文  档:" prop="documents">
                <el-select
                  v-model="AIform.documents"
                  multiple
                  placeholder="请选择文档"
                 style="width: 55%"
                  :disabled="isDocumentSelectDisabled"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(doc, index) in documentList"
                    :label="doc.name"
                    :value="doc.id"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="描 述:">
                <el-input
                style="width: 55%"
                  v-model="AIform.role_description"
                  placeholder="请输入描述"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="温度:" prop="temperature">
                <div style="display: flex; justify-content: space-around;">
                  <el-slider
                  style="width: 60%;"
                    v-model="AIform.temperature"
                    :min="0"
                    :max="1"
                    :step="0.1"
                  ></el-slider>
                  <el-input-number
                    v-model="AIform.temperature"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                </div>
                <div class="hint">
                  控制生成文本的随机性，0为最保守，1为最创新
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大token数:" prop="max_tokens">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                style="width: 60%;"
                  v-model="AIform.max_tokens"
                  :min="1"
                  :max="4096"
                  :step="1"
                ></el-slider>
                <el-input-number
                    v-model="AIform.max_tokens"
                    :min="0"
                    :max="4096"
                    :step="1"
                  ></el-input-number>
              </div>
                <div class="hint">限制生成文本的最大长度</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="核采样参数:" prop="top_p">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                 style="width: 60%;"
                  v-model="AIform.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                    v-model="AIform.top_p"
                    :min="0"
                    :max="1"
                    :step="0.1"
                  ></el-input-number>
              </div>
                <div class="hint">控制词汇多样性，1为考虑所有可能性</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                style="width: 60%;"
                  v-model="AIform.frequency_penalty"
                  :min="-2"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                    v-model="AIform.frequency_penalty"
                    :min="-2"
                    :max="2"
                    :step="0.1"
                  ></el-input-number>
              </div>
                <div class="hint">防止重复，正值减少重复，负值增加重复</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="新话题偏好:" prop="presence_penalty">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                  style="width: 60%;"
                  v-model="AIform.presence_penalty"
                  :min="-2"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                    v-model="AIform.presence_penalty"
                    :min="-2"
                    :max="2"
                    :step="0.1"
                  ></el-input-number>
                </div>
                <div class="hint">正值鼓励新话题，负值保持话题一致性</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="响应格式:" prop="response_format">
                <el-input
                  style="width: 55%"
                  v-model="AIform.response_format"
                  placeholder="text"
                ></el-input>
                <div class="hint">指定AI响应的格式，如text, json等</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="上下文窗口:" prop="context_window">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                  style="width: 60%;"
                  v-model="AIform.context_window"
                  :min="1"
                  :max="4096"
                ></el-slider>
                <el-input-number
                    v-model="AIform.presence_penalty"
                    :min="1"
                    :max="4096"
                    :step="1"
                  ></el-input-number>
              </div>
                <div class="hint">AI考虑的上下文token数量</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会话ID:" prop="session_id">
                <el-input
                style="width: 55%"
                  v-model="AIform.session_id"
                  placeholder="可选"
                ></el-input>
                <div class="hint">特定会话的唯一标识符，如果有的话</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="语言:" prop="language">
                <el-select v-model="AIform.language" style="width: 55%">
                  <el-option label="中文" value="zh"></el-option>
                  <el-option label="English" value="en"></el-option>
                  <el-option label="日本語" value="ja"></el-option>
                  <el-option label="한국어" value="ko"></el-option>
                  <el-option label="Français" value="fr"></el-option>
                  <el-option label="Deutsch" value="de"></el-option>
                </el-select>
                <div class="hint">选择AI响应的主要语言</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求超时:" prop="timeout">
                <el-input-number
                  v-model="AIform.timeout"
                  :min="1"
                  :max="60"
                ></el-input-number>
                <div class="hint">设置请求的最大等待时间（秒）</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="角色名称:" prop="role_name">
                <el-input
                style="width: 55%"
                  v-model="AIform.role_name"
                  placeholder="例如: 客服专员"
                ></el-input>
                <div class="hint">为AI助手设定一个角色名称</div>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="角色描述:" prop="role_description">
                <el-input
                style="width: 55%"
                  v-model="AIform.role_description"
                  type="textarea"
                  :rows="3"
                  placeholder="例如: 你是一位专业的客服专员，负责解答客户关于我们产品和服务的问题。"
                ></el-input>
                <div class="hint">详细描述AI助手的角色和职责</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="角色权限:" prop="role_permissions">
                <el-input
                style="width: 55%"
                  v-model="AIform.role_permissions"
                  placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
                ></el-input>
                <div class="hint">输入JSON数组，列出AI助手的具体权限</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自定义变量:" prop="custom_variables">
                <el-input
                style="width: 55%"
                  v-model="AIform.custom_variables"
                  placeholder='{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}'
                ></el-input>
                <div class="hint">
                  输入JSON对象，定义可在提示模板中使用的自定义变量
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="自定义提示模板:" prop="custom_prompt">
                <el-input
                style="width: 60%"
                  v-model="AIform.custom_prompt"
                  type="textarea"
                  :rows="6"
                  placeholder="使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。
                    上下文: {context}
                    人类: {question}
                    AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
                ></el-input>
                <div class="hint">
                  自定义AI助手的回答模板，可使用变量如{context}, {question}等
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="是否启用API_key:"
                prop="generate_new_api_key"
              >
                <el-switch
                  v-model="AIform.generate_new_api_key"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否设为默认:" prop="is_default">
                <el-switch
                  v-model="AIform.is_default"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="selection-summary">
          <div class="summary-content">
            <span class="summary-label">当前选择了：</span>
            <p class="summary-text">
              模型库: OLLAMA 模型类型: CHAT 模型名称:
              <span>{{ AIform.model_name }}</span>
            </p>
            <p class="summary-text">
              知识库:<span>{{ getKnowledgeBaseNames }}</span> 文档:
              <span>{{ getDocumentNames }}</span>
            </p>
          </div>
        </div>
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelApplication">取 消</el-button>
        <el-button type="primary" @click="generateApplication"
          >生成应用</el-button
        >
      </span>
    </el-dialog>
    <div class="header_btn">
      <el-button type="primary" @click="addApplication">新增应用</el-button>
    </div>

    <div class="title" v-if="$route.name !== 'ai'">
      <h1>聊天应用列表</h1>
      <!-- <span class="title_info">选择其他应用</span> -->
    </div>

    <div class="content_card">
      <div class="card-container">
        <div class="card" v-for="(card, index) in knowledgeBases" :key="index">
          <div class="card-header">
            <h2 class="truncate-text">{{ card.chat_name }}</h2>
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="viewApplication(card)"
                  >查看</el-dropdown-item
                >
                <el-dropdown-item @click.native="editApplication(card)"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item v-if="!card.is_default" @click.native="deleteApplication(card)"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <p class="card-description">{{ card.model_name }}</p>
          <div class="file-types">
            <div class="file-type">
              <span
                v-for="(count, type) in card.knowledge_base_names"
                :key="type"
                class="knowledge-base-name"
                >{{ getKnowledgeBaseName(count) }}</span
              >
            </div>
          </div>
          <div class="card_info">
            {{ card.role_description }}
          </div>
          <div class="card-footer">
            <div class="footer_left">
              <img style="width: 50px;height: 50px; object-fit: cover;" :src="card.aiagent_icon ? card.aiagent_icon : require('../../assets/images/u5.png')" alt="" />
            </div>
            <div class="footer_right">
              <span @click="openChatDialog(card)" style="cursor: pointer"
                >进入应用</span
              >
              <span
                v-if="card.is_default"
                style="margin-left: 20px; cursor: pointer; color: #97a8be"
                >已默认</span
              >
              <span
                v-else
                @click="setDefault(card)"
                style="margin-left: 20px; cursor: pointer"
                >设为默认</span
              >
            </div>
            <!-- <span class="update-time"></span> -->
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="currentChat.name"
      :visible.sync="chatDialogVisible"
      width="80%"
      :before-close="handleCloseDialog"
      top="20px"
      :append-to-body="true"
    >
      <div class="content" style="margin-bottom: 115px">
        <div class="messages">
          <ul>
            <li
              v-for="message in messages"
              :key="message.id"
              :class="[
                message.user,
                message.user === 'user' ? 'user-message' : '',
              ]"
            >
              <!-- 添加判断，如果是机器人的消息也显示头像 -->
              <div class="message_name">
                <div
                  class="avatar"
                  :class="{
                    'user-avatar': message.user === 'user',
                    'bot-avatar': message.user === 'bot',
                  }"
                ></div>
                <div class="name">
                  <span
                    class="sender-name"
                    style="color: #666666"
                    v-if="message.user === 'user'"
                    >你</span
                  >
                  <span class="sender-name" v-if="message.user === 'bot'"
                    >AI助理</span
                  >
                </div>
              </div>
              <!-- 使用 v-html 来渲染 Markdown 文本 -->
              <div class="message-content">
                <div
                  class="message-text"
                  v-html="renderMarkdown(message.message)"
                  @click="handleLinkClick"
                ></div>
              </div>
            </li>
          </ul>
        </div>
        <div class="input-container">
          <textarea
            v-model="userInput"
            rows="4"
            @keydown="handleKeydown"
            placeholder="发送消息..."
          ></textarea>
          <button @click="sendMessage" class="btn">发送</button>
        </div>
      </div>
    </el-dialog>
    <!-- 修改应用 -->
    <!-- 添加编辑弹窗 -->
  <!--   <el-dialog
      title="编辑应用"
      :visible.sync="editDialogVisible"
      width="80%"
      @close="handleEditDialogClose"
      :append-to-body="true"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editFormRef"
        label-width="120px"
        style="margin: 20px 50px"
        label-position="top"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用名称:" prop="chat_name">
              <el-input
               style="width: 55%"
                v-model="editForm.chat_name"
                placeholder="请输入应用名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用类型:" prop="application_type">
              <el-select
                v-model="editForm.application_type"
                placeholder="应用类型"
                 style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in appTypeList"
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="模型名称:" prop="model_name">
              <el-select
                v-model="editForm.model_name"
                placeholder="请输入选择"
                 style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in modelNameList"
                  :label="item.name"
                  :value="item.name"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="知识库:" prop="knowledge_base_names">
              <el-select
                v-model="editForm.knowledge_base_names"
                multiple
                placeholder="请选择知识库"
                 style="width: 55%"
                @change="handleEditKnowledgeBaseChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in kneList"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="文档目录:" prop="document_directories">
              <el-select
                v-model="editForm.document_directories"
                placeholder="请选择文档目录"
                 style="width: 55%"
                :disabled="
                  !(
                    editForm.knowledge_base_names &&
                    editForm.knowledge_base_names.length
                  )
                "
                @change="handleEditDirectoryChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(dir, index) in editDirectoryList"
                  :label="dir.name"
                  :value="dir.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文  档:" prop="documents">
              <el-select
                v-model="editForm.documents"
                multiple
                placeholder="请选择文档"
                 style="width: 55%"
                :disabled="editForm.document_directories == ''"
                clearable
                filterable
              >
                <el-option
                  v-for="(doc, index) in editDocumentList"
                  :label="doc.name"
                  :value="doc.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="描 述:">
              <el-input
               style="width: 55%"
                v-model="editForm.role_description"
                placeholder="请输入描述"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="温度:" prop="temperature">
                <div style="display: flex; justify-content: space-around;">
                  <el-slider
                  style="width: 60%;"
                    v-model="editForm.temperature"
                    :min="0"
                    :max="1"
                    :step="0.1"
                  ></el-slider>
                  <el-input-number
                    v-model="editForm.temperature"
                    :min="0"
                    :max="1"
                  ></el-input-number>
                </div>
                <div class="hint">
                  控制生成文本的随机性，0为最保守，1为最创新
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大token数:" prop="max_tokens">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                style="width: 60%;"
                  v-model="editForm.max_tokens"
                  :min="1"
                  :max="4096"
                  :step="1"
                ></el-slider>
                <el-input-number
                    v-model="editForm.max_tokens"
                    :min="0"
                    :max="4096"
                    :step="1"
                  ></el-input-number>
              </div>
                <div class="hint">限制生成文本的最大长度</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="核采样参数:" prop="top_p">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                 style="width: 60%;"
                  v-model="editForm.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                    v-model="editForm.top_p"
                    :min="0"
                    :max="1"
                    :step="0.1"
                  ></el-input-number>
              </div>
                <div class="hint">控制词汇多样性，1为考虑所有可能性</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                style="width: 60%;"
                  v-model="editForm.frequency_penalty"
                  :min="-2"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                    v-model="editForm.frequency_penalty"
                    :min="-2"
                    :max="2"
                    :step="0.1"
                  ></el-input-number>
              </div>
                <div class="hint">防止重复，正值减少重复，负值增加重复</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="新话题偏好:" prop="presence_penalty">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                  style="width: 60%;"
                  v-model="editForm.presence_penalty"
                  :min="-2"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                    v-model="editForm.presence_penalty"
                    :min="-2"
                    :max="2"
                    :step="0.1"
                  ></el-input-number>
                </div>
                <div class="hint">正值鼓励新话题，负值保持话题一致性</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="响应格式:" prop="response_format">
                <el-input
                 style="width: 55%"
                  v-model="editForm.response_format"
                  placeholder="text"
                ></el-input>
                <div class="hint">指定AI响应的格式，如text, json等</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="上下文窗口:" prop="context_window">
                <div style="display: flex; justify-content: space-around;">
                <el-slider
                  style="width: 60%;"
                  v-model="editForm.context_window"
                  :min="1"
                  :max="4096"
                ></el-slider>
                <el-input-number
                    v-model="editForm.presence_penalty"
                    :min="1"
                    :max="4096"
                    :step="1"
                  ></el-input-number>
              </div>
                <div class="hint">AI考虑的上下文token数量</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会话ID:" prop="session_id">
                <el-input
                 style="width: 55%"
                  v-model="editForm.session_id"
                  placeholder="可选"
                ></el-input>
                <div class="hint">特定会话的唯一标识符，如果有的话</div>
              </el-form-item>
            </el-col>
          </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="语言:" prop="language">
              <el-select v-model="editForm.language"  style="width: 55%">
                <el-option label="中文" value="zh"></el-option>
                <el-option label="English" value="en"></el-option>
                <el-option label="日本語" value="ja"></el-option>
                <el-option label="한국어" value="ko"></el-option>
                <el-option label="Français" value="fr"></el-option>
                <el-option label="Deutsch" value="de"></el-option>
              </el-select>
              <div class="hint">选择AI响应的主要语言</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求超时:" prop="timeout">
              <el-input-number
                v-model="editForm.timeout"
                :min="1"
                :max="60"
              ></el-input-number>
              <div class="hint">设置请求的最大等待时间（秒）</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色名称:" prop="role_name">
              <el-input
               style="width: 55%"
                v-model="editForm.role_name"
                placeholder="例如: 客服专员"
              ></el-input>
              <div class="hint">为AI助手设定一个角色名称</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色描述:" prop="role_description">
              <el-input
               style="width: 55%"
                v-model="editForm.role_description"
                type="textarea"
                :rows="3"
                placeholder="例如: 你是一位专业的客服专员，负责解答客户关于我们产品和服务的问题。"
              ></el-input>
              <div class="hint">详细描述AI助手的角色和职责</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色权限:" prop="role_permissions">
              <el-input
               style="width: 55%"
                v-model="editForm.role_permissions"
                placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
              ></el-input>
              <div class="hint">输入JSON数组，列出AI助手的具体权限</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="自定义变量:" prop="custom_variables">
              <el-input
               style="width: 55%"
                v-model="editForm.custom_variables"
                placeholder='{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}'
              ></el-input>
              <div class="hint">
                输入JSON对象，定义可在提示模板中使用的自定义变量
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="自定义提示模板:" prop="custom_prompt">
              <el-input
               style="width: 60%"
                v-model="editForm.custom_prompt"
                type="textarea"
                :rows="6"
                placeholder="使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。
                    上下文: {context}
                    人类: {question}
                    AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
              ></el-input>
              <div class="hint">
                自定义AI助手的回答模板，可使用变量如{context}, {question}等
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="是否启用API_key:" prop="generate_new_api_key">
              <el-switch
                v-model="editForm.generate_new_api_key"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设为默认:" prop="is_default">
              <el-switch
                v-model="editForm.is_default"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 查看 -->
    <el-dialog
      title="应用详情"
      :visible.sync="viewDialogVisible"
      width="80%"
      :append-to-body="true"
    >
      <div v-if="viewForm" style="padding: 0 20px">
        <el-row :gutter="20">
          <el-col :span="12">
            <p><strong>应用名称:</strong> {{ viewForm.chat_name }}</p>
            <p><strong>模型名称:</strong> {{ viewForm.model_name }}</p>
            <p>
              <strong>知识库:</strong>
              {{ getKnowledgeBaseNamesForView(viewForm.knowledge_base_names) }}
            </p>
            <p>
              <strong>文档目录:</strong>
              {{ viewForm.document_directories.join(", ") }}
            </p>
            <p><strong>文档:</strong> {{ viewForm.documents.join(", ") }}</p>
            <p><strong>描述:</strong> {{ viewForm.role_description }}</p>
            <p><strong>温度:</strong> {{ viewForm.temperature }}</p>
            <p><strong>最大token数:</strong> {{ viewForm.max_tokens }}</p>
            <p><strong>核采样参数:</strong> {{ viewForm.top_p }}</p>
            <p>
              <strong>重复内容惩罚:</strong> {{ viewForm.frequency_penalty }}
            </p>
            <p><strong>新话题偏好:</strong> {{ viewForm.presence_penalty }}</p>
          </el-col>
          <el-col :span="12">
            <p><strong>响应格式:</strong> {{ viewForm.response_format }}</p>
            <p><strong>上下文窗口:</strong> {{ viewForm.context_window }}</p>
            <p><strong>会话ID:</strong> {{ viewForm.session_id }}</p>
            <p><strong>语言:</strong> {{ viewForm.language }}</p>
            <p><strong>请求超时:</strong> {{ viewForm.timeout }}</p>
            <p><strong>角色名称:</strong> {{ viewForm.role_name }}</p>
            <p><strong>角色描述:</strong> {{ viewForm.role_description }}</p>
            <p>
              <strong>角色权限:</strong>
              {{ viewForm.role_permissions.join(", ") }}
            </p>
            <p><strong>自定义变量:</strong> {{ viewForm.custom_variables }}</p>
            <p><strong>自定义提示模板:</strong> {{ viewForm.custom_prompt }}</p>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 添加 LoginModal 组件 -->
    <LoginModal
      :visible.sync="showLoginModal"
      @close="showLoginModal = false"
      @login-success="handleLoginSuccess"
    />
  </div>
</template>
  
  <script src="./js/ChatBox.js"></script>
  <style src="./css/ChatBox.css" scoped></style>