cx-chat 0.0.1

package/src/views/chat/components/message-list/index.tsx

@@ -0,0 +1,520 @@
+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 {
+  ReferencesKnowledgePanel,
+  useReferencesKnowledge,
+} from '../references-knowledge'
+import { MessageItem } from './message-item'
+import { useMessageListScroll } from './use-message-list-scroll'
+
+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 refs = useReferencesKnowledge()
+  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',
+          refs.isOpen && 'pr-[420px]',
+        )}
+      >
+        <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={clsx(
+                'mx-auto flex w-full gap-3',
+                refs.isOpen ? 'max-w-6xl' : 'max-w-7xl',
+              )}
+            >
+              {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>
+
+      {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>
+      )}
+
+      <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
+      />
+
+      <ReferencesKnowledgePanel
+        isOpen={refs.isOpen}
+        onClose={refs.close}
+        items={refs.items}
+      />
+    </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