@lobehub/lobehub 2.0.0-next.338 → 2.0.0-next.339

package/src/features/SkillStore/LobeHubList/Item.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { ActionIcon, Block, DropdownMenu, Flexbox, Icon, Image } from '@lobehub/ui';
+import { App } from 'antd';
+import { cssVar } from 'antd-style';
+import type { Klavis } from 'klavis';
+import { Loader2, MoreVerticalIcon, Plus, Unplug } from 'lucide-react';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useItemStyles } from '../style';
+import { useSkillConnect } from './useSkillConnect';
+
+interface ItemProps {
+  description?: string;
+  icon: string | React.ComponentType;
+  identifier: string;
+  isConnected: boolean;
+  label: string;
+  onOpenDetail?: () => void;
+  serverName?: Klavis.McpServerName;
+  type: 'klavis' | 'lobehub';
+}
+
+const Item = memo<ItemProps>(
+  ({ description, icon, identifier, label, onOpenDetail, serverName, type }) => {
+    const { t } = useTranslation('setting');
+    const { styles } = useItemStyles();
+    const { modal } = App.useApp();
+
+    const { handleConnect, handleDisconnect, isConnected, isConnecting } = useSkillConnect({
+      identifier,
+      serverName,
+      type,
+    });
+
+    // Get localized description
+    const i18nPrefix = type === 'klavis' ? 'tools.klavis.servers' : 'tools.lobehubSkill.providers';
+    // @ts-ignore
+    const localizedDescription = t(`${i18nPrefix}.${identifier}.description`, {
+      defaultValue: description,
+    });
+
+    const confirmDisconnect = () => {
+      modal.confirm({
+        cancelText: t('cancel', { ns: 'common' }),
+        centered: true,
+        content: t('tools.lobehubSkill.disconnectConfirm.desc', { name: label }),
+        okButtonProps: { danger: true },
+        okText: t('tools.lobehubSkill.disconnect'),
+        onOk: handleDisconnect,
+        title: t('tools.lobehubSkill.disconnectConfirm.title', { name: label }),
+      });
+    };
+
+    const renderIcon = () => {
+      if (typeof icon === 'string') {
+        return <Image alt={label} height={40} src={icon} width={40} />;
+      }
+      return <Icon fill={cssVar.colorText} icon={icon as any} size={40} />;
+    };
+
+    const renderAction = () => {
+      if (isConnecting) {
+        return <ActionIcon icon={Loader2} loading />;
+      }
+
+      if (isConnected) {
+        return (
+          <DropdownMenu
+            items={[
+              {
+                icon: <Icon icon={Unplug} />,
+                key: 'disconnect',
+                label: t('tools.lobehubSkill.disconnect'),
+                onClick: confirmDisconnect,
+              },
+            ]}
+            placement="bottomRight"
+          >
+            <ActionIcon icon={MoreVerticalIcon} />
+          </DropdownMenu>
+        );
+      }
+
+      return (
+        <ActionIcon icon={Plus} onClick={handleConnect} title={t('tools.lobehubSkill.connect')} />
+      );
+    };
+
+    return (
+      <Block
+        align={'center'}
+        className={styles.container}
+        gap={12}
+        horizontal
+        onClick={onOpenDetail}
+        paddingBlock={12}
+        paddingInline={12}
+        style={{ cursor: 'pointer' }}
+        variant={'filled'}
+      >
+        {renderIcon()}
+        <Flexbox flex={1} gap={4} style={{ minWidth: 0, overflow: 'hidden' }}>
+          <span className={styles.title}>{label}</span>
+          {localizedDescription && (
+            <span className={styles.description}>{localizedDescription}</span>
+          )}
+        </Flexbox>
+        <div onClick={(e) => e.stopPropagation()}>{renderAction()}</div>
+      </Block>
+    );
+  },
+);
+
+Item.displayName = 'LobeHubListItem';
+
+export default Item;

package/src/features/SkillStore/LobeHubList/index.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { KLAVIS_SERVER_TYPES, LOBEHUB_SKILL_PROVIDERS } from '@lobechat/const';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import type { Klavis } from 'klavis';
+import { memo, useMemo, useState } from 'react';
+
+import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
+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 Empty from '../Empty';
+import Item from './Item';
+import { useSkillConnect } from './useSkillConnect';
+
+const useStyles = createStyles(({ css }) => ({
+  grid: css`
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+
+    padding-block-end: 16px;
+    padding-inline: 16px;
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  `,
+}));
+
+interface LobeHubListProps {
+  keywords: string;
+}
+
+interface DetailState {
+  identifier: string;
+  serverName?: Klavis.McpServerName;
+  type: 'klavis' | 'lobehub';
+}
+
+interface DetailModalWithConnectProps {
+  detailState: DetailState;
+  onClose: () => void;
+}
+
+const DetailModalWithConnect = memo<DetailModalWithConnectProps>(({ detailState, onClose }) => {
+  const { handleConnect, isConnecting } = useSkillConnect({
+    identifier: detailState.identifier,
+    serverName: detailState.serverName,
+    type: detailState.type,
+  });
+
+  return (
+    <IntegrationDetailModal
+      identifier={detailState.identifier}
+      isConnecting={isConnecting}
+      onClose={onClose}
+      onConnect={handleConnect}
+      open
+      type={detailState.type}
+    />
+  );
+});
+
+DetailModalWithConnect.displayName = 'DetailModalWithConnect';
+
+export const LobeHubList = memo<LobeHubListProps>(({ keywords }) => {
+  const { styles } = useStyles();
+  const [detailState, setDetailState] = useState<DetailState | null>(null);
+
+  const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
+  const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);
+  const allLobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers, isEqual);
+  const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
+
+  const [useFetchLobehubSkillConnections, useFetchUserKlavisServers] = useToolStore((s) => [
+    s.useFetchLobehubSkillConnections,
+    s.useFetchUserKlavisServers,
+  ]);
+
+  useFetchLobehubSkillConnections(isLobehubSkillEnabled);
+  useFetchUserKlavisServers(isKlavisEnabled);
+
+  const getLobehubSkillServerByProvider = (providerId: string) => {
+    return allLobehubSkillServers.find((server) => server.identifier === providerId);
+  };
+
+  const getKlavisServerByIdentifier = (identifier: string) => {
+    return allKlavisServers.find((server) => server.identifier === identifier);
+  };
+
+  const filteredItems = useMemo(() => {
+    const items: Array<
+      | { provider: (typeof LOBEHUB_SKILL_PROVIDERS)[number]; type: 'lobehub' }
+      | { serverType: (typeof KLAVIS_SERVER_TYPES)[number]; type: 'klavis' }
+    > = [];
+
+    // Add LobeHub skills
+    if (isLobehubSkillEnabled) {
+      for (const provider of LOBEHUB_SKILL_PROVIDERS) {
+        items.push({ provider, type: 'lobehub' });
+      }
+    }
+
+    // Add Klavis skills
+    if (isKlavisEnabled) {
+      for (const serverType of KLAVIS_SERVER_TYPES) {
+        items.push({ serverType, type: 'klavis' });
+      }
+    }
+
+    // Filter by keywords
+    const lowerKeywords = keywords.toLowerCase().trim();
+    if (!lowerKeywords) return items;
+
+    return items.filter((item) => {
+      const label = item.type === 'lobehub' ? item.provider.label : item.serverType.label;
+      return label.toLowerCase().includes(lowerKeywords);
+    });
+  }, [keywords, isLobehubSkillEnabled, isKlavisEnabled]);
+
+  const hasSearchKeywords = Boolean(keywords && keywords.trim());
+
+  if (filteredItems.length === 0) return <Empty search={hasSearchKeywords} />;
+
+  return (
+    <>
+      <div className={styles.grid}>
+        {filteredItems.map((item) => {
+          if (item.type === 'lobehub') {
+            const server = getLobehubSkillServerByProvider(item.provider.id);
+            const isConnected = server?.status === LobehubSkillStatus.CONNECTED;
+            return (
+              <Item
+                description={item.provider.description}
+                icon={item.provider.icon}
+                identifier={item.provider.id}
+                isConnected={isConnected}
+                key={item.provider.id}
+                label={item.provider.label}
+                onOpenDetail={() =>
+                  setDetailState({ identifier: item.provider.id, type: 'lobehub' })
+                }
+                type="lobehub"
+              />
+            );
+          }
+          const server = getKlavisServerByIdentifier(item.serverType.identifier);
+          const isConnected = server?.status === KlavisServerStatus.CONNECTED;
+          return (
+            <Item
+              description={item.serverType.description}
+              icon={item.serverType.icon}
+              identifier={item.serverType.identifier}
+              isConnected={isConnected}
+              key={item.serverType.identifier}
+              label={item.serverType.label}
+              onOpenDetail={() =>
+                setDetailState({
+                  identifier: item.serverType.identifier,
+                  serverName: item.serverType.serverName,
+                  type: 'klavis',
+                })
+              }
+              serverName={item.serverType.serverName}
+              type="klavis"
+            />
+          );
+        })}
+      </div>
+      {detailState && (
+        <DetailModalWithConnect
+          detailState={detailState}
+          onClose={() => setDetailState(null)}
+        />
+      )}
+    </>
+  );
+});
+
+LobeHubList.displayName = 'LobeHubList';
+
+export default LobeHubList;

package/src/features/SkillStore/LobeHubList/useSkillConnect.ts

@@ -0,0 +1,239 @@
+'use client';
+
+import { getLobehubSkillProviderById } from '@lobechat/const';
+import type { Klavis } from 'klavis';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+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 { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+const POLL_INTERVAL_MS = 1000;
+const POLL_TIMEOUT_MS = 15_000;
+
+interface UseSkillConnectOptions {
+  identifier: string;
+  serverName?: Klavis.McpServerName;
+  type: 'klavis' | 'lobehub';
+}
+
+export const useSkillConnect = ({ identifier, serverName, type }: UseSkillConnectOptions) => {
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isWaitingAuth, setIsWaitingAuth] = useState(false);
+
+  const oauthWindowRef = useRef<Window | null>(null);
+  const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // LobeHub skill hooks
+  const checkLobehubStatus = useToolStore((s) => s.checkLobehubSkillStatus);
+  const revokeLobehubConnect = useToolStore((s) => s.revokeLobehubSkill);
+  const getAuthorizeUrl = useToolStore((s) => s.getLobehubSkillAuthorizeUrl);
+  const lobehubServer = useToolStore(lobehubSkillStoreSelectors.getServerByIdentifier(identifier));
+
+  // Klavis hooks
+  const userId = useUserStore(userProfileSelectors.userId);
+  const createKlavisServer = useToolStore((s) => s.createKlavisServer);
+  const refreshKlavisServerTools = useToolStore((s) => s.refreshKlavisServerTools);
+  const removeKlavisServer = useToolStore((s) => s.removeKlavisServer);
+  const klavisServer = useToolStore(klavisStoreSelectors.getServerByIdentifier(identifier));
+
+  const cleanup = useCallback(() => {
+    if (windowCheckIntervalRef.current) {
+      clearInterval(windowCheckIntervalRef.current);
+      windowCheckIntervalRef.current = null;
+    }
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+    if (pollTimeoutRef.current) {
+      clearTimeout(pollTimeoutRef.current);
+      pollTimeoutRef.current = null;
+    }
+    oauthWindowRef.current = null;
+    setIsWaitingAuth(false);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+
+  useEffect(() => {
+    const connected =
+      type === 'lobehub'
+        ? lobehubServer?.status === LobehubSkillStatus.CONNECTED
+        : klavisServer?.status === KlavisServerStatus.CONNECTED;
+
+    if (connected && isWaitingAuth) {
+      cleanup();
+    }
+  }, [type, lobehubServer?.status, klavisServer?.status, isWaitingAuth, cleanup]);
+
+  // Listen for OAuth success message from popup window (for LobeHub skills)
+  useEffect(() => {
+    if (type !== 'lobehub') return;
+
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (
+        event.data?.type === 'LOBEHUB_SKILL_AUTH_SUCCESS' &&
+        event.data?.provider === identifier
+      ) {
+        cleanup();
+        await checkLobehubStatus(identifier);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [type, identifier, cleanup, checkLobehubStatus]);
+
+  const startFallbackPolling = useCallback(
+    (serverIdOrName: string) => {
+      if (pollIntervalRef.current) return;
+
+      pollIntervalRef.current = setInterval(async () => {
+        try {
+          if (type === 'lobehub') {
+            await checkLobehubStatus(serverIdOrName);
+          } else {
+            await refreshKlavisServerTools(serverIdOrName);
+          }
+        } catch (error) {
+          console.error('[SkillStore] Failed to check status:', error);
+        }
+      }, POLL_INTERVAL_MS);
+
+      pollTimeoutRef.current = setTimeout(() => {
+        if (pollIntervalRef.current) {
+          clearInterval(pollIntervalRef.current);
+          pollIntervalRef.current = null;
+        }
+        setIsWaitingAuth(false);
+      }, POLL_TIMEOUT_MS);
+    },
+    [type, checkLobehubStatus, refreshKlavisServerTools],
+  );
+
+  const startWindowMonitor = useCallback(
+    (oauthWindow: Window, serverIdOrName: string) => {
+      windowCheckIntervalRef.current = setInterval(async () => {
+        try {
+          if (oauthWindow.closed) {
+            if (windowCheckIntervalRef.current) {
+              clearInterval(windowCheckIntervalRef.current);
+              windowCheckIntervalRef.current = null;
+            }
+            oauthWindowRef.current = null;
+            // Check status and then reset waiting state
+            if (type === 'lobehub') {
+              await checkLobehubStatus(serverIdOrName);
+            } else {
+              await refreshKlavisServerTools(serverIdOrName);
+            }
+            setIsWaitingAuth(false);
+          }
+        } catch {
+          if (windowCheckIntervalRef.current) {
+            clearInterval(windowCheckIntervalRef.current);
+            windowCheckIntervalRef.current = null;
+          }
+          startFallbackPolling(serverIdOrName);
+        }
+      }, 500);
+    },
+    [type, checkLobehubStatus, refreshKlavisServerTools, startFallbackPolling],
+  );
+
+  const openOAuthWindow = useCallback(
+    (oauthUrl: string, serverIdOrName: string) => {
+      cleanup();
+      setIsWaitingAuth(true);
+
+      const oauthWindow = window.open(oauthUrl, '_blank', 'width=600,height=700');
+      if (oauthWindow) {
+        oauthWindowRef.current = oauthWindow;
+        startWindowMonitor(oauthWindow, serverIdOrName);
+      } else {
+        startFallbackPolling(serverIdOrName);
+      }
+    },
+    [cleanup, startWindowMonitor, startFallbackPolling],
+  );
+
+  // Handle connect for LobeHub
+  const handleLobehubConnect = useCallback(async () => {
+    if (lobehubServer?.isConnected) return;
+
+    setIsConnecting(true);
+    try {
+      const provider = getLobehubSkillProviderById(identifier);
+      if (!provider) return;
+
+      const redirectUri = `${window.location.origin}/oauth/callback/success?provider=${encodeURIComponent(identifier)}`;
+      const { authorizeUrl } = await getAuthorizeUrl(identifier, { redirectUri });
+      openOAuthWindow(authorizeUrl, identifier);
+    } catch (error) {
+      console.error('[SkillStore] Failed to get authorize URL:', error);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [identifier, lobehubServer?.isConnected, getAuthorizeUrl, openOAuthWindow]);
+
+  // Handle connect for Klavis
+  const handleKlavisConnect = useCallback(async () => {
+    if (!userId || !serverName) return;
+    if (klavisServer) return;
+
+    setIsConnecting(true);
+    try {
+      const newServer = await createKlavisServer({
+        identifier,
+        serverName,
+        userId,
+      });
+
+      if (newServer) {
+        if (newServer.isAuthenticated) {
+          await refreshKlavisServerTools(newServer.identifier);
+        } else if (newServer.oauthUrl) {
+          openOAuthWindow(newServer.oauthUrl, newServer.identifier);
+        }
+      }
+    } catch (error) {
+      console.error('[SkillStore] Failed to connect server:', error);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [userId, serverName, klavisServer, identifier, createKlavisServer, refreshKlavisServerTools, openOAuthWindow]);
+
+  const handleConnect = type === 'lobehub' ? handleLobehubConnect : handleKlavisConnect;
+
+  const handleDisconnect = useCallback(async () => {
+    if (type === 'lobehub' && lobehubServer) {
+      await revokeLobehubConnect(lobehubServer.identifier);
+    } else if (type === 'klavis' && klavisServer) {
+      await removeKlavisServer(klavisServer.identifier);
+    }
+  }, [type, lobehubServer, klavisServer, revokeLobehubConnect, removeKlavisServer]);
+
+  const isConnected =
+    type === 'lobehub'
+      ? lobehubServer?.status === LobehubSkillStatus.CONNECTED
+      : klavisServer?.status === KlavisServerStatus.CONNECTED;
+
+  return {
+    handleConnect,
+    handleDisconnect,
+    isConnected,
+    isConnecting: isConnecting || isWaitingAuth,
+  };
+};

package/src/features/SkillStore/Search/index.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Flexbox, SearchBar } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useToolStore } from '@/store/tool';
+
+import { SkillStoreTab } from '../Content';
+
+interface SearchProps {
+  activeTab: SkillStoreTab;
+  onLobeHubSearch: (keywords: string) => void;
+}
+
+export const Search = memo<SearchProps>(({ activeTab, onLobeHubSearch }) => {
+  const { t } = useTranslation('setting');
+  const mcpKeywords = useToolStore((s) => s.mcpSearchKeywords);
+
+  const keywords = activeTab === SkillStoreTab.Community ? mcpKeywords : '';
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+      <Flexbox flex={1}>
+        <SearchBar
+          allowClear
+          defaultValue={keywords}
+          onSearch={(keywords: string) => {
+            if (activeTab === SkillStoreTab.Community) {
+              useToolStore.setState({ mcpSearchKeywords: keywords, searchLoading: true });
+            } else {
+              onLobeHubSearch(keywords);
+            }
+          }}
+          placeholder={t('skillStore.search')}
+          variant={'borderless'}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Search;

package/src/features/{PluginStore → SkillStore}/index.tsx

@@ -1,33 +1,37 @@
+'use client';
+
 import { Modal } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Content from './Content';
 
-interface PluginStoreProps {
-  open?: boolean;
+interface SkillStoreProps {
+  open: boolean;
   setOpen: (open: boolean) => void;
 }
-export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
-  const { t } = useTranslation('plugin');
+
+export const SkillStore = memo<SkillStoreProps>(({ open, setOpen }) => {
+  const { t } = useTranslation('setting');
 
   return (
     <Modal
       allowFullscreen
+      destroyOnClose={false}
       footer={null}
-      onCancel={() => {
-        setOpen(false);
-      }}
+      onCancel={() => setOpen(false)}
       open={open}
       styles={{
         body: { overflow: 'hidden', padding: 0 },
       }}
-      title={t('store.title')}
-      width={'min(90%, 1280px)'}
+      title={t('skillStore.title')}
+      width={'min(80%, 800px)'}
     >
       <Content />
     </Modal>
   );
 });
 
-export default PluginStore;
+SkillStore.displayName = 'SkillStore';
+
+export default SkillStore;

package/src/features/SkillStore/style.ts

@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+export const useItemStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    min-width: 0;
+  `,
+  description: css`
+    overflow: hidden;
+
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  title: css`
+    overflow: hidden;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: ${token.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));