Shared promptsPro

The team's prompt library with owners, use counts and variables that fill into the prompt as you type.

Markdown

On this page

ProThe support team's prompt library: pick one, fill its variables and watch it read through.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/shared-prompts

Usage

tsx

import { SharedPrompts } from "@/components/ui/chatcn/pro/shared-prompts"

<SharedPrompts
  prompts={[
    {
      id: "dup",
      title: "Refund reply, duplicate charge",
      owner: tomasz,
      uses: 214,
      sharedWith: "Support",
      body: "Write a short reply to {{customer_name}} about order {{order_id}}.",
    },
  ]}
  currentUserId={me.id}
  onUse={(prompt, text) => composer.insert(text)}
/>

Search matches titles, text, variable names and owners. Each prompt says who owns it, who it is shared with, how often the team uses it and when it changed; a lock marks prompts only the owner edits. Variables are written {{name}} and become fields; empty ones show their name in mono on a quiet fill and filled ones show the value underlined, so the prompt reads the way it will be sent. Use stays off until every variable is filled and says how many are left.

Examples

States

ProLocked and owned by someone else, nothing shared yet, loading and every variable filled.

Props

Prop	Type	Notes
`prompts`	`{ id, title, body, owner, uses?, updated?, sharedWith?, locked?, variables? }[]`	`variables`: labels and placeholders by name
`value`, `defaultValue`, `onValueChange`	`string \| null`	Selected prompt
`currentUserId`	`string`	The owner of a locked prompt still sees Edit
`onUse`	`(prompt, text, values) => void`	With the filled text
`onEdit`	`(prompt) => void`	Shows Edit
`loading`, `labels`		States and every string

Labels

labels covers the title, search, no match and empty, owner, uses, shared with, the lock line, Edit, Use, the fill count, Copy, the variables legend and the agent tag.

Keyboard

Key	Action
Down from search	Into the list
Up and Down, Home and End	Move through prompts
Enter	Open the prompt

Accessibility

The selected prompt has aria-current.
Every variable field has a label; tokens in the prompt are text, not images.

Motion

Switching prompts fades the detail in over 150 ms. Nothing else moves.