Added ability to flag responses as bad responses

frontend/src/components/Modals/ChatFeedback/index.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import ModalWrapper from "@/components/ModalWrapper";
+import { X } from "@phosphor-icons/react";
+import Workspace from "@/models/workspace";
+import { useTranslation } from "react-i18next";
+
+export default function ChatFeedbackModal({
+  isOpen,
+  hideModal,
+  chatId,
+  slug,
+  onSubmitted,
+}) {
+  const { t } = useTranslation();
+  const [comment, setComment] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!chatId || !slug) {
+      hideModal();
+      return;
+    }
+    setSubmitting(true);
+    try {
+      // Only forward the comment to parent if there's content; feedback is optional
+      if (comment && comment.trim() !== "") {
+        onSubmitted && onSubmitted(comment.trim());
+      }
+    } catch (err) {
+      // ignore errors for now
+    }
+    setSubmitting(false);
+    hideModal();
+  };
+
+  return (
+    <ModalWrapper isOpen={isOpen}>
+      <div className="w-full max-w-lg bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              {t("chat_window.provide_feedback")}
+            </h3>
+          </div>
+          <button
+            onClick={hideModal}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="py-7 px-9 space-y-2">
+            <p className="text-sm text-theme-settings-input-placeholder">
+              {t("chat_window.bad_response_optional_feedback")}
+            </p>
+            <textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              className="w-full min-h-[120px] p-3 rounded bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder outline-none"
+              placeholder={t("chat_window.bad_response_placeholder")}
+            />
+          </div>
+          <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+            <button
+              type="button"
+              onClick={hideModal}
+              className="transition-all duration-300 bg-transparent border border-theme-modal-border text-white hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+            >
+              {t("chat_window.cancel")}
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+            >
+              {submitting ? t("common.saving") : t("common.save")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </ModalWrapper>
+  );
+}

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx

@@ -1,7 +1,14 @@
 import React, { memo, useState } from "react";
 import useCopyText from "@/hooks/useCopyText";
-import { Check, ThumbsUp, ArrowsClockwise, Copy } from "@phosphor-icons/react";
+import {
+  Check,
+  ThumbsUp,
+  ThumbsDown,
+  ArrowsClockwise,
+  Copy,
+} from "@phosphor-icons/react";
 import Workspace from "@/models/workspace";
+import ChatFeedbackModal from "@/components/Modals/ChatFeedback";
 import { EditMessageAction } from "./EditMessage";
 import RenderMetrics from "./RenderMetrics";
 import ActionMenu from "./ActionMenu";
@@ -22,11 +29,19 @@ const Actions = ({
 }) => {
   const { t } = useTranslation();
   const [selectedFeedback, setSelectedFeedback] = useState(feedbackScore);
+  const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+  const [submittingComment, setSubmittingComment] = useState(false);
   const handleFeedback = async (newFeedback) => {
     const updatedFeedback =
       selectedFeedback === newFeedback ? null : newFeedback;
+    // persist feedback score first
     await Workspace.updateChatFeedback(chatId, slug, updatedFeedback);
     setSelectedFeedback(updatedFeedback);
+
+    // If user just set negative feedback (not unsetting), show optional feedback modal
+    if (updatedFeedback === false) {
+      setShowFeedbackModal(true);
+    }
   };
 
   return (
@@ -55,6 +70,15 @@ const Actions = ({
               IconComponent={ThumbsUp}
             />
           )}
+          {chatId && role !== "user" && !isEditing && (
+            <FeedbackButton
+              isSelected={selectedFeedback === false}
+              handleFeedback={() => handleFeedback(false)}
+              tooltipId="feedback-button"
+              tooltipContent={t("chat_window.bad_response")}
+              IconComponent={ThumbsDown}
+            />
+          )}
           <ActionMenu
             chatId={chatId}
             forkThread={forkThread}
@@ -64,6 +88,20 @@ const Actions = ({
         </div>
       </div>
       <RenderMetrics metrics={metrics} />
+      <ChatFeedbackModal
+        isOpen={showFeedbackModal}
+        hideModal={() => setShowFeedbackModal(false)}
+        chatId={chatId}
+        slug={slug}
+        onSubmitted={async (comment) => {
+          if (submittingComment) return;
+          setSubmittingComment(true);
+          try {
+            await Workspace.submitChatFeedbackComment(chatId, slug, comment);
+          } catch (e) {}
+          setSubmittingComment(false);
+        }}
+      />
     </div>
   );
 };

frontend/src/locales/ar/common.js

@@ -660,6 +660,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/da/common.js

@@ -698,6 +698,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/de/common.js

@@ -897,6 +897,10 @@ const TRANSLATIONS = {
     regenerate: "Neu generieren",
     regenerate_response: "Antwort neu generieren",
     good_response: "Gute Antwort",
+    bad_response: "Schlechte Antwort",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "Weitere Aktionen",
     hide_citations: "Quellenangaben ausblenden",
     show_citations: "Quellenangaben anzeigen",

frontend/src/locales/en/common.js

@@ -955,6 +955,10 @@ const TRANSLATIONS = {
     regenerate: "Regenerate",
     regenerate_response: "Regenerate response",
     good_response: "Good response",
+    bad_response: "Bad response",
+    provide_feedback: "Provide Feedback",
+    bad_response_optional_feedback: "Optional feedback (help us improve)",
+    bad_response_placeholder: "Tell us what was wrong (optional)",
     more_actions: "More actions",
     hide_citations: "Hide citations",
     show_citations: "Show citations",

frontend/src/locales/es/common.js

@@ -910,6 +910,10 @@ const TRANSLATIONS = {
     regenerate: "Regenerar",
     regenerate_response: "Regenerar respuesta",
     good_response: "Buena respuesta",
+    bad_response: "Mala respuesta",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "Más acciones",
     hide_citations: "Ocultar citas",
     show_citations: "Mostrar citas",

frontend/src/locales/et/common.js

@@ -857,6 +857,7 @@ const TRANSLATIONS = {
     regenerate: "Loo uuesti",
     regenerate_response: "Loo vastus uuesti",
     good_response: "Hea vastus",
+    bad_response: "Halb vastus",
     more_actions: "Rohkem toiminguid",
     hide_citations: "Peida viited",
     show_citations: "Näita viiteid",

frontend/src/locales/fa/common.js

@@ -652,6 +652,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/fr/common.js

@@ -660,6 +660,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/he/common.js

@@ -864,6 +864,10 @@ const TRANSLATIONS = {
     regenerate: "צור מחדש",
     regenerate_response: "צור תגובה מחדש",
     good_response: "תגובה טובה",
+    bad_response: "תגובה רעה",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "פעולות נוספות",
     hide_citations: "הסתר ציטוטים",
     show_citations: "הצג ציטוטים",

frontend/src/locales/it/common.js

@@ -658,6 +658,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/ja/common.js

@@ -690,6 +690,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/ko/common.js

@@ -873,6 +873,10 @@ const TRANSLATIONS = {
     regenerate: "다시 생성",
     regenerate_response: "응답 다시 생성",
     good_response: "좋은 답변",
+    bad_response: "나쁜 답변",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "더 많은 작업",
     hide_citations: "인용 숨기기",
     show_citations: "인용 보기",

frontend/src/locales/lv/common.js

@@ -889,6 +889,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/nl/common.js

@@ -655,6 +655,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/pl/common.js

@@ -65,6 +65,10 @@ const TRANSLATIONS = {
     selection: "Wybór modelu",
     saving: "Zapisywanie...",
     save: "Zapisz zmiany",
+    bad_response: "Zła odpowiedź",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     previous: "Poprzednia strona",
     next: "Następna strona",
     optional: "Opcjonalnie",

frontend/src/locales/pt_BR/common.js

@@ -870,6 +870,10 @@ const TRANSLATIONS = {
     regenerate: "Regerar",
     regenerate_response: "Regerar resposta",
     good_response: "Resposta satisfatória",
+    bad_response: "Resposta ruim",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "Mais ações",
     hide_citations: "Esconder citações",
     show_citations: "Exibir citações",

frontend/src/locales/ru/common.js

@@ -699,6 +699,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/vn/common.js

@@ -654,6 +654,10 @@ const TRANSLATIONS = {
     regenerate: null,
     regenerate_response: null,
     good_response: null,
+    bad_response: null,
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: null,
     hide_citations: null,
     show_citations: null,

frontend/src/locales/zh/common.js

@@ -832,6 +832,10 @@ const TRANSLATIONS = {
     regenerate: "重新",
     regenerate_response: "重新回应",
     good_response: "反应良好",
+    bad_response: "不良回复",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "更多操作",
     hide_citations: "隐藏引文",
     show_citations: "显示引文",

frontend/src/locales/zh_TW/common.js

@@ -661,6 +661,10 @@ const TRANSLATIONS = {
     regenerate: "重新",
     regenerate_response: "重新回應",
     good_response: "反應良好",
+    bad_response: "不良回應",
+    provide_feedback: null,
+    bad_response_optional_feedback: null,
+    bad_response_placeholder: null,
     more_actions: "更多操作",
     hide_citations: "隱藏引文",
     show_citations: "顯示引文",

frontend/src/models/workspace.js

@@ -78,6 +78,20 @@ const Workspace = {
       .catch(() => false);
     return result;
   },
+  submitChatFeedbackComment: async function (chatId, slug, comment) {
+    if (!chatId || !slug || !comment) return false;
+    const result = await fetch(
+      `${API_BASE}/workspace/${slug}/chat-feedback/${chatId}/comment`,
+      {
+        method: "POST",
+        headers: baseHeaders(),
+        body: JSON.stringify({ comment }),
+      }
+    )
+      .then((res) => res.ok)
+      .catch(() => false);
+    return result;
+  },
 
   deleteChats: async function (slug = "", chatIds = []) {
     return await fetch(`${API_BASE}/workspace/${slug}/delete-chats`, {