<template>
|
<div class="layoutHisCenter">
|
<a-button
|
type="primary"
|
status="danger"
|
style="
|
position: absolute;
|
top: 10px;
|
left: -40px;
|
font-size: 30px;
|
z-index: 9999;
|
cursor: pointer"
|
@click="emit('changeAgentType','1')"
|
>
|
<template #icon>
|
<icon-close style="font-size: 20px" />
|
</template>
|
</a-button>
|
|
<a-scrollbar
|
class="left-list"
|
style="
|
height: calc(100vh - 100px);
|
overflow-y: auto;
|
overflow-x: hidden;
|
"
|
>
|
<div class="historyTitle___F_iam">历史会话</div>
|
|
|
<div class="search">
|
<!-- 查询框-->
|
<div class="search-box">
|
<icon-search />
|
<a-input
|
placeholder="搜索历史会话"
|
v-model="searchValue"
|
style="width: 90%;"
|
/>
|
</div>
|
|
</div>
|
|
|
<div class="historyCenter">
|
<div
|
class="item historyCenter-box"
|
v-for="session in sessionList"
|
@click="querySessionDetail(session)"
|
>
|
<div class="text" >
|
<img
|
:style="{ width: '16px' }"
|
alt="dessert"
|
:src="session.avatar || imgSrc"
|
/>
|
{{ session.name }}
|
</div>
|
<a-popover position="rt">
|
<div class="time"
|
>{{
|
moment(new Date(session.create_time)).format(
|
'YYYY-MM-DD HH:mm:ss'
|
)
|
}}
|
</div>
|
<template #content>
|
<span
|
style="cursor: pointer; color: #4977ba; font-size: 12px"
|
@click="deleteSession(session)"
|
><icon-delete style="font-size: 14px" />删除</span
|
>
|
</template>
|
</a-popover>
|
</div>
|
</div>
|
</a-scrollbar>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import {
|
IconClose,
|
IconSearch,
|
IconTiktokColor
|
} from "@arco-design/web-vue/es/icon";
|
import { useAppStore, useUserStore } from "@/store";
|
import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
|
|
import { Message } from "@arco-design/web-vue";
|
import EventBus from '@/utils/EventBus';
|
import moment from "moment";
|
import {
|
addSessionApi,
|
chatApi,
|
getDialogListApi,
|
getSessionDetailsApi,
|
deleteSessionApi,
|
sessionListApi
|
} from "@/api/session";
|
|
import { queryCanvasList } from "@/api/Agent";
|
const emit = defineEmits(["querySessionDetail","changeAgentType"]);
|
import logo from "@/assets/images/model.png";
|
const sessionList = ref([]); //会话列表
|
const activeSessionId = ref("");
|
const fieldNames = { value: "id", label: "name" };
|
const dialogs = ref([]);
|
const dialogObj = reactive({});
|
const agentObj = reactive({});
|
const agentList = ref([]);
|
const searchValue = ref("");
|
const selectValue = ref("");
|
const sectionList = ref({});
|
const imgSrc = ref(logo);
|
const DialogList = async () => {
|
const { code, data } = await getDialogListApi();
|
if (code === 200) {
|
if (data) {
|
selectValue.value = data[0].id;
|
dialogs.value = data.map((item) => {
|
return {
|
...item,
|
type: 1 //智能体
|
};
|
});
|
// console.log(data, "dialogs");
|
queryCanvas();
|
}
|
}
|
};
|
|
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);
|
// }
|
//新建会话
|
querySessionList(dialogs.value[0].id);
|
|
|
} catch (err) {
|
// you can report use errorHandler or other
|
} finally {
|
}
|
};
|
|
|
// 查询会话列表
|
const querySessionList = async (id) => {
|
const { code, data } = await sessionListApi(id);
|
if (code === 200) {
|
sessionList.value = data;
|
|
|
|
} else {
|
Message.warning("查询失败");
|
}
|
};
|
|
//根据会话id删除会话
|
const deleteSession = async (session) => {
|
const { code } = await deleteSessionApi([session.id]);
|
if (code === 200) {
|
Message.success('删除成功');
|
querySessionList('');
|
}
|
};
|
|
const querySessionDetail = async (session) => {
|
console.log(session, 'session');
|
emit('changeAgentType','1');
|
emit('querySessionDetail',session);
|
}
|
onBeforeMount(()=>{
|
// DialogList()
|
querySessionList('');
|
})
|
|
onMounted(() => {
|
EventBus.on("history", () => {
|
emit('changeAgentType','3');
|
// DialogList()
|
querySessionList('');
|
|
});
|
})
|
onBeforeUnmount(() => {
|
EventBus.off("history");
|
});
|
|
|
</script>
|
<style scoped lang="less">
|
.layoutHisCenter{
|
width: 100%;
|
//background: #999999;
|
position: absolute;
|
left: 0;
|
top: 0;
|
.historyTitle___F_iam {
|
font-size: 36px;
|
line-height: 50px;
|
font-weight: 700;
|
text-align: center;
|
}
|
.search{
|
width: 100%;
|
.search-box{
|
width: 70%;
|
margin-left: 15%;
|
border: 1px solid var(--color-text-4);
|
padding: 10px;
|
border-radius: 12px;
|
background: var(--color-bg-2);
|
margin-top: 20px;
|
margin-bottom: 20px;
|
:deep(.arco-input-wrapper){
|
border: none;
|
background: var(--color-bg-2);
|
}
|
}
|
}
|
.historyCenter{
|
width: 100%;
|
margin-top: 30px;
|
.historyCenter-box{
|
display: flex;
|
width: 70%;
|
margin-left: 15%;
|
//border: 1px solid var(--color-neutral-3);
|
padding: 16px;
|
border-radius: 12px;
|
background: var(--color-bg-1);
|
margin-top: 10px;
|
cursor: pointer;
|
justify-content: space-between;
|
align-items: center;
|
color: var(--color-text-2);
|
}
|
.historyCenter-box:hover{
|
color: var(--color-text-2);
|
//border: 1px solid var(--color-neutral-3);
|
background: var(--color-bg-3);
|
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
|
}
|
}
|
|
|
|
|
}
|
|
|
|
</style>
|
