How can my Meteor Chat app recognize the users message?

Question

Im having a really hard time with a project. Im pretty new to Meteor and JavaScript for that matter. Any help would be great. I have created a messenger app. When the users sign in, they can select who to chat with. However, when they start chatting. It only recognizes the user who is signed in and not the other chatter. Here is a screenshot of what I mean. I am signed in as a user from firefox and another from chrome.Here is the image, showing the chat.

Here is my HTML

<template name="chat_page">
    <h2>Type in the box below to send a message!</h2>
       <div class="row">
         <div class="col-md-12">
            <div class="well well-lg">
               {{#each messages}}
               {{> chat_message}}
               {{/each}}
            </div>  
         </div>
       </div>

        <div class="row">
           <div class="col-md-12">
              <form class="js-send-chat">
                <input class="input" type="text" name="chat" placeholder="type a message here...">
                <button class="btn btn-default">send</button>
              </form>
           </div>
         </div>
</template>

<template name="chat_message">
    <div class = "container">
        <div class = "row">
            <div class = "col-md-6">
              {{> profile}} said: {{text}}
           </div>
        </div>
    </div>
</template>

<template name="profile">
  <small>
    <img src = "/{{avatar}}" class="img-rounded" width="65" height="50">
    {{username}}
  </small>
</template>

Here is my JavaScript.

Template.chat_page.helpers({
    messages:function(){
      var chat = Chats.findOne({_id:Session.get("chatId")});
      return chat.messages;
    }, 
    other_user:function(){
    return ""
    },
  })

Template.profile.helpers({
    username: function() {
      return Meteor.user().profile.username;
    },
    avatar: function() {
      return Meteor.user().profile.avatar;
    },
  })