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

package/scripts/electronWorkflow/modifiers/removeSuspense.mts

@@ -0,0 +1,124 @@
+import { Lang, parse } from '@ast-grep/napi';
+import path from 'node:path';
+
+import { invariant, isDirectRun, runStandalone, updateFile } from './utils.mjs';
+
+const removeSuspenseWrapper = (code: string): string => {
+  const ast = parse(Lang.Tsx, code);
+  const root = ast.root();
+
+  const suspenseElements = root.findAll({
+    rule: {
+      has: {
+        has: {
+          kind: 'identifier',
+          regex: '^Suspense$',
+        },
+        kind: 'jsx_opening_element',
+      },
+      kind: 'jsx_element',
+    },
+  });
+
+  if (suspenseElements.length === 0) {
+    return code;
+  }
+
+  const edits: Array<{ end: number; start: number; text: string }> = [];
+
+  for (const suspense of suspenseElements) {
+    const range = suspense.range();
+
+    const children = suspense.children();
+    let childrenText = '';
+
+    for (const child of children) {
+      const kind = child.kind();
+      if (kind === 'jsx_element' || kind === 'jsx_self_closing_element' || kind === 'jsx_fragment') {
+        childrenText = child.text();
+        break;
+      }
+    }
+
+    if (childrenText) {
+      edits.push({
+        end: range.end.index,
+        start: range.start.index,
+        text: childrenText,
+      });
+    }
+  }
+
+  edits.sort((a, b) => b.start - a.start);
+
+  let result = code;
+  for (const edit of edits) {
+    result = result.slice(0, edit.start) + edit.text + result.slice(edit.end);
+  }
+
+  return result;
+};
+
+const removeUnusedImports = (code: string): string => {
+  let result = code;
+
+  if (!result.includes('<Suspense')) {
+    result = result.replaceAll(/,?\s*Suspense\s*,?/g, (match) => {
+      if (match.startsWith(',') && match.endsWith(',')) {
+        return ',';
+      }
+      return '';
+    });
+
+    result = result.replaceAll(/{\s*,/g, '{');
+    result = result.replaceAll(/,\s*}/g, '}');
+    result = result.replaceAll(/{\s*}/g, '');
+    result = result.replaceAll(/import\s+{\s*}\s+from\s+["'][^"']+["'];\n?/g, '');
+  }
+
+  if (!result.includes('<Loading') && !result.includes('Loading />')) {
+    result = result.replaceAll(
+      /import Loading from ["']@\/components\/Loading\/BrandTextLoading["'];\n?/g,
+      '',
+    );
+  }
+
+  result = result.replaceAll(/\n{3,}/g, '\n\n');
+
+  return result;
+};
+
+export const removeSuspenseFromConversation = async (TEMP_DIR: string) => {
+  const filePath = path.join(
+    TEMP_DIR,
+    'src/app/[variants]/(main)/agent/features/Conversation/index.tsx',
+  );
+
+  console.log('  Removing Suspense from Conversation/index.tsx...');
+
+  await updateFile({
+    assertAfter: (code) => {
+      const noSuspenseElement = !/<Suspense/.test(code);
+      return noSuspenseElement;
+    },
+    filePath,
+    name: 'removeSuspenseFromConversation',
+    transformer: (code) => {
+      invariant(
+        /<Suspense/.test(code),
+        '[removeSuspenseFromConversation] No Suspense element found in Conversation/index.tsx',
+      );
+
+      let result = removeSuspenseWrapper(code);
+      result = removeUnusedImports(result);
+
+      return result;
+    },
+  });
+};
+
+if (isDirectRun(import.meta.url)) {
+  await runStandalone('removeSuspenseFromConversation', removeSuspenseFromConversation, [
+    { lang: Lang.Tsx, path: 'src/app/[variants]/(main)/agent/features/Conversation/index.tsx' },
+  ]);
+}

package/scripts/electronWorkflow/modifiers/routes.mts

@@ -17,6 +17,7 @@ export const modifyRoutes = async (TEMP_DIR: string) => {
 
     // Auth & User routes
     'src/app/[variants]/(auth)',
+    'src/app/[variants]/(mobile)',
     'src/app/[variants]/(main)/(mobile)/me',
     'src/app/[variants]/(main)/changelog',
     'src/app/[variants]/oauth',
@@ -45,13 +46,25 @@ export const modifyRoutes = async (TEMP_DIR: string) => {
     });
   }
 
-  // 2. Modify desktopRouter.config.tsx
+  // 2. Delete root loading.tsx files(not needed in Electron SPA)
+  const loadingFiles = ['src/app/loading.tsx', 'src/app/[variants]/loading.tsx'];
+  console.log(`  Removing ${loadingFiles.length} root loading.tsx files...`);
+  for (const file of loadingFiles) {
+    const fullPath = path.join(TEMP_DIR, file);
+    await removePathEnsuring({
+      name: `modifyRoutes:delete:loading:${file}`,
+      path: fullPath,
+    });
+  }
+
+  // 3. Modify desktopRouter.config.tsx
   const routerConfigPath = path.join(
     TEMP_DIR,
     'src/app/[variants]/router/desktopRouter.config.tsx',
   );
   console.log('  Processing src/app/[variants]/router/desktopRouter.config.tsx...');
   await updateFile({
+    assertAfter: (code) => !/\bchangelog\b/.test(code),
     filePath: routerConfigPath,
     name: 'modifyRoutes:desktopRouterConfig',
     transformer: (code) => {
@@ -86,7 +99,6 @@ export const modifyRoutes = async (TEMP_DIR: string) => {
 
       return root.text();
     },
-    assertAfter: (code) => !/\bchangelog\b/.test(code),
   });
 };
 

package/scripts/electronWorkflow/modifiers/settingsContentToStatic.mts

@@ -0,0 +1,148 @@
+/* eslint-disable no-undef */
+import { Lang, parse } from '@ast-grep/napi';
+import path from 'node:path';
+
+import { invariant, isDirectRun, runStandalone, updateFile } from './utils.mjs';
+
+interface DynamicImportInfo {
+  componentName: string;
+  end: number;
+  importPath: string;
+  key: string;
+  start: number;
+}
+
+const isBusinessFeaturesEnabled = () => {
+  const raw = process.env.ENABLE_BUSINESS_FEATURES;
+  if (!raw) return false;
+  const normalized = raw.trim().toLowerCase();
+  return normalized === 'true' || normalized === '1';
+};
+
+const extractDynamicImportsFromMap = (code: string): DynamicImportInfo[] => {
+  const results: DynamicImportInfo[] = [];
+
+  const regex = /\[SettingsTabs\.(\w+)]:\s*dynamic\(\s*\(\)\s*=>\s*import\(\s*["']([^"']+)["']\s*\)/g;
+
+  let match;
+  while ((match = regex.exec(code)) !== null) {
+    const key = match[1];
+    const importPath = match[2];
+
+    const componentName = key.charAt(0).toUpperCase() + key.slice(1) + 'Tab';
+
+    results.push({
+      componentName,
+      end: 0,
+      importPath,
+      key,
+      start: 0,
+    });
+  }
+
+  return results;
+};
+
+const generateStaticImports = (imports: DynamicImportInfo[], keepBusinessTabs: boolean): string => {
+  return imports
+    .filter((imp) => keepBusinessTabs || !imp.importPath.includes('@/business/'))
+    .map((imp) => `import ${imp.componentName} from '${imp.importPath}';`)
+    .join('\n');
+};
+
+const generateStaticComponentMap = (
+  imports: DynamicImportInfo[],
+  keepBusinessTabs: boolean,
+): string => {
+  const entries = imports
+    .filter((imp) => keepBusinessTabs || !imp.importPath.includes('@/business/'))
+    .map((imp) => `  [SettingsTabs.${imp.key}]: ${imp.componentName},`);
+
+  return `const componentMap: Record<string, React.ComponentType<{ mobile?: boolean }>> = {\n${entries.join('\n')}\n}`;
+};
+
+export const convertSettingsContentToStatic = async (TEMP_DIR: string) => {
+  const filePath = path.join(
+    TEMP_DIR,
+    'src/app/[variants]/(main)/settings/features/SettingsContent.tsx',
+  );
+
+  console.log('  Processing SettingsContent.tsx dynamic imports...');
+
+  await updateFile({
+    assertAfter: (code) => {
+      const noDynamic = !/dynamic\(\s*\(\)\s*=>\s*import/.test(code);
+      const hasStaticMap = /componentMap:\s*Record<string,/.test(code);
+      return noDynamic && hasStaticMap;
+    },
+    filePath,
+    name: 'convertSettingsContentToStatic',
+    transformer: (code) => {
+      const keepBusinessTabs = isBusinessFeaturesEnabled();
+      if (keepBusinessTabs) {
+        console.log(
+          '    ENABLE_BUSINESS_FEATURES is enabled, preserving business Settings tabs in componentMap',
+        );
+      }
+
+      const imports = extractDynamicImportsFromMap(code);
+
+      invariant(
+        imports.length > 0,
+        '[convertSettingsContentToStatic] No dynamic imports found in SettingsContent.tsx',
+      );
+
+      console.log(`    Found ${imports.length} dynamic imports in componentMap`);
+
+      const staticImports = generateStaticImports(imports, keepBusinessTabs);
+      const staticComponentMap = generateStaticComponentMap(imports, keepBusinessTabs);
+
+      let result = code;
+
+      result = result.replace(
+        /import dynamic from ["']@\/libs\/next\/dynamic["'];\n?/,
+        '',
+      );
+
+      result = result.replace(
+        /import Loading from ["']@\/components\/Loading\/BrandTextLoading["'];\n?/,
+        '',
+      );
+
+      const ast = parse(Lang.Tsx, result);
+      const root = ast.root();
+
+      const lastImport = root.findAll({
+        rule: {
+          kind: 'import_statement',
+        },
+      }).at(-1);
+
+      invariant(
+        lastImport,
+        '[convertSettingsContentToStatic] No import statements found in SettingsContent.tsx',
+      );
+
+      const insertPos = lastImport!.range().end.index;
+      result = result.slice(0, insertPos) + '\nimport type React from \'react\';\n' + staticImports + result.slice(insertPos);
+
+      const componentMapRegex = /const componentMap = {[\S\s]*?\n};/;
+      invariant(
+        componentMapRegex.test(result),
+        '[convertSettingsContentToStatic] componentMap declaration not found in SettingsContent.tsx',
+      );
+
+      result = result.replace(componentMapRegex, staticComponentMap + ';');
+
+      result = result.replaceAll(/\n{3,}/g, '\n\n');
+
+      return result;
+    },
+  });
+};
+
+if (isDirectRun(import.meta.url)) {
+  await runStandalone('convertSettingsContentToStatic', convertSettingsContentToStatic, [
+    { lang: Lang.Tsx, path: 'src/app/[variants]/(main)/settings/features/SettingsContent.tsx' },
+  ]);
+}

package/scripts/electronWorkflow/modifiers/wrapChildrenWithClientOnly.mts

@@ -0,0 +1,73 @@
+import { Lang, parse } from '@ast-grep/napi';
+import path from 'node:path';
+
+import { invariant, isDirectRun, runStandalone, updateFile } from './utils.mjs';
+
+export const wrapChildrenWithClientOnly = async (TEMP_DIR: string) => {
+  const layoutPath = path.join(TEMP_DIR, 'src/app/[variants]/layout.tsx');
+
+  console.log('  Wrapping children with ClientOnly in layout.tsx...');
+
+  await updateFile({
+    assertAfter: (code) => {
+      const hasClientOnlyImport = /import ClientOnly from ["']@\/components\/client\/ClientOnly["']/.test(code);
+      const hasLoadingImport = /import Loading from ["']@\/components\/Loading\/BrandTextLoading["']/.test(code);
+      const hasClientOnlyWrapper = /<ClientOnly fallback={<Loading/.test(code);
+      return hasClientOnlyImport && hasLoadingImport && hasClientOnlyWrapper;
+    },
+    filePath: layoutPath,
+    name: 'wrapChildrenWithClientOnly',
+    transformer: (code) => {
+      const ast = parse(Lang.Tsx, code);
+      const root = ast.root();
+
+      let result = code;
+
+      const hasClientOnlyImport = /import ClientOnly from ["']@\/components\/client\/ClientOnly["']/.test(code);
+      const hasLoadingImport = /import Loading from ["']@\/components\/Loading\/BrandTextLoading["']/.test(code);
+
+      const lastImport = root.findAll({
+        rule: {
+          kind: 'import_statement',
+        },
+      }).at(-1);
+
+      invariant(lastImport, '[wrapChildrenWithClientOnly] No import statements found in layout.tsx');
+
+      const insertPos = lastImport!.range().end.index;
+      let importsToAdd = '';
+
+      if (!hasClientOnlyImport) {
+        importsToAdd += "\nimport ClientOnly from '@/components/client/ClientOnly';";
+      }
+      if (!hasLoadingImport) {
+        importsToAdd += "\nimport Loading from '@/components/Loading/BrandTextLoading';";
+      }
+
+      if (importsToAdd) {
+        result = result.slice(0, insertPos) + importsToAdd + result.slice(insertPos);
+      }
+
+      const authProviderPattern = /<AuthProvider>\s*{children}\s*<\/AuthProvider>/;
+      invariant(
+        authProviderPattern.test(result),
+        '[wrapChildrenWithClientOnly] Pattern <AuthProvider>{children}</AuthProvider> not found in layout.tsx',
+      );
+
+      result = result.replace(
+        authProviderPattern,
+        `<AuthProvider>
+          <ClientOnly fallback={<Loading />}>{children}</ClientOnly>
+        </AuthProvider>`,
+      );
+
+      return result;
+    },
+  });
+};
+
+if (isDirectRun(import.meta.url)) {
+  await runStandalone('wrapChildrenWithClientOnly', wrapChildrenWithClientOnly, [
+    { lang: Lang.Tsx, path: 'src/app/[variants]/layout.tsx' },
+  ]);
+}

package/src/app/[variants]/(main)/home/features/InputArea/SkillInstallBanner.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { getKlavisServerByServerIdentifier, getLobehubSkillProviderById } from '@lobechat/const';
+import { Avatar, Flexbox, Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Blocks } from 'lucide-react';
+import { type ReactNode, createElement, memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SkillStore from '@/features/SkillStore';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useToolStore } from '@/store/tool';
+
+const useStyles = createStyles(({ css, token }) => ({
+  banner: css`
+    cursor: pointer;
+
+    position: absolute;
+    z-index: 0;
+    inset-block-end: 0;
+    inset-inline: 0 0;
+
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-block-end: 6px;
+    padding-block: 42px 10px;
+    padding-inline: 16px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 20px;
+
+    background: ${token.colorFillQuaternary};
+    box-shadow: 0 12px 32px rgb(0 0 0 / 4%);
+
+    transition: background 0.2s ease-in-out;
+
+    &:hover {
+      background: ${token.colorFillQuaternary};
+    }
+  `,
+  icon: css`
+    color: ${token.colorTextSecondary};
+  `,
+  text: css`
+    font-size: 13px;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+const BANNER_SKILL_IDS = [
+  { id: 'gmail', type: 'klavis' },
+  { id: 'notion', type: 'klavis' },
+  { id: 'google-drive', type: 'klavis' },
+  { id: 'google-calendar', type: 'klavis' },
+  { id: 'slack', type: 'klavis' },
+  { id: 'twitter', type: 'lobehub' },
+  { id: 'github', type: 'klavis' },
+] as const;
+
+const SkillInstallBanner = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('plugin');
+  const [open, setOpen] = useState(false);
+
+  const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
+  const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);
+
+  // Prefetch skill connections data so SkillStore opens faster
+  const [useFetchLobehubSkillConnections, useFetchUserKlavisServers] = useToolStore((s) => [
+    s.useFetchLobehubSkillConnections,
+    s.useFetchUserKlavisServers,
+  ]);
+  useFetchLobehubSkillConnections(isLobehubSkillEnabled);
+  useFetchUserKlavisServers(isKlavisEnabled);
+
+  const avatarItems = useMemo(() => {
+    const items: Array<{ avatar: ReactNode; key: string; title: string }> = [];
+
+    for (const skill of BANNER_SKILL_IDS) {
+      if (skill.type === 'lobehub') {
+        const provider = getLobehubSkillProviderById(skill.id);
+        if (provider) {
+          items.push({
+            avatar:
+              typeof provider.icon === 'string'
+                ? provider.icon
+                : createElement(provider.icon, { size: 14 }),
+            key: provider.id,
+            title: provider.label,
+          });
+        }
+      } else {
+        const server = getKlavisServerByServerIdentifier(skill.id);
+        if (server) {
+          items.push({
+            avatar:
+              typeof server.icon === 'string'
+                ? server.icon
+                : createElement(server.icon, { size: 14 }),
+            key: server.identifier,
+            title: server.label,
+          });
+        }
+      }
+    }
+
+    return items;
+  }, []);
+
+  // Don't show banner if no skills are enabled
+  if (!isLobehubSkillEnabled && !isKlavisEnabled) return null;
+
+  return (
+    <>
+      <div className={styles.banner} onClick={() => setOpen(true)}>
+        <Flexbox align="center" gap={8} horizontal>
+          <Icon className={styles.icon} icon={Blocks} size={18} />
+          <span className={styles.text}>{t('skillInstallBanner.title')}</span>
+        </Flexbox>
+        {avatarItems.length > 0 && <Avatar.Group items={avatarItems} shape="circle" size={24} />}
+      </div>
+      <SkillStore open={open} setOpen={setOpen} />
+    </>
+  );
+});
+
+SkillInstallBanner.displayName = 'SkillInstallBanner';
+
+export default SkillInstallBanner;

package/src/app/[variants]/(main)/home/features/InputArea/index.tsx

@@ -9,6 +9,7 @@ import { useChatStore } from '@/store/chat';
 import { useHomeStore } from '@/store/home';
 
 import ModeHeader from './ModeHeader';
+import SkillInstallBanner from './SkillInstallBanner';
 import StarterList from './StarterList';
 import { useSend } from './useSend';
 
@@ -36,38 +37,44 @@ const InputArea = () => {
         boxShadow: '0 12px 32px rgba(0,0,0,.04)',
       },
     }),
-    [inputActiveMode],
+    [],
   );
 
   return (
     <Flexbox gap={16} style={{ marginBottom: 16 }}>
-      <DragUploadZone onUploadFiles={handleUploadFiles}>
-        <ChatInputProvider
-          agentId={inboxAgentId}
-          allowExpand={false}
-          chatInputEditorRef={(instance) => {
-            if (!instance) return;
-            useChatStore.setState({ mainInputEditor: instance });
-          }}
-          leftActions={leftActions}
-          onMarkdownContentChange={(content) => {
-            useChatStore.setState({ inputMessage: content });
-          }}
-          onSend={send}
-          sendButtonProps={{
-            disabled: loading,
-            generating: loading,
-            onStop: () => {},
-            shape: 'round',
-          }}
+      <Flexbox style={{ paddingBottom: 32, position: 'relative' }}>
+        <SkillInstallBanner />
+        <DragUploadZone
+          onUploadFiles={handleUploadFiles}
+          style={{ position: 'relative', zIndex: 1 }}
         >
-          <DesktopChatInput
-            dropdownPlacement="bottomLeft"
-            extenHeaderContent={inputActiveMode ? <ModeHeader /> : undefined}
-            inputContainerProps={inputContainerProps}
-          />
-        </ChatInputProvider>
-      </DragUploadZone>
+          <ChatInputProvider
+            agentId={inboxAgentId}
+            allowExpand={false}
+            chatInputEditorRef={(instance) => {
+              if (!instance) return;
+              useChatStore.setState({ mainInputEditor: instance });
+            }}
+            leftActions={leftActions}
+            onMarkdownContentChange={(content) => {
+              useChatStore.setState({ inputMessage: content });
+            }}
+            onSend={send}
+            sendButtonProps={{
+              disabled: loading,
+              generating: loading,
+              onStop: () => {},
+              shape: 'round',
+            }}
+          >
+            <DesktopChatInput
+              dropdownPlacement="bottomLeft"
+              extenHeaderContent={inputActiveMode ? <ModeHeader /> : undefined}
+              inputContainerProps={inputContainerProps}
+            />
+          </ChatInputProvider>
+        </DragUploadZone>
+      </Flexbox>
 
       <StarterList />
     </Flexbox>

package/src/app/[variants]/(main)/settings/features/SettingHeader.tsx

@@ -3,15 +3,19 @@ import { Divider } from 'antd';
 import { FC, ReactNode } from 'react';
 
 interface SettingHeaderProps {
+  extra?: ReactNode;
   title: ReactNode;
 }
 
-const SettingHeader: FC<SettingHeaderProps> = ({ title }) => {
+const SettingHeader: FC<SettingHeaderProps> = ({ title, extra }) => {
   return (
     <Flexbox gap={24} style={{ paddingTop: 12 }}>
-      <Text fontSize={24} strong>
-        {title}
-      </Text>
+      <Flexbox align={'center'} horizontal justify={'space-between'}>
+        <Text fontSize={24} strong>
+          {title}
+        </Text>
+        {extra}
+      </Flexbox>
       <Divider style={{ margin: 0 }} />
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/features/SettingsContent.tsx

@@ -56,6 +56,9 @@ const componentMap = {
   [SettingsTabs.Security]: dynamic(() => import('../security'), {
     loading: () => <Loading debugId="Settings > Security" />,
   }),
+  [SettingsTabs.Skill]: dynamic(() => import('../skill'), {
+    loading: () => <Loading debugId="Settings > Skill" />,
+  }),
   ...(ENABLE_BUSINESS_FEATURES
     ? ({
         [SettingsTabs.Plans]: dynamic(

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -2,6 +2,7 @@ import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import { isDesktop } from '@lobechat/const';
 import { Avatar } from '@lobehub/ui';
 import {
+  Blocks,
   Brain,
   BrainCircuit,
   ChartColumnBigIcon,
@@ -182,6 +183,11 @@ export const useCategory = () => {
         key: SettingsTabs.Agent,
         label: t('tab.agent'),
       },
+      {
+        icon: Blocks,
+        key: SettingsTabs.Skill,
+        label: t('tab.skill'),
+      },
       {
         icon: BrainCircuit,
         key: SettingsTabs.Memory,