IM is the chat flow of application.
Mockup of IM screen colorized by individual components:
Component for the logged in User profile and settings.
Mockup of user menu component (#6) :
-
Avatar
-
Name
-
Karma and Karma Rank (see Karma)
- Displays how much Karma this User has and their Karma Rank- clicking opens popup with karma stats and a link to the Karma help page.
-
Trophies (see Trophies)
- Icon followed by the number of Trophies this User has- clicking opens popup with trophies stats and a linking to the Trophies help page
-
Badges (see Badges)
- Icon followed by the number of Badges this User has- clicking opens popup with trophies stats and a linking to the Badges help page
-
Reactions (see Reactions) to this User
- Icon followed by the number of Reactions this User has- clicking opens popup with trophies stats and a linking to the Reactions help page
-
Options
Drop down menu mockup:
a) Link to the Profile page
b) Link to the Settings page
c) Link to the Help page
d) Link to the Backer help page
e) Logout
This component act only on the Contact List, not side wide.
Mockup of filters component:
-
Search box
-
Options
Drop down menu mockup:
a) Display all contacts
b) Display only contacts with archived chats
c) Display only contacts with unread messages
This component shows all Users previously chatted with.
-
Contacts are ordered by unread, date
-
Archived contacts are not displayed unless the relevant filter option is chosen
-
Chats with new unread messages rise to the top and display notifications
-
Chat notifications are not displayed for muted contacts, nor they are suggested for chatting
-
Infinite scrolling for pagination (#63)
Mockup of contact list component (#9):
-
Contact avatar
-
Contact name
-
Contact headline or last message message sent (#44) (see Settings)
-
Number of unread messages (if contact is not muted)
-
Icon if contact is archived or muted
-
Contact options
Drop down menu mockup:
a) Archive this chat
b) Mute or unmute this contact
c) Mark this chat as read or unread
d) Block this contact (#61)
-
Online status (see User)
-
Private notes left for this contact (see User)
See (seedling)[github.com/easafe/seedling]
A suggestion is a new (or from the contact list) User picked by the application for the current User to chat with.
-
Users can skip ahead suggestions and also see the previous ones again
-
Muted or ignored Users do not appear as suggestions anymore
-
Suggestion algorithm for new Users:
TBD
-
Suggestion algorithm for Users already in the contact list:
TBD
Contact list suggestion mockup:
- Appears as a dialogue on the contact list entry
a) Ignore this suggestion and jump to next suggestion
b) Chat with this contact
Suggestion component mockup (#10):
- When an User first sends a messages to a suggestion, or clicks on the contact list to chat up a contact, this component shrinks:
-
Skip to previous and next suggestions
-
Suggestion avatar
-
Suggestion name
-
Suggestion headline
-
Suggestion age, gender, country, langagues
-
Suggestion online status (see User), Karma and Karma Rank (see Karma), trophies (see Trophies), badges (see Badges) and reactions (see Reactions)
-
Suggestion list of tags
-
privates notes for this suggestion
-
Options
Drop down menu mockup:
a) Edit private notes
b) React to this User (see Reactions)
c) Mute/Unmute for contacts, ignore for suggestions
d) Block this User (see User)
e) Report this User (TBD)
f) Visible only when the component is shrunk. Displays more information about this user (their description and TBD)
Chat history is the collections of messages between Users on a given chat. A message is each individual entry in a chat history. Messages have the following properties:
-
Content
- Text (markdown able), image or audio
-
Message Date
- Datetime (in the format of elapsed time,e.g., 10 minutes ago, yesterday etc) of when the message was sent
-
Message status
- Sent (server received message), delivered (message sent to User), read (messaged visualized by User)
-
Reactions (se Reactions)
Mockup of chat history component (#11):
-
The User being chatted with's description acts as the first message ever in a chat history
-
Chat flows downward, i.e. last message is at the bottom
-
Infinite scroll (upwards) for pagination
-
User being chatted with's avatar
-
Logged in User's avatar
-
Fist message
-
Options for incoming messages
Drop down menu mockup:
a) Quote this message (markdown syntax)
b) React to this message (see Reactions)
c) See message date and message status
-
Second Message
-
Options for outgoing messages
Mockup for drop down menu:
a) Quote this message (markdown syntax)
b) Edit this message
c) Delete this message
d) See message date and message status
Component to enter messages, and display Typing Status (notification about chat partner being currently typing).
Mockup of chat input component:
-
Emojis
-
Text input
-
Markdown able (#12)
-
Image/video able (both inline markdown and drag drop)
-
-
Chat input options
Drop down menu mockup:
a) Whether to send messages with enter or pressing a button (#12)
b) Image/video upload
c) Upload an audio message
d) Upload a video message
e) Request an audio chat
f) Request a video chat
-
Typing Status
