Censor quoted text

chat/global.d.ts

@@ -9,6 +9,7 @@ declare interface IChatMessage {
   hat: string;
   namecolor: string;
   text: string;
+  base_text_censored: string;
   text_censored: string;
   text_html: string;
   time: number;

chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {

chat/src/features/chat/QuotedMessage.tsx

@@ -1,17 +1,14 @@
 import React from "react";
-import { useChat, useRootContext } from "../../hooks";
-import { Username } from "./Username";
+import { useChat } from "../../hooks";
 import "./QuotedMessage.css";
 import { QuotedMessageLink } from "./QuotedMessageLink";
 
 export function QuotedMessage() {
   const { quote, quoteMessage } = useChat();
-  const { censored } = useRootContext();
 
   return (
     <div className="QuotedMessage">
       <QuotedMessageLink message={quote} />
-      
       <button
         type="button"
         className="btn btn-secondary"

chat/src/features/chat/QuotedMessageLink.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useRootContext } from "../../hooks";
 
 const SCROLL_TO_QUOTED_OVERFLOW = 250;
@@ -6,7 +6,7 @@ const QUOTED_MESSAGE_CONTEXTUAL_HIGHLIGHTING_DURATION = 2500;
 const QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH = 30;
 
 export function QuotedMessageLink({ message }: { message: IChatMessage }) {
-  const { themeColor } = useRootContext();
+  const { censored, themeColor } = useRootContext();
   const handleLinkClick = useCallback(() => {
     const element = document.getElementById(message.id);
 
@@ -27,17 +27,22 @@ export function QuotedMessageLink({ message }: { message: IChatMessage }) {
       }
     }
   }, []);
+  const replyText = useMemo(() => {
+    const textToUse = censored ? message.base_text_censored || message.text : message.text;
+    const slicedText = textToUse.slice(
+      0,
+      QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH
+    );
+
+    return textToUse.length >= QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH
+      ? `${slicedText}...`
+      : slicedText;
+  }, [message, censored]);
 
   return (
     <a href="#" onClick={handleLinkClick}>
       Replying to @{message.username}:{" "}
-      <em>
-        "{message.text.slice(0, QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH)}
-        {message.text.length >= QUOTED_MESSAGE_CONTEXTUAL_SNIPPET_LENGTH
-          ? "..."
-          : ""}
-        "
-      </em>
+      <em>"{replyText}"</em>
     </a>
   );
 }

files/routes/chat.py

@@ -69,6 +69,7 @@ def speak(data, v):
 		"namecolor": v.name_color,
 		"text": text,
 		"text_html": text_html,
+		"base_text_censored": censor_slurs(text, 'chat'),
 		"text_censored": censor_slurs(text_html, 'chat'),
 		"time": int(time.time()),
 	}