@lobehub/lobehub 2.0.0-next.344 → 2.0.0-next.346

package/src/features/Conversation/ChatList/components/AutoScroll/index.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { memo, useEffect } from 'react';
+
+import {
+  dataSelectors,
+  messageStateSelectors,
+  useConversationStore,
+  virtuaListSelectors,
+} from '../../../store';
+import BackBottom from '../BackBottom';
+import { AT_BOTTOM_THRESHOLD, OPEN_DEV_INSPECTOR } from './DebugInspector';
+
+const AutoScroll = memo(() => {
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
+  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
+  const dbMessages = useConversationStore(dataSelectors.dbMessages);
+
+  const shouldAutoScroll = atBottom && isGenerating && !isScrolling;
+
+  // 获取最后一条消息的 content 长度，用于监听流式输出
+  const lastMessage = dbMessages.at(-1);
+  const lastMessageContentLength =
+    typeof lastMessage?.content === 'string' ? lastMessage.content.length : 0;
+
+  useEffect(() => {
+    if (shouldAutoScroll) {
+      scrollToBottom(false);
+    }
+  }, [shouldAutoScroll, scrollToBottom, dbMessages.length, lastMessageContentLength]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      {OPEN_DEV_INSPECTOR && (
+        <>
+          {/* Threshold 区域顶部边界线 */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#ef4444',
+              height: 2,
+              left: 0,
+              opacity: 0.5,
+              pointerEvents: 'none',
+              position: 'absolute',
+              right: 0,
+              top: -AT_BOTTOM_THRESHOLD,
+            }}
+          />
+
+          {/* Threshold 区域 mask - 显示在指示线上方 */}
+          <div
+            style={{
+              background: atBottom
+                ? 'linear-gradient(to top, rgba(34, 197, 94, 0.15), transparent)'
+                : 'linear-gradient(to top, rgba(239, 68, 68, 0.1), transparent)',
+              height: AT_BOTTOM_THRESHOLD,
+              left: 0,
+              pointerEvents: 'none',
+              position: 'absolute',
+              right: 0,
+              top: -AT_BOTTOM_THRESHOLD,
+            }}
+          />
+
+          {/* AutoScroll 位置指示线（底部） */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#ef4444',
+              height: 2,
+              position: 'relative',
+              width: '100%',
+            }}
+          />
+        </>
+      )}
+
+      <BackBottom onScrollToBottom={() => scrollToBottom(true)} visible={!atBottom} />
+    </div>
+  );
+});
+
+AutoScroll.displayName = 'ConversationAutoScroll';
+
+export default AutoScroll;

package/src/features/Conversation/ChatList/components/VirtualizedList.tsx

@@ -7,6 +7,10 @@ import { VList, type VListHandle } from 'virtua';
 import WideScreenContainer from '../../../WideScreenContainer';
 import { useConversationStore, virtuaListSelectors } from '../../store';
 import AutoScroll from './AutoScroll';
+import DebugInspector, {
+  AT_BOTTOM_THRESHOLD,
+  OPEN_DEV_INSPECTOR,
+} from './AutoScroll/DebugInspector';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -23,15 +27,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
   const prevDataLengthRef = useRef(dataSource.length);
   const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const atBottomThreshold = 200;
-
   // Store actions
   const registerVirtuaScrollMethods = useConversationStore((s) => s.registerVirtuaScrollMethods);
   const setScrollState = useConversationStore((s) => s.setScrollState);
   const resetVisibleItems = useConversationStore((s) => s.resetVisibleItems);
-  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
   const setActiveIndex = useConversationStore((s) => s.setActiveIndex);
-  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
   const activeIndex = useConversationStore(virtuaListSelectors.activeIndex);
 
   // Check if at bottom based on scroll position
@@ -43,8 +43,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
     const scrollSize = ref.scrollSize;
     const viewportSize = ref.viewportSize;
 
-    return scrollSize - scrollOffset - viewportSize <= atBottomThreshold;
-  }, [atBottomThreshold]);
+    return scrollSize - scrollOffset - viewportSize <= AT_BOTTOM_THRESHOLD;
+  }, [AT_BOTTOM_THRESHOLD]);
 
   // Handle scroll events
   const handleScroll = useCallback(() => {
@@ -131,6 +131,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
 
   return (
     <>
+      {/* Debug Inspector - 放在 VList 外面，不会被虚拟列表回收 */}
+      {OPEN_DEV_INSPECTOR && <DebugInspector />}
       <VList
         bufferSize={typeof window !== 'undefined' ? window.innerHeight : 0}
         data={dataSource}
@@ -142,12 +144,14 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
         {(messageId, index): ReactElement => {
           const isAgentCouncil = messageId.includes('agentCouncil');
           const content = itemContent(index, messageId);
+          const isLast = index === dataSource.length - 1;
 
           if (isAgentCouncil) {
             // AgentCouncil needs full width for horizontal scroll
             return (
               <div key={messageId} style={{ position: 'relative', width: '100%' }}>
                 {content}
+                {isLast && <AutoScroll />}
               </div>
             );
           }
@@ -155,21 +159,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
           return (
             <WideScreenContainer key={messageId} style={{ position: 'relative' }}>
               {content}
+              {isLast && <AutoScroll />}
             </WideScreenContainer>
           );
         }}
       </VList>
-      <WideScreenContainer
-        onChange={() => {
-          if (!atBottom) return;
-          setTimeout(() => scrollToBottom(true), 100);
-        }}
-        style={{
-          position: 'relative',
-        }}
-      >
-        <AutoScroll />
-      </WideScreenContainer>
     </>
   );
 }, isEqual);

package/src/features/Conversation/Messages/AgentCouncil/components/AutoScrollShadow.tsx

@@ -1,27 +1,38 @@
 import { ScrollShadow } from '@lobehub/ui';
-import { type PropsWithChildren, type RefObject, memo, useEffect, useRef } from 'react';
+import { type PropsWithChildren, type RefObject, memo, useEffect } from 'react';
 
-const AutoScrollShadow = memo<PropsWithChildren>(({ children }) => {
-  const contentRef = useRef<HTMLDivElement | null>(null);
+import { useAutoScroll } from '@/hooks/useAutoScroll';
 
-  useEffect(() => {
-    const container = contentRef.current;
-    if (!container) return;
-    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const isNearBottom = distanceToBottom < 120;
+interface AutoScrollShadowProps extends PropsWithChildren {
+  /**
+   * Content string to track for auto-scrolling
+   */
+  content?: string;
+  /**
+   * Whether the content is currently streaming/generating
+   */
+  streaming?: boolean;
+}
+
+const AutoScrollShadow = memo<AutoScrollShadowProps>(({ children, content, streaming }) => {
+  const { ref, handleScroll, resetScrollLock } = useAutoScroll<HTMLDivElement>({
+    deps: [content],
+    enabled: streaming,
+  });
 
-    if (isNearBottom) {
-      requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight;
-      });
+  // Reset scroll lock when content is cleared (new stream starts)
+  useEffect(() => {
+    if (!content) {
+      resetScrollLock();
     }
-  }, []);
+  }, [content, resetScrollLock]);
 
   return (
     <ScrollShadow
       height={'max(33vh, 480px)'}
       hideScrollBar
-      ref={contentRef as unknown as RefObject<HTMLDivElement>}
+      onScroll={handleScroll}
+      ref={ref as RefObject<HTMLDivElement>}
       size={16}
     >
       {children}

package/src/features/Conversation/Messages/AgentCouncil/components/CouncilMember.tsx

@@ -92,7 +92,7 @@ const CouncilMember = memo<CouncilMemberProps>(({ item, index }) => {
       showTitle
       time={createdAt}
     >
-      <AutoScrollShadow>
+      <AutoScrollShadow content={content} streaming={generating}>
         <MessageContent {...item} />
       </AutoScrollShadow>
     </ChatItem>

package/src/features/FileViewer/Renderer/PDF/index.tsx

@@ -1,22 +1,19 @@
 'use client';
 
 import { Flexbox } from '@lobehub/ui';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
 import { Fragment, memo, useCallback, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
 
 import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import '@/libs/pdfjs/worker';
 import { lambdaQuery } from '@/libs/trpc/client';
 
 import HighlightLayer from './HighlightLayer';
 import { styles } from './style';
 import useResizeObserver from './useResizeObserver';
 
-// 如果海外的地址： https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs
-pdfjs.GlobalWorkerOptions.workerSrc = `https://registry.npmmirror.com/pdfjs-dist/${pdfjs.version}/files/build/pdf.worker.min.mjs`;
-
 const options = {
   cMapUrl: `https://registry.npmmirror.com/pdfjs-dist/${pdfjs.version}/files/cmaps/`,
   standardFontDataUrl: `https://registry.npmmirror.com/pdfjs-dist/${pdfjs.version}/files/standard_fonts/`,
@@ -46,8 +43,8 @@ const PDFViewer = memo<PDFViewerProps>(({ url, fileId }) => {
 
   useResizeObserver(containerRef, onResize);
 
-  const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy) => {
-    setNumPages(nextNumPages);
+  const onDocumentLoadSuccess = (document: unknown) => {
+    setNumPages((document as { numPages: number }).numPages);
     setIsLoaded(true);
   };
 

package/src/features/IntegrationDetailModal/IntegrationDetailContent.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import {
+  type KlavisServerType,
+  type LobehubSkillProviderType,
+  getKlavisServerByServerIdentifier,
+  getLobehubSkillProviderById,
+} from '@lobechat/const';
+import { Flexbox, Icon, Image, Tag, Text, Typography, useModalContext } from '@lobehub/ui';
+import { Button, Divider } from 'antd';
+import { createStyles, cssVar } from 'antd-style';
+import type { Klavis } from 'klavis';
+import { ExternalLink, Loader2, SquareArrowOutUpRight } from 'lucide-react';
+import { useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSkillConnect } from '@/features/SkillStore/LobeHubList/useSkillConnect';
+import { useToolStore } from '@/store/tool';
+import { klavisStoreSelectors, lobehubSkillStoreSelectors } from '@/store/tool/selectors';
+import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
+import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
+
+const useStyles = createStyles(({ css, token }) => ({
+  authorLink: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    color: ${token.colorPrimary};
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  detailItem: css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  `,
+  detailLabel: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  header: css`
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    padding: 16px;
+    border-radius: 12px;
+
+    background: ${token.colorFillTertiary};
+  `,
+  icon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+
+    background: ${token.colorBgContainer};
+  `,
+  introduction: css`
+    font-size: 14px;
+    line-height: 1.8;
+    color: ${token.colorText};
+  `,
+  sectionTitle: css`
+    font-size: 14px;
+    font-weight: 600;
+    color: ${token.colorText};
+  `,
+  title: css`
+    font-size: 18px;
+    font-weight: 600;
+    color: ${token.colorText};
+  `,
+  toolTag: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+  `,
+  toolsContainer: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  `,
+  trustWarning: css`
+    font-size: 12px;
+    line-height: 1.6;
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+export type IntegrationType = 'klavis' | 'lobehub';
+
+export interface IntegrationDetailContentProps {
+  identifier: string;
+  serverName?: Klavis.McpServerName;
+  type: IntegrationType;
+}
+
+export const IntegrationDetailContent = ({
+  type,
+  identifier,
+  serverName,
+}: IntegrationDetailContentProps) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['plugin', 'setting']);
+  const { close } = useModalContext();
+
+  const {
+    handleConnect,
+    isConnecting,
+    isConnected: hookIsConnected,
+  } = useSkillConnect({
+    identifier,
+    serverName,
+    type,
+  });
+
+  const hasTriggeredConnectRef = useRef(false);
+
+  useEffect(() => {
+    if (hasTriggeredConnectRef.current && hookIsConnected) {
+      close();
+    }
+  }, [hookIsConnected, close]);
+
+  const handleConnectWithTracking = async () => {
+    hasTriggeredConnectRef.current = true;
+    await handleConnect();
+  };
+
+  const config = useMemo((): KlavisServerType | LobehubSkillProviderType | undefined => {
+    if (type === 'klavis') {
+      return getKlavisServerByServerIdentifier(identifier);
+    }
+    return getLobehubSkillProviderById(identifier);
+  }, [type, identifier]);
+
+  const klavisServers = useToolStore(klavisStoreSelectors.getServers);
+  const lobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers);
+
+  const serverState = useMemo(() => {
+    if (type === 'klavis') {
+      return klavisServers.find((s) => s.identifier === identifier);
+    }
+    return lobehubSkillServers.find((s) => s.identifier === identifier);
+  }, [type, identifier, klavisServers, lobehubSkillServers]);
+
+  const isConnected = useMemo(() => {
+    if (!serverState) return false;
+    if (type === 'klavis') {
+      return serverState.status === KlavisServerStatus.CONNECTED;
+    }
+    return serverState.status === LobehubSkillStatus.CONNECTED;
+  }, [type, serverState]);
+
+  const tools = useMemo(() => {
+    return serverState?.tools?.map((tool) => tool.name) || [];
+  }, [serverState]);
+
+  if (!config) return null;
+
+  const { author, authorUrl, description, icon, introduction, label } = config;
+
+  const i18nIdentifier =
+    type === 'klavis'
+      ? (config as KlavisServerType).identifier
+      : (config as LobehubSkillProviderType).id;
+  const i18nPrefix = type === 'klavis' ? 'tools.klavis.servers' : 'tools.lobehubSkill.providers';
+
+  const localizedDescription = t(`${i18nPrefix}.${i18nIdentifier}.description`, {
+    defaultValue: description,
+    ns: 'setting',
+  });
+  const localizedIntroduction = t(`${i18nPrefix}.${i18nIdentifier}.introduction`, {
+    defaultValue: introduction,
+    ns: 'setting',
+  });
+
+  const renderIcon = () => {
+    if (typeof icon === 'string') {
+      return <Image alt={label} height={36} src={icon} width={36} />;
+    }
+    return <Icon fill={cssVar.colorText} icon={icon} size={36} />;
+  };
+
+  const handleAuthorClick = () => {
+    if (authorUrl) {
+      window.open(authorUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const renderConnectButton = () => {
+    if (isConnected) return null;
+
+    if (isConnecting) {
+      return (
+        <Button disabled icon={<Icon icon={Loader2} spin />} type="default">
+          {t('tools.klavis.connect', { defaultValue: 'Connect', ns: 'setting' })}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        icon={<Icon icon={SquareArrowOutUpRight} />}
+        onClick={handleConnectWithTracking}
+        type="primary"
+      >
+        {t('tools.klavis.connect', { defaultValue: 'Connect', ns: 'setting' })}
+      </Button>
+    );
+  };
+
+  return (
+    <Flexbox gap={20}>
+      {/* Header */}
+      <Flexbox
+        align="center"
+        className={styles.header}
+        horizontal
+        justify="space-between"
+        style={{ flexWrap: 'nowrap' }}
+      >
+        <Flexbox align="center" gap={16} horizontal>
+          <div className={styles.icon}>{renderIcon()}</div>
+          <Flexbox gap={4}>
+            <span className={styles.title}>{label}</span>
+            <Text style={{ fontSize: 14 }} type="secondary">
+              {localizedDescription}
+            </Text>
+          </Flexbox>
+        </Flexbox>
+        {renderConnectButton()}
+      </Flexbox>
+
+      {/* Introduction */}
+      <Typography className={styles.introduction}>{localizedIntroduction}</Typography>
+
+      {/* Developed by */}
+      <Flexbox gap={8}>
+        <Flexbox align="center" gap={4} horizontal>
+          <span className={styles.sectionTitle}>{t('integrationDetail.developedBy')}</span>
+          <span
+            className={styles.authorLink}
+            onClick={handleAuthorClick}
+            style={{ cursor: authorUrl ? 'pointer' : 'default' }}
+          >
+            {author}
+            {authorUrl && <Icon icon={ExternalLink} size={12} />}
+          </span>
+        </Flexbox>
+        <Text className={styles.trustWarning} type="secondary">
+          {t('integrationDetail.trustWarning')}
+        </Text>
+      </Flexbox>
+
+      {/* Tools */}
+      {tools.length > 0 && (
+        <>
+          <Divider style={{ margin: 0 }} />
+          <Flexbox gap={12}>
+            <Flexbox align="center" gap={8} horizontal>
+              <span className={styles.sectionTitle}>{t('integrationDetail.tools')}</span>
+              <Tag>{tools.length}</Tag>
+            </Flexbox>
+            <div className={styles.toolsContainer}>
+              {tools.map((tool) => (
+                <Tag className={styles.toolTag} key={tool}>
+                  {tool}
+                </Tag>
+              ))}
+            </div>
+          </Flexbox>
+        </>
+      )}
+
+      {/* Details */}
+      <Divider style={{ margin: 0 }} />
+      <Flexbox gap={12}>
+        <span className={styles.sectionTitle}>{t('integrationDetail.details')}</span>
+        <Flexbox gap={16} horizontal>
+          <div className={styles.detailItem}>
+            <span className={styles.detailLabel}>{t('integrationDetail.author')}</span>
+            <span
+              className={styles.authorLink}
+              onClick={handleAuthorClick}
+              style={{ cursor: authorUrl ? 'pointer' : 'default' }}
+            >
+              {author}
+              {authorUrl && <Icon icon={ExternalLink} size={12} />}
+            </span>
+          </div>
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+};