Darwin AI — Conversation Detail (Chat View)
URL:
https://app.getdarwin.ai/ou/{orgId}/conversations/{conversationId}Example:/ou/4458/conversations/20448-5511978753355Technology: Real-time WebSocket connection viawss://live.app.getdarwin.ai/socket.io/
1. Page Structure
The conversation detail page has a layout divided into 3 areas:
┌──────────────────────┬──────────────────────────────────────────────┐
│ │ │
│ Left Panel │ Conversation Panel (Right) │
│ (Conversation │ │
│ List) │ ┌────────────────────────────────────────┐ │
│ │ │ Chat Top Bar │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ │ │
│ │ │ Message Area │ │
│ │ │ │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ Action Bar (AI, Reset, etc.) │ │
│ │ ├────────────────────────────────────────┤ │
│ │ │ Input Box + Buttons │ │
│ │ └────────────────────────────────────────┘ │
│ │ │
└──────────────────────┴──────────────────────────────────────────────┘2. Left Panel — Conversation List
Same filter panel as the Conversations page, but with the current conversation highlighted.
2.1 Conversation Item in the List
Each conversation in the list displays:
| Element | Description |
|---|---|
| Checkbox | Select the conversation for bulk actions |
| Avatar | Initial of the contact's name (e.g., "R") + channel icon (WhatsApp, Instagram, etc.) |
| Name | Contact name (heading 6) |
| Preview | Last message of the conversation (heading 6) |
| Time | Time of the last message (e.g., "12:14") |
| Actions | 3-dot button (conversation actions menu) |
3. Right Panel — Conversation Detail
3.1 Chat Top Bar
| Element | Type | Description |
|---|---|---|
| Hide list | Button | Collapses the left panel to expand the chat area |
| Contact avatar | Icon | Initial of the name (e.g., "R") |
| Channel icon | Icon | Shows the origin of the conversation (e.g., WhatsApp) |
| Meta/Facebook icon | Icon | Indicates a Meta channel |
| Contact name | Clickable text | Lead name (e.g., "Raphael") |
| Interaction type | Badge/Tag | "Inbound" (incoming) or "Outbound" (campaign) |
| Assign to | Button | Assign/reassign the conversation to another team member |
| Lead info | Button | Opens a side panel with detailed lead information |
| More options | Button (3 dots) | Menu of additional conversation actions |
4. Message Area
4.1 Message Structure
Each message in the chat displays:
| Element | Description |
|---|---|
| Circular avatar | Initial of the sender (e.g., "R") |
| Message content | Message text |
| Time | Send time (e.g., "12:14") |
4.2 Date Separators
- Dates are grouped with visual separators
- Example: "Today" — groups messages from the current day
5. Conversation Action Bar
Located between the message area and the input:
| Action | Type | Description |
|---|---|---|
| Chat | Tab (selected by default) | Normal conversation mode — "Chat with the lead" |
| Internal note | Tab | "Send a private internal note" — messages visible only to the team |
| Pause AI | Button | Pauses the AI-employee, preventing automatic replies |
| #Reset | Button | Resets the conversation context (e.g., restart the pipeline) |
| Character counter | Indicator | Shows "0" — character count of the message being typed |
6. Message Input Box
6.1 Text Field
| Element | Description |
|---|---|
| Textbox | Typing field with placeholder: "Type a message... use / to open quick replies" |
/ shortcut | Opens the Quick Replies selector |
6.2 Input Action Buttons
| Action | Status | Description |
|---|---|---|
| Attach document | Active | Attaches files/documents to the message |
| Emoji selector | Active | Opens the emoji panel |
| Add location | Active | Sends a geographic location |
| Quick Replies | Active | Opens the predefined replies menu (shortcut: /) |
| Send later | Coming soon (disabled) | Schedule message sending |
| Generate AI reply | Coming soon (disabled) | AI-generated reply suggestion |
6.3 Voice Recording
| Action | Type | Description |
|---|---|---|
| Start recording | Button (microphone) | Records and sends an audio message |
7. Actions Available in the Chat
7.1 Per-Conversation Actions
| Action | How to access |
|---|---|
| Assign/Reassign | "Assign to" button in the top bar |
| View lead information | Lead info button in the top bar |
| Pause/Resume AI | "Pause AI" button in the action bar |
| Reset conversation | "#Reset" button in the action bar |
| More options | 3-dot menu in the top bar |
| Hide list | "Hide list" button to expand the chat |
7.2 Per-Message Actions
| Action | Description |
|---|---|
| Send message | Type + Enter in the text field |
| Send internal note | Select the "Internal note" tab + type |
| Use quick reply | Type / in the text field |
| Attach document | Attachment button (clip) |
| Insert emoji | Emoji button (smiley) |
| Send location | Location button (pin) |
| Record audio | Microphone button |
7.3 Planned Features (Coming Soon)
| Feature | Status |
|---|---|
| Send later | Disabled — message scheduling |
| Generate AI reply | Disabled — automatic reply suggestion |
8. Real-Time Technology
| Component | Description |
|---|---|
| WebSocket | Connection via wss://live.app.getdarwin.ai/socket.io/ (Socket.IO v4) |
| Protocol | EIO=4 (Engine.IO v4) with WebSocket transport |
| Functionality | Real-time messages, status updates, typing indicators |
9. Relationships with Other Modules
| Module | Relationship |
|---|---|
| Contacts | The conversation's lead is a contact in the database |
| Workforce | The worker manages the conversation when the AI is not paused |
| Pipelines | The conversation follows the configured pipeline (reset restarts it) |
| Channels | Conversations come in via WhatsApp, Instagram, etc. |
| Quick Replies | Configured in Settings, used with / |
| Campaigns | Outbound conversations originate from campaigns |