perf: mark icon show

This commit is contained in:
archer
2023-08-30 14:31:15 +08:00
parent 299409aa7b
commit 0b0570fa54
7 changed files with 89 additions and 75 deletions

View File

@@ -75,6 +75,12 @@ export type ComponentRef = {
scrollToBottom: (behavior?: 'smooth' | 'auto') => void; scrollToBottom: (behavior?: 'smooth' | 'auto') => void;
}; };
enum FeedbackTypeEnum {
user = 'user',
admin = 'admin',
hidden = 'hidden'
}
const VariableLabel = ({ const VariableLabel = ({
required = false, required = false,
children children
@@ -128,7 +134,9 @@ const ChatAvatar = ({ src, type }: { src?: string; type: 'Human' | 'AI' }) => {
const ChatBox = ( const ChatBox = (
{ {
isLogs = false, feedbackType = FeedbackTypeEnum.hidden,
showMarkIcon = false,
showVoiceIcon = true,
showEmptyIntro = false, showEmptyIntro = false,
chatId, chatId,
appAvatar, appAvatar,
@@ -139,7 +147,9 @@ const ChatBox = (
onStartChat, onStartChat,
onDelMessage onDelMessage
}: { }: {
isLogs?: boolean; feedbackType?: `${FeedbackTypeEnum}`;
showMarkIcon?: boolean;
showVoiceIcon?: boolean;
showEmptyIntro?: boolean; showEmptyIntro?: boolean;
chatId?: string; chatId?: string;
appAvatar?: string; appAvatar?: string;
@@ -428,7 +438,7 @@ const ChatBox = (
const controlContainerStyle = { const controlContainerStyle = {
className: 'control', className: 'control',
color: 'myGray.400', color: 'myGray.400',
display: isLogs ? 'flex' : ['flex', 'none'], display: feedbackType === FeedbackTypeEnum.admin ? 'flex' : ['flex', 'none'],
pl: 1, pl: 1,
mt: 2 mt: 2
}; };
@@ -544,7 +554,9 @@ const ChatBox = (
label: item.value, label: item.value,
value: item.value value: item.value
}))} }))}
value={getValues(item.key)} {...register(item.key, {
required: item.required
})}
onchange={(e) => { onchange={(e) => {
setValue(item.key, e); setValue(item.key, e);
setRefresh(!refresh); setRefresh(!refresh);
@@ -664,7 +676,7 @@ const ChatBox = (
/> />
</MyTooltip> </MyTooltip>
)} )}
{!isLogs && hasVoiceApi && ( {showVoiceIcon && hasVoiceApi && (
<MyTooltip label={'语音播报'}> <MyTooltip label={'语音播报'}>
<MyIcon <MyIcon
{...controlIconStyle} {...controlIconStyle}
@@ -675,7 +687,7 @@ const ChatBox = (
</MyTooltip> </MyTooltip>
)} )}
{/* admin mark icon */} {/* admin mark icon */}
{isLogs && ( {showMarkIcon && (
<MyTooltip label={t('chat.Mark')}> <MyTooltip label={t('chat.Mark')}>
<MyIcon <MyIcon
{...controlIconStyle} {...controlIconStyle}
@@ -702,63 +714,62 @@ const ChatBox = (
/> />
</MyTooltip> </MyTooltip>
)} )}
{/* user feed back icon */} {feedbackType === FeedbackTypeEnum.admin && (
{item.dataId && <MyTooltip label={t('chat.Read User Feedback')}>
(isLogs ? ( <MyIcon
<MyTooltip label={t('chat.Read User Feedback')}> display={item.userFeedback ? 'block' : 'none'}
<MyIcon {...controlIconStyle}
display={item.userFeedback ? 'block' : 'none'} color={'white'}
{...controlIconStyle} bg={'#FC9663'}
color={'white'} fontWeight={'bold'}
bg={'#FC9663'} name={'badLight'}
fontWeight={'bold'} onClick={() =>
name={'badLight'} setReadFeedbackData({
onClick={() => chatItemId: item.dataId || '',
setReadFeedbackData({ content: item.userFeedback || '',
chatItemId: item.dataId || '', isMarked: !!item.adminFeedback
content: item.userFeedback || '', })
isMarked: !!item.adminFeedback
})
}
/>
</MyTooltip>
) : (
<MyTooltip
label={
item.userFeedback
? `取消反馈。\n您当前反馈内容为:\n${item.userFeedback}`
: '反馈'
} }
> />
<MyIcon </MyTooltip>
{...controlIconStyle} )}
{...(!!item.userFeedback {feedbackType === FeedbackTypeEnum.user && (
? { <MyTooltip
color: 'white', label={
bg: '#FC9663', item.userFeedback
fontWeight: 'bold', ? `取消反馈。\n您当前反馈内容为:\n${item.userFeedback}`
onClick: () => { : '反馈'
if (!item.dataId) return; }
setChatHistory((state) => >
state.map((chatItem) => <MyIcon
chatItem.dataId === item.dataId {...controlIconStyle}
? { ...chatItem, userFeedback: undefined } {...(!!item.userFeedback
: chatItem ? {
) color: 'white',
); bg: '#FC9663',
try { fontWeight: 'bold',
userUpdateChatFeedback({ chatItemId: item.dataId }); onClick: () => {
} catch (error) {} if (!item.dataId) return;
} setChatHistory((state) =>
state.map((chatItem) =>
chatItem.dataId === item.dataId
? { ...chatItem, userFeedback: undefined }
: chatItem
)
);
try {
userUpdateChatFeedback({ chatItemId: item.dataId });
} catch (error) {}
} }
: { }
_hover: { color: '#FB7C3C' }, : {
onClick: () => setFeedbackId(item.dataId) _hover: { color: '#FB7C3C' },
})} onClick: () => setFeedbackId(item.dataId)
name={'badLight'} })}
/> name={'badLight'}
</MyTooltip> />
))} </MyTooltip>
)}
</Flex> </Flex>
{/* chatting status */} {/* chatting status */}
{statusBoxData && index === chatHistory.length - 1 && ( {statusBoxData && index === chatHistory.length - 1 && (
@@ -796,7 +807,7 @@ const ChatBox = (
responseData={item.responseData} responseData={item.responseData}
/> />
{/* admin mark content */} {/* admin mark content */}
{isLogs && item.adminFeedback && ( {showMarkIcon && item.adminFeedback && (
<Box> <Box>
<Flex alignItems={'center'} py={2}> <Flex alignItems={'center'} py={2}>
<MyIcon name={'markLight'} w={'14px'} color={'myGray.900'} /> <MyIcon name={'markLight'} w={'14px'} color={'myGray.900'} />

View File

@@ -113,6 +113,7 @@ const ChatTest = (
ref={ChatBoxRef} ref={ChatBoxRef}
appAvatar={app.avatar} appAvatar={app.avatar}
userAvatar={userInfo?.avatar} userAvatar={userInfo?.avatar}
showMarkIcon
{...getSpecialModule(modules)} {...getSpecialModule(modules)}
onStartChat={startChat} onStartChat={startChat}
onDelMessage={() => {}} onDelMessage={() => {}}

View File

@@ -639,6 +639,7 @@ const ChatTest = ({ appId }: { appId: string }) => {
ref={ChatBoxRef} ref={ChatBoxRef}
appAvatar={appDetail.avatar} appAvatar={appDetail.avatar}
userAvatar={userInfo?.avatar} userAvatar={userInfo?.avatar}
showMarkIcon
{...getSpecialModule(modules)} {...getSpecialModule(modules)}
onStartChat={startChat} onStartChat={startChat}
onDelMessage={() => {}} onDelMessage={() => {}}

View File

@@ -287,13 +287,14 @@ function DetailLogsModal({
<Box pt={2} flex={'1 0 0'}> <Box pt={2} flex={'1 0 0'}>
<ChatBox <ChatBox
ref={ChatBoxRef} ref={ChatBoxRef}
isLogs
chatId={chatId} chatId={chatId}
appAvatar={chat?.app.avatar} appAvatar={chat?.app.avatar}
userAvatar={HUMAN_ICON} userAvatar={HUMAN_ICON}
feedbackType={'admin'}
showMarkIcon
showVoiceIcon={false}
variableModules={chat?.app.variableModules} variableModules={chat?.app.variableModules}
welcomeText={chat?.app.welcomeText} welcomeText={chat?.app.welcomeText}
onUpdateVariable={(e) => {}}
/> />
</Box> </Box>
</Flex> </Flex>

View File

@@ -362,6 +362,7 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
appAvatar={chatData.app.avatar} appAvatar={chatData.app.avatar}
userAvatar={userInfo?.avatar} userAvatar={userInfo?.avatar}
variableModules={chatData.app.variableModules} variableModules={chatData.app.variableModules}
feedbackType={'user'}
welcomeText={chatData.app.welcomeText} welcomeText={chatData.app.welcomeText}
onUpdateVariable={(e) => {}} onUpdateVariable={(e) => {}}
onStartChat={startChat} onStartChat={startChat}

View File

@@ -226,6 +226,7 @@ const OutLink = ({ shareId, chatId }: { shareId: string; chatId: string }) => {
userAvatar={shareChatData.userAvatar} userAvatar={shareChatData.userAvatar}
variableModules={shareChatData.app.variableModules} variableModules={shareChatData.app.variableModules}
welcomeText={shareChatData.app.welcomeText} welcomeText={shareChatData.app.welcomeText}
feedbackType={'user'}
onUpdateVariable={(e) => { onUpdateVariable={(e) => {
setShareChatData((state) => ({ setShareChatData((state) => ({
...state, ...state,

View File

@@ -55,17 +55,15 @@ export async function saveChat({
]); ]);
} else { } else {
promise.push( promise.push(
...[ Chat.create({
Chat.create({ chatId,
chatId, userId,
userId, appId,
appId, variables,
variables, title: content[0].value.slice(0, 20),
title: content[0].value.slice(0, 20), source,
source, shareId
shareId })
})
]
); );
} }