<template>
  <div
    ref="messageRef"
    class="flex w-full overflow-hidden"
    :class="[{ 'flex-row-reverse': inversion }]"
  >
    <div
      class="flex items-center justify-center flex-shrink-0 h-50px overflow-hidden rounded-full basis-50px mt-0px"
      :class="[inversion ? 'ml-19px' : 'mr-19px']"
    >
      <AvatarComponent />
    </div>
    <div
      class="overflow-hidden text-22px"
      :class="[inversion ? 'items-end' : 'items-start']"
    >
      <div
        class="flex items-end gap-1"
        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
      >
        <TextComponent
          ref="textRef"
          v-if="type==='text' || !inversion"
          :inversion="inversion"
          :text="text"
          :loading="loading"
          :as-raw-text="asRawText"
        />
        <FileComponent :file="file" v-else/>
      </div>
    </div>
  </div>
</template>
<script setup>
import TextComponent from './text.vue'
import AvatarComponent from './avatar.vue'
import FileComponent from './file.vue'
import { ref } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'text',
  },
  file: {
    type: Object,
    default: () => {},
  },
  text: {
    type: String,
    default: '',
  },
  inversion: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})

const asRawText = ref(props.inversion)
</script>
