|
|
|
@@ -20,6 +20,8 @@ import EditReplyModal from '@/app/components/app/annotation/edit-annotation-moda |
|
|
|
import Log from '@/app/components/base/chat/chat/log' |
|
|
|
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button' |
|
|
|
import NewAudioButton from '@/app/components/base/new-audio-button' |
|
|
|
import Modal from '@/app/components/base/modal/modal' |
|
|
|
import Textarea from '@/app/components/base/textarea' |
|
|
|
import cn from '@/utils/classnames' |
|
|
|
|
|
|
|
type OperationProps = { |
|
|
|
@@ -32,6 +34,7 @@ type OperationProps = { |
|
|
|
hasWorkflowProcess: boolean |
|
|
|
noChatInput?: boolean |
|
|
|
} |
|
|
|
|
|
|
|
const Operation: FC<OperationProps> = ({ |
|
|
|
item, |
|
|
|
question, |
|
|
|
@@ -52,6 +55,8 @@ const Operation: FC<OperationProps> = ({ |
|
|
|
onRegenerate, |
|
|
|
} = useChatContext() |
|
|
|
const [isShowReplyModal, setIsShowReplyModal] = useState(false) |
|
|
|
const [isShowFeedbackModal, setIsShowFeedbackModal] = useState(false) |
|
|
|
const [feedbackContent, setFeedbackContent] = useState('') |
|
|
|
const { |
|
|
|
id, |
|
|
|
isOpeningStatement, |
|
|
|
@@ -70,14 +75,29 @@ const Operation: FC<OperationProps> = ({ |
|
|
|
return messageContent |
|
|
|
}, [agent_thoughts, messageContent]) |
|
|
|
|
|
|
|
const handleFeedback = async (rating: 'like' | 'dislike' | null) => { |
|
|
|
const handleFeedback = async (rating: 'like' | 'dislike' | null, content?: string) => { |
|
|
|
if (!config?.supportFeedback || !onFeedback) |
|
|
|
return |
|
|
|
|
|
|
|
await onFeedback?.(id, { rating }) |
|
|
|
await onFeedback?.(id, { rating, content }) |
|
|
|
setLocalFeedback({ rating }) |
|
|
|
} |
|
|
|
|
|
|
|
const handleThumbsDown = () => { |
|
|
|
setIsShowFeedbackModal(true) |
|
|
|
} |
|
|
|
|
|
|
|
const handleFeedbackSubmit = async () => { |
|
|
|
await handleFeedback('dislike', feedbackContent) |
|
|
|
setFeedbackContent('') |
|
|
|
setIsShowFeedbackModal(false) |
|
|
|
} |
|
|
|
|
|
|
|
const handleFeedbackCancel = () => { |
|
|
|
setFeedbackContent('') |
|
|
|
setIsShowFeedbackModal(false) |
|
|
|
} |
|
|
|
|
|
|
|
const operationWidth = useMemo(() => { |
|
|
|
let width = 0 |
|
|
|
if (!isOpeningStatement) |
|
|
|
@@ -153,7 +173,7 @@ const Operation: FC<OperationProps> = ({ |
|
|
|
<ActionButton onClick={() => handleFeedback('like')}> |
|
|
|
<RiThumbUpLine className='h-4 w-4' /> |
|
|
|
</ActionButton> |
|
|
|
<ActionButton onClick={() => handleFeedback('dislike')}> |
|
|
|
<ActionButton onClick={handleThumbsDown}> |
|
|
|
<RiThumbDownLine className='h-4 w-4' /> |
|
|
|
</ActionButton> |
|
|
|
</> |
|
|
|
@@ -188,6 +208,32 @@ const Operation: FC<OperationProps> = ({ |
|
|
|
createdAt={annotation?.created_at} |
|
|
|
onRemove={() => onAnnotationRemoved?.(index)} |
|
|
|
/> |
|
|
|
{isShowFeedbackModal && ( |
|
|
|
<Modal |
|
|
|
title={t('common.feedback.title') || 'Provide Feedback'} |
|
|
|
subTitle={t('common.feedback.subtitle') || 'Please tell us what went wrong with this response'} |
|
|
|
onClose={handleFeedbackCancel} |
|
|
|
onConfirm={handleFeedbackSubmit} |
|
|
|
onCancel={handleFeedbackCancel} |
|
|
|
confirmButtonText={t('common.operation.submit') || 'Submit'} |
|
|
|
cancelButtonText={t('common.operation.cancel') || 'Cancel'} |
|
|
|
> |
|
|
|
<div className='space-y-3'> |
|
|
|
<div> |
|
|
|
<label className='system-sm-semibold mb-2 block text-text-secondary'> |
|
|
|
{t('common.feedback.content') || 'Feedback Content'} |
|
|
|
</label> |
|
|
|
<Textarea |
|
|
|
value={feedbackContent} |
|
|
|
onChange={e => setFeedbackContent(e.target.value)} |
|
|
|
placeholder={t('common.feedback.placeholder') || 'Please describe what went wrong or how we can improve...'} |
|
|
|
rows={4} |
|
|
|
className='w-full' |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
)} |
|
|
|
</> |
|
|
|
) |
|
|
|
} |