<script setup lang="ts">
import type {
  ChatTimeHistoryRecord,
  ChatTimeTimelineItem,
} from '@easyflow/types';

import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import {
  createChatVariantSwitchController,
  ChatTimeHistoryMapper,
  ChatTimeTimelineBuilder,
  uuid,
} from '@easyflow/utils';

import {
  Delete,
  Plus,
  Promotion,
  Search,
} from '@element-plus/icons-vue';
import {
  ElButton,
  ElEmpty,
  ElInput,
  ElMessage,
  ElMessageBox,
  ElScrollbar,
  ElTag,
} from 'element-plus';
import { tryit } from 'radash';

import { api, sseClient } from '#/api/request';
import ChatTimeMessageContent from '#/components/chat/ChatTimeMessageContent.vue';
import ChatContextCapsuleBar from '#/components/chat-workspace/ChatContextCapsuleBar.vue';
import ChatMessageActionBar from '#/components/chat-workspace/ChatMessageActionBar.vue';
import ChatWelcomeAssistantPicker from '#/components/chat-workspace/ChatWelcomeAssistantPicker.vue';

interface AssistantOption {
  label: string;
  raw: any;
  value: string;
}

interface KnowledgeOption {
  label: string;
  value: string;
}

interface KnowledgeView {
  alias?: string;
  id: string;
  title: string;
}

interface SessionItem {
  accessAt?: string;
  assistantCode?: string;
  assistantId: string;
  assistantName?: string;
  continuable?: boolean;
  lastMessageAt?: string;
  lastMessagePreview?: string;
  messageCount?: number;
  readOnlyReason?: null | string;
  sessionId: string;
  title?: string;
}

interface OpenSessionOptions {
  scrollToLatest?: boolean;
  silent?: boolean;
  syncRoute?: boolean;
}

interface WorkspaceConversationView {
  records?: ChatTimeHistoryRecord[];
  total?: number;
  variantsByRound?: Record<string, ChatTimeHistoryRecord[]>;
}

interface SseRoundMeta {
  regenerate?: boolean;
  regenerateRoundId?: string;
  roundId?: string;
  roundNo?: number;
  selectedVariantIndex?: number;
  switchable?: boolean;
  variantCount?: number;
  variantIndex?: number;
}

const SESSION_PAGE_SIZE = 30;
const MESSAGE_AUTO_SCROLL_THRESHOLD = 48;
const SIDEBAR_LOAD_MORE_THRESHOLD = 120;

const route = useRoute();
const router = useRouter();

const assistants = ref<AssistantOption[]>([]);
const knowledgeOptions = ref<KnowledgeOption[]>([]);
const knowledgeMap = ref(new Map<string, KnowledgeView>());
const sessions = ref<SessionItem[]>([]);
const loadingSessions = ref(false);
const loadingMoreSessions = ref(false);
const loadingMessages = ref(false);
const loadingAssistants = ref(false);
const loadingKnowledgeOptions = ref(false);
const sending = ref(false);
const sessionSearchKeyword = ref('');
const currentAssistantId = ref<string>();
const currentAssistantDetail = ref<any>();
const currentSession = ref<any>();
const messageList = ref<ChatTimeTimelineItem[]>([]);
const extraKnowledgeIds = ref<string[]>([]);
const boundKnowledges = ref<KnowledgeView[]>([]);
const senderValue = ref('');
const sessionPage = ref({
  pageNumber: 0,
  pageSize: SESSION_PAGE_SIZE,
  total: 0,
});
const openSessionRequestToken = ref(0);
const activeStreamSessionId = ref('');
const autoScrollEnabled = ref(true);
const optimisticSessionIds = ref<Set<string>>(new Set());
const variantSwitchStateVersion = ref(0);
const sessionContextMenuVisible = ref(false);
const sessionContextMenuTarget = ref<null | SessionItem>(null);
const sessionContextMenuX = ref(0);
const sessionContextMenuY = ref(0);

const variantSwitchController = createChatVariantSwitchController<
  ChatTimeHistoryRecord,
  ChatTimeTimelineItem
>({
  mapRecords: (records) => ChatTimeHistoryMapper.fromHistoryRecords(records),
  onError: () => ElMessage.error('答案版本切换失败'),
  onStateChange: () => {
    variantSwitchStateVersion.value += 1;
  },
  replaceRound: (items, roundId, nextItems) =>
    ChatTimeTimelineBuilder.replaceRoundMessages(items, roundId, nextItems),
});

const currentSessionId = computed(() => {
  const queryValue = route.query.sessionId;
  if (!queryValue) {
    return '';
  }
  return String(queryValue);
});

const hasMessages = computed(() => messageList.value.length > 0);
const currentDisplayAssistant = computed(
  () => currentSession.value?.assistant || currentAssistantDetail.value,
);
const composerAssistantName = computed(() => {
  if (currentAssistantDetail.value?.title) {
    return currentAssistantDetail.value.title;
  }
  return assistants.value.find((item) => item.value === currentAssistantId.value)?.label || '';
});
const activeAssistantName = computed(() => {
  if (currentDisplayAssistant.value?.title) {
    return currentDisplayAssistant.value.title;
  }
  if (currentDisplayAssistant.value?.name) {
    return currentDisplayAssistant.value.name;
  }
  if (currentSession.value?.assistantName) {
    return currentSession.value.assistantName;
  }
  return composerAssistantName.value;
});
const currentSessionTitle = computed(() => currentSession.value?.title || '新对话');
const isReadOnly = computed(() => currentSession.value?.continuable === false);
const isWelcomeComposerState = computed(() => {
  return !hasMessages.value && !currentSession.value?.sessionId;
});
const composerLocked = computed(() => isReadOnly.value || !currentAssistantId.value);
const contextSelectorDisabled = computed(() => isReadOnly.value || sending.value);
const canCreateSession = computed(() => !sending.value);
const canSend = computed(
  () =>
    !sending.value &&
    !composerLocked.value &&
    !!currentAssistantId.value &&
    !!senderValue.value.trim(),
);
const hasMoreSessionRecords = computed(
  () => sessions.value.length < (sessionPage.value.total || 0),
);
const canLoadMoreSessions = computed(
  () =>
    !loadingSessions.value &&
    !loadingMoreSessions.value &&
    hasMoreSessionRecords.value,
);
const selectedSessionKey = computed(() => {
  return String(currentSession.value?.sessionId || '');
});
const latestAssistantMessage = computed(() => {
  return [...messageList.value]
    .reverse()
    .find((item) => item.role === 'assistant');
});
const latestAssistantMessageId = computed(
  () => latestAssistantMessage.value?.id || '',
);
const displayedBoundKnowledges = computed(() => {
  if (!isReadOnly.value) {
    return boundKnowledges.value;
  }
  return (currentSession.value?.boundKnowledges || []).map((item: any) => ({
    alias: item.alias,
    id: String(item.id),
    title: item.title,
  }));
});
const displayedExtraKnowledgeIds = computed(() => {
  if (!isReadOnly.value) {
    return extraKnowledgeIds.value;
  }
  return (currentSession.value?.extraKnowledges || []).map((item: any) =>
    String(item.id),
  );
});
const displayedExtraKnowledges = computed(() => {
  if (isReadOnly.value) {
    return (currentSession.value?.extraKnowledges || []).map((item: any) => ({
      alias: item.alias,
      id: String(item.id),
      title: item.title,
    }));
  }
  return extraKnowledgeIds.value
    .map((id) => resolveKnowledgeView(id))
    .filter(Boolean) as KnowledgeView[];
});
const editableKnowledgeIds = computed(() => {
  return isReadOnly.value ? [] : extraKnowledgeIds.value;
});
const extraKnowledgeOptionList = computed(() => {
  const excluded = new Set(boundKnowledges.value.map((item) => item.id));
  for (const selectedId of extraKnowledgeIds.value) {
    excluded.add(String(selectedId));
  }
  return knowledgeOptions.value.filter((item) => !excluded.has(String(item.value)));
});
const filteredSessions = computed(() => {
  const keyword = sessionSearchKeyword.value.trim().toLowerCase();
  if (!keyword) {
    return sessions.value;
  }
  return sessions.value.filter((session) => {
    return [
      resolveSessionLabel(session),
      session.lastMessagePreview,
      session.assistantName,
    ].some((value) => String(value || '').toLowerCase().includes(keyword));
  });
});
const groupedSessions = computed(() => {
  const today: SessionItem[] = [];
  const recent: SessionItem[] = [];
  const earlier: SessionItem[] = [];
  const now = new Date();
  const startOfToday = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate(),
  ).getTime();
  const recentThreshold = now.getTime() - 30 * 24 * 60 * 60 * 1000;
  for (const session of filteredSessions.value) {
    const time = resolveSessionSortTime(session);
    if (!Number.isFinite(time)) {
      earlier.push(session);
      continue;
    }
    if (time >= startOfToday) {
      today.push(session);
      continue;
    }
    if (time >= recentThreshold) {
      recent.push(session);
      continue;
    }
    earlier.push(session);
  }
  return [
    { key: 'today', title: '今天', items: today },
    { key: 'recent', title: '最近一个月', items: recent },
    { key: 'earlier', title: '更早', items: earlier },
  ].filter((group) => group.items.length > 0);
});
const greetingPrefix = computed(() => {
  const hour = new Date().getHours();
  if (hour < 12) {
    return '上午好';
  }
  if (hour < 18) {
    return '下午好';
  }
  return '晚上好';
});
const emptyConversationTitle = computed(() => {
  if (activeAssistantName.value) {
    return `开始和 ${activeAssistantName.value} 对话`;
  }
  return '选择智能体后开始对话';
});
const emptyConversationText = computed(() => {
  if (activeAssistantName.value) {
    return '输入消息后开始第一轮协作。';
  }
  return '先在欢迎区选择一个可用智能体。';
});
const composerPlaceholder = computed(() => {
  if (isReadOnly.value) {
    return resolveReadOnlyText(currentSession.value?.readOnlyReason) || '当前会话只支持查看历史';
  }
  if (!currentAssistantId.value) {
    return '请先选择智能体';
  }
  return '发送消息';
});

onMounted(async () => {
  window.addEventListener('click', closeSessionContextMenu);
  window.addEventListener('resize', closeSessionContextMenu);
  window.addEventListener('scroll', closeSessionContextMenu, true);
  window.addEventListener('keydown', handleWindowKeydown);
  await Promise.all([fetchAssistants(), fetchKnowledgeOptions(), fetchSessions()]);
  if (currentSessionId.value) {
    await openSessionById(currentSessionId.value, {
      scrollToLatest: false,
      silent: true,
    });
  }
});

watch(
  () => route.query.sessionId,
  async (sessionId) => {
    const normalized = sessionId ? String(sessionId) : '';
    if (!normalized) {
      return;
    }
    if (selectedSessionKey.value === normalized) {
      return;
    }
    await openSessionById(normalized, {
      scrollToLatest: false,
      silent: true,
    });
  },
);

onBeforeUnmount(() => {
  window.removeEventListener('click', closeSessionContextMenu);
  window.removeEventListener('resize', closeSessionContextMenu);
  window.removeEventListener('scroll', closeSessionContextMenu, true);
  window.removeEventListener('keydown', handleWindowKeydown);
});

async function fetchAssistants() {
  loadingAssistants.value = true;
  const [, res] = await tryit(api.get)('/api/v1/bot/list', {
    params: {
      publishedOnly: true,
      status: 1,
    },
  });
  loadingAssistants.value = false;
  if (res?.errorCode === 0) {
    assistants.value = (res.data || []).map((item: any) => ({
      label: item.title,
      raw: item,
      value: String(item.id),
    }));
    await selectDefaultAssistantIfNeeded();
  }
}

async function selectDefaultAssistantIfNeeded() {
  if (
    currentSessionId.value ||
    currentSession.value?.sessionId ||
    currentAssistantId.value ||
    assistants.value.length === 0
  ) {
    return;
  }
  await handleAssistantChange(assistants.value[0]?.value);
}

async function fetchKnowledgeOptions() {
  loadingKnowledgeOptions.value = true;
  const [, res] = await tryit(api.get)('/api/v1/documentCollection/list', {
    params: {
      publishedOnly: true,
    },
  });
  loadingKnowledgeOptions.value = false;
  if (res?.errorCode === 0) {
    knowledgeOptions.value = (res.data || []).map((item: any) => ({
      label: item.title,
      value: String(item.id),
    }));
    knowledgeMap.value = new Map(
      (res.data || []).map((item: any) => [
        String(item.id),
        {
          alias: item.alias,
          id: String(item.id),
          title: item.title,
        } satisfies KnowledgeView,
      ]),
    );
    if (currentAssistantDetail.value && !isReadOnly.value) {
      boundKnowledges.value = resolveBoundKnowledgesFromBot(currentAssistantDetail.value);
      extraKnowledgeIds.value = extraKnowledgeIds.value.filter(
        (id) => !boundKnowledges.value.some((item) => item.id === id),
      );
    }
  }
}

async function fetchSessions(options: { append?: boolean } = {}) {
  const append = options.append === true;
  if (append) {
    if (!canLoadMoreSessions.value) {
      return;
    }
    loadingMoreSessions.value = true;
  } else {
    loadingSessions.value = true;
  }
  const nextPageNumber = append ? sessionPage.value.pageNumber + 1 : 1;
  const [, res] = await tryit(api.get)('/api/v1/chatWorkspace/sessions', {
    params: {
      pageNumber: nextPageNumber,
      pageSize: sessionPage.value.pageSize,
    },
  });
  if (append) {
    loadingMoreSessions.value = false;
  } else {
    loadingSessions.value = false;
  }
  if (res?.errorCode === 0) {
    const records = (res.data?.records || []) as SessionItem[];
    sessions.value = append
      ? mergeSessionRecords(sessions.value, records)
      : mergeFreshSessionRecords(records);
    sessionPage.value.pageNumber = Number(res.data?.pageNumber || nextPageNumber);
    sessionPage.value.total = Math.max(
      Number(res.data?.total || sessions.value.length),
      sessions.value.length,
    );
  }
}

function mergeFreshSessionRecords(records: SessionItem[]) {
  const freshIds = new Set(records.map((item) => String(item.sessionId)));
  const optimisticIds = new Set(optimisticSessionIds.value);
  for (const sessionId of optimisticIds) {
    if (freshIds.has(sessionId)) {
      optimisticIds.delete(sessionId);
    }
  }
  optimisticSessionIds.value = optimisticIds;
  const preserved = sessions.value.filter((item) => {
    const sessionId = String(item.sessionId);
    return optimisticIds.has(sessionId) && !freshIds.has(sessionId);
  });
  return sortSessionRecords([...records, ...preserved]);
}

function mergeSessionRecords(current: SessionItem[], incoming: SessionItem[]) {
  const merged = new Map<string, SessionItem>();
  for (const item of [...current, ...incoming]) {
    const sessionId = String(item.sessionId);
    if (!merged.has(sessionId)) {
      merged.set(sessionId, {
        ...item,
        sessionId,
      });
    }
  }
  return sortSessionRecords(Array.from(merged.values()));
}

function upsertSessionRecord(
  session: SessionItem,
  options: { incrementTotal?: boolean } = {},
) {
  const normalizedSession = {
    ...session,
    assistantId: String(session.assistantId || ''),
    sessionId: String(session.sessionId),
  } satisfies SessionItem;
  const next = [...sessions.value];
  const currentIndex = next.findIndex(
    (item) => String(item.sessionId) === normalizedSession.sessionId,
  );
  const existed = currentIndex >= 0;
  if (existed) {
    next.splice(currentIndex, 1);
  }
  next.push({
    ...(existed ? sessions.value[currentIndex] : {}),
    ...normalizedSession,
  });
  sessions.value = sortSessionRecords(next);
  if (!existed && options.incrementTotal) {
    sessionPage.value.total += 1;
  } else {
    sessionPage.value.total = Math.max(sessionPage.value.total, sessions.value.length);
  }
}

function resolveSessionSortTime(session: SessionItem) {
  const time = new Date(session.lastMessageAt || '').getTime();
  return Number.isFinite(time) ? time : Number.NEGATIVE_INFINITY;
}

function sortSessionRecords(records: SessionItem[]) {
  return [...records].sort((a, b) => {
    const timeDiff = resolveSessionSortTime(b) - resolveSessionSortTime(a);
    if (timeDiff !== 0) {
      return timeDiff;
    }
    return String(b.sessionId || '').localeCompare(String(a.sessionId || ''));
  });
}

function createOptimisticSessionRecord(sessionId: string, prompt: string) {
  const now = new Date().toISOString();
  const normalizedPrompt = prompt.trim();
  return {
    accessAt: now,
    assistantCode: currentSession.value?.assistantCode || currentAssistantDetail.value?.alias,
    assistantId: String(currentAssistantId.value || ''),
    assistantName: activeAssistantName.value || composerAssistantName.value,
    continuable: true,
    lastMessageAt: now,
    lastMessagePreview: normalizedPrompt,
    messageCount: Math.max(Number(currentSession.value?.messageCount || 0), 0) + 1,
    readOnlyReason: null,
    sessionId,
    title: currentSession.value?.title || '新对话',
  } satisfies SessionItem;
}

function syncCurrentSessionRecord(partial: Partial<SessionItem> & { sessionId: string }) {
  const currentId = String(partial.sessionId);
  const existing = sessions.value.find((item) => String(item.sessionId) === currentId);
  if (!existing) {
    upsertSessionRecord(
      {
        accessAt:
          partial.accessAt ||
          currentSession.value?.accessAt ||
          currentSession.value?.lastMessageAt ||
          new Date().toISOString(),
        assistantId: String(partial.assistantId || currentAssistantId.value || ''),
        assistantName: partial.assistantName || activeAssistantName.value,
        continuable: partial.continuable ?? currentSession.value?.continuable ?? true,
        lastMessageAt:
          partial.lastMessageAt ||
          currentSession.value?.lastMessageAt ||
          new Date().toISOString(),
        lastMessagePreview: partial.lastMessagePreview || '',
        messageCount: Number(partial.messageCount || currentSession.value?.messageCount || 0),
        readOnlyReason: partial.readOnlyReason ?? currentSession.value?.readOnlyReason,
        sessionId: currentId,
        title: partial.title || currentSession.value?.title || '新对话',
      } as SessionItem,
      { incrementTotal: true },
    );
    return;
  }
  upsertSessionRecord(
    {
      ...existing,
      ...partial,
      assistantId: String(partial.assistantId || existing.assistantId || ''),
      sessionId: currentId,
    },
  );
}

function removeSessionRecord(sessionId: string) {
  const currentId = String(sessionId);
  optimisticSessionIds.value = new Set(
    [...optimisticSessionIds.value].filter((item) => item !== currentId),
  );
  const next = sessions.value.filter((item) => String(item.sessionId) !== currentId);
  if (next.length === sessions.value.length) {
    return;
  }
  sessions.value = next;
  sessionPage.value.total = Math.max(sessionPage.value.total - 1, sessions.value.length);
}

function resetComposerState(options?: { resetAssistant?: boolean }) {
  abortActiveStream();
  autoScrollEnabled.value = true;
  if (options?.resetAssistant !== false) {
    currentAssistantId.value = undefined;
    currentAssistantDetail.value = undefined;
    boundKnowledges.value = [];
    extraKnowledgeIds.value = [];
  }
  currentSession.value = undefined;
  messageList.value = [];
  senderValue.value = '';
}

async function enterWelcomeState() {
  resetComposerState();
  await router.replace({ query: {} });
}

async function handleAssistantChange(assistantId?: string) {
  const normalized = assistantId ? String(assistantId) : undefined;
  if (!isReadOnly.value && normalized === currentAssistantId.value) {
    return;
  }
  if (!normalized) {
    await enterWelcomeState();
    return;
  }
  abortActiveStream();
  const assistant = await fetchAssistantDetail(normalized);
  if (!assistant?.id) {
    ElMessage.warning('聊天助手不存在或已下架');
    await enterWelcomeState();
    return;
  }
  currentAssistantId.value = normalized;
  const assistantName =
    assistant.title ||
    assistant.name ||
    assistants.value.find((item) => item.value === normalized)?.label;
  currentAssistantDetail.value = assistant;
  boundKnowledges.value = resolveBoundKnowledgesFromBot(assistant);
  extraKnowledgeIds.value = [];
  currentSession.value = undefined;
  messageList.value = [];
  senderValue.value = '';
  if (assistantName) {
    currentAssistantDetail.value = {
      ...assistant,
      title: assistantName,
    };
  }
  await router.replace({ query: {} });
}

async function fetchAssistantDetail(assistantId: string) {
  const [, res] = await tryit(api.get)('/api/v1/bot/getDetail', {
    params: {
      id: assistantId,
      publishedOnly: true,
    },
  });
  if (res?.errorCode !== 0 || !res?.data) {
    return null;
  }
  return res.data;
}

async function ensureConversationSession() {
  if (currentSession.value?.sessionId) {
    return String(currentSession.value.sessionId);
  }
  const [, res] = await tryit(api.get)('/api/v1/bot/generateConversationId');
  if (res?.errorCode !== 0 || !res.data) {
    throw new Error('暂时无法创建会话，请稍后再试');
  }
  const sessionId = String(res.data);
  currentSession.value = {
    assistant: currentAssistantDetail.value
      ? {
          alias: currentAssistantDetail.value.alias,
          description: currentAssistantDetail.value.description,
          icon: currentAssistantDetail.value.icon,
          id: currentAssistantId.value,
          title: composerAssistantName.value,
        }
      : undefined,
    assistantId: currentAssistantId.value,
    assistantName: composerAssistantName.value,
    boundKnowledges: [...boundKnowledges.value],
    continuable: true,
    extraKnowledges: displayedExtraKnowledges.value,
    readOnlyReason: null,
    sessionId,
    title: '新对话',
  };
  return sessionId;
}

async function handleCreateSession() {
  await enterWelcomeState();
}

async function syncSessionRoute(sessionId?: string) {
  const normalized = String(sessionId || '');
  if (!normalized || currentSessionId.value === normalized) {
    return;
  }
  await router.replace({
    query: {
      sessionId: normalized,
    },
  });
}

async function requestSessionDetail(sessionId: string) {
  const [, detailRes] = await tryit(api.get)(
    `/api/v1/chatWorkspace/sessions/${sessionId}`,
  );
  if (detailRes?.errorCode !== 0) {
    return null;
  }
  return detailRes.data;
}

async function requestConversation(sessionId: string) {
  const [, res] = await tryit(api.get)(
    `/api/v1/chatWorkspace/sessions/${sessionId}/conversation`,
  );
  if (res?.errorCode !== 0) {
    return null;
  }
  return (res.data || {}) as WorkspaceConversationView;
}

function applyConversation(
  conversation: WorkspaceConversationView | null,
  sessionId: string,
) {
  const records = Array.isArray(conversation?.records)
    ? conversation.records
    : [];
  messageList.value = ChatTimeHistoryMapper.fromHistoryRecords(records);
  seedVariantCache(sessionId, conversation?.variantsByRound || {});
}

function seedVariantCache(
  sessionId: string,
  variantsByRound: Record<string, ChatTimeHistoryRecord[]>,
) {
  for (const [roundId, variants] of Object.entries(variantsByRound || {})) {
    if (!roundId || !Array.isArray(variants)) {
      continue;
    }
    variantSwitchController.cacheVariants(sessionId, roundId, variants);
  }
}

function applySessionDetail(detail: any, options?: { resetSender?: boolean }) {
  currentSession.value = detail;
  if (options?.resetSender !== false) {
    senderValue.value = '';
  }
  if (detail.continuable !== false) {
    currentAssistantId.value = detail.assistant?.id
      ? String(detail.assistant.id)
      : undefined;
    currentAssistantDetail.value = detail.assistant;
    boundKnowledges.value = (detail.boundKnowledges || []).map((item: any) => ({
      alias: item.alias,
      id: String(item.id),
      title: item.title,
    }));
    extraKnowledgeIds.value = (detail.extraKnowledges || []).map((item: any) =>
      String(item.id),
    );
  } else {
    currentAssistantId.value = undefined;
    currentAssistantDetail.value = undefined;
    boundKnowledges.value = [];
    extraKnowledgeIds.value = [];
  }
}

async function openSession(item: SessionItem) {
  closeSessionContextMenu();
  await openSessionById(String(item.sessionId), {
    scrollToLatest: true,
    syncRoute: true,
  });
}

function closeSessionContextMenu() {
  sessionContextMenuVisible.value = false;
  sessionContextMenuTarget.value = null;
}

function openSessionContextMenu(event: MouseEvent, session: SessionItem) {
  event.preventDefault();
  sessionContextMenuTarget.value = session;
  sessionContextMenuX.value = Math.min(event.clientX, window.innerWidth - 188);
  sessionContextMenuY.value = Math.min(event.clientY, window.innerHeight - 116);
  sessionContextMenuVisible.value = true;
}

function openSessionContextMenuByKeyboard(
  event: KeyboardEvent,
  session: SessionItem,
) {
  const target = event.currentTarget as HTMLElement | null;
  if (!target) {
    return;
  }
  const rect = target.getBoundingClientRect();
  sessionContextMenuTarget.value = session;
  sessionContextMenuX.value = Math.min(rect.right - 12, window.innerWidth - 188);
  sessionContextMenuY.value = Math.min(rect.top + 12, window.innerHeight - 116);
  sessionContextMenuVisible.value = true;
}

function handleSessionItemKeydown(event: KeyboardEvent, session: SessionItem) {
  if (event.key === 'Enter') {
    event.preventDefault();
    openSession(session);
    return;
  }
  if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
    event.preventDefault();
    openSessionContextMenuByKeyboard(event, session);
  }
}

function handleWindowKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    closeSessionContextMenu();
  }
}

async function openSessionById(
  sessionId: string,
  options: OpenSessionOptions = {},
) {
  abortActiveStream();
  const requestToken = ++openSessionRequestToken.value;
  loadingMessages.value = true;
  const detail = await requestSessionDetail(sessionId);
  if (requestToken !== openSessionRequestToken.value) {
    return false;
  }
  if (!detail) {
    loadingMessages.value = false;
    if (!options.silent) {
      ElMessage.warning('会话不存在或已删除');
    }
    if (currentSessionId.value === sessionId) {
      await router.replace({ query: {} });
    }
    return false;
  }
  applySessionDetail(detail);
  syncCurrentSessionRecord({
    accessAt: detail.accessAt,
    assistantCode: detail.assistantCode,
    assistantId: detail.assistantId ? String(detail.assistantId) : undefined,
    assistantName: detail.assistantName,
    continuable: detail.continuable,
    lastMessageAt: detail.lastMessageAt,
    lastMessagePreview: detail.lastMessagePreview,
    messageCount: detail.messageCount,
    readOnlyReason: detail.readOnlyReason,
    sessionId,
    title: detail.title || '新对话',
  });
  if ((detail.removedExtraKnowledgeNames || []).length > 0) {
    ElMessage.warning(
      `以下知识库已失效并移除：${detail.removedExtraKnowledgeNames.join('、')}`,
    );
  }
  const conversation = await requestConversation(sessionId);
  if (requestToken !== openSessionRequestToken.value) {
    return false;
  }
  if (!conversation) {
    loadingMessages.value = false;
    if (!options.silent) {
      ElMessage.warning('会话内容加载失败');
    }
    return false;
  }
  applyConversation(conversation, sessionId);
  loadingMessages.value = false;
  if (options.syncRoute) {
    await syncSessionRoute(sessionId);
  }
  if (options.scrollToLatest !== false) {
    scrollToBottom(true);
  }
  return true;
}

function getMessageScrollWrap() {
  return document.querySelector(
    '.chat-workspace__message-scroll .el-scrollbar__wrap',
  ) as HTMLElement | null;
}

function getSidebarScrollWrap() {
  return document.querySelector(
    '.chat-workspace__sidebar-scroll .el-scrollbar__wrap',
  ) as HTMLElement | null;
}

function isNearMessageBottom(element: HTMLElement) {
  const distanceToBottom =
    element.scrollHeight - (element.scrollTop + element.clientHeight);
  return distanceToBottom <= MESSAGE_AUTO_SCROLL_THRESHOLD;
}

function handleMessageScroll() {
  const element = getMessageScrollWrap();
  if (!element) {
    autoScrollEnabled.value = true;
    return;
  }
  autoScrollEnabled.value = isNearMessageBottom(element);
}

function handleSidebarScroll() {
  closeSessionContextMenu();
  const element = getSidebarScrollWrap();
  if (!element || !canLoadMoreSessions.value) {
    return;
  }
  const distanceToBottom =
    element.scrollHeight - (element.scrollTop + element.clientHeight);
  if (distanceToBottom <= SIDEBAR_LOAD_MORE_THRESHOLD) {
    fetchSessions({ append: true });
  }
}

function scrollToBottom(force = false) {
  requestAnimationFrame(() => {
    const element = getMessageScrollWrap();
    if (element) {
      if (!force && !autoScrollEnabled.value) {
        return;
      }
      element.scrollTop = element.scrollHeight;
      autoScrollEnabled.value = true;
    }
  });
}

async function copyMessageContent(content?: string) {
  const normalized = String(content || '').trim();
  if (!normalized) {
    return;
  }
  try {
    await navigator.clipboard.writeText(normalized);
    ElMessage.success('已复制');
  } catch {
    ElMessage.error('复制失败');
  }
}

function resolveKnowledgeView(knowledgeId: string) {
  const view = knowledgeMap.value.get(knowledgeId);
  if (view) {
    return view;
  }
  const option = knowledgeOptions.value.find(
    (item) => String(item.value) === knowledgeId,
  );
  if (!option) {
    return null;
  }
  return {
    id: knowledgeId,
    title: option.label,
  } satisfies KnowledgeView;
}

function resolveBoundKnowledgesFromBot(bot: any): KnowledgeView[] {
  const bindings = bot?.publishedSnapshotJson?.knowledgeBindings;
  if (!Array.isArray(bindings)) {
    return [];
  }
  const list: KnowledgeView[] = [];
  const seen = new Set<string>();
  for (const binding of bindings) {
    const knowledgeId = String(binding?.knowledgeId || '');
    if (!knowledgeId || seen.has(knowledgeId)) {
      continue;
    }
    const knowledge = resolveKnowledgeView(knowledgeId);
    if (!knowledge) {
      continue;
    }
    seen.add(knowledgeId);
    list.push(knowledge);
  }
  return list;
}

function resolveReadOnlyText(reason?: null | string) {
  if (reason === 'NO_PERMISSION') {
    return '当前会话对应的聊天助手已无权限，仅支持查看历史记录';
  }
  if (reason === 'ASSISTANT_OFFLINE') {
    return '当前会话对应的聊天助手已下架，仅支持查看历史记录';
  }
  if (reason === 'ASSISTANT_DELETED') {
    return '当前会话对应的聊天助手已删除，仅支持查看历史记录';
  }
  return '';
}

function resolveSessionTimeLabel(session: SessionItem) {
  return formatTime(session.lastMessageAt || session.accessAt);
}

function resolveSessionLabel(session: SessionItem) {
  return session.title || session.lastMessagePreview || '未命名会话';
}

function resolveSessionSubtitle(session: SessionItem) {
  return session.lastMessagePreview || session.assistantName || '暂无消息';
}

function formatTime(value?: string) {
  if (!value) {
    return '';
  }
  const time = new Date(value);
  if (Number.isNaN(time.getTime())) {
    return value;
  }
  return `${time.getMonth() + 1}-${time.getDate()} ${String(
    time.getHours(),
  ).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`;
}

function resolveLastUserPrompt() {
  const reversed = [...messageList.value].reverse();
  const item = reversed.find((entry) => entry.role === 'user');
  return item?.content?.trim() || '';
}

function resolveRoundUserPrompt(roundId?: string) {
  if (!roundId) {
    return resolveLastUserPrompt();
  }
  const reversed = [...messageList.value].reverse();
  const item = reversed.find(
    (entry) => entry.role === 'user' && entry.roundId === roundId,
  );
  return item?.content?.trim() || '';
}

function appendUserMessage(content: string) {
  const userMessageId = uuid();
  ChatTimeTimelineBuilder.appendUserMessage(messageList.value, {
    content,
    created: Date.now(),
    id: userMessageId,
  });
  return userMessageId;
}

function removeMessageById(messageId: string) {
  const index = messageList.value.findIndex((item) => item.id === messageId);
  if (index >= 0) {
    messageList.value.splice(index, 1);
  }
}

async function sendMessage(prompt?: string) {
  await sendChatRequest({
    prompt,
  });
}

async function sendChatRequest(options: {
  prompt?: string;
  regenerateRoundId?: string;
}) {
  const content = (options.prompt || senderValue.value).trim();
  if (!content || !currentAssistantId.value || composerLocked.value) {
    return;
  }
  const regenerateRoundId = options.regenerateRoundId
    ? String(options.regenerateRoundId)
    : '';
  const isRegenerate = !!regenerateRoundId;
  if (!isRegenerate && latestAssistantMessage.value?.roundId) {
    ChatTimeTimelineBuilder.setRoundSwitchable(
      messageList.value,
      latestAssistantMessage.value.roundId,
      false,
    );
  }
  const hadSessionBeforeSend = !!currentSession.value?.sessionId;
  let conversationId = '';
  try {
    conversationId = await ensureConversationSession();
  } catch (error: any) {
    ElMessage.error(error?.message || '暂时无法创建会话，请稍后再试');
    return;
  }
  if (!isRegenerate) {
    optimisticSessionIds.value = new Set([
      ...optimisticSessionIds.value,
      conversationId,
    ]);
    upsertSessionRecord(createOptimisticSessionRecord(conversationId, content), {
      incrementTotal: !hadSessionBeforeSend,
    });
    currentSession.value = {
      ...currentSession.value,
      accessAt: new Date().toISOString(),
      assistantId: currentAssistantId.value,
      assistantName: activeAssistantName.value || composerAssistantName.value,
      continuable: true,
      lastMessageAt: new Date().toISOString(),
      lastMessagePreview: content,
      messageCount: Math.max(Number(currentSession.value?.messageCount || 0), 0) + 1,
      readOnlyReason: null,
      sessionId: conversationId,
      title: currentSession.value?.title || '新对话',
    };
    await syncSessionRoute(conversationId);
  }
  sending.value = true;
  activeStreamSessionId.value = conversationId;
  const userMessageId = isRegenerate ? '' : appendUserMessage(content);
  let receivedAssistantPayload = false;
  let streamSettled = false;
  if (!options.prompt) {
    senderValue.value = '';
  }
  scrollToBottom(true);

  await sseClient.post(
    '/api/v1/bot/chat',
    {
      botId: currentAssistantId.value,
      conversationId,
      extraKnowledgeIds: extraKnowledgeIds.value,
      prompt: content,
      publishedOnly: true,
      regenerateRoundId: regenerateRoundId || undefined,
    },
    {
      onMessage(message) {
        if (activeStreamSessionId.value !== conversationId) {
          return;
        }
        if (message.event === 'done') {
          streamSettled = true;
          sending.value = false;
          ChatTimeTimelineBuilder.finalize(messageList.value);
          activeStreamSessionId.value = '';
          refreshAfterSend(conversationId);
          return;
        }
        if (!message.data) {
          return;
        }
        const sseData = JSON.parse(message.data);
        const streamMeta = normalizeSseRoundMeta(sseData?.meta);
        ChatTimeTimelineBuilder.bindLatestPendingUserMessage(
          messageList.value,
          streamMeta,
        );
        const delta = sseData.payload?.delta;

        if (
          sseData?.domain === 'SYSTEM' &&
          sseData.payload?.code === 'SYSTEM_ERROR'
        ) {
          if (!isRegenerate && userMessageId) {
            removeMessageById(userMessageId);
          }
          if (!options.prompt && !isRegenerate) {
            senderValue.value = content;
          }
          sending.value = false;
          if (isRegenerate && !receivedAssistantPayload) {
            ElMessage.error(sseData.payload.message || '重新生成失败');
          } else {
            ChatTimeTimelineBuilder.applySystemError(
              messageList.value,
              sseData.payload.message,
              Date.now(),
            );
          }
          return;
        }

        if (sseData?.domain === 'TOOL') {
          receivedAssistantPayload = true;
          if (sseData?.type === 'TOOL_CALL') {
            ChatTimeTimelineBuilder.upsertToolCall(messageList.value, {
              created: Date.now(),
              ...streamMeta,
              name: sseData?.payload?.name,
              toolCallId: sseData?.payload?.tool_call_id,
              value: sseData?.payload?.arguments,
            });
          } else {
            ChatTimeTimelineBuilder.upsertToolResult(messageList.value, {
              created: Date.now(),
              ...streamMeta,
              name: sseData?.payload?.name,
              result: sseData?.payload?.result,
              toolCallId: sseData?.payload?.tool_call_id,
            });
          }
          scrollToBottom();
          return;
        }

        if (sseData.type === 'THINKING') {
          receivedAssistantPayload = true;
          ChatTimeTimelineBuilder.appendThinkingDelta(
            messageList.value,
            delta,
            Date.now(),
            streamMeta,
          );
        } else if (sseData.type === 'MESSAGE') {
          receivedAssistantPayload = true;
          ChatTimeTimelineBuilder.appendMessageDelta(
            messageList.value,
            delta,
            Date.now(),
            streamMeta,
          );
        }
        scrollToBottom();
      },
      async onError(error) {
        if (activeStreamSessionId.value !== conversationId) {
          return;
        }
        console.error(error);
        if (!receivedAssistantPayload) {
          if (!isRegenerate && userMessageId) {
            removeMessageById(userMessageId);
          }
          if (!options.prompt && !isRegenerate) {
            senderValue.value = content;
          }
        }
        const errorMessage = String(error?.message || '').trim();
        if (errorMessage && errorMessage !== 'This operation was aborted') {
          ElMessage.error(errorMessage);
        }
        sending.value = false;
        ChatTimeTimelineBuilder.finalize(messageList.value);
        await refreshAfterSend(conversationId);
        activeStreamSessionId.value = '';
      },
      async onFinished() {
        if (activeStreamSessionId.value !== conversationId) {
          return;
        }
        sending.value = false;
        ChatTimeTimelineBuilder.finalize(messageList.value);
        if (streamSettled) {
          return;
        }
        await refreshAfterSend(conversationId);
        activeStreamSessionId.value = '';
      },
    },
  );
}

async function refreshAfterSend(sessionId?: string) {
  const currentId = String(sessionId || currentSession.value?.sessionId || '');
  if (!currentId) {
    return;
  }
  for (const delay of [0, 240, 480]) {
    if (delay > 0) {
      await sleep(delay);
    }
    const detail = await requestSessionDetail(currentId);
    if (!detail) {
      continue;
    }
    applySessionDetail(
      {
        ...detail,
        title: detail.title || currentSession.value?.title || '新对话',
      },
      { resetSender: false },
    );
    upsertSessionRecord(
      {
        accessAt: detail.accessAt,
        assistantCode: detail.assistantCode,
        assistantId: String(detail.assistantId || currentAssistantId.value || ''),
        assistantName: detail.assistantName,
        continuable: detail.continuable,
        lastMessageAt: detail.lastMessageAt,
        lastMessagePreview: detail.lastMessagePreview,
        messageCount: detail.messageCount,
        readOnlyReason: detail.readOnlyReason,
        sessionId: currentId,
        title: detail.title || currentSession.value?.title || '新对话',
      },
    );
    const conversation = await requestConversation(currentId);
    if (!conversation) {
      continue;
    }
    applyConversation(conversation, currentId);
    await syncSessionRoute(currentId);
    scrollToBottom();
    return;
  }
}

function sleep(delay: number) {
  return new Promise((resolve) => setTimeout(resolve, delay));
}

function stopSending() {
  abortActiveStream();
}

function abortActiveStream() {
  const shouldFinalize = sending.value || sseClient.isActive();
  activeStreamSessionId.value = '';
  sseClient.abort();
  sending.value = false;
  if (shouldFinalize) {
    ChatTimeTimelineBuilder.finalize(messageList.value);
  }
}

function canCopyMessage(item: ChatTimeTimelineItem) {
  if (item.role === 'tool') {
    return false;
  }
  if (item.role === 'assistant' && !isFinalAssistantInRound(item)) {
    return false;
  }
  return !!String(item.content || '').trim();
}

function canRegenerateMessage(item: ChatTimeTimelineItem) {
  if (item.role !== 'assistant') {
    return false;
  }
  if (isReadOnly.value || isWelcomeComposerState.value || sending.value) {
    return false;
  }
  if (!isFinalAssistantInRound(item)) {
    return false;
  }
  if (item.id !== latestAssistantMessageId.value) {
    return false;
  }
  const roundId = String(item.roundId || '');
  return !!roundId && !!resolveRoundUserPrompt(roundId);
}

async function handleCopyMessage(item: ChatTimeTimelineItem) {
  if (!canCopyMessage(item)) {
    return;
  }
  await copyMessageContent(item.content);
}

async function handleRegenerateMessage() {
  if (sending.value || isReadOnly.value) {
    return;
  }
  const roundId = String(latestAssistantMessage.value?.roundId || '');
  const prompt = resolveRoundUserPrompt(roundId);
  if (!prompt) {
    ElMessage.warning('暂无可重新生成的问题');
    return;
  }
  if (!roundId) {
    ElMessage.warning('当前回答暂不支持重新生成');
    return;
  }
  await sendChatRequest({
    prompt,
    regenerateRoundId: roundId,
  });
}

function shouldShowVariantNavigator(item: ChatTimeTimelineItem) {
  return (
    item.role === 'assistant' &&
    isFinalAssistantInRound(item) &&
    Number(item.variantCount || 0) > 1 &&
    item.switchable === true &&
    !!item.roundId
  );
}

function canSwitchVariant(item: ChatTimeTimelineItem, direction: 'next' | 'previous') {
  if (item.role !== 'assistant') {
    return false;
  }
  if (!isFinalAssistantInRound(item)) {
    return false;
  }
  const current = Number(item.variantIndex || item.selectedVariantIndex || 1);
  const total = Number(item.variantCount || 1);
  if (!item.switchable) {
    return false;
  }
  if (isVariantSwitching(item)) {
    return false;
  }
  if (direction === 'previous') {
    return current > 1;
  }
  return current < total;
}

function isVariantSwitching(item: ChatTimeTimelineItem) {
  variantSwitchStateVersion.value;
  return variantSwitchController.isSwitching(
    currentSession.value?.sessionId,
    item.roundId,
  );
}

function isFinalAssistantInRound(item: ChatTimeTimelineItem) {
  if (item.role !== 'assistant') {
    return false;
  }
  if (!item.roundId) {
    return true;
  }
  for (let index = messageList.value.length - 1; index >= 0; index -= 1) {
    const candidate = messageList.value[index];
    if (
      candidate?.role === 'assistant' &&
      candidate.roundId === item.roundId &&
      String(candidate.variantIndex || '') === String(item.variantIndex || '')
    ) {
      return candidate.id === item.id;
    }
  }
  return true;
}

async function selectVariantForMessage(
  item: ChatTimeTimelineItem,
  direction: 'next' | 'previous',
) {
  if (item.role !== 'assistant' || !item.roundId || !currentSession.value?.sessionId) {
    return;
  }
  const current = Number(item.variantIndex || item.selectedVariantIndex || 1);
  const nextVariantIndex = direction === 'previous' ? current - 1 : current + 1;
  if (!canSwitchVariant(item, direction)) {
    return;
  }
  const sessionId = String(currentSession.value.sessionId);
  const roundId = String(item.roundId);
  const previousPreview = currentSession.value?.lastMessagePreview;
  const selected = await variantSwitchController.switchVariant({
    fetchVariants: async () => {
      const [, res] = await tryit(api.get)(
        `/api/v1/chatWorkspace/sessions/${sessionId}/rounds/${roundId}/variants`,
      );
      if (res?.errorCode !== 0 || !Array.isArray(res?.data)) {
        throw new Error('答案版本加载失败');
      }
      return res.data;
    },
    items: messageList.value,
    onLocalSwitch(record) {
      const preview = String(record.contentText || record.content || '').trim();
      if (currentSession.value) {
        currentSession.value.lastMessagePreview = preview;
      }
    },
    persistVariant: async () => {
      const [, res] = await tryit(api.post)(
        `/api/v1/chatWorkspace/sessions/${currentSession.value.sessionId}/rounds/${item.roundId}/selectVariant`,
        {
          variantIndex: nextVariantIndex,
        },
      );
      if (res?.errorCode !== 0 || !res?.data) {
        throw new Error(res?.message || '答案版本切换失败');
      }
      return res.data;
    },
    roundId,
    sessionId,
    targetVariantIndex: nextVariantIndex,
  });
  if (!selected && currentSession.value) {
    currentSession.value.lastMessagePreview = previousPreview;
  }
}

function normalizeSseRoundMeta(meta: any): SseRoundMeta {
  if (!meta || typeof meta !== 'object') {
    return {};
  }
  const variantIndex = meta.variantIndex ? Number(meta.variantIndex) : undefined;
  return {
    regenerate: Boolean(meta.regenerate),
    regenerateRoundId: meta.regenerateRoundId
      ? String(meta.regenerateRoundId)
      : undefined,
    roundId: meta.roundId ? String(meta.roundId) : undefined,
    roundNo: meta.roundNo ? Number(meta.roundNo) : undefined,
    selectedVariantIndex: meta.selectedVariantIndex
      ? Number(meta.selectedVariantIndex)
      : variantIndex,
    switchable:
      typeof meta.switchable === 'boolean'
        ? meta.switchable
        : variantIndex != null
          ? true
          : undefined,
    variantCount: meta.variantCount ? Number(meta.variantCount) : variantIndex,
    variantIndex,
  };
}

function handleExtraKnowledgeIdsChange(value: string[]) {
  extraKnowledgeIds.value = value.map((item) => String(item));
}

function handleEnter(event: Event | KeyboardEvent) {
  if (event instanceof KeyboardEvent && event.shiftKey) {
    return;
  }
  event.preventDefault();
  sendMessage();
}

async function deleteSession(targetSession?: SessionItem) {
  const session = targetSession || sessionContextMenuTarget.value || currentSession.value;
  if (!session?.sessionId) {
    return;
  }
  closeSessionContextMenu();
  const [, confirmRes] = await tryit(ElMessageBox.confirm)(
    '删除后该会话将不再出现在历史列表中，是否继续？',
    '删除会话',
    {
      cancelButtonText: '取消',
      confirmButtonText: '删除',
      type: 'warning',
    },
  );
  if (!confirmRes) {
    return;
  }
  const [, res] = await tryit(api.post)(
    `/api/v1/chatWorkspace/sessions/${session.sessionId}/delete`,
    {},
  );
  if (res?.errorCode === 0) {
    ElMessage.success('删除成功');
    removeSessionRecord(String(session.sessionId));
    if (String(currentSession.value?.sessionId || '') === String(session.sessionId)) {
      resetComposerState();
      await router.replace({ query: {} });
    }
  }
}
</script>

<template>
  <div class="chat-workspace">
    <aside class="chat-workspace__sidebar">
      <div class="chat-workspace__sidebar-header">
        <ElButton
          class="chat-workspace__new-session"
          :icon="Plus"
          :disabled="!canCreateSession"
          @click="handleCreateSession"
        >
          新建会话
        </ElButton>

        <ElInput
          v-model="sessionSearchKeyword"
          class="chat-workspace__session-search"
          clearable
          :prefix-icon="Search"
          placeholder="搜索会话"
        />
      </div>

      <ElScrollbar
        class="chat-workspace__sidebar-scroll"
        @scroll="handleSidebarScroll"
      >
        <div class="chat-workspace__sidebar-body">
          <div class="chat-workspace__session-list-head">
            <span class="chat-workspace__panel-caption">会话</span>
          </div>

          <div
            v-if="groupedSessions.length > 0"
            class="chat-workspace__session-groups"
          >
            <section
              v-for="group in groupedSessions"
              :key="group.key"
              class="chat-workspace__session-group"
            >
              <h2 class="chat-workspace__group-title">{{ group.title }}</h2>
              <div
                v-for="session in group.items"
                :key="session.sessionId"
                role="button"
                tabindex="0"
                class="chat-workspace__session-item"
                :class="{
                  'is-active': selectedSessionKey === String(session.sessionId),
                  'is-context-open':
                    sessionContextMenuVisible &&
                    sessionContextMenuTarget?.sessionId === session.sessionId,
                  'is-readonly': session.continuable === false,
                }"
                @click="openSession(session)"
                @contextmenu="openSessionContextMenu($event, session)"
                @keydown="handleSessionItemKeydown($event, session)"
              >
                <div class="chat-workspace__session-main">
                  <div class="chat-workspace__session-row">
                    <span class="chat-workspace__session-name">
                      {{ resolveSessionLabel(session) }}
                    </span>
                    <span class="chat-workspace__session-time">
                      {{ resolveSessionTimeLabel(session) }}
                    </span>
                  </div>
                  <div class="chat-workspace__session-row is-sub">
                    <span class="chat-workspace__session-subtitle">
                      {{ resolveSessionSubtitle(session) }}
                    </span>
                    <ElTag
                      v-if="session.continuable === false"
                      size="small"
                      effect="plain"
                      type="info"
                    >
                      只读
                    </ElTag>
                  </div>
                </div>
              </div>
            </section>

            <div
              v-if="loadingMoreSessions || canLoadMoreSessions"
              class="chat-workspace__session-loadmore"
            >
              <span v-if="loadingMoreSessions">加载更多会话中...</span>
              <span v-else>向下滚动加载更多</span>
            </div>
          </div>

          <ElEmpty
            v-else-if="loadingSessions"
            description="会话加载中"
            class="chat-workspace__empty"
          />
          <ElEmpty
            v-else-if="sessionSearchKeyword"
            description="未找到匹配会话"
            class="chat-workspace__empty"
          />
          <ElEmpty
            v-else
            description="当前用户暂无会话"
            class="chat-workspace__empty"
          />
        </div>
      </ElScrollbar>

      <div
        v-if="sessionContextMenuVisible && sessionContextMenuTarget"
        class="chat-workspace__context-menu"
        :style="{
          left: `${sessionContextMenuX}px`,
          top: `${sessionContextMenuY}px`,
        }"
        @click.stop
      >
        <button
          type="button"
          class="chat-workspace__context-menu-item is-danger"
          @click="deleteSession(sessionContextMenuTarget)"
        >
          <Delete class="chat-workspace__context-menu-icon" />
          <span>删除</span>
        </button>
      </div>
    </aside>

    <main class="chat-workspace__main">
      <header class="chat-workspace__topbar">
        <div class="chat-workspace__topbar-content">
          <div class="chat-workspace__topbar-main">
            <h1 class="chat-workspace__topbar-title">
              {{ currentSessionTitle }}
            </h1>
            <div class="chat-workspace__topbar-meta">
              <span>{{ activeAssistantName || '未选择智能体' }}</span>
              <ElTag
                v-if="isReadOnly"
                type="info"
                effect="plain"
                size="small"
              >
                只读
              </ElTag>
            </div>
            <p
              v-if="isReadOnly"
              class="chat-workspace__readonly-tip"
            >
              {{ resolveReadOnlyText(currentSession?.readOnlyReason) }}
            </p>
          </div>
        </div>
      </header>

      <section
        class="chat-workspace__conversation"
        :class="{ 'is-welcome-layout': isWelcomeComposerState }"
      >
        <div v-if="isWelcomeComposerState" class="chat-workspace__welcome-stage">
          <div class="chat-workspace__conversation-content">
            <div class="chat-workspace__welcome is-centered">
              <div class="chat-workspace__welcome-title chat-workspace__welcome-title--inline">
                <span>{{ greetingPrefix }}，和</span>
                <ChatWelcomeAssistantPicker
                  :assistant-id="currentAssistantId"
                  :assistant-name="activeAssistantName || composerAssistantName"
                  :assistant-options="assistants"
                  :disabled="sending"
                  :loading="loadingAssistants"
                  @update:assistant-id="handleAssistantChange"
                />
                <span>一起协作</span>
              </div>
            </div>
          </div>
        </div>

        <ElScrollbar
          v-else
          class="chat-workspace__message-scroll"
          @scroll="handleMessageScroll"
        >
          <div class="chat-workspace__message-shell">
            <div class="chat-workspace__conversation-content">
              <div
                v-if="hasMessages"
                class="chat-workspace__message-list"
              >
                <article
                  v-for="item in messageList"
                  :key="item.id"
                  class="chat-workspace__message"
                  :class="`is-${item.role}`"
                >
                  <div class="chat-workspace__message-stack" :class="`is-${item.role}`">
                    <div class="chat-workspace__message-bubble" :class="`is-${item.role}`">
                      <ChatTimeMessageContent :item="item" />
                    </div>
                    <ChatMessageActionBar
                      :align="item.role === 'user' ? 'end' : 'start'"
                      :allow-copy="canCopyMessage(item)"
                      :allow-regenerate="canRegenerateMessage(item)"
                      :disabled-variant-next="!canSwitchVariant(item, 'next')"
                      :disabled-variant-previous="!canSwitchVariant(item, 'previous')"
                      :regenerate-disabled="sending || isReadOnly"
                      :show-variant-navigator="shouldShowVariantNavigator(item)"
                      :variant-loading="false"
                      :variant-current="
                        Number(item.variantIndex || item.selectedVariantIndex || 1)
                      "
                      :variant-total="Number(item.variantCount || 1)"
                      @copy="handleCopyMessage(item)"
                      @regenerate="handleRegenerateMessage"
                      @select-next-variant="selectVariantForMessage(item, 'next')"
                      @select-previous-variant="
                        selectVariantForMessage(item, 'previous')
                      "
                    />
                  </div>
                </article>
              </div>

              <div v-else class="chat-workspace__welcome">
                <div class="chat-workspace__welcome-badge">聊天</div>
                <h2 class="chat-workspace__welcome-title">
                  {{ emptyConversationTitle }}
                </h2>
                <p class="chat-workspace__welcome-text">
                  {{ emptyConversationText }}
                </p>
              </div>
            </div>
          </div>
        </ElScrollbar>

        <footer
          class="chat-workspace__composer-shell"
          :class="{ 'is-centered': isWelcomeComposerState }"
        >
          <div class="chat-workspace__conversation-content">
            <div
              class="chat-workspace__composer"
              :class="{ 'is-disabled': composerLocked }"
            >
              <ElInput
                v-model="senderValue"
                class="chat-workspace__textarea"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :disabled="composerLocked"
                resize="none"
                type="textarea"
                :placeholder="composerPlaceholder"
                @keydown.enter="handleEnter"
              />

              <div class="chat-workspace__composer-footer">
                <div class="chat-workspace__composer-actions">
                  <ElButton
                    v-if="sending"
                    aria-label="停止"
                    class="chat-workspace__send-button is-stop"
                    @click="stopSending"
                  >
                    <span class="chat-workspace__stop-glyph" />
                  </ElButton>
                  <ElButton
                    v-else
                    :icon="Promotion"
                    aria-label="发送"
                    class="chat-workspace__send-button"
                    :disabled="!canSend"
                    @click="sendMessage()"
                  />
                </div>
              </div>
            </div>

            <ChatContextCapsuleBar
              class="chat-workspace__context-rail-shell"
              :bound-knowledges="displayedBoundKnowledges"
              :selected-extra-knowledges="displayedExtraKnowledges"
              :extra-knowledge-ids="
                isReadOnly ? displayedExtraKnowledgeIds : editableKnowledgeIds
              "
              :extra-knowledge-options="extraKnowledgeOptionList"
              :disabled="contextSelectorDisabled"
              :knowledge-disabled="!currentAssistantId || composerLocked"
              :loading="loadingKnowledgeOptions"
              :mode="isReadOnly ? 'readonly' : 'editable'"
              @update:extra-knowledge-ids="handleExtraKnowledgeIdsChange"
            />

            <div
              v-if="isReadOnly"
              class="chat-workspace__composer-disabled"
            >
              {{ resolveReadOnlyText(currentSession?.readOnlyReason) }}
            </div>
          </div>
        </footer>
      </section>
    </main>
  </div>
</template>

<style scoped>
.chat-workspace {
  --chat-content-width: 840px;
  --chat-sidebar-width: 272px;
  display: grid;
  grid-template-columns: var(--chat-sidebar-width) minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - 132px);
  min-height: 640px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, hsl(var(--nav-ambient) / 0.08), transparent 20%),
    linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background-deep)) 100%);
}

.chat-workspace__sidebar,
.chat-workspace__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid hsl(var(--divider-faint) / 0.7);
  border-radius: 18px;
  background: hsl(var(--surface-panel) / 0.94);
  box-shadow: 0 10px 28px -26px hsl(var(--foreground) / 0.18);
}

.chat-workspace__sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid hsl(var(--divider-faint) / 0.64);
}

.chat-workspace__new-session {
  justify-content: flex-start;
  width: 100%;
  height: 36px;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--text-strong));
  border-color: hsl(var(--divider-faint) / 0.86);
  border-radius: 12px;
  background: hsl(var(--surface-subtle));
  box-shadow: none;
}

.chat-workspace__new-session:hover:not(.is-disabled) {
  background: hsl(var(--surface-panel));
}

.chat-workspace__new-session:focus-visible,
.chat-workspace__session-item:focus-visible,
.chat-workspace__session-more:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.32);
  outline-offset: 2px;
}

.chat-workspace__session-search :deep(.el-input__wrapper) {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: none;
  background: hsl(var(--surface-subtle));
}

.chat-workspace__session-search :deep(.el-input__wrapper.is-focus) {
  border-color: hsl(var(--primary) / 0.18);
}

.chat-workspace__sidebar-scroll,
.chat-workspace__message-scroll {
  flex: 1;
  min-height: 0;
}

.chat-workspace__sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 10px 14px;
}

.chat-workspace__panel-caption {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--text-muted));
  letter-spacing: 0.02em;
}

.chat-workspace__session-list-head {
  padding-inline: 4px;
}

.chat-workspace__session-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-workspace__session-loadmore {
  display: flex;
  justify-content: center;
  padding: 8px 4px 2px;
  font-size: 11px;
  color: hsl(var(--text-muted));
}

.chat-workspace__session-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-workspace__group-title {
  margin: 0;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--text-muted));
  letter-spacing: 0.02em;
}

.chat-workspace__session-item {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.chat-workspace__session-item:hover {
  background: hsl(var(--surface-subtle));
}

.chat-workspace__session-item.is-active {
  border-color: hsl(var(--divider-faint) / 0.92);
  background: hsl(var(--surface-subtle) / 0.96);
}

.chat-workspace__session-item.is-context-open {
  background: hsl(var(--surface-subtle));
}

.chat-workspace__session-item.is-readonly {
  color: hsl(var(--text-muted));
}

.chat-workspace__session-main {
  flex: 1;
  min-width: 0;
}

.chat-workspace__session-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.chat-workspace__session-row.is-sub {
  margin-top: 2px;
}

.chat-workspace__session-name,
.chat-workspace__session-subtitle {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-workspace__session-name {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--text-strong));
}

.chat-workspace__session-subtitle,
.chat-workspace__session-time {
  font-size: 11px;
  color: hsl(var(--text-muted));
}

.chat-workspace__context-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 144px;
  padding: 6px;
  border: 1px solid hsl(var(--divider-faint) / 0.84);
  border-radius: 14px;
  background: hsl(var(--surface-panel) / 0.98);
  box-shadow: 0 16px 36px -24px hsl(var(--foreground) / 0.28);
  backdrop-filter: blur(12px);
}

.chat-workspace__context-menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--text-strong));
  text-align: left;
  border: none;
  border-radius: 10px;
  background: transparent;
  transition: background-color 0.18s ease;
}

.chat-workspace__context-menu-item:hover {
  background: hsl(var(--surface-subtle));
}

.chat-workspace__context-menu-item.is-danger {
  color: hsl(var(--destructive));
}

.chat-workspace__context-menu-item.is-danger:hover {
  background: hsl(var(--destructive) / 0.08);
}

.chat-workspace__context-menu-icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.chat-workspace__empty {
  padding-top: 40px;
}

.chat-workspace__topbar {
  flex: none;
  padding: 14px 24px 10px;
  border-bottom: 1px solid hsl(var(--divider-faint) / 0.64);
}

.chat-workspace__topbar-content {
  max-width: var(--chat-content-width);
  margin: 0 auto;
}

.chat-workspace__topbar-main {
  min-width: 0;
}

.chat-workspace__topbar-title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  color: hsl(var(--text-strong));
  letter-spacing: -0.01em;
}

.chat-workspace__topbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: hsl(var(--text-muted));
}

.chat-workspace__readonly-tip {
  margin: 6px 0 0;
  font-size: 11px;
  color: hsl(var(--text-muted));
}

.chat-workspace__conversation {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chat-workspace__conversation.is-welcome-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
}

.chat-workspace__welcome-stage {
  flex: none;
}

.chat-workspace__message-shell {
  min-height: 100%;
  padding: 0 24px 196px;
}

.chat-workspace__conversation-content {
  width: 100%;
  max-width: var(--chat-content-width);
  margin: 0 auto;
}

.chat-workspace__more {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.chat-workspace__message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 36px;
}

.chat-workspace__message {
  display: flex;
  width: 100%;
}

.chat-workspace__message.is-user {
  justify-content: flex-end;
}

.chat-workspace__message-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.chat-workspace__message-stack.is-user {
  align-items: flex-end;
  width: 100%;
}

.chat-workspace__message-bubble {
  min-width: 0;
}

.chat-workspace__message-bubble.is-assistant {
  width: 100%;
  max-width: 100%;
  padding: 0;
  color: hsl(var(--text-strong));
  border: none;
  border-radius: 0;
  background: transparent;
}

.chat-workspace__message-bubble.is-user {
  display: block;
  align-self: flex-end;
  width: fit-content;
  max-width: min(72%, 720px);
  min-width: 0;
  padding: 0;
  text-align: left;
  color: hsl(var(--text-strong));
  white-space: pre-wrap;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-wrap: anywhere;
}

.chat-workspace__message-bubble.is-tool {
  width: 100%;
  max-width: min(100%, 720px);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.chat-workspace__message-bubble.is-user :deep(.chat-time-markdown),
.chat-workspace__message-bubble.is-user :deep(.elx-xmarkdown-container),
.chat-workspace__message-bubble.is-user :deep(.elx-xmarkdown-provider) {
  width: auto;
  max-width: 100%;
}

.chat-workspace__message-bubble.is-assistant :deep(pre),
.chat-workspace__message-bubble.is-user :deep(pre),
.chat-workspace__message-bubble.is-tool :deep(pre) {
  overflow: auto;
  border-radius: 14px;
}

.chat-workspace__message-bubble.is-tool :deep(.chat-tool-panel) {
  border-color: hsl(var(--divider-faint) / 0.82);
  border-radius: 12px;
  background: hsl(var(--surface-panel));
}

.chat-workspace__welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 36px 0 72px;
}

.chat-workspace__welcome-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--text-muted));
  border: 1px solid hsl(var(--divider-faint) / 0.88);
  border-radius: 999px;
  background: hsl(var(--surface-subtle));
}

.chat-workspace__welcome-title {
  max-width: 480px;
  margin: 14px 0 0;
  font-size: 26px;
  font-weight: 680;
  line-height: 1.18;
  color: hsl(var(--text-strong));
  letter-spacing: -0.03em;
}

.chat-workspace__welcome-title--inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  max-width: 720px;
  line-height: 1.3;
}

.chat-workspace__welcome-text {
  max-width: 440px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: hsl(var(--text-muted));
}

.chat-workspace__welcome.is-centered {
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  padding: 0;
  text-align: center;
}

.chat-workspace__welcome.is-centered .chat-workspace__welcome-title,
.chat-workspace__welcome.is-centered .chat-workspace__welcome-text {
  max-width: 720px;
}

.chat-workspace__welcome.is-centered .chat-workspace__welcome-title {
  margin-top: 0;
}

.chat-workspace__composer-shell {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 24px 20px;
  background:
    linear-gradient(180deg, hsl(var(--surface-panel) / 0) 0%, hsl(var(--surface-panel) / 0.78) 30%, hsl(var(--surface-panel) / 0.96) 62%, hsl(var(--surface-panel)) 100%);
}

.chat-workspace__composer-shell.is-centered {
  position: static;
  padding: 28px 0 0;
  background: transparent;
}

.chat-workspace__composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 10px;
  border: 1px solid hsl(var(--divider-faint) / 0.82);
  border-radius: 24px;
  background: hsl(var(--surface-panel) / 0.985);
  box-shadow: 0 24px 44px -36px hsl(var(--foreground) / 0.18);
}

.chat-workspace__composer.is-disabled {
  opacity: 0.74;
}

.chat-workspace__textarea :deep(.el-textarea__wrapper) {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.chat-workspace__textarea :deep(.el-textarea__inner) {
  padding: 0;
  min-height: 52px !important;
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.58;
  color: hsl(var(--text-strong));
  background: transparent;
  resize: none;
}

.chat-workspace__textarea :deep(.el-textarea__inner::placeholder) {
  color: hsl(var(--text-muted));
}

.chat-workspace__composer-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}

.chat-workspace__composer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
}

.chat-workspace__context-rail-shell {
  margin-top: 10px;
}

.chat-workspace__send-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: hsl(var(--background));
  border: none;
  border-radius: 999px;
  background: hsl(var(--foreground));
  box-shadow: none;
}

.chat-workspace__send-button:hover:not(.is-disabled) {
  background: hsl(var(--foreground) / 0.88);
}

.chat-workspace__send-button :deep(.el-icon) {
  font-size: 15px;
}

.chat-workspace__send-button.is-stop {
  color: hsl(var(--background));
  border: none;
  background: hsl(var(--foreground));
}

.chat-workspace__send-button.is-stop:hover:not(.is-disabled) {
  background: hsl(var(--foreground) / 0.88);
}

.chat-workspace__stop-glyph {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}

.chat-workspace__composer-disabled {
  margin-top: 8px;
  font-size: 12px;
  color: hsl(var(--text-muted));
}

@media (max-width: 1180px) {
  .chat-workspace {
    --chat-sidebar-width: 252px;
  }
}

@media (max-width: 1024px) {
  .chat-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .chat-workspace__sidebar {
    max-height: 460px;
  }

  .chat-workspace__conversation {
    min-height: 720px;
  }

  .chat-workspace__conversation.is-welcome-layout {
    padding-inline: 16px;
  }
}

@media (max-width: 768px) {
  .chat-workspace {
    padding: 12px;
  }

  .chat-workspace__topbar,
  .chat-workspace__message-shell,
  .chat-workspace__composer-shell {
    padding-inline: 16px;
  }

  .chat-workspace__message-shell {
    padding-bottom: 236px;
  }

  .chat-workspace__welcome-title {
    font-size: 24px;
  }

  .chat-workspace__welcome-title--inline {
    gap: 8px;
  }

  .chat-workspace__conversation.is-welcome-layout {
    padding: 24px 16px;
  }

  .chat-workspace__composer-footer {
    justify-content: flex-end;
  }

  .chat-workspace__message-bubble.is-user {
    max-width: 86%;
  }
}
</style>
