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.