<script setup lang="ts">
import { marked } from 'marked'

const props = defineProps<{
  left: boolean
  name?: string
  d: any
}>()

const showMsg = $computed(() => marked(decodeURIComponent(props.d!)))
</script>

<template>
  <div class="w-full text-dark-400" :class="left ? 'left' : 'right'">
    <div class="r_flex-row-reverse flex items-end gap-4">
      <div>{{ name }}</div>
    </div>
    <div class="r_flex-row-reverse mt-2 flex">
      <div
        class="text_wrapper max-w-360px min-h-44px min-w-50px rounded-3xl bg-white px-14px py-10px"
        v-html="showMsg"
      />
    </div>
    <!-- <el-button></el-button> -->
  </div>
</template>

<style scoped lang="scss">
.text_wrapper  {
  margin: 0;
  padding: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  // word-break: break-all;

  img{
    display: inline-block;
    vertical-align: bottom;
    margin: 0 2px;
  }
}

.left {
  .text_wrapper {
    border-radius: 2px 24px 24px 24px;
    background-color: beige;
  }
}

.right {
  .r_flex-row-reverse {
    flex-direction: row-reverse;
  }

  .text_wrapper {
    background-color: #397FF6;
    color: white;
    border-radius: 24px 2px 24px 24px;
  }
}
</style>
