bigbluebutton-Github/labs/meteor-client/client/views/chat/chat_bar.html

<template name="chatbar">
	<div id="{{id}}" {{visibility name}} class="component">
		<div id="chatbar-contents">
			<h3 class="title gradientBar"><span class="glyphicon glyphicon-comment"></span> {{title}}</h3>
			<div style="overflow-y: scroll; height:40px">{{>tabButtons}}</div>
			{{#if getInSession "display_chatPane"}}
				<div id="chatbody">
					<ul class="chat">					
						{{#each getFormattedMessagesForChat}}
							<li>{{> message}}</li>
						{{/each}}
					</ul>
				</div>
				<div class="panel-footer">{{> chatInput}}</div>
			{{else}}
				{{> optionsBar}}
			{{/if}}
		</div>
	</div>
</template>

<template name="chatInput">
	<div class="chat-input-wrapper">
		<input type="text" id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message" />
		<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top" title="Click to send your message">
		Send
		</button>
	</div>
</template>

<!-- Displays and styles an individual message in the chat -->
<template name="message">
	<strong>{{message.from_username}}</strong> 
	<small class="pull-right">{{message.from_time}} <span class="glyphicon glyphicon-time"></span></small>
	<div>{{message.message}}</div>
</template>

<!-- Displays the list of options available -->
<template name="optionsBar">
	<p>Select a person to chat with privately</p>
	<div class="private-chat-user-box">
		{{#Layout template="scrollWindow" id="privateChatUserScrollWindow"}}
			{{#contentFor region="scrollContents"}}
				<table class="table table-hover">
					<tbody class="private-chat-user-list">
						{{#each getUsersInMeeting}}
							<tr class="private-chat-user-entry">
								{{#unless isCurrentUser userId}}
							      {{user.name}}
							    {{/unless}}
							</tr>
						{{/each}}
					</tbody>
				</table>
			{{/contentFor}}
		{{/Layout}}
	</div>
</template>

<!-- Display buttons on the chat tab, public, options, and all the private chat tabs -->
<template name="tabButtons">
	<ul id="tabButtonContainer" class="nav nav-tabs">
  	{{#each getChatbarTabs}}
  		{{{makeTabButton}}}
  	{{/each}}
  	</ul>
</template>