cx-chat 0.0.2 → 0.0.3

package/src/views/chat/index-session.tsx

@@ -1,647 +0,0 @@
-import './chat.less'
-
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Loader2 } from 'lucide-react'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  Navigate,
-  useLocation,
-  useOutletContext,
-  useParams,
-} from 'react-router-dom'
-
-import {
-  deleteChatMessageAPI,
-  feedbackChatMessageAPI,
-  getChatPromptAPI,
-  getChatSessionsAPI,
-  postChatMessagesAPI,
-} from '@/api/chat'
-import { getKnowledgeNameListAPI } from '@/api/menus/knowledge'
-import { useAuth } from '@/contexts/AuthContext'
-import { useChatContext } from '@/contexts/ChatContext'
-import { useToast } from '@/contexts/ToastContext'
-import type { MainLayoutContext } from '@/hooks/useStickyHeader'
-import type { Message } from '@/types'
-import {
-  applySessionPromptBinding,
-  buildChatFeedbackEvaluationType,
-  evaluationTypeAfterFeedbackRequest,
-  findLastAssistantMessage,
-  findLastNonSystemMessage,
-  getMessageEvaluationDisplay,
-  mergeStreamingPlaceholderThread,
-  normalizeMessagesList,
-  normalizeSessionsToThreads,
-  parseChatSessionPromptSuggestions,
-  resolveMessageTurnIdForFeedback,
-} from '@/utils/chatUtils'
-import {
-  getChatEnableDataAnalysis,
-  getChatEnableKnowledgeBase,
-  getChatEnableNetwork,
-} from '@/utils/storage'
-
-import { useDeletingChatSessionId } from '@/hooks/useThreadActions'
-import ChatInput from './components/chat-input'
-import HeaderThreadTitle from './components/header-thread-title'
-import MessageList from './components/message-list'
-import PreparationSteps, {
-  CHAT_PREPARATION_DEMO_ITEMS,
-  isChatPreparationDemoEnabled,
-} from './components/message-list/preparation-steps'
-import {
-  ReferencesKnowledgeProvider,
-  useReferencesKnowledge,
-} from './components/references-knowledge'
-import { useChatCommon } from './hooks/use-chat-common'
-
-/**
- * 开发态样式联调：给历史消息注入「参考资料」demo 数据，便于在后台未接入时预览抽屉展示。
- */
-function injectReferencesKnowledgeDemo(messages: Message[]): Message[] {
-  // const demoItems: NonNullable<Message['references_knowledge_items']> = [
-  //   {
-  //     kb_code: 'kb_000002',
-  //     doc_code: 'kb_000002_20260415000003',
-  //     page_content: '王刚平时在公司食堂做饭，擅长江湖菜',
-  //   },
-  //   {
-  //     kb_code: 'kb_000002',
-  //     doc_code: 'kb_000002_20260415000002',
-  //     page_content: '小林的平时工作是负责运维公司服务器',
-  //   },
-  //   {
-  //     kb_code: 'kb_000002',
-  //     doc_code: 'kb_000002_20260415000004',
-  //     page_content: '小鹏在公司天天摸鱼啥也不干',
-  //   },
-  // ]
-
-  for (let i = messages.length - 1; i >= 0; i -= 1) {
-    const m = messages[i]
-    if (m.role !== 'assistant') continue
-    if (!m.content) continue
-    if (m.is_streaming) continue
-    if (m.references_knowledge_items && m.references_knowledge_items.length > 0)
-      return messages
-    const next = [...messages]
-    // references_knowledge_items: demoItems
-    next[i] = { ...m,  }
-    return next
-  }
-  return messages
-}
-
-/**
- * 解析知识库名称接口，生成 code -> name 的映射表。
- */
-function buildKnowledgeCodeNameMap(raw: unknown): Record<string, string> {
-  const root =
-    raw && typeof raw === 'object' && 'data' in raw
-      ? (raw as { data?: unknown }).data
-      : raw
-  const list = Array.isArray(root)
-    ? root
-    : root && typeof root === 'object' && Array.isArray((root as { data?: unknown }).data)
-      ? ((root as { data?: unknown }).data as unknown[])
-      : []
-  const map: Record<string, string> = {}
-  for (const item of list) {
-    if (!item || typeof item !== 'object') continue
-    const row = item as Record<string, unknown>
-    const code = typeof row.code === 'string' ? row.code.trim() : ''
-    const name = typeof row.name === 'string' ? row.name.trim() : ''
-    if (!code || !name) continue
-    map[code] = name
-  }
-  return map
-}
-
-/**
- * 给参考资料项补充知识库名称，供界面显示“参考资料（名称）/知识库：名称”。
- */
-function attachKnowledgeNameToReferences(
-  refs: NonNullable<Message['references_knowledge_items']> | undefined,
-  knowledgeCodeNameMap: Record<string, string>,
-): NonNullable<Message['references_knowledge_items']> | undefined {
-  if (!refs || refs.length === 0) return refs
-  return refs.map((item) => {
-    /** 通过知识库 code 映射知识库名称 */
-    const kbCode = typeof item.kb_code === 'string' ? item.kb_code.trim() : ''
-    /** 通过文档 code 映射文档名称 */
-    const docCode = typeof item.doc_code === 'string' ? item.doc_code.trim() : ''
-    const kbName = kbCode ? knowledgeCodeNameMap[kbCode] : ''
-    const docName = docCode ? knowledgeCodeNameMap[docCode] : ''
-    if (!kbName && !docName) return item
-    return {
-      ...item,
-      ...(kbName ? { kb_name: kbName } : {}),
-      ...(docName ? { doc_name: docName } : {}),
-    }
-  })
-}
-
-/**
- * 参考资料感知输入框：根据参考资料面板状态自动调整右侧内边距。
- */
-function ReferencesKnowledgeAwareInput({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const refs = useReferencesKnowledge()
-  return (
-    <div className={`w-full ${refs.isOpen ? 'pr-[420px]' : ''}`}>
-      {children}
-    </div>
-  )
-}
-
-const ChatSessionView: React.FC<{ sessionId: string }> = ({ sessionId }) => {
-  const location = useLocation()
-  const chatPrepDemoEnabled =
-    import.meta.env.DEV && isChatPreparationDemoEnabled(location.search)
-  /** 当前正在删除的会话 id，用于判断本页是否显示删除遮罩 */
-  const deletingSessionId = useDeletingChatSessionId()
-  /** 路由参数解码后的会话 id，供接口请求和对比使用 */
-  const decodedSessionId = decodeURIComponent(sessionId)
-  /** 是否正在删除当前会话 */
-  const isDeletingThisSession =
-    deletingSessionId != null && deletingSessionId === decodedSessionId
-
-  /** React Query 客户端，用于读写消息缓存 */
-  const queryClient = useQueryClient()
-  /** 全局消息提示方法 */
-  const { showToast } = useToast()
-  /** 国际化函数 */
-  const { t } = useTranslation()
-  /** 权限判断方法 */
-  const { hasPermission } = useAuth()
-  /** 布局头部标题设置方法 */
-  const { setHeaderTitle } = useOutletContext<MainLayoutContext>()
-  const {
-    activeThreadId,
-    isStreaming,
-    streamingContent,
-    streamingPlaceholderThread,
-    sendMessage,
-    regenerateMessage,
-  } = useChatContext()
-  /** 会话输入区通用能力（创建权限、停止生成） */
-  const { canCreate, handleStop } = useChatCommon()
-  /** 消息选择模式，开启后隐藏输入框并锁定标题编辑 */
-  const [messageSelectMode, setMessageSelectMode] = useState(false)
-  /** 向上翻页加载的更早消息（与 useQuery 最新一页拼接） */
-  const [olderMessages, setOlderMessages] = useState<Message[]>([])
-  const [messagesHasMore, setMessagesHasMore] = useState(true)
-  const [isLoadingMoreMessages, setIsLoadingMoreMessages] = useState(false)
-
-  /** 是否有“重新生成”权限 */
-  const canResend = hasPermission('system:chat:re-send')
-  /** 是否有“删除消息”权限 */
-  const canDeleteMessage = hasPermission('system:chat:message-delete')
-
-  const { data: threadsRemote = [] } = useQuery({
-    queryKey: ['threads'],
-    queryFn: async () => {
-      const raw = await getChatSessionsAPI()
-      return normalizeSessionsToThreads(raw)
-    },
-    enabled: hasPermission('system:chat:sessions'),
-  })
-
-  const threads = useMemo(
-    () =>
-      mergeStreamingPlaceholderThread(threadsRemote, {
-        placeholder: streamingPlaceholderThread,
-        activeThreadId,
-        isStreaming,
-      }),
-    [threadsRemote, streamingPlaceholderThread, activeThreadId, isStreaming],
-  )
-
-  /** 根据当前会话和选择状态设置页面头部标题 */
-  useEffect(() => {
-    setHeaderTitle(
-      <HeaderThreadTitle
-        threadId={sessionId}
-        allThreads={threads}
-        titleReadOnly={messageSelectMode}
-      />,
-    )
-    return () => setHeaderTitle(null)
-  }, [sessionId, setHeaderTitle, threads, messageSelectMode])
-
-  useEffect(() => {
-    setOlderMessages([])
-    setMessagesHasMore(true)
-  }, [sessionId])
-
-  const {
-    data: messagesLatest = [],
-    isLoading: isMessagesLoading,
-    error: messagesError,
-  } = useQuery({
-    queryKey: ['messages', sessionId],
-    queryFn: async ({ queryKey }) => {
-      const sid = String(queryKey[1] ?? '')
-      const raw = await postChatMessagesAPI({ sessionId: sid, round: 5 })
-      const list = normalizeMessagesList(raw)
-      setOlderMessages([])
-      setMessagesHasMore(list.length > 0)
-      return list
-    },
-    enabled: !!sessionId && hasPermission('system:chat:message-list'),
-    // 避免与 ChatContext 乐观更新 / 流式结束写缓存打架；仍可在需要处 invalidate
-    staleTime: 30_000,
-    refetchOnWindowFocus: false,
-  })
-
-  const messages = useMemo(() => {
-    if (olderMessages.length === 0) return messagesLatest
-    const latestIds = new Set(messagesLatest.map((m) => m.id))
-    const older = olderMessages.filter((m) => !latestIds.has(m.id))
-    return [...older, ...messagesLatest]
-  }, [olderMessages, messagesLatest])
-
-  const handleLoadMoreMessages = useCallback(async () => {
-    if (isLoadingMoreMessages || !messagesHasMore || isMessagesLoading) return
-    // 游标：上一次请求返回的第一条（后台顺序已正确，往前拼在列表头部）
-    const cursorMsg =
-      olderMessages.length > 0 ? olderMessages[0] : messagesLatest[0]
-    if (!cursorMsg) return
-    const turnId = resolveMessageTurnIdForFeedback(cursorMsg)
-    if (!turnId) {
-      setMessagesHasMore(false)
-      return
-    }
-    setIsLoadingMoreMessages(true)
-    try {
-      const raw = await postChatMessagesAPI({
-        sessionId: decodedSessionId,
-        round: 5,
-        turnId,
-      })
-      const batch = normalizeMessagesList(raw)
-      if (batch.length === 0) {
-        setMessagesHasMore(false)
-      } else {
-        setOlderMessages((prev) => {
-          const ids = new Set([...prev, ...messagesLatest].map((m) => m.id))
-          const merged = batch.filter((m) => !ids.has(m.id))
-          return [...merged, ...prev]
-        })
-      }
-    } catch (e) {
-      console.error('[chat-session] load more messages failed', e)
-    } finally {
-      setIsLoadingMoreMessages(false)
-    }
-  }, [
-    isLoadingMoreMessages,
-    messagesHasMore,
-    isMessagesLoading,
-    olderMessages,
-    decodedSessionId,
-    messagesLatest,
-  ])
-
-  /** 获取知识库 code-name 列表，用于将参考资料中的 kb_code 转成可读名称 */
-  const { data: knowledgeCodeNameMap = {} } = useQuery({
-    queryKey: ['knowledgeNameList'],
-    queryFn: async () => {
-      const raw = await getKnowledgeNameListAPI()
-      return buildKnowledgeCodeNameMap(raw)
-    },
-  })
-
-  /** 会话建议：仅在进入该会话（queryKey 随 sessionId 变化）时请求，不在发送/重试后刷新，避免回答结束后重绑建议导致界面跳动 */
-  const {
-    data: sessionPromptSuggestions = [],
-    dataUpdatedAt: sessionPromptDataUpdatedAt = 0,
-  } = useQuery({
-    queryKey: ['chatSessionPrompt', sessionId],
-    queryFn: async () => {
-      try {
-        const raw = await getChatPromptAPI({ sessionId: decodedSessionId })
-        return parseChatSessionPromptSuggestions(raw)
-      } catch {
-        return []
-      }
-    },
-    enabled: !!sessionId && hasPermission('system:chat:session-prompt'),
-    staleTime: 60_000,
-    refetchOnWindowFocus: false,
-  })
-
-  /** 接口用 sessionId 查；展示绑在「当次请求完成时」的最后一条非流式助手消息 id 上 */
-  const [sessionPromptBind, setSessionPromptBind] = useState<{
-    messageId: string
-    items: string[]
-  } | null>(null)
-  /** 记录最近一次会话建议请求完成时间，用于判断是否是新一轮建议 */
-  const lastSessionPromptFetchAtRef = useRef(0)
-
-  /** 会话切换时重置建议绑定状态 */
-  useEffect(() => {
-    lastSessionPromptFetchAtRef.current = 0
-    setSessionPromptBind(null)
-  }, [sessionId])
-
-  /** 拼接尾部消息：当前会话流式中时将流式内容拼到消息尾部 */
-  const tailMessages = useMemo(() => {
-    if (activeThreadId === sessionId && streamingContent) {
-      return [...messages, streamingContent]
-    }
-    return messages
-  }, [messages, streamingContent, activeThreadId, sessionId])
-
-  /** 根据尾部消息状态和建议更新时间，决定建议挂载到哪条助手消息 */
-  useEffect(() => {
-    const tail = findLastNonSystemMessage(tailMessages)
-    const lastAsst = findLastAssistantMessage(tailMessages)
-
-    if (tail?.role === 'user') {
-      setSessionPromptBind(null)
-      lastSessionPromptFetchAtRef.current = 0
-      return
-    }
-
-    if (!sessionPromptSuggestions.length) {
-      setSessionPromptBind(null)
-      lastSessionPromptFetchAtRef.current = 0
-      return
-    }
-
-    if (!lastAsst || lastAsst.is_streaming) {
-      setSessionPromptBind((prev) => {
-        if (!prev) return null
-        if (lastAsst?.is_streaming && prev.messageId === lastAsst.id) {
-          return null
-        }
-        return prev
-      })
-      return
-    }
-
-    const promptJustFetched =
-      sessionPromptDataUpdatedAt !== lastSessionPromptFetchAtRef.current
-    if (promptJustFetched) {
-      lastSessionPromptFetchAtRef.current = sessionPromptDataUpdatedAt
-      setSessionPromptBind({
-        messageId: lastAsst.id,
-        items: [...sessionPromptSuggestions],
-      })
-      return
-    }
-
-    setSessionPromptBind((prev) => {
-      if (!prev) return null
-      if (
-        tail?.role === 'assistant' &&
-        tail.id === prev.messageId &&
-        lastAsst.id === prev.messageId
-      ) {
-        return prev
-      }
-      return null
-    })
-  }, [
-    tailMessages,
-    sessionPromptSuggestions,
-    sessionPromptDataUpdatedAt,
-  ])
-
-  const messagesWithSessionPromptBind = useMemo(
-    () => applySessionPromptBinding(messages, sessionPromptBind),
-    [messages, sessionPromptBind],
-  )
-
-  /** 开发环境下给消息注入参考资料演示数据，便于联调展示 */
-  const messagesWithDemoRefs = useMemo(() => {
-    if (!import.meta.env.DEV) return messagesWithSessionPromptBind
-    return injectReferencesKnowledgeDemo(messagesWithSessionPromptBind)
-  }, [messagesWithSessionPromptBind])
-
-  /** 统一给参考资料补充知识库名称，避免界面直接展示知识库 code */
-  const messagesWithKnowledgeName = useMemo(
-    () =>
-      messagesWithDemoRefs.map((message) => ({
-        ...message,
-        references_knowledge_items: attachKnowledgeNameToReferences(
-          message.references_knowledge_items,
-          knowledgeCodeNameMap,
-        ),
-      })),
-    [messagesWithDemoRefs, knowledgeCodeNameMap],
-  )
-
-  /** 监听消息列表查询异常并打印日志 */
-  useEffect(() => {
-    if (messagesError) {
-      console.error('[chat-session] messages query error:', messagesError)
-    }
-  }, [messagesError])
-
-  /** 组装最终展示消息：当前会话流式中时追加流式内容 */
-  const displayMessages = useMemo(() => {
-    if (activeThreadId === sessionId && streamingContent) {
-      return [
-        ...messagesWithKnowledgeName,
-        {
-          ...streamingContent,
-          references_knowledge_items: attachKnowledgeNameToReferences(
-            streamingContent.references_knowledge_items,
-            knowledgeCodeNameMap,
-          ),
-        },
-      ]
-    }
-    return messagesWithKnowledgeName
-  }, [
-    messagesWithKnowledgeName,
-    streamingContent,
-    activeThreadId,
-    sessionId,
-    knowledgeCodeNameMap,
-  ])
-
-  /** 发送消息：处理空文本与联网参数后调用会话发送能力 */
-  const handleSend = useCallback(
-    async (
-      message: string,
-      opts?: {
-        enableNetwork?: boolean
-        enableKnowledgeBase?: boolean
-        enableDataAnalysis?: boolean
-      },
-    ) => {
-      const text = message.trim()
-      if (!text) return
-      const enableNetwork = opts?.enableNetwork ?? getChatEnableNetwork()
-      const enableKnowledgeBase =
-        opts?.enableKnowledgeBase ?? getChatEnableKnowledgeBase()
-      const enableDataAnalysis =
-        opts?.enableDataAnalysis ?? getChatEnableDataAnalysis()
-      await sendMessage(text, sessionId, {
-        enableNetwork,
-        enableKnowledgeBase,
-        enableDataAnalysis,
-      })
-    },
-    [sendMessage, sessionId],
-  )
-
-  /** 重新生成消息：根据消息解析 turnId 后触发重试 */
-  const handleRegenerate = useCallback(
-    async (msg: Message) => {
-      const turnId = resolveMessageTurnIdForFeedback(msg)
-      if (!turnId) return
-      const enableNetwork = getChatEnableNetwork()
-      const enableKnowledgeBase = getChatEnableKnowledgeBase()
-      const enableDataAnalysis = getChatEnableDataAnalysis()
-      await regenerateMessage(sessionId, turnId, {
-        enableNetwork,
-        enableKnowledgeBase,
-        enableDataAnalysis,
-      })
-    },
-    [regenerateMessage, sessionId],
-  )
-
-  /** 提交消息点赞/点踩：先乐观更新，再调用反馈接口，失败则回滚刷新 */
-  const handleFeedback = useCallback(
-    async (messageId: string, score: number) => {
-      const currentData = queryClient.getQueryData<Message[]>([
-        'messages',
-        sessionId,
-      ])
-      const msg = currentData?.find((m) => m.id === messageId)
-      if (!msg) return
-
-      const display = getMessageEvaluationDisplay(msg)
-      const clickedLike = score === 1
-      const evaluationType = buildChatFeedbackEvaluationType(
-        display,
-        clickedLike,
-      )
-      const nextEvaluationType =
-        evaluationTypeAfterFeedbackRequest(evaluationType)
-
-      queryClient.setQueryData<Message[]>(['messages', sessionId], (old) => {
-        const prev = old ?? []
-        return prev.map((m) =>
-          m.id === messageId
-            ? {
-                ...m,
-                evaluation_type: nextEvaluationType,
-                feedback_score: undefined,
-              }
-            : m,
-        )
-      })
-
-      try {
-        await feedbackChatMessageAPI({
-          sessionId,
-          turnId: resolveMessageTurnIdForFeedback(msg),
-          evaluationType,
-        })
-      } catch (error) {
-        console.error('Feedback failed', error)
-        showToast(t('common.error'), 'error')
-        await queryClient.invalidateQueries({ queryKey: ['messages', sessionId] })
-      }
-    },
-    [sessionId, queryClient, showToast, t],
-  )
-
-  /** 当前会话是否处于流式生成中 */
-  const isCurrentThreadStreaming =
-    isStreaming && activeThreadId === sessionId
-  /** 是否有其他会话正在流式生成（用于禁用当前页部分操作） */
-  const isOtherThreadStreaming =
-    isStreaming && activeThreadId !== sessionId
-
-  /** 批量删除会话轮次消息，并刷新当前会话消息列表 */
-  const handleDeleteChatTurns = useCallback(
-    async (turnIds: string[]) => {
-      await deleteChatMessageAPI({
-        sessionId,
-        turnIdList: turnIds,
-      })
-      await queryClient.invalidateQueries({ queryKey: ['messages', sessionId] })
-    },
-    [queryClient, sessionId],
-  )
-
-  return (
-    <div className="flex h-full bg-white dark:bg-[#131314]">
-      <div className="flex-1 flex flex-col h-full relative">
-        {isDeletingThisSession && (
-          <div
-            className="absolute inset-0 z-20 flex items-center justify-center bg-white/75 backdrop-blur-[1px] dark:bg-[#131314]/80"
-            aria-busy="true"
-            aria-label={t('common.loading')}
-          >
-            <Loader2 size={28} className="animate-spin text-blue-500" />
-          </div>
-        )}
-        <ReferencesKnowledgeProvider key={decodedSessionId}>
-          <div className="flex-1 overflow-hidden flex flex-col pb-4">
-            <MessageList
-              key={sessionId}
-              messages={displayMessages}
-              isLoading={isCurrentThreadStreaming || isMessagesLoading}
-              hasMore={messagesHasMore}
-              isLoadingMore={isLoadingMoreMessages}
-              onLoadMore={handleLoadMoreMessages}
-              onOptionClick={handleSend}
-              onFeedback={handleFeedback}
-              onRegenerate={canResend && !isOtherThreadStreaming ? handleRegenerate : undefined}
-              enableMessageDelete={canDeleteMessage && !isOtherThreadStreaming}
-              onSelectionModeChange={setMessageSelectMode}
-              onDeleteTurns={handleDeleteChatTurns}
-            />
-          </div>
-          {chatPrepDemoEnabled && (
-              <div className="shrink-0 border-t border-gray-200/90 px-4 pt-2 dark:border-gray-700/90">
-                <div className="mx-auto flex w-full max-w-7xl justify-start">
-                  <PreparationSteps items={CHAT_PREPARATION_DEMO_ITEMS} />
-                </div>
-              </div>
-            )}
-          <ReferencesKnowledgeAwareInput>
-            {canCreate && !messageSelectMode ? (
-              <ChatInput
-                onSend={handleSend}
-                onStop={handleStop}
-                isLoading={isCurrentThreadStreaming}
-                disableSend={isOtherThreadStreaming}
-              />
-            ) : !canCreate ? (
-              <div className="p-4 text-center text-gray-500 italic text-sm">
-                {t('chat.no_create_permission') ||
-                  'You do not have permission to send messages.'}
-              </div>
-            ) : null}
-          </ReferencesKnowledgeAwareInput>
-        </ReferencesKnowledgeProvider>
-      </div>
-    </div>
-  )
-}
-
-const ChatSessionPage: React.FC = () => {
-  /** 读取路由中的会话 id 参数 */
-  const { sessionId } = useParams<{ sessionId: string }>()
-  /** 会话 id 缺失时回退到会话首页 */
-  if (!sessionId) {
-    return <Navigate to="/chat" replace />
-  }
-  return <ChatSessionView sessionId={sessionId} />
-}
-
-export default ChatSessionPage