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

<template name="chatbar">
	{{#if getInSession "display_chatbar"}}
		<div id="chat">
			<h3>Chat</h3>
			
		  	{{> tabButtons}}
			
			<div id="chatbar-contents">
				{{#if getInSession "display_chatPane"}}
					{{> messageBar}}
					{{> chatInput}}
				{{else}}
					{{> optionsBar}}
				{{/if}}
			</div>
		</div>
	{{/if}}
</template>

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

<!-- Display the actual message bar -->
<template name="messageBar">
	{{#if isUserInPrivateChat}}
		<p>You are in a Private Chat.</p>
	{{else}}
		<p>This Chat is Open to Everyone.</p>
	{{/if}}
	<div id="chatScrollWindow">
		{{#if isUserInPrivateChat}} <!-- If in private chat display greeting, then all messages after join -->
			{{> chatGreeting}}
			{{#each getMessagesInChat}} 
				{{> message}}
			{{/each}} 
		{{else}}
			{{#each getMessagesInChat true}} <!-- before they joined meeting -->
				{{> message}}
			{{/each}} 
			{{> chatGreeting}}
			{{#each getMessagesInChat false}} <!-- after they joined meeting -->
				{{> message}}
			{{/each}} 
		{{/if}}
	</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">
		<div id="chatScrollWindow">
			<table class="table table-hover">
				<tbody class="private-chat-user-list">
					{{#each getUsersInMeeting}}
						<tr class="private-chat-user-entry">
							{{#if isCurrentUser userId}}
						      <strong>{{user.name}} (you)</strong>
						    {{else}}
						      {{user.name}}
						    {{/if}}
						</tr>
					{{/each}}
				</tbody>
			</table>
		</div>
	</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>

<!-- When done displaying previous chat messages, display the BBB greeting -->
<template name="chatGreeting">
	<div class="chatGreeting">
		<p>Welcome to {{getMeetingName}}!</p>
		<p>For help on using BigBlueButton see these (short) <a href="http://bigbluebutton.org/videos/" target="_blank">tutorial videos</a>.</p>
		<p>To join the audio bridge click the headset icon (upper-left hand corner).  Use a headset to avoid causing background noise for others.</p>
		<br/>
		<p>This server is running BigBlueButton {{getInSession "bbbServerVersion"}}.</p>
	</div>
</template>

<template name="chatInput">
	<br/>
	<input type="text" id="newMessageInput" placeholder="Write a message..." />
</template>