index.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035
  1. <template>
  2. <div class="chat-container">
  3. <el-dialog
  4. title="应用配置"
  5. :visible.sync="applicationDialogVisible"
  6. width="80%"
  7. :before-close="handleCloseApplicationDialog"
  8. :close-on-click-modal="false"
  9. :append-to-body="true"
  10. >
  11. <!-- <div class="header" style="margin-top: 15px">
  12. <el-form
  13. :inline="true"
  14. :model="AIform"
  15. :rules="rules"
  16. ref="AIformRef"
  17. class="demo-form-inline"
  18. style="margin-top: 15px; margin-left: 50px"
  19. label-position="top"
  20. label-width="90px"
  21. >
  22. <el-row :gutter="24">
  23. <el-col :span="12">
  24. <el-form-item label="应用名称:" prop="chat_name">
  25. <el-input
  26. style="width: 55%;"
  27. v-model="AIform.chat_name"
  28. placeholder="请输入应用名称"
  29. ></el-input>
  30. </el-form-item>
  31. </el-col>
  32. <el-col :span="12">
  33. <el-form-item label="应用类型:" prop="application_type">
  34. <el-select
  35. v-model="AIform.application_type"
  36. placeholder="应用类型"
  37. style="width: 55%"
  38. clearable
  39. >
  40. <el-option
  41. v-for="(item, index) in appTypeList"
  42. :label="item.label"
  43. :value="item.value"
  44. :key="index"
  45. ></el-option>
  46. </el-select>
  47. </el-form-item>
  48. </el-col>
  49. </el-row>
  50. <el-row :gutter="24">
  51. <el-col :span="12">
  52. <el-form-item label="模型名称:" prop="model_name">
  53. <el-select
  54. v-model="AIform.model_name"
  55. placeholder="请输入选择"
  56. style="width: 55%"
  57. clearable
  58. >
  59. <el-option
  60. v-for="(item, index) in modelNameList"
  61. :label="item.name"
  62. :value="item.name"
  63. :key="index"
  64. ></el-option>
  65. </el-select>
  66. </el-form-item>
  67. </el-col>
  68. <el-col :span="12">
  69. <el-form-item label="知识库:" prop="knowledge_base_names">
  70. <el-select
  71. v-model="AIform.knowledge_base_names"
  72. multiple
  73. placeholder="请选择知识库"
  74. style="width: 55%"
  75. @change="handleKnowledgeBaseChange"
  76. clearable
  77. filterable
  78. >
  79. <el-option
  80. v-for="(item, index) in kneList"
  81. :label="item.name"
  82. :value="item.id"
  83. :key="index"
  84. ></el-option>
  85. </el-select> </el-form-item
  86. ></el-col>
  87. </el-row>
  88. <el-row :gutter="24">
  89. <el-col :span="12">
  90. <el-form-item label="文档目录:" prop="document_directories">
  91. <el-select
  92. v-model="AIform.document_directories"
  93. placeholder="请选择文档目录"
  94. style="width: 55%"
  95. :disabled="!AIform.knowledge_base_names.length"
  96. @change="handleDirectoryChange"
  97. clearable
  98. filterable
  99. >
  100. <el-option
  101. v-for="(dir, index) in directoryList"
  102. :label="dir.name"
  103. :value="dir.id"
  104. :key="index"
  105. ></el-option>
  106. </el-select> </el-form-item
  107. ></el-col>
  108. <el-col :span="12">
  109. <el-form-item label="文 档:" prop="documents">
  110. <el-select
  111. v-model="AIform.documents"
  112. multiple
  113. placeholder="请选择文档"
  114. style="width: 55%"
  115. :disabled="isDocumentSelectDisabled"
  116. clearable
  117. filterable
  118. >
  119. <el-option
  120. v-for="(doc, index) in documentList"
  121. :label="doc.name"
  122. :value="doc.id"
  123. :key="index"
  124. ></el-option>
  125. </el-select>
  126. </el-form-item>
  127. </el-col>
  128. </el-row>
  129. <el-row :gutter="24">
  130. <el-col :span="12">
  131. <el-form-item label="描 述:">
  132. <el-input
  133. style="width: 55%"
  134. v-model="AIform.role_description"
  135. placeholder="请输入描述"
  136. type="textarea"
  137. ></el-input>
  138. </el-form-item>
  139. </el-col>
  140. </el-row>
  141. <el-row :gutter="24">
  142. <el-col :span="12">
  143. <el-form-item label="温度:" prop="temperature">
  144. <div style="display: flex; justify-content: space-around;">
  145. <el-slider
  146. style="width: 60%;"
  147. v-model="AIform.temperature"
  148. :min="0"
  149. :max="1"
  150. :step="0.1"
  151. ></el-slider>
  152. <el-input-number
  153. v-model="AIform.temperature"
  154. :min="0"
  155. :max="1"
  156. ></el-input-number>
  157. </div>
  158. <div class="hint">
  159. 控制生成文本的随机性,0为最保守,1为最创新
  160. </div>
  161. </el-form-item>
  162. </el-col>
  163. <el-col :span="12">
  164. <el-form-item label="最大token数:" prop="max_tokens">
  165. <div style="display: flex; justify-content: space-around;">
  166. <el-slider
  167. style="width: 60%;"
  168. v-model="AIform.max_tokens"
  169. :min="1"
  170. :max="4096"
  171. :step="1"
  172. ></el-slider>
  173. <el-input-number
  174. v-model="AIform.max_tokens"
  175. :min="0"
  176. :max="4096"
  177. :step="1"
  178. ></el-input-number>
  179. </div>
  180. <div class="hint">限制生成文本的最大长度</div>
  181. </el-form-item>
  182. </el-col>
  183. </el-row>
  184. <el-row :gutter="24">
  185. <el-col :span="12">
  186. <el-form-item label="核采样参数:" prop="top_p">
  187. <div style="display: flex; justify-content: space-around;">
  188. <el-slider
  189. style="width: 60%;"
  190. v-model="AIform.top_p"
  191. :min="0"
  192. :max="1"
  193. :step="0.1"
  194. ></el-slider>
  195. <el-input-number
  196. v-model="AIform.top_p"
  197. :min="0"
  198. :max="1"
  199. :step="0.1"
  200. ></el-input-number>
  201. </div>
  202. <div class="hint">控制词汇多样性,1为考虑所有可能性</div>
  203. </el-form-item>
  204. </el-col>
  205. <el-col :span="12">
  206. <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
  207. <div style="display: flex; justify-content: space-around;">
  208. <el-slider
  209. style="width: 60%;"
  210. v-model="AIform.frequency_penalty"
  211. :min="-2"
  212. :max="2"
  213. :step="0.1"
  214. ></el-slider>
  215. <el-input-number
  216. v-model="AIform.frequency_penalty"
  217. :min="-2"
  218. :max="2"
  219. :step="0.1"
  220. ></el-input-number>
  221. </div>
  222. <div class="hint">防止重复,正值减少重复,负值增加重复</div>
  223. </el-form-item>
  224. </el-col>
  225. </el-row>
  226. <el-row :gutter="24">
  227. <el-col :span="12">
  228. <el-form-item label="新话题偏好:" prop="presence_penalty">
  229. <div style="display: flex; justify-content: space-around;">
  230. <el-slider
  231. style="width: 60%;"
  232. v-model="AIform.presence_penalty"
  233. :min="-2"
  234. :max="2"
  235. :step="0.1"
  236. ></el-slider>
  237. <el-input-number
  238. v-model="AIform.presence_penalty"
  239. :min="-2"
  240. :max="2"
  241. :step="0.1"
  242. ></el-input-number>
  243. </div>
  244. <div class="hint">正值鼓励新话题,负值保持话题一致性</div>
  245. </el-form-item>
  246. </el-col>
  247. <el-col :span="12">
  248. <el-form-item label="响应格式:" prop="response_format">
  249. <el-input
  250. style="width: 55%"
  251. v-model="AIform.response_format"
  252. placeholder="text"
  253. ></el-input>
  254. <div class="hint">指定AI响应的格式,如text, json等</div>
  255. </el-form-item>
  256. </el-col>
  257. </el-row>
  258. <el-row :gutter="24">
  259. <el-col :span="12">
  260. <el-form-item label="上下文窗口:" prop="context_window">
  261. <div style="display: flex; justify-content: space-around;">
  262. <el-slider
  263. style="width: 60%;"
  264. v-model="AIform.context_window"
  265. :min="1"
  266. :max="4096"
  267. ></el-slider>
  268. <el-input-number
  269. v-model="AIform.presence_penalty"
  270. :min="1"
  271. :max="4096"
  272. :step="1"
  273. ></el-input-number>
  274. </div>
  275. <div class="hint">AI考虑的上下文token数量</div>
  276. </el-form-item>
  277. </el-col>
  278. <el-col :span="12">
  279. <el-form-item label="会话ID:" prop="session_id">
  280. <el-input
  281. style="width: 55%"
  282. v-model="AIform.session_id"
  283. placeholder="可选"
  284. ></el-input>
  285. <div class="hint">特定会话的唯一标识符,如果有的话</div>
  286. </el-form-item>
  287. </el-col>
  288. </el-row>
  289. <el-row :gutter="24">
  290. <el-col :span="12">
  291. <el-form-item label="语言:" prop="language">
  292. <el-select v-model="AIform.language" style="width: 55%">
  293. <el-option label="中文" value="zh"></el-option>
  294. <el-option label="English" value="en"></el-option>
  295. <el-option label="日本語" value="ja"></el-option>
  296. <el-option label="한국어" value="ko"></el-option>
  297. <el-option label="Français" value="fr"></el-option>
  298. <el-option label="Deutsch" value="de"></el-option>
  299. </el-select>
  300. <div class="hint">选择AI响应的主要语言</div>
  301. </el-form-item>
  302. </el-col>
  303. <el-col :span="12">
  304. <el-form-item label="请求超时:" prop="timeout">
  305. <el-input-number
  306. v-model="AIform.timeout"
  307. :min="1"
  308. :max="60"
  309. ></el-input-number>
  310. <div class="hint">设置请求的最大等待时间(秒)</div>
  311. </el-form-item>
  312. </el-col>
  313. </el-row>
  314. <el-row :gutter="24">
  315. <el-col :span="12">
  316. <el-form-item label="角色名称:" prop="role_name">
  317. <el-input
  318. style="width: 55%"
  319. v-model="AIform.role_name"
  320. placeholder="例如: 客服专员"
  321. ></el-input>
  322. <div class="hint">为AI助手设定一个角色名称</div>
  323. </el-form-item>
  324. </el-col>
  325. <el-col :span="12">
  326. <el-form-item label="角色描述:" prop="role_description">
  327. <el-input
  328. style="width: 55%"
  329. v-model="AIform.role_description"
  330. type="textarea"
  331. :rows="3"
  332. placeholder="例如: 你是一位专业的客服专员,负责解答客户关于我们产品和服务的问题。"
  333. ></el-input>
  334. <div class="hint">详细描述AI助手的角色和职责</div>
  335. </el-form-item>
  336. </el-col>
  337. </el-row>
  338. <el-row :gutter="24">
  339. <el-col :span="12">
  340. <el-form-item label="角色权限:" prop="role_permissions">
  341. <el-input
  342. style="width: 55%"
  343. v-model="AIform.role_permissions"
  344. placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
  345. ></el-input>
  346. <div class="hint">输入JSON数组,列出AI助手的具体权限</div>
  347. </el-form-item>
  348. </el-col>
  349. <el-col :span="12">
  350. <el-form-item label="自定义变量:" prop="custom_variables">
  351. <el-input
  352. style="width: 55%"
  353. v-model="AIform.custom_variables"
  354. placeholder='{"custom_greeting": "很高兴为您服务!", "company_name": "ABC公司"}'
  355. ></el-input>
  356. <div class="hint">
  357. 输入JSON对象,定义可在提示模板中使用的自定义变量
  358. </div>
  359. </el-form-item>
  360. </el-col>
  361. </el-row>
  362. <el-row :gutter="24">
  363. <el-col :span="12">
  364. <el-form-item label="自定义提示模板:" prop="custom_prompt">
  365. <el-input
  366. style="width: 60%"
  367. v-model="AIform.custom_prompt"
  368. type="textarea"
  369. :rows="6"
  370. placeholder="使用以下上下文来回答问题。如果你不知道答案,就说你不知道,不要试图编造答案。
  371. 上下文: {context}
  372. 人类: {question}
  373. AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
  374. ></el-input>
  375. <div class="hint">
  376. 自定义AI助手的回答模板,可使用变量如{context}, {question}等
  377. </div>
  378. </el-form-item>
  379. </el-col>
  380. </el-row>
  381. <el-row :gutter="24">
  382. <el-col :span="12">
  383. <el-form-item
  384. label="是否启用API_key:"
  385. prop="generate_new_api_key"
  386. >
  387. <el-switch
  388. v-model="AIform.generate_new_api_key"
  389. active-color="#13ce66"
  390. inactive-color="#ff4949"
  391. >
  392. </el-switch>
  393. </el-form-item>
  394. </el-col>
  395. <el-col :span="12">
  396. <el-form-item label="是否设为默认:" prop="is_default">
  397. <el-switch
  398. v-model="AIform.is_default"
  399. active-color="#13ce66"
  400. inactive-color="#ff4949"
  401. >
  402. </el-switch>
  403. </el-form-item>
  404. </el-col>
  405. </el-row>
  406. </el-form>
  407. <div class="selection-summary">
  408. <div class="summary-content">
  409. <span class="summary-label">当前选择了:</span>
  410. <p class="summary-text">
  411. 模型库: OLLAMA 模型类型: CHAT 模型名称:
  412. <span>{{ AIform.model_name }}</span>
  413. </p>
  414. <p class="summary-text">
  415. 知识库:<span>{{ getKnowledgeBaseNames }}</span> 文档:
  416. <span>{{ getDocumentNames }}</span>
  417. </p>
  418. </div>
  419. </div>
  420. </div> -->
  421. <span slot="footer" class="dialog-footer">
  422. <el-button @click="cancelApplication">取 消</el-button>
  423. <el-button type="primary" @click="generateApplication"
  424. >生成应用</el-button
  425. >
  426. </span>
  427. </el-dialog>
  428. <div class="header_btn">
  429. <el-button type="primary" @click="addApplication">新增应用</el-button>
  430. </div>
  431. <div class="title" v-if="$route.name !== 'ai'">
  432. <h1>聊天应用列表</h1>
  433. <!-- <span class="title_info">选择其他应用</span> -->
  434. </div>
  435. <div class="content_card">
  436. <div class="card-container">
  437. <div class="card" v-for="(card, index) in knowledgeBases" :key="index">
  438. <div class="card-header">
  439. <h2 class="truncate-text">{{ card.chat_name }}</h2>
  440. <el-dropdown>
  441. <span class="el-dropdown-link">
  442. <i class="el-icon-more"></i>
  443. </span>
  444. <el-dropdown-menu slot="dropdown">
  445. <el-dropdown-item @click.native="viewApplication(card)"
  446. >查看</el-dropdown-item
  447. >
  448. <el-dropdown-item @click.native="editApplication(card)"
  449. >编辑</el-dropdown-item
  450. >
  451. <el-dropdown-item v-if="!card.is_default" @click.native="deleteApplication(card)"
  452. >删除</el-dropdown-item
  453. >
  454. </el-dropdown-menu>
  455. </el-dropdown>
  456. </div>
  457. <p class="card-description">{{ card.model_name }}</p>
  458. <div class="file-types">
  459. <div class="file-type">
  460. <span
  461. v-for="(count, type) in card.knowledge_base_names"
  462. :key="type"
  463. class="knowledge-base-name"
  464. >{{ getKnowledgeBaseName(count) }}</span
  465. >
  466. </div>
  467. </div>
  468. <div class="card_info">
  469. {{ card.role_description }}
  470. </div>
  471. <div class="card-footer">
  472. <div class="footer_left">
  473. <img style="width: 50px;height: 50px; object-fit: cover;" :src="card.aiagent_icon ? card.aiagent_icon : require('../../assets/images/u5.png')" alt="" />
  474. </div>
  475. <div class="footer_right">
  476. <span @click="openChatDialog(card)" style="cursor: pointer"
  477. >进入应用</span
  478. >
  479. <span
  480. v-if="card.is_default"
  481. style="margin-left: 20px; cursor: pointer; color: #97a8be"
  482. >已默认</span
  483. >
  484. <span
  485. v-else
  486. @click="setDefault(card)"
  487. style="margin-left: 20px; cursor: pointer"
  488. >设为默认</span
  489. >
  490. </div>
  491. <!-- <span class="update-time"></span> -->
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. <el-dialog
  497. :title="currentChat.name"
  498. :visible.sync="chatDialogVisible"
  499. width="80%"
  500. :before-close="handleCloseDialog"
  501. top="20px"
  502. :append-to-body="true"
  503. >
  504. <div class="content" style="margin-bottom: 115px">
  505. <div class="messages">
  506. <ul>
  507. <li
  508. v-for="message in messages"
  509. :key="message.id"
  510. :class="[
  511. message.user,
  512. message.user === 'user' ? 'user-message' : '',
  513. ]"
  514. >
  515. <!-- 添加判断,如果是机器人的消息也显示头像 -->
  516. <div class="message_name">
  517. <div
  518. class="avatar"
  519. :class="{
  520. 'user-avatar': message.user === 'user',
  521. 'bot-avatar': message.user === 'bot',
  522. }"
  523. ></div>
  524. <div class="name">
  525. <span
  526. class="sender-name"
  527. style="color: #666666"
  528. v-if="message.user === 'user'"
  529. >你</span
  530. >
  531. <span class="sender-name" v-if="message.user === 'bot'"
  532. >轻良AI助理</span
  533. >
  534. </div>
  535. </div>
  536. <!-- 使用 v-html 来渲染 Markdown 文本 -->
  537. <div class="message-content">
  538. <div
  539. class="message-text"
  540. v-html="renderMarkdown(message.message)"
  541. @click="handleLinkClick"
  542. ></div>
  543. </div>
  544. </li>
  545. </ul>
  546. </div>
  547. <div class="input-container">
  548. <textarea
  549. v-model="userInput"
  550. rows="4"
  551. @keydown="handleKeydown"
  552. placeholder="发送消息..."
  553. ></textarea>
  554. <button @click="sendMessage" class="btn">发送</button>
  555. </div>
  556. </div>
  557. </el-dialog>
  558. <!-- 修改应用 -->
  559. <!-- 添加编辑弹窗 -->
  560. <!-- <el-dialog
  561. title="编辑应用"
  562. :visible.sync="editDialogVisible"
  563. width="80%"
  564. @close="handleEditDialogClose"
  565. :append-to-body="true"
  566. >
  567. <el-form
  568. :model="editForm"
  569. :rules="rules"
  570. ref="editFormRef"
  571. label-width="120px"
  572. style="margin: 20px 50px"
  573. label-position="top"
  574. >
  575. <el-row :gutter="24">
  576. <el-col :span="12">
  577. <el-form-item label="应用名称:" prop="chat_name">
  578. <el-input
  579. style="width: 55%"
  580. v-model="editForm.chat_name"
  581. placeholder="请输入应用名称"
  582. ></el-input>
  583. </el-form-item>
  584. </el-col>
  585. <el-col :span="12">
  586. <el-form-item label="应用类型:" prop="application_type">
  587. <el-select
  588. v-model="editForm.application_type"
  589. placeholder="应用类型"
  590. style="width: 55%"
  591. clearable
  592. >
  593. <el-option
  594. v-for="(item, index) in appTypeList"
  595. :label="item.label"
  596. :value="item.value"
  597. :key="index"
  598. ></el-option>
  599. </el-select>
  600. </el-form-item>
  601. </el-col>
  602. </el-row>
  603. <el-row :gutter="24">
  604. <el-col :span="12">
  605. <el-form-item label="模型名称:" prop="model_name">
  606. <el-select
  607. v-model="editForm.model_name"
  608. placeholder="请输入选择"
  609. style="width: 55%"
  610. clearable
  611. >
  612. <el-option
  613. v-for="(item, index) in modelNameList"
  614. :label="item.name"
  615. :value="item.name"
  616. :key="index"
  617. ></el-option>
  618. </el-select>
  619. </el-form-item>
  620. </el-col>
  621. <el-col :span="12">
  622. <el-form-item label="知识库:" prop="knowledge_base_names">
  623. <el-select
  624. v-model="editForm.knowledge_base_names"
  625. multiple
  626. placeholder="请选择知识库"
  627. style="width: 55%"
  628. @change="handleEditKnowledgeBaseChange"
  629. clearable
  630. filterable
  631. >
  632. <el-option
  633. v-for="(item, index) in kneList"
  634. :label="item.name"
  635. :value="item.id"
  636. :key="index"
  637. ></el-option>
  638. </el-select>
  639. </el-form-item>
  640. </el-col>
  641. </el-row>
  642. <el-row :gutter="24">
  643. <el-col :span="12">
  644. <el-form-item label="文档目录:" prop="document_directories">
  645. <el-select
  646. v-model="editForm.document_directories"
  647. placeholder="请选择文档目录"
  648. style="width: 55%"
  649. :disabled="
  650. !(
  651. editForm.knowledge_base_names &&
  652. editForm.knowledge_base_names.length
  653. )
  654. "
  655. @change="handleEditDirectoryChange"
  656. clearable
  657. filterable
  658. >
  659. <el-option
  660. v-for="(dir, index) in editDirectoryList"
  661. :label="dir.name"
  662. :value="dir.id"
  663. :key="index"
  664. ></el-option>
  665. </el-select>
  666. </el-form-item>
  667. </el-col>
  668. <el-col :span="12">
  669. <el-form-item label="文 档:" prop="documents">
  670. <el-select
  671. v-model="editForm.documents"
  672. multiple
  673. placeholder="请选择文档"
  674. style="width: 55%"
  675. :disabled="editForm.document_directories == ''"
  676. clearable
  677. filterable
  678. >
  679. <el-option
  680. v-for="(doc, index) in editDocumentList"
  681. :label="doc.name"
  682. :value="doc.id"
  683. :key="index"
  684. ></el-option>
  685. </el-select>
  686. </el-form-item>
  687. </el-col>
  688. </el-row>
  689. <el-row :gutter="24">
  690. <el-col :span="12">
  691. <el-form-item label="描 述:">
  692. <el-input
  693. style="width: 55%"
  694. v-model="editForm.role_description"
  695. placeholder="请输入描述"
  696. type="textarea"
  697. ></el-input>
  698. </el-form-item>
  699. </el-col>
  700. </el-row>
  701. <el-row :gutter="24">
  702. <el-col :span="12">
  703. <el-form-item label="温度:" prop="temperature">
  704. <div style="display: flex; justify-content: space-around;">
  705. <el-slider
  706. style="width: 60%;"
  707. v-model="editForm.temperature"
  708. :min="0"
  709. :max="1"
  710. :step="0.1"
  711. ></el-slider>
  712. <el-input-number
  713. v-model="editForm.temperature"
  714. :min="0"
  715. :max="1"
  716. ></el-input-number>
  717. </div>
  718. <div class="hint">
  719. 控制生成文本的随机性,0为最保守,1为最创新
  720. </div>
  721. </el-form-item>
  722. </el-col>
  723. <el-col :span="12">
  724. <el-form-item label="最大token数:" prop="max_tokens">
  725. <div style="display: flex; justify-content: space-around;">
  726. <el-slider
  727. style="width: 60%;"
  728. v-model="editForm.max_tokens"
  729. :min="1"
  730. :max="4096"
  731. :step="1"
  732. ></el-slider>
  733. <el-input-number
  734. v-model="editForm.max_tokens"
  735. :min="0"
  736. :max="4096"
  737. :step="1"
  738. ></el-input-number>
  739. </div>
  740. <div class="hint">限制生成文本的最大长度</div>
  741. </el-form-item>
  742. </el-col>
  743. </el-row>
  744. <el-row :gutter="24">
  745. <el-col :span="12">
  746. <el-form-item label="核采样参数:" prop="top_p">
  747. <div style="display: flex; justify-content: space-around;">
  748. <el-slider
  749. style="width: 60%;"
  750. v-model="editForm.top_p"
  751. :min="0"
  752. :max="1"
  753. :step="0.1"
  754. ></el-slider>
  755. <el-input-number
  756. v-model="editForm.top_p"
  757. :min="0"
  758. :max="1"
  759. :step="0.1"
  760. ></el-input-number>
  761. </div>
  762. <div class="hint">控制词汇多样性,1为考虑所有可能性</div>
  763. </el-form-item>
  764. </el-col>
  765. <el-col :span="12">
  766. <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
  767. <div style="display: flex; justify-content: space-around;">
  768. <el-slider
  769. style="width: 60%;"
  770. v-model="editForm.frequency_penalty"
  771. :min="-2"
  772. :max="2"
  773. :step="0.1"
  774. ></el-slider>
  775. <el-input-number
  776. v-model="editForm.frequency_penalty"
  777. :min="-2"
  778. :max="2"
  779. :step="0.1"
  780. ></el-input-number>
  781. </div>
  782. <div class="hint">防止重复,正值减少重复,负值增加重复</div>
  783. </el-form-item>
  784. </el-col>
  785. </el-row>
  786. <el-row :gutter="24">
  787. <el-col :span="12">
  788. <el-form-item label="新话题偏好:" prop="presence_penalty">
  789. <div style="display: flex; justify-content: space-around;">
  790. <el-slider
  791. style="width: 60%;"
  792. v-model="editForm.presence_penalty"
  793. :min="-2"
  794. :max="2"
  795. :step="0.1"
  796. ></el-slider>
  797. <el-input-number
  798. v-model="editForm.presence_penalty"
  799. :min="-2"
  800. :max="2"
  801. :step="0.1"
  802. ></el-input-number>
  803. </div>
  804. <div class="hint">正值鼓励新话题,负值保持话题一致性</div>
  805. </el-form-item>
  806. </el-col>
  807. <el-col :span="12">
  808. <el-form-item label="响应格式:" prop="response_format">
  809. <el-input
  810. style="width: 55%"
  811. v-model="editForm.response_format"
  812. placeholder="text"
  813. ></el-input>
  814. <div class="hint">指定AI响应的格式,如text, json等</div>
  815. </el-form-item>
  816. </el-col>
  817. </el-row>
  818. <el-row :gutter="24">
  819. <el-col :span="12">
  820. <el-form-item label="上下文窗口:" prop="context_window">
  821. <div style="display: flex; justify-content: space-around;">
  822. <el-slider
  823. style="width: 60%;"
  824. v-model="editForm.context_window"
  825. :min="1"
  826. :max="4096"
  827. ></el-slider>
  828. <el-input-number
  829. v-model="editForm.presence_penalty"
  830. :min="1"
  831. :max="4096"
  832. :step="1"
  833. ></el-input-number>
  834. </div>
  835. <div class="hint">AI考虑的上下文token数量</div>
  836. </el-form-item>
  837. </el-col>
  838. <el-col :span="12">
  839. <el-form-item label="会话ID:" prop="session_id">
  840. <el-input
  841. style="width: 55%"
  842. v-model="editForm.session_id"
  843. placeholder="可选"
  844. ></el-input>
  845. <div class="hint">特定会话的唯一标识符,如果有的话</div>
  846. </el-form-item>
  847. </el-col>
  848. </el-row>
  849. <el-row :gutter="24">
  850. <el-col :span="12">
  851. <el-form-item label="语言:" prop="language">
  852. <el-select v-model="editForm.language" style="width: 55%">
  853. <el-option label="中文" value="zh"></el-option>
  854. <el-option label="English" value="en"></el-option>
  855. <el-option label="日本語" value="ja"></el-option>
  856. <el-option label="한국어" value="ko"></el-option>
  857. <el-option label="Français" value="fr"></el-option>
  858. <el-option label="Deutsch" value="de"></el-option>
  859. </el-select>
  860. <div class="hint">选择AI响应的主要语言</div>
  861. </el-form-item>
  862. </el-col>
  863. <el-col :span="12">
  864. <el-form-item label="请求超时:" prop="timeout">
  865. <el-input-number
  866. v-model="editForm.timeout"
  867. :min="1"
  868. :max="60"
  869. ></el-input-number>
  870. <div class="hint">设置请求的最大等待时间(秒)</div>
  871. </el-form-item>
  872. </el-col>
  873. </el-row>
  874. <el-row :gutter="24">
  875. <el-col :span="12">
  876. <el-form-item label="角色名称:" prop="role_name">
  877. <el-input
  878. style="width: 55%"
  879. v-model="editForm.role_name"
  880. placeholder="例如: 客服专员"
  881. ></el-input>
  882. <div class="hint">为AI助手设定一个角色名称</div>
  883. </el-form-item>
  884. </el-col>
  885. <el-col :span="12">
  886. <el-form-item label="角色描述:" prop="role_description">
  887. <el-input
  888. style="width: 55%"
  889. v-model="editForm.role_description"
  890. type="textarea"
  891. :rows="3"
  892. placeholder="例如: 你是一位专业的客服专员,负责解答客户关于我们产品和服务的问题。"
  893. ></el-input>
  894. <div class="hint">详细描述AI助手的角色和职责</div>
  895. </el-form-item>
  896. </el-col>
  897. </el-row>
  898. <el-row :gutter="24">
  899. <el-col :span="12">
  900. <el-form-item label="角色权限:" prop="role_permissions">
  901. <el-input
  902. style="width: 55%"
  903. v-model="editForm.role_permissions"
  904. placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
  905. ></el-input>
  906. <div class="hint">输入JSON数组,列出AI助手的具体权限</div>
  907. </el-form-item>
  908. </el-col>
  909. <el-col :span="12">
  910. <el-form-item label="自定义变量:" prop="custom_variables">
  911. <el-input
  912. style="width: 55%"
  913. v-model="editForm.custom_variables"
  914. placeholder='{"custom_greeting": "很高兴为您服务!", "company_name": "ABC公司"}'
  915. ></el-input>
  916. <div class="hint">
  917. 输入JSON对象,定义可在提示模板中使用的自定义变量
  918. </div>
  919. </el-form-item>
  920. </el-col>
  921. </el-row>
  922. <el-row :gutter="24">
  923. <el-col :span="12">
  924. <el-form-item label="自定义提示模板:" prop="custom_prompt">
  925. <el-input
  926. style="width: 60%"
  927. v-model="editForm.custom_prompt"
  928. type="textarea"
  929. :rows="6"
  930. placeholder="使用以下上下文来回答问题。如果你不知道答案,就说你不知道,不要试图编造答案。
  931. 上下文: {context}
  932. 人类: {question}
  933. AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
  934. ></el-input>
  935. <div class="hint">
  936. 自定义AI助手的回答模板,可使用变量如{context}, {question}等
  937. </div>
  938. </el-form-item>
  939. </el-col>
  940. </el-row>
  941. <el-row :gutter="24">
  942. <el-col :span="12">
  943. <el-form-item label="是否启用API_key:" prop="generate_new_api_key">
  944. <el-switch
  945. v-model="editForm.generate_new_api_key"
  946. active-color="#13ce66"
  947. inactive-color="#ff4949"
  948. >
  949. </el-switch>
  950. </el-form-item>
  951. </el-col>
  952. <el-col :span="12">
  953. <el-form-item label="是否设为默认:" prop="is_default">
  954. <el-switch
  955. v-model="editForm.is_default"
  956. active-color="#13ce66"
  957. inactive-color="#ff4949"
  958. >
  959. </el-switch>
  960. </el-form-item>
  961. </el-col>
  962. </el-row>
  963. </el-form>
  964. <span slot="footer" class="dialog-footer">
  965. <el-button @click="editDialogVisible = false">取 消</el-button>
  966. <el-button type="primary" @click="submitEdit">确 定</el-button>
  967. </span>
  968. </el-dialog> -->
  969. <!-- 查看 -->
  970. <el-dialog
  971. title="应用详情"
  972. :visible.sync="viewDialogVisible"
  973. width="80%"
  974. :append-to-body="true"
  975. >
  976. <div v-if="viewForm" style="padding: 0 20px">
  977. <el-row :gutter="20">
  978. <el-col :span="12">
  979. <p><strong>应用名称:</strong> {{ viewForm.chat_name }}</p>
  980. <p><strong>模型名称:</strong> {{ viewForm.model_name }}</p>
  981. <p>
  982. <strong>知识库:</strong>
  983. {{ getKnowledgeBaseNamesForView(viewForm.knowledge_base_names) }}
  984. </p>
  985. <p>
  986. <strong>文档目录:</strong>
  987. {{ viewForm.document_directories.join(", ") }}
  988. </p>
  989. <p><strong>文档:</strong> {{ viewForm.documents.join(", ") }}</p>
  990. <p><strong>描述:</strong> {{ viewForm.role_description }}</p>
  991. <p><strong>温度:</strong> {{ viewForm.temperature }}</p>
  992. <p><strong>最大token数:</strong> {{ viewForm.max_tokens }}</p>
  993. <p><strong>核采样参数:</strong> {{ viewForm.top_p }}</p>
  994. <p>
  995. <strong>重复内容惩罚:</strong> {{ viewForm.frequency_penalty }}
  996. </p>
  997. <p><strong>新话题偏好:</strong> {{ viewForm.presence_penalty }}</p>
  998. </el-col>
  999. <el-col :span="12">
  1000. <p><strong>响应格式:</strong> {{ viewForm.response_format }}</p>
  1001. <p><strong>上下文窗口:</strong> {{ viewForm.context_window }}</p>
  1002. <p><strong>会话ID:</strong> {{ viewForm.session_id }}</p>
  1003. <p><strong>语言:</strong> {{ viewForm.language }}</p>
  1004. <p><strong>请求超时:</strong> {{ viewForm.timeout }}</p>
  1005. <p><strong>角色名称:</strong> {{ viewForm.role_name }}</p>
  1006. <p><strong>角色描述:</strong> {{ viewForm.role_description }}</p>
  1007. <p>
  1008. <strong>角色权限:</strong>
  1009. {{ viewForm.role_permissions.join(", ") }}
  1010. </p>
  1011. <p><strong>自定义变量:</strong> {{ viewForm.custom_variables }}</p>
  1012. <p><strong>自定义提示模板:</strong> {{ viewForm.custom_prompt }}</p>
  1013. </el-col>
  1014. </el-row>
  1015. </div>
  1016. </el-dialog>
  1017. <!-- 添加 LoginModal 组件 -->
  1018. <LoginModal
  1019. :visible.sync="showLoginModal"
  1020. @close="showLoginModal = false"
  1021. @login-success="handleLoginSuccess"
  1022. />
  1023. </div>
  1024. </template>
  1025. <script src="./js/ChatBox.js"></script>
  1026. <style src="./css/ChatBox.css" scoped></style>