From 1c1ce2c508aa108d06b248937646a6877a212c69 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期二, 06 八月 2024 10:13:12 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/flow_web
---
src/views/dmx/IntelligentAgent/components/sessionAction.vue | 265 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 265 insertions(+), 0 deletions(-)
diff --git a/src/views/dmx/IntelligentAgent/components/sessionAction.vue b/src/views/dmx/IntelligentAgent/components/sessionAction.vue
new file mode 100644
index 0000000..e084802
--- /dev/null
+++ b/src/views/dmx/IntelligentAgent/components/sessionAction.vue
@@ -0,0 +1,265 @@
+<template>
+ <div :style="{ height: heightrg }">
+ <div style="padding: 10px">
+ <a-avatar :style="{ backgroundColor: '#3370ff' }">
+ <img
+ :style="{ width: '100%' }"
+ alt="dessert"
+ src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
+ />
+ </a-avatar>
+ 璋冭瘯棰勮
+ </div>
+ <a-divider style="margin: 0; margin-left: 10px" />
+ <a-scrollbar
+ ref="scrollbar"
+ id="home"
+ class="chat-list"
+ style="width: 90%; overflow: auto; height: 70vh; 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' }" style="background-color: var(--color-bg-2);color: var(--color-text-3);border: none;padding: 16px;">{{
+ 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: var(--color-bg-2);color: var(--color-text-3);border: none"
+ >
+ <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: var(--color-bg-2);color: var(--color-text-3);border: none"
+ >
+ </a-textarea>
+ </template>
+ </a-comment>
+ </div>
+ </a-scrollbar>
+ <div class="bottom">
+ <div class="input">
+ <a-input
+ v-model="inputMsg"
+ @keydown.enter="sendMessage"
+ placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝鎸塃nter鍙戦��"
+ >
+ <template #suffix>
+ <icon-send style="cursor: pointer" @click="sendMessage" />
+ </template> </a-input
+ ></div>
+ <div class="text">鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰�</div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import {
+ IconMoreVertical,
+ IconQuestionCircleFill,
+ IconPoweroff,
+ IconCommon,
+ IconSend,
+} from '@arco-design/web-vue/es/icon';
+import img1 from '@/assets/images/u64.png';
+import img2 from '@/assets/images/u69.png';
+import img3 from '@/assets/images/u74.png';
+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';
+const userStore = useUserStore();
+const appStore = useAppStore();
+const theme = computed(() => {
+ return appStore.theme;
+});
+const heightrg = ref('calc(100vh - 100px)');
+const sessionList = ref([]); //浼氳瘽鍒楄〃
+const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+const activeSessionId = ref('');
+const inputMsg = ref('');
+const scrollbar = ref(null);
+
+const currIndex = ref(0);
+const displayedText = ref(''); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
+let timer: number | null = null;
+const streamStr = ref('');
+const modalObj = reactive({ add: false });
+//鏌ヨ浼氳瘽鍒楄〃
+const querySessionList = async () => {
+ const { code, data } = await sessionListApi();
+ if (code === 200) {
+ sessionList.value = data;
+ if (Array.isArray(data) && data.length > 0) {
+ activeSessionId.value = data[1].id;
+ const res = await getSessionDetailsApi(data[0].id);
+ if (res.code === 200) {
+ sessionDetailList.value = res.data.message;
+ refreshScroll();
+ }
+ }
+ } else {
+ Message.warning('鏌ヨ澶辫触');
+ }
+};
+//鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
+const deleteSession = async (session) => {
+ const { code } = await deleteSessionApi([session.id]);
+ if (code === 200) {
+ Message.success('鍒犻櫎鎴愬姛');
+ querySessionList();
+ }
+};
+// eslint-disable-next-line prettier/prettier
+// 鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
+const addSession = () => {
+ querySessionList();
+};
+// 鍒濆鍖栨暟鎹�
+const initData = () => {
+ querySessionList();
+};
+// 鑾峰彇鐧诲綍淇℃伅
+const userName = computed(() => {
+ return userStore.name;
+});
+const avatar = computed(() => {
+ return userStore.avatar;
+});
+const refreshScroll = () => {
+ nextTick(() => {
+ const container = document.getElementById('home');
+ scrollbar.value.scrollTop(container.scrollHeight);
+ });
+};
+// 鏍规嵁浼氳瘽id 鏌ヨ浼氳瘽璇︽儏
+const querySessionDetail = async (session) => {
+ activeSessionId.value = session.id;
+ const { code, data } = await getSessionDetailsApi(session.id);
+ if (code === 200) {
+ sessionDetailList.value = data.message;
+ refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+ }
+};
+const sendMessage = async () => {
+ 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('娑堟伅涓嶈兘涓虹┖');
+ }
+};
+onMounted(() => {
+ initData();
+});
+//鏂囧瓧鍔ㄦ�佽緭鍑�
+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;
+ }
+};
+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>
+
+<style scoped lang="less">
+.container {
+ width: 100%;
+ display: flex;
+}
+//.light {
+// color: white !important;
+//}
+.bottom {
+ width: 100%;
+ position: absolute;
+ bottom: 40px;
+ left: 0;
+
+ .input {
+ margin-left: 20%;
+ width: 60%;
+ }
+
+ .text {
+ margin-left: 40%;
+ font-size: 12px;
+ color: lightgrey;
+ line-height: 40px;
+ }
+}
+.chat-list {
+ width: 90%;
+ margin: 0px auto;
+ .chat-item {
+ margin-top: 20px;
+ .chat-item-answer {
+ color: white;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0