Create additional text field for redacting text from conversation

Author: leekahung

frontend/src/pages/Chat/components/FeedbackModal.tsx

@@ -9,12 +9,14 @@ interface Props {
 
 export default function FeedbackModal({ messages, setOpenFeedback }: Props) {
   const [feedback, setFeedback] = useState("");
+  const [wordsToRedact, setWordsToRedact] = useState("");
   const [status, setStatus] = useState("idle");
 
   const handleModalClose = () => {
     setOpenFeedback(false);
     setStatus("idle");
     setFeedback("");
+    setWordsToRedact("");
   };
 
   return (
@@ -23,11 +25,19 @@ export default function FeedbackModal({ messages, setOpenFeedback }: Props) {
       className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] flex flex-col gap-4 items-center justify-center w-[300px] sm:w-[500px] h-[300px] rounded-lg p-4"
     >
       {status === "idle" ? (
-        <textarea
-          className="resize-none h-[80%] w-full px-3 py-2 border-1 border-[#ddd] rounded-md box-border transition-colors duration-300 focus:outline-0 focus:border-[#4a90e2] focus:shadow-[0_0_0_2px_rgba(74,144,226,0.2)]"
-          placeholder="Please enter your feedback with regards to the chatbot here. A copy of your chat transcript will automatically be included with your response."
-          onChange={(event) => setFeedback(event.target.value)}
-        />
+        <>
+          <textarea
+            className="resize-none h-[80%] w-full px-3 py-2 border-1 border-[#ddd] rounded-md box-border transition-colors duration-300 focus:outline-0 focus:border-[#4a90e2] focus:shadow-[0_0_0_2px_rgba(74,144,226,0.2)]"
+            placeholder="Please enter your feedback with regards to the chatbot here. A copy of your chat transcript will automatically be included with your response."
+            onChange={(event) => setFeedback(event.target.value)}
+          />
+          <input
+            className="resize-none h-[20%] w-full px-3 py-2 border-1 border-[#ddd] rounded-md box-border transition-colors duration-300 focus:outline-0 focus:border-[#4a90e2] focus:shadow-[0_0_0_2px_rgba(74,144,226,0.2)]"
+            placeholder="Please enter words to redact separated by commas"
+            type="text"
+            onChange={(event) => setWordsToRedact(event.target.value)}
+          />
+        </>
       ) : (
         <div className="flex items-center justify-center h-[80%] w-full">
           <p>Feedback Sent!</p>
@@ -40,7 +50,7 @@ export default function FeedbackModal({ messages, setOpenFeedback }: Props) {
             if (feedback.trim() === "") handleModalClose();
             setStatus("sending");
             setTimeout(() => {
-              sendFeedback(messages, feedback);
+              sendFeedback(messages, feedback, wordsToRedact);
               handleModalClose();
             }, 1000);
           }}

frontend/src/pages/Chat/utils/feedbackHelper.ts

@@ -12,9 +12,27 @@ function sanitizeText(str: string) {
     .replace(/'/g, "'");
 }
 
+function redactText(message: string, wordsToRedact: string) {
+  let redactedMessage = message;
+  const redactList = wordsToRedact.split(/\s*,\s*/).map((s) => s.trim());
+  redactList.forEach((word) => {
+    const regex = new RegExp(`\\b${word.replace(/\s+/g, "\\s+")}\\b`, "gi");
+    redactedMessage = redactedMessage.replace(regex, () => {
+      return `<span style="
+        background-color: black;
+        color:transparent;
+        white-space: nowrap;
+        user-select: none;
+      ">${"_".repeat(10)}</span>`;
+    });
+  });
+  return redactedMessage;
+}
+
 export default async function sendFeedback(
   messages: IMessage[],
   userFeedback: string,
+  wordsToRedact: string
 ) {
   if (messages.length < 2) return;
 
@@ -23,7 +41,7 @@ export default async function sendFeedback(
       ({ role, content }) =>
         `<p><strong>${
           role.charAt(0).toUpperCase() + role.slice(1)
-        }</strong>: ${sanitizeText(content)}</p>`,
+        }</strong>: ${redactText(sanitizeText(content), wordsToRedact)}</p>`
     )
     .join("");