bigbluebutton-Github/labs/meteor-client/app/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}}
                {{> extraConversations}}
            </h3>

			{{>tabButtons}} <!-- Display public/options tabs, and private chat tabs -->
			{{#if getInSession "display_chatPane"}}
				<div id="chatbody">
					<ul class="chat">
						{{#each getCombinedMessagesForChat}}
							{{#if message}}
								<li {{messageFontSize}}>{{> message}}</li>
							{{/if}}
						{{/each}}
						<bottomEntry></bottomEntry> <!-- Intentionally blank, fixes issue of last message being cut off while scrolling -->
					</ul>
				</div>
				<div class="panel-footer">{{> chatInput}}</div>
			{{else}}
				{{> optionsBar}}
			{{/if}}
		</div>
	</div>
</template>

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

<template name="chatOptions">
	<p>Chat Options:</p>
	{{> optionsFontSize}}
	<br/><br/>
	{{> notificationSettings}}
</template>

<template name="extraConversations">
    {{#if tooManyConversations}}
        <div id="MoreChatsDrop" class="btn-group">
            <button type="button" id="MoreChatsbutton" class="btn btn-default dropdown-toggle" data-toggle="dropdown">More Chats<span class="caret"></span></button>
            <ul class="dropdown-menu extraConversationScrollableMenu" role="menu">
                {{#each getExtraConversations}}
                    <li class="extraConversation" id="{{safeName name}}"><a href="#">{{safeName name}}</a></li>
                {{/each}}
            </ul>
        </div>
    {{/if}}
</template>

<!-- Displays and styles an individual message in the chat -->
<template name="message">
	<table style="width:100%">
		<tr>
			<td>
				{{#if message.from_username}}
					<div {{messageFontSize}} class="userNameEntry" rel="tooltip" data-placement="bottom" title="{{message.from_username}}">
						<strong>{{message.from_username}}</strong>
					</div>
				{{/if}}
			</td>
			<td style="text-align:right">
				{{#if message.from_time}}<small class="pull-right">{{toClockTime message.from_time}} <span class="glyphicon glyphicon-time"></span></small>{{/if}}
			</td>
		</tr>
	</table>
	<div style="color:{{colourToHex message.from_color}}">{{{sanitizeAndFormat message.message}}}</div> <!-- Messages must be safely filtered and stripped -->
	{{autoscroll}} <!-- Scroll to the bottom after inserting a new message -->
</template>

<template name="notificationSettings">
	New Message Notifications:
	<form>
		<input type="radio" name="chatNotification" id="chatNotificationOn" value="chatNotificationOn" checked="checked" />
		<label for="chatNotificationOn">On</label>
		<input type="radio" name="chatNotification" id="chatNotificationOff" value="chatNotificationOff" />
		<label for="chatNotificationOff">Off</label>
	</form>
</template>

<!-- Displays the list of options available -->
<template name="optionsBar">
	<div class="optionsBar">
		{{#if thereArePeopletoChatWith}} <!-- There are people we can chat with, display the user list -->
			<p>Select a person to chat with privately</p>
			<div class="private-chat-user-box" rel="tooltip" data-placement="top" title="Select a participant to open a private chat">
				{{#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>
		{{else}}
			<p>There are no participants to chat with right now.</p>
		{{/if}}
		<br/>
		{{> chatOptions}}
	</div>
</template>

<template name="optionsFontSize">
	<div class="dropdown" style="float:left">
		<span {{messageFontSize}}>Chat Message Font Size: </span>
		<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
			Font Size ({{getInSession "messageFontSize"}})
			<span class="caret"></span>
		</button>

		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="height:80px; overflow-y:scroll; right:0px;">
			<li role="presentation"><a class="fontSizeSelector" id="8" role="menuitem" tabindex="-1" href="#">8</a></li>
			<li role="presentation"><a class="fontSizeSelector" id="10" role="menuitem" tabindex="-1" href="#">10</a></li>
			<li role="presentation"><a class="fontSizeSelector" id="12" role="menuitem" tabindex="-1" href="#">12</a></li>
			<li role="presentation"><a class="fontSizeSelector" id="14" role="menuitem" tabindex="-1" href="#">14</a></li>
			<li role="presentation"><a class="fontSizeSelector" id="16" role="menuitem" tabindex="-1" href="#">16</a></li>
			<li role="presentation"><a class="fontSizeSelector" id="18" role="menuitem" tabindex="-1" href="#">18</a></li>
		</ul>
	</div>
</template>

<!-- Display buttons on the chat tab, public, options, and all the private chat tabs -->
<template name="tabButtons">
  <ul id="tabsList" class="nav nav-tabs">
    {{#each grabChatTabs}}
      <li class="{{isTabActive userId}} tab {{makeSafe class}}">
        <a href='#' data-toggle='tab' id="#{{makeSafe name}}" class="{{hasGotUnreadMailClass gotMail}}">
          {{#if equals class "privateChatTab"}}
            <button class="close closeTab" type="button"><sup><b>X</b></sup></button>
          {{/if}}
          {{makeSafe name}}
        </a>
      </li>
    {{/each}}
  </ul>
</template>