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

package/src/features/IntegrationDetailModal/index.tsx

@@ -1,292 +1,30 @@
 'use client';
 
-import {
-  type KlavisServerType,
-  type LobehubSkillProviderType,
-  getKlavisServerByServerIdentifier,
-  getLobehubSkillProviderById,
-} from '@lobechat/const';
-import { Flexbox, Icon, Image, Modal, Tag, Text, Typography } from '@lobehub/ui';
-import { Button, Divider } from 'antd';
-import { createStaticStyles, cssVar } from 'antd-style';
-import { ExternalLink, Loader2, SquareArrowOutUpRight } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { createModal } from '@lobehub/ui';
+import { t } from 'i18next';
+import type { Klavis } from 'klavis';
 
-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';
+import { IntegrationDetailContent, type IntegrationType } from './IntegrationDetailContent';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  authorLink: css`
-    cursor: pointer;
+export type { IntegrationType } from './IntegrationDetailContent';
 
-    display: inline-flex;
-    gap: 4px;
-    align-items: center;
-
-    color: ${cssVar.colorPrimary};
-
-    &:hover {
-      text-decoration: underline;
-    }
-  `,
-  detailItem: css`
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  `,
-  detailLabel: css`
-    font-size: 12px;
-    color: ${cssVar.colorTextTertiary};
-  `,
-  header: css`
-    display: flex;
-    gap: 16px;
-    align-items: center;
-
-    padding: 16px;
-    border-radius: 12px;
-
-    background: ${cssVar.colorFillTertiary};
-  `,
-  icon: css`
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-
-    width: 56px;
-    height: 56px;
-    border-radius: 12px;
-
-    background: ${cssVar.colorBgContainer};
-  `,
-  introduction: css`
-    font-size: 14px;
-    line-height: 1.8;
-    color: ${cssVar.colorText};
-  `,
-  sectionTitle: css`
-    font-size: 14px;
-    font-weight: 600;
-    color: ${cssVar.colorText};
-  `,
-  title: css`
-    font-size: 18px;
-    font-weight: 600;
-    color: ${cssVar.colorText};
-  `,
-  toolTag: css`
-    font-family: ${cssVar.fontFamilyCode};
-    font-size: 12px;
-  `,
-  toolsContainer: css`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  `,
-  trustWarning: css`
-    font-size: 12px;
-    line-height: 1.6;
-    color: ${cssVar.colorTextTertiary};
-  `,
-}));
-
-export type IntegrationType = 'klavis' | 'lobehub';
-
-export interface IntegrationDetailModalProps {
+export interface CreateIntegrationDetailModalOptions {
   identifier: string;
-  isConnecting?: boolean;
-  onClose: () => void;
-  onConnect?: () => void;
-  open: boolean;
+  serverName?: Klavis.McpServerName;
   type: IntegrationType;
 }
 
-const IntegrationDetailModal = memo<IntegrationDetailModalProps>(
-  ({ open, onClose, type, identifier, isConnecting, onConnect }) => {
-    const { t } = useTranslation(['plugin', 'setting']);
-
-    // Get static config based on type
-    const config = useMemo((): KlavisServerType | LobehubSkillProviderType | undefined => {
-      if (type === 'klavis') {
-        return getKlavisServerByServerIdentifier(identifier);
-      }
-      return getLobehubSkillProviderById(identifier);
-    }, [type, identifier]);
-
-    // Get dynamic state from store
-    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;
-
-    // Get identifier for i18n keys
-    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 (!onConnect) 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={onConnect} type="primary">
-          {t('tools.klavis.connect', { defaultValue: 'Connect', ns: 'setting' })}
-        </Button>
-      );
-    };
-
-    return (
-      <Modal
-        destroyOnHidden
-        footer={null}
-        onCancel={onClose}
-        open={open}
-        title={t('dev.title.skillDetails')}
-        width={800}
-      >
-        <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>
-      </Modal>
-    );
-  },
-);
-
-IntegrationDetailModal.displayName = 'IntegrationDetailModal';
-
-export default IntegrationDetailModal;
+export const createIntegrationDetailModal = ({
+  identifier,
+  serverName,
+  type,
+}: CreateIntegrationDetailModalOptions) =>
+  createModal({
+    children: (
+      <IntegrationDetailContent identifier={identifier} serverName={serverName} type={type} />
+    ),
+    destroyOnHidden: true,
+    footer: null,
+    title: t('dev.title.skillDetails', { ns: 'plugin' }),
+    width: 800,
+  });

package/src/features/MCPPluginDetail/Deployment/index.tsx

@@ -23,12 +23,12 @@ import {
   Package,
   TerminalIcon,
 } from 'lucide-react';
-import { markdownToTxt } from 'markdown-to-txt';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Descriptions from '@/components/Descriptions';
 import InlineTable from '@/components/InlineTable';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 import Title from '../../../app/[variants]/(main)/community/features/Title';
 import InstallationIcon from '../../../components/MCPDepsIcon';

package/src/features/MCPPluginDetail/Schema/Prompts.tsx

@@ -1,11 +1,11 @@
 import { Block, Collapse, Empty, Highlighter, Icon, Markdown } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { CheckIcon, MessageSquare, MinusIcon } from 'lucide-react';
-import { markdownToTxt } from 'markdown-to-txt';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import InlineTable from '@/components/InlineTable';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 import Title from '../../../app/[variants]/(main)/community/features/Title';
 import CollapseDesc from '../CollapseDesc';

package/src/features/MCPPluginDetail/Schema/Tools.tsx

@@ -1,11 +1,11 @@
 import { Block, Collapse, Empty, Highlighter, Icon, Markdown, Tag } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { CheckIcon, MinusIcon, Wrench } from 'lucide-react';
-import { markdownToTxt } from 'markdown-to-txt';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import InlineTable from '@/components/InlineTable';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 import Title from '../../../app/[variants]/(main)/community/features/Title';
 import CollapseDesc from '../CollapseDesc';

package/src/features/ProfileEditor/AgentTool.tsx

@@ -18,7 +18,7 @@ import KlavisServerItem from '@/features/ChatInput/ActionBar/Tools/KlavisServerI
 import LobehubSkillServerItem from '@/features/ChatInput/ActionBar/Tools/LobehubSkillServerItem';
 import ToolItem from '@/features/ChatInput/ActionBar/Tools/ToolItem';
 import ActionDropdown from '@/features/ChatInput/ActionBar/components/ActionDropdown';
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
@@ -157,8 +157,6 @@ const AgentTool = memo<AgentToolProps>(
     const allLobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers, isEqual);
     const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
 
-    // Plugin store modal state
-    const [modalOpen, setModalOpen] = useState(false);
     const [updating, setUpdating] = useState(false);
 
     // Tab state for dual-column layout
@@ -423,7 +421,7 @@ const AgentTool = memo<AgentToolProps>(
           key: 'plugin-store',
           label: t('tools.plugins.store'),
           onClick: () => {
-            setModalOpen(true);
+            createSkillStoreModal();
           },
         },
       ],
@@ -556,20 +554,7 @@ const AgentTool = memo<AgentToolProps>(
       <>
         {/* Plugin Selector and Tags */}
         <Flexbox align="center" gap={8} horizontal wrap={'wrap'}>
-          {/* Second Row: Selected Plugins as Tags */}
-          {allEnabledTools.map((pluginId) => {
-            return (
-              <PluginTag
-                key={pluginId}
-                onRemove={handleRemovePlugin(pluginId)}
-                pluginId={pluginId}
-                showDesktopOnlyLabel={filterAvailableInWeb}
-                useAllMetaList={useAllMetaList}
-              />
-            );
-          })}
           {/* Plugin Selector Dropdown - Using Action component pattern */}
-
           <Suspense fallback={button}>
             <ActionDropdown
               maxHeight={500}
@@ -622,10 +607,19 @@ const AgentTool = memo<AgentToolProps>(
               {button}
             </ActionDropdown>
           </Suspense>
+          {/* Selected Plugins as Tags */}
+          {allEnabledTools.map((pluginId) => {
+            return (
+              <PluginTag
+                key={pluginId}
+                onRemove={handleRemovePlugin(pluginId)}
+                pluginId={pluginId}
+                showDesktopOnlyLabel={filterAvailableInWeb}
+                useAllMetaList={useAllMetaList}
+              />
+            );
+          })}
         </Flexbox>
-
-        {/* PluginStore Modal - rendered outside Flexbox to avoid event interference */}
-        {modalOpen && <SkillStore open={modalOpen} setOpen={setModalOpen} />}
       </>
     );
   },

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -41,7 +41,6 @@ const styles = createStaticStyles(({ css }) => {
       cursor: pointer;
       min-width: 800px;
 
-      /* Hover effect for individual rows */
       &:hover {
         background: ${cssVar.colorFillTertiary};
       }
@@ -194,7 +193,6 @@ const FileListItem = memo<FileListItemProps>(
     const [isDragging, setIsDragging] = useState(false);
     const [isOver, setIsOver] = useState(false);
 
-    // Memoize computed values that don't change
     const computedValues = useMemo(() => {
       const isPDF = fileType?.toLowerCase() === 'pdf' || name?.toLowerCase().endsWith('.pdf');
       return {
@@ -208,7 +206,6 @@ const FileListItem = memo<FileListItemProps>(
 
     const { isSupportedForChunking, isPage, isFolder, emoji } = computedValues;
 
-    // Memoize drag data to prevent recreation
     const dragData = useMemo(
       () => ({
         fileType,
@@ -219,7 +216,6 @@ const FileListItem = memo<FileListItemProps>(
       [fileType, isFolder, name, sourceType],
     );
 
-    // Native HTML5 drag event handlers
     const handleDragStart = useCallback(
       (e: DragEvent) => {
         if (!resourceManagerState.libraryId) {
@@ -264,7 +260,6 @@ const FileListItem = memo<FileListItemProps>(
     }, []);
 
     const handleDrop = useCallback(() => {
-      // Clear the highlight after drop
       setIsOver(false);
     }, []);
 
@@ -359,7 +354,6 @@ const FileListItem = memo<FileListItemProps>(
           { replace: true },
         );
       } else {
-        // Set mode to file and store the file ID
         resourceManagerState.setCurrentViewItemId(id);
         resourceManagerState.setMode('editor');
         // Also update URL query parameter for shareable links
@@ -378,7 +372,6 @@ const FileListItem = memo<FileListItemProps>(
     useEffect(() => {
       if (pendingRenameItemId === id && isFolder && !isRenaming) {
         handleRenameStart();
-        // Clear the pending rename item after triggering
         resourceManagerState.setPendingRenameItemId(null);
       }
     }, [pendingRenameItemId, id, isFolder, resourceManagerState]);
@@ -575,7 +568,6 @@ const FileListItem = memo<FileListItemProps>(
   },
   // Custom comparison function to prevent unnecessary re-renders
   (prevProps, nextProps) => {
-    // Only re-render if these critical props change
     return (
       prevProps.id === nextProps.id &&
       prevProps.name === nextProps.name &&

package/src/features/ResourceManager/components/Explorer/MasonryView/MasonryFileItem/NoteFileItem.tsx

@@ -2,7 +2,6 @@ import { Button, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { isNull } from 'es-toolkit/compat';
 import { FileBoxIcon } from 'lucide-react';
-import markdownToTxt from 'markdown-to-txt';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,6 +9,7 @@ import FileIcon from '@/components/FileIcon';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
 import { type AsyncTaskStatus, type IAsyncTaskError } from '@/types/asyncTask';
 import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
+import markdownToTxt from '@/utils/markdownToTxt';
 
 import ChunksBadge from '../../ListView/ListItem/ChunkTag';
 

package/src/features/ResourceManager/index.tsx

@@ -48,7 +48,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
   };
 });
 
-export type ResouceManagerMode = 'editor' | 'explorer' | 'page';
+export type ResourceManagerMode = 'editor' | 'explorer' | 'page';
 
 /**
  * Manage resources. Can be from a certian library.

package/src/features/ShareModal/SharePdf/PdfPreview.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Flexbox } from '@lobehub/ui';
 import { Input, Modal, Spin } from 'antd';
@@ -5,15 +7,13 @@ import { createStaticStyles, cx } from 'antd-style';
 import { ChevronLeft, ChevronRight, Expand, FileText } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Document, Page, pdfjs } from 'react-pdf';
+import { Document, Page } from 'react-pdf';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
+import '@/libs/pdfjs/worker';
 
 import { containerStyles } from '../style';
 
-// Set PDF.js worker
-pdfjs.GlobalWorkerOptions.workerSrc = `https://registry.npmmirror.com/pdfjs-dist/${pdfjs.version}/files/build/pdf.worker.min.mjs`;
-
 const styles = createStaticStyles(({ css }) => ({
   containerWrapper: css`
     position: relative;