Skip to content

Commit 4dbfe20

Browse files
xqvvuxqvvu
authored
feat(chat): improve chat feedback interactions (#7160)
* feat(chat): improve like feedback animation * feat(chat): refine agent plan choice selection * fix(chat): correct like feedback click typing * fix(chat): narrow like feedback icon props * fix(chat): keep choice toggle below options * fix(chat): tighten choice toggle height * fix(chat): render choice toggle as compact text button * fix(chat): remove choice toggle wrapper spacing * fix(chat): prevent choice highlight clipping * fix(chat): add choice toggle hover background * fix(chat): smooth choice collapse layout * fix(chat): restore choice highlight shadow * fix(chat): adjust choice width and toggle spacing * fix(chat): avoid duplicate choice toggle spacing * fix(chat): apply action hover lift consistently
1 parent a4c5216 commit 4dbfe20

11 files changed

Lines changed: 588 additions & 71 deletions

File tree

‎packages/web/i18n/en/chat.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,9 @@
273273
"tool_response_compress": "Tool response compression",
274274
"unsupported_file_type": "Unsupported file types",
275275
"variable_invisable_in_share": "External variables are not visible in login-free links",
276+
"interactive.user_select.collapse_options": "Collapse options",
277+
"interactive.user_select.expand_options": "Expand options",
278+
"interactive.user_select.selected": "Selected: {{answer}}",
276279
"view_all_citations": "View all",
277280
"view_citations": "View References"
278281
}

‎packages/web/i18n/zh-CN/chat.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,9 @@
273273
"tool_response_compress": "工具响应压缩",
274274
"unsupported_file_type": "不支持的文件类型",
275275
"variable_invisable_in_share": "外部变量在免登录链接中不可见",
276+
"interactive.user_select.collapse_options": "收起选项",
277+
"interactive.user_select.expand_options": "展开选项",
278+
"interactive.user_select.selected": "已选择：{{answer}}",
276279
"view_all_citations": "查看全部",
277280
"view_citations": "查看引用"
278281
}

‎packages/web/i18n/zh-Hant/chat.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,9 @@
269269
"tool_response_compress": "工具回應壓縮",
270270
"unsupported_file_type": "不支援的檔案類型",
271271
"variable_invisable_in_share": "外部變量在免登錄鏈接中不可見",
272+
"interactive.user_select.collapse_options": "收起選項",
273+
"interactive.user_select.expand_options": "展開選項",
274+
"interactive.user_select.selected": "已選擇：{{answer}}",
272275
"view_all_citations": "查看全部",
273276
"view_citations": "檢視引用"
274277
}

‎projects/app/src/components/core/chat/ChatContainer/ChatBox/components/ChatController.tsx‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import MyImage from '@fastgpt/web/components/common/Image/MyImage';
1313
import { ChatRecordContext } from '@/web/core/chat/context/chatRecordContext';
1414
import { useRequest } from '@fastgpt/web/hooks/useRequest';
1515
import { eventBus, EventNameEnum } from '@/web/common/utils/eventbus';
16+
import LikeFeedbackButton from './LikeFeedbackButton';
1617

1718
export type ChatControllerProps = {
1819
isLastChild: boolean;
@@ -23,6 +24,7 @@ export type ChatControllerProps = {
2324
onMark?: () => void;
2425
onAddUserLike?: () => void;
2526
onAddUserDislike?: () => void;
27+
likeFeedbackEffectTrigger?: number;
2628
onToggleFeedbackReadStatus?: () => void;
2729
showFeedbackContent?: boolean;
2830
onToggleFeedbackContent?: () => void;
@@ -47,7 +49,8 @@ const footerIconStyle = {
4749
cursor: 'pointer',
4850
p: '4px',
4951
color: 'myGray.400',
50-
_hover: { color: 'primary.600' }
52+
transition: 'color 180ms ease, transform 180ms ease, filter 180ms ease',
53+
_hover: { color: 'primary.600', transform: 'translateY(-1px)' }
5154
};
5255

5356
const ChatController = ({
@@ -58,6 +61,7 @@ const ChatController = ({
5861
onDelete,
5962
onAddUserDislike,
6063
onAddUserLike,
64+
likeFeedbackEffectTrigger,
6165
onToggleFeedbackReadStatus,
6266
showFeedbackContent,
6367
onToggleFeedbackContent,
@@ -86,6 +90,10 @@ const ChatController = ({
8690
<MyTooltip label={label}>{children}</MyTooltip>
8791
);
8892
const iconStyle = isFooter ? footerIconStyle : controlIconStyle;
93+
const getIconHoverStyle = (color: string) => ({
94+
color,
95+
...(isFooter ? { transform: 'translateY(-1px)' } : {})
96+
});
8997
const activeFeedbackStyle = isFooter
9098
? {
9199
color: 'primary.600'
@@ -138,7 +146,7 @@ const ChatController = ({
138146
{...iconStyle}
139147
name={'copy'}
140148
borderLeftRadius={isFooter ? undefined : 'sm'}
141-
_hover={{ color: 'primary.600' }}
149+
_hover={getIconHoverStyle('primary.600')}
142150
onClick={() => copyData(chatText)}
143151
/>
144152
)}
@@ -150,7 +158,7 @@ const ChatController = ({
150158
<MyIcon
151159
{...iconStyle}
152160
name={'common/retryLight'}
153-
_hover={{ color: isFooter ? 'primary.600' : 'green.500' }}
161+
_hover={getIconHoverStyle(isFooter ? 'primary.600' : 'green.500')}
154162
onClick={onRetry}
155163
/>
156164
)}
@@ -159,7 +167,7 @@ const ChatController = ({
159167
<MyIcon
160168
{...iconStyle}
161169
name={'delete'}
162-
_hover={{ color: isFooter ? 'primary.600' : 'red.600' }}
170+
_hover={getIconHoverStyle(isFooter ? 'primary.600' : 'red.600')}
163171
onClick={onDelete}
164172
/>
165173
)}
@@ -205,7 +213,7 @@ const ChatController = ({
205213
fill: 'currentColor'
206214
}
207215
}}
208-
_hover={{ color: isFooter ? 'primary.600' : '#E74694' }}
216+
_hover={getIconHoverStyle(isFooter ? 'primary.600' : '#E74694')}
209217
onClick={async () => {
210218
setAudioPlayingChatId(chat.dataId);
211219
const response = await playAudioByText({
@@ -234,7 +242,7 @@ const ChatController = ({
234242
<MyIcon
235243
{...iconStyle}
236244
name={'core/app/markLight'}
237-
_hover={{ color: isFooter ? 'primary.600' : '#67c13b' }}
245+
_hover={getIconHoverStyle(isFooter ? 'primary.600' : '#67c13b')}
238246
onClick={onMark}
239247
/>
240248
)}
@@ -297,20 +305,27 @@ const ChatController = ({
297305
<>
298306
{!!onAddUserLike && (
299307
<MyTooltip label={t('chat:feedback_helpful')}>
300-
<MyIcon
301-
{...iconStyle}
302-
{...(!!chat.userGoodFeedback
303-
? activeFeedbackStyle
304-
: {
305-
_hover: { color: 'primary.600' }
306-
})}
307-
borderRight={isFooter ? undefined : !onAddUserDislike ? 'none' : 'base'}
308-
borderRightRadius={
309-
isFooter ? undefined : !onAddUserDislike ? 'sm' : 'none'
310-
}
311-
name={'core/chat/feedback/goodLight'}
312-
onClick={onAddUserLike}
313-
/>
308+
{isFooter ? (
309+
<LikeFeedbackButton
310+
{...iconStyle}
311+
isActive={!!chat.userGoodFeedback}
312+
effectTrigger={likeFeedbackEffectTrigger}
313+
onClick={onAddUserLike}
314+
/>
315+
) : (
316+
<MyIcon
317+
{...iconStyle}
318+
{...(!!chat.userGoodFeedback
319+
? activeFeedbackStyle
320+
: {
321+
_hover: getIconHoverStyle('primary.600')
322+
})}
323+
borderRight={!onAddUserDislike ? 'none' : 'base'}
324+
borderRightRadius={!onAddUserDislike ? 'sm' : 'none'}
325+
name={'core/chat/feedback/goodLight'}
326+
onClick={onAddUserLike}
327+
/>
328+
)}
314329
</MyTooltip>
315330
)}
316331
{!!onAddUserDislike && (
@@ -320,7 +335,7 @@ const ChatController = ({
320335
{...(!!chat.userBadFeedback
321336
? activeBadFeedbackStyle
322337
: {
323-
_hover: { color: 'primary.600' }
338+
_hover: getIconHoverStyle('primary.600')
324339
})}
325340
borderRight={isFooter ? undefined : 'none'}
326341
borderRightRadius={isFooter ? undefined : 'sm'}

‎projects/app/src/components/core/chat/ChatContainer/ChatBox/components/ChatRecordsList.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export type ChatRecordsListProps = {
3838
onMark: (chat: ChatSiteItemType, q?: string) => (() => void) | undefined;
3939
onAddUserLike: (chat: ChatSiteItemType) => (() => void) | undefined;
4040
onAddUserDislike: (chat: ChatSiteItemType) => (() => void) | undefined;
41+
likeFeedbackEffect?: {
42+
dataId: string;
43+
trigger: number;
44+
};
4145
onCloseCustomFeedback: (
4246
chat: ChatSiteItemType,
4347
index: number
@@ -71,6 +75,7 @@ const ChatRecordsList = ({
7175
onMark,
7276
onAddUserLike,
7377
onAddUserDislike,
78+
likeFeedbackEffect,
7479
onCloseCustomFeedback,
7580
onToggleFeedbackReadStatus
7681
}: ChatRecordsListProps) => {
@@ -213,6 +218,10 @@ const ChatRecordsList = ({
213218
),
214219
onAddUserLike: onAddUserLike(item),
215220
onAddUserDislike: onAddUserDislike(item),
221+
likeFeedbackEffectTrigger:
222+
likeFeedbackEffect?.dataId === item.dataId
223+
? likeFeedbackEffect.trigger
224+
: undefined,
216225
onToggleFeedbackReadStatus: onToggleFeedbackReadStatus(item)
217226
}}
218227
>

0 commit comments

Comments
 (0)