mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-15 22:46:49 +00:00
[feature](webapp) upgrade chat version
This commit is contained in:
williamhliu
@@ -1,27 +1,28 @@
|
||||
import { updateMessageContainerScroll, isMobile, uuid } from '@/utils/utils';
|
||||
import { updateMessageContainerScroll, isMobile, uuid, getLeafList } from '@/utils/utils';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Helmet } from 'umi';
|
||||
import MessageContainer from './MessageContainer';
|
||||
import styles from './style.less';
|
||||
import { ConversationDetailType, MessageItem, MessageTypeEnum } from './type';
|
||||
import { updateConversationName } from './service';
|
||||
import { ConversationDetailType, DomainType, MessageItem, MessageTypeEnum } from './type';
|
||||
import { getDomainList, updateConversationName } from './service';
|
||||
import { useThrottleFn } from 'ahooks';
|
||||
import Conversation from './Conversation';
|
||||
import RightSection from './RightSection';
|
||||
import ChatFooter from './ChatFooter';
|
||||
import classNames from 'classnames';
|
||||
import { AUTH_TOKEN_KEY, DEFAULT_CONVERSATION_NAME, WEB_TITLE } from '@/common/constants';
|
||||
import {
|
||||
HistoryMsgItemType,
|
||||
MsgDataType,
|
||||
getHistoryMsg,
|
||||
queryContext,
|
||||
setToken as setChatSdkToken,
|
||||
} from 'supersonic-chat-sdk';
|
||||
import { getConversationContext } from './utils';
|
||||
import { CHAT_TITLE, DEFAULT_CONVERSATION_NAME, WEB_TITLE } from './constants';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { HistoryMsgItemType, MsgDataType, getHistoryMsg } from 'supersonic-chat-sdk';
|
||||
import 'supersonic-chat-sdk/dist/index.css';
|
||||
import { setToken as setChatSdkToken } from 'supersonic-chat-sdk';
|
||||
import { TOKEN_KEY } from '@/services/request';
|
||||
|
||||
type Props = {
|
||||
isCopilotMode?: boolean;
|
||||
};
|
||||
|
||||
const Chat: React.FC<Props> = ({ isCopilotMode }) => {
|
||||
const isMobileMode = (isMobile || isCopilotMode) as boolean;
|
||||
|
||||
const Chat = () => {
|
||||
const [messageList, setMessageList] = useState<MessageItem[]>([]);
|
||||
const [inputMsg, setInputMsg] = useState('');
|
||||
const [pageNo, setPageNo] = useState(1);
|
||||
@@ -29,15 +30,14 @@ const Chat = () => {
|
||||
const [historyInited, setHistoryInited] = useState(false);
|
||||
const [currentConversation, setCurrentConversation] = useState<
|
||||
ConversationDetailType | undefined
|
||||
>(isMobile ? { chatId: 0, chatName: '问答对话' } : undefined);
|
||||
>(isMobile ? { chatId: 0, chatName: `${CHAT_TITLE}问答` } : undefined);
|
||||
const [currentEntity, setCurrentEntity] = useState<MsgDataType>();
|
||||
const [miniProgramLoading, setMiniProgramLoading] = useState(false);
|
||||
const [domains, setDomains] = useState<DomainType[]>([]);
|
||||
const [currentDomain, setCurrentDomain] = useState<DomainType>();
|
||||
const conversationRef = useRef<any>();
|
||||
const chatFooterRef = useRef<any>();
|
||||
|
||||
useEffect(() => {
|
||||
setChatSdkToken(localStorage.getItem(AUTH_TOKEN_KEY) || '');
|
||||
}, []);
|
||||
|
||||
const sendHelloRsp = () => {
|
||||
setMessageList([
|
||||
{
|
||||
@@ -48,15 +48,35 @@ const Chat = () => {
|
||||
]);
|
||||
};
|
||||
|
||||
const existInstuctionMsg = (list: HistoryMsgItemType[]) => {
|
||||
return list.some((msg) => msg.queryResponse.queryMode === MessageTypeEnum.INSTRUCTION);
|
||||
};
|
||||
|
||||
const updateScroll = (list: HistoryMsgItemType[]) => {
|
||||
if (existInstuctionMsg(list)) {
|
||||
setMiniProgramLoading(true);
|
||||
setTimeout(() => {
|
||||
setMiniProgramLoading(false);
|
||||
updateMessageContainerScroll();
|
||||
}, 3000);
|
||||
} else {
|
||||
updateMessageContainerScroll();
|
||||
}
|
||||
};
|
||||
|
||||
const updateHistoryMsg = async (page: number) => {
|
||||
const res = await getHistoryMsg(page, currentConversation!.chatId);
|
||||
const { hasNextPage, list } = res.data.data;
|
||||
const res = await getHistoryMsg(page, currentConversation!.chatId, 3);
|
||||
const { hasNextPage, list } = res.data?.data || { hasNextPage: false, list: [] };
|
||||
setMessageList([
|
||||
...list.map((item: HistoryMsgItemType) => ({
|
||||
id: item.questionId,
|
||||
type: MessageTypeEnum.QUESTION,
|
||||
type:
|
||||
item.queryResponse?.queryMode === MessageTypeEnum.INSTRUCTION
|
||||
? MessageTypeEnum.INSTRUCTION
|
||||
: MessageTypeEnum.QUESTION,
|
||||
msg: item.queryText,
|
||||
msgData: item.queryResponse,
|
||||
isHistory: true,
|
||||
})),
|
||||
...(page === 1 ? [] : messageList),
|
||||
]);
|
||||
@@ -67,8 +87,9 @@ const Chat = () => {
|
||||
} else {
|
||||
setCurrentEntity(list[list.length - 1].queryResponse);
|
||||
}
|
||||
updateMessageContainerScroll();
|
||||
updateScroll(list);
|
||||
setHistoryInited(true);
|
||||
inputFocus();
|
||||
}
|
||||
if (page > 1) {
|
||||
const msgEle = document.getElementById(`${messageList[0]?.id}`);
|
||||
@@ -90,6 +111,21 @@ const Chat = () => {
|
||||
},
|
||||
);
|
||||
|
||||
const initDomains = async () => {
|
||||
try {
|
||||
const res = await getDomainList();
|
||||
const domainList = getLeafList(res.data);
|
||||
setDomains(
|
||||
[{ id: -1, name: '全部', bizName: 'all', parentId: 0 }, ...domainList].slice(0, 11),
|
||||
);
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setChatSdkToken(localStorage.getItem(TOKEN_KEY) || '');
|
||||
initDomains();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (historyInited) {
|
||||
const messageContainerEle = document.getElementById('messageContainer');
|
||||
@@ -123,7 +159,7 @@ const Chat = () => {
|
||||
sendHelloRsp();
|
||||
return;
|
||||
}
|
||||
onSendMsg(currentConversation.initMsg, [], domainId, true);
|
||||
onSendMsg(currentConversation.initMsg, [], domainId);
|
||||
return;
|
||||
}
|
||||
updateHistoryMsg(1);
|
||||
@@ -132,32 +168,36 @@ const Chat = () => {
|
||||
|
||||
const modifyConversationName = async (name: string) => {
|
||||
await updateConversationName(name, currentConversation!.chatId);
|
||||
conversationRef?.current?.updateData();
|
||||
window.history.replaceState('', '', `?q=${name}&cid=${currentConversation!.chatId}`);
|
||||
if (!isMobileMode) {
|
||||
conversationRef?.current?.updateData();
|
||||
window.history.replaceState('', '', `?q=${name}&cid=${currentConversation!.chatId}`);
|
||||
}
|
||||
};
|
||||
|
||||
const onSendMsg = async (
|
||||
msg?: string,
|
||||
list?: MessageItem[],
|
||||
domainId?: number,
|
||||
firstMsg?: boolean,
|
||||
) => {
|
||||
const onSendMsg = async (msg?: string, list?: MessageItem[], domainId?: number) => {
|
||||
const currentMsg = msg || inputMsg;
|
||||
if (currentMsg.trim() === '') {
|
||||
setInputMsg('');
|
||||
return;
|
||||
}
|
||||
let quote = '';
|
||||
if (currentEntity && !firstMsg) {
|
||||
const { data } = await queryContext(currentMsg, currentConversation!.chatId);
|
||||
if (data.code === 200 && data.data.domainId === currentEntity.chatContext?.domainId) {
|
||||
quote = getConversationContext(data.data);
|
||||
}
|
||||
const msgDomain = domains.find((item) => currentMsg.includes(item.name));
|
||||
const certainDomain = currentMsg[0] === '@' && msgDomain;
|
||||
if (certainDomain) {
|
||||
setCurrentDomain(msgDomain.id === -1 ? undefined : msgDomain);
|
||||
}
|
||||
setMessageList([
|
||||
const domainIdValue = domainId || msgDomain?.id || currentDomain?.id;
|
||||
const msgs = [
|
||||
...(list || messageList),
|
||||
{ id: uuid(), msg: currentMsg, domainId, type: MessageTypeEnum.QUESTION, quote },
|
||||
]);
|
||||
{
|
||||
id: uuid(),
|
||||
msg: currentMsg,
|
||||
msgValue: certainDomain ? currentMsg.replace(`@${msgDomain.name}`, '').trim() : currentMsg,
|
||||
domainId: domainIdValue === -1 ? undefined : domainIdValue,
|
||||
identityMsg: certainDomain ? getIdentityMsgText(msgDomain) : undefined,
|
||||
type: MessageTypeEnum.QUESTION,
|
||||
},
|
||||
];
|
||||
setMessageList(msgs);
|
||||
updateMessageContainerScroll();
|
||||
setInputMsg('');
|
||||
modifyConversationName(currentMsg);
|
||||
@@ -179,36 +219,89 @@ const Chat = () => {
|
||||
};
|
||||
|
||||
const onSelectConversation = (conversation: ConversationDetailType, name?: string) => {
|
||||
window.history.replaceState('', '', `?q=${conversation.chatName}&cid=${conversation.chatId}`);
|
||||
if (!isMobileMode) {
|
||||
window.history.replaceState('', '', `?q=${conversation.chatName}&cid=${conversation.chatId}`);
|
||||
}
|
||||
setCurrentConversation({
|
||||
...conversation,
|
||||
initMsg: name,
|
||||
});
|
||||
saveConversationToLocal(conversation);
|
||||
setCurrentDomain(undefined);
|
||||
};
|
||||
|
||||
const onMsgDataLoaded = (data: MsgDataType) => {
|
||||
const onMsgDataLoaded = (data: MsgDataType, questionId: string | number) => {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
if (data.queryMode === 'INSTRUCTION') {
|
||||
setMessageList([
|
||||
...messageList.slice(0, messageList.length - 1),
|
||||
{
|
||||
id: uuid(),
|
||||
msg: data.response.name || messageList[messageList.length - 1]?.msg,
|
||||
type: MessageTypeEnum.INSTRUCTION,
|
||||
msgData: data,
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
const msgs = cloneDeep(messageList);
|
||||
const msg = msgs.find((item) => item.id === questionId);
|
||||
if (msg) {
|
||||
msg.msgData = data;
|
||||
setMessageList(msgs);
|
||||
}
|
||||
updateMessageContainerScroll();
|
||||
}
|
||||
setCurrentEntity(data);
|
||||
};
|
||||
|
||||
const onCheckMore = (data: MsgDataType) => {
|
||||
setMessageList([
|
||||
...messageList,
|
||||
{
|
||||
id: uuid(),
|
||||
msg: data.response.name,
|
||||
type: MessageTypeEnum.INSTRUCTION,
|
||||
msgData: data,
|
||||
},
|
||||
]);
|
||||
updateMessageContainerScroll();
|
||||
};
|
||||
|
||||
const getIdentityMsgText = (domain?: DomainType) => {
|
||||
return domain
|
||||
? `您好，我当前身份是【${domain.name}】主题专家，我将尽力帮您解答相关问题～`
|
||||
: '您好，我将尽力帮您解答所有主题相关问题～';
|
||||
};
|
||||
|
||||
const getIdentityMsg = (domain?: DomainType) => {
|
||||
return {
|
||||
id: uuid(),
|
||||
type: MessageTypeEnum.TEXT,
|
||||
msg: getIdentityMsgText(domain),
|
||||
};
|
||||
};
|
||||
|
||||
const onSelectDomain = (domain: DomainType) => {
|
||||
const domainValue = currentDomain?.id === domain.id ? undefined : domain;
|
||||
setCurrentDomain(domainValue);
|
||||
setCurrentEntity(undefined);
|
||||
setMessageList([...messageList, getIdentityMsg(domainValue)]);
|
||||
updateMessageContainerScroll();
|
||||
inputFocus();
|
||||
};
|
||||
|
||||
const chatClass = classNames(styles.chat, {
|
||||
[styles.external]: true,
|
||||
[styles.mobile]: isMobile,
|
||||
[styles.mobile]: isMobileMode,
|
||||
[styles.copilot]: isCopilotMode,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={chatClass}>
|
||||
<Helmet title={WEB_TITLE} />
|
||||
{!isMobileMode && <Helmet title={WEB_TITLE} />}
|
||||
<div className={styles.topSection} />
|
||||
<div className={styles.chatSection}>
|
||||
{!isMobile && (
|
||||
<Conversation
|
||||
currentConversation={currentConversation}
|
||||
onSelectConversation={onSelectConversation}
|
||||
ref={conversationRef}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.chatApp}>
|
||||
{currentConversation && (
|
||||
<div className={styles.chatBody}>
|
||||
@@ -217,16 +310,22 @@ const Chat = () => {
|
||||
id="messageContainer"
|
||||
messageList={messageList}
|
||||
chatId={currentConversation?.chatId}
|
||||
miniProgramLoading={miniProgramLoading}
|
||||
isMobileMode={isMobileMode}
|
||||
onClickMessageContainer={() => {
|
||||
inputFocus();
|
||||
}}
|
||||
onMsgDataLoaded={onMsgDataLoaded}
|
||||
onSelectSuggestion={onSendMsg}
|
||||
onCheckMore={onCheckMore}
|
||||
onUpdateMessageScroll={updateMessageContainerScroll}
|
||||
/>
|
||||
<ChatFooter
|
||||
inputMsg={inputMsg}
|
||||
chatId={currentConversation?.chatId}
|
||||
domains={domains}
|
||||
currentDomain={currentDomain}
|
||||
isMobileMode={isMobileMode}
|
||||
onInputMsgChange={onInputMsgChange}
|
||||
onSendMsg={(msg: string, domainId?: number) => {
|
||||
onSendMsg(msg, messageList, domainId);
|
||||
@@ -234,13 +333,27 @@ const Chat = () => {
|
||||
inputBlur();
|
||||
}
|
||||
}}
|
||||
onAddConversation={() => {
|
||||
conversationRef.current?.onAddConversation();
|
||||
inputFocus();
|
||||
}}
|
||||
ref={chatFooterRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!isMobile && <RightSection currentEntity={currentEntity} />}
|
||||
{!isMobileMode && (
|
||||
<RightSection
|
||||
domains={domains}
|
||||
currentEntity={currentEntity}
|
||||
currentDomain={currentDomain}
|
||||
currentConversation={currentConversation}
|
||||
onSelectDomain={onSelectDomain}
|
||||
onSelectConversation={onSelectConversation}
|
||||
conversationRef={conversationRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user