<template>
  <div class="chat--message-text">
  <!-- <div :class="['chat--message-text', isLong ? 'long-text': 'short-text']"> -->
    <div class="chat--message-text-content" v-html="linkified_message"></div>
    <MessageInfo :message=message />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Message } from './type';
import MessageInfo from './MessageInfo.vue';
import linkifyStr from 'linkifyjs/string';

@Component({
  components: {
    MessageInfo,
  },
})
export default class MessageText extends Vue {
  @Prop() private message!: Message;

  get isLong() {
    return this.message.content.length > 40;
  }

  get linkified_message() {
    return linkifyStr(this.message.content, {target: { url: '_blank' }, class: 'linkified'}) || this.message.content;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">

.linkified {
  color: #019581;
}

</style>
