bigbluebutton-Github/bigbluebutton-html5/app/client/views/chat/chat_bar.html

<template name="chatbar">
  <div id="{{id}}" {{visibility name}} class="component">
    <h3 class="title gradientBar">
      <span class="ion-ios-chatbubble"></span>
      {{> extraConversations}}
    </h3>
    {{#if getInSession "display_chatPane"}}
      <div id="chatbody">
        <ul class="chat" {{messageFontSize}}>
          {{#each getCombinedMessagesForChat}}
            {{#if message}}
              <li>{{> message}}</li>
            {{/if}}
          {{/each}}
          {{#unless userExists}}<li>The user has left</li>{{/unless}}
        </ul>
      </div>
      {{#if userExists}}
        <div class="panel-footer">{{> chatInput}}</div>
      {{/if}}
    {{else}}
      {{> optionsBar}}
    {{/if}}
  </div>
</template>

<template name="chatInput">
  <div id="chatInput" class="chat-input-wrapper">
    {{#if inPrivateChat}}
      {{#if privateChatDisabled}}
        <textarea id="newMessageInput" class="disabledChat" placeholder="Private chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Private chat is temporarily locked" disabled></textarea>
      {{else}}
        <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">
        Send
        </button>
      {{/if}}
    {{else}}
      {{#if publicChatDisabled}}
        <textarea id="newMessageInput" class="disabledChat" placeholder="Public chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Public chat is temporarily locked" disabled></textarea>
      {{else}}
        <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">
        Send
        </button>
      {{/if}}
    {{/if}}
  </div>
</template>

<template name="chatOptions">
  <p>Chat Options:</p>
  {{> optionsFontSize}}
</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">
  <span style="float:left;">
    {{#if message.from_username}}
      <span class="userNameEntry" rel="tooltip" data-placement="bottom" title="{{message.from_username}}">
        {{message.from_username}}
      </span>
    {{/if}}
  </span>
  <span style="float:right;">
    {{#if message.from_time}}
      <span {{messageFontSize}}>{{toClockTime message.from_time}}</span>
      <span {{messageFontSize}} class="glyphicon glyphicon-time"></span>
    {{/if}}
  </span>
  <br/>
  <div style="color:{{colourToHex message.from_color}}">{{{sanitizeAndFormat message.message}}}</div>
  {{autoscroll}}
</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>Chat privately with:</p>
      <select id="privateChatSelector" title="Select a participant to open a private chat" class="private-chat-user-box " >
        <option value="default" >Select a person</option>
        {{#each getUsersInMeeting}}
          {{#unless isCurrentUser userId}}
            <option value={{userId}} >{{user.name}}</option>
          {{/unless}}
        {{/each}}
      </select>
    {{else}}
      <p>There are no participants to chat with right now.</p>
    {{/if}}
    <br/><br/><br/>
    {{> chatOptions}}
    <br/>
  </div>
</template>

<template name="optionsFontSize">
  <span class="chatOptionsText" >Chat Message Font Size: </span><br/>
  <table id="fontSizeTable" align="center">
    <tr>
      <td>
        {{> makeButton id="decreaseFontSize" btn_class="displayButtons"
        i_class="minus" rel="tooltip" title="Decrease Font Size"}}
      </td>
      <td id="displayLabel"><label class="fontSizeLabel" {{messageFontSize}} >Size({{getInSession "messageFontSize"}})</label></td>
      <td>
        {{> makeButton id="increaseFontSize" btn_class="displayButtons"
        i_class="plus" rel="tooltip" title="Increase Font Size"}}
      </td>
    </tr>
  </table>
</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}} {{hasGotUnreadMailClass gotMail}}">
        <a href='#' data-toggle='tab' id="#{{makeSafe name}}">
            {{#if equals class "privateChatTab"}}
                <p class="chatNameSelectorPrivate">{{makeSafe name}}</p>
                <button type="button" class="close closeTab">X</button>
            {{else}}
                <p class="chatNameSelectorPublic">{{makeSafe name}}</p>
            {{/if}}
        </a>
      </li>
    {{/each}}
  </ul>
</template>