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

<template name="chatbar">
	<div id="{{id}}" {{visibility name}}>
		<h3 class="title">{{title}}</h3>
		{{> tabButtons}}
		<div id="chatbar-contents">
			{{#if getInSession "display_chatPane"}}
				{{#Layout template="scrollWindow" id="chatScrollWindow"}}
					{{#contentFor region="scrollContents"}}
						{{> messageBar}}
					{{/contentFor}}
				{{/Layout}}
			{{else}}
				{{> optionsBar}}
			{{/if}}
			{{> chatInput}}
		</div>
	</div>
</template>

<!-- Displays and styles an individual message in the chat -->
<template name="message">
	<div class="chat-message {{class}}">	
		<span class="chat-username">{{message.from_username}}</span>
		<p class="chat-timestamp">{{message.from_time}}</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;{{message.message}}</p>
	</div>
</template>

<!-- Display the actual message bar -->
<template name="messageBar">
	{{#Layout template="moduleTable" tbodyClass="chat-entry"}}
		{{#contentFor region="Contents"}}
			{{#each getMessagesInChat}}
				<tr>{{>message}}</tr>
			{{/each}}
		{{/contentFor}}
	{{/Layout}}
</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>

<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>