---
# System prepended metadata

title: Timeline V2

---

# Timeline V2

Timeline V2 implements new designs for the patient timeline and inbox. This aims to neaten the timeline, replay bars and make it easier to determine where the messages came from (whatsapp, automations etc).

These are mainly frontend UI changes. 

These changes need to be behind the feature flag `timeline-v2`

### Update Avatars with icons

The Avatar next to a message needs to be update to handle 2 icons displaying what service was used to send/receive the message. This displays on both incoming and outgoing messages. 

For WhatsApp Messages a green whatsapp logo/icon will be display bottom right over the avatar. 
For emails, envolope icon displayed. 
For txt messages, sms chat bubble. 

A tooltip will open displaying the full type. E.g. WhatApp icon hover shows: `via WhatsApp`

For automations, another icon is displayed. The icon is display on the bottom left hand side of avatar. The automations icon wont change. The icon should be the LeadFlo Cog wheel. 

Example:  ![avatar](https://hackmd.io/_uploads/SkHfeiBC6.png)

A tooltip for automations icon will need to be shown on hover: 
`Sent by a Leadflo automation`

The Avatar Message type icon will also display in the Inbox Avatar view.  Exlude automations icon.

![Frame 35](https://hackmd.io/_uploads/SyUDm3BA6.png)



### Update Incomming Messaage style

Small change to incoming message styles. Background colour is becoming gray:100. 


### Refresh, Mark As Read toggle, and Star Conversation toggle

These 3 buttons have been redeisgned and the fixed top bar no longer is needed. 
These buttons will need to be floating at the top of the timeline. 
Button background is changing to light blue.

![refresh](https://hackmd.io/_uploads/BJG8sjH0p.png)


### Retry and Failed - Outgoing

Retry is being moved out of the time element. 
Retry should be moved to the left (where the current message type is displayed). The time element is staying on the right. 

There will be 2 new icons.

One Icon will display next the the failed message with a tooltip saying why the message failed (or a generic `Error Sending Message`)

![message-item](https://hackmd.io/_uploads/rJ0D6jBR6.png)

The 2nd icon wil be placed next to the retry sending text. This icon will bne animated to spin when clicked and message is retried. 

After 3 failed retried, dont allow another retry for a set amount of time (30 seconds) and ensure a sentry log has been sent. Sentry should auto pickup 500 errors

### Comm Status Element - Ticks

The Status indicator on messages are being updated to display ticks for message/comm status.
We are following WhatsApp message state but ticks will be aplied to all message types. Display only up to whatever that channel is capable of. 
e.g. Emails will only ever show sent status. 

Update Status indicator to use ticks.

The ticks states are: 
![How-to-check-read-receipts-WhatsApp-Help-Center (1)](https://hackmd.io/_uploads/BJrNK3H0T.png)







