cx-chat 0.0.1

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

@@ -0,0 +1,49 @@
+import { Spin } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export const ThinkingProcess: React.FC<{
+  thoughts: string[]
+  isContentVisible: boolean
+}> = ({ thoughts, isContentVisible }) => {
+  const { t } = useTranslation()
+  const currentThought =
+    thoughts && thoughts.length > 0 ? thoughts[thoughts.length - 1] : ''
+
+  const displayThought = React.useMemo(() => {
+    if (!currentThought) return ''
+    let text = currentThought
+    try {
+      if (currentThought.trim().startsWith('{')) {
+        const parsed = JSON.parse(currentThought)
+        text = parsed.thought || parsed.action || parsed.status || currentThought
+      }
+    } catch {
+      // ignore
+    }
+    return text.replace(/\.{3}$|…$/, '')
+  }, [currentThought])
+
+  if (isContentVisible) return null
+  if (!thoughts || thoughts.length === 0) return null
+
+  return (
+    <div className="mb-2">
+      <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+        <span
+          key={displayThought}
+          className="font-mono animate-fade-in"
+        >
+          {displayThought}
+        </span>
+        <div
+          className="flex h-6 shrink-0 items-center [&_.ant-spin-nested-loading]:!p-0"
+          role="status"
+          aria-label={t('common.loading')}
+        >
+          <Spin size="small" />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,134 @@
+import React from 'react'
+import { Check, Copy } from 'lucide-react'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
+import type { Message } from '@/types'
+import { CxButton } from '@cx-ui'
+
+/** 日志弹窗消息列表：暂不展示删除 */
+const LOG_MESSAGE_LIST_DELETE_ENABLED = false
+/** 日志弹窗消息列表：暂不展示好评、不满意 */
+const LOG_MESSAGE_LIST_FEEDBACK_ENABLED = false
+/** 日志弹窗消息列表：暂不展示重新生成 */
+const LOG_MESSAGE_LIST_REGENERATE_ENABLED = false
+
+function CopyButton({ content }: { content: string }) {
+  const { copy, isCopying } = useCopyToClipboard()
+  const { t } = useTranslation()
+
+  return (
+    <CxButton.Icon
+      type={isCopying ? 'success' : 'primary'}
+      icon={
+        isCopying ? (
+          <Check size={14} className="animate-pop" />
+        ) : (
+          <Copy size={14} />
+        )
+      }
+      tooltipTitle={isCopying ? t('common.copied') : t('common.copy')}
+      tooltipTone={isCopying ? 'success' : 'default'}
+      disabled={isCopying}
+      onClick={() => void copy(content)}
+      className={clsx(isCopying && 'scale-110')}
+    />
+  )
+}
+
+export type ToolbarQuestionProps = {
+  content: string
+  turnId: string
+  messageSelectMode: boolean
+  enableMessageDelete: boolean
+  hasDeleteApi: boolean
+  userMessageDeleteHidden: boolean
+  onEnterSelectMode: (turnId?: string) => void
+}
+
+/** 用户消息气泡下方：复制（删除已关闭，见 LOG_MESSAGE_LIST_DELETE_ENABLED） */
+export function ToolbarQuestion({
+  content,
+  messageSelectMode,
+}: ToolbarQuestionProps) {
+  if (!content || messageSelectMode) return null
+
+  return (
+    <div className="mt-1 flex justify-end">
+      <div className="flex items-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+        <CopyButton content={content} />
+        {/*
+          删除：日志弹窗不开放。恢复示例：
+          {LOG_MESSAGE_LIST_DELETE_ENABLED && enableMessageDelete && hasDeleteApi && !userMessageDeleteHidden && (
+            <CxButton.IconDelete ... onClick={() => onEnterSelectMode(turnId)} />
+          )}
+        */}
+        {LOG_MESSAGE_LIST_DELETE_ENABLED ? null : null}
+      </div>
+    </div>
+  )
+}
+
+export type ToolbarAnswerProps = {
+  message: Message
+  turnId: string
+  isLastAssistantMessage: boolean
+  messageSelectMode: boolean
+  enableMessageDelete: boolean
+  hasDeleteApi: boolean
+  onEnterSelectMode: (turnId?: string) => void
+  onFeedback?: (messageId: string, score: number) => void
+  onRegenerate?: (message: Message) => void | Promise<void>
+}
+
+/** 助手消息下方：复制（好评/不满意/重新生成/删除已关闭，见顶部开关常量） */
+export function ToolbarAnswer({
+  message,
+  isLastAssistantMessage,
+  messageSelectMode,
+}: ToolbarAnswerProps) {
+  if (message.role !== 'assistant') return null
+  if (!(message.content || message.is_streaming)) return null
+  /** 仅有 preparation、尚无正文时不再显示工具栏占位 loading，避免与步骤条重复 */
+  if (
+    message.is_streaming &&
+    !message.content &&
+    (message.preparation_items?.length ?? 0) > 0
+  ) {
+    return null
+  }
+  if (messageSelectMode) return null
+
+  return (
+    <div
+      className={clsx(
+        'ml-0 mt-1 flex items-center gap-1 transition-opacity duration-200',
+        isLastAssistantMessage
+          ? 'opacity-100'
+          : 'opacity-0 group-hover:opacity-100',
+      )}
+    >
+      {!message.is_streaming && message.content && (
+        <CopyButton content={message.content} />
+      )}
+
+      {/*
+        好评 / 不满意：日志弹窗不开放。恢复时将 LOG_MESSAGE_LIST_FEEDBACK_ENABLED 置 true，
+        并从 chat message-list/toolbar 拷回 ThumbsUp / ThumbsDown 与 onFeedback 逻辑。
+      */}
+      {LOG_MESSAGE_LIST_FEEDBACK_ENABLED ? null : null}
+
+      {/*
+        重新生成：日志弹窗不开放。恢复时将 LOG_MESSAGE_LIST_REGENERATE_ENABLED 置 true，
+        并接回 onRegenerate、RefreshCw 按钮。
+      */}
+      {LOG_MESSAGE_LIST_REGENERATE_ENABLED ? null : null}
+
+      {/*
+        删除：日志弹窗不开放。恢复时将 LOG_MESSAGE_LIST_DELETE_ENABLED 置 true，
+        并接回 CxButton.IconDelete 与 onEnterSelectMode。
+      */}
+      {LOG_MESSAGE_LIST_DELETE_ENABLED ? null : null}
+    </div>
+  )
+}

package/src/views/page-system/logs/components/message-list/use-message-list-scroll.ts

@@ -0,0 +1,214 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import type { Message } from '@/types';
+import { CHAT_MESSAGE_LIST_PREP_LAYOUT_EVENT } from './preparation-steps';
+
+/** 最后一条助手消息 preparation 变化时驱动列表滚底（与 messages 引用未必同步变） */
+function preparationItemsScrollSignature(msg: Message | undefined): string {
+  const items = msg?.preparation_items
+  if (!items?.length) return ''
+  return items
+    .map((x) => `${x.code}\t${x.name}\t${x.phase}\t${x.description ?? ''}`)
+    .join('\n')
+}
+
+export function useMessageListScroll(opts: {
+  messages: Message[];
+  isLoading: boolean;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: () => void;
+}) {
+  const { messages, isLoading, hasMore, isLoadingMore, onLoadMore } = opts;
+
+  const prepScrollKey = useMemo(() => {
+    const last = messages[messages.length - 1]
+    if (!last || last.role !== 'assistant') return ''
+    return preparationItemsScrollSignature(last)
+  }, [messages])
+
+  const topRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const prevLastMessageId = useRef<string | null>(null);
+  const prevMessagesLength = useRef(messages.length);
+  const prevIsLoadingRef = useRef(isLoading);
+  const isInitialLoad = useRef(true);
+  /** 流式 / Markdown 绘制后高度仍会变化：防抖 + rAF 避免与 useLayoutEffect、scrollIntoView smooth 打架导致上下跳 */
+  const stickScrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearStickScrollTimer = () => {
+    if (stickScrollTimerRef.current) {
+      clearTimeout(stickScrollTimerRef.current);
+      stickScrollTimerRef.current = null;
+    }
+  };
+
+  const scrollMessagesContainerToEnd = (
+    mode: 'immediate' | 'afterPaint' | 'debounced',
+  ) => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const apply = () => {
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+    };
+
+    if (mode === 'immediate') {
+      apply();
+      return;
+    }
+
+    if (mode === 'afterPaint') {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(apply);
+      });
+      return;
+    }
+
+    clearStickScrollTimer();
+    stickScrollTimerRef.current = setTimeout(() => {
+      stickScrollTimerRef.current = null;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(apply);
+      });
+    }, 80);
+  };
+
+  useEffect(() => {
+    return () => clearStickScrollTimer();
+  }, []);
+
+  useEffect(() => {
+    const onPrepLayout = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      const gap =
+        el.scrollHeight - el.scrollTop - el.clientHeight;
+      if (gap < 140) {
+        scrollMessagesContainerToEnd('debounced');
+      }
+    };
+    window.addEventListener(CHAT_MESSAGE_LIST_PREP_LAYOUT_EVENT, onPrepLayout);
+    return () =>
+      window.removeEventListener(CHAT_MESSAGE_LIST_PREP_LAYOUT_EVENT, onPrepLayout);
+  }, []);
+
+  useEffect(() => {
+    if (messages.length === 0) return;
+
+    const last = messages[messages.length - 1];
+    const currentLastId = last?.id ?? null;
+    const prevLastId = prevLastMessageId.current;
+
+    const prepPhaseNoAnswer =
+      last?.role === 'assistant' &&
+      (last.preparation_items?.length ?? 0) > 0 &&
+      !(typeof last.content === 'string' && last.content.trim());
+
+    if (isInitialLoad.current && messages.length > 0) {
+      scrollMessagesContainerToEnd('immediate');
+      isInitialLoad.current = false;
+    } else if (currentLastId && currentLastId !== prevLastId) {
+      scrollMessagesContainerToEnd('afterPaint');
+    } else {
+      const stick =
+        isLoading ||
+        (last?.role === 'assistant' && Boolean(last.is_streaming)) ||
+        prepPhaseNoAnswer;
+      if (stick && currentLastId && currentLastId === prevLastId) {
+        const container = containerRef.current;
+        if (container) {
+          const gap =
+            container.scrollHeight -
+            container.scrollTop -
+            container.clientHeight;
+          if (gap < 140) {
+            scrollMessagesContainerToEnd('debounced');
+          }
+        }
+      }
+    }
+
+    prevLastMessageId.current = currentLastId;
+    prevMessagesLength.current = messages.length;
+  }, [messages, isLoading, prepScrollKey]);
+
+  useEffect(() => {
+    if (messages.length === 0) {
+      isInitialLoad.current = true;
+    }
+  }, [messages.length]);
+
+  /** 仅首屏拉取结束滚底；勿在向上加载更多导致 length 增加时滚底 */
+  useEffect(() => {
+    const wasLoading = prevIsLoadingRef.current;
+    prevIsLoadingRef.current = isLoading;
+    if (wasLoading && !isLoading && messages.length > 0) {
+      scrollMessagesContainerToEnd('afterPaint');
+    }
+  }, [isLoading, messages.length]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
+          const container = containerRef.current;
+          if (container && onLoadMore) {
+            onLoadMore();
+            requestAnimationFrame(() => {});
+          }
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (topRef.current) {
+      observer.observe(topRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [hasMore, isLoadingMore, onLoadMore]);
+
+  /** 向上加载更多：记录 prepend 前滚动位置，内容插入顶部后补偿 scrollTop */
+  const loadMoreScrollSnapshotRef = useRef<{
+    scrollHeight: number;
+    scrollTop: number;
+  } | null>(null);
+
+  useEffect(() => {
+    if (isLoadingMore && containerRef.current) {
+      loadMoreScrollSnapshotRef.current = {
+        scrollHeight: containerRef.current.scrollHeight,
+        scrollTop: containerRef.current.scrollTop,
+      };
+    }
+  }, [isLoadingMore]);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const snap = loadMoreScrollSnapshotRef.current;
+
+    if (snap && container && !isLoadingMore) {
+      const heightDiff = container.scrollHeight - snap.scrollHeight;
+      if (heightDiff > 0) {
+        container.scrollTop = snap.scrollTop + heightDiff;
+        loadMoreScrollSnapshotRef.current = null;
+      }
+    } else if (
+      !snap &&
+      messages.length > prevMessagesLength.current &&
+      container
+    ) {
+      const isNearBottom =
+        container.scrollHeight - container.scrollTop - container.clientHeight <
+        100;
+      if (isNearBottom || messages.length <= 1) {
+        scrollMessagesContainerToEnd('afterPaint');
+      }
+    }
+    prevMessagesLength.current = messages.length;
+  }, [messages, isLoadingMore]);
+
+  return { topRef, containerRef };
+}
+

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

@@ -0,0 +1,239 @@
+import {
+  CHAT_STREAM_HANDLED_JSON_ERROR,
+  getChatSessionIdAPI,
+  postChatStreamRequest,
+} from '@/api/chat'
+import { useAuth } from '@/contexts/AuthContext'
+import { clampChatStreamFeatureFlags } from '@/contexts/ChatContext'
+import { useToast } from '@/contexts/ToastContext'
+import type { Message } from '@/types'
+import {
+  markMessagePreparationDone,
+  omitMessagePreparationForPersist,
+  parseNewSessionId,
+} from '@/utils/chatUtils'
+import {
+  getChatEnableDataAnalysis,
+  getChatEnableKnowledgeBase,
+  getChatEnableNetwork,
+} from '@/utils/storage'
+import MessageList from './message-list'
+import '@/views/chat/chat.less'
+import { CxModal } from '@cx-ui'
+import {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { readLogMessageSseStream } from './log-message-stream'
+
+/**
+ * 日志消息弹窗：消息列表仅保留复制。
+ * 好评 / 不满意 / 重新生成 / 删除 已在 `./message-list/toolbar.tsx` 关闭，
+ * 批量删除栏在 `./message-list/index.tsx` 关闭（见 LOG_MESSAGE_LIST_BATCH_DELETE_ENABLED），
+ * 引导式提问在 `./message-list/message-item.tsx` 关闭（见 LOG_MESSAGE_LIST_SUGGESTION_ENABLED）。
+ */
+const FIXED_OPEN_MESSAGE = '今天上海天气如何？'
+
+/** 生成消息列表用的临时 id。 */
+function createMessageId(prefix: string) {
+  if (typeof crypto.randomUUID === 'function') {
+    return `${prefix}-${crypto.randomUUID()}`
+  }
+  return `${prefix}-${Date.now()}`
+}
+
+const MessageModal = forwardRef(function MessageModal(_props: unknown, ref) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+  const [open, setOpen] = useState(false)
+  const [modalKey, setModalKey] = useState(0)
+  const [messages, setMessages] = useState<Message[]>([])
+  const [streamingContent, setStreamingContent] = useState<Message | null>(null)
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [booting, setBooting] = useState(false)
+
+  const abortRef = useRef<AbortController | null>(null)
+  const streamGenRef = useRef(0)
+  const streamingRef = useRef<Message | null>(null)
+
+  const displayMessages = useMemo(() => {
+    if (streamingContent) return [...messages, streamingContent]
+    return messages
+  }, [messages, streamingContent])
+
+  /** 中止当前流式请求。 */
+  const abortStream = () => {
+    streamGenRef.current += 1
+    if (abortRef.current) {
+      abortRef.current.abort()
+      abortRef.current = null
+    }
+    setIsStreaming(false)
+    setStreamingContent(null)
+    streamingRef.current = null
+  }
+
+  /** 新会话并发送固定提问。 */
+  const startFreshChat = async () => {
+    abortStream()
+    const thisGen = streamGenRef.current
+
+    setMessages([])
+    setStreamingContent(null)
+    streamingRef.current = null
+    setBooting(true)
+
+    try {
+      const raw = await getChatSessionIdAPI()
+      const sessionId = parseNewSessionId(raw)
+      const streamFlags = clampChatStreamFeatureFlags(
+        {
+          enableNetwork: getChatEnableNetwork(),
+          enableKnowledgeBase: getChatEnableKnowledgeBase(),
+          enableDataAnalysis: getChatEnableDataAnalysis(),
+        },
+        hasPermission,
+      )
+
+      const optimisticUserMessage: Message = {
+        id: createMessageId('u'),
+        role: 'user',
+        content: FIXED_OPEN_MESSAGE,
+        created_at: new Date().toISOString(),
+      }
+
+      const initialStreamingMessage: Message = {
+        id: createMessageId('temp'),
+        role: 'assistant',
+        content: '',
+        thoughts: [],
+        options: [],
+        preparation_items: [],
+        is_streaming: true,
+        created_at: new Date().toISOString(),
+      }
+
+      setMessages([optimisticUserMessage])
+      setStreamingContent(initialStreamingMessage)
+      streamingRef.current = initialStreamingMessage
+      setIsStreaming(true)
+
+      const controller = new AbortController()
+      abortRef.current = controller
+
+      const response = await postChatStreamRequest(
+        {
+          message: FIXED_OPEN_MESSAGE,
+          session_id: sessionId,
+          enableNetwork: streamFlags.enableNetwork,
+          enableKnowledgeBase: streamFlags.enableKnowledgeBase,
+          enableDataAnalysis: streamFlags.enableDataAnalysis,
+        },
+        { signal: controller.signal },
+      )
+
+      await readLogMessageSseStream(response, {
+        thisStreamGen: thisGen,
+        streamGenerationRef: streamGenRef,
+        setStreamingContent,
+        setIsStreaming,
+        streamingContentRef: streamingRef,
+        syncLastUserMessageTurnId: (turnKey: string) => {
+          setMessages((prev) => {
+            for (let i = prev.length - 1; i >= 0; i--) {
+              if (prev[i].role === 'user') {
+                const u = prev[i]
+                const next = [...prev]
+                next[i] = {
+                  ...u,
+                  id: `${turnKey}-10`,
+                  turn_id: turnKey,
+                }
+                return next
+              }
+            }
+            return prev
+          })
+        },
+      })
+
+      if (thisGen === streamGenRef.current && streamingRef.current) {
+        const raw = markMessagePreparationDone({
+          ...streamingRef.current,
+          is_streaming: false,
+        })
+        const hasAnswer =
+          typeof raw.content === 'string' && raw.content.trim().length > 0
+        const finalMsg = hasAnswer
+          ? omitMessagePreparationForPersist(raw)
+          : raw
+        setMessages((prev) => {
+          const exists = prev.some((m) => m.id === finalMsg.id)
+          if (!exists) return [...prev, finalMsg]
+          return prev.map((m) => (m.id === finalMsg.id ? finalMsg : m))
+        })
+      }
+    } catch (err: any) {
+      if (thisGen !== streamGenRef.current) return
+      if (err?.name === 'AbortError') return
+      if (err?.message === CHAT_STREAM_HANDLED_JSON_ERROR) return
+      showToast(t('chat.send_failed'), 'error') // 发送消息失败
+    } finally {
+      if (thisGen === streamGenRef.current) {
+        setIsStreaming(false)
+        setStreamingContent(null)
+        streamingRef.current = null
+        if (abortRef.current) {
+          abortRef.current = null
+        }
+      }
+      setBooting(false)
+    }
+  }
+
+  /** 关闭消息弹窗并重置展示状态。 */
+  const close = () => {
+    abortStream()
+    setOpen(false)
+    setMessages([])
+    setBooting(false)
+  }
+
+  useImperativeHandle(ref, () => ({
+    /** 打开新弹窗并自动发送固定消息。 */
+    open: () => {
+      setModalKey((k) => k + 1)
+      setOpen(true)
+      void startFreshChat()
+    },
+    close,
+  }))
+
+  const listLoading = booting || (isStreaming && messages.length === 0)
+
+  return (
+    <CxModal
+      key={`log-message-modal-${modalKey}`}
+      title={t('system.sys_log.message.title')} // 消息
+      isOpen={open}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{ width: 'min(920px, 92vw)' }}
+    >
+      <div className="flex h-[min(70vh,640px)] min-h-[360px] flex-col overflow-hidden rounded-lg bg-white dark:bg-[#131314]">
+        <MessageList
+          key={modalKey}
+          messages={displayMessages}
+          isLoading={listLoading}
+        />
+      </div>
+    </CxModal>
+  )
+})
+
+export default MessageModal