zhaoshang_client_ui/src/components/Chat/BusinessRecord.vue

<template>
  <div
    ref="recordRootRef"
    :style="recordRootStyle"
    :class="{ 'text-left': record.isAI, 'text-right': record.isUser, 'text-center': record.isTips }"
  >
    <transition name="slow-fade">
      <QuestionSource
        v-if="record.questionSource && record.questionSource.length"
        :questionFrom="record.questionSource"
      />
    </transition>
    <div
      v-if="businessScopeOutsideRow"
      ref="businessScopeOutsideRef"
      class="business-scope-content-outside"
    >
      <ScopeContent
        :content="businessScopeOutsideRow.content"
        :forcePending="isScopeForcePending"
        :exiting="businessScopeOutsideRow.exiting"
        scope-source="outside"
        @auto-exit="handleScopeAutoExit(businessScopeOutsideRow)"
      />
    </div>
    <Transition name="business-record-body-fade" appear>
      <div
        v-if="shouldRenderBusinessRecordBody"
        class="business-record-body"
        :style="businessRecordBodyStyle"
        :class="{
          'is-scope-exiting': isScopeExitCompensating,
          'is-scope-exit-transition-disabled': isScopeExitBodyTransitionDisabled,
        }"
      >
        <div
          v-if="showUserAttachments"
          class="ba-message-attachments"
          :class="{ desktop: !isMobileDevice }"
        >
          <div
            v-for="attachment in userAttachments"
            :key="attachment.id || attachment.url"
            class="ba-message-attachment"
            :class="{ 'is-image': attachment.isImage, 'is-file': !attachment.isImage }"
          >
            <ImageContent
              v-if="attachment.isImage && attachment.url"
              :image-urls="previewableUserAttachmentUrls"
              :preview-index="getUserAttachmentPreviewIndex(attachment)"
              :compact="true"
              :activeReveal="false"
              :showDownloadButton="false"
            />
            <template v-else>
              <div class="ba-message-attachment-icon">{{
                getAttachmentExtension(attachment.name)
              }}</div>
              <div class="ba-message-attachment-info">
                <div class="ba-message-attachment-name">{{ attachment.name }}</div>
                <div class="ba-message-attachment-size">{{
                  formatAttachmentSize(attachment.size)
                }}</div>
              </div>
            </template>
          </div>
        </div>
        <div
          v-if="shouldRenderRecordLine"
          :class="{
            'ba-record-me': record.isUser,
            'ba-record-ai': record.isAI,
            'is-loading': isBusinessLoading,
            'is-interrupted': showInterruptedState,
            'chat-record-tips': record.isTips,
            'with-feedback-margin': true,
            'with-feedback-margin-rated':
              localFeedback === FeedbackType.Like || localFeedback === FeedbackType.Dislike,
            'full-mode': type == 'full',
            desktop: !isMobileDevice,
          }"
          class="chat-record-line record--business business-record"
          ref="elRef"
        >
          <div class="tips-title" v-if="record.isTips">
            <div class="tips-deco" />
            <div class="tips-deco mirror" />
            温馨提示
          </div>
          <ReasoningWidget
            v-if="record.isAI && record.reasoningContent !== undefined"
            :reasoningContent="record.reasoningContent"
            :status="reasoningStatus"
          />
          <div class="content" :class="{ isTip: record.isTips }" ref="contentRef">
            <span v-if="showInterruptedState" class="request-interrupted-text">请求已取消</span>
            <DotsAnim v-else-if="showLoadingDots" />
            <template v-else>
              <template
                v-for="(row, index) in visibleInlineDisplayRecordRows"
                :key="row.id || index"
              >
                <TextContent
                  :content="row.content"
                  v-if="shouldRenderTextContentRow(row)"
                  :instant="shouldRenderTextInstantly"
                  :blockMarkdown="true"
                  :activeTypewriter="shouldDriveTypewriter"
                  :paused="false"
                  :scopeExitCompensating="isScopeExitCompensating"
                  :enableRevealFade="false"
                  :initialMinWidth="scopeExitWidth"
                  @typingFinished="handleTypingFinished(row.id)"
                  @typingStateChange="handleTypingStateChange(row.id, $event)"
                />
                <FormContent :content="row.content" v-if="row.type === RecordRowTypes.Form" />
                <LinkURLContent :content="row.content" v-if="row.type === RecordRowTypes.LinkURL" />
                <ImageContent
                  :content="row.content"
                  v-if="row.type === RecordRowTypes.ImageContent"
                  :activeReveal="shouldDriveTypewriter && !isImageRowFullyRevealed(row)"
                  @revealFinished="handleImageRevealFinished(row.id)"
                  @revealStateChange="handleImageRevealStateChange(row.id, $event)"
                />
                <OfficeURLContent
                  :content="row.content"
                  v-if="row.type === RecordRowTypes.OfficeURL"
                />
                <div
                  v-if="row.type === RecordRowTypes.Scope"
                  class="scope-content-shell"
                  :ref="(el) => setScopeRowRef(row, el)"
                >
                  <ScopeContent
                    :content="row.content"
                    :forcePending="isScopeForcePending"
                    :exiting="row.exiting"
                    scope-source="inline"
                    @auto-exit="handleScopeAutoExit(row)"
                  />
                </div>
                <PolicyMatch
                  v-if="row.type === RecordRowTypes.PolicyTable"
                  :policyContent="row.content"
                  :recordMode="true"
                  :sessionId="policyMatchSessionId"
                />
                <PolicyListUpdatedMatch
                  v-if="row.type === RecordRowTypes.PolicyListUpdated"
                  :content="row.content"
                  :recordMode="true"
                  :sessionId="policyMatchSessionId"
                />
                <QuestionCard
                  v-if="row.type === RecordRowTypes.QuestionCards"
                  :content="row.content"
                  :recordMode="true"
                  :sessionId="policyMatchSessionId"
                />
                <div
                  v-if="row.type === RecordRowTypes.RefLinks && getRefLinkItems(row.content).length"
                  class="ba-ref-links-summary"
                  :class="{ desktop: !isMobileDevice }"
                >
                  <div class="ba-ref-links-summary-title">参考资料</div>
                  <div class="ba-ref-links-row">
                    <div class="ba-ref-links-chip-list">
                      <a
                        v-for="(item, refIndex) in getRefLinkItems(row.content)"
                        :key="`${item.title}-${refIndex}`"
                        class="ba-ref-links-chip"
                        :href="item.linkUrl"
                        target="_blank"
                        rel="noopener noreferrer"
                        @click="handleRefLinkChipClick($event, item)"
                      >
                        <span class="ba-ref-links-chip-index">[{{ refIndex + 1 }}]</span>
                        <span class="ba-ref-links-chip-title">{{
                          item.title || item.type || "参考资料"
                        }}</span>
                      </a>
                    </div>
                    <button
                      type="button"
                      class="ba-ref-links-more"
                      @click.stop="openRefLinksPanel(row.content)"
                    >
                      更多
                    </button>
                  </div>
                </div>
              </template>

              <!-- media display holder -->
              <div
                class="media-row"
                :class="{ 'mt-1': visibleInlineDisplayRecordRows.length === 0 }"
                v-if="headMedia.type"
              >
                <div
                  class="media-placeholder head-media"
                  @click="
                    (e) => {
                      openPreview(headMedia, 0, e);
                    }
                  "
                >
                  <img
                    :src="headMedia.type === 'image' ? headMedia.url : headMedia.preview"
                    @error="handleError"
                  />
                  <div v-if="headMedia.type === 'video'" class="play-button"></div>
                </div>
              </div>
              <div
                class="rest-media-wrapper"
                :class="{ 'pa-0': restMedia.length == 1 }"
                v-if="restMedia.length"
              >
                <div
                  class="media-placeholder"
                  :class="{
                    several: restMedia.length > 1 && restMedia.length <= 4,
                    multi: restMedia.length > 4,
                  }"
                  v-for="(each, index) in restMedia"
                  :key="index"
                  @click="
                    (e) => {
                      openPreview(each, index + 1, e);
                    }
                  "
                >
                  <img
                    :src="each.type === 'image' ? each.url : each.preview"
                    @error="handleError"
                  />
                  <div v-if="each.type === 'video'" class="play-button"></div>
                </div>
              </div>
              <!-- media display holder end -->
            </template>
          </div>
          <div class="tips-wrap" v-if="record.isTips">
            <div class="tip" v-for="(item, index) in tips.tipItems" :key="index">
              <div class="title">
                <span class="order">{{ index + 1 }}</span> {{ item.title }}
              </div>
              <div class="content">{{ item.content }}</div>
            </div>
            <div class="tip-footer">{{ tips.tipFooter }}</div>
          </div>
          <BarAnim v-if="state === MessageState.Update" />
          <transition name="slow-fade">
            <References
              v-if="showReferences && record.references && record.references.length"
              :questions="record.references"
            />
          </transition>
          <transition name="slow-fade">
            <RelatedQuestions
              v-if="
                showRelatedQuestions && record.relatedQuestions && record.relatedQuestions.length
              "
              :questions="record.relatedQuestions"
            />
          </transition>
          <div v-if="showSessionReadableLogButton" class="session-readable-log-row">
            <button type="button" class="session-readable-log-btn" @click="openSessionReadableLog">
              打开日志
            </button>
          </div>
        </div>
        <transition name="slow-fade">
          <FeedbackWidget
            v-if="shouldRenderFeedback"
            :id="record.id"
            :feedback="localFeedback"
            :content="copyableContent"
            @change="handleFeedbackChange"
          />
        </transition>
      </div>
    </Transition>
  </div>
  <Teleport to="body">
    <div v-if="refLinksPanelVisible" class="ref-links-viewer-modal">
      <transition name="ref-links-panel">
        <div v-if="refLinksPanelVisible" class="ref-links-viewer-content">
          <div class="ref-links-viewer-header">
            <div class="ref-links-viewer-title">参考资料</div>
            <button type="button" class="ref-links-viewer-close" @click.stop="closeRefLinksPanel">
              <svg
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1 1L13 13M13 1L1 13"
                  stroke="currentColor"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>
          <div class="ref-links-viewer-list">
            <div
              v-for="(item, index) in activeRefLinks"
              :key="`${item.title}-${index}`"
              class="ref-links-card"
            >
              <div class="ref-links-card-head">
                <div class="ref-links-card-title">{{ item.title || "参考资料" }}</div>
                <div v-if="item.type" class="ref-links-card-tag">{{ item.type }}</div>
              </div>
              <!-- 来源元信息：发布机构 / 发布或更新时间（见接口文档 §9 source 统一字段） -->
              <div v-if="getRefLinkMeta(item)" class="ref-links-card-content">
                {{ getRefLinkMeta(item) }}
              </div>
              <div v-if="item.content" class="ref-links-card-content">{{ item.content }}</div>
              <a
                v-if="item.linkUrl"
                class="ref-links-card-link"
                :href="item.linkUrl"
                target="_blank"
                rel="noopener noreferrer"
              >
                查看详情
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 12 12"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M1.33333 12C0.966667 12 0.652778 11.8694 0.391667 11.6083C0.130556 11.3472 0 11.0333 0 10.6667V1.33333C0 0.966667 0.130556 0.652778 0.391667 0.391667C0.652778 0.130556 0.966667 0 1.33333 0H6V1.33333H1.33333V10.6667H10.6667V6H12V10.6667C12 11.0333 11.8694 11.3472 11.6083 11.6083C11.3472 11.8694 11.0333 12 10.6667 12H1.33333ZM4.46667 8.46667L3.53333 7.53333L9.73333 1.33333H7.33333V0H12V4.66667H10.6667V2.26667L4.46667 8.46667Z"
                    fill="#3525CD"
                  />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </Teleport>
  <DislikeDialog v-model:visible="showDislikeDialog" @confirm="handleDislikeConfirm" />
  <Toast :message="toastMessage" />
</template>
<script setup lang="ts">
import {
  computed,
  inject,
  onBeforeUnmount,
  onMounted,
  nextTick,
  provide,
  ref,
  watch,
  getCurrentInstance,
} from "vue";
import { MessageState } from "../stream-message-coordinator";
import { FeedbackType, From } from "@/types/record";
import { writeDmsFeedback } from "@/network/api/dms/chat-sessions-dms";
import DotsAnim from "../Common/DotsAnim.vue";
import BarAnim from "../Common/BarAnim.vue";
import FeedbackWidget from "../Common/FeedbackWidget.vue";
import DislikeDialog from "../Common/DislikeDialog.vue";
import Toast from "../Common/Toast.vue";
import QuestionSource from "../Common/QuestionSourceWidget.vue";
import defaultImage from "@/assets/img_break.svg";
import { computedOriginContentPosition, getQueryObj, sleep } from "../utils";
import { isMobile } from "@/utils";
import ReasoningWidget from "../Common/ReasoningWidget.vue";
import RelatedQuestions from "../Common/RelatedQuestionsWidget.vue";
import References from "../Common/References.vue";
import TextContent from "./TextContent.vue";
import FormContent from "./FormContent.vue";
import LinkURLContent from "./LinkURLContent.vue";
import ImageContent from "./ImageContent.vue";
import OfficeURLContent from "./OfficeURLContent.vue";
import ScopeContent from "./ScopeContent.vue";
import PolicyMatch from "./PolicyMatch.vue";
import PolicyListUpdatedMatch from "./PolicyListUpdatedMatch.vue";
import QuestionCard from "./QuestionCard.vue";
import {
  parseRefLinksContent,
  RecordRowTypes,
  StreamXMLFilter,
  type RefLinkItem,
} from "@/utils/stream-xml-filter";
import { jsonrepair } from "jsonrepair";
import { isInterruptedEmptyScopeMessage } from "@/utils/interrupted-message";
import {
  splitStreamingTextContentRows,
  trimDisplayTextContentEnd,
  trimDisplayTextContentStart,
} from "./text-content-utils";
import {
  isEmptyScopeRow,
  isRemovableEmptyScopeStatusRow,
  isRemovableScopePreludeTextRow,
  mergeScopeRecordRow,
  resolveBusinessScopeOutsideRow,
  shouldForcePendingScope,
} from "@/utils/scope-record-rows";
import { createModalMutex, MODAL_MUTEX_KEY } from "../business-assistant/modal-mutex";

enum RecordRowStates {
  Pending = "pending",
  Displaying = "displaying",
  Displayed = "displayed",
}

// 定义 displayRecordRow 类型
type DisplayRecordRow = {
  id: number;
  type: RecordRowTypes;
  state: RecordRowStates;
  content: string;
  [key: string]: any;
};

interface Props {
  aspect?: string;
  record?: any;
  content?: string;
  options?: { option: string }[];
  theme?: any;
  state?: MessageState | string | number;
  rect?: {
    top: number;
    height: number;
  };
  type?: string;
  human?: any;
  isLastRecord?: boolean;
  sessionViewedBefore?: boolean;
  sessionId?: string;
  enableFeedback?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  aspect: "16/9",
  rect: () => ({
    top: 0,
    height: 0,
  }),
  type: "default",
});

const emit = defineEmits([
  "changeIdleState",
  "feedback",
  "displayContentChange",
  "displayMediaChange",
  "refreshScroll",
  "scopeExitStateChange",
  "scopeHeightLockChange",
  "typewriterStateChange",
]);

const policyMatchSessionId = computed(
  () => props.record?.session || props.sessionId || globalThis.currentSession || ""
);

const recordRootRef = ref<HTMLElement | null>(null);
const businessScopeOutsideRef = ref<HTMLElement | null>(null);
const textAnimWrapper = ref();
const showTextAnim = ref(false);
const localFeedback = ref<FeedbackType>(FeedbackType.None);
const showDislikeDialog = ref(false);
const toastMessage = ref("");
let pendingDislikeRecordId: string | number | null = null;
let toastTimer: ReturnType<typeof setTimeout> | undefined;
const isFormQueryMode = getQueryObj("mode") === "form";
const showRelatedQuestions = ref(false);
const showReferences = ref(false);
const refLinksPanelVisible = ref(false);
const activeRefLinks = ref<RefLinkItem[]>([]);

// 互斥面板管理
const businessRecordInstanceId = `BR-${Math.random().toString(36).slice(2, 7)}`;
const refLinksModalId = Symbol(`${businessRecordInstanceId}:ref-links`);
const modalMutex = inject(MODAL_MUTEX_KEY, null) ?? createModalMutex();
provide(MODAL_MUTEX_KEY, modalMutex);
let unregisterRefLinksModal: (() => void) | undefined;

function showToast(message: string) {
  toastMessage.value = message;
  if (toastTimer) clearTimeout(toastTimer);
  toastTimer = setTimeout(() => {
    toastMessage.value = "";
  }, 3000);
}

function openDislikeDialog(recordId: string | number) {
  pendingDislikeRecordId = recordId;
  showDislikeDialog.value = true;
}

// 反馈写入 DMS 的问答记录（栏目 1889 的 c_feedback_*），按 c_record_id 定位那一行。
// recordId 就是 AI 消息 id，与写入时的 c_record_id 是同一个值（见 chat-sessions-dms.ts）
function submitLikeFeedback(recordId: string | number) {
  void writeDmsFeedback({
    recordId: String(recordId),
    sessionId: policyMatchSessionId.value,
    status: FeedbackType.Like,
  });
}

function cancelFeedback(recordId: string | number) {
  void writeDmsFeedback({
    recordId: String(recordId),
    sessionId: policyMatchSessionId.value,
    status: FeedbackType.None,
  });
}

function handleDislikeConfirm(option: string, remark: string) {
  if (pendingDislikeRecordId === null) return;
  void writeDmsFeedback({
    recordId: String(pendingDislikeRecordId),
    sessionId: policyMatchSessionId.value,
    status: FeedbackType.Dislike,
    option,
    remark,
  });
  localFeedback.value = FeedbackType.Dislike;
  pendingDislikeRecordId = null;
}

provide("feedbackControl", { openDislikeDialog, submitLikeFeedback, cancelFeedback });
provide("dislikeDialogControl", { openDislikeDialog });
provide("toastControl", { showToast });

const { setFormOptions } = inject("formOptionsControl") as any;

const instance = getCurrentInstance();
const $mediaViewer = instance?.proxy?.$mediaViewer as any;

const record = computed(() => {
  let _record = props.record;
  if (!_record) return {};
  _record.isUser = _record.role === "user" || _record.from === From.User;
  _record.isAI = _record.role === "ai" || _record.from === From.AI;
  _record.isTips = _record.from === From.Tips;

  return _record;
});
const xmlFilter = new StreamXMLFilter({
  customProcessor: new Map([
    [
      RecordRowTypes.UIForm,
      (payload: { schema: string; attrs: Record<string, string> }) => {
        setFormOptions({
          visible: true,
          enable: true,
          mode: "form",
          schema: JSON.parse(jsonrepair(payload.schema)) || [],
          title: payload.attrs.title,
        });
      },
    ],
  ]),
});
const { stopSpeech, handleEndSpeech } = inject("speechControl") as any;
let isEffectHumanState: any;

const mediaList = computed(() => props.record?.mediaList);
const userAttachments = computed(() => (record.value.isUser ? record.value.attachments || [] : []));
const previewableUserAttachmentUrls = computed(() =>
  userAttachments.value
    .filter((attachment) => attachment.isImage && attachment.url)
    .map((attachment) => String(attachment.url || "").trim())
    .filter(Boolean)
);
const showUserAttachments = computed(() => userAttachments.value.length > 0);
const displayMediaList = ref<any[]>([]);
const isMobileDevice = isMobile();
enum SchedulerTaskState {
  Idle = "idle",
}
const getRefLinkItems = (content: string) => parseRefLinksContent(content);

// 复制按钮只应复制可读正文：去掉 <scope>、<!-- POLICY_TABLE -->、<ref_links>、
// <question-cards>、<image-scope>（企业微信二维码）等协议标记，
// 避免复制出一大段 JSON 或图片地址。
//
// 注意不能用 getStreamPlainText()：它对整段内容做一次性解析，而过滤器在遇到
// <!-- POLICY_TABLE 时会把同批 buffer 里位于它之前的内容直接当纯文本输出，
// 导致 scope 标记被当成正文保留下来。这里直接剥离标记，结果与内容分片方式无关。
const copyableContent = computed(() => {
  const raw = String(record.value.content || props.content || "");
  return raw
    .replace(/<scope\b[^>]*>[\s\S]*?<\/scope>\s*/gi, "")
    .replace(/<ref_links\b[^>]*>[\s\S]*?<\/ref_links>\s*/gi, "")
    .replace(/<question-cards\b[^>]*>[\s\S]*?<\/question-cards>\s*/gi, "")
    .replace(/<image-scope\b[^>]*>[\s\S]*?<\/image-scope>\s*/gi, "")
    .replace(/<!--\s*POLICY_TABLE[\s\S]*?POLICY_TABLE\s*-->\s*/gi, "")
    .replace(/<\/?silence\b[^>]*>/gi, "")
    .replace(/<\/?scope\b[^>]*>/gi, "")
    .replace(/\n{3,}/g, "\n\n")
    .trim();
});

// 参考资料卡片的元信息行：发布机构 + 发布/更新时间。
// 字段来自接口文档 §9「原始 source 对象中的统一字段」，经 originalData 透传。
const getRefLinkMeta = (item: any) => {
  const data = item?.originalData || {};
  const parts: string[] = [];
  if (data.publisher) {
    parts.push(String(data.publisher));
  }
  const published = data.published_text || data.updated_text;
  if (published) {
    parts.push(/^\d{8}$/.test(String(published))
      ? `${String(published).replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3")} 更新`
      : String(published));
  }
  return parts.join(" · ");
};

const handleRefLinkChipClick = (event: MouseEvent, item: RefLinkItem) => {
  if (item.linkUrl) {
    return;
  }

  event.preventDefault();
};

const openRefLinksPanel = async (content: string) => {
  const items = getRefLinkItems(content);
  if (!items.length) {
    return;
  }

  const openTicket = modalMutex.requestOpen(refLinksModalId);
  await nextTick();
  if (!modalMutex.isCurrentRequest(refLinksModalId, openTicket)) return;

  activeRefLinks.value = items;
  refLinksPanelVisible.value = true;
  emitRefLinksPanelWidth();
};
const closeRefLinksPanel = () => {
  refLinksPanelVisible.value = false;
  modalMutex.release(refLinksModalId);
  emitRefLinksPanelWidth();
};

const emitRefLinksPanelWidth = () => {
  document.dispatchEvent(
    new CustomEvent("refLinksPanelWidthChange", {
      detail: { width: refLinksPanelVisible.value ? 480 : 0 },
    })
  );
};

watch(
  () => mediaList.value,
  (val) => {
    if (!val || val.length === 0 || timer) {
      return;
    }

    displayMediaList.value = val;
  }
);

const headMedia = computed(() => {
  if (!displayMediaList.value || displayMediaList.value.length === 0) {
    return {};
  }

  return displayMediaList.value[0];
});
const restMedia = computed(() => {
  if (!displayMediaList.value || displayMediaList.value.length === 0) {
    return [];
  }

  return displayMediaList.value.slice(1);
});

const getAttachmentExtension = (name: string) => name.split(".").pop()?.toUpperCase() || "FILE";

const formatAttachmentSize = (size: number) => {
  if (!Number.isFinite(size) || size <= 0) {
    return "";
  }

  if (size >= 1024 * 1024) {
    return `${(size / 1024 / 1024).toFixed(2)} MB`;
  }

  return `${Math.max(1, Math.round(size / 1024))} KB`;
};

const reasoningStatus = computed(() => {
  let status = "";

  if (
    (record.value.state === MessageState.Sending || record.value.state === MessageState.Success) &&
    !record.value.content
  ) {
    status = "thinking";
  } else {
    status = "certain";
  }

  return status;
});
const showInterruptedState = computed(() =>
  isInterruptedEmptyScopeMessage({
    ...record.value,
    state: props.state ?? record.value.state,
  })
);

const displayContent = ref("");
const originContent = ref(props.content || "");
const count = ref(0);
const mediaCount = ref(0);
const hasVisibleAnswerContent = ref(false);

const textRowTypingFinished = ref<Record<number, boolean>>({});
const textRowTypingActive = ref<Record<number, boolean>>({});
const imageRowRevealFinished = ref<Record<number, boolean>>({});
const imageRowRevealActive = ref<Record<number, boolean>>({});

// displayRecordRows 类型增强
const displayRecordRows = ref<DisplayRecordRow[]>([]);
const updateRecordRowIndex = ref(0);
const activeRecordState = computed(() => props.state ?? record.value.state);
const isForcePendingState = computed(
  () =>
    String(activeRecordState.value || "")
      .trim()
      .toLowerCase() === "forcepending"
);
const hasRecordTextContent = computed(
  () => String(record.value.content || props.content || "").trim().length > 0
);
const shouldRenderTextInstantly = computed(() => !record.value.isAI || !!record.value.history);
const canAnimateAiText = computed(
  () =>
    record.value.isAI &&
    !record.value.history &&
    !!props.isLastRecord &&
    activeRecordState.value !== MessageState.Stop
);
const isScopeForcePending = computed(() =>
  shouldForcePendingScope(
    activeRecordState.value,
    hasVisibleAnswerContent.value,
    MessageState.Finish,
    MessageState.Stop
  )
);
const isBusinessLoading = computed(() => {
  return (
    record.value.isAI &&
    isForcePendingState.value &&
    !hasRecordTextContent.value &&
    !hasVisibleAnswerContent.value
  );
});
const showLoadingDots = computed(() => {
  const hasNoDisplayedContent =
    displayRecordRows.value.length === 0 &&
    !showTextAnim.value &&
    displayMediaList.value.length === 0;

  return hasNoDisplayedContent && isBusinessLoading.value;
});

let timer: any;
let mediaTimer: any;
let lastRecordResizeObserver: ResizeObserver | null = null;
let lastObservedRecordHeight = 0;
const gapTime = 30;
const scopeExitFadeDurationMs = 300;
const scopeExitCollapseDurationMs = scopeExitFadeDurationMs;
let scopeExitTimer: number | null = null;
let scopeExitRevision = 0;
const scopeExitDebugStartedAt = performance.now();
const scopeRowElementMap = new WeakMap<DisplayRecordRow, HTMLElement>();
const recordHeightLock = ref<number | null>(null);
const scopeExitHeight = ref(0);
const scopeExitWidth = ref(0);
const isScopeExitCompensating = computed(() => scopeExitHeight.value > 0);
const isScopeExitBodyTransitionDisabled = ref(false);
const isLastAiStreamingRecord = computed(
  () =>
    props.isLastRecord &&
    record.value.isAI &&
    activeRecordState.value !== MessageState.Finish &&
    activeRecordState.value !== MessageState.Stop
);
const scopeExitBodyGapPx = 8;
const businessRecordBodyStyle = computed(() => ({
  "--scope-exit-offset": `${scopeExitHeight.value + (isScopeExitCompensating.value ? scopeExitBodyGapPx : 0)}px`,
}));
const recordRootStyle = computed(() => ({
  width: "100%",
  minHeight: recordHeightLock.value !== null ? `${recordHeightLock.value}px` : undefined,
  overflow: recordHeightLock.value !== null ? "hidden" : undefined,
}));
let changeFlag = 1;
const customFormType = ref("");

const businessScopeOutsideRow = computed(() => {
  const scopeRow = resolveBusinessScopeOutsideRow({
    variant: "business",
    record: record.value,
    displayRecordRows: displayRecordRows.value,
    hasVisibleAnswerContent: hasVisibleAnswerContent.value,
    activeRecordState: activeRecordState.value,
    finishState: MessageState.Finish,
    stopState: MessageState.Stop,
    allowFallbackPendingScope: !record.value.history,
  });
  if (
    scopeRow &&
    scopeRow.type === RecordRowTypes.Scope &&
    !scopeRow.exiting &&
    (activeRecordState.value === MessageState.Finish ||
      activeRecordState.value === MessageState.Stop)
  ) {
    return null;
  }

  if (record.value.history && hasHistoricalNonScopeContent.value) {
    return null;
  }

  return scopeRow;
});
const isOutsideScopeExiting = computed(() => Boolean(businessScopeOutsideRow.value?.exiting));
const shouldRenderBusinessRecordBody = computed(() => true);
const handleScopeAutoExit = (scopeRow: DisplayRecordRow | null) => {
  beginScopeExit(scopeRow);
};
const hasPolicyTableRow = computed(() =>
  displayRecordRows.value.some(
    (row) =>
      row.type === RecordRowTypes.PolicyTable || row.type === RecordRowTypes.PolicyListUpdated
  )
);
const hasHistoricalNonScopeContent = computed(() => {
  if (!record.value.history) {
    return false;
  }

  const rawContent = String(record.value.content || props.content || "");
  const contentWithoutScopes = rawContent
    .replace(/<\/?silence\b[^>]*>/gi, "")
    .replace(/<scope\b[^>]*>[\s\S]*?<\/scope>/gi, "");

  return contentWithoutScopes.trim().length > 0;
});
const hasRenderableNonScopeContent = computed(
  () =>
    hasHistoricalNonScopeContent.value ||
    hasInlineRenderableContent.value ||
    showLoadingDots.value ||
    showInterruptedState.value ||
    !!headMedia.value.type ||
    restMedia.value.length > 0 ||
    record.value.isTips ||
    activeRecordState.value === MessageState.Update ||
    showReferences.value ||
    showRelatedQuestions.value ||
    hasPolicyTableRow.value
);
const shouldRenderScopeRow = (row: DisplayRecordRow | null | undefined) => {
  if (!row || row.type !== RecordRowTypes.Scope) {
    return false;
  }

  if (record.value.history && hasRenderableNonScopeContent.value) {
    return false;
  }

  if (
    isEmptyScopeRow(row) &&
    (activeRecordState.value === MessageState.Finish ||
      activeRecordState.value === MessageState.Stop) &&
    !row.exiting
  ) {
    return false;
  }

  return (
    row.exiting ||
    (activeRecordState.value !== MessageState.Finish &&
      activeRecordState.value !== MessageState.Stop)
  );
};
const shouldRenderTextContentRow = (row: DisplayRecordRow) =>
  row.type === RecordRowTypes.Text && !isScopeExitCompensating.value;
const visibleDisplayRecordRows = computed(() =>
  displayRecordRows.value.filter(
    (row) => row.type !== RecordRowTypes.Scope || shouldRenderScopeRow(row)
  )
);
const inlineDisplayRecordRows = computed(() => {
  const outsideRow = businessScopeOutsideRow.value;
  if (!outsideRow) {
    return visibleDisplayRecordRows.value;
  }

  return visibleDisplayRecordRows.value.filter((row) => row !== outsideRow);
});
const isTextRowFullyCompleted = (row: DisplayRecordRow) =>
  // 文本行完成条件只认打字机动画结束事件（textRowTypingFinished[row.id]）。
  // 不能依赖 row.state === Displayed：段落边界（breakAfter）会把上一行提前标记为
  // Displayed，但此时打字机可能还没播完最后几个字，会导致下一行提前开始渲染。
  row.type !== RecordRowTypes.Text || textRowTypingFinished.value[row.id] === true;
const isImageRowFullyRevealed = (row: DisplayRecordRow) =>
  row.type !== RecordRowTypes.ImageContent || imageRowRevealFinished.value[row.id];
const hasUnfinishedRevealRows = computed(() =>
  inlineDisplayRecordRows.value.some(
    (row) =>
      (row.type === RecordRowTypes.Text && !isTextRowFullyCompleted(row)) ||
      (row.type === RecordRowTypes.ImageContent && !isImageRowFullyRevealed(row))
  )
);
const shouldDriveTypewriter = computed(
  () =>
    canAnimateAiText.value &&
    // F073：正文本身是真实增量流式到达的，再逐字重放等于凭空多等一遍 —— 关掉打字机
    // （TextContent 的 `instant || !activeTypewriter` 分支会转成即时渲染）
    !record.value.contentStreaming &&
    (activeRecordState.value !== MessageState.Finish || hasUnfinishedRevealRows.value)
);
const isSessionReadableLogButtonEnabled =
  import.meta.env.MODE === "production" || import.meta.env.MODE === "development";
const showSessionReadableLogButton = computed(
  () =>
    isSessionReadableLogButtonEnabled &&
    globalThis.policyMode !== "zhaoshang" &&
    record.value.isAI &&
    activeRecordState.value === MessageState.Finish
);
const shouldWaitForTypewriterCompletion = computed(
  () => canAnimateAiText.value && hasUnfinishedRevealRows.value
);

// 反馈组件显示策略：
// - 非 AI 消息：永不显示
// - 已评价（赞/踩/未选中）：始终显示
// - 历史会话（sessionViewedBefore）的 AI 消息：始终显示（不需要等动画）
// - 新消息：等 SSE 流结束 + 打字机/媒体动画都结束才显示
const shouldRenderFeedback = computed(() => {
  if (!record.value.isAI) return false;
  if (localFeedback.value !== FeedbackType.None) return true;
  if (props.sessionViewedBefore) return true;
  if (activeRecordState.value !== MessageState.Finish) return false;
  // 打字机 / 图片 reveal 还没结束：不显示
  if (shouldWaitForTypewriterCompletion.value) return false;
  // 媒体列表（图片/视频）还在渐进式加载：不显示
  if ((mediaList.value?.length || 0) > displayMediaList.value.length) return false;
  return true;
});
const emitTypewriterStateChange = (isTypingActive: boolean) => {
  console.log("[BusinessRecord][typewriter-state]", {
    recordId: record.value.id,
    isLastRecord: props.isLastRecord,
    isAI: record.value.isAI,
    isTypingActive,
    textRowTypingActive: { ...textRowTypingActive.value },
    imageRowRevealActive: { ...imageRowRevealActive.value },
  });
  emit("typewriterStateChange", {
    recordId: record.value.id,
    isTypingActive,
  });
};
const syncTypewriterState = () => {
  const isTypingActive = Boolean(
    props.isLastRecord &&
    record.value.isAI &&
    (Object.values(textRowTypingActive.value).some(Boolean) ||
      Object.values(imageRowRevealActive.value).some(Boolean))
  );

  console.log("[BusinessRecord][typewriter-sync]", {
    recordId: record.value.id,
    isLastRecord: props.isLastRecord,
    isAI: record.value.isAI,
    isTypingActive,
  });

  emitTypewriterStateChange(isTypingActive);
};
const visibleInlineDisplayRecordRows = computed(() => {
  if (!shouldDriveTypewriter.value && !hasUnfinishedRevealRows.value) {
    return inlineDisplayRecordRows.value;
  }

  const visibleRows: DisplayRecordRow[] = [];
  let revealBlocked = false;

  for (const row of inlineDisplayRecordRows.value) {
    if (revealBlocked) {
      continue;
    }

    if (row.type === RecordRowTypes.Text) {
      visibleRows.push(row);
      if (!isTextRowFullyCompleted(row)) {
        revealBlocked = true;
      }
      continue;
    }

    visibleRows.push(row);
    if (row.type === RecordRowTypes.ImageContent && !isImageRowFullyRevealed(row)) {
      revealBlocked = true;
    }
  }
  return visibleRows;
});
const hasInlineRenderableContent = computed(() =>
  inlineDisplayRecordRows.value.some((row) => {
    if (row.type === RecordRowTypes.Text) {
      return String(row.content || "").trim().length > 0;
    }

    return row.type !== RecordRowTypes.Scope && !!row.content;
  })
);
const shouldRenderRecordLine = computed(() => {
  if (showInterruptedState.value) {
    return true;
  }

  if (
    record.value.isAI &&
    !hasInlineRenderableContent.value &&
    !businessScopeOutsideRow.value &&
    !hasPolicyTableRow.value
  ) {
    return false;
  }

  if (!businessScopeOutsideRow.value) {
    return true;
  }

  return (
    inlineDisplayRecordRows.value.length > 0 ||
    showLoadingDots.value ||
    showInterruptedState.value ||
    !!headMedia.value.type ||
    restMedia.value.length > 0 ||
    record.value.isTips ||
    activeRecordState.value === MessageState.Update ||
    showReferences.value ||
    showRelatedQuestions.value
  );
});

const tips = ref({
  tipItems: [
    {
      title: "携带资料",
      content: "就诊前请准备好身份证件、就诊卡（如有）、以往的病历、检查报告和正在使用的药物清单。",
    },
    {
      title: "体格检查",
      content: "请您明天穿着宽松舒适、无金属的衣物，以便进行体格检查。",
    },
    {
      title: "陪同人员",
      content: "建议您有家人或朋友陪同前来，以确保检查过程的便利和舒适。",
    },
  ],
  tipFooter: "如果您有任何紧急情况或疑问，请联系我们0592-5050505（科室导诊台电话）",
});

const clearExistingTimer = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

const stripSilenceTags = (input: string) => {
  return String(input || "").replace(/<\/?silence\b[^>]*>/gi, "");
};

const processTextSections = (input: string) => {
  recordParser(input);
};

const isQuestionAnswersContent = (content: string) => {
  const trimmed = String(content || "").trim();
  if (!trimmed.startsWith("{")) {
    return false;
  }
  try {
    const parsed = JSON.parse(trimmed);
    return !!parsed && Array.isArray(parsed.answers);
  } catch {
    return false;
  }
};

const processRecordSections = (input: string) => {
  input = String(input || "");

  if (!input) {
    return;
  }

  if (record.value.isUser && isQuestionAnswersContent(input)) {
    updateLastRecordRow(input, RecordRowTypes.QuestionCards, RecordRowStates.Displayed);
    return;
  }

  const policyStartToken = "<!-- POLICY_TABLE";
  const policyEndToken = "POLICY_TABLE -->";
  let rest = input;

  while (rest.length > 0) {
    const policyStart = rest.indexOf(policyStartToken);
    if (policyStart === -1) {
      processTextSections(rest);
      return;
    }

    const normalText = rest.slice(0, policyStart);
    if (normalText) {
      processTextSections(normalText);
    }

    const policyEnd = rest.indexOf(policyEndToken, policyStart);
    if (policyEnd === -1) {
      recordParser(rest.slice(policyStart));
      return;
    }

    recordParser(rest.slice(policyStart, policyEnd + policyEndToken.length));
    rest = rest.slice(policyEnd + policyEndToken.length);
  }
};

const resetDisplayContent = () => {
  if (textAnimWrapper.value) {
    textAnimWrapper.value.innerHTML = "";
  }
  displayContent.value = "";
  displayRecordRows.value = [];
  textRowTypingFinished.value = {};
  textRowTypingActive.value = {};
  imageRowRevealFinished.value = {};
  imageRowRevealActive.value = {};
  hasVisibleAnswerContent.value = false;
  // ⚠️ scope 退场补偿态也要清：`isScopeExitCompensating` 为真时**正文行是隐藏的**
  // （见 shouldRenderTextContentRow），残留会让重写后的正文整段不显示
  clearScopeExitTimer();
  scopeExitHeight.value = 0;
  scopeExitWidth.value = 0;
  recordHeightLock.value = null;
  count.value = 0;
};

const clearScopeExitTimer = () => {
  if (scopeExitTimer === null) {
    return;
  }

  window.clearTimeout(scopeExitTimer);
  scopeExitTimer = null;
};

const getScopeExitSource = (scopeRow: DisplayRecordRow) =>
  scopeRow === businessScopeOutsideRow.value ? "outside" : "inline";

const getScopeRowElement = (scopeRow: DisplayRecordRow | null) => {
  if (!scopeRow) {
    return null;
  }

  if (scopeRow === businessScopeOutsideRow.value) {
    return businessScopeOutsideRef.value;
  }

  return scopeRowElementMap.get(scopeRow) || null;
};

const getScopeContentWidth = (scopeEl: HTMLElement | null) => {
  const scopeContentEl = scopeEl?.querySelector<HTMLElement>(".scope-content-wrap") || scopeEl;
  const width = scopeContentEl ? Math.ceil(scopeContentEl.getBoundingClientRect().width) : 0;
  return Number.isFinite(width) && width > 0 ? width : 0;
};

const setScopeRowRef = (scopeRow: DisplayRecordRow, el: HTMLElement | null) => {
  if (el) {
    scopeRowElementMap.set(scopeRow, el);
  } else {
    scopeRowElementMap.delete(scopeRow);
  }
};

const finalizeScopeExit = async (
  exitingRow: DisplayRecordRow,
  scopeSource: string,
  exitHeight: number,
  shouldLockRecordHeight: boolean,
  exitRevision: number
) => {
  if (exitRevision !== scopeExitRevision) {
    return;
  }

  const rowIndex = displayRecordRows.value.indexOf(exitingRow);
  if (rowIndex !== -1 && displayRecordRows.value[rowIndex]?.exiting) {
    displayRecordRows.value.splice(rowIndex, 1);
  }

  scopeExitHeight.value = 0;
  scopeExitWidth.value = 0;

  emit("scopeExitStateChange", {
    recordId: record.value.id,
    active: false,
  });

  await nextTick();

  window.requestAnimationFrame(() => {
    if (exitRevision !== scopeExitRevision) {
      return;
    }

    isScopeExitBodyTransitionDisabled.value = false;
  });
};

const beginScopeExit = (scopeRow: DisplayRecordRow | null) => {
  if (!scopeRow || scopeRow.type !== RecordRowTypes.Scope || scopeRow.exiting) {
    return;
  }

  if (!String(scopeRow.content || "").includes("</scope>")) {
    return;
  }

  const scopeEl = getScopeRowElement(scopeRow);
  const exitHeight = scopeEl ? Math.ceil(scopeEl.getBoundingClientRect().height) : 0;
  const exitWidth = getScopeContentWidth(scopeEl);
  const shouldLockRecordHeight = props.isLastRecord && exitHeight > 0;
  const scopeSource = getScopeExitSource(scopeRow);

  if (shouldLockRecordHeight && recordHeightLock.value === null) {
    const recordEl = recordRootRef.value;
    recordHeightLock.value = recordEl ? Math.ceil(recordEl.getBoundingClientRect().height) : null;
  }

  scopeRow.exiting = true;
  scopeExitHeight.value = exitHeight;
  scopeExitWidth.value = exitWidth;
  isScopeExitBodyTransitionDisabled.value = true;
  emit("scopeHeightLockChange", {
    recordId: record.value.id,
    active: shouldLockRecordHeight && exitHeight > 0,
    height: exitHeight,
  });
  emit("scopeExitStateChange", {
    recordId: record.value.id,
    active: true,
  });
  const exitingRow = scopeRow;
  const exitRevision = ++scopeExitRevision;

  clearScopeExitTimer();
  scopeExitTimer = window.setTimeout(() => {
    scopeExitTimer = null;
    if (exitRevision !== scopeExitRevision) {
      return;
    }

    void finalizeScopeExit(
      exitingRow,
      scopeSource,
      exitHeight,
      shouldLockRecordHeight,
      exitRevision
    );
  }, scopeExitCollapseDurationMs);
};

const updateDisplayContent = (newVal: string) => {
  for (let i = 0; i < displayContent.value.length; i++) {
    if (displayContent.value[i] !== newVal[i]) {
      displayContent.value =
        displayContent.value.substring(0, i) + newVal[i] + displayContent.value.substring(i + 1);
    }
  }
};

const syncRecordHeightLock = () => {
  if (!isLastAiStreamingRecord.value) {
    return;
  }

  const recordEl = recordRootRef.value;
  if (!recordEl) {
    return;
  }

  const nextHeight = Math.ceil(recordEl.getBoundingClientRect().height);
  if (!Number.isFinite(nextHeight) || nextHeight <= 0) {
    return;
  }

  recordHeightLock.value = Math.max(recordHeightLock.value ?? 0, nextHeight);
};

const scopeTitleReg = /title\s*=\s*(['"]?)([^'"\s>]+)\1/i;

const updateLastRecordRow = (
  text: string,
  type = RecordRowTypes.Text,
  state = RecordRowStates.Displaying
) => {
  let lastRow = displayRecordRows.value[displayRecordRows.value.length - 1];

  if (type === RecordRowTypes.Text) {
    text = stripSilenceTags(text);
    if (!lastRow || lastRow.state === RecordRowStates.Displayed || lastRow.type !== type) {
      text = trimDisplayTextContentStart(text);
    }
    if (text.length === 0) {
      return;
    }
  }

  const removeTrailingScopePreludeTextRows = () => {
    while (displayRecordRows.value.length > 0) {
      const trailingRow = displayRecordRows.value[displayRecordRows.value.length - 1];

      if (!isRemovableScopePreludeTextRow(trailingRow)) {
        break;
      }

      displayRecordRows.value.pop();
    }

    lastRow = displayRecordRows.value[displayRecordRows.value.length - 1];
  };

  const removeTrailingEmptyScopeStatusRows = () => {
    while (displayRecordRows.value.length > 0) {
      const trailingRow = displayRecordRows.value[displayRecordRows.value.length - 1];

      if (!isRemovableEmptyScopeStatusRow(trailingRow)) {
        break;
      }

      if (trailingRow.type === RecordRowTypes.Scope && !trailingRow.exiting) {
        beginScopeExit(trailingRow);
        break;
      }

      displayRecordRows.value.pop();
    }

    lastRow = displayRecordRows.value[displayRecordRows.value.length - 1];
  };

  if (type === RecordRowTypes.Scope) {
    removeTrailingScopePreludeTextRows();
  }

  if (
    type === RecordRowTypes.Scope &&
    mergeScopeRecordRow(displayRecordRows.value, { type, content: text, state })
  ) {
    return;
  }

  // 已经有一个空的 scope 但还在流式更新时，允许直接复用它并替换标题。
  if (
    type === RecordRowTypes.Scope &&
    lastRow &&
    lastRow.type === RecordRowTypes.Scope &&
    isEmptyScopeRow(lastRow)
  ) {
    lastRow.content = text;
    lastRow.state = state;
    return;
  }

  const hasVisibleContent =
    type === RecordRowTypes.Text ? String(text || "").trim().length > 0 : !!text;
  if (type !== RecordRowTypes.Scope && hasVisibleContent) {
    hasVisibleAnswerContent.value = true;
    removeTrailingEmptyScopeStatusRows();
  }

  if (type === RecordRowTypes.Text) {
    const currentTextContent =
      lastRow && lastRow.type === RecordRowTypes.Text && lastRow.state !== RecordRowStates.Displayed
        ? lastRow.content
        : "";
    const segments = splitStreamingTextContentRows(currentTextContent, text);

    if (segments.length === 0) {
      return;
    }

    if (lastRow && lastRow.type === RecordRowTypes.Scope && !lastRow.exiting) {
      beginScopeExit(lastRow);
    }

    for (const segment of segments) {
      lastRow = displayRecordRows.value[displayRecordRows.value.length - 1];

      if (!lastRow || lastRow.state === RecordRowStates.Displayed || lastRow.type !== type) {
        if (lastRow && lastRow.type !== type) {
          if (lastRow.type === RecordRowTypes.Text) {
            lastRow.content = trimDisplayTextContentEnd(lastRow.content);
          }
          lastRow.state = RecordRowStates.Displayed;
        }

        displayRecordRows.value.push({
          id: updateRecordRowIndex.value++,
          type: type,
          content: "",
          state: RecordRowStates.Pending,
        });

        lastRow = displayRecordRows.value[displayRecordRows.value.length - 1];
        if (type === RecordRowTypes.Text) {
          textRowTypingFinished.value[lastRow.id] = true;
        }
      }

      const segmentContent =
        lastRow.content.length === 0
          ? trimDisplayTextContentStart(segment.content)
          : segment.content;

      if (segmentContent.length > 0) {
        lastRow.content += segmentContent;
        textRowTypingFinished.value[lastRow.id] = false;
      }

      lastRow.state = state;

      if (segment.breakAfter) {
        lastRow.content = trimDisplayTextContentEnd(lastRow.content);
        lastRow.state = RecordRowStates.Displayed;
      }
    }

    return;
  }

  if (!lastRow || lastRow.state === RecordRowStates.Displayed || lastRow.type !== type) {
    if (lastRow && lastRow.type !== type) {
      if (lastRow.type === RecordRowTypes.Text) {
        lastRow.content = trimDisplayTextContentEnd(lastRow.content);
      }
      lastRow.state = RecordRowStates.Displayed;
    }

    displayRecordRows.value.push({
      id: updateRecordRowIndex.value++,
      type: type,
      content: "",
      state: RecordRowStates.Pending,
    });

    lastRow = displayRecordRows.value[displayRecordRows.value.length - 1];
    if (type === RecordRowTypes.Text) {
      textRowTypingFinished.value[lastRow.id] = true;
    } else if (type === RecordRowTypes.ImageContent) {
      imageRowRevealFinished.value[lastRow.id] = !shouldDriveTypewriter.value;
    }
  }

  if (type === RecordRowTypes.Text && text.length > 0) {
    textRowTypingFinished.value[lastRow.id] = false;
  }

  lastRow.content = text;
  lastRow.state = state;
};

const getLastRecordRow = () => {
  if (displayRecordRows.value.length === 0) {
    return null;
  }
  return displayRecordRows.value[displayRecordRows.value.length - 1];
};

// 优化和修正逻辑，确保 <form> 区间处理更严谨
const handleTimerTick = (val: string) => {
  if (count.value >= val.length) {
    clearExistingTimer();
    if (record.value.state === MessageState.Finish) {
      handleFinishEvent();
    }
    return;
  }

  updateDisplayContent(val);

  // 判断当前字符是否存在，防止越界
  if (typeof val[count.value] !== "undefined") {
    showTextAnim.value = false;
    // 添加当前字符到动画显示区
    addText(val[count.value]);
    // 通知外部内容有变化
    emit("displayContentChange");
    // 计数器自增，准备下一个字符
    count.value++;
  }
};

watch(
  () => record.value.content,
  (val) => {
    clearExistingTimer();

    if (!val || showInterruptedState.value) {
      changeFlag++;
      resetDisplayContent();
      return;
    }

    /**
     * ⚠️ 内容**不是纯追加**时必须整体重置再全量解析。
     *
     * 这里的增量解析只吃「比上次多出来的那一段」（`val.slice(count)`），
     * 所以消息内容被**整块重写**（不是往后追加）时，切出来的会是新内容的**中段**——
     * 那段中段会被当正文渲染出来（踩过：参考资料 JSON 的中段变成一坨文本显示在界面上）。
     *
     * 会整块重写的场景（F073 起）：
     * - 流式收尾的**卡片重排**（把政策卡片挪到正文之上）
     * - `answer_end` 与增量拼接不一致时的整块重建
     * - 撤草稿（内容被截短回基线）
     * 纯追加（流式 delta / answer_end 的尾缀补齐）仍走增量路径，不重置、不闪。
     */
    if (!val.startsWith(originContent.value)) {
      changeFlag++;
      resetDisplayContent();
      xmlFilter.reset(); // 解析器也是有状态的（buffer / 未闭合标签），一并清
    }

    const diffText = val.slice(count.value);
    processRecordSections(diffText);
    originContent.value = val;
    count.value = val.length;

    timer = setInterval(() => handleTimerTick(val), gapTime);
  }
);

// 反馈组件显示由 shouldRenderFeedback 控制：历史会话立即展示，
// 新消息等打字机/媒体动画结束（triggerMediaAndFeedback 内把
// localFeedback 切到 Unselected）后才展示。
watch(
  () => record.value.state,
  async (val) => {
    if (val === MessageState.Stop) {
      changeFlag++;

      if (timer) {
        clearInterval(timer);
        timer = null;
      }

      if (mediaTimer) {
        clearInterval(mediaTimer);
      }

      await sleep(200);
      let rawContent = computedOriginContentPosition(
        record.value.originContent,
        displayContent.value
      );
      stopSpeech({ answer: rawContent, record_id: record.value.id });
    } else if (!timer && val === MessageState.Finish) {
      handleFinishEvent();
    }
  }
);

const addMediaList = (localMediaList: any[], successCallback: Function) => {
  if (!localMediaList || localMediaList.length === 0) {
    successCallback();
    return;
  }

  if (mediaTimer) {
    clearInterval(mediaTimer);
  }

  mediaTimer = setInterval(() => {
    if (mediaCount.value >= localMediaList.length) {
      clearInterval(mediaTimer);
      successCallback();
      return;
    }

    mediaCount.value++;
    displayMediaList.value = localMediaList.slice(0, mediaCount.value);
  }, gapTime);
};

const addText = (text: string) => {
  if (record.value.state === MessageState.Stop) {
    return;
  }

  if (isMobileDevice) {
    displayContent.value += text;
    updateLastRecordRow(text);
    return;
  }

  if (!textAnimWrapper.value) {
    return;
  }

  let textSpan = document.createElement("span");

  let regex = /^[a-zA-Z0-9 ]+$/;
  if (regex.test(text)) {
    textSpan.className = "entry-anim quick";
  } else {
    textSpan.className = "entry-anim";
  }

  textSpan.innerHTML = text;
  textAnimWrapper.value.appendChild(textSpan);

  let currentFlag = changeFlag;

  const onAnimationEnd = () => {
    if (currentFlag !== changeFlag) {
      return;
    }

    textSpan.remove();
    displayContent.value += text;
    updateLastRecordRow(text);

    if (textAnimWrapper.value.innerHTML === "") {
      showTextAnim.value = false;
    }
  };

  setTimeout(onAnimationEnd, 200);
};

// Handle TextContent typing finished
const handleTypingFinished = (rowId: number) => {
  textRowTypingFinished.value[rowId] = true;
  textRowTypingActive.value[rowId] = false;
  console.log("[BusinessRecord][typing-finished]", {
    recordId: record.value.id,
    rowId,
    isLastRecord: props.isLastRecord,
  });
  syncTypewriterState();
  emit("refreshScroll");
};

const handleTypingStateChange = (rowId: number, isTypingActive: boolean) => {
  textRowTypingActive.value[rowId] = isTypingActive;
  if (isTypingActive) {
    textRowTypingFinished.value[rowId] = false;
  }
  console.log("[BusinessRecord][typing-state-change]", {
    recordId: record.value.id,
    rowId,
    isTypingActive,
    isLastRecord: props.isLastRecord,
  });
  syncTypewriterState();
};

const handleImageRevealFinished = (rowId: number) => {
  imageRowRevealFinished.value[rowId] = true;
  imageRowRevealActive.value[rowId] = false;
  console.log("[BusinessRecord][image-reveal-finished]", {
    recordId: record.value.id,
    rowId,
    isLastRecord: props.isLastRecord,
  });
  syncTypewriterState();
  emit("refreshScroll");
};

const handleImageRevealStateChange = (rowId: number, isRevealActive: boolean) => {
  imageRowRevealActive.value[rowId] = isRevealActive;
  if (isRevealActive) {
    imageRowRevealFinished.value[rowId] = false;
  }
  console.log("[BusinessRecord][image-reveal-state-change]", {
    recordId: record.value.id,
    rowId,
    isRevealActive,
    isLastRecord: props.isLastRecord,
  });
  syncTypewriterState();
};

const openSessionReadableLog = () => {
  const sessionId = localStorage.getItem("ba_current_session_id");
  if (!sessionId) {
    return;
  }

  const date = new Date().toLocaleDateString("en-CA");
  window.open(
    `https://qingpu-data-api.metamaker.cn/llms/qingpu/debug/session-readable-log?date=${date}&session_id=${sessionId}`
  );
};

const observeLastRecordHeight = () => {
  lastRecordResizeObserver?.disconnect();
  lastRecordResizeObserver = null;
  lastObservedRecordHeight = 0;

  const target = recordRootRef.value;
  if (!target || typeof ResizeObserver === "undefined") {
    return;
  }

  lastObservedRecordHeight = target.getBoundingClientRect().height;
  syncRecordHeightLock();
  lastRecordResizeObserver = new ResizeObserver((entries) => {
    const nextHeight = entries[0]?.contentRect.height ?? target.getBoundingClientRect().height;

    if (!props.isLastRecord) {
      lastObservedRecordHeight = nextHeight;
      return;
    }

    syncRecordHeightLock();

    const heightGrowth = nextHeight - lastObservedRecordHeight;
    if (lastObservedRecordHeight > 0 && heightGrowth > 0) {
      emit("refreshScroll", { heightGrowth });
    }

    lastObservedRecordHeight = nextHeight;
  });
  lastRecordResizeObserver.observe(target);
};

const handleFinishEvent = () => {
  if (showInterruptedState.value) {
    return;
  }

  handleEndSpeech({
    answer: record.value.originContent,
    record_id: record.value.id,
  });

  const triggerMediaAndFeedback = async () => {
    addMediaList(mediaList.value, async () => {
      if (props.enableFeedback && !isFormQueryMode && localFeedback.value === FeedbackType.None) {
        localFeedback.value = FeedbackType.Unselected;
      }

      if (record.value.references && record.value.references.length) {
        showReferences.value = true;
      }

      if (record.value.relatedQuestions && record.value.relatedQuestions.length) {
        await sleep(500);
        showRelatedQuestions.value = true;
      }
    });

    emit("displayMediaChange");
  };

  const waitAllTypingFinished = () => {
    if (!shouldWaitForTypewriterCompletion.value) {
      triggerMediaAndFeedback();
      return;
    }

    setTimeout(waitAllTypingFinished, 100);
  };

  waitAllTypingFinished();
};

watch(
  isLastAiStreamingRecord,
  (isStreaming) => {
    if (!isStreaming) {
      recordHeightLock.value = null;
      return;
    }

    syncRecordHeightLock();
  },
  { immediate: true }
);

onMounted(() => {
  unregisterRefLinksModal = modalMutex.register(refLinksModalId, {
    close: closeRefLinksPanel,
    isOpen: () => refLinksPanelVisible.value,
  });
  observeLastRecordHeight();

  const initialContent = props.content || "";
  if (initialContent && !showInterruptedState.value) {
    processRecordSections(initialContent);
    originContent.value = initialContent;
    count.value = initialContent.length;
  }
});

onBeforeUnmount(() => {
  closeRefLinksPanel();
  unregisterRefLinksModal?.();
  emitTypewriterStateChange(false);
  lastRecordResizeObserver?.disconnect();
  lastRecordResizeObserver = null;
  clearScopeExitTimer();
  scopeExitRevision += 1;

  if (!isEffectHumanState || !props.human) {
    return;
  }
  if (isEffectHumanState.getTaskState == SchedulerTaskState.Idle) {
    return;
  }
  if (isEffectHumanState != props.human.getCurrentState) {
    return;
  }
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  props.human.setMainAnimationNameImmediateEffective(
    props.human.getIdlePoses[0],
    SchedulerTaskState.Idle
  );
});

let formBuffer = "";

function recordParser(input: string) {
  const resultRows = xmlFilter.processChunk(input);
  resultRows.forEach((row) => {
    updateLastRecordRow(row.content, row.type, RecordRowStates.Displaying);
  });
}

// 流式处理文本，自动分段
// 处理流式和完整输入，支持断续和完整的 val

function openPreview(media: any, index: number, e: any) {
  emit("changeIdleState", "interruptSpeech");

  let rect = e.currentTarget?.getBoundingClientRect?.() || e.target.getBoundingClientRect();
  $mediaViewer.openModal({
    index,
    media: { ...media, rect },
    list: record.value.mediaList,
  });
}

const getUserAttachmentPreviewIndex = (attachment: any) => {
  const url = String(attachment?.url || "").trim();
  if (!url) {
    return 0;
  }

  const index = previewableUserAttachmentUrls.value.findIndex((item) => item === url);
  return index >= 0 ? index : 0;
};

function handleError(e: any) {
  e.target.style.objectFit = "none";
  e.target.src = defaultImage;
}

async function handleFeedbackChange(feedback: FeedbackType) {
  localFeedback.value = feedback;
  // [已移除] 反馈统计埋点：统计接口（老接口）已按用户要求删除（2026-09-18）。
  // 反馈本身仍写入 DMS（见 submitLikeFeedback / cancelFeedback / handleDislikeConfirm）
  emit("feedback", feedback, record.value.id);
}
</script>
<style lang="scss">
@use "./record-theme.scss";

.record-modal-wrap {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
}

.chat-record-line {
  font-size: 15px;
  pointer-events: auto;
  transition: all 0.3s ease-in-out;
  animation: slide-up-fade 0.3s forwards cubic-bezier(0.22, 1, 0.36, 1);

  &.with-feedback-margin {
    padding-bottom: 8px;
  }

  &.with-feedback-margin-rated {
    padding-bottom: 8px;
  }
}

.chat-record-me {
  background: rgba(176, 198, 253, 0.18);
  color: #333333;
  text-align: center;
  /* title/h5_regular */
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding: 12px 15px 12px 15px;
  border-radius: 16px 16px 4px 16px;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: inline-block;
  margin-left: 10px;
  align-self: flex-end;
  flex-shrink: 0;
  text-align: left;
  position: relative;
  transform-origin: right bottom;

  span {
    &::selection {
      background: rgba(24, 144, 255, 0.24);
    }
  }

  &.full-mode {
    // background-color: rgba(176, 198, 253, 0.65);
    // color: #303133;
  }

  &.desktop {
    color: #000;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    background: linear-gradient(180deg, rgba(222, 231, 255, 0.1) 0%, rgba(222, 231, 255, 0.2) 100%);
    position: relative;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      /* 控制描边厚度 */
      background: radial-gradient(
        70.66% 143.6% at 37.72% 0%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      );

      /* 关键：中间镂空，仅保留“描边” */
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;

      pointer-events: none;
      /* 不挡交互 */
      z-index: 1;
      /* 在内容之上 */
    }
  }
}

.chat-record-ai {
  min-width: 45px;
  // background: rgba(255, 255, 255, 0.75);
  position: relative;
  // box-shadow: inset 1px 1px 44px rgba(255, 255, 255, 0.17), inset 0px -10px 25px rgba(255, 255, 255, 0.2), inset 0px 4px 19px rgba(255, 255, 255, 0.36);
  border-radius: 0px 10px 10px 10px;
  color: rgba(48, 49, 51, 1);
  /* title/h5_regular */
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  // padding: 12px 15px 12px 15px;
  margin-bottom: 12px;
  // backdrop-filter: blur(8px);
  // -webkit-backdrop-filter: blur(8px);
  margin-right: 10px;
  display: inline-block;
  text-align: left;
  flex-shrink: 0;
  transform-origin: left bottom;

  span {
    &::selection {
      background: rgb(200, 204, 207);
    }
  }

  &.full-mode {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.record--business.ba-record-ai.is-loading {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.business-scope-content-outside {
  display: block;
  margin-bottom: 8px;
  text-align: left;
}

.business-record-body {
  min-width: 0;
  max-width: 100%;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.business-record-body.is-scope-exit-transition-disabled {
  transition: none !important;
}

.business-record-body.is-scope-exiting {
  transform: translateY(calc(var(--scope-exit-offset, 0px) * -1));
}

.session-readable-log-row {
  display: flex;
  margin-top: 8px;
}

.session-readable-log-btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(53, 37, 205, 0.08);
  color: #3525cd;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.session-readable-log-btn:hover {
  background: rgba(53, 37, 205, 0.14);
}

.ba-ref-links-summary {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(199, 196, 216, 0.2);
  color: #141b2b;
}

.ba-ref-links-summary-title {
  margin-bottom: 8px;
  color: rgba(70, 69, 85, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.ba-ref-links-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.ba-ref-links-chip-list {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.ba-ref-links-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 198px;
  height: 25px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgb(225, 232, 252);
  color: #3525cd;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.ba-ref-links-chip-index {
  color: #3525cd;
  font-weight: 500;
  flex-shrink: 0;
}

.ba-ref-links-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 198px;
}

.ba-ref-links-more {
  height: 25px;
  padding: 3px 10px;
  border-radius: 4px;
  outline: none;
  border: none;
  background: rgb(225, 232, 252);
  color: #3525cd;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.ba-ref-links-more:hover {
  background: #e2dfff;
}

.ref-links-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
}

.ref-links-viewer-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: #ffffff;
  box-shadow: -12px 0 32px rgba(20, 27, 43, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.ref-links-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 12px;
  flex-shrink: 0;
}

.ref-links-viewer-title {
  color: #141b2b;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

.ref-links-viewer-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #464555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ref-links-viewer-close:hover {
  background: rgba(53, 37, 205, 0.06);
}

.ref-links-viewer-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 32px;
  overflow-y: auto;
  min-height: 0;
}

.ref-links-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid #e9edff;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 1.75px rgba(0, 0, 0, 0.05);
}

.ref-links-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ref-links-card-title {
  min-width: 0;
  color: #141b2b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-links-card-tag {
  max-width: 92px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(225, 232, 253, 1);
  color: #3525cd;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.ref-links-card-content {
  color: #464555;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-links-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  color: #3525cd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 8px;
  text-decoration: none;
}

.ref-links-card-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ref-links-panel-enter-active,
.ref-links-panel-leave-active {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ref-links-panel-enter-from,
.ref-links-panel-leave-to {
  transform: translateX(100%);
}

.chat-record-me .session-readable-log-row {
  justify-content: flex-end;
}

.chat-record-ai .session-readable-log-row {
  justify-content: flex-start;
}

.scope-content-shell {
  display: block;
  width: 100%;
  min-width: 0;
}

.business-record-body-fade-enter-active,
.business-record-body-fade-leave-active {
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.business-record-body-fade-enter-from,
.business-record-body-fade-leave-to {
  opacity: 0;
}

.business-record-body-fade-enter-to,
.business-record-body-fade-leave-from {
  opacity: 1;
}

.ba-message-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: flex-end;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
  pointer-events: auto;
  clear: both;

  &.desktop {
    max-width: min(420px, 60vw);
    margin-left: auto;
  }
}

.ba-message-attachment {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(199, 196, 216, 0.3);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 1.75px rgba(0, 0, 0, 0.05);
}

.ba-message-attachment.is-image {
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ba-message-attachment.is-image :deep(.image-content-wrap) {
  width: 100%;
  height: 100%;
  margin: 0;
}

.ba-message-attachment.is-file {
  min-width: 180px;
  max-width: 240px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.ba-message-attachment-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(53, 37, 205, 0.1);
  color: #3525cd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
}

.ba-message-attachment-info {
  min-width: 0;
  flex: 1;
}

.ba-message-attachment-name {
  overflow: hidden;
  color: #141b2b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ba-message-attachment-size {
  margin-top: 3px;
  color: #464555;
  font-size: 12px;
  line-height: 1.4;
}

.chat-record-tips {
  min-width: 45px;
  background: linear-gradient(180deg, #e0e7ff 0%, #f4f7ff 100%);
  border: 3px solid #ffffff;
  border-radius: 16px;
  position: relative;
  // box-shadow: inset 1px 1px 44px rgba(255, 255, 255, 0.17), inset 0px -10px 25px rgba(255, 255, 255, 0.2), inset 0px 4px 19px rgba(255, 255, 255, 0.36);
  color: #0a0b0d;
  /* title/h5_regular */
  font-family: PingFang SC;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding: 22px 15px 12px 15px;
  margin-top: 40px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-right: 30px;
  margin-left: 30px;
  display: inline-block;
  text-align: left;
  flex-shrink: 0;
  transform-origin: center bottom;

  span {
    &::selection {
      background: rgb(200, 204, 207);
    }
  }

  &.full-mode {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .tips-title {
    position: absolute;
    font-size: 14px;
    line-height: 24px;
    top: -15px;
    padding: 5px 60px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    margin-bottom: 8px;
    font-weight: bold;
    word-break: keep-all;

    .tips-deco {
      position: absolute;
      width: 90%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: -1;

      &.mirror {
        transform: scaleX(-100%);
        left: auto;
        right: 0;
      }

      &:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        left: -9px;
        border-top: 0 solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 13px solid #0013c3;
      }

      &:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient(180deg, #485bff 0%, #3e51f5 100%);
        transform: skewX(10deg);
        border-radius: 0 0 0 8px;
      }
    }
  }
}

.business-record .content {
  line-height: 24px;
  text-align: left;
  flex-shrink: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  word-break: break-word;
  user-select: text;

  &.isTip {
    display: none;
  }

  a {
    color: rgba(255, 255, 255, 1);
  }

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

.request-interrupted-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
  font-size: 13px;
  line-height: 22px;
  user-select: text;
}

.tips-wrap {
  padding-top: 5px;

  .tip {
    .title {
      display: flex;
      font-size: 14px;
      line-height: 24px;
      color: #333;
      font-weight: bold;
      margin-bottom: 6px;

      .order {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 22px;
        height: 22px;
        border-radius: 3px;
        color: #fff;
        background: linear-gradient(180deg, #485bff 0%, #3e51f5 100%);
        margin-right: 8px;
        font-family: PingFang SC;
      }
    }

    & + .tip {
      margin-top: 16px;
    }
  }

  .tip-footer {
    margin-top: 16px;
    font-weight: bold;
  }
}

@keyframes word-disappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.entry-anim {
  height: 14px;
  line-height: 14px;
  animation: text-fading 0.2s linear forwards;

  &.quick {
    animation: text-fading 0.1s linear forwards;
  }

  &.block {
    height: 0;
    display: block;
  }

  &.block + .block {
    margin-top: 14px;
  }
}

.recognizing-anim {
  margin-left: -4px;
}

@media screen and (width > 768px) {
  .desktop {
    .business-record .content {
      color: rgba(255, 255, 255, 1);

      a {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

@media (max-width: 767px) {
  .ba-ref-links-summary {
    max-width: 100%;
  }

  .ref-links-viewer-content {
    left: 0;
    width: 100vw;
    height: 100dvh;
    box-shadow: none;
  }

  .ref-links-viewer-header {
    padding: 32px 16px 12px;
  }

  .ref-links-viewer-title {
    font-size: 24px;
  }

  .ref-links-viewer-close {
    width: 40px;
    height: 40px;
  }

  .ref-links-viewer-list {
    gap: 12px;
    padding: 0 16px 32px;
  }

  .ref-links-card {
    padding: 16px;
    box-shadow: none;
  }

  .ref-links-card-head {
    align-items: flex-start;
  }

  .ref-links-card-title {
    font-size: 14px;
  }
}

@keyframes text-fading {
  0% {
    opacity: 0;
    // filter: blur(40px);
  }

  100% {
    opacity: 1;
    // filter: blur(0);
  }
}

.thinking-anim {
  display: inline-flex;
  height: 21px;
  vertical-align: top;
  align-items: center;

  .random-text {
    margin-left: -4px;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: left;
    vertical-align: top;
  }

  .insert-block {
    width: 14px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    transform: scale(0.4);
  }

  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }

  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    background: gray;
    animation: lds-ellipsis1 0.8s infinite;
  }

  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.8s infinite;
  }

  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis3 0.8s infinite;
  }

  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis4 0.8s infinite;
  }

  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(2);
      border-radius: 50%;
    }

    75% {
      transform: scale(2.5);
      border-radius: 4px;
    }

    100% {
      transform: scale(2);
      border-radius: 50%;
    }
  }

  @keyframes lds-ellipsis2 {
    0% {
      opacity: 0.5;
      transform: translate(24px, 0) scale(1.5);
    }

    75% {
      transform: translate(0, 0) scale(2);
    }

    100% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
  }

  @keyframes lds-ellipsis3 {
    0% {
      opacity: 0.25;
      transform: translate(24px, 0) scale(1);
    }

    100% {
      opacity: 0.5;
      transform: translate(0, 0) scale(1.5);
    }
  }

  @keyframes lds-ellipsis4 {
    0% {
      opacity: 0;
      transform: scale(0);
    }

    100% {
      opacity: 0.25;
      transform: scale(1);
    }
  }
}

.media-row {
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
}

.rest-media-wrapper {
  width: 140px;
  margin-bottom: 4px;
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
  box-sizing: border-box;
}

.media-placeholder {
  width: 140px;
  height: 140px;
  animation: zoom-in 0.3s forwards ease-in-out;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: white;

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    background-image: url(@/assets/play-button.svg);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }

  &.head-media {
    width: 140px;
    height: 140px;
  }

  &.several {
    width: 64.5px;
    height: 64.5px;
    margin-top: 3px;
    margin-right: 3px;

    &:nth-child(1),
    &:nth-child(2) {
      margin-top: 0;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    .play-button {
      width: 36px;
      height: 36px;
    }
  }

  &.multi {
    width: 42px;
    height: 42px;
    margin-top: 3px;
    margin-right: 3px;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      margin-top: 0;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }

    .play-button {
      width: 24px;
      height: 24px;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@keyframes zoom-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-up-fade {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>