<template>
  <div class="user-bubble">
    <FileAttachment
      v-if="fileAttachment"
      :filename="fileAttachment.filename"
      :url="fileAttachment.url"
    />
    <span v-else>{{ content }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import FileAttachment from './FileAttachment.vue'

interface Props {
  content: string
}

const props = defineProps<Props>()

const FILE_MARKDOWN_RE = /^\[文件\]\s*\[(.+?)\]\((.+?)\)$/s

const fileAttachment = computed(() => {
  const match = props.content.match(FILE_MARKDOWN_RE)
  if (!match) return null
  return {
    filename: match[1],
    url: match[2],
  }
})
</script>

<style scoped>
.user-bubble {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-base);
  line-height: var(--leading-normal);
  max-width: 60%;
  word-break: break-word;
}
</style>
