Merge pull request #164 from codeforpdx/issue-163/re-implement-feedback-feature

[Feature] - Issue 163/re implement feedback feature

Author: leekahung

backend/.env.example

@@ -12,3 +12,10 @@ DB_USE_SSL=false
 # Not used for local dev
 #DB_USERNAME=default
 #DB_PASSWORD=password
+
+# SMTP setup
+#MAIL_SERVER="smtp.service.com"
+#MAIL_PORT=587
+#SENDER_EMAIL="[email protected]"
+#APP_PASSWORD="app_specific_password"
+#RECIPIENT_EMAIL="[email protected]"

backend/pyproject.toml

@@ -1,9 +1,14 @@
+
 [project]
 name = "tenant-first-aid"
 version = "0.2.0"
 requires-python = ">=3.12"
 dependencies = [
   "flask>=3.1.1",
+  "flask-mailman",
+  "Flask_Limiter",
+  "xhtml2pdf",
+  "redis",
   "valkey>=6.1.0",
   "gunicorn>=23.0.0",
   "google-auth>=2.40.3",

backend/tenantfirstaid/app.py

@@ -1,5 +1,8 @@
 from pathlib import Path
-from flask import Flask, jsonify, session
+from flask import Flask, jsonify, session, abort
+from flask_mailman import Mail
+from flask_limiter import Limiter
+from flask_limiter.util import get_remote_address
 import os
 import secrets
 
@@ -13,15 +16,44 @@
 
 from .session import InitSessionView, TenantSession
 from .citations import get_citation
+from .feedback import send_feedback
 
 app = Flask(__name__)
 
+
+def build_valkey_uri():
+    host = os.getenv("DB_HOST", "127.0.0.1")
+    port = os.getenv("DB_PORT", 6379)
+    password = os.getenv("DB_PASSWORD")
+    ssl = False if os.getenv("DB_USE_SSL") == "false" else True
+    scheme = "rediss" if ssl else "redis"
+
+    if password:
+        return f"{scheme}://:{password}@{host}:{port}"
+    return f"{scheme}://{host}:{port}"
+
+
+limiter = Limiter(
+    get_remote_address,
+    app=app,
+    storage_uri=build_valkey_uri(),
+)
+
 # Configure Flask sessions
 app.secret_key = os.getenv("FLASK_SECRET_KEY", secrets.token_hex(32))
 app.config["SESSION_COOKIE_HTTPONLY"] = True
 app.config["SESSION_COOKIE_SECURE"] = os.getenv("ENV", "dev") == "prod"
 app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
 
+# Configure Flask Mail
+app.config["MAIL_SERVER"] = os.getenv("MAIL_SERVER")
+app.config["MAIL_PORT"] = os.getenv("MAIL_PORT")
+app.config["MAIL_USE_TLS"] = True
+app.config["MAIL_USERNAME"] = os.getenv("SENDER_EMAIL")
+app.config["MAIL_PASSWORD"] = os.getenv("APP_PASSWORD")
+app.config["MAIL_DEFAULT_SENDER"] = os.getenv("SENDER_EMAIL")
+
+mail = Mail(app)
 
 tenant_session = TenantSession()
 
@@ -52,5 +84,21 @@ def clear_session():
     "/api/citation", endpoint="citation", view_func=get_citation, methods=["GET"]
 )
 
+
+@limiter.limit("3 per minute")
+def feedback_route():
+    if not session.get("site_user"):
+        abort(403, "Unauthorized: session missing")
+
+    return send_feedback()
+
+
+app.add_url_rule(
+    "/api/feedback",
+    endpoint="feedback",
+    view_func=feedback_route,
+    methods=["POST"],
+)
+
 if __name__ == "__main__":
     app.run(debug=True, host="0.0.0.0", port=5001)

backend/tenantfirstaid/feedback.py

@@ -0,0 +1,50 @@
+from xhtml2pdf import pisa
+from io import BytesIO
+from flask import request
+from flask_mailman import EmailMessage
+import os
+from typing import Optional, Tuple
+
+MAX_ATTACHMENT_SIZE: int = 2 * 1024 * 1024
+
+
+def convert_html_to_pdf(html_content: str) -> Optional[bytes]:
+    pdf_buffer = BytesIO()
+    pisa_status = pisa.CreatePDF(html_content, dest=pdf_buffer)
+    if pisa_status.err:
+        return None
+    return pdf_buffer.getvalue()
+
+
+def send_feedback() -> Tuple[str, int]:
+    feedback = request.form.get("feedback")
+    file = request.files.get("transcript")
+
+    if not file:
+        return "No file provided", 404
+
+    html_content: str = file.read().decode("utf-8")
+    pdf_content: Optional[bytes] = convert_html_to_pdf(html_content)
+    if pdf_content is None:
+        return "PDF conversion failed", 500
+
+    if len(pdf_content) > MAX_ATTACHMENT_SIZE:
+        return "Attachment too large", 413
+
+    try:
+        msg = EmailMessage(
+            subject="Feedback with Transcript",
+            from_email=os.getenv("SENDER_EMAIL"),
+            to=[os.getenv("RECIPIENT_EMAIL")],
+            body=f"User feedback:\n\n{feedback}\n\nTranscript is attached below",
+        )
+        msg.attach(
+            "transcript.pdf",
+            pdf_content,
+            "application/pdf",
+        )
+
+        msg.send()
+        return "Message sent", 200
+    except Exception as e:
+        return f"Send failed: {str(e)}", 500

backend/tenantfirstaid/session.py

@@ -46,6 +46,7 @@ def get_flask_session_id(self) -> str:
         if not session_id:
             session_id = str(uuid.uuid4())
             session["session_id"] = session_id
+            session["site_user"] = True
 
             @after_this_request
             def save_session(response: Response) -> Response:

backend/uv.lock

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import sendFeedback from "../utils/feedbackHelper";
+import { IMessage } from "../../../hooks/useMessages";
+
+interface Props {
+  messages: IMessage[];
+  setOpenFeedback: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+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 (
+    <dialog
+      open
+      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)}
+          />
+          <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>
+        </div>
+      )}
+      <div className="flex gap-4">
+        <button
+          className="border rounded-full px-4 py-1 cursor-pointer font-semibold text-[#1F584F] transition-colors hover:bg-[#E8EEE2]"
+          onClick={() => {
+            if (feedback.trim() === "") handleModalClose();
+            setStatus("sending");
+            setTimeout(() => {
+              sendFeedback(messages, feedback, wordsToRedact);
+              handleModalClose();
+            }, 1000);
+          }}
+        >
+          Send
+        </button>
+        <button
+          className="border rounded-full px-4 py-1 cursor-pointer font-semibold text-[#E3574B] transition-colors hover:bg-[#fff0ee]"
+          onClick={handleModalClose}
+        >
+          Close
+        </button>
+      </div>
+    </dialog>
+  );
+}

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

@@ -6,6 +6,7 @@ import useSession from "../../../hooks/useSession";
 import ExportMessagesButton from "./ExportMessagesButton";
 import CitySelectField from "./CitySelectField";
 import SuggestedPrompts from "./SuggestedPrompts";
+import FeedbackModal from "./FeedbackModal";
 
 interface Props {
   messages: IMessage[];
@@ -24,6 +25,7 @@ export default function MessageWindow({
 }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const [openFeedback, setOpenFeedback] = useState(false);
   const { handleNewSession } = useSession();
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const messagesRef = useRef<HTMLDivElement | null>(null);
@@ -97,6 +99,9 @@ export default function MessageWindow({
           </div>
         )}
       </div>
+      {openFeedback && (
+        <FeedbackModal messages={messages} setOpenFeedback={setOpenFeedback} />
+      )}
       <div>
         {messages.length > 0 ? (
           <>
@@ -119,9 +124,15 @@ export default function MessageWindow({
               >
                 Clear Chat
               </button>
-              <div className="">
-                <ExportMessagesButton messages={messages} />
-              </div>
+              <ExportMessagesButton messages={messages} />
+              <button
+                className="py-2 px-4 border rounded-md font-semibold hover:bg-gray-200 transition-colors cursor-pointer opacity-70"
+                onClick={() => {
+                  setOpenFeedback(true);
+                }}
+              >
+                Feedback
+              </button>
             </div>
           </>
         ) : (

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

@@ -33,13 +33,13 @@ export default function exportMessages(messages: IMessage[]) {
       <style>
         body {
           font-family: sans-serif;
-          padding: 20px;
         }
         strong {
           font-weight: bold;
         }
         p {
-          margin: 12px;
+          margin: 6px 0;
+          line-height: 1.2;
         }
       </style>
     </head>

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

@@ -0,0 +1,82 @@
+import type { IMessage } from "../../../hooks/useMessages";
+
+function sanitizeText(str: string) {
+  // Strips anchor tags
+  str = str.replace(/<a\b[^>]*>(.*?)<\/a>/gi, "$1");
+
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+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;
+
+  const messageChain = messages
+    .map(
+      ({ role, content }) =>
+        `<p><strong>${
+          role.charAt(0).toUpperCase() + role.slice(1)
+        }</strong>: ${redactText(sanitizeText(content), wordsToRedact)}</p>`,
+    )
+    .join("");
+
+  const htmlContent = `
+    <html>
+    <head>
+      <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'none'; object-src 'none'; base-uri 'none'; style-src 'self'; img-src 'self' data:; font-src 'self'; form-action 'none';">
+      <title>Conversation History</title>
+      <style>
+        body {
+          font-family: sans-serif;
+        }
+        strong {
+          font-weight: bold;
+        }
+        p {
+          margin: 6px 0;
+          line-height: 1.2;
+        }
+      </style>
+    </head>
+    <body>
+      ${messageChain}
+    </body>
+    </html>
+  `;
+
+  const blob = new Blob([htmlContent], { type: "text/html" });
+  const formData = new FormData();
+
+  formData.append("feedback", userFeedback);
+  formData.append("transcript", blob, "transcript.html");
+
+  await fetch("/api/feedback", {
+    method: "POST",
+    body: formData,
+  });
+}