View source for Support/Live Chat/UI

This page offers ideas and suggestions for how UI could be designed to meet our [[Support/Live Chat/Requirements|requirements]].  This is a work in progress.

==Live Chat dashboard==
The dashboard is the hub for all things chat.

'''Required'''
*If the queue is closed
**A short paragraph explaining what things can be done now.
*If the queue is open
**List current chats in the queue.
***Users in the Live Chat helpers group must be able to pick one of these to accept.  (Defined in permissions section of requirements page)
**If the helper doesn't have permission to accept chats yet, show a short paragraph explaining this.
*List active chats by all agents, including the question details.
**Users with room monitoring permission are able to join ''and'' monitor any of these chats.  (Defined in permissions section of requirements page)
*Show the usernames of all active agents

'''Optional'''
*Show how many chats we've answered today
*Chart showing which issues/tags are common today
*Karma/per-helper data (leaderboard)
*Satisfied user counter (based on exit polling)

==Activity bar==
The activity bar is the main UI element of live chat.  It is the selector for current chats and the main status indicator for chat agents.  Features it will implement:
*Button for showing/hiding notifications
*Button to return to chat dashboard
*Tab for each open chat
*Color changes to indicate status
**Notification button turns red when there are unseen notifications
**Dashboard button turns yellow when new chats enter queue, red if chats are about ready to time out of the queue
**Individual chat tabs given a "selected" look when selected
**Individual chat tabs turn yellow when there's activity
**Individual chat tabs turn red when there's "urgent" activity.  (We need to define what's urgent)
**The entire bar should change color when chat is open vs. closed vs. full.

Example of an activity bar overlaying a SUMO page, with notification and chat dialogs pinned to it:
[[File:20110421-detailchatbar.png]]

==Chat window/overlay/tab==
This is a simple chat interface for communicating in a multi-user chatroom.  Features it will implement:
*Question details, with long and less important fields collapsed
**Question title
**System details (OS and Firefox version)
**Time waiting in queue
**Other Questions fields (when did it start, how often does it happen, etc)
*Canned responses
*An ability to type messages to the user
*An ability to either type or choose commands
**/invite username (invites the username to this chat)
**/kick username (boots the user out of the room, room monitors only)
**/tag tag1,tag2 (P2 requirement) (see separate chat tag PRD at [[Support/Live Chat]])
*Handles for resizing, dragging, and pinning/unpinning (if used as overlay)
*Text formatting buttons like bold and italic (optional - not part of our PRD)
*A button to view extended question info, such as the full list of plugins
*Button somewhere in the chat or on the tab for ending the chat session
**A warning dialog is needed before an active chat is ended
*Button for following up and/or transferring to forum (P3 requirement)
*Button/link for viewing previous chats by this user (P3 requirement)
**Should be positioned alongside collapsed question details if implemented

[[File:201104-Detailchatwindow.png]]

==Notifications==
A simple notification dialog to alert the agent on:
*Chat offers (if they exist - they aren't part of our PRD)
*Chat invitations
*Private messages (if they exist - they aren't part of our PRD)
*User chats that seem to be ignored (optional, needs definition)

Optionally, animations and sound could be used to make them even more effective. 


==Integration with kitsune questions==
TBD.  It might be good if a user could seamlessly post his/her chat session into the forum to get more eyeballs.

==Showing live chat on specific articles==
TBD




==Layout possibilities==
*Bar across bottom
*Sidebar
*Popup window