Skip to content
Design System
العربية

Conversations kit

import"@truvar-ai/design-system/crm"

Conversations kit

The pieces behind Conversations, Contacts and Team & roles, from @truvar-ai/design-system/crm. Use them together as <ConversationInbox> or one by one in your own layouts.

Channels

Built on ChannelBadge · ChannelIcon · ChannelLabel

Every channel a customer can write from. Brand marks are from Simple Icons (CC0); black marks follow the theme so they stay visible in dark mode.

  • WhatsApp
  • Instagram
  • Messenger
  • Facebook
  • Telegram
  • TikTok
  • X
  • Threads
  • LinkedIn
  • YouTube
  • Google Business
  • Snapchat
  • Viber
  • LINE
  • WeChat
  • SMS
  • Email
  • Phone
  • Website chat

Conversation list

Built on ConversationList (GridList)

Avatar with the channel on its corner, unread count, who's handling it (AI agent or a person), and a waiting time that turns red past the SLA.

NKNadia Kamel9:16 PMCan we start with 2 branches and add Alexandria next month?2WhatsAppAmira Hassan
TSTarek Saleh5:19 PMAny update on the terms?1EmailOmar FaroukWaiting 4 h
MFMona Fathy9:07 PMYes please 🙏1InstagramAI agent
HIHany Ibrahim8:44 PMVoicemail: renewal questionsPhoneAmira Hassan

Messages

Built on MessageThread · MessageBubble

Text, photos, files, voice notes, calls, internal notes and events, each marked with the channel it came through. Receipts show sent, delivered and read.

Yesterday

Hi! I saw your ad. Do you support Arabic voice calls?

7:19 PM
AI agent

Hi Nadia 👋 Yes. Our voice agents speak Egyptian, Gulf and Levantine Arabic, and English. How many branches would use it?

7:20 PM
Demo booked for Tuesday, 11 am8:21 PM
Today
Screenshot: calls per day chart

Here's our current call volume

8:34 PM
0:428:35 PM
Amira HassanInternal note8:39 PM

She's ready to sign if onboarding starts this month. Loop in Omar for the contract.

Yesterday
Delta-Freight-feedback.pdf248 KB3:20 PM
Today
Incoming call4:12 · Answered by AI · booked a callback4:19 PM
Amira Hassan

Sent, waiting for delivery

9:19 PM

This one couldn't be delivered

9:19 PMNot delivered

AI handoff

Built on AiAgentBar · useAiHandoff

The AI agent answers until someone takes over. While a person handles it, a timer runs and restarts with every reply; if no one replies before it ends, the AI agent resumes. Set to 1 minute here so you can watch it.

You're handling thisAI agent resumes in 01:00 if no one replies
Now: a person is handling it

Composer

Built on Composer

Reply or leave an internal note. Pick the channel to answer on, add emoji, files and saved replies, or ask AI for a reply. Enter sends; Shift + Enter adds a line. When WhatsApp's 24-hour window has closed, it offers approved templates instead.

Enter to send · Shift + Enter for a new line

The 24-hour WhatsApp window has closed. Send an approved template to restart the conversation.

Contact panel

Built on ContactPanel

Who they are, every channel they use, where they first came from, their deal and an AI summary. Sits beside the thread or opens as a drawer.

Contact header and call

Built on ContactHeader · CallSheet

Message, call, email or book a meeting from the top of a record. Call rings, connects and logs the call.

NK

Nadia Kamel

Head of Operations · Nile Foods

NegotiationEnterprise

Activity timeline

Built on ActivityTimeline

Everything that happened with a contact, newest first: messages, calls, meetings, notes, deal changes and AI actions. Filter by type or add a note.

Today

  1. Message from Nadia9:16 PM
    WhatsApp

    Can we start with 2 branches and add Alexandria next month?

Yesterday

  1. Message from Nadia8:19 PM
    WhatsApp

    3 branches. Cairo, Giza and Alexandria.

  2. AI agent qualified the lead7:19 PM

    Wants Arabic voice for 3 branches. Price-sensitive; asked twice about the Growth plan. Ready to sign if onboarding starts this month.

Saturday, October 31

  1. Outbound call · 6:409:19 PM
    Amira Hassan

    Walked through pricing and onboarding timeline.

Friday, October 30

  1. Deal moved to Negotiation9:19 PM
    Amira Hassan

Wednesday, October 28

  1. Demo · 30 min9:19 PM
    Amira Hassan

    Attendees: 3. Next step: send the proposal.

Tuesday, October 27

  1. Proposal sent9:19 PM
    Amira Hassan · Email

Sunday, October 25

  1. Note9:19 PM
    Omar Farouk

    Decision maker is the CFO. Keep finance in the loop.

Sunday, September 27

  1. Came in from Instagram ad9:19 PM

    Campaign: Ramadan 2026

Roles and permissions

Built on RoleList · PermissionMatrix

What each role can view, create, edit, delete and export, and whose records: their own, their team's or everyone's. Giving any action also gives View. On narrow screens each row becomes a card.

OwnerEverything, including billing and deleting the workspace1 member
AdminEverything except billing2 members
Sales managerTheir team's contacts, deals and reports2 members
Sales agentTheir own contacts, deals and conversations5 members
PermissionsViewCreateEditDeleteExportAccess
CRM
Engagement
—
Workspace
——
——
——
————