新版UI对话页面开发

liudong

2024-08-16 532fea1fc92daa2765f2019ae379694fcdbe57e7

 src/views/sessionManager/components/agentSession.vue

@@ -1,5 +1,12 @@
<template>
  <!--      内容-->
  <div class="header___lEPyH">
    <div class="chatHeader">
      <div class="chatHeaderBox">
        <span class="title">{{agentTitle}}</span>
      </div>
    </div>
  </div>
  <a-scrollbar
    ref="scrollbar"
    id="agentHome"
@@ -105,6 +112,7 @@
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,
});
@@ -117,6 +125,7 @@
const dialogId = ref('');
const chatDis = ref(false);
const loading = ref(false);
const agentTitle = ref("未命名会话");


const currIndex = ref(0);
@@ -145,6 +154,15 @@
  agentCompletion();
  queryAgentSessionDetail(agentObj.id);
};

const createNewAgent = async (session) => {
  Object.assign(agentObj, session);
  initPage();


}



// 调用set方法
const agentSet = async () => {
@@ -224,6 +242,7 @@
  if (code == 0) {
    console.log(data,'会话详情');
    sessionDetailList.value = data.dsl.messages;
    agentTitle.value = data.name || '未命名会话';
    refreshScroll(); //刷新滚动条位置
  }
};
@@ -354,16 +373,18 @@


onMounted(() => {

  EventBus.on('createAgent', (data) => {
    createNewAgent(data);
  });
});

watch(
  () => props.modalObj,
  (newVal, oldVal) => {
    Object.assign(agentObj, newVal);
    // Object.assign(agentObj, newVal);
    //调用agent初始化方法
    if(JSON.stringify(newVal) != '{}'){
      initPage();
      // initPage();
    }
  },{
    immediate: true,
@@ -502,4 +523,26 @@
    }
  }
}
.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;
  }
}
</style>