Include Flask-Mail package for python backend; Create simple function for sending transcript to server and send email via smtp with gmail; Create modal for users to send feedback

Author: leekahung

backend/.env.example

@@ -21,3 +21,7 @@ DB_USE_SSL=false
 # Not used for local dev
 #DB_USERNAME=default
 #DB_PASSWORD=password
+
+# SMTP setup
+#MAIL_USERNAME="[email protected]"
+#APP_PASSWORD="app_specific_password"

backend/pyproject.toml

@@ -4,6 +4,7 @@ version = "0.2.0"
 requires-python = ">=3.12"
 dependencies = [
   "flask",
+  "Flask-Mail",
   "valkey",
   "gunicorn",
   "openai==1.89",

backend/tenantfirstaid/app.py

@@ -1,5 +1,7 @@
 from pathlib import Path
-from flask import Flask, jsonify, session
+from flask import Flask, jsonify, session, request
+from flask_mail import Mail, Message
+from werkzeug.utils import secure_filename
 import os
 import secrets
 
@@ -15,13 +17,57 @@
 from .citations import get_citation
 
 app = Flask(__name__)
+mail = Mail(app)
 
 # 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.update(
+    MAIL_SERVER="smtp.gmail.com",
+    MAIL_PORT=587,
+    MAIL_USE_TLS=True,
+    MAIL_USERNAME=os.getenv("MAIL_USERNAME"),
+    MAIL_PASSWORD=os.getenv("APP_PASSWORD"),
+)
+
+mail.init_app(app)
+
+
+def send_feedback():
+    feedback = request.form.get("feedback")
+    file = request.files.get("transcript")
+
+    if not file:
+        return "No file provided", 400
+
+    filename = secure_filename(file.filename)
+    filepath = os.path.join("/tmp", filename)
+    file.save(filepath)
+
+    with open(filepath, "r", encoding="utf-8") as f:
+        html_content = f.read()
+
+    msg = Message(
+        subject="New Feedback with Transcript",
+        sender=os.getenv("MAIL_USERNAME"),
+        recipients=["[email protected]"],
+        body=f"User feedback:\n\n{feedback}",
+    )
+    msg.attach(
+        filename="transcript.html",
+        content_type="text/html",
+        data=html_content.encode("utf-8"),
+    )
+
+    mail.send(msg)
+    os.remove(filepath)
+
+    return "Email sent", 200
+
 
 tenant_session = TenantSession()
 
@@ -52,5 +98,9 @@ def clear_session():
     "/api/citation", endpoint="citation", view_func=get_citation, methods=["GET"]
 )
 
+app.add_url_rule(
+    "/api/feedback", endpoint="feedback", view_func=send_feedback, methods=["POST"]
+)
+
 if __name__ == "__main__":
     app.run(debug=True, host="0.0.0.0", port=5001)

backend/uv.lock

@@ -0,0 +1,50 @@
+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 handleModalClose = () => {
+    setOpenFeedback(false);
+    setFeedback("");
+  };
+
+  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"
+    >
+      <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..."
+        onChange={(event) => setFeedback(event.target.value)}
+      />
+      <div className="flex gap-4">
+        <button
+          className="border rounded-full px-4 py-1 cursor-pointer"
+          onClick={() => {
+            if (feedback.trim() === "") handleModalClose();
+            setTimeout(() => {
+              sendFeedback(messages, feedback);
+              handleModalClose();
+            }, 1000);
+          }}
+        >
+          Send
+        </button>
+        <button
+          className="border rounded-full px-4 py-1 cursor-pointer"
+          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);
@@ -99,6 +101,9 @@ export default function MessageWindow({
           </div>
         )}
       </div>
+      {openFeedback && (
+        <FeedbackModal messages={messages} setOpenFeedback={setOpenFeedback} />
+      )}
       <div>
         {messages.length > 0 ? (
           <>
@@ -121,9 +126,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

@@ -0,0 +1,64 @@
+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;");
+}
+
+export default async function sendFeedback(
+  messages: IMessage[],
+  userFeedback: string
+) {
+  if (messages.length < 2) return;
+
+  const messageChain = messages
+    .map(
+      ({ role, content }) =>
+        `<p><strong>${
+          role.charAt(0).toUpperCase() + role.slice(1)
+        }</strong>: ${sanitizeText(content)}</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;
+          padding: 20px;
+        }
+        strong {
+          font-weight: bold;
+        }
+        p {
+          margin: 12px;
+        }
+      </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,
+  });
+}