DocHub
DocHub/WhatsApp CRM/Frontend/Features Overview
Complete user-facing feature documentation — messaging, CRM, AI auto-replies, media, photo library

WhatsApp Management System

A personal WhatsApp management platform that connects to your WhatsApp account and provides enhanced messaging, contact management, AI-powered auto-replies, and full media archival — all accessible through a web browser.

Connecting to WhatsApp

The system connects to your WhatsApp account the same way WhatsApp Web does — by scanning a QR code from your phone. Once connected, the session persists across restarts so you don’t need to re-scan.

If you switch phones or SIM cards, the system detects the mismatch and asks you to confirm before proceeding. You can disconnect at any time, or fully wipe all data through a multi-step confirmation process.

Your connection status is always visible — disconnected, connecting, or ready — along with the phone number currently linked.

Layout — Three-Column CRM Interface

The interface uses a persistent three-column layout optimized for CRM work:

Column Width Content
Left 300px Contact list with search, filter chips, edge-to-edge avatars
Center Flexible Active conversation with messages
Right 440px CRM sidebar — always visible for the selected contact

Typography: IBM Plex Sans (body text) and IBM Plex Mono (labels, timestamps, tags, status indicators). Dark theme throughout.

Top Bar: Brand label “IPNOELP CRM”, connection status pill (READY/CONNECTING/OFFLINE), phone number, chat count, AI token counter (cumulative since startup), away mode indicator, and navigation buttons (Chats, Media, Library, Actions, Map, Personalities, AI Settings, Settings).

Contact List (Left Column)

Contacts appear in a scrollable list with prominent green scrollbar. Each contact shows:

  • Edge-to-edge square avatar — flush left, no borders or gaps, maximum size for recognition. Clicking opens the Avatar Picker to choose a custom photo.
  • Name and message preview — last message shown with “You:” prefix for outgoing
  • Tags — colored chips (Warm, New, Cold) sourced from CRM data. Reminder labels (e.g. “7 days”, “3 months”) display in purple. The “action” tag is not shown as text — represented by the bell icon instead.
  • Timestamp — when the last message was sent/received
  • Bell icon — amber bell appears when the contact has pending actions/reminders
  • Personality emoji — appears next to the bell icon when AI auto-reply is active (assigned and not paused)
  • Unread dot — green indicator for unread messages

Filter chips at the top: All, Warm, Action, New, Archived — filter the contact list by tag or reminder status. The Archived chip fetches contacts from WhatsApp’s archived section via the headless browser. Right-click a contact to pin/unpin, manage labels, mute, archive, or delete.

Chat & Messaging (Center Column)

The conversation area has a minimal header with an “Import Chat” button and zoom controls. Contact details are shown in the CRM panel (right column) instead of duplicating them here.

Action banner — when a contact has pending reminders/actions, an amber banner appears below the header showing the first action with a “DONE” button to complete it.

Within a conversation you can:

  • Send text messages with Enter-to-send (Shift+Enter for new lines)
  • Send photos, videos, and documents as attachments
  • Send from Photo Library — pick a saved photo from your personal library and send it to the current chat
  • Reply to a specific message with a quoted preview
  • React with emojis
  • Forward messages to other contacts
  • Star messages to mark them as important
  • Delete messages (removes from WhatsApp AND from local database — no ghost messages)
  • Download any media that’s been shared
  • Save to Library — right-click any image message to save it to your Photo Library for reuse

Inline images — media messages display inline. Images with synced thumbnails show from local files. Unsynced images are fetched on-demand from WhatsApp via the backend.

Every message — incoming and outgoing — is automatically saved to the database. This means your full conversation history is preserved and searchable even when WhatsApp itself might not retain it.

AI Auto-Replies

The system includes a built-in AI assistant that can automatically reply to incoming messages on your behalf. This is fully configurable and works with multiple AI providers (Mistral, OpenAI, or Groq).

Personalities

You create personalities — each one is a custom AI character with its own name, emoji, and system prompt that defines how it should behave. For example:

  • A friendly business assistant that handles scheduling inquiries
  • A casual personality for friends that matches your texting style
  • A professional tone for work contacts

You can create as many as you need and set one as the default.

Assigning to Contacts

Each contact can be assigned a specific personality. For each assignment you choose:

  • Instant mode — replies immediately when a message arrives
  • Delayed mode — waits a set amount of time (30 seconds, 1 minute, 5 minutes, etc.) before replying, making responses feel more natural
  • Paused — temporarily stops auto-replies without removing the assignment

You can also add custom traits and facts about each contact (e.g., “prefers Spanish,” “lives in Honduras,” “we met at the conference last month”). The AI uses these as context when generating responses.

Monitoring

An auto-reply log shows every AI-generated response: what message came in, what was sent back, which personality was used, how long it took, and how many tokens it consumed.

CRM Panel (Right Column)

The CRM panel is a persistent sidebar that shows full contact details whenever a contact is selected. No more overlays or pop-ups — CRM data is always visible. Content is organized into tabs for easy navigation.

Contact Hero

  • Large avatar (click to open lightbox overlay, not a new tab)
  • Name, pushname, phone number
  • Colored tag chips
  • Personality emoji + name (updates live when changed)
  • Bell icon (amber when actions pending, muted when none)
  • City/location widget with green “Add location” button

Tab Bar — Four Tabs

Notes (default tab)

  • AI conversation summary button at the top — click “Summarise conversation…” to generate an AI summary that includes context from your notes
  • Summary shows token cost and response time
  • “Copy to notes” prepends the summary with a date stamp to your notes
  • “Refresh” to regenerate, “Dismiss” to hide
  • Large scrollable notes textarea below (min-h 320px) with auto-save

Photos

  • “Browse All Media” button at top
  • 4-column thumbnail grid of the contact’s synced photos
  • Click any photo to open in Media Browser

Contact

  • Organized into collapsible twisties (sections):
    • Details (open by default) — name, company, email, location met, social handles (Instagram, TikTok, Telegram)
    • Dates (closed) — birthday, anniversary, contact cycle
    • Detail Tokens (closed) — AI-extracted personal details (Pets, Kids, Work, Hobbies, etc.)
    • Tags (closed) — tag management with badge count
  • All fields auto-save with debounced updates

AI

  • Analyse with AI — AI analysis of conversation to extract contact details, with “Accept All” to save suggestions
  • Personality Picker — assign/change/pause AI auto-reply personality for this contact
  • Reminders — create, view, complete actions/reminders with inline add form

Contact Management

Every WhatsApp contact is stored locally with both their WhatsApp information (push name, phone number, business status) and your own custom fields:

  • Full name (separate from whatever they set in WhatsApp)
  • Company
  • Email
  • Notes (free-form text)
  • Where you met
  • Tags (for categorization and filtering)
  • Social media handles — Instagram, TikTok, Telegram

Avatars

Each contact shows their WhatsApp profile picture by default. You can also set a custom avatar by choosing from photos they’ve sent you in the conversation — useful when someone doesn’t have a profile picture or you prefer a different image. Click the avatar in the contact list or the CRM panel to open the Avatar Picker.

Avatars are cached locally so they’re always available, even when offline.

Search & Filter

The contact list is searchable by name. Filter chips (All, Warm, Action, New) filter contacts by tag or pending reminder status.

Import & Export

  • Import contacts from a VCF file (vCard format). The system previews matches against your existing WhatsApp contacts using fuzzy phone number matching before importing.
  • Export all contacts as a VCF file, including the custom fields you’ve added.

Media Management

All photos, videos, documents, and audio shared in your conversations are organized and stored locally.

Browsing

The Media Browser uses the same layout pattern as the main chat interface — a left sidebar listing contacts with their avatars, names, phone numbers, and file counts, plus a main content area showing the selected contact’s media.

The sidebar mirrors the main ChatList:

  • Square avatars — 60x60 edge-to-edge contact photos with initial-letter fallback
  • Contact names — resolved from the database, not just folder names
  • Real phone numbers — pulled from the contacts database, correctly showing actual numbers even for contacts with internal WhatsApp IDs
  • Zoom controls — +/- buttons that scale the contact list and expand the sidebar width, with settings persisted across sessions
  • Category breakdown — compact counts (3P, 2V, 1D, 1A) showing photos, videos, docs, and audio at a glance
  • Search — filters by name or phone number

Media is organized by contact and categorized into tabs: Photos, Videos, Documents, Audio, and Links. Each contact’s media folder shows everything that’s been exchanged with them.

Links shared in messages are automatically extracted and listed separately, with the surrounding message context preserved.

Thumbnails

The system automatically generates thumbnails for photos and videos at two sizes — standard (200px) and micro (80px) — for fast loading in the gallery view.

Storage Control

You can manage how much space media takes up:

  • Choose whether to keep originals, thumbnails only, or micro thumbnails
  • View storage statistics per conversation
  • Delete individual files or move them between storage tiers
  • Configure whether outgoing media (what you send) is also stored

Photo Library

A personal photo collection for images you send frequently. Upload photos or save them from conversations, then send them to any chat with one click.

Adding Photos

  • Upload — click the upload button on the Library page to add any image from your device
  • Save from conversation — right-click any image message and choose “Save to Library”
  • Duplicate detection — MD5 hashing prevents the same image from being stored twice

Sending

  • From the Library page — click Send on any photo, pick a chat from the search-enabled contact picker
  • From the Message Composer — click the Library icon next to the attachment button, select a photo, and it’s sent to the current chat
  • Every send is tracked so you know where each photo has been sent

Purge

The purge feature lets you remove a photo from every conversation it was sent to:

  1. Click Purge on a library photo
  2. Preview shows which chats and how many messages will be affected
  3. Confirm to delete from all conversations — uses “delete for me” so recipients keep their copy
  4. Removes from both the WhatsApp conversation and the local database

Storage

Photos and thumbnails are stored locally in the _library/ media folder. Each photo gets an auto-generated 200px thumbnail for the grid view.

Reminder Labels

Predefined labels that automatically create reminders when applied to contacts. Instead of manually creating a reminder, just tag a contact with “7 days” and the system creates a follow-up reminder due in 7 days.

How It Works

  1. Define labels in Settings → Labels (e.g. “1 day”, “7 days”, “14 days”, “3 months”)
  2. Right-click a contact → Labels → click a purple reminder label button
  3. The tag is applied AND a reminder is automatically created with the correct due date
  4. When the reminder is due, it appears in your Actions list
  5. The purple tag stays on the contact as a visual indicator in the chat list

Managing Labels

In the Labels tab of Settings:

  • Add new labels with a name and number of days
  • Edit existing labels — click the pencil icon to change the name or days
  • Delete labels with a cleanup dialog that offers to:
    • Remove the tag from all contacts that have it
    • Delete pending reminders that were created by the label

Visual Styling

Reminder label tags display with distinctive purple styling (bg-purple-500/15 text-purple-400) in both the chat list and the tag editor, making them easy to distinguish from regular tags like Warm, New, Cold, and Action.

Background Backfill

When you first connect — or whenever you want to catch up on history — the system runs an automatic background process that works through your recent contacts and:

  1. Resolves phone numbers for contacts that only have opaque WhatsApp IDs
  2. Fetches contact details — names, business status, and other metadata
  3. Archives messages from the past N days (configurable, default 28 days)
  4. Downloads media — photos, videos, and documents from recent conversations
  5. Generates thumbnails for all downloaded images
  6. Caches profile pictures as avatars

This runs automatically during idle time (after 5 seconds of inactivity) so it never interferes with active use. You can configure how many contacts to process (default 25) and how far back to go. Progress is shown in real-time — which contact is being processed, which step, and overall completion.

Real-Time Updates

The entire interface updates in real-time through a WebSocket connection. When a message arrives, it appears instantly. Delivery receipts (sent, delivered, read) update live. Connection status changes are reflected immediately. The backfill progress bar advances as contacts are processed.

There’s no need to refresh the page — everything stays current automatically.

Settings

Five tabs covering all system configuration:

General

  • View connection status and linked phone number
  • Configure backfill parameters (days of history, number of contacts)
  • Disconnect or destroy all data (multi-step confirmation)

Media Storage

  • Toggle outgoing media storage
  • Configure thumbnail generation quality
  • View total storage usage across all contacts

Contacts

  • Import contacts from VCF files with fuzzy phone number matching
  • Export all contacts as VCF or CSV

CRM

  • Contact Cycles — default cycle length and warning window (days before overdue)
  • Date Alerts — birthday and anniversary lookahead windows
  • Auto Re-engagement — enable AI-powered messages to overdue contacts, configure personality, delay hours

Labels

  • Manage reminder labels (predefined tags that auto-create reminders)
  • Add, edit (inline), and delete labels with configurable day counts
  • Delete with cleanup — option to remove tags from contacts and delete associated reminders

AI Configuration (separate page)

  • Select AI provider (Mistral, OpenAI, Groq)
  • Set API key, model, and generation parameters (temperature, max tokens)
  • Quick-switch presets for common configurations
  • Test your setup with a sample message

How It All Fits Together

When a message comes in, several things happen simultaneously:

  1. The message appears in your chat window in real-time
  2. It’s archived to the database for permanent storage
  3. If the sender has media attached, it’s downloaded and stored locally
  4. The conversation transcript is updated
  5. If the contact has an AI personality assigned, the auto-reply system evaluates the message and sends a response (immediately or after a delay)

When you’re not actively chatting, the backfill system quietly works in the background — downloading history, generating thumbnails, caching avatars, and resolving contact details.

All data lives on your server. Nothing is stored in the cloud. Your WhatsApp messages, media, contacts, and AI configurations are entirely under your control.