cx-chat 0.0.1

package/src/views/page-system/logs/components/message-list/index.tsx

@@ -0,0 +1,515 @@
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { useToast } from '@/contexts/ToastContext'
+import type { Message } from '@/types'
+import { resolveMessageTurnIdForFeedback } from '@/utils/chatUtils'
+import { CxButton, CxCheckbox } from '@cx-ui'
+import clsx from 'clsx'
+import { Bot } from 'lucide-react'
+import type { RefObject } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MessageItem } from './message-item'
+import { useMessageListScroll } from './use-message-list-scroll'
+
+/** 日志弹窗消息列表：暂不展示多选删除底栏与删除确认框 */
+const LOG_MESSAGE_LIST_BATCH_DELETE_ENABLED = false
+
+export interface MessageListProps {
+  messages: Message[]
+  isLoading: boolean
+  hasMore?: boolean
+  isLoadingMore?: boolean
+  onLoadMore?: () => void
+  /** 点击搜索建议：应直接作为用户消息发起发送（与输入框发送同一路径） */
+  onOptionClick?: (option: string) => void | Promise<void>
+  onFeedback?: (messageId: string, score: number) => void
+  /** 最后一条助手消息：重新生成（需 turnId，由调用方传 sessionId / enableNetwork） */
+  onRegenerate?: (message: Message) => void | Promise<void>
+  /** 是否展示删除入口并允许进入多选删除 */
+  enableMessageDelete?: boolean
+  /** 进入/退出消息多选模式时通知父级（用于顶栏标题只读等） */
+  onSelectionModeChange?: (active: boolean) => void
+  /** 按 turnId 批量删除（接口内逐条调用） */
+  onDeleteTurns?: (turnIds: string[]) => Promise<void>
+}
+
+type TurnGroup = { turnId: string; items: Message[] }
+
+/**
+ * 按后端返回的原始顺序分组：将相邻的「用户 → 助手」消息配对为一轮对话。
+ * 保持后端消息的原始顺序，不做重排序，仅将紧邻的用户和助手消息组合为 turn。
+ */
+function buildTurnGroups(messages: Message[]): TurnGroup[] {
+  const filtered = messages.filter((m) => m.role !== 'system')
+  const groups: TurnGroup[] = []
+
+  let i = 0
+  while (i < filtered.length) {
+    const current = filtered[i]
+    
+    // 如果是用户消息，且下一条是助手消息，则配对
+    if (
+      current.role === 'user' &&
+      i + 1 < filtered.length &&
+      filtered[i + 1].role === 'assistant'
+    ) {
+      const next = filtered[i + 1]
+      const turnId = resolveMessageTurnIdForFeedback(next) || resolveMessageTurnIdForFeedback(current)
+      groups.push({ turnId, items: [current, next] })
+      i += 2
+    } else {
+      // 其他情况：孤立消息（用户无应答、助手无前驱用户、连续同角色等）
+      groups.push({
+        turnId: resolveMessageTurnIdForFeedback(current),
+        items: [current],
+      })
+      i += 1
+    }
+  }
+
+  return groups
+}
+
+function isTurnNonDeletable(items: Message[]): boolean {
+  return items.some(
+    (m) =>
+      m.is_streaming === true ||
+      (typeof m.id === 'string' && m.id.startsWith('temp-')),
+  )
+}
+
+type MessageListBodyProps = {
+  containerRef: RefObject<HTMLDivElement | null>
+  topRef: RefObject<HTMLDivElement | null>
+  turnGroups: TurnGroup[]
+  messages: Message[]
+  isLoading: boolean
+  isLoadingMore?: boolean
+  lastAssistantMessageId: string | null
+  messageSelectMode: boolean
+  selectedTurnIds: string[]
+  selectableTurnIds: string[]
+  allSelectableSelected: boolean
+  enableMessageDelete: boolean
+  hasDeleteApi: boolean
+  deleteConfirmOpen: boolean
+  deleteSubmitting: boolean
+  onToggleTurnSelection: (turnId: string, items: Message[]) => void
+  onTurnCardClick: (
+    e: React.MouseEvent<HTMLDivElement>,
+    turnId: string,
+    items: Message[],
+  ) => void
+  onEnterSelectMode: (turnId?: string) => void
+  onToggleSelectAll: () => void
+  onExitSelectMode: () => void
+  onOpenDeleteConfirm: () => void
+  onCloseDeleteConfirm: () => void
+  onConfirmDelete: () => void
+  onFeedback?: (messageId: string, score: number) => void
+  onRegenerate?: (message: Message) => void | Promise<void>
+  onOptionClick?: (option: string) => void | Promise<void>
+}
+
+/**
+ * 消息列表主体（滚动区 + 多选栏 + 确认框 + 参考资料面板）。
+ * 必须定义为模块级组件：若写在 MessageList 内部，每次父组件重渲染都会产生新的函数引用，
+ * React 会卸载并重建子树，导致滚动容器丢失、打开会话时无法稳定滚到底部。
+ */
+function MessageListBody({
+  containerRef,
+  topRef,
+  turnGroups,
+  messages,
+  isLoading,
+  isLoadingMore,
+  lastAssistantMessageId,
+  messageSelectMode,
+  selectedTurnIds,
+  selectableTurnIds,
+  allSelectableSelected,
+  enableMessageDelete,
+  hasDeleteApi,
+  deleteConfirmOpen,
+  deleteSubmitting,
+  onToggleTurnSelection,
+  onTurnCardClick,
+  onEnterSelectMode,
+  onToggleSelectAll,
+  onExitSelectMode,
+  onOpenDeleteConfirm,
+  onCloseDeleteConfirm,
+  onConfirmDelete,
+  onFeedback,
+  onRegenerate,
+  onOptionClick,
+}: MessageListBodyProps) {
+  const { t } = useTranslation()
+  const [scrolling, setScrolling] = useState(false)
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  /**
+   * 滚动条显示控制：默认隐藏，滚动时淡入，停止后淡出。
+   */
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+
+    const onScroll = () => {
+      setScrolling(true)
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current)
+      }
+      scrollTimerRef.current = setTimeout(() => {
+        scrollTimerRef.current = null
+        setScrolling(false)
+      }, 600)
+    }
+
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      el.removeEventListener('scroll', onScroll)
+      if (scrollTimerRef.current) {
+        clearTimeout(scrollTimerRef.current)
+        scrollTimerRef.current = null
+      }
+    }
+  }, [containerRef])
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div
+        ref={containerRef}
+        className={clsx(
+          'flex-1 overflow-y-auto p-4 space-y-6 auto-scrollbar',
+          scrolling && 'is-scrolling',
+        )}
+      >
+        <div
+          ref={topRef}
+          className="h-4 w-full flex justify-center flex-shrink-0"
+        >
+          {isLoadingMore && (
+            <div className="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full" />
+          )}
+        </div>
+        {/** role 由 normalizeMessagesList(chatUtils) 根据后端 type 映射：10 → user，20 → assistant */}
+        {turnGroups.map(({ turnId, items }) => {
+          const turnLocked = isTurnNonDeletable(items)
+          const cardSelected =
+            messageSelectMode && selectedTurnIds.includes(turnId)
+          const assistantStreamingInTurn = items.some(
+            (m) => m.role === 'assistant' && m.is_streaming === true,
+          )
+          return (
+            <div
+              key={turnId}
+              className="mx-auto flex w-full max-w-7xl gap-3"
+            >
+              {messageSelectMode && (
+                <CxCheckbox
+                  className="mt-3 shrink-0"
+                  checked={selectedTurnIds.includes(turnId)}
+                  disabled={turnLocked}
+                  onChange={() => onToggleTurnSelection(turnId, items)}
+                  aria-label={t('chat.select_messages')}
+                />
+              )}
+              <div
+                role={messageSelectMode ? 'button' : undefined}
+                tabIndex={messageSelectMode && !turnLocked ? 0 : undefined}
+                aria-pressed={
+                  messageSelectMode ? selectedTurnIds.includes(turnId) : undefined
+                }
+                aria-disabled={messageSelectMode ? turnLocked : undefined}
+                onClick={(e) => onTurnCardClick(e, turnId, items)}
+                onKeyDown={(e) => {
+                  if (!messageSelectMode || turnLocked) return
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    onToggleTurnSelection(turnId, items)
+                  }
+                }}
+                className={clsx(
+                  'group min-w-0 flex-1 border border-transparent transition-colors',
+                  messageSelectMode && !turnLocked && 'cursor-pointer',
+                  messageSelectMode && turnLocked && 'cursor-not-allowed',
+                  messageSelectMode &&
+                    'rounded-2xl bg-[#f5f5f5] p-4 dark:bg-[#2a2b2d]',
+                  messageSelectMode &&
+                    cardSelected &&
+                    'border-[#1677ff] ring-1 ring-[#1677ff]/35',
+                )}
+              >
+                <div className="flex flex-col gap-4">
+                  {items.map((message) => (
+                    <MessageItem
+                      key={message.id}
+                      message={message}
+                      turnId={turnId}
+                      lastAssistantMessageId={lastAssistantMessageId}
+                      messageSelectMode={messageSelectMode}
+                      enableMessageDelete={enableMessageDelete}
+                      hasDeleteApi={hasDeleteApi}
+                      userMessageDeleteHidden={assistantStreamingInTurn}
+                      onEnterSelectMode={onEnterSelectMode}
+                      onFeedback={onFeedback}
+                      onRegenerate={onRegenerate}
+                      onOptionClick={onOptionClick}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+
+        {isLoading && messages.length === 0 && (
+          <div className="flex gap-4 max-w-3xl mx-auto w-full">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-purple-600 flex items-center justify-center shrink-0 mt-1">
+              <Bot size={18} className="text-white" />
+            </div>
+            <div className="px-0 py-3.5">
+              <div className="flex gap-1">
+                <div
+                  className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
+                  style={{ animationDelay: '0ms' }}
+                />
+                <div
+                  className="w-2 h-2 bg-purple-500 rounded-full animate-bounce"
+                  style={{ animationDelay: '150ms' }}
+                />
+                <div
+                  className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"
+                  style={{ animationDelay: '300ms' }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        <style>{`
+          @keyframes pop {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.8); }
+            100% { transform: scale(1); }
+          }
+          .animate-pop {
+            animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+          }
+        `}</style>
+      </div>
+
+      {/* 批量删除底栏：日志弹窗不开放（恢复时将 LOG_MESSAGE_LIST_BATCH_DELETE_ENABLED 置 true） */}
+      {LOG_MESSAGE_LIST_BATCH_DELETE_ENABLED &&
+        messageSelectMode &&
+        enableMessageDelete &&
+        hasDeleteApi && (
+        <div className="shrink-0 bg-transparent p-4">
+          <div className="relative mx-auto flex w-full max-w-7xl flex-wrap items-center justify-between gap-3">
+            <div className="flex flex-wrap items-center gap-3">
+              <CxCheckbox
+                checked={
+                  selectableTurnIds.length > 0 && allSelectableSelected
+                }
+                disabled={selectableTurnIds.length === 0}
+                onChange={onToggleSelectAll}
+                aria-label={t('chat.select_all')}
+              />
+              <span className="text-sm text-gray-700 dark:text-gray-200">
+                {t('chat.select_all')}
+              </span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">
+                {t('chat.selected_count', { count: selectedTurnIds.length })}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <CxButton.Cancel onClick={onExitSelectMode}>
+                {t('chat.cancel')}
+              </CxButton.Cancel>
+              <CxButton
+                danger
+                disabled={selectedTurnIds.length === 0 || deleteSubmitting}
+                onClick={onOpenDeleteConfirm}
+              >
+                {t('chat.delete')}
+              </CxButton>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 删除确认框：与批量删除一并关闭 */}
+      {LOG_MESSAGE_LIST_BATCH_DELETE_ENABLED && (
+        <ConfirmDialog
+          isOpen={deleteConfirmOpen}
+          onClose={onCloseDeleteConfirm}
+          onConfirm={() => void onConfirmDelete()}
+          title={t('chat.delete_message')}
+          message={t('chat.delete_message_confirm')}
+          confirmText={t('chat.delete')}
+          cancelText={t('chat.cancel')}
+          danger
+        />
+      )}
+    </div>
+  )
+}
+
+const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  isLoading,
+  hasMore,
+  isLoadingMore,
+  onLoadMore,
+  onOptionClick,
+  onFeedback,
+  onRegenerate,
+  enableMessageDelete = false,
+  onSelectionModeChange,
+  onDeleteTurns,
+}) => {
+  const { topRef, containerRef } = useMessageListScroll({
+    messages,
+    isLoading,
+    hasMore,
+    isLoadingMore,
+    onLoadMore,
+  })
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const [messageSelectMode, setMessageSelectMode] = useState(false)
+  const [selectedTurnIds, setSelectedTurnIds] = useState<string[]>([])
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [deleteSubmitting, setDeleteSubmitting] = useState(false)
+
+  const lastAssistantMessageId = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+      if (messages[i].role === 'assistant') return messages[i].id
+    }
+    return null
+  }, [messages])
+
+  const turnGroups = useMemo(() => buildTurnGroups(messages), [messages])
+
+  const selectableTurnIds = useMemo(
+    () =>
+      turnGroups
+        .filter(({ items }) => !isTurnNonDeletable(items))
+        .map(({ turnId }) => turnId),
+    [turnGroups],
+  )
+
+  const allSelectableSelected =
+    selectableTurnIds.length > 0 &&
+    selectableTurnIds.every((id) => selectedTurnIds.includes(id))
+
+  const enterSelectMode = (turnId?: string) => {
+    setMessageSelectMode(true)
+    onSelectionModeChange?.(true)
+    if (turnId) {
+      setSelectedTurnIds((prev) =>
+        prev.includes(turnId) ? prev : [...prev, turnId],
+      )
+    }
+  }
+
+  const exitSelectMode = () => {
+    setMessageSelectMode(false)
+    setSelectedTurnIds([])
+    onSelectionModeChange?.(false)
+  }
+
+  const toggleTurnSelection = (turnId: string, items: Message[]) => {
+    if (isTurnNonDeletable(items)) return
+    setSelectedTurnIds((prev) =>
+      prev.includes(turnId)
+        ? prev.filter((x) => x !== turnId)
+        : [...prev, turnId],
+    )
+  }
+
+  const handleTurnCardClick = (
+    e: React.MouseEvent<HTMLDivElement>,
+    turnId: string,
+    items: Message[],
+  ) => {
+    if (!messageSelectMode) return
+    if (isTurnNonDeletable(items)) return
+    const el = e.target as HTMLElement
+    if (
+      el.closest(
+        'a, button, input, textarea, select, label, [role="checkbox"]',
+      )
+    ) {
+      return
+    }
+    toggleTurnSelection(turnId, items)
+  }
+
+  const toggleSelectAll = () => {
+    if (allSelectableSelected) {
+      setSelectedTurnIds([])
+    } else {
+      setSelectedTurnIds([...selectableTurnIds])
+    }
+  }
+
+  useEffect(() => {
+    if (!messageSelectMode) return
+    setSelectedTurnIds((prev) =>
+      prev.filter((id) => {
+        const g = turnGroups.find((x) => x.turnId === id)
+        return g ? !isTurnNonDeletable(g.items) : false
+      }),
+    )
+  }, [messages, messageSelectMode, turnGroups])
+
+  const runDeleteSelected = async () => {
+    if (!onDeleteTurns || selectedTurnIds.length === 0) return
+    setDeleteSubmitting(true)
+    try {
+      await onDeleteTurns(selectedTurnIds)
+      showToast(t('chat.delete_success'), 'success')
+      exitSelectMode()
+    } catch {
+      showToast(t('chat.delete_failed'), 'error')
+    } finally {
+      setDeleteSubmitting(false)
+      setDeleteConfirmOpen(false)
+    }
+  }
+
+  return (
+    <MessageListBody
+      containerRef={containerRef}
+      topRef={topRef}
+      turnGroups={turnGroups}
+      messages={messages}
+      isLoading={isLoading}
+      isLoadingMore={isLoadingMore}
+      lastAssistantMessageId={lastAssistantMessageId}
+      messageSelectMode={messageSelectMode}
+      selectedTurnIds={selectedTurnIds}
+      selectableTurnIds={selectableTurnIds}
+      allSelectableSelected={allSelectableSelected}
+      enableMessageDelete={enableMessageDelete}
+      hasDeleteApi={Boolean(onDeleteTurns)}
+      deleteConfirmOpen={deleteConfirmOpen}
+      deleteSubmitting={deleteSubmitting}
+      onToggleTurnSelection={toggleTurnSelection}
+      onTurnCardClick={handleTurnCardClick}
+      onEnterSelectMode={enterSelectMode}
+      onToggleSelectAll={toggleSelectAll}
+      onExitSelectMode={exitSelectMode}
+      onOpenDeleteConfirm={() => setDeleteConfirmOpen(true)}
+      onCloseDeleteConfirm={() => setDeleteConfirmOpen(false)}
+      onConfirmDelete={runDeleteSelected}
+      onFeedback={onFeedback}
+      onRegenerate={onRegenerate}
+      onOptionClick={onOptionClick}
+    />
+  )
+}
+
+export default MessageList

package/src/views/page-system/logs/components/message-list/message-item.tsx

@@ -0,0 +1,193 @@
+import type { Message } from '@/types';
+import clsx from 'clsx';
+import { Bot, User } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContentAnswer } from './content-answer';
+import { ContentQuestion } from './content-question';
+import PreparationSteps from './preparation-steps';
+import { ThinkingProcess } from './thinking-process';
+import { ToolbarAnswer, ToolbarQuestion } from './toolbar';
+
+/** 日志弹窗消息列表：暂不展示引导式提问（搜索建议 / suggested_replies） */
+const LOG_MESSAGE_LIST_SUGGESTION_ENABLED = false
+
+/** 用户消息默认头像（不使用后台用户头像） */
+function DefaultUserAvatar() {
+  return (
+    <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-200 dark:bg-slate-700">
+      <User size={16} className="text-slate-600 dark:text-slate-300" />
+    </div>
+  )
+}
+
+/** 助手消息默认头像（不使用后台智能体头像配置） */
+function DefaultAssistantAvatar() {
+  return (
+    <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-tr from-blue-500 to-purple-600">
+      <Bot size={18} className="text-white" />
+    </div>
+  )
+}
+
+export const MessageItem: React.FC<{
+  message: Message;
+  turnId: string;
+  lastAssistantMessageId: string | null;
+  messageSelectMode: boolean;
+  enableMessageDelete: boolean;
+  hasDeleteApi: boolean;
+  /** 该轮助手仍在流式输出时，提问侧不展示删除 */
+  userMessageDeleteHidden: boolean;
+  onEnterSelectMode: (turnId?: string) => void;
+  onFeedback?: (messageId: string, score: number) => void;
+  onRegenerate?: (message: Message) => void | Promise<void>;
+  onOptionClick?: (option: string) => void | Promise<void>;
+}> = ({
+  message,
+  turnId,
+  lastAssistantMessageId,
+  messageSelectMode,
+  enableMessageDelete,
+  hasDeleteApi,
+  userMessageDeleteHidden,
+  onEnterSelectMode,
+  onFeedback,
+  onRegenerate,
+  onOptionClick,
+}) => {
+  const { t } = useTranslation();
+
+  const hasThinkingProcess = message.thoughts && message.thoughts.length > 0;
+  const showThinkingProcess = hasThinkingProcess && !message.content;
+  const prepItems = message.preparation_items;
+  const hasAnswerContent =
+    typeof message.content === 'string' && message.content.trim().length > 0
+  /** 有分析步骤且尚无正文时：步骤条下方始终显示三点，直至正文开始输出 */
+  const showPrepLoadingDots =
+    !hasAnswerContent && !!prepItems?.length;
+
+  const isLastAssistantMessage =
+    message.role === 'assistant' && message.id === lastAssistantMessageId;
+
+  if (message.role === 'user') {
+    return (
+      <div className={clsx('flex w-full gap-3', 'justify-end')}>
+        <div className="flex min-w-0 max-w-[90%] flex-row-reverse items-start gap-3">
+          <DefaultUserAvatar />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <ContentQuestion content={message.content || ''} />
+            <ToolbarQuestion
+              content={message.content || ''}
+              turnId={turnId}
+              messageSelectMode={messageSelectMode}
+              enableMessageDelete={enableMessageDelete}
+              hasDeleteApi={hasDeleteApi}
+              userMessageDeleteHidden={userMessageDeleteHidden}
+              onEnterSelectMode={onEnterSelectMode}
+            />
+            {message.is_aborted && (
+              <div className="mt-1 text-right text-xs font-medium text-gray-400">
+                {t('chat.interrupted')}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full gap-3 justify-start">
+      <DefaultAssistantAvatar />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="prose dark:prose-invert break-words bg-transparent px-0 py-3.5 text-gray-900 dark:text-gray-100">
+          {prepItems && prepItems.length > 0 && (
+            <PreparationSteps
+              items={prepItems}
+              referencesKnowledgeItems={message.references_knowledge_items}
+            />
+          )}
+          {showPrepLoadingDots && (
+            <div
+              className="mb-2 mt-1 flex h-3 items-center gap-1"
+              role="status"
+              aria-label={t('common.loading')}
+            >
+              <div
+                className="h-1.5 w-1.5 animate-bounce rounded-full bg-blue-500"
+                style={{ animationDelay: '0ms' }}
+              />
+              <div
+                className="h-1.5 w-1.5 animate-bounce rounded-full bg-purple-500"
+                style={{ animationDelay: '150ms' }}
+              />
+              <div
+                className="h-1.5 w-1.5 animate-bounce rounded-full bg-blue-500"
+                style={{ animationDelay: '300ms' }}
+              />
+            </div>
+          )}
+          {!(
+            prepItems &&
+            prepItems.length > 0 &&
+            !hasAnswerContent
+          ) && (
+            <ThinkingProcess
+              thoughts={message.thoughts || []}
+              isContentVisible={hasAnswerContent}
+            />
+          )}
+          {hasAnswerContent ? (
+            <ContentAnswer content={message.content} />
+          ) : (
+            !showThinkingProcess &&
+            !(prepItems && prepItems.length > 0 && !hasAnswerContent) && (
+              <div className="flex h-6 items-center gap-1">
+                <div
+                  className="h-2 w-2 animate-bounce rounded-full bg-blue-500"
+                  style={{ animationDelay: '0ms' }}
+                />
+                <div
+                  className="h-2 w-2 animate-bounce rounded-full bg-purple-500"
+                  style={{ animationDelay: '150ms' }}
+                />
+                <div
+                  className="h-2 w-2 animate-bounce rounded-full bg-blue-500"
+                  style={{ animationDelay: '300ms' }}
+                />
+              </div>
+            )
+          )}
+        </div>
+
+        <ToolbarAnswer
+          message={message}
+          turnId={turnId}
+          isLastAssistantMessage={isLastAssistantMessage}
+          messageSelectMode={messageSelectMode}
+          enableMessageDelete={enableMessageDelete}
+          hasDeleteApi={hasDeleteApi}
+          onEnterSelectMode={onEnterSelectMode}
+          onFeedback={onFeedback}
+          onRegenerate={onRegenerate}
+        />
+
+        {/* 引导式提问：日志弹窗不展示（恢复时将 LOG_MESSAGE_LIST_SUGGESTION_ENABLED 置 true 并 import SuggestionList） */}
+        {LOG_MESSAGE_LIST_SUGGESTION_ENABLED &&
+          message.role === 'assistant' &&
+          message.options &&
+          message.options.length > 0 &&
+          !messageSelectMode &&
+          null}
+
+        {message.is_aborted && (
+          <div className="ml-2 mt-1 text-xs font-medium text-gray-400">
+            {t('chat.interrupted')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+