| | |
| | | <template> |
| | | <!-- 内容--> |
| | | <div class="header___lEPyH"> |
| | | <div class="chatHeader"> |
| | | <div class="chatHeaderBox"> |
| | | <span class="title">{{agentTitle}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <a-scrollbar |
| | | ref="scrollbar" |
| | | id="home" |
| | | id="agentHome" |
| | | class="chat-list" |
| | | style=" |
| | | width: 90%; |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { defineProps, ref, watch, defineEmits, onMounted, reactive, computed, nextTick } from "vue"; |
| | | import { defineProps, ref, watch, defineEmits, onMounted, reactive, computed, nextTick, onBeforeUnmount } from "vue"; |
| | | import { Message } from '@arco-design/web-vue'; |
| | | import { useAppStore } from "@/store"; |
| | | import { getAuthorization } from "@/utils/auth"; |
| | | import { EventSourceParserStream } from 'eventsource-parser/stream'; |
| | | import { agentResetApi, agentSetApi, getAgentSessionDetailsApi } from "@/api/agentSession"; |
| | | import EventBus from '@/utils/EventBus'; |
| | | const props = defineProps({ |
| | | modalObj: Object, |
| | | }); |
| | |
| | | const dialogId = ref(''); |
| | | const chatDis = ref(false); |
| | | const loading = ref(false); |
| | | const agentTitle = ref("未命名会话"); |
| | | |
| | | |
| | | const currIndex = ref(0); |
| | |
| | | // 初始化页面 |
| | | const initPage = async () => { |
| | | agentSet(); |
| | | agentReset(); |
| | | agentCompletion(); |
| | | queryAgentSessionDetail(agentObj.id); |
| | | }; |
| | | |
| | | const createNewAgent = async (session) => { |
| | | Object.assign(agentObj, session); |
| | | initPage(); |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | |
| | | // 调用set方法 |
| | | const agentSet = async () => { |
| | |
| | | title: agentObj.title, |
| | | dsl: agentObj.dsl, |
| | | }); |
| | | if (res.code === 200) { |
| | | console.log(res,'agentSet'); |
| | | if (res.code == 0) { |
| | | // sessionDetailList.value = res.data.dsl.messages; |
| | | // Message.success('修改成功'); |
| | | agentReset(); |
| | | } |
| | | } |
| | | // 调用reset方法 |
| | |
| | | const res = await agentResetApi({ |
| | | id: agentObj.id, |
| | | }); |
| | | if (res.code === 200) { |
| | | if (res.code == 0) { |
| | | // Message.success('修改成功'); |
| | | agentCompletion(); |
| | | } |
| | | } |
| | | // 调用completion方法 |
| | |
| | | if (code == 0) { |
| | | console.log(data,'会话详情'); |
| | | sessionDetailList.value = data.dsl.messages; |
| | | // refreshScroll(); //刷新滚动条位置 |
| | | agentTitle.value = data.name || '未命名会话'; |
| | | refreshScroll(); //刷新滚动条位置 |
| | | } |
| | | }; |
| | | |
| | |
| | | |
| | | chatDis.value = true; |
| | | loading.value = true; |
| | | if (!activeSessionId.value) { |
| | | Message.warning('请选择会话'); |
| | | chatDis.value = false; |
| | | loading.value = false; |
| | | return; |
| | | } |
| | | // if (!agentObj.id) { |
| | | // Message.warning('请选择会话'); |
| | | // chatDis.value = false; |
| | | // loading.value = false; |
| | | // return; |
| | | // } |
| | | |
| | | // if (displayedText.value) { |
| | | // querySessionList(); |
| | |
| | | 'Content-Type': 'application/json', |
| | | }, |
| | | body: JSON.stringify({ |
| | | conversation_id: activeSessionId.value, |
| | | messages: inputMsg.value, |
| | | id: agentObj.id, |
| | | message: inputMsg.value, |
| | | }), |
| | | } |
| | | ); |
| | |
| | | console.info('done'); |
| | | displayedText.value = ''; |
| | | queryAgentSessionDetail(agentObj.id); |
| | | EventBus.emit('queryAppUsageList'); |
| | | break; |
| | | } |
| | | } |
| | |
| | | const scrollbar = ref(null); |
| | | const refreshScroll = () => { |
| | | nextTick(() => { |
| | | const container = document.getElementById('home'); |
| | | const container = document.getElementById('agentHome'); |
| | | scrollbar.value.scrollTop(container.scrollHeight); |
| | | }); |
| | | }; |
| | | |
| | | |
| | | onMounted(() => { |
| | | |
| | | EventBus.on('createAgent', (data) => { |
| | | createNewAgent(data); |
| | | }); |
| | | EventBus.on('queryAgentSessionDetail', (data) => { |
| | | Object.assign(agentObj, data); |
| | | queryAgentSessionDetail(data.id); |
| | | }); |
| | | }); |
| | | onBeforeUnmount(() => { |
| | | EventBus.off('createAgent'); |
| | | EventBus.off('queryAgentSessionDetail'); |
| | | }); |
| | | |
| | | watch( |
| | | () => props.modalObj, |
| | | (newVal, oldVal) => { |
| | | console.log(newVal,'监听变化'); |
| | | Object.assign(agentObj, newVal); |
| | | // Object.assign(agentObj, newVal); |
| | | //调用agent初始化方法 |
| | | if(JSON.stringify(newVal) != '{}'){ |
| | | initPage(); |
| | | // initPage(); |
| | | } |
| | | },{ |
| | | immediate: true, |
| | |
| | | } |
| | | } |
| | | } |
| | | .header___lEPyH { |
| | | width: 100%; |
| | | height: 46px; |
| | | position: relative; |
| | | backdrop-filter: blur(15px); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | -webkit-backdrop-filter: blur(15px); |
| | | .chatHeaderBox { |
| | | width: auto; |
| | | border-radius: 8px; |
| | | padding: 4px 20px; |
| | | transition: all var(--animation-duration) var(--animation-transition); |
| | | display: flex; |
| | | align-items: flex-end; |
| | | overflow: hidden; /* 隐藏超出的内容 */ |
| | | text-overflow: ellipsis; /* 使用省略号来代替被隐藏的文字 */ |
| | | white-space: nowrap; /* 不换行,使内容在一行内显示 */ |
| | | max-width: 200px; |
| | | .title{ |
| | | color: var(--color-text-1); |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | } |
| | | </style> |