新增AI对话加载状态管理,优化消息输入组件以支持加载指示,提升用户体验。

This commit is contained in:
超级老白兔
2025-10-22 17:05:35 +08:00
parent 35b38e8542
commit ef45bedf83
3 changed files with 102 additions and 68 deletions

View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Layout, Input, Button, Modal } from "antd";
import { Layout, Input, Button, Modal, Spin } from "antd";
import {
SendOutlined,
FolderOutlined,
@@ -7,6 +7,7 @@ import {
ExportOutlined,
CloseOutlined,
MessageOutlined,
LoadingOutlined,
} from "@ant-design/icons";
import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
import { useWebSocketStore } from "@/store/module/websocket/websocket";
@@ -45,7 +46,7 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
const quoteMessageContent = useWeChatStore(
state => state.quoteMessageContent,
);
const isLoadingAiChat = useWeChatStore(state => state.isLoadingAiChat);
useEffect(() => {
if (quoteMessageContent) {
setInputValue(quoteMessageContent);
@@ -224,29 +225,42 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
</div>
</div>
</div>
<div className={styles.inputArea}>
<div className={styles.inputWrapper}>
<TextArea
value={inputValue}
onChange={e => setInputValue(e.target.value)}
onKeyDown={handleKeyPress}
placeholder="输入消息..."
className={styles.messageInput}
autoSize={{ minRows: 2, maxRows: 6 }}
/>
<div className={styles.sendButtonArea}>
<Button
type="primary"
icon={<SendOutlined />}
onClick={handleSend}
disabled={!inputValue.trim()}
className={styles.sendButton}
>
</Button>
{isLoadingAiChat ? (
<Spin
indicator={<LoadingOutlined spin />}
spinning={isLoadingAiChat}
>
<div style={{ height: "100px" }}>
<div>Ai思考中...</div>
</div>
</Spin>
) : (
<div className={styles.inputArea}>
<div className={styles.inputWrapper}>
<TextArea
value={inputValue}
onChange={e => setInputValue(e.target.value)}
onKeyDown={handleKeyPress}
placeholder="输入消息..."
className={styles.messageInput}
autoSize={{ minRows: 2, maxRows: 6 }}
/>
<div className={styles.sendButtonArea}>
<Button
type="primary"
icon={<SendOutlined />}
onClick={handleSend}
disabled={!inputValue.trim()}
className={styles.sendButton}
>
</Button>
</div>
</div>
</div>
</div>
)}
<div className={styles.inputHint}>
Ctrl+Enter换行Enter发送
</div>

View File

@@ -14,6 +14,8 @@ export interface WeChatState {
updateShowChatRecordModel: (show: boolean) => void;
aiQuoteMessageContent: number;
updateAiQuoteMessageContent: (message: number) => void;
isLoadingAiChat: boolean;
updateIsLoadingAiChat: (loading: boolean) => void;
quoteMessageContent: string;
updateQuoteMessageContent: (value: string) => void;
// ==================== Transmit Module =========Start===========

View File

@@ -46,6 +46,11 @@ export const useWeChatStore = create<WeChatState>()(
updateQuoteMessageContent: (message: string) => {
set({ quoteMessageContent: message });
},
//正在加载ai对话
isLoadingAiChat: false,
updateIsLoadingAiChat: (loading: boolean) => {
set({ isLoadingAiChat: loading });
},
// ==================== Transmit Module =========Start===========
/** 选中的聊天记录列表 */
selectedChatRecords: [],
@@ -307,60 +312,73 @@ export const useWeChatStore = create<WeChatState>()(
message?.wechatChatroomId || message.wechatFriendId;
const isWechatGroup = message?.wechatChatroomId;
// 如果是当前选中的聊天,直接添加到消息列表
if (currentContract && currentContract.id == getMessageId) {
set(state => ({
currentMessages: [...state.currentMessages, message],
}));
//把数据传到存客宝
const params: any = {
type: "CmdNewMessage",
wechatAccountId: currentContract.wechatAccountId,
};
if (isWechatGroup) {
params.chatroomMessage = [message];
} else {
params.friendMessage = [message];
}
const dataProcessingResult = await dataProcessing(params);
//如果成功就请求ai对话接口
if (dataProcessingResult) {
const messageContent = await aiChat({
friendId: getMessageId,
try {
// 如果是当前选中的聊天,直接添加到消息列表
if (currentContract && currentContract.id == getMessageId) {
set(state => ({
currentMessages: [...state.currentMessages, message],
}));
//把数据传到存客宝
const params: any = {
type: "CmdNewMessage",
wechatAccountId: currentContract.wechatAccountId,
message: message,
});
console.log("ai对话接口返回", messageContent);
}
} else {
// 更新其他聊天的未读消息数
const chatSessions = useCkChatStore.getState().chatSessions;
const session = chatSessions.find(item => item.id == getMessageId);
if (session) {
session.config.unreadCount = Number(session.config.unreadCount) + 1;
updateChatSession(session);
// 将接收到新消息的会话置顶到列表顶部
pinChatSessionToTop(getMessageId);
} else {
// 如果会话不存在,创建新会话
};
if (isWechatGroup) {
const [group] = await weChatGroupService.findByIds(getMessageId);
if (group) {
params.chatroomMessage = [message];
} else {
params.friendMessage = [message];
}
const dataProcessingResult = await dataProcessing(params);
//如果成功就请求ai对话接口
set(() => ({
isLoadingAiChat: true,
}));
if (!dataProcessingResult) {
const messageContent = await aiChat({
friendId: getMessageId,
wechatAccountId: currentContract.wechatAccountId,
message: message,
});
set(() => ({
quoteMessageContent: messageContent,
isLoadingAiChat: false,
}));
}
} else {
// 更新其他聊天的未读消息数
const chatSessions = useCkChatStore.getState().chatSessions;
const session = chatSessions.find(item => item.id == getMessageId);
if (session) {
session.config.unreadCount =
Number(session.config.unreadCount) + 1;
updateChatSession(session);
// 将接收到新消息的会话置顶到列表顶部
pinChatSessionToTop(getMessageId);
} else {
// 如果会话不存在,创建新会话
if (isWechatGroup) {
const [group] =
await weChatGroupService.findByIds(getMessageId);
if (group) {
addChatSession({
...group,
config: { unreadCount: 1 },
});
// 新创建的会话会自动添加到列表顶部,无需额外置顶
}
} else {
const [user] = await contractService.findByIds(getMessageId);
addChatSession({
...group,
...user,
config: { unreadCount: 1 },
});
// 新创建的会话会自动添加到列表顶部,无需额外置顶
}
} else {
const [user] = await contractService.findByIds(getMessageId);
addChatSession({
...user,
config: { unreadCount: 1 },
});
// 新创建的会话会自动添加到列表顶部,无需额外置顶
}
}
} catch (error) {
console.error("接收新消息失败:", error);
}
},