Definitions

Chat Widget: A chat icon that expands into a chat window and allows visitors of a website to chat with the hosts.
Host: entity that is hosting the chat widget and has access to the configuration of the chat backend and the chat dashboard.
Host user: a user that is a member of the Host entity.
Visitor: a user that established a conexion to the host and wants to chat.
Identified Visitor: a visitor that has given a form of contact (Email | Phone)

Chat Widget Components

The chat widget is composed of a toogle button to open and close the chat window The chat window has 3 main seccions. chat header, chat content, chat footer

Chat Header

The chat header the component with the information about the hosts and their status. It's devided into: Title, host status, host team, a close button

Chat Content

The chat Content is where all the content of the conversation is listed in form of message bubbles, image thumbnails The message bubbles of the visitor show up on the right, and the message bubbles of the host show up on the left.

Chat Footer

The chat footer is where the message composing, editing and sending takes place. It is composed of a reactions pane that is divided into two panes smileys pane and gifs pane and a message box where the visitors compose their message before sending. There are three buttons, gif button, smiley button and upload button.

Reactions Pane

The reactions pane has two tabs where the visitor can choose either a smiley or an animated gif.

Payloads formats

// Message Data 
{
    "id": "29864470-b345-11e7-8f1a-0800200c9a66",
    "chat_id": "3313f230-b345-11e7-8f1a-0800200c9a66",
    "parts": [{
            "mime_type": "text/plain",
            "body": "This is my very simple text message."
        }, {
            "mime_type": "text/html",
            "body": "<h1>Beautifull portrait</h1>"
        }, {
            "mime_type": "image/png",
            "content": {
                "url": "http://imgsv.imaging.nikon.com/lineup/dslr/d600/img/sample01/img_02_l.jpg",
                "size": 172114124,
                "expiration": "2017-09-09T04:44:47+00:00"
            },
            {
                "mime_type": "text/html",
                "body": "<h1>The fisherman</h1>"
            },
            {
                "mime_type": "image/png",
                "content": {
                    "url": "http://imgsv.imaging.nikon.com/lineup/dslr/d600/img/sample01/img_03_l.jpg",
                    "size": 172114124,
                    "expiration": "2014-09-09T04:44:47+00:00"
                }
            }
        ],
        "user_id": "1234", // [a user Id | "host" | "system"]
        "inserted_at": "2017-09-09T04:44:47+00:00",
        "updated_at": "2017-09-19T14:44:47+00:00"
    }
}
// Host data
{
    "title": "Welcome aboard!",
    "host_status": "We Usually respond in 3 minutes"
}

// User data


"user_data": [{
        "user_id": "c3356060-b345-11e7-8f1a-0800200c9a66",
        "avatar": "http://img.oskaras.com/2012/04/trocar_foto_avatar_gravatar.png",
        "display_name": "One Two Three Four",
        "status": "idle",
        "user_type": "visitor"
    }, {
        "user_id": "a3a5a0a0-b345-11e7-8f1a-0800200c9a66",
        "avatar": "https://tims11.files.wordpress.com/2011/01/avatar.jpg",
        "display_name": "Helder",
        "status": "online",
        "user_type": "host"
    }, {
        "user_id": "a33a60a0-b345-11e7-8f1a-0800200c9a66",
        "avatar": "https://assets-2.huggies-cdn.net/system/avatars/members/000/493/838/medium/avatar.jpg?1269390829",
        "display_name": "Systema",
        "status": "online",
        "user_type": "system"
    }

]

emanuel/chat_widget_concepts.md