AI Email Reply Generator: Tone-Aware Drafts With Node.js and Groq

/**
 * AI Email Reply Generator — Express server
 *
 * Serves the static frontend from ../client and exposes POST /generate-reply
 * which forwards requests to the Groq API (OpenAI-compatible chat format).
 */

require("dotenv").config({ path: require("path").join(__dirname, ".env") });

const path = require("path");
const express = require("express");
const cors = require("cors");

const app = express();
const PORT = process.env.PORT || 3000;

// Groq uses the OpenAI-compatible Chat Completions API
const GROQ_API_URL = "https://api.groq.com/openai/v1/chat/completions";
// Fast, capable model; change via GROQ_MODEL in .env if you prefer another
const DEFAULT_MODEL = "llama-3.3-70b-versatile";

/** Maximum characters accepted for the pasted email (matches client limit) */
const MAX_EMAIL_LENGTH = 8000;

app.use(cors());
app.use(express.json({ limit: "256kb" }));

// Serve HTML, CSS, and JS from the client folder
app.use(express.static(path.join(__dirname, "..", "client")));

/**
 * POST /generate-reply
 * Body: { "email": string, "tone": "formal" | "friendly" | "short" }
 * Returns: { "reply": string } or { "error": string }
 */
app.post("/generate-reply", async (req, res) => {
  const apiKey = process.env.GROQ_API_KEY;
  if (!apiKey) {
    return res.status(500).json({
      error:
        "Server is missing GROQ_API_KEY. Add it to server/.env and restart.",
    });
  }

  const { email, tone } = req.body || {};

  if (typeof email !== "string" || !email.trim()) {
    return res.status(400).json({
      error: "Please paste the email you want to reply to.",
    });
  }

  const trimmed = email.trim();
  if (trimmed.length > MAX_EMAIL_LENGTH) {
    return res.status(400).json({
      error: `Email is too long. Please use at most ${MAX_EMAIL_LENGTH} characters.`,
    });
  }

  const allowedTones = ["formal", "friendly", "short"];
  const normalizedTone =
    typeof tone === "string" ? tone.toLowerCase().trim() : "";
  if (!allowedTones.includes(normalizedTone)) {
    return res.status(400).json({
      error: 'Tone must be one of: "formal", "friendly", or "short".',
    });
  }

  // Human-readable tone label for the model
  const toneLabel =
    normalizedTone === "formal"
      ? "formal and professional"
      : normalizedTone === "friendly"
        ? "warm and friendly"
        : "brief and to the point (keep the reply short)";

  const userPrompt = `Write a ${toneLabel} reply to the following email:\n\n${trimmed}`;

  const model = process.env.GROQ_MODEL || DEFAULT_MODEL;

  try {
    const groqResponse = await fetch(GROQ_API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${apiKey}`,
      },
      body: JSON.stringify({
        model,
        messages: [
          {
            role: "system",
            content:
              "You are a helpful assistant that writes clear, natural email replies. Output only the reply text the user can send—no subject line unless the user explicitly asked for one, and no explanations or quotes.",
          },
          { role: "user", content: userPrompt },
        ],
        temperature: 0.7,
      }),
    });

    const data = await groqResponse.json().catch(() => ({}));

    if (!groqResponse.ok) {
      const message =
        data?.error?.message ||
        `Groq API error (${groqResponse.status}). Try again in a moment.`;
      return res.status(502).json({ error: message });
    }

    const reply =
      data?.choices?.[0]?.message?.content?.trim() || "";

    if (!reply) {
      return res.status(502).json({
        error: "The AI returned an empty reply. Please try again.",
      });
    }

    return res.json({ reply });
  } catch (err) {
    console.error("generate-reply error:", err);
    return res.status(502).json({
      error:
        "Could not reach the AI service. Check your internet connection and try again.",
    });
  }
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
  console.log(`Open that URL in your browser to use the app.`);
});

/**
 * AI Email Reply Generator — frontend logic (vanilla JS)
 *
 * Sends the email text and tone to POST /generate-reply on the same origin
 * (when you open the app via the Express server).
 */

const MAX_CHARS = 8000;

const emailInput = document.getElementById("email-input");
const toneSelect = document.getElementById("tone-select");
const generateBtn = document.getElementById("generate-btn");
const statusMessage = document.getElementById("status-message");
const replyOutput = document.getElementById("reply-output");
const copyBtn = document.getElementById("copy-btn");
const charCount = document.getElementById("char-count");

function setStatus(text, isError = false) {
  statusMessage.textContent = text || "";
  statusMessage.classList.toggle("error", isError);
}

function updateCharCount() {
  const len = emailInput.value.length;
  charCount.textContent = `${len} / ${MAX_CHARS}`;
}

emailInput.addEventListener("input", updateCharCount);
updateCharCount();

generateBtn.addEventListener("click", async () => {
  const email = emailInput.value.trim();
  const tone = toneSelect.value;

  if (!email) {
    setStatus("Please paste the email you want to reply to.", true);
    replyOutput.textContent = "";
    copyBtn.disabled = true;
    return;
  }

  setStatus("Generating reply…");
  replyOutput.textContent = "";
  copyBtn.disabled = true;
  generateBtn.disabled = true;

  try {
    const res = await fetch("/generate-reply", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, tone }),
    });

    const data = await res.json().catch(() => ({}));

    if (!res.ok) {
      const msg =
        data.error ||
        `Something went wrong (${res.status}). Please try again.`;
      setStatus(msg, true);
      return;
    }

    if (!data.reply) {
      setStatus("No reply was returned. Please try again.", true);
      return;
    }

    replyOutput.textContent = data.reply;
    copyBtn.disabled = false;
    setStatus("Done! Review and edit before sending.");
  } catch (err) {
    console.error(err);
    setStatus(
      "Could not reach the server. Make sure it is running and refresh the page.",
      true
    );
  } finally {
    generateBtn.disabled = false;
  }
});

copyBtn.addEventListener("click", async () => {
  const text = replyOutput.textContent;
  if (!text) return;

  try {
    await navigator.clipboard.writeText(text);
    setStatus("Copied to clipboard.");
  } catch {
    setStatus("Copy failed. You can select the text and copy manually.", true);
  }
});