cx-chat 0.0.1 → 0.0.3

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

@@ -1,520 +0,0 @@
-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