Twinlix Admin Panel

What is it?

Twinlix Admin Panel is a web application where businesses manage their AI-powered voice and chat agents. It provides a complete interface for configuring agents, monitoring conversations, managing the knowledge base, connecting communication channels, and handling billing — all from a single dashboard.

Live: app.twinlix.com

---

Key Features

1. Guided Setup Wizard

A 5-step onboarding flow that takes a new business from zero to a fully operational AI assistant:

Step 1 — Knowledge Base Upload documents (PDF, DOC, TXT), add web links, or write text entries that the AI agent will use to answer customer questions. Drag-and-drop interface with real-time upload progress. Filter and manage documents by type.

Step 2 — Agent Personality Configure how the assistant presents itself:

• Name, role description, and personality ("who are you")
• Welcome greetings — main greeting plus a dynamic set of variations
• Sign-off messages — how the agent ends conversations
• Starter questions — suggested questions shown to customers at the start
• FAQ — curated question-answer pairs for precise responses

Each section is a collapsible block with inline editing. Dynamic lists support add, edit, reorder, and delete.

Step 3 — Fine-Tuning Refine how the agent behaves:

• General information — business context the agent should know
• Language instructions — which languages to support and how
• Response rules — clarification strategy, instruction delivery style, response length, escalation policy

Step 4 — Testing Sandbox A live chat interface where the business owner can talk to their agent in real time. Test conversations before going live, adjust settings on the fly, and verify the agent uses the knowledge base correctly.

Step 5 — Release & Integrations Connect the agent to communication channels:

• Web chat widget — get an embed code for any website
• Voice — assign a phone number for inbound/outbound calls
• Instagram, Messenger, WhatsApp, Telegram — one-click OAuth connection

View channel status, get embed codes, and manage active integrations.

2. Conversation Management

A centralized inbox for all customer interactions across every connected channel.

• Conversation list — see all active dialogues with the latest message preview, timestamp, and channel icon
• Search — find conversations by content with debounced real-time search
• Filters — switch between All, New, Important, and Archived views
• Labels — mark conversations as important or archived; disable AI for specific dialogues to handle manually
• Bulk actions — select and delete multiple conversations at once
• Full conversation view — read the complete message history with direction indicators (customer vs. agent)
• Direct messaging — send messages to customers directly from the admin panel
• Responsive — optimized layout for both desktop (split-panel) and mobile (full-screen) views

3. Knowledge Base Library

A dedicated section for managing everything the AI agent knows, organized into four tabs:

Tab	Content	Actions
Text	Manually authored knowledge articles	Create, edit, delete
Links	Web pages scraped and indexed	Add URL, re-scrape, edit, delete
Documents	Uploaded files (PDF, DOC, TXT)	Upload, view status, enable/disable, delete
Instructions	Setup guides and rules	Create, edit, delete

Each tab supports search, pagination, and bulk operations. A side panel lets you test the agent against the current knowledge base without leaving the page.

4. Dashboard

The home screen provides an at-a-glance overview:

• Account information — business name, user profile, avatar
• Current usage — real-time metrics of consumed vs. available quota (call minutes, messages, storage, etc.)
• Latest conversations — quick access to recent customer interactions

5. Settings

A tabbed settings page covering four areas:

General

• Agent appearance — upload bot avatar and company logo
• Branding customization
• Usage and security settings
• Messaging preferences

Integrations

• Connected channels overview with status indicators (active, paused, failed)
• Channel-specific configuration (widget theme, position, greeting)
• Connect/disconnect channels
• Widget embed code generation

Billing

• Current subscription plan and status (trial, active, past due, canceled)
• Invoice history with PDF download
• Plan comparison and upgrade/downgrade flow

Other

• Account deletion
• Password change
• Additional settings

6. Plan Management

A dedicated page for viewing and comparing pricing tiers:

• Side-by-side plan comparison with feature breakdowns
• Current plan highlighted with usage details
• Quota limits displayed per metric (minutes, messages, channels, storage, KB characters)
• One-click upgrade or downgrade

---

User Experience

Authentication

• Sign up — email + password + business name; immediately provisions a workspace with a default AI agent
• Sign in — email + password with persistent session (JWT tokens stored locally)
• Password reset — email-based verification code flow
• Social login — Google and Facebook buttons (planned)

Navigation

The admin panel uses a consistent layout:

• Header — logo, navigation links (Home, Wizard steps, Chats, Library, Settings), language switcher, mobile menu
• Responsive design — adapts to desktop, tablet, and mobile screens with breakpoints at 900px, 760px, and 640px
• Tab-based sections — Library and Settings use URL query parameters for tab navigation, enabling deep linking

Notifications

• Toast messages — success and error notifications appear at the bottom-right with 5-second auto-dismiss
• Inline validation — form errors shown next to the relevant fields
• Status indicators — channel status badges (active, paused, provisioning failed) and document processing states

Modals

Contextual dialogs for focused tasks:

• File upload with drag-and-drop
• Web link addition and editing
• Text content creation
• Delete confirmation
• Widget embed code display
• Full-screen chat testing

---

Technical Highlights

Aspect	Details
Framework	React 19 with TypeScript
Build tool	Vite 7 (fast dev server, optimized production builds)
UI library	Ant Design 5 (enterprise-grade components)
Styling	styled-components (CSS-in-JS, scoped styles)
Routing	React Router v7 (client-side navigation)
API communication	Axios with automatic token injection and error handling
Responsive	Mobile-first with 5 breakpoints
Modals	@ebay/nice-modal-react (declarative, promise-based)

---

Application Map

app.twinlix.com
│
├── Auth
│   ├── /signin ............... Login
│   ├── /signup ............... Registration
│   └── /forgot-password ...... Password reset
│
├── Dashboard
│   └── / ..................... Home (usage, chats, account info)
│
├── Setup Wizard
│   ├── /step/1 ............... Knowledge base upload
│   ├── /step/2 ............... Personality & messaging
│   ├── /step/3 ............... Fine-tuning
│   ├── /step/4 ............... Testing sandbox
│   └── /step/5 ............... Release & integrations
│
├── Operations
│   ├── /chats ................ Conversation inbox
│   ├── /chat/:id ............. Single conversation view
│   └── /library .............. Knowledge base management
│
└── Settings
    ├── /setup ................ General, integrations, billing, other
    └── /change-plan .......... Plan comparison & upgrade

---

Summary

Metric	Value
Pages	17 routes
Setup steps	5-step wizard
Knowledge base types	4 (text, links, documents, instructions)
Supported channels	7 (voice, web voice, web chat, Instagram, Messenger, WhatsApp, Telegram)
Conversation filters	4 (all, new, important, archived)
Settings sections	4 tabs (general, integrations, billing, other)
Responsive breakpoints	5

Twinlix Admin Panel gives businesses a single place to build, test, deploy, and monitor their AI assistant — from uploading the first document to managing thousands of customer conversations across every major communication platform.