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

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)/agent/cron/[cronId]/CronConfig.ts

@@ -61,24 +61,24 @@ export const TIMEZONE_OPTIONS = [
 
 // Weekday options for checkbox group
 export const WEEKDAY_OPTIONS = [
-  { label: 'Mon', value: 1 },
-  { label: 'Tue', value: 2 },
-  { label: 'Wed', value: 3 },
-  { label: 'Thu', value: 4 },
-  { label: 'Fri', value: 5 },
-  { label: 'Sat', value: 6 },
-  { label: 'Sun', value: 0 },
-];
+  { label: 'agentCronJobs.weekday.short.monday', value: 1 },
+  { label: 'agentCronJobs.weekday.short.tuesday', value: 2 },
+  { label: 'agentCronJobs.weekday.short.wednesday', value: 3 },
+  { label: 'agentCronJobs.weekday.short.thursday', value: 4 },
+  { label: 'agentCronJobs.weekday.short.friday', value: 5 },
+  { label: 'agentCronJobs.weekday.short.saturday', value: 6 },
+  { label: 'agentCronJobs.weekday.short.sunday', value: 0 },
+] as const;
 
-// Weekday labels for display
+// Weekday labels for display (i18n keys)
 export const WEEKDAY_LABELS: Record<number, string> = {
-  0: 'Sunday',
-  1: 'Monday',
-  2: 'Tuesday',
-  3: 'Wednesday',
-  4: 'Thursday',
-  5: 'Friday',
-  6: 'Saturday',
+  0: 'agentCronJobs.weekday.sunday',
+  1: 'agentCronJobs.weekday.monday',
+  2: 'agentCronJobs.weekday.tuesday',
+  3: 'agentCronJobs.weekday.wednesday',
+  4: 'agentCronJobs.weekday.thursday',
+  5: 'agentCronJobs.weekday.friday',
+  6: 'agentCronJobs.weekday.saturday',
 };
 
 /**

package/src/app/[variants]/(main)/agent/cron/[cronId]/features/CronJobSaveButton.tsx

@@ -22,7 +22,7 @@ const CronJobSaveButton = memo<CronJobSaveButtonProps>(({ disabled, loading, onS
         style={{ width: 200 }}
         type="primary"
       >
-        {t('agentCronJobs.saveAsNew', { defaultValue: 'Save as New Scheduled Task' })}
+        {t('agentCronJobs.saveAsNew')}
       </Button>
     </Flexbox>
   );

package/src/app/[variants]/(main)/agent/cron/[cronId]/features/CronJobScheduleConfig.tsx

@@ -81,7 +81,7 @@ const CronJobScheduleConfig = memo<CronJobScheduleConfigProps>(
       if (scheduleType === 'weekly' && weekdays.length > 0) {
         result.push({
           key: 'weekdays',
-          label: weekdays.map((day) => WEEKDAY_LABELS[day]).join(', '),
+          label: weekdays.map((day) => t(WEEKDAY_LABELS[day] as any)).join(', '),
         });
       }
 
@@ -126,7 +126,10 @@ const CronJobScheduleConfig = memo<CronJobScheduleConfigProps>(
                 maxTagCount="responsive"
                 mode="multiple"
                 onChange={(values: number[]) => onScheduleChange({ weekdays: values })}
-                options={WEEKDAY_OPTIONS}
+                options={WEEKDAY_OPTIONS.map((opt) => ({
+                  label: t(opt.label as any),
+                  value: opt.value,
+                }))}
                 placeholder="Select days"
                 size="small"
                 style={{ minWidth: 150 }}

package/src/app/[variants]/(main)/community/features/Search.tsx

@@ -33,7 +33,7 @@ const Search = memo<StoreSearchBarProps>(() => {
   const { q } = useQuery() as { q?: string };
   const router = useQueryRoute();
   const [word, setWord] = useState<string>(q || '');
-  const activeTab = pathname.split('/')[2] || 'assistant';
+  const activeTab = pathname.split('/')[2] || 'agent';
   const handleSearch = (value: string) => {
     router.push(urlJoin('/community', activeTab), {
       query: value ? { q: value } : {},

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,