vercel__flags/apps/docs/components/geistdocs/feedback.tsx

"use client";

import { SiMarkdown } from "@icons-pack/react-simple-icons";
import { ThumbsUpIcon } from "lucide-react";
import { usePathname } from "next/navigation";
import {
  type FormEventHandler,
  useEffect,
  useState,
  useTransition,
} from "react";
import { sendFeedback } from "@/app/actions/feedback";
import { emotions } from "@/app/actions/feedback/emotions";
import { cn } from "@/lib/utils";
import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Textarea } from "../ui/textarea";

type Emotion = (typeof emotions)[number]["name"];

export interface Feedback {
  emotion: Emotion;
  message: string;
  url?: string;
}

export const Feedback = () => {
  const url = usePathname();
  const [submitted, setSubmitted] = useState(false);
  const [emotion, setEmotion] = useState<Emotion | null>(null);
  const [message, setMessage] = useState("");
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    const item = localStorage.getItem(`docs-feedback-${url}`);

    if (!item) {
      return;
    }

    setSubmitted(true);
  }, [url]);

  const submit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();

    if (!emotion) {
      return;
    }

    startTransition(() => {
      const feedback: Feedback = {
        emotion,
        message,
      };

      sendFeedback(url, feedback).then(() => {
        setSubmitted(true);
        setMessage("");
        setEmotion(null);
      });
    });

    e?.preventDefault();
  };

  return (
    <Popover>
      <PopoverTrigger asChild>
        <button
          className="flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
          type="button"
        >
          <ThumbsUpIcon className="size-3.5" />
          <span>Give feedback</span>
        </button>
      </PopoverTrigger>
      <PopoverContent className="overflow-hidden p-0">
        <div className="overflow-visible">
          {submitted ? (
            <div className="flex flex-col items-center gap-3 rounded-xl bg-sidebar px-3 py-6 text-center text-sm">
              <p>Thank you for your feedback!</p>
            </div>
          ) : (
            <form className="flex flex-col" onSubmit={submit}>
              <div className="p-2">
                <Textarea
                  autoFocus
                  className="max-h-48 min-h-24 shadow-none"
                  onChange={(e) => setMessage(e.target.value)}
                  onKeyDown={(e) => {
                    if (!e.shiftKey && e.key === "Enter") {
                      e.currentTarget.form?.requestSubmit();
                    }
                  }}
                  placeholder="Leave your feedback..."
                  required
                  value={message}
                />
              </div>
              <div className="flex items-center justify-end gap-1 px-2 text-muted-foreground">
                <SiMarkdown className="inline size-3" />
                <p className="text-xs"> supported</p>
              </div>
              <div className="mt-2 flex items-center justify-between border-t bg-sidebar p-2">
                <div className="flex items-center gap-px">
                  {emotions.map((e) => (
                    <Button
                      className={cn(
                        "text-muted-foreground hover:text-foreground",
                        emotion === e.name ? "bg-accent text-foreground" : ""
                      )}
                      key={e.name}
                      onClick={() => setEmotion(e.name)}
                      size="sm"
                      type="button"
                      variant="ghost"
                    >
                      {e.emoji}
                      <span className="sr-only">{e.name}</span>
                    </Button>
                  ))}
                </div>
                <Button
                  disabled={isPending || !emotion || !message}
                  size="sm"
                  type="submit"
                  variant="default"
                >
                  Send
                </Button>
              </div>
            </form>
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
};