| | |
| | | </a-scrollbar> |
| | | </a-card> |
| | | </a-col> |
| | | <a-col :span="18"> |
| | | <!-- 智能体会话--> |
| | | <a-col :span="18" v-show="agentType == '1'"> |
| | | <a-card class="center"> |
| | | <div |
| | | <!-- <div |
| | | v-if="sessionDetailList.length === 0" |
| | | style=" |
| | | width: 90%; |
| | |
| | | </div> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | | </div> --> |
| | | <a-scrollbar |
| | | ref="scrollbar" |
| | | id="home" |
| | | v-else |
| | | class="chat-list" |
| | | style=" |
| | | width: 90%; |
| | |
| | | allow-clear |
| | | show-word-limit |
| | | :disabled="chatDis" |
| | | :class="{ textItemAnswer: theme === 'dark' }" |
| | | :auto-size="{ |
| | | minRows: 12, |
| | | maxRows: 5, |
| | |
| | | </div> |
| | | </a-card> |
| | | </a-col> |
| | | <a-col :span="18" v-show="agentType == '2'"> |
| | | <a-card class="center"> |
| | | <agentSession :modalObj="agentObj"></agentSession> |
| | | </a-card> |
| | | </a-col> |
| | | |
| | | <!-- <a-col :span="5"> |
| | | <a-card class="right"> |
| | | <div class="right-top"> |
| | |
| | | IconTiktokColor, |
| | | } from '@arco-design/web-vue/es/icon'; |
| | | import { useAppStore, useUserStore } from '@/store'; |
| | | import { computed, nextTick, onMounted, reactive, ref } from 'vue'; |
| | | import { computed, nextTick, onMounted, watch, reactive, ref } from 'vue'; |
| | | |
| | | import { Message } from '@arco-design/web-vue'; |
| | | import { EventSourceParserStream } from 'eventsource-parser/stream'; |
| | | import moment from 'moment'; |
| | | import AddSession from '@/views/sessionManager/components/addSession.vue'; |
| | | import agentSession from '@/views/sessionManager/components/agentSession.vue'; |
| | | import { |
| | | chatApi, |
| | | getDialogListApi, |
| | |
| | | sessionListApi, |
| | | } from '@/api/session'; |
| | | import { getAuthorization } from '@/utils/auth'; |
| | | import { queryCanvasList } from '@/api/Agent'; |
| | | import { getAgentSessionDetailsApi } from '@/api/agentSession'; |
| | | |
| | | const sessionDetailList = ref([]); //根据会话id出来的会话详情 |
| | | const sessionList = ref([]); //会话列表 |
| | |
| | | const dialogId = ref(''); |
| | | const chatDis = ref(false); |
| | | const loading = ref(false); |
| | | const agentType = ref('1'); |
| | | |
| | | const currIndex = ref(0); |
| | | const displayedText = ref(''); // 正在显示的文字 |
| | |
| | | const activeSessionId = ref(''); |
| | | const fieldNames = { value: 'id', label: 'name' }; |
| | | const dialogs = ref([]); |
| | | const dialogObj = reactive({}); |
| | | const agentObj = reactive({}); |
| | | const agentList = ref([]); |
| | | const selectValue = ref(''); |
| | | const sectionList = ref({}); |
| | | const DialogList = async () => { |
| | |
| | | if (code === 200) { |
| | | if (data) { |
| | | selectValue.value = data[0].id; |
| | | dialogs.value = data; |
| | | querySessionList(); |
| | | dialogs.value = data.map((item) => { |
| | | return { |
| | | ...item, |
| | | type: 1, //智能体 |
| | | }; |
| | | }); |
| | | console.log(data, 'dialogs'); |
| | | queryCanvas(); |
| | | // querySessionList(); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const queryCanvas = async (params = {}) => { |
| | | try { |
| | | const { data } = await queryCanvasList(params); |
| | | console.log(data, 'agent'); |
| | | agentList.value = data.map((item) => { |
| | | return { |
| | | ...item, |
| | | name: item.title, |
| | | type: 2, //agent |
| | | }; |
| | | }); |
| | | // 合并数组 |
| | | dialogs.value = dialogs.value.concat(agentList.value); |
| | | |
| | | // 判断当前是智能体或agent |
| | | // console.log(val, 'val'); |
| | | if (dialogs.value.length > 0) { |
| | | dialogChange(dialogs.value[0].id); |
| | | } |
| | | } catch (err) { |
| | | // you can report use errorHandler or other |
| | | } finally { |
| | | } |
| | | }; |
| | | |
| | | const handleShiftEnter = (event) => { |
| | | event.preventDefault(); |
| | | inputMsg.value += '\n'; |
| | | }; |
| | | const dialogChange = (val) => { |
| | | // 判断当前是智能体或agent |
| | | // console.log(val, 'val'); |
| | | dialogId.value = val; |
| | | querySessionList(); |
| | | 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 = () => { |
| | | sendMessage('click'); |
| | |
| | | } |
| | | } |
| | | } |
| | | querySessionList(); |
| | | chatDis.value = false; |
| | | loading.value = false; |
| | | inputMsg.value = ''; |
| | |
| | | refreshScroll(); //刷新滚动条位置 |
| | | } |
| | | }; |
| | | const queryAgentSessionDetail = async (id) => { |
| | | const { code, data } = await getAgentSessionDetailsApi(id); |
| | | if (code == 0) { |
| | | Object.assign(agentObj, data); |
| | | // sessionDetailList.value = data.message; |
| | | // refreshScroll(); //刷新滚动条位置 |
| | | } |
| | | }; |
| | | const scrollbar = ref(null); |
| | | const refreshScroll = () => { |
| | | nextTick(() => { |
| | |
| | | Message.warning('查询失败'); |
| | | } |
| | | }; |
| | | |
| | | // 查询会话列表 |
| | | const queryAgentSessionList = async () => { |
| | | // const { code, data } = await sessionListApi(selectValue.value); |
| | | // if (code === 200) { |
| | | // |
| | | // } else { |
| | | // Message.warning('查询失败'); |
| | | // } |
| | | queryAgentSessionDetail(selectValue.value); |
| | | }; |
| | | |
| | | //新增会话之后刷新会话列表 |
| | | const addSession = () => { |
| | | querySessionList(); |
| | |
| | | onMounted(() => { |
| | | DialogList(); |
| | | }); |
| | | |
| | | const appStore = useAppStore(); |
| | | const theme = computed(() => { |
| | | return appStore.theme; |
| | | }); |
| | | |
| | | //文字动态输出 |
| | | const startDisplayStr = () => { |
| | | if (timer) { |
| | |
| | | |
| | | .left { |
| | | /* height: calc(100vh - 160px); |
| | | overflow-y: auto; |
| | | overflow-x: hidden;*/ |
| | | overflow-y: auto; |
| | | overflow-x: hidden;*/ |
| | | border: 0px; |
| | | |
| | | .left-list { |
| | |
| | | background: #f1f1f1; |
| | | border-radius: 14px; |
| | | } |
| | | } |
| | | .textItemAnswer { |
| | | background-color: #373739; |
| | | } |
| | | |
| | | .center { |
| | |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | position: relative; |
| | | // padding-top:10px; |
| | | :deep(.arco-textarea-wrapper) { |
| | | border-radius: 24px; |
| | | } |
| | | |
| | | .btn-send { |
| | | position: absolute !important; |
| | | right: 5px; |
| | | bottom: 5px; |
| | | right: 10px; |
| | | bottom: 10px; |
| | | z-index: 10; |
| | | } |
| | | :deep(.arco-btn-size-large) { |
| | | height: 28px; |
| | | width: 60px; |
| | | } |
| | | } |
| | | :deep(.arco-textarea-wrapper) { |
| | | padding-top: 5px; |
| | | } |
| | | } |
| | | } |