Skip to content

Commit

Permalink
perf: mark icon show
Browse files Browse the repository at this point in the history
  • Loading branch information
@c121914yu
c121914yu committed Aug 30, 2023
1 parent 299409a commit 0b0570f
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 75 deletions.
135 changes: 73 additions & 62 deletions client/src/components/ChatBox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,12 @@ export type ComponentRef = {
scrollToBottom: (behavior?: 'smooth' | 'auto') => void;
};

enum FeedbackTypeEnum {
user = 'user',
admin = 'admin',
hidden = 'hidden'
}

const VariableLabel = ({
required = false,
children
Expand Down Expand Up @@ -128,7 +134,9 @@ const ChatAvatar = ({ src, type }: { src?: string; type: 'Human' | 'AI' }) => {

const ChatBox = (
{
isLogs = false,
feedbackType = FeedbackTypeEnum.hidden,
showMarkIcon = false,
showVoiceIcon = true,
showEmptyIntro = false,
chatId,
appAvatar,
Expand All @@ -139,7 +147,9 @@ const ChatBox = (
onStartChat,
onDelMessage
}: {
isLogs?: boolean;
feedbackType?: `${FeedbackTypeEnum}`;
showMarkIcon?: boolean;
showVoiceIcon?: boolean;
showEmptyIntro?: boolean;
chatId?: string;
appAvatar?: string;
Expand Down Expand Up @@ -428,7 +438,7 @@ const ChatBox = (
const controlContainerStyle = {
className: 'control',
color: 'myGray.400',
display: isLogs ? 'flex' : ['flex', 'none'],
display: feedbackType === FeedbackTypeEnum.admin ? 'flex' : ['flex', 'none'],
pl: 1,
mt: 2
};
Expand Down Expand Up @@ -544,7 +554,9 @@ const ChatBox = (
label: item.value,
value: item.value
}))}
value={getValues(item.key)}
{...register(item.key, {
required: item.required
})}
onchange={(e) => {
setValue(item.key, e);
setRefresh(!refresh);
Expand Down Expand Up @@ -664,7 +676,7 @@ const ChatBox = (
/>
</MyTooltip>
)}
{!isLogs && hasVoiceApi && (
{showVoiceIcon && hasVoiceApi && (
<MyTooltip label={'语音播报'}>
<MyIcon
{...controlIconStyle}
Expand All @@ -675,7 +687,7 @@ const ChatBox = (
</MyTooltip>
)}
{/* admin mark icon */}
{isLogs && (
{showMarkIcon && (
<MyTooltip label={t('chat.Mark')}>
<MyIcon
{...controlIconStyle}
Expand All @@ -702,63 +714,62 @@ const ChatBox = (
/>
</MyTooltip>
)}
{/* user feed back icon */}
{item.dataId &&
(isLogs ? (
<MyTooltip label={t('chat.Read User Feedback')}>
<MyIcon
display={item.userFeedback ? 'block' : 'none'}
{...controlIconStyle}
color={'white'}
bg={'#FC9663'}
fontWeight={'bold'}
name={'badLight'}
onClick={() =>
setReadFeedbackData({
chatItemId: item.dataId || '',
content: item.userFeedback || '',
isMarked: !!item.adminFeedback
})
}
/>
</MyTooltip>
) : (
<MyTooltip
label={
item.userFeedback
? `取消反馈。\n您当前反馈内容为:\n${item.userFeedback}`
: '反馈'
{feedbackType === FeedbackTypeEnum.admin && (
<MyTooltip label={t('chat.Read User Feedback')}>
<MyIcon
display={item.userFeedback ? 'block' : 'none'}
{...controlIconStyle}
color={'white'}
bg={'#FC9663'}
fontWeight={'bold'}
name={'badLight'}
onClick={() =>
setReadFeedbackData({
chatItemId: item.dataId || '',
content: item.userFeedback || '',
isMarked: !!item.adminFeedback
})
}
>
<MyIcon
{...controlIconStyle}
{...(!!item.userFeedback
? {
color: 'white',
bg: '#FC9663',
fontWeight: 'bold',
onClick: () => {
if (!item.dataId) return;
setChatHistory((state) =>
state.map((chatItem) =>
chatItem.dataId === item.dataId
? { ...chatItem, userFeedback: undefined }
: chatItem
)
);
try {
userUpdateChatFeedback({ chatItemId: item.dataId });
} catch (error) {}
}
/>
</MyTooltip>
)}
{feedbackType === FeedbackTypeEnum.user && (
<MyTooltip
label={
item.userFeedback
? `取消反馈。\n您当前反馈内容为:\n${item.userFeedback}`
: '反馈'
}
>
<MyIcon
{...controlIconStyle}
{...(!!item.userFeedback
? {
color: 'white',
bg: '#FC9663',
fontWeight: 'bold',
onClick: () => {
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)
})}
name={'badLight'}
/>
</MyTooltip>
))}
}
: {
_hover: { color: '#FB7C3C' },
onClick: () => setFeedbackId(item.dataId)
})}
name={'badLight'}
/>
</MyTooltip>
)}
</Flex>
{/* chatting status */}
{statusBoxData && index === chatHistory.length - 1 && (
Expand Down Expand Up @@ -796,7 +807,7 @@ const ChatBox = (
responseData={item.responseData}
/>
{/* admin mark content */}
{isLogs && item.adminFeedback && (
{showMarkIcon && item.adminFeedback && (
<Box>
<Flex alignItems={'center'} py={2}>
<MyIcon name={'markLight'} w={'14px'} color={'myGray.900'} />
Expand Down
1 change: 1 addition & 0 deletions client/src/pages/app/detail/components/AdEdit/components/ChatTest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ const ChatTest = (
ref={ChatBoxRef}
appAvatar={app.avatar}
userAvatar={userInfo?.avatar}
showMarkIcon
{...getSpecialModule(modules)}
onStartChat={startChat}
onDelMessage={() => {}}
Expand Down
1 change: 1 addition & 0 deletions client/src/pages/app/detail/components/BasicEdit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -639,6 +639,7 @@ const ChatTest = ({ appId }: { appId: string }) => {
ref={ChatBoxRef}
appAvatar={appDetail.avatar}
userAvatar={userInfo?.avatar}
showMarkIcon
{...getSpecialModule(modules)}
onStartChat={startChat}
onDelMessage={() => {}}
Expand Down
5 changes: 3 additions & 2 deletions client/src/pages/app/detail/components/Logs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,13 +287,14 @@ function DetailLogsModal({
<Box pt={2} flex={'1 0 0'}>
<ChatBox
ref={ChatBoxRef}
isLogs
chatId={chatId}
appAvatar={chat?.app.avatar}
userAvatar={HUMAN_ICON}
feedbackType={'admin'}
showMarkIcon
showVoiceIcon={false}
variableModules={chat?.app.variableModules}
welcomeText={chat?.app.welcomeText}
onUpdateVariable={(e) => {}}
/>
</Box>
</Flex>
Expand Down
1 change: 1 addition & 0 deletions client/src/pages/chat/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,7 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
appAvatar={chatData.app.avatar}
userAvatar={userInfo?.avatar}
variableModules={chatData.app.variableModules}
feedbackType={'user'}
welcomeText={chatData.app.welcomeText}
onUpdateVariable={(e) => {}}
onStartChat={startChat}
Expand Down
1 change: 1 addition & 0 deletions client/src/pages/chat/share.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,7 @@ const OutLink = ({ shareId, chatId }: { shareId: string; chatId: string }) => {
userAvatar={shareChatData.userAvatar}
variableModules={shareChatData.app.variableModules}
welcomeText={shareChatData.app.welcomeText}
feedbackType={'user'}
onUpdateVariable={(e) => {
setShareChatData((state) => ({
...state,
Expand Down
20 changes: 9 additions & 11 deletions client/src/service/utils/chat/saveChat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,15 @@ export async function saveChat({
]);
} else {
promise.push(
...[
Chat.create({
chatId,
userId,
appId,
variables,
title: content[0].value.slice(0, 20),
source,
shareId
})
]
Chat.create({
chatId,
userId,
appId,
variables,
title: content[0].value.slice(0, 20),
source,
shareId
})
);
}

Expand Down

0 comments on commit 0b0570f

Please sign in to comment.