| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="container" id="container"> |
| | | <!-- <AddSession--> |
| | | <!-- :modalObj="modalObj"--> |
| | | <!-- @addSession="addSession"--> |
| | |
| | | |
| | | <a-popover position="bottom" trigger="click"> |
| | | <a-button border |
| | | >{{ agentTitle }} |
| | | > |
| | | <span style=" |
| | | width: 100px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | ">{{ from.name }}</span> |
| | | <icon-down style="margin-left: 4px" /> |
| | | </a-button> |
| | | <template #content> |
| | |
| | | )" |
| | | :key="lix" |
| | | > |
| | | <div class="icon-box"> |
| | | <div class="icon-box" @click="clickHref(v)"> |
| | | <div> |
| | | <img :src="getIconByExtension(v.doc_name)" alt="" /> |
| | | </div> |
| | |
| | | maxRows: 5, |
| | | }" |
| | | /> |
| | | |
| | | <div class="btn-send"> |
| | | <div style="width: 100%;display: flex;justify-content: space-between"> |
| | | <updataFile ref="fileInput" :sessionId="activeSessionId" @selectFileCallback="selectFileCallback"></updataFile> |
| | | <a-button |
| | | :disabled="chatDis" |
| | | @click="sentClick" |
| | |
| | | </a-button> |
| | | </div> |
| | | </div> |
| | | <!-- <div style="margin-top: 0px">--> |
| | | <!-- <a-upload--> |
| | | <!-- ref="uploadRef"--> |
| | | <!-- :file-list="uploadList"--> |
| | | <!-- :limit="1"--> |
| | | <!-- multiple--> |
| | | <!-- :custom-request="customRequest"--> |
| | | <!-- style="font-size: 24px;margin-bottom: 10px;position: relative;width: 200px">--> |
| | | <!-- <template #upload-button>--> |
| | | <!-- <icon-attachment style="color: #0960bd;position: absolute;top:-50px;left: 20px;z-index: 10000"/>--> |
| | | <!-- </template>--> |
| | | <!-- </a-upload>--> |
| | | <!-- </div>--> |
| | | <span |
| | | style=" |
| | | position: absolute; |
| | | top: 94px; |
| | | left: 20px; |
| | | z-index: 999; |
| | | cursor: pointer; |
| | | " |
| | | > |
| | | <icon-attachment |
| | | size="28" |
| | | @click="selectFile" |
| | | style="color: #0960bd" |
| | | /> |
| | | <input |
| | | ref="fileInput" |
| | | type="file" |
| | | style="display: none" |
| | | @change="onFileSelected" |
| | | /> |
| | | </span> |
| | | <div class="uploadFileList"> |
| | | <div |
| | | class="files" |
| | |
| | | > |
| | | <a-comment |
| | | :author="item.name" |
| | | :content="item.size + ''" |
| | | :content="item.size" |
| | | style=" |
| | | background: var(--color-bg-2); |
| | | padding: 10px; |
| | | border-radius: 10px; |
| | | font-size: 12px; |
| | | " |
| | | > |
| | | <template #avatar> |
| | |
| | | <a-form |
| | | ref="formRef" |
| | | :rules="rules" |
| | | :model="chatObj" |
| | | :model="from" |
| | | @submit="handleSubmit" |
| | | > |
| | | <a-form-item field="name" label="名称"> |
| | | <a-input v-model="agentTitle" placeholder="请输入名称" /> |
| | | <a-input v-model="from.name" placeholder="请输入名称" /> |
| | | </a-form-item> |
| | | <a-form-item> |
| | | <div style="width: 100%; text-align: right"> |
| | |
| | | </div> |
| | | </template> |
| | | <script setup lang="ts"> |
| | | import { |
| | | IconClose, |
| | | IconSearch, |
| | | IconTiktokColor, |
| | | } from '@arco-design/web-vue/es/icon'; |
| | | import { useAppStore, useUserStore } from '@/store'; |
| | | import { |
| | | computed, |
| | |
| | | import agentSession from '@/views/sessionManager/components/agentSession.vue'; |
| | | import historySession from '@/views/sessionManager/components/historySession.vue'; |
| | | import smartAi from '@/views/sessionManager/components/smartAi.vue'; |
| | | import setName from '@/views/sessionManager/components/setName.vue'; |
| | | import updataFile from '@/views/sessionManager/components/updataFile.vue'; |
| | | import EventBus from '@/utils/EventBus'; |
| | | import { |
| | | addSessionApi, |
| | |
| | | const agentType = ref('1'); |
| | | const agentTitle = ref('未命名会话'); |
| | | let chatObj = reactive({}); |
| | | let from = reactive({ |
| | | name:'未命名会话', |
| | | }); |
| | | const isStopChat = ref(false); |
| | | const currIndex = ref(0); |
| | | const displayedText = ref(''); // 正在显示的文字 |
| | |
| | | const fileInput = ref(null); |
| | | const chatDataMeg = reactive({}); |
| | | const visible = ref(false); |
| | | let toStop = false; |
| | | |
| | | const rules = { |
| | | name: [ |
| | |
| | | |
| | | const handleSubmit = async ({ values, errors }) => { |
| | | if (errors) return; |
| | | // chatObj.name = agentTitle.value; |
| | | // chatObj.conversation_id = chatObj.id; |
| | | let chatData = { |
| | | id: chatObj.id, |
| | | conversation_id: chatObj.id, |
| | | name: agentTitle.value, |
| | | name: from.name, |
| | | }; |
| | | const { code, data } = await addSessionApi(chatData); |
| | | if (data) { |
| | |
| | | }; |
| | | let dataItem = []; |
| | | const getTxt = (data, role, message, index) => { |
| | | if (/##0\$\$/.test(message)) { |
| | | if (/##[0-9]\$\$/.test(message)) { |
| | | if (role == 'assistant' && index) { |
| | | data.forEach((item) => { |
| | | if (Object.keys(item).length !== 0 && item?.doc_aggs.length > 0) { |
| | | dataItem = item.doc_aggs; |
| | | console.log(dataItem, 999); |
| | | } |
| | | }); |
| | | let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; |
| | | dataItem = data[i].doc_aggs; |
| | | } |
| | | } else { |
| | | dataItem = []; |
| | | } |
| | | |
| | | return dataItem; |
| | | }; |
| | | |
| | | const clickHref = (item) => { |
| | | // return Message.warning('暂无法查看'); |
| | | // window.open(`/api/v1/document/get/${item.doc_id}`, '_blank'); |
| | | downloadFile({ |
| | | url: `/api/v1/document/get/${item.doc_id}`, |
| | | filename: item.doc_name, |
| | | }); |
| | | }; |
| | | |
| | | const downloadFile = ({ |
| | | url, |
| | | filename, |
| | | target, |
| | | }: { |
| | | url: string; |
| | | filename?: string; |
| | | target?: string; |
| | | }) => { |
| | | const downloadElement = document.createElement('a'); |
| | | downloadElement.style.display = 'none'; |
| | | downloadElement.href = url; |
| | | if (target) { |
| | | downloadElement.target = '_blank'; |
| | | } |
| | | downloadElement.rel = 'noopener noreferrer'; |
| | | if (filename) { |
| | | downloadElement.download = filename; |
| | | } |
| | | document.body.appendChild(downloadElement); |
| | | downloadElement.click(); |
| | | document.body.removeChild(downloadElement); |
| | | }; |
| | | |
| | | const getIconByExtension = computed(() => (extension) => { |
| | |
| | | // formRef.value.resetFields(); |
| | | }; |
| | | |
| | | const selectFile = () => { |
| | | fileInput.value.click(); |
| | | const selectFileCallback = (data) => { |
| | | console.log(data, 'selectFileCallback'); |
| | | uploaditemList.value = data; |
| | | }; |
| | | |
| | | let onFileSelectedLoading = ref(false); |
| | | const onFileSelected = (event) => { |
| | | const file = event.target.files[0]; |
| | | uploaditemList.value = [ |
| | | { |
| | | name: file.name, |
| | | size: file.size, |
| | | }, |
| | | ]; |
| | | if (file) { |
| | | onFileSelectedLoading.value = true; |
| | | const formData = new FormData(); |
| | | formData.append('file', file); |
| | | formData.append('conversation_id', activeSessionId.value); |
| | | uploadWithoutKb(formData).then((res) => { |
| | | // console.log(res); |
| | | if (res.code == 200) { |
| | | console.log(res); |
| | | console.log(uploaditemList.value); |
| | | onFileSelectedLoading.value = false; |
| | | fileInput.value.value = ''; |
| | | uploaditemList.value = []; |
| | | Message.success('上传成功'); |
| | | } else { |
| | | Message.error('上传失败'); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const deleteFile = (item) => { |
| | | console.log(uploaditemList.value); |
| | |
| | | await toClipboard(text); //参数为要复制的文本 |
| | | }; |
| | | |
| | | const onChange = (fileList) => { |
| | | // files.value = fileList; |
| | | }; |
| | | |
| | | // 上传文件 |
| | | const customRequest = async (option) => { |
| | | const { onProgress, onError, onSuccess, fileItem, name } = option; |
| | | fileItem.status = 'ready'; |
| | | if (fileItem.file) { |
| | | const formData = new FormData(); |
| | | formData.append('file', fileItem.file); |
| | | formData.append('conversation_id', activeSessionId.value); |
| | | uploadWithoutKb(formData).then((res) => { |
| | | // console.log(res); |
| | | if (res.code == 200) { |
| | | console.log(res); |
| | | console.log(uploadList.value); |
| | | fileItem.status = 'done'; |
| | | // uploadList.value = []; |
| | | } else { |
| | | fileItem.status = 'error'; |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const DialogList = async () => { |
| | | const { code, data } = await getDialogListApi(); |
| | |
| | | event.preventDefault(); |
| | | inputMsg.value += '\n'; |
| | | }; |
| | | const dialogChange = (val) => { |
| | | // 判断当前是智能体或agent |
| | | // console.log(val, 'val'); |
| | | dialogId.value = val; |
| | | dialogs.value.forEach((item) => { |
| | | if (item.id === val) { |
| | | Object.assign(dialogObj, item); |
| | | } |
| | | }); |
| | | console.log(dialogObj.type, 'dialogObj'); |
| | | if (dialogObj.type == 1) { |
| | | agentType.value = '1'; |
| | | querySessionList(); |
| | | } else { |
| | | agentType.value = '2'; |
| | | queryAgentSessionList(); |
| | | } |
| | | |
| | | // querySessionList(); |
| | | }; |
| | | |
| | | // 发送 |
| | | const sentClick = () => { |
| | |
| | | const startChat = async (valMsg) => { |
| | | chatDis.value = true; |
| | | loading.value = true; |
| | | toStop = false; |
| | | sessionDetailList.value.push({ |
| | | content: valMsg, |
| | | role: 'user', |
| | |
| | | .getReader(); |
| | | currIndex.value = 0; |
| | | while (true) { |
| | | if (toStop) { |
| | | displayedText.value = ''; |
| | | setChatDataMeg(chatDataMeg); |
| | | break; |
| | | } |
| | | const x = await reader?.read(); |
| | | if (x) { |
| | | const { done, value } = x; |
| | |
| | | loading.value = false; |
| | | chatDis.value = false; |
| | | isStopChat.value = true; |
| | | toStop = true; |
| | | console.log('stopChat'); |
| | | console.log(displayedText.value, 'displayedText'); |
| | | console.log(sessionDetailList.value, 'sessionDetailList'); |
| | |
| | | sessionDetailList.value = data.message; |
| | | messagenList.value = data; |
| | | agentTitle.value = data.name; |
| | | from.name = data.name; |
| | | refreshScroll(); //刷新滚动条位置 |
| | | isStopChat.value = false; |
| | | } |
| | |
| | | const querySessionDetail = async (session) => { |
| | | sectionList.value = session; |
| | | activeSessionId.value = session.id; |
| | | from.name = session.name; |
| | | const { code, data } = await getSessionDetailsApi(session.id); |
| | | if (code === 200) { |
| | | sessionDetailList.value = data.message; |
| | |
| | | createSession(''); |
| | | }); |
| | | onMounted(() => { |
| | | let container = document.getElementById('container'); |
| | | container.addEventListener('click', () => { |
| | | fileInput.value.cancel(); |
| | | |
| | | }) |
| | | EventBus.on('newChat', () => { |
| | | agentType.value = '1'; |
| | | createSession(''); |
| | |
| | | padding: 10px; |
| | | border-radius: 14px; |
| | | min-width: 200px; |
| | | cursor: pointer; |
| | | .icon-text { |
| | | margin-left: 10px; |
| | | } |