"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ArrowRightIcon, ChatIcon, ChevronLeftIcon, XIcon } from "@kineticui/icons"; export type ContactWidgetProps = { host: { name: string; avatar?: React.ReactNode; role?: string }; greeting?: string; /** Quick links shown on the home panel, e.g. email, book a call. */ links?: { label: string; href: string; icon?: React.ReactNode; description?: string }[]; onSubmit: (data: { email: string; message: string }) => Promise | void; /** Pin to the viewport corner. Turn off to render inline (docs, previews). */ fixed?: boolean; defaultOpen?: boolean; className?: string; }; /** Floating "Message me" launcher that opens a compact panel: greeting, quick links and a two-field form. */ export function ContactWidget({ host, greeting = "Hi there! How can I help?", links = [], onSubmit, fixed = true, defaultOpen = false, className }: ContactWidgetProps) { const [open, setOpen] = React.useState(defaultOpen); const [view, setView] = React.useState<"home" | "form" | "done">("home"); const [email, setEmail] = React.useState(""); const [message, setMessage] = React.useState(""); const [busy, setBusy] = React.useState(false); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && message.trim().length > 3; React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open]); return (

{open ? (

Contact Widget

Installation

Exports