<a href="#compose-modal"

data-toggle="modal"
id="compose-button"
class="btn btn-primary pull-right hidden">Compose</a>
((((((The compose button is not displayed on the interface by default. This is so
that it only appears once the user has authenticated. To enable this functionality
we need to remove the hidden class from the element at the same time as we remove
the hidden class from the table which displays the inbox. This means that we should
amend our handleAuthResult() function to add the following just after the
loadGmailApi() call:))))))

$('#compose-button').removeClass("hidden");

(((The Compose button will simply open a modal, which we�re also going to add
directly into the DOM.)))
<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Compose</h4>
</div>
<form onsubmit="return sendEmail();">
<div class="modal-body">
<div class="form-group">
<input type="email" class="form-control" id="compose-to"
placeholder="To" required />
</div>

<div class="form-group">
<input type="text" class="form-control" id="compose-subject"
placeholder="Subject" required />
</div>

<div class="form-group">
<textarea class="form-control" id="compose-message"
placeholder="Message" rows="10" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="submit" id="send-button" class="btn
btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>

This is a standard Bootstrap-styled form which calls the sendEmail() function on

submit.
function sendEmail()
{
$('#send-button').addClass('disabled');

sendMessage(
{
'To': $('#compose-to').val(),
'Subject': $('#compose-subject').val()
},
$('#compose-message').val(),
composeTidy
);

return false;
}

function sendMessage(headers_obj, message, callback)

{
var email = '';

for(var header in headers_obj)

email += header += ": "+headers_obj[header]+"\r\n";

email += "\r\n" + message;

var sendRequest = gapi.client.gmail.users.messages.send({

'userId': 'me',
'resource': {
'raw': window.btoa(email).replace(/\+/g, '-').replace(/\//g, '_')
}
});

return sendRequest.execute(callback);
}

passing the callback function.

function composeTidy()
{
$('#compose-modal').modal('hide');

$('#compose-to').val('');
$('#compose-subject').val('');
$('#compose-message').val('');

$('#send-button').removeClass('disabled');
}
var reply_to = (getHeader(message.payload.headers, 'Reply-to') !== '' ?
getHeader(message.payload.headers, 'Reply-to') :
getHeader(message.payload.headers, 'From')).replace(/\"/g, '&quot;');

var reply_subject = 'Re: '+getHeader(message.payload.headers,

'Subject').replace(/\"/g, '&quot;');
$('body').append(
...
'<div class="modal-footer">\
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>\
<button type="button" class="btn btn-primary reply-button" data-dismiss="modal"
data-toggle="modal" data-target="#reply-modal"\
onclick="fillInReply(\
\''+reply_to+'\', \
\''+reply_subject+'\', \
\''+getHeader(message.payload.headers, 'Message-ID')+'\'\
);"\
>Reply</button>\
</div>'
...
);

function fillInReply(to, subject, message_id)

{
$('#reply-to').val(to);
$('#reply-subject').val(subject);
$('#reply-message-id').val(message_id);
}

fillInReply() function, which passes the fields to the reply modal

<div class="modal fade" id="reply-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Reply</h4>
</div>
<form onsubmit="return sendReply();">
<input type="hidden" id="reply-message-id" />

<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="reply-to" disabled />
</div>

<div class="form-group">
<input type="text" class="form-control disabled" id="reply-subject"
disabled />
</div>

<div class="form-group">
<textarea class="form-control" id="reply-message" placeholder="Message"
rows="10" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
 <button type="submit" id="reply-button" class="btn
btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>

(((((The reply modal is quite similar to the compose modal. The main difference
being the hidden field which stores the message ID. This is required to thread
emails correctly in email clients � matching the subject with a �Re: � prefix is
not enough. Also we�re going to disable the To and Subject fields as they shouldn�t
be changed at this point, they are only visible to provide context. Once the reply
modal form is submitted the sendReply() function is called.))))
The reply modal is quite similar to the compose modal. The main difference being
the hidden field which stores the message ID. This is required to thread emails
correctly in email clients � matching the subject with a �Re: � prefix is not
enough. Also we�re going to disable the To and Subject fields as they shouldn�t be
changed at this point, they are only visible to provide context. Once the reply
modal form is submitted the sendReply() function is called.))))
function sendReply()
{
$('#reply-button').addClass('disabled');

sendMessage(
{
'To': $('#reply-to').val(),
'Subject': $('#reply-subject').val(),
'In-Reply-To': $('#reply-message-id').val()
},
$('#reply-message').val(),
replyTidy
);

return false;
}

(((((The sendReply() function is largely the same as sendEmail(), except we now

pass through the In-Reply-To header which allows email clients to thread the
conversation correctly. The Google documentation states that the References header
also needs to be provided, but in our testing it will work without it. Once the
reply has been sent the replyTidy() callback is triggered.))))
function replyTidy()
{
$('#reply-modal').modal('hide');

$('#reply-message').val('');

$('#reply-button').removeClass('disabled');
}