Tabbed CRM Panel
The CRM panel (right column, 440px) was redesigned from a long vertical scroll of collapsible sections into an organized tabbed layout. Content is grouped into four tabs: Notes, Photos, Contact, and AI.
Layout
The hero section remains at the top showing avatar, name, phone, tags, personality, and bell icon. Below it sits a tab bar with four tabs, and below that the scrollable tab content area.
Tab Structure
Notes Tab (Default)
The default tab when selecting a contact. Contains two sections:
AI Summarise at the top. Click “Summarise conversation…” to generate an AI-powered conversation summary. The summary includes context from the notes field. The backend whereWereWe endpoint accepts an optional notes parameter that gets included in the AI system prompt. After generation, summary displayed in a purple card with token count and response time. “Copy to notes” prepends a dated summary to the notes textarea. “Refresh” re-runs the summary; “Dismiss” hides it.
Notes textarea below. Large scrollable textarea (min-h 320px) for free-form facts about the contact. Auto-saves with debounced updates (1.5 second delay). Saving indicator shown in header.
Photos Tab
- “Browse All Media” button at top navigates to Media Browser filtered to this contact
- 4-column thumbnail grid of synced photos
- Click any photo to open Media Browser
Contact Tab
The old massive edit form split into collapsible “Twisty” sections:
| Section | Default | Fields |
|---|---|---|
| Details | Open | Name, company, email, location met, social handles |
| Dates | Closed | Birthday, anniversary, contact cycle days |
| Detail Tokens | Closed | AI-extracted personal details (Pets, Kids, Work, etc.) |
| Tags | Closed | Tag management with badge showing count |
All fields auto-save via the existing ContactEditForm component.
AI Tab
Combines all AI and action features:
- AnalysePanel – AI analysis of conversation to extract contact details with “Accept All” to save suggestions
- PersonalityPicker – Assign/change/pause AI auto-reply personality. Triggers live refresh of chat list personality emoji via onChanged callback
- Reminders – Create, view, complete actions/reminders with inline add form
Key Files
| File | Changes |
|---|---|
| CrmPanel.tsx | Complete rewrite – tabbed layout, AI summary, notes, avatar lightbox |
| ContactEditForm.tsx | Removed reminders, AnalysePanel, notes. Added Twisty collapsibles |
| PersonalityPicker.tsx | Added onChanged callback |
| ChatListItem.tsx | Bell icons, icon sizing, personality on same line |
| ConversationView.tsx | Removed name/phone/personality/Actions/Sync from header |
| ChatList.tsx | assignmentRefreshKey for live personality updates |
| ChatPage.tsx | assignmentRefreshKey state, onPersonalityChanged prop |
| TopBar.tsx | Token counter, brand rename to IPNOELP CRM |
Status
Complete and deployed.