智能体管理的页面开发和功能开发

liudong

2024-08-02 3a022dc2caa78267a681824ea1c303f140cd6797

 src/views/session/sessionManager/index.vue

@@ -4,7 +4,7 @@
    import img2 from '@/assets/images/u69.png'
    import img3 from '@/assets/images/u74.png';
    import AddSession from './components/addSession.vue'
    import { ref, onMounted, computed, reactive, nextTick } from 'vue';
    import { ref, onMounted, computed, reactive, nextTick,watch } from 'vue';
    import { useUserStore,useAppStore } from '@/store';
    import { sessionListApi, deleteSessionApi,getSessionDetailsApi,chatApi }from '@/api/session';
    import { Message } from '@arco-design/web-vue';
@@ -25,20 +25,20 @@
    const streamStr=ref('');
    const modalObj=reactive({ add:false });
    //查询会话列表
  const querySessionList = async () => {
    const querySessionList = async () => {
        const { code, data } =await sessionListApi();
    if (code === 200) {
      sessionList.value = data;
            if(Array.isArray(data)&&data.length>0){
                activeSessionId.value=data[0].id;
                const res= await getSessionDetailsApi(data[0].id);
                if(res.code===200){
                    sessionDetailList.value=res.data.message;
                    refreshScroll();
        if (code === 200) {
          sessionList.value = data;
          if(Array.isArray(data)&&data.length>0){
                    activeSessionId.value=data[0].id;
                    const res= await getSessionDetailsApi(data[0].id);
                    if(res.code===200){
                        sessionDetailList.value=res.data.message;
                        refreshScroll();
                    }
                }
            }
        }else{
            Message.warning('查询失败');
          Message.warning('查询失败');
        }
    };
    //根据会话id删除会话
@@ -88,6 +88,8 @@
                sessionDetailList.value=res.data.message.map((item,index)=>{
                    if(index===res.data.message.length-1){
                        item.role='last';
                        displayedText.value='';
                        currIndex.value=0;
                        streamStr.value=item.content;
                        startDisplayStr();
                    }
@@ -103,7 +105,7 @@
    onMounted(()=>{
       initData();
    });
    //文字一个一个输出
    //文字动态输出
    const startDisplayStr = () => {
        if (timer) {
            clearTimeout(timer!);
@@ -119,7 +121,13 @@
            timer = null
        }
    }

    watch(() => scrollbar.value, (newScroll, oldScroll) => {
      if (newScroll) {
        // 获取a-scroll的高度
        const height = newScroll.$el.offsetHeight;
        console.log('a-scroll height changed to:', height);
      }
    },{deep:true})
</script>

<template>
@@ -134,7 +142,7 @@
                        </a-button>
                    </template>
                    <a-scrollbar class="left-list" style="height: 60vh;overflow-y: auto;">
                        <div class="item" :class="{isLeftActive:activeSessionId===session.id}" v-for="session in sessionList" :key="session.id" @click="querySessionDetail(session)">
                        <div class="item" :class="{ isLeftActive:activeSessionId===session.id }" v-for="session in sessionList" :key="session.id" @click="querySessionDetail(session)">
                            <div class="item-left">
                                <IconQuestionCircleFill/>　
                                {{session.name}}
@@ -222,16 +230,15 @@
                                avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
                            >
                                <template #content>
                                    <a-card class="chat-item-answer"  style="background-color: rgba(63, 64, 79, 1);">
                                        <div :class="{light:theme==='light'}"> {{displayedText}}</div>
                                    </a-card>
                                    <a-textarea readonly auto-size v-model="displayedText" class="chat-item-answer"  style="background-color: rgba(63, 64, 79, 1);">
                                    </a-textarea>
                                </template>
                            </a-comment>
                        </div>
                    </a-scrollbar>
                    <div class="bottom">
                        <div class="input">
                            <a-input v-model="inputMsg">
                            <a-input v-model="inputMsg" @keydown.enter="sendMessage" placeholder="输入您想了解的内容，按Enter发送">
                            <template #suffix>
                                <icon-send  style="cursor: pointer" @click="sendMessage"/>
                            </template>