SensitiveDataGuard
StableWarns before a message with a card number, password or other private detail is sent.
Also known as pii warning, data leak warning, privacy check
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A card number and a phone number
This message has 2 private details
The assistant does not need these to help. Take them out, or send as it is.
- Card number•••• 4242
- Phone number•••• 210
const findings = findSensitive(text);
<SensitiveDataGuard
findings={findings}
onRemove={(id) => setText(removeSensitive(text, findings.filter((f) => f.id === id)))}
onRemoveAll={() => setText(removeSensitive(text, findings))}
onSendAnyway={send}
/>Take one out, take both out, or send anyway. Edit the message and the warning follows.
When to use it
Stops people sharing private details with an AI by accident, without blocking them when they meant to.
Made of: Lock icon and heading · One-line reason · List of details with previews · Take them out · Send anyway
Use it for
- Checking a message just before it is sent.
- Pasted text that may hold card numbers, keys or passwords.
Not for
- Telling people the chat is private or not saved: use PrivateChatBanner.
- A message the AI will not answer: use RefusalNotice.
- A general warning not tied to the message: use Callout.
Do and avoid
This message has a private detail
The assistant does not need these to help. Take them out, or send as it is.
- Card number•••• 4242
Message blocked
Do
- Check when the person presses Send, so they are not interrupted while typing.
- Show a safe preview, never the whole detail.
- Make taking it out the main action, and keep Send anyway.
Avoid
- Do not send the message to a server to check it.
- Do not block sending. People may mean to share it.
- Do not show the full card number or password in the warning.
On a phone
- It sits above the message box at full width, so the box and keyboard stay where they are.
- Each detail's row wraps so its button drops under the text on a narrow screen.
Seen in products
- Microsoft Purview DLP for Microsoft 365 Copilot acts on prompts that contain sensitive information types such as credit card numbers.
- Google's Sensitive Data Protection lists the kinds of private detail a check can find, such as card numbers and phone numbers.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| findingsrequired | SensitiveFinding[] | none | What was found, from findSensitive(text). Nothing shows when it is empty. |
| onRemoverequired | (id: string) => void | none | Takes one detail out of the message. |
| onRemoveAllrequired | () => void | none | Takes every detail out. |
| onSendAnywayrequired | () => void | none | Sends the message as it is. |
| labels | SensitiveDataGuardLabels | none | Overrides heading(n), body, kinds, remove, removeAll and sendAnyway. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the part's heading, so it fits the page outline. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hidden
- With nothing found, it shows nothing.
- one detail
- One detail with its safe preview, and a single Take out button.
- several details
- A row per detail with its own Take out button, and Take them out for all.
Tokens
Change one of these and every part that uses it follows.
--attention-soft--attention-border--attention-fg--fg-muted--radius-card
Built in
- The warning is a status region, so it is read out when it appears without moving focus.
- It is named by its heading, which says how many details were found.
- Each Take out button names the detail it removes.
- Amber and a lock icon, plus words, so it does not rely on color.
What you need to do
- Show it before sending, not after. Run findSensitive when the person presses Send.
- Keep focus in the message box; the warning is read out on its own.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide