keanu-weblite/src/components/messages/MessageOperations.vue

<template>
  <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
    <template v-for="(item,index) in emojis">
      <v-btn v-if="index < maxRecents" :key="item.data" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
        <span class="recent-emoji">{{ item.data }}</span>
      </v-btn>
    </template>
    <v-btn v-if="incoming" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0" large>
      <v-icon>reply</v-icon>
    </v-btn>
    <v-btn id="btn-more" icon @click.stop="more" class="ma-0 pa-0" large>
      <v-icon>more_horiz</v-icon>
    </v-btn>  </div>
</template>

<script>
import messageMixin from "./messageMixin";
import messageOperationsMixin from "./messageOperationsMixin";

export default {
  mixins: [messageMixin, messageOperationsMixin],
  data() {
    return {
      maxRecents: 5
    }
  },
  props: {
    emojis: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  
  watch: {
    emojis: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log("Emojis changed", newVal, oldVal);
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>