Open In Chat

npx shadcn@latest add https://ui.zyeon.ai/r/open-in-chat.json

Build a React + TypeScript + Tailwind "OpenInChat" component (lucide-react icons,
shadcn Button + DropdownMenu, cn() from your utils). It hands whatever is on the
page to an AI assistant as an already-written prompt: pick an assistant, land in
a new tab with the question typed — or on the clipboard when that assistant has
no prefill URL.

Contract
- forwardRef<HTMLDivElement>, extends the div props minus "content" and "title":
  both exist as global/RDFa attributes and would collide with the props below.
- content: string (required) — the material handed over verbatim. Empty or
  whitespace-only content locks the whole control (see Behavior — locked).
- instruction?: string — the FIRST line of the prompt, the job rather than the
  material. Default: "Explain what this does, then help me adapt it to my project."
- sourceTitle?: string, sourceUrl?: string — provenance quoted into the prompt.
  sourceUrl is what lets the model fetch whatever the budget cut.
- language?: string ("tsx", "sql", "") — fence info string for the content.
- buildPrompt?: (parts: { content, instruction, title?, sourceUrl?, language? })
  => string — replaces the whole recipe. Default recipe: instruction line, then
  "Title: …" / "Source: …", then the content inside a fence.
- providers?: OpenInChatProvider[] — { id, label, href?: (prompt: string) =>
  string, maxUrlLength?, icon?: ReactNode, hint?, disabled? }. Ship a default
  catalogue (ChatGPT, Claude, Perplexity, v0, Cursor, plus one clipboard-only
  row) and export it, so consumers can spread it and push their own assistant.
- maxPromptLength? (6000), maxUrlLength? (4000, per-provider value wins),
  truncationNotice? (the line that replaces the cut content).
- label? ("Open in chat"), menuLabel? ("Send this to"), overflowHint?, icon?,
  iconOnly? (drops label and chevron, keeps the accessible name),
  size? "sm" | "default", variant? "default" | "outline" | "ghost" | "secondary",
  align? "start" | "center" | "end", feedbackMs? (2600), showPromptSize? (true),
  disabled?.
- onOpenIn?: (event: { provider, prompt, route, outcome, truncated, href? }) =>
  void — the single output, fired once per completed interaction. route is
  "link" | "copy" | "copy-link"; outcome is "opened" | "copied" |
  "copied-opened" | "error". `prompt` is the exact string that was sent.
- Also export the prompt builder and the provider catalogue as standalone
  functions/consts: a server route that emails the same prompt should not have
  to render the component to build it.

Behavior — prompt assembly
- Instruction first (an opening line is what a model weights most), then the
  provenance lines, then the content inside a fence. Never send a bare snippet:
  pasted alone it tells the model neither what it is nor where it came from.
- Compute the fence as one backtick longer than the longest backtick run inside
  the content. Docs snippets contain fences of their own, and a plain
  three-backtick fence closes on the first one it meets — after which the model
  reads the rest of the page as prose.
- Trim the content before fencing; return only the head when the content is
  empty after trimming.

Behavior — the budget (the part everyone gets wrong)
- Providers truncate long query strings silently, and proxies answer 414. A
  prompt that arrives cut in half is worse than one the reader pastes, so the
  finished prompt is capped at maxPromptLength and the CONTENT is what shrinks.
- The instruction and the source URL are never touched: they are what lets the
  model ask for the rest.
- Find the surviving length by BINARY SEARCH over the content, not by arithmetic
  on the template: buildPrompt is a black box that a consumer can replace with
  any amount of scaffolding, and template arithmetic silently overshoots the
  moment they do. ~log2(n) builder calls, memoised once per prompt.
- Cut at a line boundary when one is within the last 40% of the kept slice —
  half a line reads as corruption — then append the truncationNotice.
- If even an empty body busts the budget (a huge instruction, a long URL), send
  the head alone rather than nothing, and still report truncated: true.

Behavior — route resolution (per provider, from the finished prompt)
- No href builder                 -> "copy": clipboard only.
- href fits provider.maxUrlLength -> "link": a real anchor to the prefilled URL.
- href busts the cap              -> "copy-link": clipboard AND a blank chat tab
  (provider.href("")), so the reader lands where the paste belongs.
- Render link and copy-link rows as real <a target="_blank" rel="noopener
  noreferrer"> through the menu item's asChild — not window.open. Anchors are
  not popup-blocked, they support middle-click and modifier-click, and "copy
  link address" hands over a shareable prefilled chat. The cost is the prompt
  appearing once per row in the DOM, which is why the budget is not optional.
- Copy rows call preventDefault() on the menu's select event so the menu STAYS
  OPEN: the row's entire result is a clipboard write, and a menu that vanishes
  leaves nothing to confirm it.
- A disabled provider renders as a visible inert row with its reason, never as
  a missing row.

Behavior — clipboard, feedback, locks, cleanup
- Clipboard: async API first, a hidden textarea + execCommand second, `false`
  third. The fallback matters — the async API needs a secure context and docs
  get read from previews and intranets. Nothing throws out of the helper: a
  refusal is a state the UI renders. Restore focus to the previously active
  element after the textarea path, or the keyboard journey dead-ends on <body>.
- One feedback slot: { providerId, outcome }. The trigger label becomes
  "Opened in Claude" / "Copied for Claude Desktop" / "Copy failed", the row
  shows the same words plus a check (or a destructive triangle), and both revert
  after feedbackMs. Store the provider id, not the label, so a re-ordered
  catalogue cannot mislabel a confirmation.
- One-shot lock (~400ms) around every emission: a menu row can be clicked and
  Enter-ed in the same gesture, and a double click on a link row would open two
  tabs. A link row's click that loses the lock calls preventDefault, so the
  anchor does not navigate either. Start the clipboard write synchronously
  inside the click handler so Safari still counts it as user-initiated.
- Locked = disabled || empty content. While locked the trigger is natively
  disabled AND onOpenChange refuses to open, so the pointer path and the
  keyboard path are both closed; an open menu closes when the lock lands, by
  resetting the state rather than only the rendered `open`.
- Guard every post-await setState with a mounted ref (set it back to true at the
  start of the mount effect, or StrictMode's double-invoke leaves it false), and
  clear BOTH timers — the feedback reset and the lock release — on unmount.

Rendering & styling
- Semantic tokens only: the Button primitive's own variants, bg-card / border for
  the surrounding surface, text-muted-foreground for hints and the size footer,
  text-destructive for a refused copy. No hex, no rgb(), no oklch().
- Menu content is w-auto min-w-72 max-w-80 — the primitive defaults to the
  trigger width, which is far too narrow for a labelled catalogue with hints.
- Each row: provider glyph, label, one muted hint line that WRAPS (an
  explanation cut in half explains nothing), and a trailing affordance icon —
  external-link for link rows, clipboard for copy rows, check when done.
- Footer line under a separator: prompt size (locale-free formatting, so server
  and client agree) plus what the budget trimmed. Hide it with showPromptSize.
- Icons are generic glyphs, not brand marks: brand artwork is trademarked and
  has its own usage rules, and every provider takes an `icon` node so swapping
  in the official SVG is a one-line change.
- Motion is decoration only: the chevron rotation is motion-reduce:
  transition-none and the confirmation check is motion-reduce:animate-none. The
  control works identically with animation off.
- Accessibility: focus-visible ring from the Button primitive, aria-hidden on
  every glyph, the label surviving as sr-only text in iconOnly mode, and one
  sr-only role="status" aria-live="polite" region that is EMPTY while idle and
  receives a single sentence per interaction ("Prompt copied. Paste it into
  Claude Desktop."). Never announce per keystroke of state.

Customization levers
- The catalogue is the main lever: providers is plain data. Add an internal
  assistant with { id, label, hint } and no href to get a copy row; give it an
  href builder to get a deeplink; re-cap any row with maxUrlLength.
- The prompt recipe: keep the default and change `instruction` for a per-page
  ask, or pass buildPrompt for a whole different brief (a review checklist, a
  bug report template, a translation request). Keep the function identity stable
  — an inline lambda re-runs the budget search on every render.
- Budgets: maxPromptLength trades completeness for reliability; drop it to ~2000
  if your audience is on proxies that clamp URLs, raise it when the assistants
  you list are known to accept long queries.
- Density: size="sm" plus iconOnly turns the control into a snippet-toolbar
  glyph; variant picks how loud the trigger is; align="end" keeps the menu
  inside a right-aligned toolbar.
- Confirmation: feedbackMs 0-ish makes it feel instant and silent, longer values
  suit a page where the new tab steals attention. Or set showPromptSize={false}
  and let onOpenIn drive your own toast.
- Empty-state policy: the control locks itself on empty content. If your surface
  prefers an always-clickable trigger that explains the emptiness inside the
  menu, drop the `empty` term from the lock and render a single disabled row.