
<template>
    <h1>Chat</h1>

    <div
      :class='["message", { dark }]'>

    <h5>{{ user }}</h5>
    {{ text }}
  </div>

  <ChatBox
        class='chat-box'
        @submit='onSubmit'
    />
</template>


<script>
import ChatBox from "./ChatBox.vue";

export default {
    name: "Message",
    props: [
        "text",
        "user",
        "dark" // fond de la box
    ],
    components: { ChatBox }
}

</script>


<style scoped>
.message {
  background: #e7e7e7;
  border-radius: 10px;
  padding: 1rem;
  width: fit-content;
}
.message.dark {
  background: #e9eaf6;
}

h5 {
  margin: 0 0 .5rem 0;
}
</style>