mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-15 14:36:47 +00:00
Integrate Chat and Copilot into chat-sdk, and add SQL parse display (#166)
This commit is contained in:
williamhliu
150
webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
Normal file
150
webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import Text from '../components/Text';
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { isEqual } from 'lodash';
|
||||
import { AgentType, MessageItem, MessageTypeEnum } from '../type';
|
||||
import { isMobile, updateMessageContainerScroll } from '../../utils/utils';
|
||||
import styles from './style.module.less';
|
||||
import AgentTip from '../components/AgentTip';
|
||||
import classNames from 'classnames';
|
||||
import { MsgDataType } from '../../common/type';
|
||||
import ChatItem from '../../components/ChatItem';
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
chatId: number;
|
||||
messageList: MessageItem[];
|
||||
historyVisible: boolean;
|
||||
currentAgent?: AgentType;
|
||||
chatVisible?: boolean;
|
||||
isDeveloper?: boolean;
|
||||
integrateSystem?: string;
|
||||
onMsgDataLoaded: (
|
||||
data: MsgDataType,
|
||||
questionId: string | number,
|
||||
question: string,
|
||||
valid: boolean
|
||||
) => void;
|
||||
onSendMsg: (value: string) => void;
|
||||
};
|
||||
|
||||
const MessageContainer: React.FC<Props> = ({
|
||||
id,
|
||||
chatId,
|
||||
messageList,
|
||||
historyVisible,
|
||||
currentAgent,
|
||||
chatVisible,
|
||||
isDeveloper,
|
||||
integrateSystem,
|
||||
onMsgDataLoaded,
|
||||
onSendMsg,
|
||||
}) => {
|
||||
const [triggerResize, setTriggerResize] = useState(false);
|
||||
|
||||
const onResize = useCallback(() => {
|
||||
setTriggerResize(true);
|
||||
setTimeout(() => {
|
||||
setTriggerResize(false);
|
||||
}, 0);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('resize', onResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', onResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
onResize();
|
||||
}, [historyVisible, chatVisible]);
|
||||
|
||||
const messageContainerClass = classNames(styles.messageContainer, { [styles.mobile]: isMobile });
|
||||
|
||||
return (
|
||||
<div id={id} className={messageContainerClass}>
|
||||
<div className={styles.messageList}>
|
||||
{messageList.map((msgItem: MessageItem, index: number) => {
|
||||
const {
|
||||
id: msgId,
|
||||
modelId,
|
||||
agentId,
|
||||
type,
|
||||
msg,
|
||||
msgValue,
|
||||
identityMsg,
|
||||
msgData,
|
||||
score,
|
||||
parseOptions,
|
||||
filters,
|
||||
} = msgItem;
|
||||
|
||||
return (
|
||||
<div key={msgId} id={`${msgId}`} className={styles.messageItem}>
|
||||
{type === MessageTypeEnum.TEXT && <Text position="left" data={msg} />}
|
||||
{type === MessageTypeEnum.AGENT_LIST && (
|
||||
<AgentTip currentAgent={currentAgent} onSendMsg={onSendMsg} />
|
||||
)}
|
||||
{type === MessageTypeEnum.QUESTION && (
|
||||
<>
|
||||
<Text position="right" data={msg} />
|
||||
{identityMsg && <Text position="left" data={identityMsg} />}
|
||||
<ChatItem
|
||||
msg={msgValue || msg || ''}
|
||||
msgData={msgData}
|
||||
conversationId={chatId}
|
||||
modelId={modelId}
|
||||
agentId={agentId}
|
||||
filter={filters}
|
||||
isLastMessage={index === messageList.length - 1}
|
||||
triggerResize={triggerResize}
|
||||
isDeveloper={isDeveloper}
|
||||
integrateSystem={integrateSystem}
|
||||
onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
|
||||
onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
|
||||
}}
|
||||
onUpdateMessageScroll={updateMessageContainerScroll}
|
||||
onSendMsg={onSendMsg}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{type === MessageTypeEnum.PARSE_OPTIONS && (
|
||||
<ChatItem
|
||||
msg={msgValue || msg || ''}
|
||||
conversationId={chatId}
|
||||
modelId={modelId}
|
||||
agentId={agentId}
|
||||
filter={filters}
|
||||
isLastMessage={index === messageList.length - 1}
|
||||
triggerResize={triggerResize}
|
||||
parseOptions={parseOptions}
|
||||
integrateSystem={integrateSystem}
|
||||
onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
|
||||
onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
|
||||
}}
|
||||
onUpdateMessageScroll={updateMessageContainerScroll}
|
||||
onSendMsg={onSendMsg}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function areEqual(prevProps: Props, nextProps: Props) {
|
||||
if (
|
||||
prevProps.id === nextProps.id &&
|
||||
isEqual(prevProps.messageList, nextProps.messageList) &&
|
||||
prevProps.historyVisible === nextProps.historyVisible &&
|
||||
prevProps.currentAgent === nextProps.currentAgent &&
|
||||
prevProps.chatVisible === nextProps.chatVisible
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export default memo(MessageContainer, areEqual);
|
||||
@@ -0,0 +1,148 @@
|
||||
.messageContainer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
.messageList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 70px 20px 60px 14px;
|
||||
row-gap: 16px;
|
||||
|
||||
.messageItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
|
||||
:global {
|
||||
.ant-table-small {
|
||||
.ant-table-tbody {
|
||||
.ant-table-cell {
|
||||
padding: 6px 0 !important;
|
||||
}
|
||||
}
|
||||
.ss-chat-table-formatted-value {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
.ant-table-row {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.ss-chat-table-even-row {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 16px 0 1px;
|
||||
row-gap: 8px;
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-prev,
|
||||
.ant-pagination .ant-pagination-next {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
.ant-pagination-item-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-jump-prev,
|
||||
.ant-pagination-jump-next {
|
||||
.ant-pagination-item-link {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-options {
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-item {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-item-active {
|
||||
font-weight: 600;
|
||||
background-color: #ffffff;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5715;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum', 'tnum';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
.messageList {
|
||||
padding: 20px 10px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user