twenty
twenty copied to clipboard
Display the thread content in the UI
Scope & Context
We have a list of threads in the UI. We want to display the following component after clicking on one thread.
https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=16042%3A37861&mode=dev
Technical inputs
Create a ThreadActionBar component
Create a ThreadMembers component which should take as props:
- threadMembers: {avatarUrl : string, displayName: string, workspaceMemberId: string}
The ThreadMembers component should use the Dropdown component.
When clicking on Add Participant we should display a RelationPicker component.
Create a ThreadHeader component
Props:
- subject: string
- lastMessageSentAt: Date
Create a ThreadMessage component
Props:
- from: {avatarUrl: string, displayName: string, workspaceMemberId?: string, personId?: string}
- to: {avatarUrl: string, displayName: string, workspaceMemberId?: string, personId?: string}[]
- sentAt: Date
- body: string
Create a ThreadBottomBar component
For now, the buttons should do nothing.
Create a Thread component which contains ThreadActionBar, ThreadHeader, the mapping of messages to ThreadMessage and the ThreadBottomBar
### Tasks
- [ ] https://github.com/twentyhq/twenty/issues/3290
- [ ] https://github.com/twentyhq/twenty/issues/3291
- [ ] https://github.com/twentyhq/twenty/issues/3292
- [ ] https://github.com/twentyhq/twenty/issues/3293
- [ ] https://github.com/twentyhq/twenty/issues/3294
Hi @bosiraphael, I'm interested in working on this.
Could you guide me how can email threads be shown on UI on local? Currently, it's blank on my side.
Have already pulled latest code to the date.
The backend for the emails is not fully ready yet. But you can add seed or mock data for now. The messages data is contained in 4 different tables: messageChannel, messageThread, message & messageRecipient. I will edit the ticket to add the props that the different components should take. Let me know if you need more details on this issue.
I will split this ticket in multiple tickets.