<q-card>
  <q-card-section>
    <h6 class="text-subtitle1 q-my-none">Messages</h6>
  </q-card-section>
  <q-card-section class="q-pa-none">
    <q-separator></q-separator>
  </q-card-section>
  <q-card-section>
    <q-select
      v-model="customerKey"
      :options="Object.keys(messages).map(k => ({label: `${k.slice(0, 25)}...`, value: k}))"
      label="Customers"
      @input="chatRoom(customerKey)"
      emit-value
    ></q-select>
  </q-card-section>
  <q-card-section>
    <div class="chat-container" ref="chatCard">
      <div class="chat-box">
        <!-- <p v-if="Object.keys(messages).length === 0">No messages yet</p> -->
        <div class="chat-messages">
          <q-chat-message
            :key="index"
            v-for="(message, index) in orderMessages"
            :name="message.pubkey == keys.pubkey ? 'me' : 'customer'"
            :text="[message.msg]"
            :sent="message.pubkey == keys.pubkey ? true : false"
            :bg-color="message.pubkey == keys.pubkey ? 'white' : 'light-green-2'"
          />
        </div>
      </div>
      <q-card-section>
        <q-form @submit="sendMessage" class="full-width chat-input">
          <q-input
            ref="newMessage"
            v-model="newMessage"
            placeholder="Message"
            class="full-width"
            dense
            outlined
            @click="checkWebSocket"
          >
            <template>
              <q-btn
                round
                dense
                flat
                type="submit"
                icon="send"
                color="primary"
              />
            </template>
          </q-input>
        </q-form>
      </q-card-section>
    </div>
  </q-card-section>
</q-card>
