実現したいこと

rails4 ローカル環境

現在メッセージ機能を実装してラインのようなメッセージのやりとりができるようにしたいと思っています。

解決したい問題

メッセージ機能は無事に実装できて、メッセージのやり取りをしているページで『相手のメッセージは左側』『自分のメッセージは右側』という表示にして吹き出しをつけて表示しようと思っています。

吹き出しもCSSで実装したのですが、吹き出しをつけると下記の画像のように空の吹き出しが１つ勝手に表示されてしまいます。

私なりに原因を探ってみたところ、
CSSで枠線をつけるとこういう現象が出るため、枠線の付け方に問題がある？

ただ単に、メッセージのやり取りを一覧で表示して枠線をつけると、このような現象は起きなかったためメッセージの取得に関する記述が間違っている？

怪しいのはここら辺かと思っているのですが、解決はできずにいます。

どのようにしたらいいか教えていただけると嬉しいです。

現在はこのように記述しています。

messages/index.html.erb

<div class="container message">
  <div class="wrapper col-md-8 col-md-offset-2 col-sm-10 message-index">
    <div class="message-user-name">
      <p><%= @conversation.target_user(current_user).name %>さんとのメッセージ</p>
    </div>

    <!-- メッセージが10件以上あれば以前のメッセージへのリンクを表示する -->
    <% if @over_ten %>
      <center><%= link_to '以前のメッセージをすべて表示', '?m=all' %></center>
    <% end %>

    <!-- メッセージを一件ずつ抽出 -->
    <div class="ui segment">
      <% @messages.each do |message| %>
        <% if message.user_id == current_user.id %>
          <!-- 自分のメッセージ -->
          <% user = User.find(message.user_id) %>
          <div class="item-right">
            <div class="balloon1">
              <%= qiita_markdown(message.body) %>
            </div>
            <div class="clear"></div>
            <p><%= message.message_time %></p>
          </div>
        <% else %>
      <!-- 相手のメッセージ -->
      <div class="item-left">
        <% user = User.find_by(id: message.user_id) %>
        <%= link_to user_path(message.user_id) do %>
          <%= profile_img(message.user) %>
        <% end %>
        <div id="balloon">
          <%= qiita_markdown(message.body) %>
        </div>
        <p><%= message.message_time %></p>
      </div>
    <% end %>
  <% end %>
</div>

<!-- メッセージの送信 -->
<%= form_for [@conversation, @message], html: {class: "ui reply form"} do |f| %>
  <div class="message-field">
    <%= f.text_area :body, class: "form-control input-mysize-message" %>
    <%= f.text_field :user_id, value: current_user.id, type: "hidden"  %>
    <%= f.submit "メッセージを送る" %>
  </div>
<% end %>

実際に出力されるHTML

<div class="container message">
 <div class="wrapper col-md-8 col-md-offset-2 col-sm-10 message-index">
  <div class="message-user-name">
   <p>hogeさんとのメッセージ</p>
  </div>
  <!-- メッセージが10件以上あれば以前のメッセージへのリンクを表示する -->
  <!-- メッセージを一件ずつ抽出 -->
  <div class="ui segment">
      <!-- 自分のメッセージ -->
      <div class="item-right">
        <div class="balloon1">
          <p>huga</p>
        </div>
        <div class="clear"></div>
        <p>04/02/17 at  5:34 PM</p>
      </div>
      <br>
      <!-- 自分のメッセージ -->
      <div class="item-right">
        <div class="balloon1">

        </div>
        <div class="clear"></div>
        <p></p>
      </div>
      <br>
</div>

<!-- メッセージの送信 -->
<form class="ui reply form" id="new_message" action="/conversations/6/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="NdypJ7WEIU/M0JAzIFGZHq4yBBZX8MMtVxaEqqFAvtYY9PzzG6yjj10XF/NMeqnAMjZZHdncS946HxF5N3DiAg==" />
  <div class="message-field">
    <textarea class="form-control input-mysize-message" name="message[body]" id="message_body">
    </textarea>
    <input value="3" type="hidden" name="message[user_id]" id="message_user_id" />
    <input type="submit" name="commit" value="メッセージを送る" />
  </div>
 </form>
</div>
</div>

messages_controller

class MessagesController < ApplicationController
  before_action :authenticate_user!

  before_action do
    @conversation = Conversation.find(params[:conversation_id])
  end

  def index
    @messages = @conversation.messages
    if @messages.length > 10
      @over_ten = true
      @messages = @messages[-10..-1]
    end

    if params[:m]
      @over_ten = false
      @messages = @conversation.messages
    end

    if @messages.last
      if @messages.last.user_id != current_user.id
       @messages.last.read = true
      end
    end

    @message = @conversation.messages.build(user: current_user)
  end

  def create
    @message = @conversation.messages.build(message_params)
    if @message.save
      redirect_to conversation_messages_path(@conversation)
    end
  end

  private
    def message_params
      params.require(:message).permit(:body, :user_id)
    end
end