From dd6547de065d370592ec07aff31ffdde7395ae96 Mon Sep 17 00:00:00 2001
From: znn <jubinkumarsoni@gmail.com>
Date: Tue, 2 Sep 2025 07:27:04 +0530
Subject: [PATCH] downvote with reason (#24922)

---
 .../base/chat/chat-with-history/hooks.tsx     |  2 +-
 .../base/chat/chat/answer/operation.tsx       | 52 +++++++++++++++++--
 .../base/chat/embedded-chatbot/hooks.tsx      |  2 +-
 web/app/components/base/chat/types.ts         |  1 +
 .../share/text-generation/result/index.tsx    |  2 +-
 web/i18n/en-US/common.ts                      |  6 +++
 6 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index e87c8ddcd..13594a84e 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -508,7 +508,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   }, [mutateAppConversationData, handleConversationIdInfoChange])
 
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
-    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, appId)
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, appId)
     notify({ type: 'success', message: t('common.api.success') })
   }, [isInstalledApp, appId, t, notify])
 
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 0fbb7ceef..7ffb21c6d 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -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>
+      )}
     </>
   )
 }
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index f0e63abc7..01fb83f23 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -390,7 +390,7 @@ export const useEmbeddedChatbot = () => {
   }, [mutateAppConversationData, handleConversationIdInfoChange])
 
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
-    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, appId)
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, appId)
     notify({ type: 'success', message: t('common.api.success') })
   }, [isInstalledApp, appId, t, notify])
 
diff --git a/web/app/components/base/chat/types.ts b/web/app/components/base/chat/types.ts
index c463879a5..f7f7aa4dc 100644
--- a/web/app/components/base/chat/types.ts
+++ b/web/app/components/base/chat/types.ts
@@ -93,4 +93,5 @@ export type Callback = {
 
 export type Feedback = {
   rating: 'like' | 'dislike' | null
+  content?: string | null
 }
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index fc5422589..a7eb7f759 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -102,7 +102,7 @@ const Result: FC<IResultProps> = ({
   })
 
   const handleFeedback = async (feedback: FeedbackType) => {
-    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, installedAppInfo?.id)
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, installedAppInfo?.id)
     setFeedback(feedback)
   }
 
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 8cbc05d1f..2f0082edd 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -319,6 +319,12 @@ const translation = {
       transfer: 'Transfer workspace ownership',
     },
   },
+  feedback: {
+    title: 'Provide Feedback',
+    subtitle: 'Please tell us what went wrong with this response',
+    content: 'Feedback Content',
+    placeholder: 'Please describe what went wrong or how we can improve...',
+  },
   integrations: {
     connected: 'Connected',
     google: 'Google',