Blame for frontend/src/components/support/SupportChat.tsx

import { useEffect, useRef, useState, type FormEvent } from "react";
import { Link, useLocation } from "react-router-dom";
import { supportApi, type DonePayload, type EscalateReason } from "../../api/support";
import { useAuth } from "../../hooks/useAuth";
import { Markdown } from "../Markdown";

type Msg = {
  role: "user" | "assistant";
  text: string;
  streaming?: boolean;
  escalate?: boolean;
  reason?: EscalateReason | null;
};

const STARTERS = [
  "How do I add my blog?",
  "How do I make an audio overview?",
  "What is in the free plan?",
];

const FORM_COPY: Record<EscalateReason, string> = {
  human: "Talk to a human",
  refund: "Talk to a human",
  feature: "Request this feature",
};

function EscalationForm({ reason, concern, page, conversationId, defaultEmail, open }: {
  reason: EscalateReason;
  concern: string;
  page: string;
  conversationId: string | null;
  defaultEmail: string;
  open: boolean;
}) {
  const [show, setShow] = useState(open);
  const [email, setEmail] = useState(defaultEmail);
  const [text, setText] = useState(concern);
  const [state, setState] = useState<"idle" | "sending" | "sent">("idle");
  const [error, setError] = useState("");

  if (state === "sent") return <p className="sup-note ok">Thanks. We will email you back shortly.</p>;
  if (!show) {
    return (
      <button type="button" className="btn btn-small btn-primary sup-escalate" onClick={() => setShow(true)}>
        {FORM_COPY[reason]}
      </button>
    );
  }
  const send = async (e: FormEvent) => {
    e.preventDefault();
    if (!email.trim() || !text.trim() || state === "sending") return;
    setState("sending");
    setError("");
    try {
      await supportApi.escalate({ email: email.trim(), concern: text.trim(), reason, page_path: page, conversation_id: conversationId });
      setState("sent");
    } catch (err) {
      setState("idle");
      setError(err instanceof Error ? err.message : "Could not send. Please try again.");
    }
  };
  return (
    <form className="sup-form" onSubmit={send}>
      <label>
        Your email
        <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
      </label>
      <label>
        {reason === "feature" ? "What would you like us to build?" : "What do you need?"}
        <textarea className="input" rows={3} value={text} onChange={(e) => setText(e.target.value)} maxLength={4000} required />
      </label>
      {error && <p className="sup-note err">{error}</p>}
      <button className="btn btn-small btn-primary" disabled={state === "sending"}>
        {state === "sending" ? "Sending..." : "Send to the team"}
      </button>
    </form>
  );
}

export function SupportChat({ onClose }: { onClose: () => void }) {
  const { user } = useAuth();
  const { pathname, search } = useLocation();
  const [messages, setMessages] = useState<Msg[]>([]);
  const [conversationId, setConversationId] = useState<string | null>(null);
  const [input, setInput] = useState("");
  const [busy, setBusy] = useState(false);
  const [restoring, setRestoring] = useState(Boolean(user));
  const bottom = useRef<HTMLDivElement>(null);
  const abort = useRef<AbortController | null>(null);

  useEffect(() => {
    if (!user) return;
    let alive = true;
    supportApi
      .latest()
      .then((d) => {
        if (!alive) return;
        setConversationId(d.conversation_id);
        setMessages(d.messages.map((m) => ({ role: m.role, text: m.content })));
      })
      .catch(() => undefined)
      .finally(() => alive && setRestoring(false));
    return () => {
      alive = false;
      abort.current?.abort();
    };
  }, [user]);

  useEffect(() => {
    bottom.current?.scrollIntoView({ block: "end" });
  }, [messages]);
  useEffect(() => {
    const esc = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", esc);
    return () => window.removeEventListener("keydown", esc);
  }, [onClose]);

  const update = (patch: Partial<Msg>) =>
    setMessages((all) => all.map((m, i) => (i === all.length - 1 ? { ...m, ...patch } : m)));

  const ask = async (raw: string) => {
    const message = raw.trim();
    if (!message || busy) return;
    setInput("");
    setBusy(true);
    setMessages((all) => [...all, { role: "user", text: message }, { role: "assistant", text: "", streaming: true }]);
    abort.current = new AbortController();
    let text = "";
    await supportApi.chat(
      { message, page_path: pathname + search, conversation_id: conversationId },
      {
        onToken: (t) => {
          text += t;
          update({ text });
        },
        onAnswerDone: () => {
          update({ streaming: false });
          setBusy(false);
        },
        onDone: (d: DonePayload) => {
          setConversationId(d.conversation_id);
          update({ escalate: d.escalate, reason: d.escalate_reason, streaming: false });
          setBusy(false);
        },
        onError: (m) => {
          update({ text: text || m, streaming: false });
          setBusy(false);
        },
      },
      abort.current.signal,
    );
    setBusy(false);
  };

  const newChat = () => {
    abort.current?.abort();
    setMessages([]);
    setConversationId(null);
    setBusy(false);
  };

  return (
    <section className="sup-panel" role="dialog" aria-label="Help">
      <header className="sup-head">
        <div>
          <strong>Notestack help</strong>
          <span className="muted small">How to use the app</span>
        </div>
        <div className="sup-head-actions">
          {messages.length > 0 && <button type="button" className="link-btn small" onClick={newChat}>New chat</button>}
          <button type="button" className="icon-btn" onClick={onClose} aria-label="Close help">×</button>
        </div>
      </header>

      {!user ? (
        <div className="sup-empty">
          <p>Sign in to ask how anything in Notestack works.</p>
          <Link className="btn btn-primary" to={`/auth?${new URLSearchParams({ next: pathname })}`} onClick={onClose}>Sign in</Link>
        </div>
      ) : (
        <>
          <div className="sup-body" aria-live="polite">
            {restoring ? (
              <p className="muted small">Loading...</p>
            ) : messages.length === 0 ? (
              <div className="sup-empty">
                <p>Ask me how to do anything in Notestack.</p>
                <p className="muted small">I cannot see your notebooks or posts. For questions about your writing, ask in the notebook chat.</p>
                <div className="sup-starters">
                  {STARTERS.map((s) => (
                    <button key={s} type="button" className="sup-starter" onClick={() => ask(s)}>{s}</button>
                  ))}
                </div>
              </div>
            ) : (
              messages.map((m, i) => (
                <div key={i} className={`sup-msg ${m.role}`}>
                  {m.role === "user" ? (
                    <p>{m.text}</p>
                  ) : m.streaming && !m.text ? (
                    <span className="sup-typing" aria-label="Thinking"><i /><i /><i /></span>
                  ) : (
                    <Markdown text={m.text} />
                  )}
                  {m.role === "assistant" && !m.streaming && (
                    <>
                      {m.escalate && m.reason && (
                        <EscalationForm
                          reason={m.reason}
                          concern={m.reason === "feature" ? messages[i - 1]?.text ?? "" : ""}
                          page={pathname}
                          conversationId={conversationId}
                          defaultEmail={user.email}
                          open={m.reason !== "feature"}
                        />
                      )}
                    </>
                  )}
                </div>
              ))
            )}
            <div ref={bottom} />
          </div>
          <form className="sup-ask" onSubmit={(e: FormEvent) => { e.preventDefault(); void ask(input); }}>
            <input
              className="input"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="How do I..."
              aria-label="Ask for help"
              maxLength={4000}
            />
            <button className="btn btn-primary" disabled={busy || !input.trim()}>Send</button>
          </form>
        </>
      )}
    </section>
  );
}