Trusted AI·Local languages
DocsTrust CentreAbout Proto
Book a demo

Internal

Product UI

The depictions of the Proto product, kept in one place so they can be reused across the site rather than rebuilt per page. The Inbox surfaces below — web cuts and reference alike — all render the same conversation (Mia Clark, 4 turns, vietnamese translation) from a single data file; the other three module boards depict their own unrelated product scenarios and carry their copy inline, same as any other reference build.

Components
src/components/product-ui/, src/components/product-ui/feature-grid/, src/components/v2/Module*Mock.astro
Inbox content
src/data/product-ui/conversation.ts
CSS system
--pui-* (web cuts), self-contained tokens per reference build
Icons
public/images/{module}-mock/ (Figma exports)

Web cuts

Fluid, simplified, meant to be read at page size. Use these in marketing sections.

Inbox — split

The default. Agent platform and customer webchat side by side, showing the same conversation from both ends. This is the one to reach for in a product section.

Web
<InboxWeb />

Sheds the insights column under 1080px, the conversation list under 860px, and stacks under 660px — measured on the component, not the viewport.

Inbox — platform only

For slots where the webchat would be redundant, or where a section already shows the customer side elsewhere.

Web
<InboxWeb layout="platform" />

Takes the full width of its slot.

Inbox — compact

Platform and webchat with the extra columns turned off up front, for narrow slots and two-column page layouts.

Web
<InboxWeb insights={false} list={false} />

Same component; the columns are props rather than a separate build.

Webchat only

The customer-facing widget on its own — for channel, deployment and voice sections.

Web
<InboxWeb layout="webchat" />

Centres itself in whatever slot it is given.

Feature grid cards

The product-grid_cg_* widget family: individual feature cards used inside the "feature grid" section of solution/usecase pages, hand-written as raw markup on each page rather than as components. These are read-only reference copies — self-contained, with their own tokens, so they render correctly on this v4 page — and do not replace the hand-written markup on the pages listed under each one.

AI-to-AI chat handoff

A conversation escalating from one AI agent to another, with a transfer divider marking the handoff.

Reference

I'm Toby, the business registrar assistant.

How can I help you today?

One of your businesses, a payment company keeps overcharging me and won't cancel the service.

I understand. The business registrar does not handle financial consumer cases. Let me refer you to Rita, the consumer protection commission assistant.

What is the business you wish to complain about?

It's AlphaPay... I lost like 32000 so far

Chat has been transferred to consumer protection agent

Greetings, it's Rita.

Thanks for starting this complaint against AlphaPay for ₱32,000. Let me collect some more details.

Used on: solution/ai-agent-for-government-agencies, usecase/anti-scam-centre, usecase/patient-experience

Connected apps — flat stack

A row of channel icons (WhatsApp, Messenger, Facebook, WeChat, Telegram, Line, webchat).

Reference

Used on: solution/ai-agent-for-government-agencies, solution/ai-agent-for-instant-payments, solution/assistant-for-tourism, usecase/personal-assistant

Connected apps — isometric stack

The same channel icons, overlapped rather than laid flat. Approximated here, not a pixel transcription.

Reference

Used on: solution/ai-agent-for-healthcare

Analytics stat row + chart

Three stat blocks with a trend indicator, plus a static chart image.

Reference
Social media posts
1,680
38%
Institution mentions
1,254
18%
Involved citizens
1,090
23%

Used on: solution/ai-agent-for-government-agencies, solution/ai-agent-for-instant-payments, usecase/citizen-engagement, usecase/employee-assistant, usecase/grievance-redress, usecase/insight-advisor, usecase/personal-assistant

Proactive widget

A proactive-nudge message stack with action buttons, cornered by the launcher icon and cursor.

Reference
Hello Sam!
In accordance with new regulation, we require your government issued ID for international banking.
Learn moreUpload passportUpload driver's license

Used on: usecase/customer-support, usecase/employee-assistant, usecase/insight-advisor, usecase/patient-experience, usecase/personal-assistant

Training source list

"Upload File" / "Add URL" options. Reused with different copy for an unrelated "auto team match" card on grievance-redress.

Reference
Upload File
Upload a file for agent training.
Add URL
Enter a URL for agent training.

Used on: usecase/citizen-engagement, usecase/grievance-redress

Self-improving agent

Two icon blocks joined by a sync glyph, depicting the agent learning from chat history.

Reference

Used on: usecase/customer-support, usecase/patient-experience

Training URL entry

A training-source options list plus a URL field with retrain-frequency footer.

Reference
Upload File
Add URL
Paste Snippet
Add URL

Assistants will learn from new content on this website.

https://example.com
Automatically retrain every3days

Used on: usecase/customer-support, usecase/employee-assistant, usecase/insight-advisor, usecase/personal-assistant

Voice message waveform

A voice-note bubble with a play control and a waveform — the waveform SVG is identical everywhere it appears.

Reference

Please send me your email address so I can open a ticket for you, and someone will reach out shortly!

Generated audio
0:15

Used on: usecase/anti-scam-centre, usecase/employee-assistant, usecase/grievance-redress, usecase/insight-advisor, usecase/personal-assistant

Channel inbox fan

citizen-engagement's own implementation — a fanned stack of channel messages that flattens on hover. Deliberately distinct from the proactive widget above, though the page reuses its id.

Reference
Messenger
DM
David Morales17:59
David: I'm trying to apply a discount code, but it's not working.
LINE
SW
Sophie Williams02:11
Sophie: I followed the steps to cancel my subscription, but it's still showing active.
Whatsapp
JT
Jessica Turner15:48
Jessica: The instructions to reset my password aren't working. I've tried multiple times, but I'm still locked out.
Webchat
AG
Andrew Grotzky14:02
Andrew: I'm trying to update my billing information, but the system keeps giving me an error.

Used on: usecase/citizen-engagement

Human takeover editor

A message thread ending in an editable draft reply with a Takeover button.

Reference
It is the most relevant information about updating your account settings based on what you've shared.
This doesn't really help with updating my account settings. Are you able to help me with the issue I described?
Hello Kristin!
My name is Thomas. Let me check the issue you are experiencing.

Hello Kristin!
My name is Thomas. Thank you for your patience. Let me check about the issue you're experiencing.

Takeover

Used on: usecase/customer-support, usecase/grievance-redress, usecase/patient-experience

Translation demo

Language buttons above an original-language message and its typed translation. Most pages use TranslationTypewriter.astro instead — check there first.

Reference
viVietnamesetlTagalogrwKinyarwanda

Tôi đang tự hỏi nên nói chuyện với ai về một khiếu nại của người tiêu dùng.

TranslationVietnameseEnglish

I'm wondering who to speak to with a consumer complaint.

Used on: solution/assistant-for-tourism, usecase/citizen-engagement

Reference builds

1:1 transcriptions of each Figma board — native geometry scaled as one unit, every value read from the file. Check web cuts against these. None is tuned for reading at page size, so don't swap one in for a web cut above.

Inbox — Figma reference

Four platform panels plus the webchat, as drawn — and, like the web cuts, reading its conversation, insights and meta rows from the shared data file, so all three surfaces stay in step. Already in use on the home page's Inbox tab, left exactly as it is.

Reference
<ModuleInboxMock />

Figma node 14966-35819

AI Agents — Figma reference

The workflow builder: a numbered trigger/action list with toggles, and a co-pilot panel testing the flow against a live instruction.

Reference
<ModuleAiAgentsMock />

Figma node 14966-35820

Analytics — Figma reference

The live-report dashboard: stat cards, CSAT and handoff rings, and the two chat/ticket volume charts.

Reference
<ModuleAnalyticsMock />

Figma node 14966-37299

Perception — Figma reference

The listening dashboard: scrape-volume rings across social, news and app-store sources, and the three keyword/category/sentiment tables.

Reference
<ModulePerceptionMock />

Figma node 14966-37300

Adding one

Two different recipes, matching the two tiers above.

  1. Web cut — put it in src/components/product-ui/.
  2. If it depicts the Inbox scenario, read its copy fromsrc/data/product-ui/conversation.ts rather than inlining it — the demo has to stay one conversation across every Inbox surface. A cut of a different module carries its own copy inline, same as its reference build.
  3. Style it with its own --pui-* tokens, declared once at the top of its stylesheet, and size it with container queries so it survives being dropped into a narrower slot. Add a specimen to the specimens array on this page.
  4. Reference build — put it in src/components/v2/ asModule<Name>Mock.astro. Follow ModuleInboxMock.astro's conventions exactly: native Figma pixel geometry scaled as one unit (the stage/sizer/frame + `ResizeObserver` pattern), every icon a real exported SVG under its own public/images/<name>-mock/ folder — reusing the shared sidenav icons in inbox-mock/ rather than re-exporting them — one self-contained--xxx-* neutral-grey token block, forced box-sizing: border-box, and a documentation header citing the Figma node IDs used. Add it to thereferenceBuilds array above.

Current Inbox insight copy, for reference: “Credit limit increase request” — The customer asked to raise their credit card limit. The assistant confirmed eligibility, offered two rewards cards and activated the new limit in the same conversation.