Commit 76bc1ab7 by pengshun

feat: 添加对话分析页面

parent a7cc17d2
...@@ -6,6 +6,7 @@ import cn.iocoder.yudao.framework.common.pojo.PageResult; ...@@ -6,6 +6,7 @@ import cn.iocoder.yudao.framework.common.pojo.PageResult;
import cn.iocoder.yudao.framework.common.util.object.BeanUtils; import cn.iocoder.yudao.framework.common.util.object.BeanUtils;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.*; import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.*;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.conversation.AiChatConversationRespVO; import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.conversation.AiChatConversationRespVO;
import cn.iocoder.yudao.module.ai.controller.admin.knowledge.vo.document.AiKnowledgeDocumentUpdateStatusReqVO;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatAnalysisDO; import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatAnalysisDO;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatConversationDO; import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatConversationDO;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatSummaryDO; import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatSummaryDO;
...@@ -16,6 +17,7 @@ import io.swagger.v3.oas.annotations.tags.Tag; ...@@ -16,6 +17,7 @@ import io.swagger.v3.oas.annotations.tags.Tag;
import jakarta.annotation.Resource; import jakarta.annotation.Resource;
import jakarta.validation.Valid; import jakarta.validation.Valid;
import lombok.extern.slf4j.Slf4j; import lombok.extern.slf4j.Slf4j;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
import java.util.Collections; import java.util.Collections;
import java.util.List; import java.util.List;
...@@ -114,7 +116,7 @@ public class AiChatAnalysisController { ...@@ -114,7 +116,7 @@ public class AiChatAnalysisController {
@Operation(summary = "获得分析总结数据") @Operation(summary = "获得分析总结数据")
@GetMapping("/get-summary") @GetMapping("/get-summary")
public CommonResult<AiChatSummaryRespVO> getChatSummary(AiChatSummaryReqVO pageReqVO) { public CommonResult<AiChatSummaryRespVO> getChatSummary(AiChatSummaryReqVO pageReqVO) {
AiChatSummaryDO result = chatAnalysisService.getChatSummaryPage(pageReqVO); AiChatSummaryDO result = chatAnalysisService.getChatSummary(pageReqVO);
return success(BeanUtils.toBean(result, AiChatSummaryRespVO.class)); return success(BeanUtils.toBean(result, AiChatSummaryRespVO.class));
} }
...@@ -124,4 +126,22 @@ public class AiChatAnalysisController { ...@@ -124,4 +126,22 @@ public class AiChatAnalysisController {
return success(chatAnalysisService.createChatSummary(createReqVO)); return success(chatAnalysisService.createChatSummary(createReqVO));
} }
@Operation(summary = "获得对话总结列表")
@GetMapping("/page-summary")
public CommonResult<PageResult<AiChatSummaryRespVO>> getChatSummaryPage(AiChatSummaryPageReqVO pageReqVO) {
PageResult<AiChatSummaryDO> pageResult = chatAnalysisService.getChatSummaryPage(pageReqVO);
if (CollUtil.isEmpty(pageResult.getList())) {
return success(PageResult.empty());
}
return success(BeanUtils.toBean(pageResult, AiChatSummaryRespVO.class));
}
@PutMapping("/update-summary-status")
@Operation(summary = "更新对话总结状态")
public CommonResult<Boolean> updateSummaryStatus(
@Valid @RequestBody AiSummaryUpdateStatusReqVO reqVO) {
chatAnalysisService.updateSummaryStatus(reqVO);
return success(true);
}
} }
...@@ -28,6 +28,9 @@ public class AiChatSummaryCreateReqVO { ...@@ -28,6 +28,9 @@ public class AiChatSummaryCreateReqVO {
@Schema(description = "总结内容", requiredMode = Schema.RequiredMode.REQUIRED, example = "公租房业务:登录密码是多少?") @Schema(description = "总结内容", requiredMode = Schema.RequiredMode.REQUIRED, example = "公租房业务:登录密码是多少?")
private String summary; private String summary;
@Schema(description = "分类", requiredMode = Schema.RequiredMode.REQUIRED, example = "公租房或长租房")
private String type;
@Schema(description = "总结时间", requiredMode = Schema.RequiredMode.REQUIRED, example = "1780243200000") @Schema(description = "总结时间", requiredMode = Schema.RequiredMode.REQUIRED, example = "1780243200000")
@DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND) @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND)
private LocalDateTime summaryTime; private LocalDateTime summaryTime;
......
package cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis;
import cn.iocoder.yudao.framework.common.pojo.PageParam;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
import java.time.LocalDateTime;
import static cn.iocoder.yudao.framework.common.util.date.DateUtils.FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND;
@Schema(description = "管理后台 - AI 对话总结的分页 Request VO")
@Data
public class AiChatSummaryPageReqVO extends PageParam {
@Schema(description = "是否公租房")
private String type;
@Schema(description = "是否处理")
private Integer status;
}
...@@ -15,4 +15,10 @@ public class AiChatSummaryRespVO implements VO { ...@@ -15,4 +15,10 @@ public class AiChatSummaryRespVO implements VO {
@Schema(description = "总结内容", example = "待解决的问题:1. 。。。") @Schema(description = "总结内容", example = "待解决的问题:1. 。。。")
private String summary; private String summary;
@Schema(description = "分类", example = "长租房")
private String type;
@Schema(description = "状态", example = "0")
private Integer status;
} }
package cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis;
import cn.iocoder.yudao.framework.common.enums.CommonStatusEnum;
import cn.iocoder.yudao.framework.common.validation.InEnum;
import io.swagger.v3.oas.annotations.media.Schema;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
@Schema(description = "管理后台 - AI 对话总结更新状态 Request VO")
@Data
public class AiSummaryUpdateStatusReqVO {
@Schema(description = "编号", requiredMode = Schema.RequiredMode.REQUIRED, example = "15583")
@NotNull(message = "编号不能为空")
private Long id;
@Schema(description = "状态", requiredMode = Schema.RequiredMode.REQUIRED, example = "0")
@NotNull(message = "状态不能为空")
private Integer status;
}
\ No newline at end of file
...@@ -48,4 +48,8 @@ public class AiChatSummaryDO extends BaseDO { ...@@ -48,4 +48,8 @@ public class AiChatSummaryDO extends BaseDO {
private LocalDateTime summaryTime; private LocalDateTime summaryTime;
private String type;
private Integer status;
} }
package cn.iocoder.yudao.module.ai.dal.mysql.chat; package cn.iocoder.yudao.module.ai.dal.mysql.chat;
import cn.iocoder.yudao.framework.common.pojo.PageResult;
import cn.iocoder.yudao.framework.mybatis.core.mapper.BaseMapperX; import cn.iocoder.yudao.framework.mybatis.core.mapper.BaseMapperX;
import cn.iocoder.yudao.framework.mybatis.core.query.LambdaQueryWrapperX; import cn.iocoder.yudao.framework.mybatis.core.query.LambdaQueryWrapperX;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.AiChatSummaryPageReqVO;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.AiChatSummaryReqVO; import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.AiChatSummaryReqVO;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.AiChatSummaryRespVO; import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.AiChatSummaryRespVO;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.conversation.AiChatConversationPageReqVO;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatConversationDO;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatSummaryDO; import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatSummaryDO;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Mapper;
import java.util.List;
/** /**
* AI 聊天对话 Mapper * AI 聊天对话 Mapper
...@@ -21,4 +29,12 @@ public interface AiChatSummaryMapper extends BaseMapperX<AiChatSummaryDO> { ...@@ -21,4 +29,12 @@ public interface AiChatSummaryMapper extends BaseMapperX<AiChatSummaryDO> {
.eqIfPresent(AiChatSummaryDO::getChatId, reqVo.getChatId()) .eqIfPresent(AiChatSummaryDO::getChatId, reqVo.getChatId())
.eqIfPresent(AiChatSummaryDO::getSummaryTime, reqVo.getSummaryTime())); .eqIfPresent(AiChatSummaryDO::getSummaryTime, reqVo.getSummaryTime()));
} }
default PageResult<AiChatSummaryDO> selectSummaryPage(AiChatSummaryPageReqVO pageReqVO) {
return selectPage(pageReqVO, new LambdaQueryWrapperX<AiChatSummaryDO>()
.likeIfPresent(AiChatSummaryDO::getType, pageReqVO.getType())
.eqIfPresent(AiChatSummaryDO::getStatus, pageReqVO.getStatus())
.orderByDesc(AiChatSummaryDO::getSummaryTime) // 最新总结在前
.orderByDesc(AiChatSummaryDO::getId));
}
} }
...@@ -27,7 +27,11 @@ public interface AiChatAnalysisService { ...@@ -27,7 +27,11 @@ public interface AiChatAnalysisService {
List<AiChatKeywordCountVO> getChatKeywordsPage(AiChatKeywordsPageReqVO pageReqVO); List<AiChatKeywordCountVO> getChatKeywordsPage(AiChatKeywordsPageReqVO pageReqVO);
AiChatSummaryDO getChatSummaryPage(AiChatSummaryReqVO pageReqVO); AiChatSummaryDO getChatSummary(AiChatSummaryReqVO pageReqVO);
Long createChatSummary(AiChatSummaryCreateReqVO createReqVO); Long createChatSummary(AiChatSummaryCreateReqVO createReqVO);
PageResult<AiChatSummaryDO> getChatSummaryPage(AiChatSummaryPageReqVO pageReqVO);
void updateSummaryStatus(AiSummaryUpdateStatusReqVO reqVO);
} }
...@@ -4,6 +4,7 @@ import cn.iocoder.yudao.framework.common.pojo.PageResult; ...@@ -4,6 +4,7 @@ import cn.iocoder.yudao.framework.common.pojo.PageResult;
import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.*; import cn.iocoder.yudao.module.ai.controller.admin.chat.vo.analysis.*;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatAnalysisDO; import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatAnalysisDO;
import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatSummaryDO; import cn.iocoder.yudao.module.ai.dal.dataobject.chat.AiChatSummaryDO;
import cn.iocoder.yudao.module.ai.dal.dataobject.knowledge.AiKnowledgeDocumentDO;
import cn.iocoder.yudao.module.ai.dal.mysql.chat.AiChatAnalysisMapper; import cn.iocoder.yudao.module.ai.dal.mysql.chat.AiChatAnalysisMapper;
import cn.iocoder.yudao.module.ai.dal.mysql.chat.AiChatSummaryMapper; import cn.iocoder.yudao.module.ai.dal.mysql.chat.AiChatSummaryMapper;
import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.core.metadata.IPage;
...@@ -173,7 +174,7 @@ public class AiChatAnalysisServiceImpl implements AiChatAnalysisService { ...@@ -173,7 +174,7 @@ public class AiChatAnalysisServiceImpl implements AiChatAnalysisService {
} }
@Override @Override
public AiChatSummaryDO getChatSummaryPage(AiChatSummaryReqVO pageReqVO) { public AiChatSummaryDO getChatSummary(AiChatSummaryReqVO pageReqVO) {
return chatSummaryMapper.selectSummary(pageReqVO); return chatSummaryMapper.selectSummary(pageReqVO);
} }
...@@ -189,11 +190,32 @@ public class AiChatAnalysisServiceImpl implements AiChatAnalysisService { ...@@ -189,11 +190,32 @@ public class AiChatAnalysisServiceImpl implements AiChatAnalysisService {
} }
// 2. 创建 AiChatConversationDO 聊天对话 // 2. 创建 AiChatConversationDO 聊天对话
AiChatSummaryDO conversation = new AiChatSummaryDO().setChatId(createReqVO.getChatId()) AiChatSummaryDO conversation = new AiChatSummaryDO().setChatId(createReqVO.getChatId())
.setSummary(createReqVO.getSummary()).setSummaryTime(summaryTime); .setSummary(createReqVO.getSummary())
.setSummaryTime(summaryTime)
.setType(createReqVO.getType());
chatSummaryMapper.insert(conversation); chatSummaryMapper.insert(conversation);
return conversation.getId(); return conversation.getId();
} }
@Override
public PageResult<AiChatSummaryDO> getChatSummaryPage(AiChatSummaryPageReqVO pageReqVO) {
// 封装返回
return chatSummaryMapper.selectSummaryPage(pageReqVO);
}
@Override
public void updateSummaryStatus(AiSummaryUpdateStatusReqVO reqVO) {
// 1. 校验存在
AiChatSummaryDO summary = chatSummaryMapper.selectById(reqVO.getId());
if (summary == null) {
throw exception(CHAT_ANALYSIS_NOT_EXISTS);
}
// 2. 更新状态
chatSummaryMapper.updateById(new AiChatSummaryDO()
.setId(reqVO.getId()).setStatus(reqVO.getStatus()));
}
private Double calculatePercent(Long current, Long previous) { private Double calculatePercent(Long current, Long previous) {
if (previous == null || previous == 0) { if (previous == null || previous == 0) {
return current == 0 ? 0.0 : null; // 无法计算百分比时返回null,前端可展示“-” return current == 0 ? 0.0 : null; // 无法计算百分比时返回null,前端可展示“-”
......
...@@ -61,4 +61,16 @@ export const ChatAnalysisApi = { ...@@ -61,4 +61,16 @@ export const ChatAnalysisApi = {
getChatSummary: async (params: any) => { getChatSummary: async (params: any) => {
return await request.get({ url: `/ai/chat/analysis/get-summary`, params }) return await request.get({ url: `/ai/chat/analysis/get-summary`, params })
}, },
// 获得对话总结分页
getChatSummaryPage: async (params: any) => {
return await request.get({ url: `/ai/chat/analysis/page-summary`, params })
},
// 修改对话总结状态
updateSummaryStatus: async (data: any) => {
return await request.put({
url: `/ai/chat/analysis/update-summary-status`,
data
})
},
} }
...@@ -10,6 +10,8 @@ declare module 'vue' { ...@@ -10,6 +10,8 @@ declare module 'vue' {
AddNode: typeof import('./../components/SimpleProcessDesigner/src/addNode.vue')['default'] AddNode: typeof import('./../components/SimpleProcessDesigner/src/addNode.vue')['default']
AppLinkInput: typeof import('./../components/AppLinkInput/index.vue')['default'] AppLinkInput: typeof import('./../components/AppLinkInput/index.vue')['default']
AppLinkSelectDialog: typeof import('./../components/AppLinkInput/AppLinkSelectDialog.vue')['default'] AppLinkSelectDialog: typeof import('./../components/AppLinkInput/AppLinkSelectDialog.vue')['default']
'AutoComponents.d': typeof import('./auto-components.d.ts')['default']
'AutoImports.d': typeof import('./auto-imports.d.ts')['default']
Backtop: typeof import('./../components/Backtop/src/Backtop.vue')['default'] Backtop: typeof import('./../components/Backtop/src/Backtop.vue')['default']
CardTitle: typeof import('./../components/Card/src/CardTitle.vue')['default'] CardTitle: typeof import('./../components/Card/src/CardTitle.vue')['default']
ColorInput: typeof import('./../components/ColorInput/index.vue')['default'] ColorInput: typeof import('./../components/ColorInput/index.vue')['default']
...@@ -29,6 +31,7 @@ declare module 'vue' { ...@@ -29,6 +31,7 @@ declare module 'vue' {
Dialog: typeof import('./../components/Dialog/src/Dialog.vue')['default'] Dialog: typeof import('./../components/Dialog/src/Dialog.vue')['default']
DictSelect: typeof import('./../components/FormCreate/src/components/DictSelect.vue')['default'] DictSelect: typeof import('./../components/FormCreate/src/components/DictSelect.vue')['default']
DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default'] DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
Dist: typeof import('./../../dist.zip')['default']
DiyEditor: typeof import('./../components/DiyEditor/index.vue')['default'] DiyEditor: typeof import('./../components/DiyEditor/index.vue')['default']
DocAlert: typeof import('./../components/DocAlert/index.vue')['default'] DocAlert: typeof import('./../components/DocAlert/index.vue')['default']
Draggable: typeof import('./../components/Draggable/index.vue')['default'] Draggable: typeof import('./../components/Draggable/index.vue')['default']
......
<template>
<el-container class="ai-layout">
<!-- 左侧:对话列表 -->
<ConversationList
:active-id="activeConversationId"
ref="conversationListRef"
@on-conversation-create="handleConversationCreateSuccess"
@on-conversation-click="handleConversationClick"
@on-conversation-clear="handleConversationClear"
@on-conversation-delete="handlerConversationDelete"
/>
<!-- 右侧:对话详情 -->
<el-container class="detail-container">
<el-header class="header">
<div class="header-left">
<el-button size="small" @click="handleExpandAllAnalysis">一键展开</el-button>
<el-button size="small" @click="handleCollapseAllAnalysis">一键收起</el-button>
<el-button size="small" @click="handleSummary">今日总结</el-button>
</div>
</el-header>
<!-- main:消息列表 -->
<el-main class="main-container">
<div>
<div class="message-container">
<!-- 情况一:消息加载中 -->
<MessageLoading v-if="activeMessageListLoading" />
<!-- 情况二:无聊天对话时 -->
<MessageNewConversation
v-if="!activeConversation"
@on-new-conversation="handleConversationCreate"
/>
<!-- 情况三:消息列表为空 -->
<MessageListEmpty
v-if="!activeMessageListLoading && messageList.length === 0 && activeConversation"
@on-prompt="doSendMessage"
/>
<!-- 情况四:消息列表不为空 -->
<MessageList
v-if="!activeMessageListLoading && messageList.length > 0"
ref="messageRef"
:conversation="activeConversation"
:list="messageList"
@on-delete-success="handleMessageDelete"
@on-edit="handleMessageEdit"
@on-refresh="handleMessageRefresh"
/>
</div>
</div>
</el-main>
</el-container>
<!-- 更新对话 Form -->
<ConversationUpdateForm
ref="conversationUpdateFormRef"
@success="handleConversationUpdateSuccess"
/>
</el-container>
</template>
<script setup lang="ts">
import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'
import { ChatAnalysisApi, ChatAnalysisVO } from '@/api/ai/chat/analysis'
import ConversationList from './components/conversation/ConversationList.vue'
import ConversationUpdateForm from './components/conversation/ConversationUpdateForm.vue'
import MessageList from './components/message/MessageList.vue'
import MessageListEmpty from './components/message/MessageListEmpty.vue'
import MessageLoading from './components/message/MessageLoading.vue'
import MessageNewConversation from './components/message/MessageNewConversation.vue'
/** AI 聊天对话 列表 */
defineOptions({ name: 'AiChatMsg' })
const route = useRoute() // 路由
const message = useMessage() // 消息弹窗
// 聊天对话
const conversationListRef = ref()
const activeConversationId = ref<number | null>(null) // 选中的对话编号
const activeConversation = ref<ChatAnalysisVO | null>(null) // 选中的 Conversation
const conversationInProgress = ref(false) // 对话是否正在进行中。目前只有【发送】消息时,会更新为 true,避免切换对话、删除对话等操作
// 消息列表
const messageRef = ref()
const activeMessageList = ref<ChatMessageVO[]>([]) // 选中对话的消息列表
const activeMessageListLoading = ref<boolean>(false) // activeMessageList 是否正在加载中
const activeMessageListLoadingTimer = ref<any>() // activeMessageListLoading Timer 定时器。如果加载速度很快,就不进入加载中
// 消息滚动
const textSpeed = ref<number>(50) // Typing speed in milliseconds
const textRoleRunning = ref<boolean>(false) // Typing speed in milliseconds
// 发送消息输入框
const isComposing = ref(false) // 判断用户是否在输入
const conversationInAbortController = ref<any>() // 对话进行中 abort 控制器(控制 stream 对话)
const inputTimeout = ref<any>() // 处理输入中回车的定时器
const prompt = ref<string>() // prompt
const enableContext = ref<boolean>(true) // 是否开启上下文
// 接收 Stream 消息
const receiveMessageFullText = ref('')
const receiveMessageDisplayedText = ref('')
// 获取子组件 ref
// const messageRef = ref<InstanceType<typeof MessageList>>()
// 一键展开所有分析面板
const handleExpandAllAnalysis = () => {
if (messageRef.value) {
messageRef.value.toggleAllAnalysis(true)
}
}
// 一键收起所有分析面板
const handleCollapseAllAnalysis = () => {
if (messageRef.value) {
messageRef.value.toggleAllAnalysis(false)
}
}
// =========== 【聊天对话】相关 ===========
/** 获取对话信息 */
const getConversation = async (id: number | null) => {
if (!id) {
return
}
const conversation: ChatAnalysisVO = await ChatAnalysisApi.getChatConversationMyList(id)
if (!conversation) {
return
}
activeConversation.value = conversation
activeConversationId.value = conversation.id
}
/**
* 点击某个对话
*
* @param conversation 选中的对话
* @return 是否切换成功
*/
const handleConversationClick = async (conversation: ChatAnalysisVO) => {
// 更新选中的对话 id
activeConversationId.value = conversation.id
activeConversation.value = conversation
// 刷新 message 列表
await getMessageList()
// 滚动底部
// scrollToBottom(true)
scrollToTop(true)
// 清空输入框
prompt.value = ''
return true
}
/** 删除某个对话*/
const handlerConversationDelete = async (delConversation: ChatAnalysisVO) => {
// 删除的对话如果是当前选中的,那么就重置
if (activeConversationId.value === delConversation.id) {
await handleConversationClear()
}
}
/** 清空选中的对话 */
const handleConversationClear = async () => {
// 对话进行中,不允许切换
if (conversationInProgress.value) {
message.alert('对话中,不允许切换!')
return false
}
activeConversationId.value = null
activeConversation.value = null
activeMessageList.value = []
}
/** 修改聊天对话 */
const conversationUpdateFormRef = ref()
const openChatConversationUpdateForm = async () => {
conversationUpdateFormRef.value.open(activeConversationId.value)
}
const handleConversationUpdateSuccess = async () => {
// 对话更新成功,刷新最新信息
await getConversation(activeConversation.value.chatId)
}
/** 处理聊天对话的创建成功 */
const handleConversationCreate = async () => {
// 创建对话
await conversationListRef.value.createConversation()
}
/** 处理聊天对话的创建成功 */
const handleConversationCreateSuccess = async () => {
// 创建新的对话,清空输入框
prompt.value = ''
}
// =========== 【消息列表】相关 ===========
/** 获取消息 message 列表 */
const getMessageList = async () => {
try {
if (activeConversationId.value === null) {
return
}
// Timer 定时器,如果加载速度很快,就不进入加载中
activeMessageListLoadingTimer.value = setTimeout(() => {
activeMessageListLoading.value = true
}, 60)
// 获取消息列表
activeMessageList.value = await ChatAnalysisApi.getChatList(
activeConversation.value.chatId
)
// 滚动到最下面
await nextTick()
// await scrollToBottom()
} finally {
// time 定时器,如果加载速度很快,就不进入加载中
if (activeMessageListLoadingTimer.value) {
clearTimeout(activeMessageListLoadingTimer.value)
}
// 加载结束
activeMessageListLoading.value = false
}
}
/**
* 消息列表
*
* 和 {@link #getMessageList()} 的差异是,把 systemMessage 考虑进去
*/
const messageList = computed(() => {
if (activeMessageList.value.length > 0) {
return activeMessageList.value
}
// 没有消息时,如果有 systemMessage 则展示它
if (activeConversation.value?.systemMessage) {
return [
{
id: 0,
type: 'system',
content: activeConversation.value.systemMessage
}
]
}
return []
})
/** 处理删除 message 消息 */
const handleMessageDelete = () => {
if (conversationInProgress.value) {
message.alert('回答中,不能删除!')
return
}
// 刷新 message 列表
getMessageList()
}
/** 处理 message 清空 */
const handlerMessageClear = async () => {
if (!activeConversationId.value) {
return
}
try {
// 确认提示
await message.delConfirm('确认清空对话消息?')
// 清空对话
await ChatMessageApi.deleteByConversationId(activeConversationId.value)
// 刷新 message 列表
activeMessageList.value = []
} catch {}
}
/** 回到 message 列表的顶部 */
const handleGoTopMessage = () => {
messageRef.value.handlerGoTop()
}
// =========== 【发送消息】相关 ===========
/** 处理来自 keydown 的发送消息 */
const handleSendByKeydown = async (event) => {
// 判断用户是否在输入
if (isComposing.value) {
return
}
// 进行中不允许发送
if (conversationInProgress.value) {
return
}
const content = prompt.value?.trim() as string
if (event.key === 'Enter') {
if (event.shiftKey) {
// 插入换行
prompt.value += '\r\n'
event.preventDefault() // 防止默认的换行行为
} else {
// 发送消息
await doSendMessage(content)
event.preventDefault() // 防止默认的提交行为
}
}
}
/** 处理来自【发送】按钮的发送消息 */
const handleSendByButton = () => {
doSendMessage(prompt.value?.trim() as string)
}
/** 处理 prompt 输入变化 */
const handlePromptInput = (event) => {
// 非输入法 输入设置为 true
if (!isComposing.value) {
// 回车 event data 是 null
if (event.data == null) {
return
}
isComposing.value = true
}
// 清理定时器
if (inputTimeout.value) {
clearTimeout(inputTimeout.value)
}
// 重置定时器
inputTimeout.value = setTimeout(() => {
isComposing.value = false
}, 400)
}
// TODO @芋艿:是不是可以通过 @keydown.enter、@keydown.shift.enter 来实现,回车发送、shift+回车换行;主要看看,是不是可以简化 isComposing 相关的逻辑
const onCompositionstart = () => {
isComposing.value = true
}
const onCompositionend = () => {
// console.log('输入结束...')
setTimeout(() => {
isComposing.value = false
}, 200)
}
/** 真正执行【发送】消息操作 */
const doSendMessage = async (content: string) => {
// 校验
if (content.length < 1) {
message.error('发送失败,原因:内容为空!')
return
}
if (activeConversationId.value == null) {
message.error('还没创建对话,不能发送!')
return
}
// 清空输入框
prompt.value = ''
// 执行发送
await doSendMessageStream({
conversationId: activeConversationId.value,
content: content
} as ChatMessageVO)
}
/** 真正执行【发送】消息操作 */
const doSendMessageStream = async (userMessage: ChatMessageVO) => {
// 创建 AbortController 实例,以便中止请求
conversationInAbortController.value = new AbortController()
// 标记对话进行中
conversationInProgress.value = true
// 设置为空
receiveMessageFullText.value = ''
try {
// 1.1 先添加两个假数据,等 stream 返回再替换
activeMessageList.value.push({
id: -1,
conversationId: activeConversationId.value,
type: 'user',
content: userMessage.content,
createTime: new Date()
} as ChatMessageVO)
activeMessageList.value.push({
id: -2,
conversationId: activeConversationId.value,
type: 'assistant',
content: '思考中...',
createTime: new Date()
} as ChatMessageVO)
// 1.2 滚动到最下面
await nextTick()
await scrollToBottom() // 底部
// 1.3 开始滚动
textRoll()
// 2. 发送 event stream
let isFirstChunk = true // 是否是第一个 chunk 消息段
await ChatMessageApi.sendChatMessageStream(
userMessage.conversationId,
userMessage.content,
conversationInAbortController.value,
enableContext.value,
async (res) => {
const { code, data, msg } = JSON.parse(res.data)
if (code !== 0) {
message.alert(`对话异常! ${msg}`)
return
}
// 如果内容为空,就不处理。
if (data.receive.content === '') {
return
}
// 首次返回需要添加一个 message 到页面,后面的都是更新
if (isFirstChunk) {
isFirstChunk = false
// 弹出两个假数据
activeMessageList.value.pop()
activeMessageList.value.pop()
// 更新返回的数据
activeMessageList.value.push(data.send)
activeMessageList.value.push(data.receive)
}
// debugger
receiveMessageFullText.value = receiveMessageFullText.value + data.receive.content
// 滚动到最下面
await scrollToBottom()
},
(error) => {
message.alert(`对话异常! ${error}`)
stopStream()
},
() => {
stopStream()
}
)
} catch {}
}
/** 停止 stream 流式调用 */
const stopStream = async () => {
// tip:如果 stream 进行中的 message,就需要调用 controller 结束
if (conversationInAbortController.value) {
conversationInAbortController.value.abort()
}
// 设置为 false
conversationInProgress.value = false
}
/** 编辑 message:设置为 prompt,可以再次编辑 */
const handleMessageEdit = (message: ChatMessageVO) => {
prompt.value = message.content
}
/** 刷新 message:基于指定消息,再次发起对话 */
const handleMessageRefresh = (message: ChatMessageVO) => {
doSendMessage(message.content)
}
// ============== 【消息滚动】相关 =============
/** 滚动到 message 底部 */
const scrollToBottom = async (isIgnore?: boolean) => {
await nextTick()
if (messageRef.value) {
messageRef.value.scrollToBottom(isIgnore)
}
}
const scrollToTop = async (isIgnore?: boolean) => {
await nextTick()
if (messageRef.value) {
messageRef.value.handlerGoTop()
}
}
/** 自提滚动效果 */
const textRoll = async () => {
let index = 0
try {
// 只能执行一次
if (textRoleRunning.value) {
return
}
// 设置状态
textRoleRunning.value = true
receiveMessageDisplayedText.value = ''
const task = async () => {
// 调整速度
const diff =
(receiveMessageFullText.value.length - receiveMessageDisplayedText.value.length) / 10
if (diff > 5) {
textSpeed.value = 10
} else if (diff > 2) {
textSpeed.value = 30
} else if (diff > 1.5) {
textSpeed.value = 50
} else {
textSpeed.value = 100
}
// 对话结束,就按 30 的速度
if (!conversationInProgress.value) {
textSpeed.value = 10
}
if (index < receiveMessageFullText.value.length) {
receiveMessageDisplayedText.value += receiveMessageFullText.value[index]
index++
// 更新 message
const lastMessage = activeMessageList.value[activeMessageList.value.length - 1]
lastMessage.content = receiveMessageDisplayedText.value
// 滚动到住下面
await scrollToBottom()
// 重新设置任务
timer = setTimeout(task, textSpeed.value)
} else {
// 不是对话中可以结束
if (!conversationInProgress.value) {
textRoleRunning.value = false
clearTimeout(timer)
} else {
// 重新设置任务
timer = setTimeout(task, textSpeed.value)
}
}
}
let timer = setTimeout(task, textSpeed.value)
} catch {}
}
/** 初始化 **/
onMounted(async () => {
// 如果有 conversationId 参数,则默认选中
if (route.query.conversationId) {
const id = route.query.conversationId as unknown as number
activeConversationId.value = id
await getConversation(id)
}
// 获取列表数据
activeMessageListLoading.value = true
await getMessageList()
})
</script>
<style lang="scss" scoped>
.ai-layout {
position: absolute;
flex: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.conversation-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 10px 0;
.btn-new-conversation {
padding: 18px 0;
}
.search-input {
margin-top: 20px;
}
.conversation-list {
margin-top: 20px;
.conversation {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
padding: 0 5px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
align-items: center;
line-height: 30px;
&.active {
background-color: #e6e6e6;
.button {
display: inline-block;
}
}
.title-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
padding: 5px 10px;
max-width: 220px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
width: 28px;
height: 28px;
display: flex;
flex-direction: row;
justify-items: center;
}
// 对话编辑、删除
.button-wrapper {
right: 2px;
display: flex;
flex-direction: row;
justify-items: center;
color: #606266;
.el-icon {
margin-right: 5px;
}
}
}
}
// 角色仓库、清空未设置对话
.tool-box {
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--el-text-color);
> div {
display: flex;
align-items: center;
color: #606266;
padding: 0;
margin: 0;
cursor: pointer;
> span {
margin-left: 5px;
}
}
}
}
// 头部
.detail-container {
background: #ffffff;
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fbfbfb;
box-shadow: 0 0 0 0 #dcdfe6;
.title {
font-size: 18px;
font-weight: bold;
}
.btns {
display: flex;
width: 300px;
flex-direction: row;
justify-content: flex-end;
//justify-content: space-between;
.btn {
padding: 10px;
}
}
}
}
// main 容器
.main-container {
margin: 0;
padding: 0;
position: relative;
height: 100%;
width: 100%;
.message-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: hidden;
padding: 0;
margin: 0;
}
}
// 底部
.footer-container {
display: flex;
flex-direction: column;
height: auto;
margin: 0;
padding: 0;
.prompt-from {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #e3e3e3;
border-radius: 10px;
margin: 10px 20px 20px 20px;
padding: 9px 10px;
}
.prompt-input {
height: 80px;
//box-shadow: none;
border: none;
box-sizing: border-box;
resize: none;
padding: 0 2px;
overflow: auto;
}
.prompt-input:focus {
outline: none;
}
.prompt-btns {
display: flex;
justify-content: space-between;
padding-bottom: 0;
padding-top: 5px;
}
}
</style>
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="分类" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择分类"
clearable
class="!w-240px"
>
<el-option label="公租房" value="公租房" />
<el-option label="长租房" value="长租房" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
class="!w-240px"
>
<el-option label="未处理" :value="0" />
<el-option label="已处理" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" /> 重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
>
<el-table-column label="编号" align="center" prop="id" width="100px" />
<el-table-column label="分类" align="center" prop="type" min-width="120px" />
<el-table-column label="建议内容" align="left" prop="summary" min-width="300px">
<template #default="scope">
<div class="summary-content">{{ scope.row.summary || '-' }}</div>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="100px">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
@change="handleStatusChange(scope.row, $event)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatAnalysisApi, ChatAnalysisVO } from '@/api/ai/chat/analysis'
/** AI 对话总结列表 */
defineOptions({ name: 'AiChatSummary' })
const message = ElMessage
const loading = ref(true)
const list = ref<ChatAnalysisVO[]>([])
const total = ref(0)
const queryFormRef = ref()
// 查询参数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
type: undefined as string | undefined,
status: undefined as number | undefined
})
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ChatAnalysisApi.getChatSummaryPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
/** 修改状态操作(使用 switch 切换时触发) */
const handleStatusChange = async (row: ChatAnalysisVO, newStatus: number) => {
const oldStatus = row.status
try {
// 二次确认
// await ElMessageBox.confirm(
// `确认要将该记录状态改为 ${newStatus === 1 ? '已处理' : '未处理'} 吗?`,
// '提示',
// {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }
//)
// 调用更新接口
await ChatAnalysisApi.updateSummaryStatus({
id: row.id,
status: newStatus
})
message.success('状态更新成功')
// 刷新列表(保持当前页码)
await getList()
} catch (error) {
// 用户取消或接口失败时,恢复原来的状态
row.status = oldStatus
if (error !== 'cancel') {
message.error('状态更新失败,请稍后重试')
}
}
}
/** 初始化加载数据 */
onMounted(() => {
getList()
})
</script>
<style scoped lang="scss">
.summary-content {
white-space: pre-wrap;
word-break: break-all;
line-height: 1.5;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment