<commit_before><template lang="html">
  <div :class="{ 'chat-panel': true, 'dragging': this.stores.ApplicationStore.isDragging }">
    <ul class="logs">
      <li v-for="message in stores.MessagesStore.messages" class="log" :style="{color: message.color}">{{message.time}}: {{message.user}} {{message.text}}</li>
    </ul>
    <form v-on:submit.prevent="send">
      <input v-model="message.user" class="user" placeholder="名無し" required>
      <input v-model="message.text" class="text" placeholder="body here..." required>
      <input v-model="message.color" class="color" required>
      <input v-model="message.color"  type="color" required>
      <button type="submit" name="button">送信</button>
    </form>
  </div>
</template>

<style scoped>

.logs{
  list-style: none;
  padding: 0;
  margin: 0;

  height: 125px;
  overflow: auto;
}

.logs .log{
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
}

.chat-panel{
  position: fixed;
  left: 25px;
  bottom: 25px;
  width: calc(100% - 425px);
  height: 175px;

  background: #fff;

  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.dragging{
  pointer-events: none;
  opacity: 0.2;
}

form{
  background: #f5f5f5;
  width: calc(100% - 20px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

form .user{
  width: 100px;
  height: 24px;
  outline: none;

  font-size: 12px;
}

form .color{
  width: calc(100% - 540px);
  height: 24px;
  outline: none;

  font-size: 12px;
}
form .text{
  width: calc(100% - 220px);
  height: 24px;
  outline: none;

  font-size: 12px;
}

form button{
  display: block;
  background: #00aaee;
  border: none;
  color: #fff;
  width: 80px;
  height: 28px;
  font-size: 16px;
  margin-left: 10px;
}
</style>

<script>
const WSManager = require("../../utilities/WSManager")();
const Fetch = require("../../utilities/Fetch");
module.exports = {
	props: ["component"],
	beforeRouteEnter(from, to, next){
		next(vm=>{
			vm.initialize();
		});
	},
  data: ()=>{
    return {
      message: {<commit_msg>change layout<commit_after><template lang="html">
  <div :class="{ 'chat-panel': true, 'dragging': this.stores.ApplicationStore.isDragging }">
    <ul class="logs">
      <li v-for="message in stores.MessagesStore.messages" class="log" :style="{color: message.color}">{{message.time}}: {{message.user}} {{message.text}}</li>
    </ul>
    <form v-on:submit.prevent="send">
      <input v-model="message.user" class="user" placeholder="名無し" required>
      <input v-model="message.text" class="text" placeholder="body here..." required>
      <input v-model="message.color" class="color" required>
      <input v-model="message.color" class="picker" type="color" required>
      <button type="submit" name="button">送信</button>
    </form>
  </div>
</template>

<style scoped>

.logs{
  list-style: none;
  padding: 0;
  margin: 0;

  height: 125px;
  overflow: auto;
}

.logs .log{
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
}

.chat-panel{
  position: fixed;
  left: 25px;
  bottom: 25px;
  width: calc(100% - 425px);
  height: 175px;

  background: #fff;

  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.dragging{
  pointer-events: none;
  opacity: 0.2;
}

form{
  background: #f5f5f5;
  width: calc(100% - 20px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

form input {
  margin-left: 5px;
  margin-right: 5px;
  height: 28px;
  outline: none;
}
form .picker {
  width: 80px;
}
form .user{
  width: 100px;
  outline: none;

  font-size: 12px;
}

form .color{
  width: 300px;
  outline: none;
  font-size: 12px;
}
form .text{
  width: calc(100% - 20px);
  outline: none;

  font-size: 12px;
}

form button{
  display: block;
  background: #00aaee;
  border: none;
  color: #fff;
  width: 80px;
  height: 28px;
  font-size: 16px;
  margin-left: 10px;
}
</style>

<script>
const WSManager = require("../../utilities/WSManager")();
const Fetch = require("../../utilities/Fetch");
module.exports = {
	props: ["component"],
	beforeRouteEnter(from, to, next){
		next(vm=>{
			vm.initialize();
		});
	},
  data: ()=>{
    return {
      message: {
{'fraction_non_alphanumeric': 0.1824712643678161, 'fraction_numerical': 0.03879310344827586, 'mean_word_length': 3.467379679144385, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4109607', 'n_tokens_mistral': 1740, 'n_tokens_neox': 1584, 'n_words': 367}