新增AI对话加载状态管理,优化消息输入组件以支持加载指示,提升用户体验。
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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===========
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user