"use client"; /** * @author: @kokonutui * @description: AI Redact * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowUp, CreditCard, KeyRound, Lock, type LucideIcon, Mail, Phone, ShieldCheck, User, } from "lucide-react"; import { AnimatePresence, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { type KeyboardEvent, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export type RedactKind = "email" | "phone" | "card" | "secret" | "name"; export interface AIRedactProps { title?: string; /** Text already in the composer when it mounts. */ defaultValue?: string; /** Names to mask, e.g. contacts from your CRM. Regexes cover the rest. */ names?: string[]; /** * Answers the masked prompt. It only ever sees placeholders like * `EMAIL_1`; any it writes back are filled in on this side. */ respond?: (masked: string) => string; className?: string; } interface Match { start: number; end: number; kind: RedactKind; value: string; token: string; } type Segment = string | { token: string; value: string; kind: RedactKind }; interface Message { id: string; role: "user" | "assistant"; segments: Segment[]; } const EASE_OUT = [0.23, 1, 0.32, 1] as const; const PATTERNS: { kind: RedactKind; pattern: RegExp }[] = [ { kind: "secret", pattern: /\b(?:sk|pk|rk)_(?:live|test)_[A-Za-z0-9]{8,}|\bghp_[A-Za-z0-9]{20,}/g, }, { kind: "card", pattern: /\b\d{4}(?:[ -]?\d{4}){3}\b/g }, { kind: "email", pattern: /[\w.+-]+@[\w-]+(?:\.[\w-]+)+/g }, { kind: "phone", pattern: /\+\d[\d ().-]{7,}\d/g }, ]; const TOKEN = /\b(EMAIL|PHONE|CARD|SECRET|PERSON)_\d+\b/g; const ESCAPE = /[.*+?^${}()|[\]\\]/g; const WORDS = /\S+\s*|\s+/g; const PERSON_TOKEN = /PERSON_\d+/; const CARD_TOKEN = /CARD_\d+/; const PHONE_TOKEN = /PHONE_\d+/; const SECRET_TOKEN = /SECRET_\d+/; const LABEL: Record = { email: "EMAIL", phone: "PHONE", card: "CARD", secret: "SECRET", name: "PERSON", }; const ICON: Record = { email: Mail, phone: Phone, card: CreditCard, secret: KeyRound, name: User, }; const DEMO_TEXT = "Draft a reply to Dana Whitfield (dana.whitfield@acme.co, +1 415 555 0132) confirming the refund to card 4242 4242 4242 4242. The charge failed with key sk_live_51Hx9aQ2vT8eLm, what does that error mean?"; const demoRespond = (masked: string) => { const person = masked.match(PERSON_TOKEN)?.[0] ?? "there"; const card = masked.match(CARD_TOKEN)?.[0] ?? "your card"; const phone = masked.match(PHONE_TOKEN)?.[0]; const secret = masked.match(SECRET_TOKEN)?.[0]; const callBack = phone ? `, or call us back on ${phone}` : ""; const keyNote = secret ? ` On the error: I only saw ${secret}, not the key itself, so I can't tell which account it belongs to. A failed charge with a live key usually means the card was declined, not that the key is wrong.` : ""; return `Hi ${person}, thanks for bearing with us. Your refund to ${card} is confirmed and should land within 5 to 10 business days. If anything looks off, just reply here${callBack}.${keyNote}`; }; /** Finds everything worth masking, numbering repeats with the same token. */ const detect = (text: string, names: string[]): Match[] => { const found: Omit[] = []; const taken = (start: number, end: number) => found.some((m) => start < m.end && end > m.start); const patterns = [ ...PATTERNS, ...names.map((name) => ({ kind: "name" as const, pattern: new RegExp(`\\b${name.replace(ESCAPE, "\\$&")}\\b`, "g"), })), ]; for (const { kind, pattern } of patterns) { for (const m of text.matchAll(pattern)) { const start = m.index ?? 0; const end = start + m[0].length; if (!taken(start, end)) { found.push({ start, end, kind, value: m[0] }); } } } found.sort((a, b) => a.start - b.start); const tokens = new Map(); const counts: Partial> = {}; return found.map((m) => { const key = `${m.kind}:${m.value}`; let token = tokens.get(key); if (!token) { counts[m.kind] = (counts[m.kind] ?? 0) + 1; token = `${LABEL[m.kind]}_${counts[m.kind]}`; tokens.set(key, token); } return { ...m, token }; }); }; const toSegments = (text: string, matches: Match[], kept: Set) => { const out: Segment[] = []; let at = 0; for (const m of matches) { if (kept.has(m.token)) { continue; } if (m.start > at) { out.push(text.slice(at, m.start)); } out.push({ token: m.token, value: m.value, kind: m.kind }); at = m.end; } out.push(text.slice(at)); return out.filter((s) => s !== ""); }; const flatten = (segments: Segment[]) => segments.map((s) => (typeof s === "string" ? s : s.token)).join(""); /** Turns placeholders in the reply back into segments with real values. */ const restore = (reply: string, matches: Match[]): Segment[] => { const byToken = new Map(matches.map((m) => [m.token, m])); const out: Segment[] = []; let at = 0; for (const m of reply.matchAll(TOKEN)) { const hit = byToken.get(m[0]); const start = m.index ?? 0; if (!hit) { continue; } out.push(reply.slice(at, start)); out.push({ token: hit.token, value: hit.value, kind: hit.kind }); at = start + m[0].length; } out.push(reply.slice(at)); return out.filter((s) => s !== ""); }; /** Splits text segments into words so a reply can stream in. */ const pieces = (segments: Segment[]): Segment[] => segments.flatMap((s): Segment[] => typeof s === "string" ? [...(s.match(WORDS) ?? [])] : [s] ); let counter = 0; const uid = () => { counter += 1; return `m${counter}`; }; export default function AIRedact({ title = "Support assistant", defaultValue = DEMO_TEXT, names = ["Dana Whitfield"], respond = demoRespond, className, }: AIRedactProps) { const reduceMotion = useReducedMotion(); const [text, setText] = useState(defaultValue); const [kept, setKept] = useState>(new Set()); const [messages, setMessages] = useState([]); const [shown, setShown] = useState(0); const [restored, setRestored] = useState(true); const [modelView, setModelView] = useState(false); const [pointed, setPointed] = useState(null); const textareaRef = useRef(null); const threadRef = useRef(null); const matches = useMemo(() => detect(text, names), [text, names]); const tokens = useMemo( () => [...new Map(matches.map((m) => [m.token, m])).values()], [matches] ); const masking = tokens.filter((t) => !kept.has(t.token)); const reply = messages.at(-1); const replyPieces = useMemo( () => (reply?.role === "assistant" ? pieces(reply.segments) : []), [reply] ); const streaming = reply?.role === "assistant" && shown < replyPieces.length; // Grow the composer with its text, so the highlight layer lines up. // biome-ignore lint/correctness/useExhaustiveDependencies: text drives the height useLayoutEffect(() => { const el = textareaRef.current; if (!el) { return; } el.style.height = "auto"; el.style.height = `${el.scrollHeight}px`; }, [text]); // Stream the reply with placeholders, then fill the real values back in. useEffect(() => { if (reply?.role !== "assistant") { return; } if (reduceMotion) { setShown(replyPieces.length); setRestored(true); return; } if (shown < replyPieces.length) { const id = setTimeout(() => setShown((n) => n + 1), 38); return () => clearTimeout(id); } const id = setTimeout(() => setRestored(true), 420); return () => clearTimeout(id); }, [reply, replyPieces, shown, reduceMotion]); const messageCount = messages.length; useEffect(() => { const el = threadRef.current; if (messageCount > 0 && el) { el.scrollTo({ top: el.scrollHeight + shown, behavior: "smooth" }); } }, [messageCount, shown]); const send = () => { if (!text.trim() || streaming) { return; } const segments = toSegments(text, matches, kept); const answer = restore(respond(flatten(segments)), matches); setMessages((list) => [ ...list, { id: uid(), role: "user", segments }, { id: uid(), role: "assistant", segments: answer }, ]); setShown(0); setRestored(false); setText(""); setKept(new Set()); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); send(); } }; const toggle = (token: string) => setKept((set) => { const next = new Set(set); if (next.has(token)) { next.delete(token); } else { next.add(token); } return next; }); return (

{messages.length === 0 && (

Names, emails, numbers and keys are swapped for placeholders before anything leaves the browser. Replies are filled back in here.

)} {messages.map((message) => { const live = message === reply && message.role === "assistant"; return message.role === "user" ? (

) : (

); })}

{/* Highlights sit under the transparent textarea, letter for letter. */}

setText(event.target.value)}
                onKeyDown={onKeyDown}
                placeholder="Paste a customer message…"
                ref={textareaRef}
                rows={2}
                value={text}
              />
            </div>
            <div className="flex items-end gap-2 p-2">
              <div className="flex min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1">
                {tokens.length === 0 && (
                  <span className="px-1 text-[11px] text-zinc-400 dark:text-zinc-500">
                    Nothing to mask
                  </span>
                )}
                <AnimatePresence initial={false} mode="popLayout">
                  {tokens.map((t) => (
                    <TokenChip
                      kept={kept.has(t.token)}
                      key={t.token}
                      match={t}
                      onPoint={(on) => setPointed(on ? t.token : null)}
                      onToggle={() => toggle(t.token)}
                    />
                  ))}
                </AnimatePresence>
              </div>
              <button
                aria-label="Send"
                className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-zinc-900 text-white transition-[background-color,opacity] duration-150 hover:bg-zinc-700 active:bg-zinc-600 disabled:opacity-30 dark:bg-white dark:text-zinc-900 dark:active:bg-zinc-300 dark:hover:bg-zinc-200"
                disabled={!text.trim() || streaming}
                onClick={send}
                type="button"
              >
                <ArrowUp className="size-3.5" />
              </button>
            </div>
          </div>
          <p
            aria-live="polite"
            className="flex h-7 items-center px-2 text-[11px] text-zinc-400 dark:text-zinc-500"
          >
            {masking.length > 0
              ? `${masking.length} ${masking.length === 1 ? "item" : "items"} will be masked. Click one to send it as is.`
              : "Sent exactly as written"}
          </p>
        </div>
      </div>
    </MotionConfig>
  );
}

AI Redact

On this page