From ada965001c31dae9abb1a6cbc55becfc9f4b6eaa Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期一, 05 八月 2024 11:10:12 +0800
Subject: [PATCH] 智能体管理的页面开发和功能开发
---
src/views/sessionRecords/sessionRecordsManager/index.vue | 236 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 171 insertions(+), 65 deletions(-)
diff --git a/src/views/sessionRecords/sessionRecordsManager/index.vue b/src/views/sessionRecords/sessionRecordsManager/index.vue
index 528c003..3b3a1e9 100644
--- a/src/views/sessionRecords/sessionRecordsManager/index.vue
+++ b/src/views/sessionRecords/sessionRecordsManager/index.vue
@@ -1,14 +1,65 @@
<script setup lang="ts">
import { IconSearch,IconTiktokColor ,IconSend,IconClose} from '@arco-design/web-vue/es/icon';
import { useAppStore} from '@/store';
- import {computed,ref,onMounted,reactive} from 'vue';
- import {sessionListApi}from '@/api/session';
+ import { computed, ref, onMounted, reactive, nextTick } from 'vue';
import { Message } from '@arco-design/web-vue';
import moment from 'moment';
import AddSession from '@/views/session/sessionManager/components/addSession.vue';
+ import { sessionListApi, deleteSessionApi,getSessionDetailsApi,chatApi }from '@/api/session';
+ const sessionDetailList=ref([]);//鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
const sessionList=ref([]);//浼氳瘽鍒楄〃
- const modalObj=reactive({add:false});
- //鏌ヨ浼氳瘽鍒楄〃
+ const modalObj=reactive({ add:false });
+
+ const currIndex = ref(0)
+ const displayedText = ref('');// 姝ｅ湪鏄剧ず鐨勬枃瀛�
+ let timer: number|null = null;
+ const streamStr=ref('');
+ const inputMsg=ref('');
+ const activeSessionId=ref('');
+
+ const sendMessage= async (event)=>{
+ event.preventDefault();
+ if(!activeSessionId.value){
+ Message.warning('璇烽�夋嫨浼氳瘽');
+ return;
+ }
+ if(inputMsg.value){
+ const {code,data} =await chatApi({conversation_id:activeSessionId.value,messages:inputMsg.value});
+ const res= await getSessionDetailsApi(activeSessionId.value);
+ if(res.code===200){
+ 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();
+ }
+ return item;
+ });
+ refreshScroll();
+ }
+ inputMsg.value='';
+ }else{
+ Message.warning('娑堟伅涓嶈兘涓虹┖');
+ }
+ };
+ const querySessionDetail=async (session)=>{
+ activeSessionId.value=session.id;
+ const {code,data}= await getSessionDetailsApi(session.id);
+ if(code===200){
+ sessionDetailList.value=data.message;
+ refreshScroll();//鍒锋柊婊氬姩鏉′綅缃�
+ }
+ };
+ const scrollbar = ref(null);
+ const refreshScroll=()=>{
+ nextTick(()=>{
+ const container = document.getElementById('home');
+ scrollbar.value.scrollTop(container.scrollHeight);
+ });
+ };
+ // 鏌ヨ浼氳瘽鍒楄〃
const querySessionList=async ()=>{
const {code,data} =await sessionListApi();
if(code===200){
@@ -28,6 +79,22 @@
const theme = computed(() => {
return appStore.theme;
});
+ //鏂囧瓧鍔ㄦ�佽緭鍑�
+ const startDisplayStr = () => {
+ if (timer) {
+ clearTimeout(timer!);
+ }
+ const res = streamStr.value;
+ // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
+ if (currIndex.value < res.length) {
+ displayedText.value += res[currIndex.value];
+ currIndex.value++;
+ setTimeout(startDisplayStr, 100);
+ } else {
+ clearTimeout(timer!);
+ timer = null
+ }
+ }
</script>
<template>
@@ -50,7 +117,7 @@
</a-card>
<a-card class="left">
<a-scrollbar class="left-list" style="height: calc(100vh - 160px);overflow-y: auto;overflow-x: hidden;">
- <div class="item" v-for="session in sessionList">
+ <div class="item" v-for="session in sessionList" @click="querySessionDetail(session)" :class="{ isLeftActive:activeSessionId===session.id }">
<div class="text" :class="{light:theme==='dark'}">{{session.name}}</div>
<div class="time">{{moment(new Date(session.create_time)).format('YYYY-MM-DD HH:mm:ss')}}</div>
</div>
@@ -59,68 +126,102 @@
</a-col>
<a-col :span="15">
<a-card class="center">
- <div class="center-title">鏅鸿兘闂瓟</div>
- <div class="center-content">
- 鎴戝彲浠ョ悊瑙ｅ拰瀛︿範浜虹被鐨勮瑷�锛屽叿澶囧杞璇濈殑鑳藉姏锛岀幇鍦ㄥ拰鎴戝紑濮嬩氦娴佸惂~
- </div>
- <div class="center-question">
- <div class="center-question-left">璇曚竴璇曡繖鏍烽棶鎴�</div>
- <div class="center-question-right">
- <a-button type="primary">鎹竴鎹�</a-button>
+ <div v-if="sessionDetailList.length===0">
+ <div class="center-title">鏅鸿兘闂瓟</div>
+ <div class="center-content">
+ 鎴戝彲浠ョ悊瑙ｅ拰瀛︿範浜虹被鐨勮瑷�锛屽叿澶囧杞璇濈殑鑳藉姏锛岀幇鍦ㄥ拰鎴戝紑濮嬩氦娴佸惂~
</div>
+ <div class="center-question">
+ <div class="center-question-left">璇曚竴璇曡繖鏍烽棶鎴�</div>
+ <div class="center-question-right">
+ <a-button type="primary">鎹竴鎹�</a-button>
+ </div>
+ </div>
+ <a-row justify="space-around" class="center-list">
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{dark:theme==='dark'}">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{dark:theme==='dark'}">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{dark:theme==='dark'}">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{dark:theme==='dark'}">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{dark:theme==='dark'}">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ <a-col :span="7" class="item">
+ <div class="item-title">
+ <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ </div>
+ <div class="item-content" :class="{dark:theme==='dark'}">
+ 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
+ </div>
+ </a-col>
+ </a-row>
</div>
- <a-row justify="space-around" class="center-list">
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- <a-col :span="7" class="item">
- <div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
- </div>
- <div class="item-content" :class="{dark:theme==='dark'}">
- 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
- </div>
- </a-col>
- </a-row>
+ <a-scrollbar ref="scrollbar" id="home" v-else class="chat-list" style="width:90%;overflow:auto;height: 60vh;margin: 0px auto">
+ <div class="chat-item" v-for="sessionDetail in sessionDetailList">
+ <a-comment
+ v-if="sessionDetail.role==='user'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <div :class="{light:theme==='light'}">{{sessionDetail.content}}</div>
+ </template>
+ </a-comment>
+ <a-comment
+ v-else-if="sessionDetail.role==='assistant'"
+ 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'}">{{sessionDetail.content}}</div>
+ </a-card>
+ </template>
+ </a-comment>
+ <a-comment
+ v-else-if="sessionDetail.role==='last'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <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="center-bottom">
- <a-textarea style="height: 180px" placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝Shift+Enter鎹㈣" :max-length="500" allow-clear show-word-limit>
+ <a-textarea v-model="inputMsg" @keydown.shift.enter="sendMessage" style="height: 180px" placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝Shift+Enter鍙戦��" :max-length="500" allow-clear show-word-limit>
</a-textarea>
</div>
</a-card>
@@ -181,6 +282,9 @@
</template>
<style scoped lang="scss">
+ .isLeftActive{
+ background-color:lightgrey;
+ }
.light{
color: white !important;
}
@@ -210,10 +314,12 @@
}
.text{
color: black;
+ padding-left: 10px;
}
.time{
color: gray;
font-size: 12px;
+ padding-left: 10px;
}
}
}
@@ -269,7 +375,7 @@
.center-bottom{
position: absolute;
width: 90%;
- bottom: 70px;
+ bottom: 20px;
left:5%;
}
}
--
Gitblit v1.8.0