zsjz-ai/ai-electron/frontend/src/ai/components/ChatMessageItem.vue

<template>
  <article
    :id="`ai-msg-${message.id}`"
    class="ai-msg"
    :class="[`ai-msg--${message.role}`, { 'is-error': message.messageType === 'error' }]"
  >
    <!-- 用户消息：右对齐气泡。气泡形状本身已表明"这是我说的"，不再需要角色标签 -->
    <template v-if="isUser">
      <p class="ai-msg__bubble">{{ message.content }}</p>

      <!-- 附件徽标：本次提问随附的文件（落库后从 metadata.attachments 还原） -->
      <div v-if="message.attachments?.length" class="ai-msg__atts">
        <span v-for="att in message.attachments" :key="att.id" class="ai-msg__att">
          <Icon icon="mdi:paperclip" :size="11" />
          <span class="ai-msg__att-name" :title="att.name">{{ att.name }}</span>
          <span class="ai-msg__att-meta">{{ badgeMeta(att) }}</span>
        </span>
      </div>

      <div class="ai-msg__foot">
        <span v-if="message.messageType === 'interrupted'" class="ai-msg__flag">已中断</span>
        <span v-if="timeText" class="ai-msg__time">{{ timeText }}</span>
      </div>

      <MessageToolbar
        :message="message"
        :title="title"
        :get-body-element="() => bodyRef"
        @star="emit('star')"
        @remove="emit('remove')"
        @regenerate="emit('regenerate')"
      />
    </template>

    <!-- AI 消息：头像 + 内容列，不加气泡、不加边框 —— 长回答需要的是宽度和留白 -->
    <template v-else>
      <div class="ai-msg__avatar" aria-hidden="true">
        <Icon icon="mdi:sparkles" :size="15" />
      </div>

      <div class="ai-msg__main">
        <header class="ai-msg__head">
          <span class="ai-msg__role">AI 分析</span>
          <span v-if="timeText" class="ai-msg__time">{{ timeText }}</span>
          <span v-if="message.starred" class="ai-msg__star">已收藏</span>
          <span v-if="message.messageType === 'interrupted'" class="ai-msg__flag">已中断</span>
        </header>

        <div ref="bodyRef" class="ai-msg__body">
          <!-- 过程时间线（思考 + 工具调用）：一行汇总 + 展开流水，渲染在正文之前 -->
          <ProcessTimeline
            :thinking="message.thinking"
            :thinking-active="!!message.thinkingActive"
            :steps="message.toolSteps"
            :trace="message.trace"
            :active="!!message.streaming"
            :message-id="message.id"
          />

          <div v-if="message.messageType === 'error'" class="ai-msg__error">
            <Icon class="ai-msg__error-icon" icon="mdi:alert-circle-outline" :size="16" />
            <span>{{ message.content || '本次请求失败，请稍后重试' }}</span>
          </div>

          <template v-else>
            <BlockRenderer
              v-for="block in message.blocks || []"
              :key="block.key"
              :block="block"
              :streaming="!!message.streaming"
            />

            <div v-if="message.streaming && !hasContent" class="ai-msg__skeleton">
              <div class="ai-skeleton" :style="{ height: '14px', width: '62%' }"></div>
              <div class="ai-skeleton" :style="{ height: '14px', width: '88%' }"></div>
              <div class="ai-skeleton" :style="{ height: '14px', width: '46%' }"></div>
            </div>

            <!-- 流式状态条放在正文之后：长回答输出到一半等待时，用户在阅读位置就能看到
                 “正在思考 / 正在执行 / 连接正常但无新内容 / 心跳已断” -->
            <StreamStatusBar
              v-if="message.streaming"
              :streaming="true"
              :intent="message.intent"
              :steps="message.toolSteps"
              :has-content="hasContent"
              :thinking-active="!!message.thinkingActive"
              :stream-started-at="message.streamStartedAt"
              :last-activity-at="message.lastActivityAt"
              :last-heartbeat-at="message.lastHeartbeatAt"
            />
          </template>
        </div>

        <!-- 追问建议：有方向分组时按方向渲染，否则回退旧版平铺 -->
        <SuggestionBar
          v-if="!message.streaming && (message.suggestions?.length || message.suggestionGroups?.length)"
          :questions="message.suggestions"
          :directions="message.suggestionGroups"
          @pick="(q) => emit('pick', q)"
        />

        <!-- 操作条 -->
        <MessageToolbar
          :message="message"
          :title="title"
          :get-body-element="() => bodyRef"
          @star="emit('star')"
          @remove="emit('remove')"
          @regenerate="emit('regenerate')"
        />
      </div>
    </template>
  </article>
</template>

<script lang="ts" setup>
  /**
   * 单条消息
   *
   * 布局参考主流 AI 对话界面：
   * - 用户消息：右对齐气泡（最大 72% 宽），时间贴在气泡下方，不占头部空间；
   * - AI 消息：左侧头像 + 内容列，正文不加气泡/边框，回答可以吃满整列宽度。
   *
   * 角色之间不再画分隔线 —— 一问一答靠"间距节奏"成组（见 ai.less 中 .ai-msg 的相邻规则），
   * 分隔线会把一次问答从中间切断，反而破坏配对关系。
   */
  import { computed, ref } from 'vue';
  import type { ChatMessage } from '../store/chatStream';
  import Icon from '@/core/components/Icon/src/Icon.vue';
  import BlockRenderer from './BlockRenderer.vue';
  import ProcessTimeline from './ProcessTimeline.vue';
  import StreamStatusBar from './StreamStatusBar.vue';
  import SuggestionBar from './SuggestionBar.vue';
  import MessageToolbar from './MessageToolbar.vue';

  const props = withDefaults(
    defineProps<{
      message: ChatMessage;
      title?: string;
    }>(),
    { title: '' },
  );

  const emit = defineEmits<{
    pick: [question: string];
    star: [];
    remove: [];
    regenerate: [];
  }>();

  const bodyRef = ref<HTMLElement>();

  const isUser = computed(() => props.message.role === 'user');

  /** 附件徽标摘要文本：表格显示行数、文档显示字数，截断/索引有标 */
  function badgeMeta(att: import('../api/types').AttachmentBadge) {
    const base = att.kind === 'TABLE' ? `${att.rows ?? 0} 行` : `${att.chars ?? 0} 字`;
    const extra = att.indexedChunks ? ` · ${att.indexedChunks} 片` : att.truncated ? ' · 已截断' : '';
    return base + extra;
  }

  const hasContent = computed(() => !!(props.message.blocks || []).some((b) => b.text?.trim()));

  const timeText = computed(() => {
    const raw = props.message.createAt;
    if (!raw) return '';
    // 后端格式 yyyy-MM-dd HH:mm:ss；本地临时消息为 ISO
    const normalized = raw.includes('T') ? raw : raw.replace(/-/g, '/');
    const d = new Date(normalized);
    if (Number.isNaN(d.getTime())) return '';
    const p = (n: number) => String(n).padStart(2, '0');
    return `${p(d.getHours())}:${p(d.getMinutes())}`;
  });
</script>

<style lang="less" scoped>
  .ai-msg {
    /* AI 消息：头像列 + 内容列。用 grid 而不是 flex，保证正文宽度严格等于内容列 */
    &--assistant {
      display: grid;
      grid-template-columns: var(--ai-avatar) minmax(0, 1fr);
      column-gap: var(--ai-sp-3);
      align-items: start;
    }

    /* 用户消息：单列右对齐，气泡宽度随内容收缩（上限 72%） */
    &--user {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* 附件徽标：气泡下方一行小胶囊 */
    &__atts {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: flex-end;
      margin-top: 4px;
    }

    &__att {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: 240px;
      height: 22px;
      padding: 0 8px;
      color: #5b6577;
      font-size: 11px;
      background: #f4f6fa;
      border: 1px solid #e7ebf3;
      border-radius: 6px;

      &-name {
        overflow: hidden;
        color: #111827;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &-meta {
        white-space: nowrap;
      }
    }

    &__avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--ai-avatar);
      height: var(--ai-avatar);
      margin-top: 3px;
      color: #2a50ec;
      background: linear-gradient(135deg, #eef2ff, #dfe8ff);
      border: 1px solid #dbe4ff;
      border-radius: 9px;
    }

    &__main {
      min-width: 0;
    }

    &__head {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 18px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #eff2f7;
    }

    &__role {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #111827;
      font-size: 13px;
      font-weight: 600;

      &::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #2a50ec;
        border-radius: 50%;
      }
    }

    &__time {
      color: #98a2b3;
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }

    &__star {
      padding: 0 6px;
      font-size: 11px;
      line-height: 17px;
      color: @warning-color;
      background: fade(@warning-color, 10%);
      border-radius: var(--ai-radius-sm);
    }

    &__flag {
      padding: 0 6px;
      font-size: 11px;
      line-height: 17px;
      color: var(--ai-text-2);
      background: var(--ai-bg-subtle);
      border-radius: var(--ai-radius-sm);
    }

    /* 用户气泡下方的时间行（父级右对齐，故整体靠右） */
    &__foot {
      display: flex;
      align-items: center;
      gap: var(--ai-sp-2);
      margin-top: var(--ai-sp-1);
    }

    &__bubble {
      max-width: 72%;
      margin: 0;
      padding: 10px 14px;
      color: #111827;
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
      background: #eef2ff;
      border: 1px solid #dbe4ff;
      border-radius: 14px 14px 4px 14px;
      box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
    }

    &__body {
      min-width: 0;
    }

    &__error {
      display: flex;
      align-items: flex-start;
      gap: var(--ai-sp-2);
      padding: var(--ai-sp-3) var(--ai-sp-3) var(--ai-sp-3) 10px;
      font-size: 13px;
      line-height: 1.7;
      color: @error-color;
      background: fade(@error-color, 6%);
      border-left: 3px solid @error-color;
      border-radius: 0 8px 8px 0;
      word-break: break-word;
    }

    &__error-icon {
      flex: 0 0 auto;
      margin-top: 2px;
    }

    &__skeleton {
      display: flex;
      flex-direction: column;
      gap: var(--ai-sp-2);
    }
  }
</style>