cx-chat 0.0.1

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

@@ -0,0 +1,224 @@
+import React from 'react'
+import {
+  ThumbsUp,
+  ThumbsDown,
+  Loader2,
+  RefreshCw,
+  Check,
+  Copy,
+} from 'lucide-react'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+import { useAuth } from '@/contexts/AuthContext'
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
+import type { Message } from '@/types'
+import { messageDislikeActive, messageLikeActive } from '@/utils/chatUtils'
+import { CxButton } from '@cx-ui'
+import { useReferencesKnowledge } from '../references-knowledge'
+
+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
+}
+
+/** 用户消息气泡下方：复制、删除 */
+export function ToolbarQuestion({
+  content,
+  turnId,
+  messageSelectMode,
+  enableMessageDelete,
+  hasDeleteApi,
+  userMessageDeleteHidden,
+  onEnterSelectMode,
+}: ToolbarQuestionProps) {
+  const { t } = useTranslation()
+
+  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} />
+        {enableMessageDelete && hasDeleteApi && !userMessageDeleteHidden && (
+          <CxButton.IconDelete
+            type="default"
+            tooltipTone="default"
+            iconSize={14}
+            tooltipTitle={t('chat.delete_message')}
+            onClick={() => onEnterSelectMode(turnId)}
+            className="!text-gray-500 hover:!text-red-600 hover:!bg-red-50 dark:hover:!bg-red-900/20"
+          />
+        )}
+      </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,
+  turnId,
+  isLastAssistantMessage,
+  messageSelectMode,
+  enableMessageDelete,
+  hasDeleteApi,
+  onEnterSelectMode,
+  onFeedback,
+  onRegenerate,
+}: ToolbarAnswerProps) {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const refItems = message.references_knowledge_items ?? []
+  const refs = useReferencesKnowledge()
+
+  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} />
+        )}
+
+        {hasPermission('system:chat:sessions-feedback') && (
+          <div className="flex items-center gap-1">
+            {message.is_streaming || message.id.startsWith('temp-') ? (
+              <div className="p-1.5 text-gray-400 animate-spin">
+                <Loader2 size={14} />
+              </div>
+            ) : (
+              <>
+                <CxButton.Icon
+                  type="primary"
+                  icon={
+                    <ThumbsUp
+                      size={14}
+                      fill={
+                        messageLikeActive(message) ? 'currentColor' : 'none'
+                      }
+                      className={
+                        messageLikeActive(message)
+                          ? 'text-blue-600 dark:text-blue-400'
+                          : undefined
+                      }
+                    />
+                  }
+                  tooltipTitle={t('common.like')}
+                  onClick={() => onFeedback?.(message.id, 1)}
+                />
+                <CxButton.Icon
+                  type="primary"
+                  icon={
+                    <ThumbsDown
+                      size={14}
+                      fill={
+                        messageDislikeActive(message) ? 'currentColor' : 'none'
+                      }
+                      className={
+                        messageDislikeActive(message)
+                          ? 'text-blue-600 dark:text-blue-400'
+                          : undefined
+                      }
+                    />
+                  }
+                  tooltipTitle={t('common.dislike')}
+                  onClick={() => onFeedback?.(message.id, -1)}
+                />
+              </>
+            )}
+          </div>
+        )}
+
+        {onRegenerate &&
+          isLastAssistantMessage &&
+          !message.is_streaming &&
+          !message.id.startsWith('temp-') &&
+          message.content && (
+            <CxButton.Icon
+              type="primary"
+              icon={<RefreshCw size={14} />}
+              tooltipTitle={t('chat.regenerate')}
+              onClick={() => void onRegenerate(message)}
+            />
+          )}
+
+        {enableMessageDelete && hasDeleteApi && !message.is_streaming && (
+          <CxButton.IconDelete
+            type="default"
+            tooltipTone="default"
+            iconSize={14}
+            tooltipTitle={t('chat.delete_message')}
+            onClick={() => onEnterSelectMode(turnId)}
+            className="!text-gray-500 hover:!text-red-600 hover:!bg-red-50 dark:hover:!bg-red-900/20"
+          />
+        )}
+
+        {refItems.length > 0 && (
+          <CxButton
+            type="link"
+            size="small"
+            className="ml-1 px-0"
+            onClick={() => refs.open(refItems)}
+          >
+            {t('chat.references_toolbar', { count: refItems.length })}
+          </CxButton>
+        )}
+    </div>
+  )
+}

package/src/views/chat/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/chat/components/references-knowledge/context.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import type { Message } from '@/types'
+
+export type ReferencesKnowledgeState = {
+  isOpen: boolean
+  items: NonNullable<Message['references_knowledge_items']>
+  /** 打开右侧参考资料面板，并更新展示内容 */
+  open: (items: NonNullable<Message['references_knowledge_items']>) => void
+  /** 关闭右侧参考资料面板 */
+  close: () => void
+}
+
+const Ctx = createContext<ReferencesKnowledgeState | null>(null)
+
+/**
+ * 右侧参考资料面板状态管理：用于「打开面板时挤窄消息列表」的统一布局控制。
+ */
+export function ReferencesKnowledgeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [items, setItems] = useState<
+    NonNullable<Message['references_knowledge_items']>
+  >([])
+
+  const open = useCallback(
+    (next: NonNullable<Message['references_knowledge_items']>) => {
+      setItems(next)
+      setIsOpen(true)
+    },
+    [],
+  )
+
+  const close = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const value = useMemo(
+    () => ({ isOpen, items, open, close }),
+    [isOpen, items, open, close],
+  )
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+/**
+ * 获取右侧参考资料面板状态与操作方法。
+ */
+export function useReferencesKnowledge() {
+  const ctx = useContext(Ctx)
+  if (!ctx) {
+    throw new Error('useReferencesKnowledge 必须在 ReferencesKnowledgeProvider 内使用')
+  }
+  return ctx
+}

package/src/views/chat/components/references-knowledge/index.ts

@@ -0,0 +1,9 @@
+export {
+  ReferencesKnowledgeProvider,
+  useReferencesKnowledge,
+} from './context'
+export type { ReferencesKnowledgeState } from './context'
+export { ReferencesKnowledgePanel } from './panel'
+export type { ReferencesKnowledgePanelProps } from './panel'
+export { default as KnowledgeDetailDrawer } from './modal/knowledge-detail-drawer'
+export { default as KnowledgeDocDetailDrawer } from './modal/knowledge-doc-detail-drawer'