cx-chat 0.0.1

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

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