keanu-weblite/src/components/messages/export/MessageOutgoingThreadExport.vue

<template>
  <message-outgoing class="messageOut-thread" v-bind="{ ...$props, ...$attrs }">
    <component v-for="item in items" :is="componentFn(item.event)" v-bind="{ ...$props, ...$attrs }" :originalEvent="item.event" :key="item.event.getId()" ref="exportedEvent" />
  </message-outgoing>
</template>

<script>
import MessageOutgoing from "../MessageOutgoing.vue";
import messageMixin from "./../messageMixin";
import util from "../../../plugins/utils";

export default {
  extends: MessageOutgoing,
  components: { MessageOutgoing },
  mixins: [messageMixin],
  data() {
    return {
      items: [],
    }
  },
  mounted() {
    this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), util.threadMessageType(), "m.room.message");
    if (!this.thread) {
      this.event.on("Event.relationsCreated", this.onRelationsCreated);
    }
  },
  beforeUnmount() {
    this.event.off("Event.relationsCreated", this.onRelationsCreated);
  },
  methods: {
    onRelationsCreated() {
      this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), util.threadMessageType(), "m.room.message");
      this.event.off("Event.relationsCreated", this.onRelationsCreated);
    },
    processThread() {
      this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
        .filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
        .map(e => {
          let ret = {
            event: e,
            src: null,
          };
          return ret;
        });
    },
  }
};
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
</style>

<style lang="scss" scoped>
.bubble {
  width: 100%;
}
</style>