From edb63c3187ee3fa4e11764fef359f2607a16c6f2 Mon Sep 17 00:00:00 2001
From: yinbangzhong <zhongbangyin@126.com>
Date: 星期三, 07 八月 2024 10:30:41 +0800
Subject: [PATCH] 会话联调
---
src/api/session.ts | 4
src/views/session/sessionRecordsManager/index.vue | 604 ++++++++++++++++++++++++++++++------------------------
2 files changed, 335 insertions(+), 273 deletions(-)
diff --git a/src/api/session.ts b/src/api/session.ts
index ce11bb4..ac886be 100644
--- a/src/api/session.ts
+++ b/src/api/session.ts
@@ -6,9 +6,9 @@
data: any;
}
// 浼氳瘽鍒楄〃
-export function sessionListApi() {
+export function sessionListApi(dialog_id) {
return axios.get<ISessionListResult>(
- '/api/conversation/list?modeltype=localragflow'
+ "/api/conversation/list?modeltype=localragflow&dialogid=" + dialog_id
);
}
// 鍒犻櫎浼氳瘽
diff --git a/src/views/session/sessionRecordsManager/index.vue b/src/views/session/sessionRecordsManager/index.vue
index 1dd9235..2ac9a46 100644
--- a/src/views/session/sessionRecordsManager/index.vue
+++ b/src/views/session/sessionRecordsManager/index.vue
@@ -1,122 +1,19 @@
-<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, 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 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) {
- sessionList.value = data;
- } else {
- Message.warning('鏌ヨ澶辫触');
- }
- };
- //鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
- const addSession = () => {
- querySessionList();
- };
- onMounted(() => {
- querySessionList();
- });
- const appStore = useAppStore();
- 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>
<div class="container">
<AddSession :modalObj="modalObj" @addSession="addSession"></AddSession>
<a-card class="top-title">AI浼氳瘽璁板綍</a-card>
<a-row :gutter="[5, 5]" style="margin-top: 3px">
<a-col :span="4">
- <a-card style="height: 60px">
+ <a-card>
+ <a-select
+ v-model="selectValue"
+ :options="dialogs"
+ :field-names="fieldNames"
+ @change="dialogChange"
+ >
+ </a-select>
+ </a-card>
+ <a-card style="height: 50px">
<template #cover>
<div style="display: flex; justify-content: space-between">
<a-button
@@ -149,13 +46,15 @@
:class="{ isLeftActive: activeSessionId === session.id }"
>
<div class="text" :class="{ light: theme === 'dark' }">{{
- session.name
- }}</div>
+ session.name
+ }}
+ </div>
<div class="time">{{
- moment(new Date(session.create_time)).format(
- 'YYYY-MM-DD HH:mm:ss'
- )
- }}</div>
+ moment(new Date(session.create_time)).format(
+ "YYYY-MM-DD HH:mm:ss"
+ )
+ }}
+ </div>
</div>
</a-scrollbar>
</a-card>
@@ -176,7 +75,8 @@
<a-row justify="space-around" class="center-list">
<a-col :span="7" class="item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -184,7 +84,8 @@
</a-col>
<a-col :span="7" class="item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -192,7 +93,8 @@
</a-col>
<a-col :span="7" class="item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -200,7 +102,8 @@
</a-col>
<a-col :span="7" class="item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -208,7 +111,8 @@
</a-col>
<a-col :span="7" class="item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -216,7 +120,8 @@
</a-col>
<a-col :span="7" class="item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -238,8 +143,9 @@
>
<template #content>
<div :class="{ light: theme === 'light' }">{{
- sessionDetail.content
- }}</div>
+ sessionDetail.content
+ }}
+ </div>
</template>
</a-comment>
<a-comment
@@ -252,8 +158,9 @@
style="background-color: rgba(63, 64, 79, 1)"
>
<div :class="{ light: theme === 'light' }">{{
- sessionDetail.content
- }}</div>
+ sessionDetail.content
+ }}
+ </div>
</a-card>
</template>
</a-comment>
@@ -309,25 +216,30 @@
<div class="right-tag">
<a-space>
<a-button type="primary" shape="round" size="mini" class="btn"
- >鍏ㄩ儴</a-button
+ >鍏ㄩ儴
+ </a-button
>
<a-button type="outline" shape="round" size="mini" class="btn"
- >鏂囨。鍒涗綔</a-button
+ >鏂囨。鍒涗綔
+ </a-button
>
<a-button type="outline" shape="round" size="mini" class="btn"
- >鐭ヨ瘑瀛︿範</a-button
+ >鐭ヨ瘑瀛︿範
+ </a-button
>
</a-space>
<a-space style="margin-top: 10px">
<a-button type="outline" shape="round" size="mini" class="btn"
- >鏁堢巼鎻愬崌</a-button
+ >鏁堢巼鎻愬崌
+ </a-button
>
</a-space>
</div>
<div class="right-list">
<div class="right-item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -335,7 +247,8 @@
</div>
<div class="right-item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -343,7 +256,8 @@
</div>
<div class="right-item">
<div class="item-title">
- <IconTiktokColor></IconTiktokColor>鎶栭煶甯﹁揣鑴氭湰
+ <IconTiktokColor></IconTiktokColor>
+ 鎶栭煶甯﹁揣鑴氭湰
</div>
<div class="item-content" :class="{ dark: theme === 'dark' }">
缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑...
@@ -355,141 +269,289 @@
</a-row>
</div>
</template>
+<script setup lang="ts">
+import { IconClose, IconSearch, IconTiktokColor } from "@arco-design/web-vue/es/icon";
+import { useAppStore } from "@/store";
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import { Message } from "@arco-design/web-vue";
+import moment from "moment";
+import AddSession from "@/views/session/sessionManager/components/addSession.vue";
+import { chatApi, getDialogListApi, getSessionDetailsApi, sessionListApi } from "@/api/session";
+const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+const sessionList = ref([]); //浼氳瘽鍒楄〃
+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 fieldNames = { value: "id", label: "name" };
+const dialogs = ref([]);
+const selectValue = ref("");
+const DialogList = async () => {
+ const { code, data } = await getDialogListApi();
+ if (code === 200) {
+ if (data) {
+ selectValue.value = data[0].id;
+ dialogs.value = data;
+ querySessionList()
+ }
+ }
+};
+const dialogChange = (value) => {
+ querySessionList()
+};
+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(selectValue.value);
+ if (code === 200) {
+ sessionList.value = data;
+ } else {
+ Message.warning("鏌ヨ澶辫触");
+ }
+};
+//鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
+const addSession = () => {
+ querySessionList();
+};
+onMounted(() => {
+ DialogList();
+});
+const appStore = useAppStore();
+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>
<style scoped lang="scss">
- .isLeftActive {
- background-color: lightgrey;
- }
- .light {
- color: white !important;
- }
- .dark {
- color: gray !important;
- }
- .container {
- .top-title {
- line-height: 60px;
- font-size: 25px;
- font-family: 榛戜綋;
- }
- .center,
- .right {
- box-sizing: border-box;
- height: calc(100vh - 100px);
- }
- .left {
- /* height: calc(100vh - 160px);
- overflow-y: auto;
- overflow-x: hidden;*/
- border: 0px;
- .left-list {
- .item {
- cursor: pointer;
- .text,
- .time {
- line-height: 30px;
- }
- .text {
- color: black;
- padding-left: 10px;
- }
- .time {
- color: gray;
- font-size: 12px;
- padding-left: 10px;
- }
- }
- }
- }
- .card-btn-1 {
- margin: 10px;
- width: 75%;
- }
- .card-btn-2 {
- margin: 10px 10px;
- }
- .center {
- position: relative;
- .center-title {
- line-height: 60px;
- font-size: 25px;
- font-family: 榛戜綋;
- color: deepskyblue;
- }
- .center-content {
- font-size: 14px;
- color: gray;
- }
- .center-question {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
- .center-question-left {
- margin-top: 5px;
- margin-left: 20px;
- }
- .center-question-right {
- margin-right: 20px;
- }
- }
- .center-list {
- margin-top: 10px;
- .item {
- border-radius: 10px;
- margin-top: 10px;
- padding: 10px;
- height: 120px;
- background-color: lightcyan;
- .item-title {
- text-align: center;
- line-height: 40px;
- font-size: 20px;
- font-family: 榛戜綋;
- color: black;
- }
- }
- }
- .center-bottom {
- position: absolute;
- width: 90%;
- bottom: 20px;
- left: 5%;
- }
- }
- .right {
- .right-top {
- display: flex;
- justify-content: space-between;
- .right-title {
- font-size: 25px;
- font-family: 榛戜綋;
- color: black;
- }
- .right-btn {
- position: relative;
- left: 20px;
- top: 0px;
- }
- }
- .right-tag {
- margin-top: 20px;
- }
- .right-list {
- .right-item {
- border-radius: 10px;
- margin-top: 10px;
- padding: 10px;
- height: 120px;
- background-color: lightcyan;
- .item-title {
- text-align: center;
- line-height: 40px;
- font-size: 20px;
- font-family: 榛戜綋;
- color: black;
- }
- }
- }
- }
- }
+.isLeftActive {
+ background-color: lightgrey;
+}
+
+.light {
+ color: white !important;
+}
+
+.dark {
+ color: gray !important;
+}
+
+.container {
+
+.top-title {
+ line-height: 60px;
+ font-size: 25px;
+ font-family: 榛戜綋;
+}
+
+.center,
+.right {
+ box-sizing: border-box;
+ height: calc(100vh - 100px);
+}
+
+.left {
+ /* height: calc(100vh - 160px);
+ overflow-y: auto;
+ overflow-x: hidden;*/
+ border: 0px;
+
+.left-list {
+
+.item {
+ cursor: pointer;
+
+.text,
+.time {
+ line-height: 30px;
+}
+
+.text {
+ color: black;
+ padding-left: 10px;
+}
+
+.time {
+ color: gray;
+ font-size: 12px;
+ padding-left: 10px;
+}
+
+}
+}
+}
+.card-btn-1 {
+ margin: 10px;
+ width: 75%;
+}
+
+.card-btn-2 {
+ margin: 10px 10px;
+}
+
+.center {
+ position: relative;
+
+.center-title {
+ line-height: 60px;
+ font-size: 25px;
+ font-family: 榛戜綋;
+ color: deepskyblue;
+}
+
+.center-content {
+ font-size: 14px;
+ color: gray;
+}
+
+.center-question {
+ margin-top: 20px;
+ display: flex;
+ justify-content: space-between;
+
+.center-question-left {
+ margin-top: 5px;
+ margin-left: 20px;
+}
+
+.center-question-right {
+ margin-right: 20px;
+}
+
+}
+.center-list {
+ margin-top: 10px;
+
+.item {
+ border-radius: 10px;
+ margin-top: 10px;
+ padding: 10px;
+ height: 120px;
+ background-color: lightcyan;
+
+.item-title {
+ text-align: center;
+ line-height: 40px;
+ font-size: 20px;
+ font-family: 榛戜綋;
+ color: black;
+}
+
+}
+}
+.center-bottom {
+ position: absolute;
+ width: 90%;
+ bottom: 20px;
+ left: 5%;
+}
+
+}
+.right {
+
+.right-top {
+ display: flex;
+ justify-content: space-between;
+
+.right-title {
+ font-size: 25px;
+ font-family: 榛戜綋;
+ color: black;
+}
+
+.right-btn {
+ position: relative;
+ left: 20px;
+ top: 0px;
+}
+
+}
+.right-tag {
+ margin-top: 20px;
+}
+
+.right-list {
+
+.right-item {
+ border-radius: 10px;
+ margin-top: 10px;
+ padding: 10px;
+ height: 120px;
+ background-color: lightcyan;
+
+.item-title {
+ text-align: center;
+ line-height: 40px;
+ font-size: 20px;
+ font-family: 榛戜綋;
+ color: black;
+}
+
+}
+}
+}
+}
</style>
--
Gitblit v1.8.0