Interactive Chat Example

<div class="ui form" style="display: flex; flex-direction: column; height: 100%">
	<div class="inline fields">
		<div class="field">
			<label>My Name</label>
			<input type="text" id="chat-sender-name" placeholder="Bob">
		</div>
		<div class="field">
			<label>My Color</label>
			<select class="ui dropdown" id="chat-sender-color">
				<option value="red">Red</option>
				<option value="yellow">Yellow</option>
				<option value="green" selected>Green</option>
				<option value="teal">Teal</option>
				<option value="blue">Blue</option>
				<option value="pink">Pink</option>
			</select>
		</div>
	</div>
	<div class="field" style="flex-grow: 1">
		<textarea id="chat-sender-text" style="height: 100%"></textarea>
	</div>
	<div class="field">
		<button class="ui primary button" style="float: right;" id="chat-send-button"><i class="ui share icon"></i>Send</button>
	</div>
</div>
<script>
$('#chat-sender-color').dropdown();
$('#chat-send-button').click(function () {
	var name = $('#chat-sender-name').val();
	var color = $('#chat-sender-color').val();
	var text = $('#chat-sender-text').val();
	var ts = (new Date()).toLocaleString('en-US');
	var message =
		'<div class="ui feed" style="margin-top: 0; margin-bottom: 6px;">' +
			'<div class="event">' +
				'<div class="label"><i class="ui big ' + color + ' comment icon"></i></div>' +
				'<div class="content">' +
					'<div class="summary">' +
						'<div class="user">' + name + '</div> posted ' +
						'<div class="date">' + ts + '</div>' +
					'</div>' +
					'<div class="extra text">' + text + '</div>' +
				'</div>' +
			'</div>' +
		'</div>';
	$.ajax({
		method: 'POST',
		url: boomack.pathPrefix + 'v1/display',
		contentType: 'application/json',
		data: JSON.stringify({
			panel: boomack.panelId,
			slot: 'messages',
			type: 'text/html',
			text: message,
			options: {
				extend: 'end',
			}
		}),
		dataType: 'json',
		success: function (data, status) {
			console.log('Status', status);
			console.log('Data', data);
			$('#chat-sender-text').val('');
		},
	});
});
</script>