web/src/components/ChatMessage.vue

<template>
  <div class="chat-message" :class="[`role-${message.role}`, { streaming: message.isStreaming }]">
    <div class="message-avatar">
      <n-avatar
        v-if="message.role === 'assistant'"
        :size="36"
        :style="{ background: 'var(--primary)' }"
      >
        <n-icon><shield-checkmark-outline /></n-icon>
      </n-avatar>
      <n-avatar
        v-else
        :size="36"
        :style="{ background: 'var(--accent)' }"
      >
        <n-icon><person-outline /></n-icon>
      </n-avatar>
    </div>

    <div class="message-content">
      <!-- User Message -->
      <div v-if="message.role === 'user'" class="user-text">
        {{ message.content }}
      </div>

      <!-- Assistant Message -->
      <div v-else class="assistant-message">
        <!-- Confidence Badge -->
        <div v-if="message.confidence" class="confidence-badge">
          <n-tag
            :type="confidenceType"
            size="small"
            class="confidence-tag"
          >
            <template #icon>
              <n-icon size="14">
                <checkmark-circle-outline v-if="message.confidence === 'high'" />
                <help-circle-outline v-else-if="message.confidence === 'medium'" />
                <warning-outline v-else />
              </n-icon>
            </template>
            {{ message.confidence }} confidence
          </n-tag>
        </div>

        <!-- Message Text (Markdown) -->
        <div class="message-text markdown-body" v-html="renderedContent" />

        <!-- Citations -->
        <div v-if="message.citations && message.citations.length > 0" class="citations">
          <p class="citations-label">Sources:</p>
          <div class="citation-list">
            <n-button
              v-for="(citation, index) in message.citations"
              :key="index"
              quaternary
              size="tiny"
              class="citation-btn"
              @click="$emit('citation-click', citation)"
            >
              <template #icon>
                <n-icon size="14"><document-text-outline /></n-icon>
              </template>
              [{{ index + 1 }}] {{ citation.title }}, p.{{ citation.page }}
            </n-button>
          </div>
        </div>

        <!-- Feedback -->
        <div v-if="!message.isStreaming && message.role === 'assistant'" class="message-feedback">
          <n-divider style="margin: 12px 0" />
          <div class="feedback-row">
            <span class="feedback-label">Was this helpful?</span>
            <n-button-group size="tiny">
              <n-button quaternary @click="submitFeedback(1)">
                <template #icon><n-icon><thumbs-up-outline /></n-icon></template>
              </n-button>
              <n-button quaternary @click="submitFeedback(-1)">
                <template #icon><n-icon><thumbs-down-outline /></n-icon></template>
              </n-button>
            </n-button-group>
          </div>
        </div>
      </div>

      <!-- Timestamp -->
      <span class="message-time">{{ formatTime(message.timestamp) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import type { ChatMessage } from '@/types'
import { format } from 'date-fns'
import {
  ShieldCheckmarkOutline,
  PersonOutline,
  DocumentTextOutline,
  ThumbsUpOutline,
  ThumbsDownOutline,
  CheckmarkCircleOutline,
  HelpCircleOutline,
  WarningOutline,
} from '@vicons/ionicons5'

const props = defineProps<{
  message: ChatMessage
}>()

const emit = defineEmits<{
  feedback: [messageId: string, rating: number, correction?: string]
  citationClick: [citation: any]
}>()

const renderedContent = computed(() => {
  const rawHtml = marked.parse(props.message.content, { async: false }) as string
  return DOMPurify.sanitize(rawHtml)
})

const confidenceType = computed(() => {
  switch (props.message.confidence) {
    case 'high': return 'success'
    case 'medium': return 'warning'
    case 'low': return 'error'
    default: return 'default'
  }
})

const formatTime = (timestamp: string) => {
  return format(new Date(timestamp), 'h:mm a')
}

const submitFeedback = (rating: number) => {
  emit('feedback', props.message.id, rating)
}
</script>

<style scoped lang="scss">
.chat-message {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.role-user {
  flex-direction: row-reverse;

  .message-content {
    align-items: flex-end;
  }

  .user-text {
    background: var(--primary);
    color: white;
    border-radius: 16px 16px 4px 16px;
    padding: 12px 16px;
    max-width: 80%;
    font-size: 15px;
    line-height: 1.5;
  }
}

.role-assistant {
  .message-content {
    align-items: flex-start;
    max-width: 85%;
  }
}

.message-avatar {
  flex-shrink: 0;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assistant-message {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 16px;
  width: 100%;
}

.confidence-badge {
  margin-bottom: 8px;
}

.confidence-tag {
  font-size: 11px;
}

.message-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);

  :deep(p) {
    margin-bottom: 0.8em;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.citations {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.citations-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.citation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.citation-btn {
  font-size: 12px;
  color: var(--primary);
  background: rgba(26, 95, 180, 0.08);
  border-radius: 6px;

  &:hover {
    background: rgba(26, 95, 180, 0.15);
  }
}

.message-feedback {
  margin-top: 8px;
}

.feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feedback-label {
  font-size: 12px;
  color: var(--text-muted);
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.streaming {
  .assistant-message {
    border-style: dashed;
  }
}

@media (max-width: 768px) {
  .role-user .user-text {
    max-width: 90%;
  }

  .role-assistant .message-content {
    max-width: 90%;
  }
}
</style>